/* @viewport{zoom: 1.0; width: extend-to-zoom;}	/* equiv to Viewport metatag - defines width or scale the browser should use rather than zoom to fit all */
* {margin: 0; padding: 0; outline: none; border: none; box-sizing: border-box;}
body {font-family: verdana, Arial, sans-serif; font-size: 16px; font-style: italic; line-height: 1.5em; color: #8C8067; background-color: white;}
img {display: block;}
li {list-style-position: inside;}
hr {margin: 10px 0 20px 0; border-top: 1px solid #8d6eb7;}
a {color: #8C8067; text-decoration: none;}
input, textarea {padding: 5px 10px; font-family: verdana, Arial, sans-serif; font-size: 16px; font-style: italic;}
button {background: none;}

#overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 100;}

/* page header */

#headerbar {z-index: 5; position: fixed; background: white; width: 100%; height: 95px;}
#header {position: relative; max-width: 1340px; margin: 0 auto;}
#headerlogo {float: left; margin-top: 10px; margin-left: 80px;}
#headertext {font-family: Verdana; font-size: 16px; font-style: italic; color: #8C8067; clear: both; margin-left: 250px; position: relative; top: -10px;}
#headeroffset {height: 95px;}

@media (max-width: 850px) {
#headertext {font-size: 12px; margin-left: 80px; top: 0; line-height: 1.2em;}
}
@media (max-width: 550px) {
#headerlogo {margin-left: 20px;}
#headertext {margin-left: 20px;}
}
@media (max-width: 420px) {
#headerlogo {width: 200px;}
#menuicon {top: -15px;}
#headerlogo {margin-left: 5px;}
#headertext {margin-left: 5px;}
}

@keyframes bounce {0% {top: 0px;} 50% {top: 3px;} 100% {top: 0px;}}
#linkedin {position: relative; float: right; margin-top: 35px; margin-right: 35px;}	/* position needed for bounce animation */
#linkedin:hover {animation: bounce 0.5s;}

@media (max-width: 420px) {
#linkedin {top: -15px;}
}

#menucontainer {position: relative; float: right; margin-top: 30px;}
#menuicon {position: relative; right: 15px;  cursor: pointer;}	/* position needed for bounce animation */
#menu {background-color: rgba(0,0,0,0.6); position: absolute; top: 65px; right: 0; transition: width 1s; white-space: nowrap; visibility: hidden; padding: 10px 0; 
	overflow-x: hidden; z-index: 6; height: 2400px; width: 200px; line-height: 40px;}
#menu a {color: White; line-height: 1.5em; text-decoration: none; padding: 0 15px;}
#menu a:hover {font-weight: bold;}
.onlysmall {display: none;}

@media (min-width: 501px) {
#menuicon:hover {animation: bounce 0.5s;}
}

@media (max-width: 500px) {
#menu {width: auto;}
.onlysmall {display: inline;}
}

/* page content */

#content {position: relative; max-width: 1340px; margin: 0 auto;}

/* home page images */

#home {position: relative; top: 0; width: 100%; max-width: 1340px; max-height: 624px; overflow: hidden;}
#homeimgA, #homeimgB, #homeimgC {width: 100%;}
#homeimgA {position: absolute; z-index: -5; opacity: 1; transition: opacity 1.25s; visibility: hidden;}
#homeimgB {position: absolute; z-index: -4; top: 100%; transition: top 1.5s; visibility: hidden;}
#homeimgC {z-index: -3;}
#hometxt {position: absolute; bottom: -25%; right: 30%; color: white; font-style: italic; line-height: 1.3em; opacity: 0;
	font-size: 32px; text-align: right;
	transition: opacity 1s ease-in 1s, bottom 1s ease-out 1s, right 1s ease-out 1s;}
#hometxt1, #hometxt2, #hometxt3 {transition: color .5s ease-in 1s, font-size .5s ease-in 1s, text-shadow .5s linear 1s;}
#homeoffset {width: 100%; height: 100%;}

@media (max-width: 875px) {
#hometxt {font-size: 24px;}
}
@media (max-width: 650px) {
#hometxt {font-size: 16px;}
}
@media (max-height: 500px), (max-width: 500px) {	/* this media query matched in homeload() */
#home {position: relative; top: 0;}
#homeoffset {display: none;}
#hometxt {font-size: 12px;}
}

/* content pages */

/* About Us */

#aboutus-companyinfo {position: relative;}
#aboutus {background: white url('../images/aboutus.jpg') top/100% no-repeat;}
#aboutustop {margin: 0 auto; padding: 50px 10px; max-width: 730px;}
#aboutusbiashdg {float: left; max-width: 450px; vertical-align: middle; text-align: right; color: #EE4307; font-size: 40px; line-height: 1em; padding-top: 50px; padding-right: 30px;}
#aboutusbiastxt {float: left; max-width: 700px; padding: 0 10px;}
#aboutusbutton {padding-top: 60px; margin-left: -20px;} 

@media (max-width: 1250px) {
#aboutustop {margin: 0; padding: 20px 10px;}
#aboutusbiashdg {font-size: 40px; padding: 0 10px;}
#aboutusbutton {padding-top: 20px; margin-left: 0; text-align: center;} 
}
@media (max-width: 600px) {
#aboutusbiashdg {float: none; max-width: none; text-align: center; padding: 0 10px;}
#aboutusbiastxt {float: none; max-width: none;}
}
@media (max-height: 500px), (max-width: 500px) {
#aboutusbutton {display: none;}
}

/* Company Info */

#companyinfo {position: absolute; top: 100%; right: 0; width: 100%; clear: both; background: white; transition: top 2s;}
#companyinfotop {position: relative;}
#companyinfotop img {width: 100%;}
#companyinfoclose {position: absolute; top: 10px; right: 10px; color: black; font-size: 20px; cursor: pointer;}
#companyinfohdg {position: absolute; bottom: 10%; width: 100%; font-size: 64px; line-height: 1em; color: white; font-style: italic; text-align: center;}
#companyinfobottom {background: white;}
#companyinfoleftcol {float: left; max-width: 450px;color: #EE4307; font-size: 24px; line-height: 1.3em; padding-top: 15px; padding-right: 30px;}
#companyinforightcol {float: left; max-width: 580px; padding-top: 15px;}
#companyinfobuttons {padding-top: 20px; margin-left: -20px;}

@media (max-width: 1250px) {
#companyinfoleftcol {float: none; max-width: none; padding: 25px 10px 0 10px;}
#companyinforightcol {float: none; max-width: none; padding: 25px 10px 0 10px;}
}
@media (max-width: 600px) {
#companyinfohdg {font-size: 32px;}
}
@media (max-height: 500px), (max-width: 500px) {
#companyinfo {position: relative; top: 0;}
#companyinfoclose {display: none;}
#companyinfohdg {text-shadow: -1px 1px 2px black, 1px 1px 2px black;}
}

/* Services */

#services {position: relative; background: white;}
#servicestop {position: relative; top: 0; left: 0;}
#servicestop img {width: 100%;}
#serviceshdg {position: absolute; top: 17%; left: 9%; font-size: 64px; line-height: 1em; color: white; text-align: right; font-style: italic;}
#serviceslist {position: absolute; top: 17%; right: 6.5%; font-size: 26px; line-height: 1.8em; color: #EE4307; text-align: center;}
#servicesbuttons {padding-top: 35px;}
.service {cursor: pointer;}
.service:hover {font-weight: bold;}

@media (max-width: 1150px) {
#serviceshdg {padding: 25px 10px 0 10px; text-align: center; text-shadow: -1px 1px 2px black, 1px 1px 2px black;}
#serviceslist {position: relative; top 0; left: 0; padding: 25px 10px 0 10px;}
}
@media (max-width: 500px) {
#serviceslist {font-size: 18px;}
}

/* Case Studies */

#casestudies {position: relative;clear: both; background: #3C8CB8;}
#casestudieshdg {text-align: center; font-size: 64px; line-height: 1em; font-style: italic; color: #3C3C3B; padding: 9% 0 20px 0;}
#casestudieslist {text-align: center; font-size: 20px; font-style: italic; line-height: 1.8em; color: white; padding-bottom: 9%;}
#casestudiesbuttons {padding-top: 25px;}
.casestudy {cursor: pointer;}
.casestudy:hover {font-weight: bold;}

@media (max-width: 550px) {
#casestudieshdg {font-size: 32px;}
#casestudieslist {font-size: 14px;}
}

/* Contact Us */

#contactus {position: relative; min-height: 510px; clear: both; background: white url('../images/contactus.jpg') top/100% no-repeat;}
#contactoverlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 100;}
#hiddeniframe {display: none;}
#contactushdg {text-align: center; font-size: 64px; line-height: 1em; font-style: italic; color: #3C3C3B; padding: 40px 0;}
#contactusform {text-align: center;}
#contactus input {width: 420px;}
#contactus #email {margin-left: 25px;}
#contactus textarea {width: 865px; height: 110px;}
#contactuscaptcha {margin: 20px auto; width: 300px;}
#contactmsgbox {padding: 20px; background-color: white; text-align: center; border: 3px solid; 
	position: absolute; top: 200px; left: calc(50% - 150px); width: 300px; z-index: 200; display: none;}
#contactmsgclose {cursor: pointer; position : absolute; top: 5px; right: 10px; font-size: 18px; color: White;}
#contactmsgtxt {font-size: 16px; font-weight: bold; line-height: 30px;}

@media (max-width: 900px) {
#contactus input, #contactus textarea {width: 80%; border: 1px #A9A9B1 solid;}
#contactus #email {margin: 0;}
}
@media (max-width: 500px) {
#contactushdg {font-size: 48px; padding-bottom: 65px;}
}

/* footer */

#footer {position: relative; clear: both; background: black; padding-top: 85px; padding-bottom: 40px; text-align: center;}
#footerphone {font-size: 24px; color: #EE4307; padding-top: 50px; padding-bottom: 40px; clear: both;}
#footerphone a {color: #EE4307; text-decoration: none;}

.pad95 {float: left; width: 95px; height: 1px;}
.pad150 {float: left; width: 150px; height: 1px;}

/* blank space at bottom of document */

#blankspace {position: relative; min-height: 300px; background-color: white;}

/* page up/down buttons */

.down {font-size: 20px; font-style: normal; font-weight: normal; text-align: center; color: White; background-color: #827D67; 
	border: 1px solid #827D67; border-radius: 12px; width: 25px; position: absolute; top: 150px; right: 15px; cursor: pointer;}
.up {font-size: 20px; font-style: normal; font-weight: normal; text-align: center; color: White; background-color: #827D67; 
	border: 1px solid #827D67; border-radius: 12px; width: 25px; position: absolute; top: 150px; right: 15px; cursor: pointer;
	transform: rotate(180deg);}

@media (max-width: 650px) {
.down {display: none;}		/* hide scroll down button on small screens */
}

/* buttons with double borders */

.button {color: white; padding: 8px 20px; margin: 0 20px; position: relative; font-size: 16px; font-style: italic; line-height: 3em; 
	border: 1px solid white; white-space: nowrap; cursor: pointer;}
.button::before {content: " "; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;}

.red.button {background: #EF4406;}
.red.button::before {border: 2px solid #EF4406;}

.blue.button {background: #3C8CB8;}
.blue.button::before {border: 2px solid #3C8CB8;}

.grey.button {background: #827D67;}
.grey.button::before {border: 2px solid #827D67;}