/* 
Ultimate2 CSS stylesheet for touchupautobody.com
*/

/*** GLOBAL  ***/
html,body{height:100%; min-height:100%}



body {
	font-family: 'Old Standard TT', serif;
	font-weight: 400;
	font-size:16px;
	line-height:1.5em;
	margin:0 auto;
	padding:0;
	color:#fff;
	background-color:#222222;
	background-image: none;
	background-repeat: repeat;
	background-attachment: fixed;
}





* {
	margin:0;
	padding:0;
}



.clr{clear:both}
form{margin:0; padding:0;}

/*** END OF GLOBAL  ***/

/*** DEFAULT ELEMENT STYLES ***/
/* heading */
h1, h2, h3{line-height:1em;margin-bottom:0.8em; font-family: 'Lato', sans-serif; font-weight:900; color:#ccc}
h4, h5, h6{line-height:1.25em;margin-bottom:0.5em; font-family:'Lato', sans-serif; font-weight:700; color:#ccc;  }
h1 {font-size:1.86em}
h2 {font-size:1.46em;}
h3 {font-size:1.2em;}
h4 {font-size:.93em;}
h5, h6 {font-size:0.86em;}


/* links */
a, a:visited {color:#ffffff; text-decoration:none;}
a:hover{color:#ffffff; text-decoration:underline;}
a img{border:none}
a.content{font-weight:bold;text-decoration:underline;font-style:italic}



/* lists, blockquotes and paragraphs */
blockquote{font-size:1.467em;font-style:italic; font-family:times; width:60%;background-color:#ffe271;border-left:solid 3px #1575b8;margin:2% 15%;padding:2% 5%}
p {font-size:1em;line-height:1.5em;margin-bottom:1.2em;}
ul, ol  {font-size:1em;line-height:1.3em; margin-bottom:1.5em;}
ul, ol {	margin:10px 0 20px 20px;}
li ol, li ul{	list-style:square;	margin-bottom:0;	margin-top:0;}
li ol {list-style:decimal;}

/**** Navigation LInks ******/
li a{font-size: 1.8 em; }

	

/* code */
.code {
	font-family:Verdana, Arial;
	letter-spacing:1px;
	margin:25px 0 25px 0px;
	display:block;
	font-size:0.9em;
	border-left:4px solid #e0e0e0;
	padding:15px 10px;
}

/*** END OF DEFAULT ELEMENT STYLES ***/

/*** CLASSES THAT MANIPULATE ***/
.i{font-style:italic}
.b{font-weight:bold}
.u{text-decoration:underline}
.c{text-align:center}
.fl{float:left; }
.fr{float:right;}
.fc{width:50%;margin-left:25%;}
.big{font-size:300%;line-height:150%}
.big200{font-size:200%;line-height:100%}
.big150{font-size:150%;line-height:125%}
.bshadow{border: 1px solid #fff;box-shadow:15px 15px 15px #000;border-radius:30px;margin:0px 30px 30px 0px;height:auto;width:auto;}
.bshadow p{margin: 2% 4% 1% 4% }
.bshadow ul li{margin: 0% 4% 1% 5% }
.tshadow{text-shadow:5px 5px 15px #000;}
.imgleft{float:left; margin-right:2%; margin-top:5px;}
.imgborder{padding:0px; margin:5px 0px;}
.imgright{float:right; margin-left:2%;}
.imgcenter{ margin:5px 0px 10px 0px; display:block; text-align:center}
/*** END OF CLASSES THAT MANIPULATE ***/


/**** RESPONSIVE NAVIGATION ****/

    
/*** CONTAINERS ***/

#wrapper{width:100%;height:auto;border: solid 0px #c0c0c0;background-image:url(../images/bg-wrapper.png);  background-size:100%;overflow:hide}



#navigation{width:96%;padding: 0 2% 0 2%;height:30px;border: solid 2px #c0c0c0}

#menubar{position:relative; width:100%;height:50px; border-bottom: solid 1px #D33638;; z-index:+100}
#menu{width:90%; height:100%; margin:10px auto; border: solid 0px blue}
#myslidemenu ul li a{font-family:'Lato', sans-serif; font-weight:900; color:#999; margin:0 10px; text-transform: uppercase; font-size:1.7em}
#myslidemenu ul {display:table; margin:auto; height:100%; border: solid 0px yellow}
.active {background-image:url('../images/none'); background-size:50px ; background-repeat:no-repeat; border-bottom: solid 0px #ffffff;}
#mymobilemenu{display:none;z-index:+5}

.sectionheader{width:100%; height:3em; background: #D33638;}
.sectionheader img{height:90%; padding:1%;float:left;vertical-align:middle}
.sectionheader h2{line-height:2em;text-align:center}
.sectionimage{width:100%}
.subsectionheader{height:40px}


#footer{width:100%; padding:15px; background:#111111; height:300px;border: solid 0px #c0c0c0}
#footerlogo img{width:50%; margin: 2% auto;}
#socialbar{width:100%; margin:0 auto; height:50px;border: solid 0px #c0c0c0}
#socialbar a img{width:15%; margin:0 5%; float:left;}
#harrisweb{margin:4em auto;}
#harrisweb a{font-size:0.75em; text-decoration:underline; }

#contactcontent{width:98%;padding:0 1% 0 1%; height:500px}
#map{height:75%;width:60%;background-image:url('../images/map.png');background-size:cover;Text-align:center;float:left;margin-left:15%; margin-top:75px}
#map h1{position:relative;top:50%;color:#000}

#contactquotepic{ height:35%;width:60%;background-image:url('../images/quotebg2.png');background-size:contain;background-repeat:no-repeat; Text-align:center;margin:0;border: solid 2px #D33638;}
#contactbanner{width:100%; height:3em; background: #D33638;}
#contactbanner img{display:table; height:90%; padding:0 1% ; float:left;}
#contactbanner h2{line-height:2em}
#contactscreen{position:absolute; top:100px; left:15%; width:70%; height:700px; border: solid 2px #D33638; background-color:rgba(0,0,0,0.75); z-index:+999; display:none }
#contactleft{width:47%; height:85%;padding:1%; border: solid 0px #c0c0c0;float:left}
#contactright{width:47%; height:85%;padding:1%; border: solid 0px #c0c0c0;float:right  }

h2#quote{margin-top:75px; font-size:2.5em}

#content{margin:20px 0px; background-image:url(../images/bg-content.png); background-repeat:repeat-y; width:100%}
.content100{width:98%;padding:0 1% 0 1%; border: solid 0px #c0c0c0  }
.content75{width:73%; padding:1%; border: solid 0px #c0c0c0  }
.content50{width:47%; padding:1%; border: solid 0px #c0c0c0  }
.content25{width:23%; padding:1%; border: solid 0px #c0c0c0  }
.section{width:23%; padding:1%; border: solid 0px #c0c0c0  }
.content66{width:64%; padding:1%; border: solid 0px #c0c0c0  }
.content33{width:31%; padding:1%; border: solid 0px #c0c0c0  }
.content15{width:13%; padding:1%; border: solid 0px #c0c0c0  }
.spacer100{width:100%;height:100px; border: solid 0px #c0c0c0  }
.spacer50{width:100%;height:50px; border: solid 0px #c0c0c0  }
.spacer10{width:100%;height:10px; border: solid 0px #c0c0c0  }
#quotebutton{background-color:#ffffff; border:solid 2px #ccc;padding:10px 0px 18px 0px; margin:10px 0px 10px 0px;text-align:center;background-image:url(../images/quotegirl.png); background-repeat:no-repeat; background-size:100%;width:100%; height: 350px; }

#popup{position:fixed;width:400px;height:400px;background-color:#ffffff; border:solid 3px #ccc;padding:10px 0px 18px 0px; 
margin-left:50%;left:-200px;top:200px;text-align:center;display:none;}
#popupclose { font-size:20px;  line-height:15px;  right:10px;  top:5px;  position:absolute;  color:#2d84b6;  font-weight:500;}
#popup h2{margin-top:20px}
#popup ul li{text-align:left;right:50px;margin:0 0 0 10px}
#popup p {text-align:left;margin:0 20px 0 20px;}

/*** END OF CONTAINERS ***/

/*** START MEDIA QUERIES ***/


@media only screen and (max-width: 1280px) {   
	body{font-size:15px}
	#myslidemenu ul li a{font-size: 1.3em}
}

@media only screen and (max-width: 1024px) {   
	body{font-size:14px}
	#myslidemenu ul li a{font-size: 1.2em}
	
}

@media only screen and (max-width: 950px) {   
	body{font-size:13px}
	#myslidemenu ul li a{font-size: 1.0em}
}

@media only screen and (max-width: 900px) {   
	body{font-size:12px}
	
	
}

@media only screen and (max-width: 800px) {   
	body{font-size:11px}
	#myslidemenu ul li a{font-size: 0.8em; }
}


/*Styles for screen 640px and lower*/
@media only screen and (max-width: 640px) {
	
	body{font-size:15px}
	#menu {display:none}
	#mymobilemenu{display:block;width:100%; height:5em;background:#000;border: solid 0px blue}
	button#open{font-size:1.5em; padding:0.5em; margin-right:3em; float:right}
	#mymobilemenu ul {list-style-type:none; }
	#mymobilemenu ul li {display:none; width:100%; list-style-type:none; padding:1em 0;background:#000; text-decoration:none;  }
	#mymobilemenu ul li a{font-size:2em}
	button#close{font-size:1.5em; padding:0.5em; margin-right:3em; margin-top:-1.5em; float:right}
	#mymobilemenu ul li a:hover{background:#ccc; color:#000;  }
	.section{width:100%}
	#contactscreen{position:absolute; top:5px; left:10%; width:79%; height:1000px; text-align:center; border: solid 2px #D33638; background-color:rgba(0,0,0,0.75); z-index:+999; display:none }
	#contactleft{width:100%; height:35%;padding:1%; border: solid 0px #c0c0c0;float:left}
	#contactright{width:100%; height:35%;padding:1%; border: solid 0px #c0c0c0;float:left;Text-align:center;}
	#contactquotepic{ width:50%; margin:0 auto; border: solid 0px #D33638;background-size:100% auto}
	#map{margin-left:20%;}
	#socialbar a img{width:30%; margin:5% 10%; float:left;}
}

/*Smartphone*/
@media only screen and (max-width : 480px) {
/* Styles */
	#map{width:100%; margin-left:0;}
}  	


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}