/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

/* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE *//* HOMEPAGE */

body {font-family: 'Raleway', sans-serif; background:url("../images-layout/bubbles.png") bottom #2e3848 no-repeat;}

div.header {background: rgba(45,55,72,.9); padding-top: 13px; padding-bottom: 10px; position: fixed; z-index: 1; width: 100%;}
div.header a.nav {text-decoration: none; font-weight: 300; color: white; margin-top: 28px; display: block;}
div.topnav {display: none;}

div.CTA {background:url("../images-layout/screenprint.MOV") no-repeat; height: 710px;}
div.CTA div.tencol {text-align: center; color: white; padding-bottom: 50px; padding-top: 260px; position: relative;}
div.CTA h1 {font-size: 75px; text-shadow: 0px 0px 17px black}
div.CTA h2 {font-weight: 300; font-size: 44px; margin-bottom: 50px; text-shadow: 0px 0px 17px black}
div.CTA a {padding: 10px 40px; background-color: #c0592c; text-decoration: none; color: white; font-style: italic; font-weight: 800; font-size: 39px; border-radius: 30px; box-shadow: 0px 0px 17px black;}
div.CTA div.tencol a:hover {background-color: #2e3848;}

div.description {background-color: white; text-align: center; color: #29374a; padding-top: 30px; padding-bottom: 30px;}
div.description h1 {margin-top: 10px; font-size: 40px;}

div.infotitle h1 {color: #c0592c; font-weight: 800; text-align: center; font-size: 60px; margin-top: 40px; margin-bottom: 90px;}

div.infomobile {display: none;}
div.transitionmobile {display: none;}
div.newinfomobile {display: none;}

div.info div.threecol img {border-right: 4px solid #c0592c; display: block; float: right; width: 145px; height: 200px; padding-right: 15px;}
div.info {color: white; margin-bottom: 30px;}
div.info h1 {margin-bottom: 10px; font-size: 40px;}
div.info p {font-weight: 300; font-size: 20px;}

div.newinfo div.threecol img {border-right: 4px solid #c0592c; display: block; float: right; width: 170px; height: 180px; padding-right: 20px;}
div.newinfo {color: white; margin-bottom: 30px;}
div.newinfo h1 {margin-bottom: 10px; font-size: 40px;}
div.newinfo p {font-weight: 300; font-size: 20px;}

div.transition div.threecol img {border-left: 4px solid #c0592c; display: block; float: left; width: 200px; height: 185px; padding-left: 15px;}
div.transition {color: white; text-align: right; margin-bottom: 100px; margin-top: 100px;}
div.transition h1 {margin-bottom: 10px; font-size: 40px;}
div.transition p {font-weight: 300; font-size: 20px;}

/* CAROUSEL */

div.carousel {padding-bottom: 80px; margin-top: 100px;}

/* The dots/bullets/indicators */
.dot {height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active {background-color: #717171;}
/* Fading animation */
.fade {animation-name: fade; animation-duration: 2s;}
@keyframes fade {from {opacity: .4} to {opacity: 1}}

/* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES */

body.services {background: white;}

div.infomobile {display: none;}
div.transitionmobile {display: none;}
div.newinfomobile {display: none;}

div.servicescta {background: #2e3848; padding-bottom: 70px; width: 100%;}
div.servicescta div.fivecol {margin-top: 220px; color: white;}
video {width: 645px; height: 500px; object-fit: cover; display: block; float: left; margin-top: 100px;}

div.servicescta h1 {color: #c0592c; font-size: 50px; font-weight: 800; margin-bottom: 15px;}
div.servicescta p {margin-bottom: 30px;}
div.servicescta p2 {margin-top: 90px;}
div.servicescta a {padding: 10px 20px; background-color: #c0592c; text-decoration: none; color: white; font-style:italic; font-weight: 800; font-size: 20px; border-radius: 30px; box-shadow: 0px 0px 17px black;}

div.qualities {background-color: rgba(234,234,234,1.00); text-align: center; color: #29374a; padding: 20px 0px; box-shadow: 0px 0px 10px rgba(0,0,0,.3);}
div.qualities img {width: 60px; height: 60px; object-fit: contain;}
div.qualities h1 {font-size: 25px;}

div.servicestitle {color: #29374a; margin-top: 50px; text-align: center;}
div.servicestitle h1 {text-align: center;}

div.servicestitle2 {color: #29374a; margin-top: 50px; text-align: center;}
div.servicestitle2 h1 {text-align: center;}

div.services {margin-top: 30px; text-align: center; color: #29374a;}
div.services h1 {margin-bottom: 10px;}
div.services2 {margin-top: 30px; text-align: center; color: #29374a;}
div.services2 h1 {margin-bottom: 10px;}

div.services div.fourcol {background: rgba(234,234,234,1.00); padding: 30px; width: 255px; box-shadow: 0px 0px 10px rgba(0,0,0,.3);}
div.services2 div.fourcol {background: rgba(234,234,234,1.00); padding: 30px; width: 275px; box-shadow: 0px 0px 10px rgba(0,0,0,.3)}

div.assistance {margin: 100px 0px 80px 0px; text-align: center; color: #c0592c;}

/* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT *//* CONTACT */

body.contact {background: white;}
div.title {padding-top: 200px; padding-bottom: 40px;}
div.contact div.title h1 {text-align: left;}

div.contact {margin-bottom: 20px; margin-top: 10px;}
div.contact {color: #2e3848; text-align: center; padding-top: 30px; padding-bottom: 30px;}
div.contact div.fourcol {background-color: rgba(234,234,234,1.00); padding-top: 30px; padding-bottom: 30px;}
div.contact h1 {margin-bottom: 10px; padding-bottom: 5px; margin-right: 15px; margin-left: 15px;}
div.contact a {text-decoration: none; color: #2e3848;}
img.email {padding-bottom: 20px;}

div.phone {border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
div.email {border-top-right-radius: 30px; border-bottom-right-radius: 30px;}

div.container.contact {margin-top: 0px; padding-top: 0px;}
	
div.contactmessgae  {color: #29374a; margin: 40px 0px;}
div.contactmessgae h1 {margin-bottom: 15px; font-size: 45px;}
div.contactmessgae p {font-size: 20px; margin-right: 100px; line-height: 35px;}
div.contactmessgae span {font-weight: 500; color: #c0592c; font-style: italic;}

/* CONTACT MAP */
iframe {display: block; float: left; margin-bottom: 80px;}

/* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM *//* TEAM */
body.team {background: white;}

div.title {background: url("../team/images/inkheader.png") #2e3848 bottom right no-repeat; text-align: left; padding-bottom: 100px;}
div.title div.sixcol span {font-style: italic; font-weight: 500;}
div.title h1 {color: #c0592c; font-weight: 800; font-size: 55px;}
div.title p {color: white; font-weight: 300;}

div.team div.fourcol.jon {padding: 0 0 54px}
div.team div.fourcol.justin {padding: 0 0 73px}
div.team2 div.fourcol.cristhian {padding: 0 0 39px}

div.team div.fourcol {margin-top: 50px; text-align: center; color: #2e3848; background-color: rgba(234,234,234,1.00); padding: 0 0 30px; box-shadow: 0px 0px 10px rgba(0,0,0,.3);}
div.team div.fourcol h1 {margin-top: 10px; }
div.team div.fourcol h2 {font-size: 20px; color: #c0592c; margin-bottom: 15px;}
div.team div.fourcol p {margin: 0 30px;}


div.team2 div.fourcol {margin-top: 50px; text-align: center; margin-bottom: 80px; color: #2e3848; background-color: rgba(234,234,234,1.00); padding: 0 0 20px; box-shadow: 0px 0px 10px rgba(0,0,0,.3);}
div.team2 div.fourcol h1 {margin-top: 10px; }
div.team2 div.fourcol h2 {font-size: 20px; color: #c0592c; margin-bottom: 15px;}
div.team2 div.fourcol p {margin: 0 30px;}

/* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER */
div.footer {color:white; background-color: #29374a; padding-top: 40px; padding-bottom: 40px; position: absolute; width: 100%;}
div.footer h1 {font-size: 20px; padding-top: 5px;}
div.footer div.onecol img {width: 40px; height: 40px; margin-top: 13px; display: block;}

div.credit {color:white; background-color: #29374a; text-align: center; padding-top: 30px; position: relative;}
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

/* Style the navigation menu */
div.header {display: none;}
div.topnav {overflow: hidden; background-color: rgba(45,55,72,.9); position: fixed; display: block; width: 100%; z-index: 1;}
	div.topnav img {width: 180px; height: 80px; padding: 10px 0 5px 0;}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {display: none; color: white; font-size: 24px; text-decoration: none;}

/* Style navigation menu links */
.topnav a {color: white; padding: 10px 26px; text-decoration: none; font-size: 27px; display: block; text-align: center}

/* Style the hamburger menu */
	.topnav a.icon {display: block; position: absolute; right: 0; top: 0; font-size: 50px;}
	.topnav a.icon img {width: 30px; height: 30px; margin-top: 25px;}
/* Add a grey background color on mouse-over */
.topnav #myLinks a:hover, a:focus {background-color: #c0592c;}

/* Style the active link (or home/logo) */
.active {background-color: rgba(45,55,72,.9); color: white;}

/* HOMEPAGE */
	div.info {display: none;}
	div.transition {display: none;}
	div.newinfo {display: none;}
	
	div.CTA {background:url("../images-layout/homevideo.MOV") top center;}
	
	div.CTA {line-height: 45px;}
	div.CTA h1 {font-size: 50px;}
	div.CTA h2 {margin-bottom: 40px; font-size: 34px;}
	div.CTA a {font-size: 25px;}
	
	div.description p {margin: 10px 40px 30px;}
	
	div.infotitle h1{font-size: 45px; margin: 60px 0;}
	
	div.infomobile img {width: 75px; height: 100px; object-fit: contain;}
	div.infomobile {display: block; color: white; font-weight: 300; text-align: center;}
	div.infomobile h1 {margin: 15px 0px;}
	
	div.transitionmobile img {width: 170px; height: 120px; object-fit: contain; margin-top: 30px;}
	div.transitionmobile {display: block; color: white; font-weight: 300; text-align: center; margin-bottom: 30px;}
	div.transitionmobile h1 {margin: 15px 0px;}
	
	div.newinfomobile img {width: 160px; height: 120px; object-fit: contain;}
	div.newinfomobile {display: block; color: white; font-weight: 300; text-align: center;}
	div.newinfomobile h1 {margin: 15px 0px;}
	
	/* SERVICES */
	div.servicescta div.fivecol {margin-bottom: 30px; text-align: center;}
	div.servicescta div.fivecol h1 {font-size: 45px;}
	
	
	video {display: none;}
	
	div.qualities div.fourcol {display: inline-block; height: 40px; text-align: center; }
	div.qualities div.fourcol img {display: block; margin: auto;}
	div.qualities h1 {font-size: 12px;}
	
	div.services div.fourcol {margin-left: 40px;}
	div.services2 div.fourcol {margin-left: 40px;}
	
	/* CONTACT */
	div.phone {border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
div.email {border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
	div.container.contact {margin-top: 0px; padding-top: 0px;}
	
	div.contactmessgae  {color: #29374a; margin: 40px 0px; text-align: center;}
	div.contactmessgae h1 {font-size: 35px; line-height: 35px; padding-top: 10px; margin-bottom: 15px;}
	div.contactmessgae p {font-weight: 300; margin-right: 0px}
	
	iframe {display: block; float: left; width: 100%; margin-top: 40px;}
	
	/* TEAM */
	div.title {background: url("../team/images/inkheadermobile.png") #29374a no-repeat bottom center; text-align: center; padding-bottom: 170px; padding-top: 150px;}
	div.title h1 {padding-top: 20px; margin-bottom: 20px; font-size: 40px; line-height: 35px;}

	div.team div.fourcol h1 {margin: 20px 0 7px;}
	div.team div.fourcol h2 {margin: 0px 0 7px;}
	div.team2 div.fourcol h1 {margin: 20px 0 10px;}
	
	/* FOOTER */
	div.footer div.fourcol {text-align: left; padding-top: 60px;}
	div.footer div.onecol {margin: auto; display: inline-block; float: right;}
	
	}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}