@import 'comp/_reset.css'; 
@import 'comp/_grid-12.css'; 
@import 'comp/_typo.css'; 
/*
	
*/
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; overflow-x: hidden; font-family: 'Adobe Garamond Pro'; line-height: 28px; font-size: 23px; }
body, html { overflow-x: hidden; min-width: 320px; }
section { width: 100%; overflow: hidden; }
header { position: absolute; top: 47px; z-index: 100; width: 100%; }
header a { color: #ff4342; font-size: 24px; text-decoration: none; font-family: 'Nexa XBold'; vertical-align: middle; padding-left: 40px; position: relative; outline: 0; }
header a img { position: absolute; left: 0; top: 2px; }
.page__hero { height: 750px; position: relative; }
.page__hero .container { height: 100%; position: relative; }
.page__hero .row { position: relative; height: 100%; }
.grid { position: absolute; left: -15px; right: -15px; top: 0; bottom: 0; }
.grid .col { width: 8.33%; float: left; height: 100%; position: relative; }
.grid .col:after { position: absolute; background: #ff4342; opacity: 0.1; left: 15px; right: 15px; top: 0; bottom: 0; content: "";  }

.page__hero {  }
.page__hero .headline { line-height: 78px; color: #ff4342; font-size: 65px; font-family: 'Nexa XBold'; position: relative; }
.page__hero .headline:before { position: absolute; background: #ff4342; height: 1px; left: -100%; width: 300%; content: ""; top: 6px;}
.page__hero .headline:after { position: absolute; background: #ff4342; height: 1px; left: -100%; width: 300%; content: ""; bottom:5px;}
.page__hero .headline:nth-child(2):after { bottom:11px;}
.page__hero .headline .highlight { color: #FFF; }
.page__hero .content { margin-top: 200px; }

.code { color: #414141; font-family: 'Courier'; font-size: 12px; line-height: 16px;  }
.code-wrap { position: absolute; bottom: 40px; line-height: 14px; }
.code-1 { display: block; position: relative; }
.code-2 { display: block; }
.code-3 { display: block; padding-left: 30px; }
.code .pad { padding-left: 20px; }
.pad-2 { margin-left: 30px; }
.code .blue { color: #016cff; }
.code .purple { color: #963dff; }
.code .purple-2 { color: #a535ae; }
.code .orange { color: #b7734c; }

.logo-fade { opacity: 0; }

.section-title { font-size: 40px; width: 100%; text-align: center; color: #FFF; font-family: 'Nexa XBold'; }

.page__featured-work { padding-top: 90px; color: #333333;}
.page__featured-work .section-title { color: #333333; }
.mac { width: 985px; height: 566px; background: url('../img/mac-2-grey.png'); background-size: 985px 566px; background-repeat: no-repeat; position: relative; }
.mac .screen { position: absolute; width: 663px; height: 451px; background: url('../img/mac-screen-2.png'); background-size: 663px 451px; left: 133px; top: 41px; }
.page__featured-work .content { margin-top: 95px;  }
.page__featured-work .container {/*  padding-bottom: 100px;  */}
.page__featured-work a { color: #333333; }
.page__featured-work h3 { font-size: 30px; font-family: 'Nexa XBold'; margin-top: 0; margin-bottom: 44px; }

.page__skills { padding-top: 96px; padding-bottom: 100px;}
.page__skills h3 { font-size: 30px; font-family: 'Nexa XBold'; margin-top: 0; margin-bottom: 44px; color: #005679; }
.page__skills p { font-size: 23px; line-height: 28px; color: #FFF; margin-top: -16px; }
.page__skills .item { padding-top: 95px; }
.page__skills .item-odd { padding-right: 140px; }
.page__skills .item-even { padding-left: 140px; }

.page__about { position: relative; min-height: 895px; background: #000; }
.page__about .video-container, .page__about .video, .page__about .video-overlay { position: absolute; width: 100%; height: 100%; z-index: 99; }
.page__about .video-overlay { background-size: cover!important; }
.page__about .video { opacity: 0; display: table; }
.page__about .content { position: relative; z-index: 100; padding-top: 96px; }
.page__about h2 { margin-bottom: 104px; }
.page__about h3 { font-size: 30px; font-family: 'Nexa XBold'; margin-top: 0;  color: #FFFFFF; }
.page__about p { font-size: 23px; line-height: 28px; color: #FFF; margin-top: -9px; }
.page__about a { position: relative; color: #FFF; text-decoration: none; }
.page__about a:after { content: ""; bottom: 3px; left: 1px; right: 1px; height: 1px; background: #FFF; position: absolute; }
.page__about .person { margin-bottom: 48px; cursor: pointer; display: table; }
.page__about .person.active, .page__about .person:hover { opacity: 0.6; }
.video-overlay-tone { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 102; }
.page__about .video-container { overflow: hidden; }

.page__process .content { position: relative; z-index: 100; padding-top: 96px; display: table; margin: 0 auto; width: 100%;  }
.page__process h2 { margin-bottom: 124px; color: #000; }
.page__process h3 { font-size: 30px; font-family: 'Nexa XBold'; margin-top: 0;  color: #ff4342; display: table; position: relative; }
.page__process p { font-size: 23px; line-height: 28px; color: #000; line-height: 36px; }
.page__process .process { margin-bottom: 87px; width: 33.333%; float: left; padding-left: 25px; padding-right: 25px; }
.page__process .process-row { display: table; width: 100%; position: relative; }
.page__process .process-row-2 .process { margin-bottom: 40px; }
.page__process .line { position: absolute; height: 1px; left: -27px; background: #ff4342; top: 12px; }

.line-2, .line-1, .line-3, .line-4 { width: 100%; color: black; height: 1px; background: #ff4342; opacity: 0; }


.a, .b, .c, .d, .e, .f, .g, .h { position: absolute; width: 1px; height: 1px; background: none; top: 10px; }
.a, .c, .e, .g { right: -25px; }
.b, .d, .f, .h { left: -27px; } 

.page__clients { min-height: auto; padding-bottom: 150px; padding-top: 40px; }
.page__clients .content { position: relative; z-index: 100; padding-top: 66px; display: table; width: 100%; }
.page__clients p, .page__clients h2 { color: #ff4342; text-align: center; }
.page__clients p { font-size: 23px; line-height: 29px; }
.page__clients h2  { margin-bottom: 60px; }
.page__clients .client-text { max-width: 900px; margin: 0 auto; }
.page__clients .client-row { display: table; margin: 0 auto; max-width: 920px; width: 100%; }
.page__clients .client {  width: 25%; float: left; height: 102px; display: table; margin-top: 60px; }
.page__clients .client-block { max-width: 909px; display: table; margin: 0 auto; width: 100%; }
.page__clients .client .img-wrap { display: table-cell; vertical-align: middle;  text-align: center;  }

.page__footer { background: #FFF; padding-top: 120px; padding-bottom: 119px; }
.page__footer a { position: relative; color: #ff4342; text-decoration: none; }
.page__footer a:after { content: ""; bottom: 3px; left: 1px; right: 1px; height: 1px; background: #ff4342; position: absolute; }
.page__footer h2 { font-size: 30px; font-family: 'Nexa XBold'; margin-top: 0; }

.typed-cursor { opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; font-size: 12px; }
@keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}


/**
 * Set default positioning as a fallback for if the plugin fails
 */
.jquery-background-video-wrapper {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    	background-size: cover;
}
.jquery-background-video {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	    	transform: translate(-50%,-50%);
}
/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .jquery-background-video {
	opacity: 0;
	-webkit-transition: opacity 300ms linear;
			transition: opacity 300ms linear;
}
.js .jquery-background-video.is-visible {
	opacity: 1;
}

.visible-mobile { display: none; }
.visible-tablet { display: none; }

.animation-c, .animation-a { position: absolute; width: 100%; height: 100%; top: -100px; left: 0; z-index: 100; }
.center-wrapper { width: 100%!important; height: 100%!important; top: 0!important; }

.animation-d { left: 133px; right: 0; top: 41px; bottom: 74px; position: absolute; overflow: hidden; }
.animation-b { left: 0; right: 0; top: 0; bottom: 0; position: absolute; overflow: hidden; }
.empty_b { width: 100%!important; height: 100%!important; }
.Stage-1_grid_id { width: 100%!important; }
.edgeLoad-empty_d, .edgeLoad-empty_a, .edgeLoad-empty_c, .edgeLoad-empty_b { visibility:hidden; opacity: 0; }



@media(min-width: 1070px) {
 	.empty_c, .empty_a { transform: scale(0.9)!important; } 
}
@media(min-width: 1025px) {
/* 	.empty_c, .empty_a { transform: scale(1)!important; } */  
	.page__hero { min-height: 723px;  }
}
@media(max-width:1024px) and (min-width: 993px) {
	.hidden-tablet { display: none; }
	section { overflow: hidden; }
	
	.process .row { margin-left: 0; margin-right: 0; }
	.page__skills .item-odd  { padding-right: 60px; }
	.page__skills .item-even  { padding-left: 60px; }
	header { padding-left: 25px; padding-right: 25px; }
	.page__hero { padding-left: 25px; padding-right: 25px;}
	#Stage-1_grid { height: 100%!important; }

	.animation-c, .animation-a { top: 0; }
	.mac { margin-top: 50px; }
	.page__skills { padding-left: 25px; padding-right: 25px; padding-bottom: 35px;  }
	.page__skills .item-even { padding-left: 25px; padding-top: 25px; }
	.page__skills .item-odd{ padding-left: 25px; padding-top: 25px; } 
	.page__about .person { margin-left: 25px; }
	.page__clients .client-row  { margin-left: 0; margin-right: 0; display: block; width: auto; max-width: 100%; }
}

@media (min-width: 1024px) and (max-width:1200px) {
	.page__process { padding-left: 32px; padding-right: 32px; }
	.page__footer .container { padding-left: 50px; padding-right: 50px; }
	.page__skills { padding-left: 25px; padding-right: 25px; }
	.page__about .person { margin-left: 25px; }
	.page__hero .container { padding-left: 75px; padding-right: 75px; }
	header a { margin-left: 25px;  }
}
 


@media(max-width:992px) {
	.mobile { background: #ffffff!important; } 
	section { min-height: auto; }
	header { top: 25px; }
	header a { text-indent: -9999px; font-size: 0; }
	header a img { position: relative; float: left; margin-left: 25px; }
	.page__hero { min-height: 568px; height: auto; }
	.page__hero .content { margin-top: 95px; height: 100%; min-height: 360px; }
	.page__hero .headline { font-size: 41px; line-height: 47px; max-width: 100%; position: absolute; top: 50%; }
	.grid { display: none;  }
	.page__hero { padding-left: 25px; padding-right: 25px; padding-bottom: 84px; background: #f7cb15; height: auto!important; }
	.page__hero .headline:before, .page__hero .headline:after { display: none; }
	.page__hero .content { margin-top: 95px; }
	.typed-cursor, #typed, #typed-strings { display: none; }
	.section-title { font-size: 25px; }
	.page__featured-work  { padding-top: 37px; padding-left: 25px; padding-right: 25px; }
	.hidden-mobile { display: none; }
	.visible-mobile { display: block; }
	.mac-mobile img { width: 100%; }
	.page__featured-work { padding-bottom: 35px; background: #f5f5f5; }
	.page__featured-work .content { margin-top: 38px; }
	.page__featured-work h3 { font-size: 20px; text-align: center; width: 100%; margin-top: 35px; margin-bottom: 30px; }
	.page__featured-work .text p { font-size: 19px; line-height: 23px; }
	.page__featured-work .content .col-md-6 { padding-left: 0; padding-right: 0; }
	.mac-mobile { padding-left: 25px; padding-right: 25px; }
	
	.page__skills { padding-left: 25px; padding-right: 25px; padding-bottom: 35px; padding-top: 0; background: #44c7ec; }
	.page__skills h2 { margin-top: 60px; margin-bottom: 30px; }
	.page__skills .item { width: 50%; float: left; padding: 0; padding-top: 13px;  }
	.page__skills .item-even { padding-left: 50px; padding-right: 25px; }
	.page__skills .item-odd{ padding-left: 25px; padding-right: 50px; } 
	.page__skills h3 { font-size: 20px; margin-top: 0px; margin-bottom: 15px; }
	.page__skills p { font-size: 20px; margin-top: 0px; margin-bottom: 14px;  }
	
	.page__about { background: #000; padding-left: 25px; padding-right: 25px; min-height: 10px; }
	.page__about .video-container { display: none; }
	.page__about h2 { color: #ff4342; margin-bottom: 30px; }
	.page__about .person.active, .page__about .person:hover { opacity: 1; }
	.page__about h3 { font-size: 20px; }
	.page__about p { font-size: 19px; line-height: 23px; }
	.page__about .content { padding-top: 40px; }
	.page__about .person { margin-bottom: 30px; }
	
	.page__process { background: #FFF; padding-left: 25px; padding-right: 25px; padding-bottom: 35px; }
	.page__process .content { padding-top: 34px; }
	.page__process .process { margin-bottom: 30px; }
	.page__process h2 { margin-bottom: 50px; }
	.page__process h3 { font-size: 20px; margin-bottom: 11px; }
	.page__process h3 .nr { width: 30px; display: table; float: left; line-height: 28px; }
	.page__process p { font-size: 19px; line-height: 28px; color: #333333; padding-left: 30px; margin-top: 0; position: relative; }

	.page__clients { background: #f7cb15; padding-left: 25px; padding-right: 25px; padding-bottom: 35px; }
	.page__clients p { font-size: 19px; line-height: 23px; text-align: left; }
	.page__clients .client { width: 33.333%; height: 84px; }
	.page__clients .client-row { padding-left: 25px; padding-right: 25px; display: block; width: auto; max-width: 100%; }
	.page__clients .content { padding-top: 30px; padding-bottom: 35px; }
	.page__clients .client { margin-top: 15px; }
	.page__clients h2 { margin-bottom: 28px; }
	.page__clients .client-text { margin-bottom: 40px; }
	
	.logo-1 { width: 68px!important; height: 57px!important; }
	.logo-2 { width: 84px!important; height: 31px!important; }
	.logo-3 { width: 86px!important; height: 30px!important; }
	.logo-4 { width: 89px!important; height: 26px!important; }
	.logo-5 { width: 90px!important; height: 25px!important; }
	.logo-6 { width: 53px!important; height: 44px!important; }
	.logo-7 { width: 69px!important; height: 21px!important; }
	.logo-8 { width: 95px!important; height: 13px!important; }
	.logo-9 { width: 99px!important; height: 50px!important; }
	.logo-10 { width: 74px!important; height: 57px!important; }
	.logo-11 { width: 46px!important; height: 57px!important; }
	.logo-12 { width: 69px!important; height: 43px!important; }
	
	.page__clients .client-block { max-width:600px; display: table; margin: 0 auto; width: 100%; }
	
	.page__footer { padding-top: 55px; padding-bottom: 25px; }
	.page__footer h2 { font-size: 20px; margin-bottom: 11px; } 
	.page__footer p { font-size: 19px; line-height: 23px; margin-top: 0; }
	
/* 	.line-1, .line-2, .line-3 { display: none; } */
	.page__footer .col-md-6 { margin-top: 25px; }
	
}
@media(max-width:768px) {
	.page__hero .headline {  }
	.page__process { background: #FFF; padding-left: 35px; padding-right: 35px; padding-bottom: 35px; }
	.page__process .process-row { width: 100%; max-width: 240px; margin: 0 auto; display: table; }
	.page__process .process { width: 100%; margin-bottom: 0; }
	.page__process .content { padding-top: 40px; }
	.page__process h2 { margin-bottom: 25px; }
	.page__process h3 { font-size: 20px; margin-bottom: 11px; }
	.page__process h3 .nr { width: 30px; display: table; float: left; line-height: 28px; }
	.page__process p { font-size: 19px; line-height: 28px; color: #333333; padding-left: 30px; margin-top: 0; position: relative; }
	.page__process p:before { position: absolute; top: -3px; bottom: -5px; width: 1px; left: 6px; background: #ff4342; content: ""; }
	.page__process .process-row:last-child .process:last-child p:before { background: #fff; }
	.a, .b, .c, .d, .e, .f, .g, .h { display: none; }
	.line-1, .line-2, .line-3 { display: none; }
}
@media(max-width:568px) {
	.page__process .process { width: 100%; max-width: 100%; margin-bottom: 0!important; }
	.page__process .process-row { max-width: 100%;  }
	.page__hero, .page__hero .content { min-height: 10px; }
	.page__hero .headline { top: 0px; position: relative; }
	.page__clients .client { width: 50%; height: 84px; }
	.page__clients .client-row { padding-left: 0; padding-right: 0; }
	.page__process { padding-left: 25px; padding-right: 25px; }
	.page__clients .client-block { max-width: 320px; padding-left: 0; padding-right: 0; display: table; width: 100%; margin: 0 auto; } 
	.page__hero .headline { width: 100%; max-width: 100%; } 
	.mobile-remove-padding { padding-left: 0; padding-right: 0; }
	.page__skills .item-odd, .page__skills .item-even { width: 100%; padding-left: 25px; padding-right: 25px; }
}





@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@-webkit-keyframes fadeSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.j-fadein-scrollout-trigger,
.j-fadein-trigger,
.j-fadesin-trigger {
    opacity: 0
}

.j-visible.j-fadein-scrollout-trigger,
.j-visible.j-fadein-trigger {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.j-visible.j-fadesin-trigger {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.j-fadeslidein-trigger {
    opacity: 0
}

.j-visible.j-fadeslidein-trigger {
    -webkit-animation-name: fadeSlideIn;
    animation-name: fadeSlideIn;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.j-fadeslidein-scrollout-trigger {
    opacity: 0
}

.j-visible.j-fadeslidein-scrollout-trigger {
    -webkit-animation-name: fadeSlideIn;
    animation-name: fadeSlideIn;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.mobile .j-fadesin-trigger,
.mobile .j-fadeslidein-trigger {
    opacity: 1

}
.mobile .j-fadeslidein-scrollout-trigger {
    opacity: 1
}
.mobile .j-fadein-scrollout-trigger,
.mobile .j-fadein-trigger {
    opacity: 1
}
video::-webkit-media-controls {
  display: none;
}