@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,300|Kanit:100,100italic,200,200italic,300,300italic,400,400italic|Archivo+Narrow:100,400,400italic);
@media only screen and (min-width: 280px) {

body{font-family:'Kanit',helvetica,arial;line-height:1.2em;font-size:.9em;color:rgb(76, 76, 76);font-weight:300;height:100%;margin:0px;}
h1 {font-family:'Archivo Narrow',helvetica,arial;font-size:2.3em;line-height:106%;text-align:center;padding: 0% 0px 0% 0px;font-weight:400;text-transform:uppercase;}
p {line-height:1.3em;}

.nowrap {
  white-space: nowrap ;
}
.site-sections {padding:0px;width: 100%;margin: 0px auto;}
.site-sections li{margin:0px;list-style: none;padding: 0px 3% 10px 3%;}
.site-sections li:nth-child(odd){background-color:rgba(0,0,0,.05);}
.section-content {min-height:550px;padding:15px 0px 15px 0px;}
#header-gap {padding-top: 57px;background-color: rgb(37, 44, 60);}
#header {position: fixed;top:0px;height:67px; width: 100%;text-align: right;background-color:rgb(47, 47, 47);z-index:5;}
.headerContact {text-align: right;position: absolute;top:6px;color:rgb(250,250,250);font-size:13px;width: 96%;padding-left: 2%;z-index:2;}
.headerContact a {color:rgb(250,250,250);text-decoration:none;}
.phoneContact{float:left;font-size:.9em;padding-right:12px;}
.emailContact{float:right;font-size:.9em;}

.nav-container {position: absolute;bottom: 10px;text-align: center;left:59%;margin-left:-115px;}
.nav-buttons {color:rgb(251,251,251);text-transform: uppercase;text-decoration:none;padding: 15px 6px 15px 6px;}
.nav-buttons:last-child {padding-right:0px;}
.nav-active {left:5px; border-bottom:6px solid rgb(169, 169, 169);width:64px;position: absolute;bottom:-10px;}

.site-sections li.project-content {padding-top:2.5%;padding-bottom:1%;}
.project-content h1 {text-align:left;font-size:1.9em;margin:0px;padding-top:1%;padding-bottom:1%;line-height:30px;}
.project-content h2 {font-size:1.5em;margin-top:7px;color:rgb(136,136,136);font-weight:300;}
.project-content a {color:rgb(0, 120, 197);text-decoration:none;}
.project-content a:visited {color:rgb(0, 120, 197);}
.project-content a:hover {color:rgb(0, 120, 197);text-decoration:underline;}
#footer {background-color:rgb(47, 47, 47);color:rgb(250,250,250);}
#footer .footerContact{display:none;text-align: left;position: absolute;left:0;color:rgb(250,250,250);padding:0px 0px 0px 0px;margin-top: 7px;}
#footer .footerContact li {padding:3px 0px 3px 0px;font-size:16px;}
#subFooter {display:none;background-color:rgb(183, 0, 10);color:rgb(246, 179, 179);min-height:60px;font-size:13px;padding-top:10px;}
.fixedBottom {position: fixed;bottom: 0;width: 100%;}

.footerContact a {color:rgb(250,250,250);text-decoration:none;}
.contentContainer .footerContact a {color:rgb(250,250,250);}
.footerContact i {font-size:1.3em;padding-right: 4px;}

.logo-container {color:#ffffff;font-family:Josefin Sans;font-weight:300;font-size:1.8em;width: 100%;position: absolute;left:36%;top:2%;height: 41%;text-align: center;cursor:pointer;}
.logo-container a {border:0px;}
.logo-first-name {position: absolute;top: 14px;left: 0px;color:rgb(254,254,254);text-transform:uppercase;}
.logo-last-name {position: absolute;top: 19px;left: 9px;color:rgb(169, 169, 169);text-transform:uppercase;}

.contentContainer {width: 100%;padding:0px 0px 40px 0px;}
.contentContainer a {color:rgb(183, 0, 10);text-decoration:none;}
.contentContainer a:visited {color:rgb(183, 0, 10);}
.contentContainer a:hover {color:rgb(183, 0, 10);text-decoration:underline;}
.contentContainer li {padding:0px;}

.contactForm {margin:0px auto;width: 93%;padding-top: 35px;}
.contactForm .contactLabels {float:left;padding:0px 13px 0px 0px;margin:0px;}
.contactForm .contactLabels li {padding:27px 0px 10px 0px;font-weight:600;text-align: right;}
.contactForm .contactFields {margin:0px auto;width:64%;float:left;padding:0px;}
.contactForm .contactFields li {padding-bottom:4px;padding:12px 0 0 0;min-height: 46px;}
input {-webkit-transition: all ease-out .2s;-moz-transition: all ease-out .2s;-o-transition: all ease-out .2s;transition: all ease-out .2s;}
.contactForm input  {font-size: 1.2em;width:90%;width:100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;height:40px;padding-left:5px;}
.contactForm textarea{font-size: 1.2em;width:90%;width:100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;height:40px;padding-left:5px;padding-top:10px;height:100px;}
.contactForm .submitBtn {background-color:rgb(186, 9, 19);color:rgb(250,250,250);padding: 8px 0px 33px 0px;font-size:1.4em;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border:2px solid rgb(142, 0, 7);width:103%;}
.contactForm input:focus, .contactForm textarea:focus {outline:none;-webkit-box-shadow: 0px 0px 7px 3px rgba(183, 0, 10, 0.3);-moz-box-shadow:0px 0px 7px 3px rgba(183, 0, 10, 0.3);box-shadow:0px 0px 7px 3px rgba(183, 0, 10, 0.3);border:0px;border: 1px solid rgb(255, 255, 255);padding-bottom:1px;}
.contactForm .submitBtn:hover {-webkit-box-shadow: 0px 0px 7px 2px rgba(183, 0, 10, 0.3);-moz-box-shadow:0px 0px 7px 2px rgba(183, 0, 10, 0.3);box-shadow:0px 0px 7px 2px rgba(183, 0, 10, 0.3);background-color:rgba(237, 1, 14, 1)}

.socialContainer {display:none;text-align: right;position: absolute;right:0;}
.socialContainer i {padding:10px;}
.socialContainer i:last-child {padding-right:0px;}
.socialContainer a {color:#FFFFFF;}
.socialContainer a:visited {color:#FFFFFF;}

.clearBoth {clear:both;}

.primaryProjectImage{width:100%;margin:0px auto;padding-bottom:2%}
.primaryProjectImage img {max-width:100%;}
.projectDescription {margin:0px auto;width:100%;}
.supportImages {width: 100%;padding-bottom:1.5%;}

.projectDescription p:first-child {margin-top:0;}
.remaining-description {display:none;}
.title-case {font-size:.9em;}

}

@media only screen and (min-width: 380px) {
.logo-container {left:41%;}
}

@media only screen and (min-width: 524px) {
.site-sections li.project-content {padding-top:.5%;}

.logo-container { font-size:2.4em;left:3%;top:21%;}
.logo-last-name {top:22px;left:12px;}

.primaryProjectImage{float:left;width:55%;cursor:pointer;}
.projectDescription {float:left;width:43%;padding-left:2%;}
.supportImages {float:left;width: 43%;padding-left: 2%;}
.primaryProjectImageRight {float:right;}
.primaryProjectImageFull {width:100%;padding-bottom:.6%;}
.projectDescriptionLeft {padding:0 2% 0 0}
.supportImagesLeft {padding:0 2% 1.5% 0}
.supportImagesFull {padding:0%;width:100%;}
.projectDescriptionFull{width:100%; padding:1% 0 0 0%;}

.primaryProjectImagePortrait{width:40%;}
.projectDescriptionPortrait {width:58%;}
.supportImagesPortrait {width:57%;}

}


@media only screen and (min-width: 638px) {
.headerContact {right: 3%;}
.phoneContact{float:right;font-size:1em;}
.emailContact{float:right;font-size:1em;padding-right:5px;}
.nav-container {right: 3%;left:auto;text-align: right;margin-left:0px;}
.nav-active {}

.logo-container{left: 3%;width:145px;height: 100%;text-align: left;}
.site-sections>li{padding:0px 3% 10px 3%; }
 h1 {font-size:3em;}

.contactForm {width:73%;padding-top:7px;}

}

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

.headerContact {right: 12%;}
.nav-container {right: 12%;}

.logo-container{left: 12%;}
.site-sections>li{padding: 0px 12% 10px 12%; }
h1 {font-size:3.5em;}

}


}