/*
Theme Name: 	Mini Driving School
*/

html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}

body,html{ background: #333; width: 100%; height: 100%; position: relative; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body{ background: url('img/background.jpg') repeat; }

em{ font-style: italic; }
strong{ font-weight: bold; }

#main{ position:absolute; width:710px; height: 500px; top:50%; left: 50%; margin-left: -355px; margin-top: -250px; background: url("img/background.png") no-repeat 0 0; }

#menu{ width: 450px; height: 30px; position: absolute; right:0; top:34px; }

#menu a{ float: left; display: block; height: 30px; background: url('img/menu.gif') no-repeat 0 0; }

#menu a.menu_home{ width: 19px; }


#menu a.menu_price{ width: 55px; background-position: -34px 0; }

#menu a.menu_testimonials{ width: 100px; background-position: -100px 0; }

#menu a.menu_passplus{ width: 90px; background-position: -200px 0; }

#menu a.menu_contact{ width: 100px; background-position: -300px 0; }






.text-content{ position: absolute; top:85px; left: 5px; width: 380px; height: 370px;  }

.content{ padding: 15px 20px; height: 345px; overflow-y: auto; }

img.page-image{ position: absolute; top:76px; right: 14px; }

h2{ display:block; width: 380px; height: 28px;  text-indent: -9999px; }

body.home h2{ background: url('img/title_home.jpg') no-repeat 0 0; }
body.price h2{ background: url('img/title_price.jpg') no-repeat 0 0; }
body.testimonials h2{ background: url('img/title_testimonials.jpg') no-repeat 0 0; }
body.pass-plus h2{ background: url('img/title_passplus.jpg') no-repeat 0 0; }
body.contact h2{ background: url('img/title_contact.jpg') no-repeat 0 0; }



p{ font-family: Helvetica, arial, sans-serif; font-size: 12px; color:#444; line-height: 150%; margin-bottom: 15px; }




.form1 {
	font-family: Verdana, Helvetica, Sans-serif;
	font-size: 11px;
	color: #444;
	margin-bottom: 4px;
	/*background-color : black;*/	
}
.form1 input
{
	display: block;
	width: 96%;
	padding: 1%;
	border: 1px solid #666;
}

textarea{ border: 1px solid #666; width: 96%;
	padding: 1%; height: 45px; }

label{ display:block; margin-top: 8px; }

.form2 {
	font-family: Verdana, Helvetica, Sans-serif;
	font-size: 11px;
	color: #444;
	
	/*background-color : black;*/	
}
.form2 input
{
	display: block;
	width: 100%;
	height: 50px;
}


.submit {
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 11px;
	color: #444;
	
	
	/*background-color : black;*/	
}
.submit input
{
	display: block;
	width: 30%;
	border: 1px solid #666;
	background: #666;
	color:#FFF;
	font-weight: bold;
	padding: 5px;
}

a#FB
{
	display: block;
	position: absolute;
	top: 35px;
	right: 50px;
	outline: none;
	border: none;
}

a#FB img
{
	border: none;
}

.bottom_c {
	background: url('img/10h_star.png') no-repeat;
	border:0px none;
	display: block;
	width: 120px;
	height: 120px;
	position: absolute;
	top: 0;
	left: 0;
	display:none;
}

.mob_menu_trigger {
	display: none;
}


@media only screen and (max-width: 768px) {
	html, body {
		height: auto;
	}
	body {
		background: none;
	}
	html{ background: url('img/background.jpg') repeat; }
	#main {

		background: url("img/mob-bg.png") no-repeat 25px 15px;
		background-size: 162px;
		position: relative; top: auto; left: auto; right: auto; bottom: auto;
		
		width: 100%;
		height: auto;
		margin: 0;
		padding: 60px 0 80px 0;
	}
	#menu {
		background-color: rgba(10, 10, 10, 0.9);
		display: none;
		width: 90%;
		height: auto;
		left: 5%;
		top: 60px;
		z-index: 1000;
		padding: 20px 0 30px 0;
	}
	#menu.active {
		display: block;
	}
	#menu a {
		display: block;
		float: none;
		margin: 0 auto;
	}
	.text-content {
		background-color: #FFF;
		padding-top: 15px;
		padding-bottom: 110%;
		position: relative; top: auto; left: auto; right: auto; bottom: auto;
		width: 90%; height: auto;
		margin: 0 auto;
	}
	.content {
		height: auto;
	}
	.content p:last-child {
		margin-bottom: 0px;
	}
	h2 {
		width: 100%;
	}
	img.page-image {
		border-radius: 10px;
		display: block;
		position: relative;
		top: auto; left: auto; right: auto; bottom: auto;
		width: 80%;
		margin: 0 auto;
		margin-top: -105%;
	}
	.mob_menu_trigger {
		display: block;
		width: 22px;
		height: 22px;
		top: 25px;
		right: 10%;
		position: absolute;
	}
	.mob_menu_trigger span {
		background: #FFF;
		display: block;
		height: 3px;
		width: 100%;
		position: absolute;
		transition: transform 200ms;
	}
	.mob_menu_trigger span::before {
		background: #FFF;
		content: '';
		display: block;
		height: 3px;
		width: 100%;
		top: 8px;
		position: absolute;

	}
	.mob_menu_trigger span::after {
		background: #FFF;
		content: '';
		display: block;
		height: 3px;
		width: 100%;
		top: 16px;
		position: absolute;
	}
	.mob_menu_trigger.active span {
		transform: rotate(45deg);
		top: 8px
	}
	.mob_menu_trigger.active span::before {
		display: none;
	}
	.mob_menu_trigger.active span::after {
		transform: rotate(-90deg);
		top: 0px
	}
	a#FB {
		top: auto;
		bottom: 15px;
		right: 10%;
	}
}