@charset "utf-8";
/*@font-face {
    font-family: 'courier_newregular';
    src: url('fonts/cour-webfont.eot');
    src: url('fonts/cour-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/cour-webfont.woff2') format('woff2'),
    url('fonts/cour-webfont.woff') format('woff'),
    url('fonts/cour-webfont.ttf') format('truetype'),
    url('fonts/cour-webfont.svg#courier_newregular') format('svg');
    font-weight: normal;
    font-style: normal;

}*/
html,body{margin:0; padding:0;height:100%; min-height: 100%;font-family: 'Anonymous Pro', monospace;font-size: 14px; line-height: 1.5;}
*{outline: none !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#logo a span,.selected-work #frame .slick-dots li button:after,#footer-block a:after,#footer-block a,#footer-block a span{
    -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */

    -webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}
/*.fp-slides{
    -webkit-transition: all 1500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 1500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: all 1500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 1500ms cubic-bezier(0.785, 0.135, 0.15, 0.86); !* easeOutExpo *!

    -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); !* easeOutExpo *!
}*/
#background,#prebg/*,.newsletter .dots>div:after*/{
    -webkit-transition: all 1500ms cubic-bezier(1, 0, 0, 1);
    -moz-transition: all 1500ms cubic-bezier(1, 0, 0, 1);
    -o-transition: all 1500ms cubic-bezier(1, 0, 0, 1);
    transition: all 1500ms cubic-bezier(1, 0, 0, 1)/*easeInOutSine*/
}
.strip span{
    -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);/*easeInOutSine*/
}
.strip span.in{
    -webkit-transition: all 1000ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transition: all 1000ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: all 1000ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: all 1000ms cubic-bezier(0.55, 0.055, 0.675, 0.19);/*easeInOutSine*/
}
.selected-work .abs>div>div{
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -o-transition: all 1000ms;
    transition: all 1000ms;
}
#blocks >div,#blocks >div>div{
    -webkit-transition: top 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: top 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: top 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);/*easeInOutSine*/
}
.rounded-corners {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.box-shadow {
    -moz-box-shadow: 5px 5px 5px -5px #666666; /* Firefox */
    -webkit-box-shadow: 5px 5px 5px -5px #666666; /* Safari, Chrome */
    box-shadow: 5px 5px 5px -5px #666666; /* CSS3 */
}
.box-shadow-light{

    -moz-box-shadow:5px 5px 7px 0px #666666;
    -webkit-box-shadow:5px 5px 7px 0px #666666;
    box-shadow:5px 5px 7px 0px #666666;
}
#fullpage{height:100%;}
.section{height:100%; position: relative;}
.hidden{display: none;}
.col-40{width:40%}
.col-50{width:50%}
.col-55{width:55%}
.col-60{width:60%}
.height-100{height:100%;}
.abs{position: absolute}
.container{width:100%; max-width: 1300px; margin: auto; }
.container-fluid{width:100%; }
.bg-light-grey{background:#f9f9f9;}

#frame{width:100%; height:100%; background:#FFF; padding:9px;  overflow: hidden; position: relative}
#frame.page1{padding-left:30px; padding-top:30px;}
#frame>div#prebg{width:0%; height:100%; background:#000; overflow: hidden; position: relative;   }
#frame>div#prebg.open{width:100%;}
.slick-slider {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.slick-slide >div{margin-bottom:20px;}
.slick-active[data-slick-index="0"] div.split div{position:relative; opacity:0; transform:matrix(1, 0, 0, 1, 0, 41)}
.slick-active[data-slick-index="0"] h1.split, .slick-active[data-slick-index="0"] h5.split{position:relative; opacity:0; transform:matrix(1, 0, 0, 1, 0, 41)}
#background{width:100%; height:100%; background:#222 ; position: relative; padding:15px;}

#logo{position:absolute; margin:auto; text-align: center;}
#logo>*{opacity: 0;}
#logo>img{
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-duration: 2s;
    -moz-animation-delay: 0.5s;
    -o-animation-duration: 2s;
    -o-animation-delay: 0.5s;
    animation-duration: 2s;
    animation-delay: 0.5s;
}
#logo>div{ -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 1.5s;
    -o-animation-duration: 1s;
    -o-animation-delay: 1.5s;
    animation-duration: 1s;
    animation-delay: 1.5s;}
#logo a{color:#c2c0c3;  text-decoration: none; font-family: 'Open Sans', sans-serif; margin-top:10px; display: inline-block;  text-transform: uppercase; font-size:12px;}
.arrow{display:inline-block; font-weight: 400; font-size: 1.2em; font-family:'Anonymous Pro', monospace;
    -ms-transform: rotate(90deg) !important; /* IE 9 */
    -webkit-transform: rotate(90deg) !important; /* Safari */
    transform: rotate(90deg) !important;
}
#logo a span.arrow{display:none;}
#logo a span.arrow.animated{display:block;}
a:hover span.arrow{margin-top:5px;}
.strip{position: absolute;overflow: hidden; cursor:pointer;}
.strip span{ background: #FFF; position: absolute;height:100%; width:100%;}
.strip.horizontal span{left:-200%; top:0;}
.strip.vertical span{top:-200%; left:0;}
.strip.horizontal.play span{
    -webkit-animation: play-horizontal 8s 1; /* Safari 4+ */
    -moz-animation:    play-horizontal 8s 1; /* Fx 5+ */
    -o-animation:      play-horizontal 8s 1; /* Opera 12+ */
    animation:         play-horizontal 8s 1; /* IE 10+, Fx 29+ */
}
.strip.vertical.play span{
    -webkit-animation: play-vertical 8s 1; /* Safari 4+ */
    -moz-animation:    play-vertical 8s 1; /* Fx 5+ */
    -o-animation:      play-vertical 8s 1; /* Opera 12+ */
    animation:         play-vertical 8s 1; /* IE 10+, Fx 29+ */
}
.strip.horizontal.inin span{
    -webkit-animation: play-horizontal 3s 1; /* Safari 4+ */
    -moz-animation:    play-horizontal 3s 1; /* Fx 5+ */
    -o-animation:      play-horizontal 3s 1; /* Opera 12+ */
    animation:         play-horizontal 3s 1; /* IE 10+, Fx 29+ */}
.strip.vertical.inin span{
    -webkit-animation: play-vertical 3s 1; /* Safari 4+ */
    -moz-animation:    play-vertical 3s 1; /* Fx 5+ */
    -o-animation:      play-vertical 3s 1; /* Opera 12+ */
    animation:         play-vertical 3s 1;
}

#footer-input{position: absolute; bottom:-50px; left:0; width:100%; height:39px; padding-top:5px; color:#000; background: #FFF; font-size: 18px;}
#footer-input.animated{bottom:-10px;}
#footer-input *{float:left; margin-right:10px; height:27px;}
#footer-input label{position: relative; }
#footer-input label::before{content:"";margin-right:-20px; right:0; bottom:4px; border-bottom:1px solid #000000; width:10px;height:1px; position: absolute;
    -webkit-animation: blink-animation 1.3s steps(2, start) infinite; /* Safari 4+ */
    -moz-animation:    blink-animation 1.3s steps(2, start) infinite; /* Fx 5+ */
    -o-animation:      blink-animation 1.3s steps(2, start) infinite; /* Opera 12+ */
    animation:         blink-animation 1.3s steps(2, start) infinite; /* IE 10+, Fx 29+ */}
#footer-input input{border:none; background: none; color:#000;font-family: 'Anonymous Pro', monospace;width: 100px; line-height: 1.2; font-size:18px;}
#footer-input input.loading{background: url(images/loader.gif) right center no-repeat;}
#footer-input label.focused::before{display: none;}
/*.strip.vertical.play span{width:inherit !important;  animation: play-vertical 5s;}*/
#blocks {position:relative}
#blocks >div{width:100%; left:0; position: absolute; background: #FFF}
/*#blocks >div.show{ top:0px !important;}*/
#blocks >div>div.block{float:left; width:20px; position: absolute; top:-100px; height:20px;/* margin-right:30px; margin-bottom:30px;*/ background: #a9a9a9;}
#blocks >div>div.block:hover{opacity:0.85; cursor: pointer}
#blocks >div>div.block.dark{background: #565656}
#blocks >div>div.block.darker{background: #333333}
#blocks >div>div.block.vertical{height:50px; margin-bottom:0px;}
#blocks >div>div.block.horizontal{width:50px; margin-right:0px;}

.restartBtn{position:absolute; font-size:65px; display: none; text-decoration: none; color:#000000}
.restartBtn.animated{display: block;}

#footer-block{position: absolute; padding:15px 9px 30px 9px; z-index: 10; bottom:100%; left:0; width:100%; background:#ffffff; color:#000000;font-family: 'Roboto', sans-serif; }
#footer-block h1{font-weight: 700; font-size:40px;margin-top:0; margin-bottom:20px; line-height:0.8em;}
#footer-block.animated{bottom:0;}
#footer-block a{color:#000000; text-decoration: none; position: absolute; left:13px; bottom:-100%;}
#footer-block a span{position:relative; top:0;}
#footer-block a.animated{bottom:20px}
#footer-block,#footer-block a{ -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-duration: 2s;
    -moz-animation-delay: 0.5s;
    -o-animation-duration: 2s;
    -o-animation-delay: 0.5s;
    animation-duration: 2s;
    animation-delay: 0.5s;
}
#footer-block a:after{display:inline-block; font-weight: 400; font-size: 1.2em; font-family:'Anonymous Pro', monospace; content:">"; position:absolute; top:0; right:-20px;
    -ms-transform: rotate(90deg) !important; /* IE 9 */
    -webkit-transform: rotate(90deg) !important; /* Safari */
    transform: rotate(90deg) !important;
}
#footer-block a:hover:after{top:3px;}
/*#footer-block a:hover span{top:3px;  transition-delay: 0.04s;  }*/

.selected-work #frame{padding:0;font-family: 'Roboto', sans-serif; background:#f9f9f9; overflow: visible; }
.selected-work #frame>div{position: relative; float: left;  height:100%;}
.selected-work.personage,.selected-work.map{background:#000000;}
.selected-work.personage #frame,.selected-work.map #frame{background:#000000;}
.selected-work.personage #frame>div,.selected-work.map #frame>div{float: right; color:#FFF;}


.selected-work.pixelate #frame{padding:0;font-family: 'Roboto', sans-serif; background:#ffffff; overflow: visible; }
.selected-work.pixelate #frame>div{position: relative; float: right;  height:100%;}
.selected-work.pixelate{background:#ffffff;}


.selected-work #frame>div{display:flex; align-items: center;justify-content: center;}
.selected-work #frame>div.col-40>div{width:100%;  padding:15px;}
.selected-work #frame>div.col-40>div h1,.selected-work #frame>div.col-40>div .h1{font-family: 'Roboto', sans-serif;  line-height:1.1; font-size:2em;}
.selected-work #frame>div.col-40>div p{font-weight: normal; font-size: 1.2em; margin-top:0;}
.selected-work #frame>div.col-40>div h5{font-weight: 700; font-size: 1.2em; margin:0;}
.selected-work #frame .slick-dots{list-style: none; float: left; padding:0; margin:0; margin-top:30px;}
.selected-work #frame .slick-dots li{float: left; margin-right:5px; position:relative; opacity:0; top:20px;}
.selected-work #frame .slick-dots li button{overflow: hidden; float:left; cursor: pointer; text-indent: -99999px; border:none; width:60px; background:transparent;height:15px;position:relative;}
.selected-work #frame .slick-dots li button:after{height:5px; width:100%;background: #d4d4d4; position:absolute; left:0; top:5px; content:""; }

.selected-work #frame .slick-dots li.slick-active button:after,.selected-work #frame .slick-dots li button:hover:after{background: #727272;}
.selected-work #frame .slick-dots li button:hover:after{height:9px;top:3px;}
.selected-work #frame .slick-dots li:nth-child(2) button{width:37.5px;}
.selected-work #frame .slick-dots li:nth-child(3) button{width:23.5px;}
.selected-work #frame .slick-dots li:nth-child(4) button{width:23.5px;}
.selected-work .abs{bottom:0; right:0; height:100%;overflow: hidden}
.selected-work.personage .abs{right:auto; left:0;height:100%;}
.selected-work.map .abs{right:auto; left:0;height:100%;}
.selected-work.pixelate .abs{right:auto; left:0;height:100%;}
.selected-work .abs{float: right;}
.selected-work .abs>div{width:100%;height:100%;  padding:15px; padding-right:0; padding-bottom:0}
.selected-work .abs>div>div{opacity:0; position: absolute; bottom:0; width:100%; right:0; height:100%; background-size: contain; background-position: right bottom; background-repeat: no-repeat;}
#section8 .selected-work .abs>div>div{background-size:cover;}
.selected-work .abs>div>div.active{opacity: 1;}
.selected-work .abs>div img{width:100%;  float: right;}
.selected-work .abs video{min-width: 100%;
    height: 60%;
    width: auto;
    /*height: auto;*/
    background:#f9f9f9;
top:20%; position: absolute; right:0;}
.selected-work.pixelate .abs > div > div{background-size:cover;}
.maps .active{z-index: 1111}
.path {
    stroke-dasharray:30000;
    stroke-dashoffset: 30000;
    animation: dash 30s linear 1;
}
.greyscale{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

.greyscale:hover{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
}
.image-blocks .grid {width:100%; height:100%;}

.image-blocks video {width:100%;height:auto;position: absolute;  left: 50%;  top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -moz-transform:translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -o-transform:translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    }
.image-blocks .grid-item--height2 video,.image-blocks  video.vert{width:auto;height:100%;}

.image-blocks .grid >div>div{display: block; width:100%; height:100%; overflow: hidden}
.image-blocks .grid >div>div>div{display: block;width:100%; height:100%;background-repeat: no-repeat; background-size: cover; background-position: center;
    -webkite-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    -moz-transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    -ms-transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    -o-transition: all 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);}
.image-blocks .grid >div:not(.has-video)>div:hover>div{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05); /* IE 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.05, M12=0, M21=0, M22=1.05, SizingMethod='auto expand')"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.05, M12=0, M21=0, M22=1.05, SizingMethod='auto expand'); /* IE6 and 7 */}
.grid-sizer,
.grid-item { width: 25%; height:50%; overflow: hidden; }
/* 2 columns */
.grid-item--width2 { width: 50%; height:50%;}
.grid-item--height2 { height: 100%; }

.contact-dots{background:#000; height:100%;overflow: hidden; position: absolute; top:0; left:0; width:100%;  z-index: 0}
.contact-dots span{display: inline-block; width:31px;height:31px; position:relative;}
.contact-dots span:after{position:absolute; width:4px; height:4px; background:#FFF; content:""; left:15px; top:15px; border-radius:50%;}

.newsletter .dots{background:#000; height:100%;overflow: hidden; position: absolute; top:0; left:0; width:100%;  z-index: 0}
.newsletter .dots>span{display: inline-block; width:21px;height:21px; position:relative;}
.newsletter .dots>span:after{position:absolute; width:20px; height:20px; background:#FFF; content:""; left:0px; top:0px; border-radius:50%;/*
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-duration: 2s;
    -moz-animation-delay: 0.5s;
    -o-animation-duration: 2s;
    -o-animation-delay: 0.5s;
    animation-duration: 2s;
    animation-delay: 0.5s;*/
    -webkit-transition: all 4s cubic-bezier(0.39, 0.575, 0.565, 1);
    -moz-transition: all 4s cubic-bezier(0.39, 0.575, 0.565, 1);
    -o-transition: all 4s cubic-bezier(0.39, 0.575, 0.565, 1);
    -ms-transition: all 4s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: all 4s cubic-bezier(0.39, 0.575, 0.565, 1);
transition-delay: 2s;
    -webkit-transform: scale( 0.05);
    -moz-transform: scale( 0.05);
    -o-transform: scale( 0.05);
    -ms-transform: scale( 0.05);
    transform: scale( 0.05);
}
.newsletter .dots>span.grow1.active:after{-webkit-transform: scale( 0.25);
    -moz-transform: scale( 0.15);
    -o-transform: scale( 0.15);
    -ms-transform: scale( 0.15);
    transform: scale( 0.15);}
.newsletter .dots>span.grow2.active:after{

    -webkit-transform: scale( 0.25);
    -moz-transform: scale( 0.25);
    -o-transform: scale( 0.25);
    -ms-transform: scale( 0.25);
    transform: scale( 0.25);
}
.newsletter .dots>span.grow3.active:after{
    -webkit-transform: scale( 0.35);
    -moz-transform: scale( 0.35);
    -o-transform: scale( 0.35);
    -ms-transform: scale( 0.35);
    transform: scale( 0.35);
}
.newsletter #signup_header{min-height: 28px; }
.newsletter .sm a{  top:100px; opacity:0; position: relative; display: inline-block}
.newsletter .sm a.animated{visibility: visible;}
.newsletter .sm a svg{width:15px; fill:#FFF; margin:5px;}
.newsletter .sm a:hover{opacity: 0.7;}
.newsletter .response{opacity:0; position:relative;transform:matrix(1, 0, 0, 1, 0, 45) ; margin-top:-100px; margin-bottom:16px;}
.connectingLines{height:2px; background:#FFF; position: absolute;
    background: -webkit-linear-gradient(right, transparent 50%, white 50%);
    background: -o-linear-gradient(right, transparent 50%, white 50%);
    background: -moz-linear-gradient(right, transparent 50%, white 50%);
    background: linear-gradient(to right, transparent 50%, white 50%);

    background-position:left bottom;
    background-size:200% 100%;
    transition:all 2s ease;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-duration: 2s;
    -moz-animation-delay: 0.5s;
    -o-animation-duration: 2s;
    -o-animation-delay: 0.5s;
    animation-duration: 2s;
    animation-delay: 0.5s;
}
.connectingLines.activate{
    background-position:right bottom;
}
.connectingLines.activate.remove{
    background-position:left bottom;
}
.contact{font-family: 'Roboto', sans-serif; overflow: hidden; position:relative; background:#000;  }
.contact canvas{position:absolute; top:0; left:0;}
.contact .content{display:table; width:100%;height:100%; position: relative; z-index: 5; background:url(images/background-black-circle-gradient.png?); background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-color:rgba(0,0,0,0.3)}
.contact .content>div{display:table-cell; width:100%;height:100%; vertical-align: middle; text-align: center; color:#FFF;}
.contact .content>div h4,.contact .content>div h1{margin:0; transform:matrix(1, 0, 0, 1, 0, 45)}
.contact .content>div h4{font-size:4vh;}
.contact .content>div h1{font-size:5em;}
 .copyright img{width:100px; opacity:0.8; }
 .copyright div{opacity:0;}
 .copyright div.animated{visibility: visible}
 .copyright{position:absolute; bottom:20px; font-size:12px; left:0; width:100%; text-align:center; color:rgba(255,255,255,0.8); z-index: 6}

.newsletter {position:relative; background:#000000;font-family: 'Roboto', sans-serif; }
.newsletter canvas{position:absolute;top:0; left:0; z-index: 1}
.newsletter .content{display:table; width:100%;height:100%; position: relative; z-index: 1;  background:url(images/background-black-circle-gradient.png?); background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-color:rgba(0,0,0,0.3)}
.newsletter .content>div{display:table-cell; width:100%;height:100%; vertical-align: middle; text-align: center; color:#FFF;}
.newsletter .content>div h4{margin:0; font-size:2em; line-height: 1em;}
.newsletter form {display: inline-block;}
.newsletter form >*{transform:matrix(1, 0, 0, 1, 0, 0)}
.newsletter form h1{font-size:4em;}
.newsletter form>div {margin:15px auto;}
.newsletter form>div *{padding:15px; min-width:250px; max-width: 46%;text-align:center; display: inline-block; font-weight:bold;height:50px; /*visibility: hidden*/position: relative; opacity:0;}
.newsletter form>div input{left:-200px;}
.newsletter form>div input.error{border-color:rgba(255,0,0,0.9)}
.newsletter form>div a{right:-200px;}
.newsletter form>div *.animated{visibility: visible;}
.newsletter form input{background:#FFF; border:1px solid transparent; }
.newsletter form a{background:#2b2b2b; color:#fff; text-decoration: none;}
.newsletter form a:hover{opacity:0.7}

#map{width:100%; height:100%;}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes blink-animation {
    0% {
        visibility: hidden;
    }
    25%{
        visibility: visible;
    }
    100%{
        visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    0% {
        visibility: hidden;
    }
    25%{
        visibility: visible;
    }
    100%{
        visibility: hidden;
    }
}
@-webkit-keyframes play-horizontal {
   0% {
       left:-100%;
    }
    25%{
        left:0%;
    }
    75%{
        left:0%;
    }
    100% {
        left:100%;
    }
}
@-moz-keyframes play-horizontal {
   0% {
       left:-100%;
    }
    25%{
        left:0%;
    }
    75%{
        left:0%;
    }
    100% {
        left:100%;
    }
}
@-o-keyframes play-horizontal {
   0% {
       left:-100%;
    }
    25%{
        left:0%;
    }
    75%{
        left:0%;
    }
    100% {
        left:100%;
    }
}
@keyframes play-horizontal {
    0% {
       left:-100%;
    }
    25%{
        left:0%;
    }
    75%{
        left:0%;
    }
    100% {
        left:100%;
    }
}

@-webkit-keyframes play-vertical {
    0% {
        top:-100%;
    }
    25%{
        top:0%;
    }
    75%{
        top:0%;
    }
    100% {
        top:100%;
    }
}
@-moz-keyframes play-vertical {
    0% {
        top:-100%;
    }
    25%{
        top:0%;
    }
    75%{
        top:0%;
    }
    100% {
        top:100%;
    }
}
@-o-keyframes play-vertical {
    0% {
        top:-100%;
    }
    25%{
        top:0%;
    }
    75%{
        top:0%;
    }
    100% {
        top:100%;
    }
}
@keyframes play-vertical {
    0% {
        top:-100%;
    }
    25%{
        top:0%;
    }
    75%{
        top:0%;
    }
    100% {
        top:100%;
    }
}
@media (max-width:961px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

}
@media (max-width:700px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

    .col-40{width:100%}
    .col-60{width:100%}
    .selected-work #frame{overflow: auto;}
    .selected-work #frame > div{height:auto;}
    .selected-work #frame > div.col-40 > div{position:relative; padding:0 15px;}
    .selected-work #frame > div.col-60 > div{position:relative; padding:15px;}
    .selected-work #frame > div.col-60 > div > div{display: none; position: relative;}
    .selected-work #frame > div.col-60 > div > div.active{display: block}
    .slick-active div.split{padding-top:10px;}

    .newsletter form input{margin-bottom:10px;}
}
@media (max-width:500px) {


    .col-40,.col-50,.col-55,.col-60{width:100%}
    .selected-work>div.height-100{height:60%;}
    .selected-work .abs{height:40%;}

    .selected-work #frame>div.col-40>div h1,.selected-work #frame>div.col-40>div .h1{ font-size:1.4em;}
    .selected-work #frame>div.col-40>div p{font-size: 1em; }
    .selected-work #frame>div.col-40>div h5{font-size: 1em; }
    .selected-work .abs video{height:100%; top:0;}
    .selected-work.personage .abs,.selected-work.pixelate .abs,.selected-work.map .abs{height:40%;}
    .selected-work .abs > div{padding:0px;}
    .selected-work .abs > div > div{background-position: center bottom;}
    .selected-work .abs > div > div:after{position:absolute; top:0; left:0; width:100%; height:20%;  content:""}
    .selected-work.pixelate #frame > div{display:inline-block; height: 40%;}
    #section2 .selected-work >div.height-100,.selected-work.pixelate >div.height-100,#section8 .selected-work >div.height-100{position:relative; top:40%}
    #section2 .selected-work >div.height-100.abs,.selected-work.pixelate >div.height-100.abs,#section8 .selected-work >div.height-100.abs{position:absolute; top:0%}
    .newsletter .content > div h4{font-size:1.5em;}
    .grid div{height:100%;}
    .grid div.slick-slide >div{height:50%;position:relative;}
    .grid .slick-slide > div{margin-bottom:0;}
    .grid .slick-arrow{position:absolute; top:50%; margin-top:-20px; width:40px; height:40px; text-indent: -999px; overflow: hidden; background:#FFF; border:none;font-size: 2em; z-index: 999;}
    .grid .slick-prev{ color:#000; left:10px;}
    .grid .slick-prev:after{content:"<"; position: absolute; left:0; top:0; width:100%; height:100%; text-indent:0; font-family:'Anonymous Pro', monospace;}
    .grid .slick-next{ color:#000; right:10px;}
    .grid .slick-next:after{content:">"; position: absolute; left:0; top:0; width:100%; height:100%;text-indent:0; font-family:'Anonymous Pro', monospace;}
    #footer-block h1{font-size:38px; line-height: 1em;}
    .contact .content>div h1{font-size:8vw;}
}
@media (max-width:420px) {


}
@media (min-width:961px) {

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }