/************************** GLOBAL ******************************/

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

.sechead {font-size:34px !important;}

}


html {

background-color:#000000;
margin:0px;
padding:0px;
overflow-x:hidden;
height:100%;

}


body {

margin:0px;
font-size:17px;
font-family:arial;
color:#ffffff;
font-family:'Lato',arial,sans-serif;

}

tbody {display:table;width:100%;height:100%;box-sizing:border-box;table-layout:fixed;}



.container {

width:100%;
text-align:left;
box-sizing: border-box;
position:relative;
display:inline-block;
max-width:1200px;
padding-left:15px;
padding-right:15px;

}


h1 {margin-top:0px;}


.section {

padding-top:40px;
padding-bottom:40px;

}


.sechead {

font-size:40px;
font-weight:300;
text-align:center;

}


.secblurb {

font-size:18px;
max-width:1000px;
text-align:left;
line-height:26px;
margin-bottom:30px;

}


.elink {

font-weight:bold;
color:#ffffff;
text-decoration:none;

}







/****************************** HEADER *************************************/

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

#logo img {width:200px !important;}
#mobicon {margin-top:2px !important;}

}


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

#desknav {display:none !important;}

}


@media screen and (min-width:751px) {

#mobicon {display:none !important;}
#mobnav {display:none !important;}

}




#header {

width:100%;
position:relative;
padding-top:15px;
padding-bottom:10px;
margin-bottom:10px;

}


#logo {

display:inline-block;

}


#logo img {

width:300px;
height:auto;
max-width:100%;

}



#desknav {

float:right;
display:inline-block;

}


#desknav .navitem {

display:inline-block;
margin-left:20px;
font-family:'Roboto Condensed';
font-size:26px;
font-weight:300;
margin-top:25px;
cursor:pointer;
text-decoration:none;
color:inherit;

}


#mobicon {

float:right;
margin-top:15px;
font-size:34px;

}


#mobnav {

margin-top:10px;
margin-bottom:-15px;
text-align:right;
margin-left:-15px;
margin-right:-15px;

}


#mobnav .navitem {

display:block;
padding:10px;
border-top:1px solid #444444;
font-family:'Roboto Condensed';
font-size:26px;
font-weight:300;
text-decoration:none;
color:inherit;

}





/****************************** INTRO SECTION *************************************/

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

.intro_right h1 {font-size:34px !important;}
#intro span {font-size:20px !important;}

}



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

.intro_right {float:none !important;display:block !important;width:100% !important;margin-top:30px;}
#intro .container {text-align:center !important;}
#intro img {max-width:100% !important;}

}


@media screen and (min-width:801px) and (max-width:1100px) {

#intro img {max-width:40%;}

}



#intro {

width:100%;
position:relative;
background-image:url(images/fog2.jpg);
background-position:left;
background-size:cover;
padding-top:30px;
padding-bottom:30px;

}


#intro img {

height:auto;

}


.intro_right {

float:right;
display:inline-block;
width:50%;

}


.intro_right h1 {

font-size:44px;
font-weight:400;

}


#intro span {

display:block;
font-size:22px;
font-weight:300;
line-height:30px;
color:#ffffff;
text-align:left;

}



.fade {

position:absolute;

}









/****************************** BUILD SECTION *************************************/

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

.buildrow {white-space:normal !important;}

}


.buildrow {

white-space:nowrap;
overflow-x:auto;

}


.buildbox {

display:inline-block;
width:230px;
max-width:100%;
box-sizing:border-box;
vertical-align:top;
margin:20px;
background-color:#fffffa;
padding:10px;
color:#252525;
border-radius:5px;
padding-bottom:20px;
white-space:normal;
min-height:370px;


}

.buildimg {

height:180px;

}

.buildimg img {

max-width:100%;
max-height:180px;
height:auto;
width:auto;

}


.buildtitle {

display:block;
font-size:20px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
text-align:center;

}


.buildrow::-webkit-scrollbar {
    height:10px;
}
 
.buildrow::-webkit-scrollbar-track {
    background-color: #666666; 
    border-radius: 10px;
}
 
.buildrow::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #999999;
    width:50px;
}










/****************************** CONTACT SECTION ********************************/

#contact {

width:100%;

}


.contactform {

width:100%;
max-width:500px;
text-align:left;
font-size:20px;

}


label {color:#cccccc;}

.textfield {

padding:10px;
width:100%;
background:none;
border:1px solid #bbbbbb;
box-sizing:border-box;
color:#eeeeee;
margin-top:3px;
margin-bottom:20px;
font-size:18px;

}
 

.submitbutton {

background-color:#248bcc;
color:#ffffff;
padding:10px;
padding-right:40px;
padding-left:40px;
display:inline-block;
border:0px;
font-size:20px;

}


.error {

color:red;
font-style:italic;

}


.error2 {

border:1px solid red !important;

}







/***************************** ABOUT SECTION************************************/

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

#pic_gen {height:190px !important;}

}


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

.picbox {float:none !important;margin-left:auto !important;margin-right:auto !important;top:0px !important;}

}



.picbox {

position:relative;
max-width:100%;
display:block;

}


.picbox img {

width:100%;
height:auto;

}


#pic_boards {

width:400px;
//height:195px;
float:left;
margin-right:15px;
margin-bottom:15px;
position:relative;
top:5px;

}


#pic_gen {

width:350px;
height:225px;
float:left;
margin-right:15px;
margin-bottom:15px;
position:relative;
top:5px;

}


#pic_gen img {

position:absolute;
top:0px;
left:0px;

}


#about span {

line-height:1.5em;
font-size:18px !important;

}


#pedal_friend {

width:250px;
height:auto;
float:right;
margin-left:15px;
margin-bottom:15px;
max-width:100%;
top:5px;

}






/********************************* FOOTER **************************************/

#footer {

width:100%;
padding-top:20px;
padding-bottom:20px;
color:#cccccc;

}


#footer .container {

text-align:center;

}