@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital@0;1&family=Bebas+Neue&display=swap');

body, html { /* set size of body to full page and remove margins */
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    /*-webkit-font-smoothing: antialiased;*/
}
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.background {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	z-index: -1;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0px;
     -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 99;
    background-color: white; 
}
.loaded .background {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: ready 5s 1;
    animation: ready 5s 1;
    -webkit-animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);    
    animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}

.top_left h2,
.top_right h2{
	font-family: 'Bebas Neue', cursive, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.25rem;
}
@-webkit-keyframes ready {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes ready {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.loghino svg{
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  z-index: 1;
  width: 240px;
  height: 420px;
  margin-top: -210px;
  margin-left: -120px;
}

.container{
	height: 100%;
}
._cont_block{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
._cont_block > section:first-child {
	top: 0;
	left: 0;
	/* background: #F06060; */
	/* border-top: 25px solid #fa987d;
	border-left: 25px solid #fa987d; */
	/* color: #fa987d; */
}

._cont_block > section:first-child ._robot_ts{
	position: absolute;
	bottom: 0;
	right: 0;
}
._cont_block > section {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
._cont_block > section {
	position: absolute;
	width: 50%;
	height: 50%;
	background: #110a2c;
	
}
._cont_block > section:nth-child(2) {
	top: 0;
	left: 50%;
	/* background: #FA987D; */
	/* border-top: 25px solid #f06060;
	border-right: 25px solid #f06060; */
	/* color: #f06060; */
}
._cont_block > section:nth-child(2) ._robot_td{
	position: absolute;
	bottom: 0;
	left: 0;
}
._cont_block svg{
	display: block;
	margin: -1px;
}
._cont_block > section:nth-child(3) {
	top: 50%;
	left: 0;
	/* background: #72CCA7; */
	/* border-bottom: 25px solid #10a296;
	border-left: 25px solid #10a296; */
	/* color: #10a296; */
}
._cont_block > section:nth-child(3) ._robot_bs{
	position: absolute;
	top: 0;
	right: 0;
}
._cont_block > section:nth-child(4) {
	top: 50%;
	left: 50%;
	/* background: #10A296; */
	/* border-bottom: 25px solid #72cca7;
	border-right: 25px solid #72cca7; */
	/* color: #72cca7; */
}
._cont_block > section:nth-child(4) ._robot_bd{
	position: absolute;
	top: 0;
	left: 0;
}

.bl-box {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 1;
	/* Centering with flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

#services  .tab-content  .active { padding-top: 10px !important;}

.modal-dialog {
	max-width: 1600px;
	margin-left: auto !important;
	margin-right: auto !important;
	display: block;
	height: 100%;
}

@media screen and (max-width: 46.5em) {
	.bl-content,
	.bl-box {
		font-size: 75%;
	}

	.bl-expand .bl-box {
		height: 130px;
	}

	.bl-content > ul li {
		width: 40%;
	}
	
	._robot_ts svg.progress, ._robot_td svg.progress, ._robot_bs svg.progress, ._robot_bd svg.progress{
		height: 95px;
		width: 54px;
	}
}
@media max-width: 46.5em and (orientation:landscape) {
	._robot_ts svg.progress, 
	._robot_td svg.progress, 
	._robot_bs svg.progress, 
	._robot_bd svg.progress{
		height: 95px;
		width: 54px;
	}
	
}

.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus{
	color: #DDDDDD;
}
.folks{
	margin-top: 25px;
	/* height: 600px; */
	overflow: visible;
}

.folks h2{
	padding: 0 0 1rem;
	display: block;
	letter-spacing: -0.5px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
	font-family: "Bebas Neue", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 6rem;
	font-weight: bold;
	line-height: 0.83em;
	text-align: center;
	text-transform: uppercase;
}

.folks h3{
	letter-spacing: -0.5px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
	font-family: "Alegreya Sans", Georgia, Cambria, "Times New Roman", Times, serif;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	line-height: 1.45em;
} 

@media (max-width: 767px){
.folks h2 {
	font-size: 50px;
	font-weight: bold;
	line-height: 0.93em;
	text-align: center;
	text-transform: uppercase;
}
}
@media (min-width: 767px) and (max-width: 1150px){
.folks h2 {
	font-size: 70px;
	font-weight: bold;
	line-height: 0.93em;
	text-align: center;
	text-transform: uppercase;
}
}

@media (max-width: 767px){
	.folks h3 {
	font-size: 18px;
	}
}

.logo_folks {
	margin-top: 25px;
}
.logo_folks svg{
  margin: 0 auto;
  display: block;
  z-index: 1;
  width: 100px;
  height: 153px;
}
/*
*
*
*
*
* M O D A L
*
*
*
*/
.browser {opacity: 0;}
.content {opacity: 0;}

#mobile .device { margin-top: 30px; display: block;  margin-left: auto; margin-right: auto;}
#mobile .browser { margin-top: -137px; display: block;  margin-left: auto; margin-right: auto;}
#mobile .content { margin-top: -92px; display: block;  margin-left: auto; margin-right: auto;}


#tablet .device { margin-top: 2px; display: block;  margin-left: auto; margin-right: auto; }
#tablet .browser {  margin-top: -192px;  display: block;  margin-left: auto; margin-right: auto;}
#tablet .content { margin-top: -144px; display: block;  margin-left: auto; margin-right: auto;}



#desktop .device  { margin-top: 11px; display: block;  margin-left: auto; margin-right: auto;  }
#desktop .browser { margin-top: -165px; display: block;  margin-left: auto; margin-right: auto; }
#desktop .content { margin-top: -98px; display: block;  margin-left: auto; margin-right: auto;}



.tabheader { font: 12px/22px "sourcecode", monospace, courier; display: inline-block; color: #DDDDDD; padding-bottom: 10px;  width: 160px; line-height: 1.1; }

.tabheader img {padding-top: 10px;}

.responsive { display: block; width: 320px;  margin-top: 20px;  text-align: center;    float: left; margin-right: 30px;}
.retina { display: block; width: 340px; margin-top: 20px;  text-align: left;  float: left;   }

.rtext {  font-size: 28px; line-height: 1.1;font-family: 'sourcecode',serif; margin-bottom: 30px;}
.rsubtext {display: block; float: left; padding-top: 10px; margin-top: 20px; padding-bottom: 90px; line-height: 1.2; font-family: 'sourcecode',serif;}

.rsubtext i { color: #fe504f;}

.twox, .onex { width: 160px; display: block; float: left; font: 14px/24px "sourcecode", monospace, courier; color:  #DDDDDD; padding-right: 10px;}

.twox i { display: block; text-align: center; height: 100px; padding: 20px;}
.onex i { display: block; text-align: center; height: 100px; padding: 48px;}

.underresp { padding-top: 30px; font: 13px/23px "sourcecode", monospace, courier; color: #fe504f; width: 230px; display: inline-block; line-height: 1.3;}

.tabber { height: 240px;}

.subinfo h6 { padding-left: 2px;}

.subinfo {width: 126px; display: inline-table; font: 12px/22px "sourcecode", monospace, courier;  padding-right: 2px; padding-left: 2px; color: #DDDDDD; text-transform: uppercase; }

h6 {font: 12px/22px "sourcecode", monospace, courier;    padding: 12px 0px 0px 0px; margin: 0px 0px 0px 0px; text-transform: uppercase; color: #fe504f; letter-spacing: 1px; font-style: normal; font-weight: 700;}


img { -ms-interpolation-mode: bicubic;  image-rendering: optimizeQuality;  }


.modal {  margin-bottom: -184px !important;  }

.modal-dialog { /* max-width: 1600px;  */margin-left: auto !important; margin-right: auto !important; display: block; height: 100%; margin-bottom: 60px;}

.modal-title { font: 18px/28px "sourcecode", monospace, courier;   font-size: 20px;  margin: 0px !important; padding: 30px 0px 20px 40px;  line-height: 1.0; text-transform: uppercase;
	}


.modal-body {  font-family: "sourcecode", monospace, courier; font-size: 16px;  color: white; margin: 0px !important; padding: 0px !important; }


.modal-sub-h1 {  font-family: "Alegreya Sans", Serif; font-style: italic; font-size: 26px; padding-bottom: 2px;  }

.modal-h1 { font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; font-weight: bold ; color: #fe504f; font-size: 130px; line-height: 0.85; }
.modal-h1 span { color: white; font-size: 26px; display: inline-block; 
-webkit-transform: translate( -25px,-66px); 
-ms-transform: translate( -25px,-66px); 
transform: translate( -25px,-66px); 
border-bottom: #fe504f solid 1px; border-top: #fe504f solid 1px; padding-top: 5px;  padding-bottom: 7px; letter-spacing: 4px; } 
.modal-under-h1 {  font-family: "Alegreya Sans", Serif;  font-size: 30px; padding-top: 14px; }

.modal-under-h1 span { color: #fe504f; }

.modal-body .right {  width: 63.4%; float: right; margin-top: -80px; padding-top: 80px; padding-bottom: 180px;  }

.content-right {width: 730px;  margin-left: auto; margin-right: auto; }

#about .content-right {width: 690px; }
#contact .content-right {width: 690px; }

.modal-body .left { width: 36.5%; padding-bottom: 40px; display: inline-table;   text-align: center;  padding-bottom: 180px; }
.content-left { width: 400px; margin-left: auto; margin-right: auto; 
}

.left #wrapper { text-align: center;}


.small-title { font: 14px/24px "sourcecode", monospace, courier;  text-align: center; color: #aaaaaa; padding-bottom: 10px; padding-top: 10px;  margin-bottom: -20px;}

.nav-tabs > li > a {
	font-family: 'Bebas Neue', serif !important;
}
#about .small-title { color: #DDDDDD; padding-bottom: 0px; margin-bottom: -10px; }

.sep {padding-top: 15px; padding-bottom: 15px;}
.small-title2 { font: 14px/24px "sourcecode", monospace, courier;  color:  #aaaaaa; }
.toolset { font: 14px/24px "sourcecode", monospace, courier; color: #aaaaaa; padding-bottom: 20px; }

.process {display: block; margin-top: 6px; background-image: url(../img/ui/process.svg); background-repeat: no-repeat; background-position: -10px 0px; height: 330px; margin-left: -5px; padding-bottom: 50px;}

.process img { position: absolute; margin-left: -11px; }



.process i { font-size: 16px; color:#fe504f;  }

.process b { font-size: 26px;  font-family: 'Bebas Neue', sans-serif;   font-weight: bold ; text-transform: uppercase; display: block; margin: -3px 0px 0px 0px; padding: 0px 0px 0px 0px; height: 34px; overflow: hidden;}


.idea { font-size: 16px; font-style: italic;  height: 1px; position: absolute; padding-left: 15px; padding-top: 37px; }

.agencies {  height: 1px; position: absolute; padding-left: 80px; padding-top: 63px;}

.clients { height: 1px;  position: absolute; padding-left: 517px; padding-top: 63px;}

.result {   font-size: 16px; font-style: italic; position: absolute; padding-left: 680px; padding-top:  37px; text-align: right;}

.subline { font-size: 16px; color: #aaaaaa; position: absolute; padding-top: 291px; padding-left: 80px; width: 350px; }




.listing {list-style-type: none;  padding: 0; margin: 0px; width: 0px;}

.listing li {  width: auto; font-size: 16px; padding: 0px; margin: 0px;  padding-right: 5px; display: inline-block; height: 24px;  width: min-intrinsic; background-color: #f6f6f6 ;}

.accordionContent { padding-bottom: 15px; line-height: 1.2;  margin-top: -4px; }

.acContent { padding-bottom: 15px; line-height: 1.2;  margin-top: -5px;   }

/*
.acContent span { font-size: 18px; padding: 7px 10px 10px 0px; display: inline-block; width: 80%; margin-bottom: -10px; color: #DDDDDD;  }
*/

.cogs { background-image: url(../img/ui/development.svg); height: 25px; background-repeat: no-repeat; background-position: center center; }


.accordionButton {cursor: pointer; 
color: white;
        transition: color .3s linear;
   -moz-transition: color .3s linear; 
-webkit-transition: color .3s linear;}

.acButton {cursor: pointer; 
margin-bottom: 5px;
color: white;
        transition: color .3s linear;
   -moz-transition: color .3s linear; 
-webkit-transition: color .3s linear;}


.on { color: #fe504f; }

.accordionButton:hover, .acButton:hover  {color: #fe504f;}
	
#organized { font-size: 30px; font-style: italic; }
#flexible { font-size: 30px; font-style: italic; margin-top: -8px; }

#connected { font-family: 'Bebas Neue', sans-serif; font-size: 36px; text-transform: uppercase; font-weight: bold; margin-top: -12px; }
#transparent { font-size: 36px; margin-top: -14px;}
#focused { font-family: 'Bebas Neue', sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold;  margin-top: -9px;}
#responsible { font-size: 26px; margin-top: -10px; text-transform: lowercase;}


#uxdesign { font-family:"Alegreya Sans",serif !important; font-size: 28px; font-style: italic; }
#uidesign  { font-family: 'Bebas Neue', sans-serif; font-size: 64px; text-transform: uppercase; font-weight: bold; margin-top: -19px;   }
#frontenddev.acButton { font-size: 28px; font-family:"Alegreya Sans",serif;font-style: italic;margin-top: -13px;  }
#brand { font-family: 'Bebas Neue', sans-serif; font-size: 36px; text-transform: uppercase; font-weight: bold; letter-spacing: 6px; margin-top: -11px; }
#prodcontr { font-size: 28px; font-family:"Alegreya Sans",serif;font-style: italic; margin-left: -12px; text-transform: lowercase; margin-top: -11px; }




.modal .close { 
               width: 47px; 
		      height: 47px; 	
		     display: block;
		    position: absolute;  
		       right: 0px;
	     margin-left: 20px;
	    margin-right: 15px !important; 
		  margin-top: 15px !important; 
    background-color: transparent; 
   -webkit-transform: rotate(0deg); 
      -moz-transform: rotate(0deg); 
        -o-transform: rotate(0deg); 
           transform: rotate(0deg); 
  -webkit-transition: -webkit-transform 0.2s ease; 
     -moz-transition: -moz-transform 0.2s ease;
       -o-transition: -o-transform 0.2s ease ;
          transition: transform 0.2s ease ; 

}

.modal .close:hover {cursor: pointer;
-webkit-transform: rotate(90deg); 
   -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
        transform: rotate(90deg); 

}


#approach .modal-dialog ,  #startup, #outsource  { background-color: #f6f6f6; }
#ui, #front-end, #branding, #ux   { background-color: black !important; color: white; }
#about .modal-dialog { /* background-color: black; */ color: white; }


#ten .modal-title, #startup .modal-title, #outsource .modal-title  { color: white !important;} 
#approach .modal-body, #ten .modal-body, #startup .modal-body, #outsource .modal-body { color: white !important;} 

#contact ._step {
	padding: 20px 0 100px 0;
	width: 100%;
	/* height: 1000px; */
	overflow: visible;
}
@media (max-width: 767px) {
    #contact ._step {
        padding: 10px 0;
    }
}

#contact ._step address{
	margin-top: 30px;
}
.text2 {
	color: #141212;
	font-family: "Alegreya Sans", Georgia, Cambria, "Times New Roman", Times, serif;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	line-height: 1.45em;
}
.text2.size-830 {
	width: 830px;
}
.text2.box {
	border: 20px solid #141212;
	padding: 50px 110px;
}
@media (max-width: 767px) {
    .text2.box {
        border: 10px solid black;
        padding: 20px;
        width: 90% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .text2.box {
        width: 90% !important;
    }
}

.text2.mid {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px auto;
	text-align: center;
}
@media (max-width: 767px) {
    .text2.mid {
        padding: 0 20px;
        width: 90% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .text2.mid {
        padding: 0 50px;
        width: 100% !important;
    }
}

#contact ._step p{
	margin-top: 60px;
}
#contact ._step span.subline2 {
	line-height: 1em;
	margin: 100px auto 0 auto;
	width: 90%;
	text-align: center;
}

#contact ._step span.subline2 p{
	color: #141212;
	display: block;
	font-family: "sourcecode", "monospace";
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 3px;
	margin-top: 30px;
}


@media (max-width: 767px) {
   #contact ._step span.subline2 p{
        margin: 25px auto 0 auto;
        width: 90% !important;
    }
}


@media (max-width: 767px) {
    #contact ._step h2 {
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
   #contact ._step .text2 {
        font-size: 16px;
    }
}


@media (max-width: 767px) {
    #contact ._step .text2.box {
        padding: 10px;
    }
}
@media (max-width: 767px) {
    #contact ._step p {
        margin-top: 30px;
    }
}
#contact ._step p a {
	color: #DDDDDD;
}
@media (max-width: 767px) {
    #contact ._step p a {
        display: block;
        padding: 10px 0;
    }
}

#contact ._step p a:last-child {
    cursor: default;
    text-decoration: none;
    color: #DDDDDD;
}

@media (max-width: 767px) {
    #contact ._step p a:last-child {
        cursor: pointer;
        text-decoration: underline;
    }
}

#contact ul._scontact{
	list-style-type: none;
	line-height: 1em;
	margin: 30px auto 0 auto;
	width: 90%;
	text-align: center;
}
#contact ul._scontact li{
	display: inline-block;
	margin-right: 10px;
}
@media screen and (max-width: 568px){
	#contact ul._scontact li a i.fa-3x {
		font-size: 2.3em !important;
	}
}
/*
#about .modal-title, #about .modal-body { color: black !important; }
#about  .close { border-color: black !important; background-image: url(closeblack.svg) !important;}

*/






/*
*
*
*
*  M E D I A
*
*
*/

@media screen and (max-width: 1250px)  {


 #about {}

.liner {width: 540px; height: 1px; display: block; margin-left: -40px; background-color: #4D4D4D; margin-bottom: 57px; margin-top: 15px;}
	
.modal-body .left { width: 43%;}	
.content-left { width: 350px; margin-left: auto; margin-right: auto; }	
.modal-body .right {width: 56%;}
.content-right, #about .content-right { width: 460px; display: block;  }	
.modal-h1 { font-size: 82px; line-height: 0.95; }	

.retina { display: block; width: 460px; margin-top: 40px;  text-align: left;  float: left;   }
.rsubtext { width: 380px; }
.rtext {  }

.tabheader { display: inline-block; color: #DDDDDD; font: 12px/22px "sourcecode", monospace, courier;  padding-bottom: 10px;  width: 260px; line-height: 1.1; }

.twox, .onex { width: 210px; display: block; float: left; font: 14px/24px "sourcecode", serif; color:  #DDDDDD; padding-right: 20px;}


.responsive { display: inline; width: 460px;  }
.underresp { width: 320px;}

.modal-h1 span { 
-webkit-transform: translate( -10px,-32px); 
-ms-transform: translate( -10px,-32px); 
transform: translate( -10px,-32px);}

.modal-sub-h1 {  font-size: 26px; padding-bottom: 2px;  }
.modal-under-h1 {  font-size: 26px; padding-top: 14px; }


.process {display: block; margin-top: 0px; background-image: url(../img/ui/process-mobile.svg); background-repeat: no-repeat; background-position: -10px 0px; height: 410px; margin-left: -5px; padding-bottom: 50px;}



.idea {  padding-left: 15px; padding-top: 37px; }
.agencies {   padding-left: 30px; padding-top: 73px;}
.clients {  padding-left: 30px; padding-top: 280px;}
.result {    padding-left: 259px; padding-top:  37px; }




.subline { visibility: hidden; }




	
}







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





.liner { visibility: hidden; position: absolute;}


.modal-body .right {  width: 100%; float: left; border-bottom: 1px solid #d1d1d1; border-left: none; margin-top: 0px; padding-top: 0px;  padding-bottom: 10px;  }
#about .right {   border-bottom: none; border-left: none; border-bottom: 1px solid #4D4D4D; }

#about .left { margin-bottom: 50px;}
.underresp { padding-top: 30px; font: 14px/24px "sourcecode", monospace, courier; color: #fe504f; width: 230px; display: inline-block;}

.tabheader { display: inline-block; color: #DDDDDD; font: 12px/22px "sourcecode", monospace, courier;  padding-bottom: 10px;  width: 160px; line-height: 1.1; }

.retina { display: block; width: 340px; margin-top: 20px;  text-align: left;  float: left;   border-top: none; padding-top: 0px; }
.responsive { display: block; width: 320px;  margin-top: 20px;  text-align: center;    float: left; margin-right: 30px;}

.rtext {line-height: 1.1; padding-bottom: 0px;}
.rsubtext { padding-bottom: 35px; width: 340px; padding-top: 10px;}

.twox, .onex { width: 160px; display: block; float: left; font-family: Helvetica, sans-serif; font-size: 14px; color:  #DDDDDD; padding-right: 10px;}

.content-right, #about .content-right { text-align: center; width: 730px; }



.modal-body .left { width: 100%; padding-top: 40px; display: inline-table;   text-align: center;  }
.content-left { width: 600px; margin-left: auto; margin-right: auto; }

.modal-h1 { font-size: 130px; line-height: 0.85;}


.modal-h1 span { 
-webkit-transform: translate( -25px,-66px); 
-ms-transform: translate( -25px,-66px); 
transform: translate( -25px,-66px);}

.modal-sub-h1 {  font-size: 30px; padding-bottom: 2px;  }
.modal-under-h1 {  font-size: 30px; padding-top: 14px; }


.process {display: block; margin-top: 6px; background-image: url(../img/ui/process.svg); background-repeat: no-repeat; background-position: -10px 0px; height: 270px; margin-left: -5px; padding-bottom: 50px; text-align: left;}

.process img { position: absolute; margin-left: -11px; }

.idea { font-size: 16px; font-style: italic;  height: 1px; position: absolute; padding-left: 15px; padding-top: 37px; }

.agencies {  height: 1px; position: absolute; padding-left: 80px; padding-top: 63px;}

.clients { height: 1px;  position: absolute; padding-left: 517px; padding-top: 63px;}

.result {   font-size: 16px; font-style: italic; position: absolute; padding-left: 680px; padding-top:  37px; text-align: right;}



.subline {  padding-top: 291px; padding-left: 80px; width: 350px; visibility: visible; }

	
	.caption { opacity: 0}
	
	
	 html {
    -webkit-text-size-adjust: none;
	padding-left:0px;
	padding-right:0px;
  }
  
  
.logo {padding-left: 50px; margin-left: -5px; }  

.title {
	 font-size: 40px;
	
	padding-left: 50px;
	padding-right: 50px;
	line-height: 1.0;
	
	padding-bottom: 30px;
	margin: 0px;
	
	}
	
	.text {
	font-size: 40px;
	
	line-height: 1.0;
	margin: 0px;
	padding-top: 35px;
	padding-right: 0px;
	padding-bottom: 0px;
	
	padding-left: 50px;	
	
	}
	
	
	
	#banner-fade { margin-left: -50px; margin-right: -50px}
	

	

	
	
.f1 {
	display: block;
	padding-right: 0px;
	padding-bottom: 15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ECECEC;
	padding-top: 30px;
	padding-left:62px;
	margin-left:0px;
	margin-right:0px;
}
.f2 {
	display: block;
	padding-bottom: 5px;
	padding-right: 0px;
	border-top-color: #ECECEC;
	border-top-width: 1px;
	border-top-style: solid;
	padding-top: 30px;
	padding-left:62px;
	margin-left:0px;
	margin-right:0px;
}
.f3 {display: block;  padding-bottom: 30px;  padding-right: 0px; border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ECECEC;
	padding-top: 30px;
	padding-left:62px;
	margin-left:0px;
	margin-right:0px;}
	
	
  .f4 { display:block; margin-top: -61px; padding-right:0px!important; }
	
.footer { padding-left: 0px; padding-top: 40px; padding-bottom: 0px;}
	
}


@media screen and (max-width: 800px) {
	
.modal-body 	.left { width: 100%;}	
.content-left { width: 500px; margin-left: auto; margin-right: auto; }	
.modal-body .right { width: 100%; float: left; border-bottom: 1px solid #d1d1d1; border-left: none; margin-top: 0px; padding-top: 0px;  padding-bottom: 30px; }
.content-right, #about .content-right { width: 500px; display: block;  }	
.modal-h1 { font-size: 88px; line-height: 0.95; }	


.retina { display: inline-block; width: 400px; margin-top: 40px;  text-align: left;  float: left;  border-top: 1px solid #4D4D4D; padding-top: 40px; 
	
	padding-left: 50px; padding-right: 50px;  }
	
.tabheader { display: inline-block; color: #DDDDDD; font: 12px/22px "sourcecode", monospace, courier; padding-bottom: 10px;  width: 260px; line-height: 1.1; }

.twox, .onex { width: 50%; display: block; float: left; font-family: Helvetica, sans-serif; font-size: 14px; color:  #DDDDDD; padding-right: 20px;}
.twox h6, .onex h6 { height: 130px; }
.rtext { font-size: 34px; line-height: 1.1; width: 400px;}

.rsubtext { width: 400px; }

.responsive { display: inline-block; width: 500px; margin-right: 0px; }
.underresp { width: 340px; }



.modal-h1 span { 
-webkit-transform: translate( -10px,-35px); 
-ms-transform: translate( -10px,-35px); 
transform: translate( -10px,-35px);}

.modal-sub-h1 {  font-size: 26px; padding-bottom: 2px;  }
.modal-under-h1 {  font-size: 26px; padding-top: 14px; }


.process {display: block; margin-top: 0px; background-image: url(../img/ui/process-mobile.svg); background-repeat: no-repeat; background-position: -10px 0px; height: 368px; margin-left: -5px; padding-bottom: 50px; width: 320px; margin-left: auto; margin-right: auto;}


.idea {  padding-left: 15px; padding-top: 37px; }
.agencies {   padding-left: 30px; padding-top: 73px;}
.clients {  padding-left: 30px; padding-top: 280px;}
.result {    padding-left: 259px; padding-top:  37px; }
.subline { visibility: hidden; }
	
	
}


@media screen and (max-width: 568px){

.fa-3x {
	font-size: 1.1em !important;
}

.small-title { background-image: url(../img/ui/sep.svg); background-repeat: no-repeat; background-position: center top; padding-top: 34px; margin-bottom: 0px;}

.small-title .sep {display: none;}


#about .small-title { background-image: url(../img/ui/sep.svg); background-repeat: no-repeat; background-position: center top;  margin-bottom: -10px;}

#about .small-title .sep {display: inline;}


.modal-title { 
	font-size: 14px;   padding: 20px 0px 15px 20px; 
	font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; font-weight: bold ; letter-spacing: 1px;
	text-align: center;
	
	}


.right {border-bottom: none;}
.left { padding-top: 0px; }
.content-left { width: 500px; margin-left: auto; margin-right: auto; }
.content-right, #about .content-right { width: 500px; display: block;  }
.modal-h1 { font-size: 80px; line-height: 0.95;  }	
.modal-h1 span { 
-webkit-transform: translate( -10px,-30px); 
-ms-transform: translate( -10px,-30px); 
transform: translate( -10px,-30px);}

.modal-sub-h1 {  font-size: 26px; padding-bottom: 4px; width: 250px; margin-left: auto; margin-right: auto; line-height: 1.0;}
.modal-under-h1 {  font-size: 24px; padding-top: 10px;  line-height: 1.2; }
.process {margin-left: 0px; height: 358px; margin-left: auto; margin-right: auto; margin-top: 20px;}


.logo img { height: 80px; }
.logo {padding-top: 15px; padding-bottom: 10px;}


.title, .text { font-size: 32px; line-height: 1.1; }
.title span, .text span { letter-spacing:-2px;}










}



@media screen and (max-width: 500px)  {



.retina { display: block; width: 320px; margin-top: 40px;  text-align: left;  float: left;  border-top: none; padding-top: 0px; padding-left: 0px;  }
.tabheader { display: inline-block; color: #DDDDDD; font: 12px/22px "sourcecode", monospace, courier;  padding-bottom: 10px;  width: 160px; line-height: 1.1; }

.twox, .onex { width: 50%; display: block; float: left; font: 14px/24px "sourcecode", serif;  color:  #DDDDDD; 
padding: 0px 10px 10px 10px }

.rtext { font-size: 26px; font-style: italic; text-align: center; line-height: 1.0; width: 310px;  margin: 0; padding: 0px 15px 10px 15px; width: 280px;}

.rsubtext { width: 280px; padding-left: 15px; padding-right: 15px; padding-bottom: 27px; text-align: center;  background: none !important; margin-top: 5px;}

.underresp { width: 290px;  background-image: url(../img/ui/sepwhite.svg); background-position: center bottom; background-repeat: no-repeat; padding-bottom: 40px; }

.onex { border-left: 1px solid #4D4D4D;}

.twox h6, .onex h6 { height: 130px; text-align: left; }



.responsive { display: inline; width: 320px; margin-bottom: -20px; margin-left: -5px; margin-right: 0px;}



.content-left { width: 310px; margin-left: auto; margin-right: auto; }
.content-right, #about .content-right { width: 310px; display: block;  }

.modal-h1 { font-size: 50px; line-height: 0.95;  }	
.modal-h1 span {  margin-bottom: -5px;
-webkit-transform: translate( -3px,-10px); 
-ms-transform: translate( -3px,-10px); 
transform: translate( -3px,-10px);}


.modal-under-h1 {  font-size: 20px; padding-top: 10px;  line-height: 1.2; margin-bottom: -20px;}

#about .modal-under-h1 {  margin-bottom: 10px;}



	
html {
	-webkit-text-size-adjust: none;
	padding-left: 0px;
	padding-right: 0px;
}
  
  
  .logo { padding-left: 20px;}

.title {
	 font-size: 24px;
	
	
	line-height: 1.1;
	padding: 0px;
	padding-bottom: 20px;
	margin: 0px;
		padding-left: 20px;
	padding-right: 20px;
	
	}
	
	.title span, .text span { letter-spacing:-1px }
	
	#banner-fade { margin-left: -20px; margin-right: -20px}
	
	.bjqs-markers  {  padding-top: 10px !important; }
	
	.text {
	font-size: 24px;

	line-height: 1.1;
	margin: 0px;
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 20px;

			padding-left: 20px;
	padding-right: 20px;
	
	}
	

	
	
.f1 {
	display: block;
	padding-right: 0px;
	padding-bottom: 15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ECECEC;
	padding-top: 30px;
	padding-left: 32px;
	margin-left:0px;
	margin-right:0px;
}
.f2 {
	display: block;
	padding-bottom: 5px;
	padding-right: 0px;
	border-top-color: #ECECEC;
	border-top-width: 1px;
	border-top-style: solid;
	padding-top: 30px;
	padding-left: 32px;
	margin-left:0px;
	margin-right:0px;
}
.f3 {display:block;  padding-bottom: 30px;  padding-right: 0px; border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ECECEC;
	padding-top: 30px;
	padding-left:32px;
	margin-left:0px;
	margin-right:0px;}
	
.footer { padding-left: 0px; padding-top: 5px; padding-bottom: 0px;}

}


@media screen and (min-width: 1550px)  {
	
	.title, .text { font-size: 60px; line-height: 1.0; }
	.title span, .text span { letter-spacing:-6px }
	
	
	.content-right, #about .content-right {width: 830px; }
	.modal-h1 { font-size: 148px;}
	
	.modal-h1 span { 
-webkit-transform: translate( -30px,-79px); 
-ms-transform: translate( -30px,-79px); 
transform: translate( -30px,-79px);}

	.modal-sub-h1, .modal-under-h1 {font-size: 36px;}
	.content-left {width: 490px;}
	.accordionContent {font-size: 24px;}
	
}

@media screen and (min-width: 1800px)  {
	
	.title  { font-size: 70px; line-height: 1.0; }
	.text { font-size: 70px; line-height: 1.0; padding-top: 60px;}
	.logo img {height: 140px;}
	.title span, .text span { letter-spacing:-8px }
	
}






@media screen and (min-height: 850px) {
	
#approach .left, .content-right, #about .left {padding-top: 30px;}
	
}


::-webkit-scrollbar  {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 15px;
	background-color: #F0F0F0;
}

::-webkit-scrollbar:horizontal {
    height: 15px;
}

::-webkit-scrollbar-thumb {
    background-color: #CCC;
}

::-webkit-scrollbar-thumb:hover {
   
    background-color: black;
}