@import url(https://fonts.googleapis.com/css?family=Fauna+One|Muli);

#mainform{

width:960px;

margin:20px auto;

padding-top:20px;

font-family: 'Fauna One', serif;

display:block;

}

h2{

margin-left: 65px;

text-shadow:1px 0px 3px gray;

}

h3{

font-size:18px;

text-align:center;

text-shadow:1px 0px 3px gray;

}

#onclick{

cursor: pointer;

    padding: 5px 5px 5px 15px;

    margin: 22px 0;

    line-height: 35px;

    width: 160px;

    color: white;

    background-color: #22b1cc;

    box-shadow: 1px 1px 5px grey;

    border-radius: 3px;

}

b{

font-size:18px;

text-shadow:1px 0px 3px gray;

}

#popup{

padding-top:80px;

}

.form{

border-radius:2px;

padding:20px 30px;

box-shadow:0 0 15px;

font-size:14px;

font-weight:bold;

width:350px;

margin:20px 250px 0 35px;

float:left;

}

input{

width:100%;

height:25px;

margin-top:5px;

border:1px solid #999;

border-radius:3px;

padding:5px;

font-family: 'Fauna One', serif;

}

input[type=button], input[type=submit] {

    background-color: #22b1cc;

    border: 1px solid white;

    font-family: 'Fauna One', serif;

    font-Weight: bold;

    font-size: 18px;

    color: white;

    width: 49%;

    height: 36px;

    cursor: pointer;

}

textarea{

width:100%;

height:80px;

margin-top:5px;

border-radius:3px;

padding:5px;

resize:none;

font-family: 'Fauna One', serif;

}

#contactdiv{

opacity:0.92;

position: fixed;

top: 0px;

left: 0px;

height: 100%;

width: 100%;

background: #000;

display: none;

z-index: 9999999;

}

#logindiv{

opacity:0.92;

position: absolute;

top: 0px;

left: 0px;

height: 100%;

width: 100%;

background: #000;

display: none;

}



#login,#contact{

width:350px;

margin:0px;

background-color:white;

font-family: 'Fauna One', serif;

position: relative;

border: 5px solid rgb(90, 158, 181);

}

/*.img{

float: right;

margin-top: -35px;

margin-right: -37px;

}*/

img#cancel {

cursor: pointer;

margin-top: -35px;

margin-right: -37px;

float: right;

}

#contact{

left: 50%;

top: 50%;

margin-left:-210px;

margin-top:-255px;

position: fixed;

}

#login{

left: 50%;

top: 50%;

margin-left:-210px;

margin-top:-158px;

}

@media only screen and (max-width: 320px){

	#onclick {

   	 	cursor: pointer;

    	padding: 2px 3px 2px 10px;

    	margin: 0 0 0;

    	line-height: 18px;

    	width: auto;

    	color: white;

    	background-color: #22b1cc;

    	box-shadow: 1px 1px 5px grey;

    	border-radius: 3px;

	}

	.background {

    	position: absolute;

    	width: 100%;

    	height: 50%;

    	background: url(../images/banner_bg.png) no-repeat center;

    	background-size: cover;

    	max-height: 330px;

	}

	.background h5 {

    	padding: 34% 0 0;

    	text-align: center;

    	color: #FFFF00;

    	font-size: 3.5em;   	

    	text-shadow: 1px 0px 3px gray;

	}

	.background h3 {

    	color: #FFFFFF;

    	font-size: 2em;   	

	}

	#contact {

    	left: 70%;

    	top: 48%;

    	margin-left: -210px;

    	margin-top: -261px;

    	position: fixed;

	}

	#login, #contact {

    	width: 70%;

    	margin: 0px;

    	background-color: white;

    	font-family: 'Fauna One', serif;

    	position: relative;

    	border: 5px solid rgb(90, 158, 181);

	}

}

@media only screen and (max-width: 360px){

	#onclick {

   	 	cursor: pointer;

    	padding: 2px 3px 2px 10px;

    	margin: 0 0 0;

    	line-height: 18px;

    	width: auto;

    	color: white;

    	background-color: #22b1cc;

    	box-shadow: 1px 1px 5px grey;

    	border-radius: 3px;

	}

	.background {

    	position: absolute;

    	width: 100%;

    	height: 50%;

    	background: url(../images/banner_bg.png) no-repeat center;

    	background-size: cover;

    	max-height: 330px;

	}

	.background h5 {

    	padding: 34% 0 0;

    	text-align: center;

    	color: #FFFF00;

    	font-size: 3.5em;   	

    	text-shadow: 1px 0px 3px gray;

	}

	.background h3 {

    	color: #FFFFFF;

    	font-size: 2em;   	

	}

	#contact {

    	left: 70%;

    	top: 48%;

    	margin-left: -210px;

    	margin-top: -261px;

    	position: fixed;

	}

	#login, #contact {

    	width: 70%;

    	margin: 0px;

    	background-color: white;

    	font-family: 'Fauna One', serif;

    	position: relative;

    	border: 5px solid rgb(90, 158, 181);

	}

}

@media only screen and (max-width: 480px){

	#onclick {

   	 	cursor: pointer;

    	padding: 2px 3px 2px 10px;

    	margin: 0 0 0;

    	line-height: 18px;

    	width: auto;

    	color: white;

    	background-color: #22b1cc;

    	box-shadow: 1px 1px 5px grey;

    	border-radius: 3px;

	}

	.background {

    	position: absolute;

    	width: 100%;

    	height: 50%;

    	background: url(../images/banner_bg.png) no-repeat center;

    	background-size: cover;

    	max-height: 330px;

	}

	.background h5 {

    	padding: 34% 0 0;

    	text-align: center;

    	color: #FFFF00;

    	font-size: 3.5em;   	

    	text-shadow: 1px 0px 3px gray;

	}

	.background h3 {

    	color: #FFFFFF;

    	font-size: 2em;   	

	}

	#contact {

    	left: 70%;

    	top: 48%;

    	margin-left: -210px;

    	margin-top: -261px;

    	position: fixed;

	}

	#login, #contact {

    	width: 70%;

    	margin: 0px;

    	background-color: white;

    	font-family: 'Fauna One', serif;

    	position: relative;

    	border: 5px solid rgb(90, 158, 181);

	}

}

@media only screen and (max-width: 640px){

	#onclick {

   	 	cursor: pointer;

    	padding: 2px 3px 2px 10px;

    	margin: 0 0 0;

    	line-height: 18px;

    	width: auto;

    	color: white;

    	background-color: #22b1cc;

    	box-shadow: 1px 1px 5px grey;

    	border-radius: 3px;

	}

	.background {

    	position: absolute;

    	width: 100%;

    	height: 50%;

    	background: url(../images/banner_bg.png) no-repeat center;

    	background-size: cover;

    	max-height: 330px;

	}

	.background h5 {

    	padding: 35% 0 0;

    	text-align: center;

    	color: #FFFF00;

    	font-size: 3.5em;   	

    	text-shadow: 1px 0px 3px gray;

	}

	.background h3 {

    	color: #FFFFFF;

    	font-size: 2em;   	

	}

	.top-grid{

		padding: 80% 0% 0;

	}

	.col-bg {

    	margin-bottom: 5%;

    	height: auto;

	}

	.phone {

    	float: left;

    	width: 100%;

    	margin: 5% 0% 5% 0%;

    	text-align: center;

	}

	.brainiac_h2 {

    	padding-left: 10px;

    	font-size: 14px;

    	vertical-align: middle;

    	color: #ffffff;

	}

	.logo ul li.line {

    	font-size: 16px;

    	margin-left: 0%;

    	font-family: Palace Script MT;

		margin-top: 0px;

	}

	.footer_span_1_of_5 {

    	width: 100%;

	}

	#contact {

    	left: 5%;

    	top: 7%;

    	margin-left: -210px;

    	margin-top: -261px;

    	position: fixed;

	}

	#login, #contact {

    	width: 70%;

    	margin: 0px;

    	background-color: white;

    	font-family: 'Fauna One', serif;

    	position: relative;

    	border: 5px solid rgb(90, 158, 181);

	}

}

@media only screen and (max-width: 767px){

	

}