@charset "utf-8";
/* CSS Document */
@font-face { font-family: 'avenirbook'; src: url('../fonts/avenirbookwebfont.eot'); src: url('../fonts/avenirbookwebfont.eot') format('embedded-opentype'),  url('../fonts/avenirbookwebfont.woff2') format('woff2'),  url('../fonts/avenirbookwebfont.woff') format('woff'),  url('../fonts/avenirbookwebfont.ttf') format('truetype'),  url('../fonts/avenirbookwebfont.svg#avenirbookwebfont') format('svg'); }
@font-face { font-family: 'avenirlight'; src: url('../fonts/avenirlight.eot'); src: url('../fonts/avenirlight.eot') format('embedded-opentype'),  url('../fonts/avenirlight.woff2') format('woff2'),  url('../fonts/avenirlight.woff') format('woff'),  url('../fonts/avenirlight.ttf') format('truetype'),  url('../fonts/avenirlight.svg#avenirlight') format('svg'); }
* { margin: 0; padding: 0; list-style: none; }
h1 { font-size: 1.5em; font-weight: normal; text-transform: uppercase; display: inline-block; }
h2 { font-weight: normal; display: inline-block; }
a { color: inherit; text-decoration: none; }
img { width: 100%; height: auto; display: block; border: none; }
html, body { width: 100%; height: 100%; }
body { font-size: 16px; text-align: center; font-family: 'avenirbook'; color: #7D7D7D; line-height: 1.6em; letter-spacing: 0.075em; }
.container { margin: 0 auto; width: 1200px; height: auto;position:relative; }
.container-large { margin: 0 auto; width: 90%; height: auto; }
header { width: 100%; height: auto; background: #5D5D5D; position: fixed; z-index: 9999; }
.header-spacer { height: 60px; position: relative; top: 0; left: 0; }
.header-logo { margin: 10px 0 0 0; width: 60px; float: left; }
.header-logo object { pointer-events: none; }
.header-logo a { width: 100%; height: 100%; display: block; }
#nav {  float: right; position:relative;z-index: 99999; }
#nav li { margin: 0 0 0 60px; float: left; line-height: 60px; text-transform: capitalize; font-size: 0.9em; color: #a7a7a7; }
#nav li a:hover { color: #FFFFFF; }
.mobile-nav-btn, #nav-mobile { display: none; }
.banner { width: 100%; height: 100%; position: relative; overflow: hidden; }
.banner::after { content: ""; background: url(../img/computer-desk-banner.jpg); background-size: cover; background-position: center center;top: -105px; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.banner img { width: 100%; height: auto; position: absolute; }
.banner table { width: 100%; position: absolute; top: 35%; bottom: 50%; }
.banner table tr td { text-align: center; vertical-align: middle; }
div#bgvid { position: absolute; right: 0; top: -105px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; color: white; }
.scroll-down { width: 50px; height: auto; display: inline-block; position: absolute; bottom: 90px; left: 50%; margin-left: -25px; cursor: pointer; }
.scroll-down a { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #fff; }
.scroll-down a:hover { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #0F7DA0; }
.start-project-container h1 { margin: 0 0 15px 0; font-size: 3.25em; text-transform: uppercase; color: #fff;display:block;}
.start-project-container h2 { font-size: 1.25em; font-family: 'avenirlight'; color: #fff; }
.start-project-container div:nth-child(3) { margin: 35px 0 0 0; font-size: 1.15em; text-transform: uppercase; color: #fff; }
.start-project-container .ghost-btn { padding: 10px 18px; width: auto; border: 2px solid #fff; display: inline-block; color: #fff; text-transform: uppercase; }
#website-outer #web-design-jump{padding: 90px 0;}
.img-blocks-section { padding:160px 0 100px; width: 100%; height: auto; display: inline-block; }
.img-blocks-section .ghost-btn { margin: 20px 0 0 0; font-size: .9em; }
.img-blocks-section ul { margin: 50px 0 0 0; }
.img-blocks-section ul li { margin: 0 1% 0 0; width: 32%; height: auto; float: left; }
.img-blocks-section ul li h3 { margin: 20px 0 50px 0; font-size: 0.9em;font-weight:normal; text-transform: uppercase; position: relative;display:inline-block;}
.img-blocks-section ul li h3:after { content: ""; width: 100%; height: 2px; display: inline-block; background: #B1B1B1; position: absolute; left: 0; top: 40px; opacity: 0; -webkit-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */ }
.img-blocks-section ul li:hover h3:after { content: ""; width: 100%; height: 2px; display: inline-block; background: #B1B1B1; position: absolute; left: 0; top: 30px; opacity: 1; -webkit-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */ }
.img-blocks-section ul li div.img-container { overflow: hidden; }
.img-blocks-section ul li div.img-container:hover img { -webkit-transform: scale(1.25) rotate(5deg); /* Safari and Chrome */ -moz-transform: scale(1.25) rotate(5deg); /* Firefox */ -ms-transform: scale(1.25) rotate(5deg); /* IE 9 */ -o-transform: scale(1.25) rotate(5deg); /* Opera */ transform: scale(1.25) rotate(5deg); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.project-btn-container { position: absolute; }

.cycle-btn-container { margin: 25px 0 75px 0; width: auto; display: inline-block; text-align: center; list-style: none; position: relative; }
.cycle-btn-container p { position: absolute; white-space: nowrap; top: 64px; opacity: 0; }
.all-btn:hover ~ p { top: 50px; opacity: 1; }
.cycle-btn-container div { margin: 0 20px; float: left; border: 3px solid #7D7D7D; font-size: 1.5em; font-weight: bold; cursor: pointer; -webkit-transform: scale(1); -moz-transform: scale(1); /* Firefox */ -ms-transform: scale(1); /* IE 9 */ -o-transform: scale(1); /* Opera */ transform: scale(1); }
.cycle-btn-container div:hover { -webkit-transform: scale(1.15); /* Safari and Chrome */ -moz-transform: scale(1.15); /* Firefox */ -ms-transform: scale(1.15); /* IE 9 */ -o-transform: scale(1.15); /* Opera */ transform: scale(1.15); }
.cycle-btn-container div a { width: 100%; height: 100%; display: block; }
.cycle-btn-container .all-btn { position: relative; }
.cycle-btn-container div img { padding: 6px; width: 20px; height: 20px; }
.web-desc-section { padding: 100px 0; display: inline-block; }
.web-info-container { margin: 0 10% 0 0; width: 40%; float: left; text-align: center; color: #B1B1B1; }
.web-info-container .web-section-title { font-size: 2em; color: #7d7d7d; }
.web-info-container .ghost-btn { margin: 50px 0 0 0; display: inline-block; border: 2px solid #B1B1B1; color: #B1B1B1; }
.web-info-container .scroll-down { margin: 150px 0 0 0; width: 50px; height: auto; display: inline-block; position: relative; bottom: auto; left: auto; cursor: pointer; }
.web-info-container .scroll-down a { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #B1B1B1; }
.web-info-container .scroll-down a:hover { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #CCCCCC; }
.web-section-title { margin: 0 0 25px 0; font-size: 1.5em; text-transform: uppercase; font-weight: bold; width: 100%; }
.web-img-container { width: 50%; float: right; }
.my-role-section { padding: 100px 0; background: #F9F9F9; }
.my-role-section ul li { margin: 0 65px; width: 16.666666666667%; display: inline-block; }
.my-role-section ul li p { margin: -20px 0 0 0; text-transform: capitalize; }
.my-role-section ul li .role-img { width: 100%; height: auto; background-size: 40%; background-position: center center; background-repeat: no-repeat; }
.my-role-section ul li .role-img img { visibility: hidden; }
.sample-img-section { padding: 100px 0; }
.sample-img-section ul li { margin: 0 1% 1% 0; width: 23%; height: auto; display: inline-block; }
.sample-img-section ul li:last-child { margin: 0 0 1% 0; }
.sample-img-section .ghost-btn { margin: 75px 0 0 0; border: 2px solid #B1B1B1; color: #B1B1B1; }
.sample-img-section .web-section-title { margin: 0 0 80px 0; }
.graphic-design-section { padding: 100px 0; display: inline-block; }
.graphic-design-section h1 { margin: 0 auto 0px auto; display: table; }
.graphic-design-section h2 { margin: 0 0 25px 0; font-size: 0.95em; font-weight: normal; color: #A7A7A7;display:block; }
.graphic-design-section ul li { margin: 0 4% 2% 0; width: 48%; float: left; }
.graphic-design-section ul li:nth-of-type(2n+2) { margin: 0 0 2% 0; }
#light-box {width:100%;height:100%; position: fixed; z-index:999999;background:rgba(0,0,0,0.87);display: none; }
#light-box img {margin:0 auto;width:auto;height:80%;position:fixed;top:50%;left:50%;display:block;}
#lb-title{padding: 20px 0;width: 100%;text-align: center;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.4);}
#lb-close{width: 35px;height: 35px;font-size: 1.6em;font-weight: bold;color: #fff;line-height: 35px;background: #ce2f2f;position: fixed;top: 20px;right: 20px;border-radius: 100%;cursor:pointer;z-index:1;}
#lb-close:hover { background: #A60000; }
.start-project-section { padding: 0 0 0 0; margin: 0 auto; text-align: center; }
.start-project-section h1 { margin: 100px 0 0 0; text-align: center; }
.start-project-section ul { margin: 0 auto 25px; padding: 25px 40px; width: 900px; background: #F1F1F1; display:block; }
.start-project-section ul li { padding: 0; text-align: left; position: relative; margin: 0px 0 25px 0; width: 100%; height: auto; line-height: 2em; }
#contact-form { margin: 25px 0; }
#contact-form .divider { width: 100%; }
#contact-form h2 { margin: 0 0 5px 0; -webkit-font-smoothing: antialiased; font-size: 0.9em; color: #272727; font-weight: bold; }
#contact-form h3 { font-size: .85em; color: #6B6B6B; }
.sub-section { margin: 0 0 0 25px; }
#name, #email, .form-field, #message-box { padding: 1%; font-size: .85em; font-family: inherit; -webkit-font-smoothing: antialiased; }
input[type="text"], input[type="email"] { width: 70%; height: 27px; border-radius: 4px; box-shadow: 2px 2px 0 0 #EFEFEF; border: 1px solid rgba(93, 93, 93, 0.29); }

::-webkit-input-placeholder {
 font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
 font-style: italic;
}

::-moz-placeholder {  /* Firefox 19+ */
 font-style: italic;
}

:-ms-input-placeholder {
 font-style: italic;
}
input:focus { outline: none !important; box-shadow: 0 0 19px -4.5px #008EBA; }
#message-box { width: 70%; height: 150px; border-radius: 4px; box-shadow: 2px 2px 0 0 #EFEFEF; border: 1px solid rgba(93, 93, 93, 0.29); }
#contact-page #contact-form .divider { margin: 10px 0 10px 3%; width: 64%; height: 1px; background: #8C8C8C; }
.sub-info { font-size: 0.9em; color: #787878; font-weight: normal; font-style: italic; color: #0F7DA0; }
.drop-down-menu { border-radius: 4px; width: auto; height: 35px; box-shadow: 2px 2px 0 0 #EFEFEF; border: 1px solid rgba(93, 93, 93, 0.29); }
.success-container { width: 100%; height: auto; display: inline-block; margin: 170px 0 270px; }
.main-section-wrapper { padding: 0 0 275px 0; margin: 0 auto; max-width: 1200px; height: auto; text-align: center; display: inline-block;/*Display set to inline-block in order for padding-bottom to work*/ }
.main-section-wrapper h1 { transform: rotateY ( 0deg ); }
.main-section-wrapper ul { width: 100%; }
.main-section-wrapper ul li { text-align: left; position: relative; margin: 0 0 50px 0; width: 100%; height: auto; border-radius: 10px; }
.main-section-wrapper ul li:nth-child(4) { width: auto; display: inline-block; }
input[placeholder="name"], input[placeholder="email"], input[placeholder="message"] { font-size: .95em; font-style: italic; }
input[type="text"], input[type="email"] { width:98%; height: 25px; border-radius: 2px; }
#message-box { width: 98%; height: 150px; border-radius: 2px; }
.rotate-success { transform: rotateY( -360deg ); }
.success-rotate-container { transform: perspective ( 10000px ); margin: 0 auto; width: auto; height: auto; display: block; transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; }
.shine { color: #B0B0B0 !important; }
.contact-popup { display: none; }

footer { padding: 50px 0; width: 100%; background: #5D5D5D; /*color: #fff;*/
clear: both; }
footer .start-project-container div:nth-child(1) { margin: 0 0 40px 0; font-size: 1.75em; color: inherit; }
footer .start-project-container .ghost-btn { border: 2px solid #B1B1B1; color: #B1B1B1; }
.footer-social { margin: 75px 0 0 0; width: auto; display: inline-block; }
.footer-social li { margin: 0 20px; padding: 5px; width: 40px; height: 40px; float: left; border: 2px solid #B1B1B1; }
.footer-social li:hover { -webkit-transform: scale(1.25) rotate(360deg); /* Safari and Chrome */ -moz-transform: scale(1.25) rotate(360deg); /* Firefox */ -ms-transform: scale(1.25) rotate(360deg); /* IE 9 */ -o-transform: scale(1.25) rotate(360deg); /* Opera */ transform: scale(1.25) rotate(360deg); }
.footer-social li .social-img { padding: 7px; border: 1px solid #B1B1B1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.footer-social li:hover .social-img { border: 1px solid #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.footer-social li a { width: 100%; height: 100%; }

.open-nav { top: 80px!important; }
.blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }
.no-scroll { overflow: hidden; }
.opacity-25 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); -moz-opacity: .25; -khtml-opacity: .25; opacity: .25; }
.disabled { pointer-events: none; }
.divider { margin: 15px auto; width: 67%; height: 2px; display: block; background: #B1B1B1; }
/*.img-frame { background: #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; padding: 2%; -webkit-box-shadow: 1px 2px 1px #d1d1d1; -moz-box-shadow: 1px 2px 1px #d1d1d1; box-shadow: 1px 2px 1px #d1d1d1; }*/
.clear-fix { clear: both; }
.border-radius { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
.border-radius-small { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }
.transition { -webkit-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */ }
.opacity-50 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.opacity-75 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; }
.ghost-btn { padding: 10px; width: auto; border: 2px solid #0F7DA0; display: inline-block; color: #0F7DA0; text-transform: uppercase; font-size: .8em; background: none; cursor: pointer; }
.ghost-btn:hover { background: #0F7DA0 !important; color: #fff !important; border: 2px solid #0F7DA0 !important; }
.error-txt {color: #e2491a;font-style: italic;font-size: 14px;}

@media (max-width : 1366px) {
body { font-size: 14px; }
header ul li { font-size: 1em; line-height: 40px; }
.header-logo { margin:18px 0 0 0; width: 40px; }
.header-spacer { height: 40px; }
.start-project-container div:nth-child(1) { font-size: 2.65em; }
.start-project-container div:nth-child(2) { font-size: 1.15em; }
.footer-social li { margin: 0 20px; padding: 5px; width: 20px; height: 20px; float: left; border: 2px solid #B1B1B1; }
.footer-social li .social-img { padding: 1px; border: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.footer-social li:hover .social-img { border: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
}

@media (max-width : 1200px) {
.container{margin:0 2%;width:96%;}
.img-blocks-section ul li { margin: 0 1% 0 0; width: 49%; height: auto; float: left; }
}
@media(max-width:1100px){
	.start-project-section ul{padding-right:2%;padding-left:2%;width:96%;}
}


@media(max-width:900px){
.web-info-container { width: 100%; }
.sample-img-section ul li { width: 48%; }
.web-img-container { width: 100%; }
.cycle-btn-container { margin: 0px 0 50px 0; width: auto; display: inline-block; text-align: center; list-style: none; }
.cycle-btn-container div img { padding: 3px; width: 15px; height: 15px; }
.web-info-container .scroll-down { margin: 75px 0 0 0; }
}

@media(max-width:796px) {
	.header-logo {margin: 12px 0 0 0;}
	#nav { display: none; }
	.mobile-nav-btn { position: absolute; top: 10px; right: 18px; /* border: 1px solid #B3B3B3; */
	border-radius: 10%; padding: 7px; display: block; background: grey; cursor: pointer; }
	.mobile-nav-btn div { margin: 2px 0; height: 2px; width: 15px; background: #B3B3B3; }
	.mobile-nav-btn:hover { border: 1px solid white; }
	#nav { margin: 0 0; width: 100%; text-align: left; display: block;position:absolute; left: 0; right: auto; top: -500px; z-index: 9998; background: rgba(255, 255, 255, 0.93); -webkit-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */ }
	#nav li { width: 100%; float: none; margin: 0 0 0 0; border-top: 1px solid #6D6D6D; color: #6D6D6D; }
	#nav li:last-child { border-bottom: 1px solid #6D6D6D; }
	#nav li a { padding: 10px 70px; width: 100%; display: block; box-sizing: border-box; }
	#nav li a:hover { background: #005198; }
	.img-blocks-section ul li { margin: 0 1% 0 0; width: 99%; height: auto; float: left; }
	.main-section-wrapper ul li { padding: 2%; text-align: left; position: relative; margin: 0 0 40px 0; width: 100%; height: auto; line-height: 2em; background-color: #ECECEC; box-shadow: 0 0 14px -5px rgba(0,0,0,0.45); }
	input[type="text"], input[type="email"] { width: 98%; height: 27px; border-radius: 6px; }
	#message-box { width: 98%; height: 150px; border-radius: 2px; }
	}