/* CSS Document for JavaJam */

header, nav, main, footer { display: block;}

@-ms-viewport{]
	width: device-width;
}

#mobile { display: none;}
#desktop { display: inline;}

body {
		color: #663300;
	  	font-family: 'Open Sans', sans-serif;
	  	background-color: #ffffff;
	  	font-size: 100%;
	  	overflow-x:hidden;
}

header {
		background-color: #ffffff;
        clear:both;
}

.logo{  display:block;
		height:100px;
		width:336px;
		background-position:left;
		background-repeat: no-repeat;
        background-image: url("../images/FredLogo.png");

}

.headPhone {
		display:inline-block;
		position:absolute;
		top: 30px;
		right:7%;
    	font-size: 100%;
    	font-weight: 500;
    	line-height: 125%;
    	padding: 5px;
  		border: solid 2px #2E67B1;
}

.mainPhone {
	display: none;

}
.mainPhone2 {display: none;}

h1 {
	color: #181a1e;
    font-size: 1.25em;
    padding: 25px 0 15px 0; 
    border-bottom: 1px solid #b7b7b7;
}

h2 {
	color: #181a1e;
    font-size: 1.0em;
    padding: 0px 0 25px 0;
}

h3{
	color: #181a1e;
    font-size: 1.0em;
    padding: 30px 0 10px 0; 
}

img {

    border:none;
}

nav {
	padding-top: 5px;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #eeeeee;
    float:none;
    text-align:center;
    text-transform: uppercase;
}

/* Float the list items side by side */
ul.topnav li {display:inline-block;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #2E67B1;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 105%;
    font-weight: 500;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #2E67B1;
					  color: #ffffff;	
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


 main {
 	   padding: 2em 10em;
 	   margin-left: auto; 
 	   margin-right:auto;
 	   font-size: 110%;
 }

 main p:first-of-type{
 	padding-top: 25px;
 }

 main p{
 	   line-height: 150%;
 	   padding-bottom: 20px;

 }

.contact{display: none;}

.vidTitle{padding-top: 25px;}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 5px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.floatright{
	float: right;
	padding-left: 20px; 

}

.floatleft{
	float:left;
	padding: 0 20px 20px 0;
}

.clearleft{
	clear: left;
	margin: :1em;
}

.details {

    padding-left: 20%;
    padding-right: 20%; 
    overflow: auto;
}

.p1 {font-size: 80%; color:#aaa; margin-top: 10px; text-align: center;}
.p2 {font-size: 75%; color:#aaa; margin-top: 20px; text-align: center;}
.p3{padding-top: 25px;}

footer{
	background-color: #eeeeee;
	color: #000000;
	font-size: 1em;
    padding: 20px 0 25px 0;
    width:auto;
    margin-top: 0;
    clear: both;
}

footer nav { width: auto; padding: 0; margin-left: 0;}
footer nav ul { padding: 0; margin: 0; text-align: center;}
footer nav li { display: inline-block; vertical-align: text-top; text-align: left;
				line-height: 120%;
}
footer nav a { padding-right: 2.45em; 
			   font-size: 105%; 
			   font-weight: 500; 
			   border-style: none; 
			   color: #2E67B1;
}

footer nav li i{
	margin-left: -15px;
}

footer p{
	font-size: 75%;
	text-align: center;
	color:#aaa;
	margin-top: 1.25%; 
}



.location1{
	display: inline-block;
	text-align: left;
	font-weight: 500;
	line-height: 115%;
	padding:25px 0 50px 15px;

}

.location1 i{margin-left: -15px;}	


.location2{
	display: block;
	text-align: left;
	font-weight: 500;
	line-height: 115%;
	padding:25px 0 0 15px;
	height:360px;
}
.location2 i{margin-left: -15px;}

.e-mail {display:inline-block;
		position: relative;
		top: -81.75px; 
		padding-left: 100px;

}

a{
	text-decoration: none;
}

a:link{
	color: #2E67B1;
}
a:hover{
	color: #7699c6;
}



#wrapper{
    width: auto;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
    white-space:normal;
    background-color: #ffffff;
}

table {
	width: 95%;
	margin: auto;
	border-spacing: 0;
	background-color: #ffffcc;
}

th, td{
	padding: 10px;
}

tr:nth-of-type(odd){
	background-color: #ccaa66;
}


@media only screen and (max-width: 1024px){
	body { margin: 0;}
	#wrapper { width: auto; min-width: 0; margin: 0; box-shadow: none;}
	header { height: 80px;}
	.logo{
		height:80px;
		width:256px;
		background-position:left; 
		background-repeat: no-repeat; 
		background-image: url("../images/FredTablet.png");
	}
	.headPhone {margin-top:-1%;}
	nav {
	padding-top: 5px;
}
	footer nav a {padding-right: 1.80em;font-size: 88%;}

	/* Style the links inside the list items */
	ul.topnav li a {
    display: inline-block;
    color: #2E67B1;
    text-align: center;
    padding: 12px 14px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 100%;
}
	/* Hide the list item that contains the link that should open and close the topnav on small screens */
	ul.topnav li.icon {display: none;}
	main {padding: 2em; margin: 0; font-size: 90%;}

	.e-mail {top: -66px;}
	

@media only screen and (max-width: 768px) {
  nav {padding-bottom: 10px;}
  ul.topnav li {display: none;}	
  ul.topnav li.icon {
    display:block;
    position: absolute;
  	top:10px; 
  	right:2px;
  	font-size:2em;
  	border: solid .25px #dddddd;
  	
  }
  ul.topnav li.icon a:hover {color:#2E67B1;background-color:#ffffff;}
  
  header { height: 80px; 
		z-index: 5;
	}
  .logo{display: block;
  		height:80px;
  		width:220px;
  		background-position:left; 
		background-repeat: no-repeat; 
		background-image: url("../images/FredMobile.png");
  }
  .headPhone { display:none;
}
  .mainPhone { display:block;
  	position: relative;
  	top:-20px;
  	left:0;
  	margin:0;
  	padding:15px 0;
  	text-align: center;
  	font-size: 1em;
  	background-color: #f39c12;
  	border: solid 3px #f39c12;
  }	
  main a:link {color: #ffffff;
  }
  .location1 {display: none;}
  .location2 {display: none;}
  .e-mail {display: none;}
  .contact{display: block; margin-top: -10px;} 

  footer nav, footer nav ul, footer nav li { padding: 4px;}
  footer nav ul { padding: 0; margin: 0; }
  footer nav li { display: block;}
  footer nav a { display: block; padding:.70em .0em .70em 2.95em; width: auto; background-color: #ffffff; border: solid 1.5px #cccccc; font-weight:550; font-size:100%; }
 
 

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:768px) {
  ul.topnav.responsive li {
    float: none;
    display: inline;
 }
  ul.topnav.responsive li a {
    display: block;
    text-align: center;
    border: solid .25px #dddddd;
    
  }

  ul.topnav.responsive li.icon {
    border:none;
    
  }
  

 
 @media screen and (max-width:320px) {
 .mainPhone { 
  	font-size: 1em;
 }	

 }

label {
	float: left;
	display: block;
	text-align: right;
	width: 8em;
	padding-right: 5px;
	clear:left;
}

input, textarea {
	display: block;
	margin-bottom: 1em;
}

#mySubmit{
	margin-left: 12em;
}

audio {
	display: block;
	margin-top: 1em;
}