stylepage.css

html {
	height: 100%;
}

/*MailChimp Box*/


.container {
	display:none;
	opacity: .95;
	background-color:#FFFFFF; width:400px; border:1px solid #999999;
	 padding:5 5 15 5; 
	 margin: 0 auto;
	 position:relative;
	 top: 30%;
	 font-family: 'Offside', cursive;'
	 opacity: .9;
	 text-align: center;
	}
.pageTitle {background-color:#DDDDDD; padding:8px; font-size:16px; font-weight:bold; color:#000000; text-align:left;}
.pageTitleAlert {background-color:#FF0000; padding:8px; font-size:16px; font-weight:bold; color:#FFFFFF; text-align:left;}
.pageTitleSuccess {background-color:#33CC00; padding:8px; font-size:16px; font-weight:bold; color:#FFFFFF; text-align:left;}
.formLabel {font-size:13px;}
.error {color:#FF0000; font-weight:bold; font-size:11px;}
.small {font-size:11px;}

/* Begin Structure */
a {
	padding-left: 15%;
	padding-right:15%;
}

#map { 
	height:100%;
	width:100%;
	position: absolute;
	top:0;
	left:0;
 }

body {
	background-color: #ddd;
	margin: 0px;
	height:100%;
	width: 100%;
}

#content.about {
	background-color: black;
	padding-top: 0px;
}
.head-foot-bars {

}

/* End Structure */
/* Classes */
/*.clear {
	clear: both;
}*/
/* End Classes */

/* Begin Header */





#headerimg {
	margin-left: 1%;
	float: left;
	margin-top: 0%;
	height: 100%;
	
}

#logo {
	padding-top: 10%;
	min-width:5px;
	min-height: 35px;
	height:85%;
	opacity: .95;
	-moz-transition: margin 1s ease-in-out;
	-webkit-transition: margin 1s ease-in-out;
	transition: margin 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

#logo:hover {
	opacity: 1.0;
	margin-top: '5px'
}

#headernav {
	width: 50%;
	min-height: 40px;
	float: right;
	text-align: right;
	margin-right: 1%;
	height: 100%;
	max-height:90px;
	position:relative;
/*	display:inline-block;*/
}

#headernav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	display: inline;
	height: 100%;
	width:20%;
}

#headernav ul li {
	height: 100%;
	width: 33.33%;
	float: right;
}



.nav-buttons a {
	box-sizing: border-box;
	display: inline-block;
	height:100%;
	width:100%;
	text-align: center;
	padding: 10% 10% 10% 10%;
	border-right: solid 1px #333333;
	font-size: 1.3em;
	text-decoration: none;
	-webkit-transition: padding .2s ease-in-out;
	-moz-transition: padding .2s ease-in-out;
	transition: padding .2s ease-in-out;
}

@media all and (max-width: 575px) and (min-width: 0px) {
	.nav-buttons a {
		font-size: .8em;
	}
}

.nav-buttons a:hover {
	padding-top: 12%;
}


#sign-in a,
#sign-in a:hover {
/*	background-color: #ddd9c9;*/
	color: white;

}

/*#headernav li a img {
	padding-bottom: 3px;
}
#headernav li a:hover img {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);
	border-bottom: solid 1px #0a97b5;
}*/

/*#headernav #sign-in a:hover img {
	border: none;
}
#headernav li.no-border-right a {
	border-right: none;
}*/


a:visited
{
color:white;
}

/*side bar start*/
/*#sidebar
{
    position:fixed;
    float: left;
    margin-top: 130px;
    width: 250px;
    background: white;
    min-height: 100%;
    opacity: .75;
}*/
/*sidebar end*/


/* Navigation */
/*.navigation {
	width: 950px;
}
.navigation a {
	position: relative;
	display: block;
	width: 158px;
	height: 35px;
	background-color: black;
}
.navigation .alignleft a img {
	position: absolute;
	top: 10px;
	right: 15px;
}
.navigation .alignright a img {
	position: absolute;
	top: 10px;
	left: 15px;
}
.navigation .alignleft,
.navigation .alignright {
	width: 178px;
	height: 35px;
}
.navigation .alignright {
	float: right;
	text-align: right;
	width: 158px;
}
.navigation .alignleft {
	float: left;
}*/
/* End Navigation */

#feedback-page{
	text-align:center;
}


#form-div {
	display:none; /*comment out to show box*/
	background-color:rgba(72,72,72,0.4);
	padding-left:35px;
	padding-right:35px;
	padding-top:35px;
	padding-bottom:50px;
	width: 450px;
	float: left;
	top: 40%;
	left: 40%;
	position: absolute;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
	color:#0493bd;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20%;
	border-radius: 0;
	line-height: 22px;
	background-color: #fbfbfb;
	padding: 13px 13px 13px 54px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #3498db;
	color: #3498db;
	outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
	color:#30aed6;
	border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 30px 30px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

textarea {
	width: 100%;
	height: 150px;
	line-height: 150%;
}

/*email, name box end*/

/*Question box Stuff*/
	.questionbox {
	display: none;
	top: 275px;
	/*padding-left:5%;
	padding-right:5%;*/
/*	padding-top:4%;*/
	/*padding-bottom:3%;*/
	width: 40%;
	max-width:573px;
	max-height:336px;
	min-height:20%;
	min-width:30%;
	/*min-height: 10px;*/
	height: 40%;
	margin:0 auto;
	/*float: left;*/
	/*top: 30%;
	left: 36%;
*/	position: relative;
  	-moz-border-radius: 15px;
  	-webkit-border-radius: 15px;
  	background: rgba(3, 5, 5, 0.8);
  	font-size: 18px;
    box-shadow: 0 -3px 8px rgba(0,0,0,.2),
              0 4px 10px rgba(255,255,255,1),
              inset 0 2px 4px rgba(0,0,0,.2),
              inset 0 -2px 4px rgba(255,255,255,1);
 /*background-color: #1E1F1F;*/
 /*opacity:.8;*/
  }
.questionbox h2 {
	font-family: 'Offside', cursive;'
	font-size: 27px;
	overflow: none;
	text-align: center;
	color:white;
	padding-left: 10%;
	padding-right: 10%
}

.questionbox h1 {
	padding-top: 35%;
	padding-bottom: 30%;
	font-family: 'Offside', cursive;'
	font-size: 60%;
/*	overflow: none;*/
	text-align: center;
	color:white;
	opacity:1;
	float:top;
}

.circle 
{
	overflow: hidden;
}
.circle .box h1 {
	position: absolute;
    width: 100%;
    left: 0;
    top: 48%;
    line-height: 1em;
    height: 1em;
    font-size: 100%;
    overflow: hidden;
}

.circle .box {
	display:block;
    float:left;
    padding: 12.5%;
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
    position: relative;
/*	text-align: center;
	display:block;
	padding:12.5%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
width:auto;
height:auto;
behavior: url(PIE.htc);
/*position:absolute;
display:inline-block;
transition: 0.1s all ease-in-out;*/
}

@media (max-width: 320px) {
    .circle .box {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px){
    .circle .box {padding: 25%;}
}

@media (min-width: 801px){
    .circle .box {padding: 12.5%;}
}


#intern-circle {
	left: 0;
	bottom: 0;
	background:rgba(111, 179, 169, .75);
}

#internship-circle {
	right: 0;
	bottom: 0;
	background:rgba(207, 100, 66, .75);
}

#intern-circle:hover {
	background:rgba(111, 179, 169, 1);
}

#internship-circle:hover {
	background:rgba(207, 100, 66, 1);
}
 #intern-circle:active {

 }
#internship-circle:active {

}


/*---------------Question Box stuff ends------------*/

#welcomebox{
	display: none;
	text-align: center;
	max-width: 45%;
	min-width:35%;
	margin: 0px auto;
	min-height: 100px;
	max-height: 300px;
	/*min-height: 30%;
	max-height:35%;*/
	font-color:rg(255,255,255);
	padding: 3%;
	background-color: #1E1F1F;
	opacity: .95;
	font-family: 'Offside', cursive;'
	-moz-border-radius: 15px;
  	webkit-border-radius: 15px;
  	border-radius:15px;

	top: 300px;
	position:relative;
}

#welcomebox h2 {
	float: top;
	font-family: 'Offside', cursive;'
	font-size: 27px;
	/*overflow: none;*/
	text-align: center;
	color:white;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 4%;
}

#welcomebox p {
	font-family: 'Offside', cursive;'
	font-size: 25px;
	text-align: center;
	/*color: white;*/
	opacity: 1;
	color: rgb(255, 255, 255);
	position:relative;
}

#welcomeimg {
	width: 210px;
	padding-top:35%;
	padding-left: 40%;
	position:relative;
}

#next {
	font-color: #FFD700;
}