"layout"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/cohesion/pen/BjNEqB?depth=everything&order=popularity&page=39&q=shop&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href="https://dtailstudio.com/fonts/341620/AA62E1910891F3D57.css"><link rel='stylesheet prefetch' href="https://cloud.typography.com/7141092/800604/css/fonts.css"><link rel='stylesheet prefetch' href="https://dtailstudio.com/assets/front/css/style.css"><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <style class="cp-pen-styles">@charset "UTF-8";a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*{margin:0;padding:0;outline:0}body,html{position:relative;width:100%;min-height:100%}.btn,.submit,button,input[type=button],input[type=submit]{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea{font-family:inherit}::-webkit-input-placeholder{color:inherit;opacity:1}::-moz-placeholder{color:inherit;opacity:1}:-ms-input-placeholder{color:inherit;opacity:1}::placeholder{color:inherit;opacity:1}em{font-style:italic}a{outline:0;text-decoration:none;-webkit-tap-highlight-color:transparent}p:last-child{padding-bottom:0;margin-bottom:0}hr{display:block;height:2px;border:none;padding:0;clear:both}svg{display:inline-block;overflow:hidden;width:100%}.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}.owl-carousel .owl-wrapper{display:none;position:relative}.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel .owl-item{float:left}.owl-controls .owl-buttons div,.owl-controls .owl-page{cursor:pointer}.owl-controls{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.grabbing{cursor:url(grabbing.png) 8 8,move}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}/*! Animate.css - https://daneden.me/animate Licensed under the MIT license - https://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.05,.855,.06);transition-timing-function:cubic-bezier(0.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.05,.855,.06);transition-timing-function:cubic-bezier(0.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.05,.855,.06);transition-timing-function:cubic-bezier(0.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.05,.855,.06);transition-timing-function:cubic-bezier(0.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(0.95,1.05,1);transform:scale3d(0.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(0.95,1.05,1);transform:scale3d(0.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,.9,.9);transform:scale3d(0.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,.97,.97);transform:scale3d(0.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,.9,.9);transform:scale3d(0.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,.97,.97);transform:scale3d(0.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(0.9,.9,.9);transform:scale3d(0.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(0.9,.9,.9);transform:scale3d(0.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(0.95,.95,.95);transform:perspective(400px) scale3d(0.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(0.95,.95,.95);transform:perspective(400px) scale3d(0.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(0.3,.3,.3);transform:scale3d(0.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(42px,0,0);transform:scale3d(0.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(0.1) translate3d(-2000px,0,0);transform:scale(0.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(42px,0,0);transform:scale3d(0.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(0.1) translate3d(-2000px,0,0);transform:scale(0.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(0.1) translate3d(2000px,0,0);transform:scale(0.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(0.1) translate3d(2000px,0,0);transform:scale(0.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.header-nav{position:fixed;display:-ms-flexbox;display:-webkit-box;display:flex;top:25px;left:0;width:100%;height:45px;padding-right:65px;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between;z-index:100;transition:-webkit-transform .3s cubic-bezier(0.215,.61,.355,1),padding .2s ease,opacity .3s ease;-webkit-transition:padding .2s ease,opacity .3s ease,-webkit-transform .3s cubic-bezier(0.215,.61,.355,1);transition:padding .2s ease,opacity .3s ease,-webkit-transform .3s cubic-bezier(0.215,.61,.355,1);transition:transform .3s cubic-bezier(0.215,.61,.355,1),padding .2s ease,opacity .3s ease;transition:transform .3s cubic-bezier(0.215,.61,.355,1),padding .2s ease,opacity .3s ease,-webkit-transform .3s cubic-bezier(0.215,.61,.355,1);font-family:brandon_grotesqueblack;opacity:1}.header-nav.hidden{-webkit-transform:translateY(-100%);transform:translateY(-100%);top:0}.header-nav.animate{opacity:0}.header-nav.loading{display:none}.header-nav .logo{position:absolute;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;height:100%;-webkit-transition:top .4s ease-in-out,left .2s ease;transition:top .4s ease-in-out,left .2s ease;top:-150%;left:55px;z-index:5}.header-nav .logo.show{top:0}.header-nav .logo svg{width:19px;height:19px;margin-right:12px;fill:rgba(255,255,255,.6);-webkit-transition:width .2s ease,hight .2s ease;transition:width .2s ease,hight .2s ease}.header-nav .logo--back svg{width:12px;height:19px}.header-nav .logo span{font-size:14px;color:rgba(255,255,255,.6);text-transform:uppercase;-webkit-transition:font-size .2s ease;transition:font-size .2s ease}.header-nav nav{position:relative;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:1;-webkit-box-flex:1;flex:1;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;height:45px}.header-nav nav a,.header-nav nav li{position:relative;display:block;height:45px;line-height:45px;font-size:14px;color:rgba(255,255,255,.6);text-decoration:none;text-align:center;text-transform:uppercase;cursor:pointer}.header-nav nav a.active,.header-nav nav a.active a,.header-nav nav li.active,.header-nav nav li.active a{color:#fff}.header-nav nav ul{display:-ms-flexbox;display:-webkit-box;display:flex;width:auto;padding:0;margin:0}.header-nav nav ul li{padding:0 20px}.header-nav nav ul li.social{display:none}.header-nav nav ul li:last-of-type{padding-right:0}@media (min-width:1130px){.header-nav .logo:hover span,.header-nav nav a.btn-hi:hover span,.header-nav nav a:hover{color:#fff}.header-nav .logo:hover svg,.header-nav nav a.btn-hi:hover svg{fill:#e73387}}input[type=checkbox].navTrigger{position:absolute;top:-9999px;left:-9999px}input[type=checkbox].navTrigger+label{display:none}@media (max-width:1023px){.header-nav nav ul{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;position:fixed;top:-100%;left:0;height:100%;width:100%!important;padding-top:45px;overflow:auto;z-index:97;background-color:#4a325e;-webkit-transition:top .3s ease;transition:top .3s ease}.header-nav nav ul li{padding:0;line-height:80px;height:auto}.header-nav nav ul li .btn-hi span,.header-nav nav ul li a{font-size:45px;line-height:80px;height:auto;color:#fff}.header-nav nav ul li .btn-hi span svg,.header-nav nav ul li a svg{display:none}input[type=checkbox].navTrigger~label{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;position:absolute;right:0;width:50px;height:45px;z-index:99}input[type=checkbox].navTrigger:checked~ul{top:0;padding:0}input[type=checkbox].navTrigger:checked~ul .social{display:block;position:absolute;width:100%;bottom:2.7vh;left:0}input[type=checkbox].navTrigger:checked~ul .social .box-social{width:100%}input[type=checkbox].navTrigger:checked~ul .social .box-social__link:not(:first-of-type){margin-left:30px}input[type=checkbox].navTrigger:checked~ul .social .box-social__link{display:inline-block}input[type=checkbox].navTrigger:checked~ul .social .box-social__link svg{fill:#725B89;display:block}input[type=checkbox].navTrigger:checked~ul .social__brand{font-size:14px;line-height:14px;text-transform:uppercase;font-family:brandon_grotesqueblack;color:#725b89}}@media (max-width:740px){.header-nav nav ul li{line-height:55px}.header-nav nav ul li.social{line-height:35px}.header-nav nav ul li .btn-hi span,.header-nav nav ul li a{font-size:35px;line-height:50px}}@media (max-width:640px){.header-nav{padding:0 10px 0 20px;top:12px}.header-nav .logo{left:20px}.header-nav .logo span{font-size:inherit}.header-nav nav ul li{padding:0 10px}.header-nav nav ul li .btn-hi span,.header-nav nav ul li a{font-size:35px;line-height:55px}input[type=checkbox].navTrigger:checked~ul .social .box-social__link:not(:first-of-type){margin-left:20px}}@media (max-width:540px){input[type=checkbox].navTrigger:checked~ul .social .box-social{height:60px}}@media (max-width:1023px) and (orientation:landscape){.header-nav nav ul li a,.header-nav nav ul li a.btn-hi span{font-size:25px;line-height:35px}}.menuButton{display:inline-block;padding:0;-webkit-transition:.3s;transition:.3s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;font-size:1px}.line{display:inline-block;width:32px;height:4px;background:rgba(255,255,255,.6);-webkit-transition:.3s;transition:.3s}.lines{position:relative;top:0;bottom:0;margin:auto;pointer-events:none;display:inline-block;width:32px;height:4px;background:rgba(255,255,255,.6);-webkit-transition:.3s;transition:.3s}.lines:after,.lines:before{display:inline-block;width:32px;height:4px;background:rgba(255,255,255,.6);-webkit-transition:.3s;transition:.3s;position:absolute;left:0;content:'';-webkit-transform-origin:2.29px center;transform-origin:2.29px center}.lines:before{top:8px}.lines:after{top:-8px}.lines.close{background:0 0;box-shadow:none}.lines.close:after,.lines.close:before{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;width:32px;border-radius:2.29px;background-color:#6a5381}.lines.close:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}.lines.close:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}.scroll-up{background-color:rgba(255,255,255,.93);padding:0 0 0 12px;top:0}.scroll-up .logo{left:12px}.scroll-up .logo svg{fill:#3F4A56}.scroll-up .logo span,.scroll-up nav a{color:#3f4a56;font-size:14px}.scroll-up .logo span.active,.scroll-up nav a.active{color:#3F4A56}.scroll-up .lines,.scroll-up .lines:after,.scroll-up .lines:before{background:#3f4a56}@media only screen and (max-width:1130px){.scroll-up .lines.close{background:0 0;box-shadow:none}.scroll-up .lines.close:after,.scroll-up .lines.close:before{background-color:#6a5381}}.scroll-up nav ul li{padding:0 12px}.scroll-up nav ul li:last-of-type{padding:0}.scroll-up nav ul li a.btn-hi span{padding:0 12px;color:#3f4a56}.scroll-up nav ul li a.btn-hi svg{opacity:0}@media only screen and (max-width:1023px){.scroll-up nav ul li{padding:0}}@media (min-width:1130px){.scroll-up .logo:hover span,.scroll-up nav a:hover{color:#3F4A56}.scroll-up nav a.btn-hi:hover span{background-color:#e73387}}@media (max-width:1023px){.scroll-up nav a,.scroll-up nav a.active,.scroll-up nav a:hover,.scroll-up nav ul li a.btn-hi span{color:#fff}}.outer_face{position:relative;width:140px;height:140px;border-radius:140px}@media only screen and (max-width:768px){.outer_face{width:13.67vw;height:13.67vw;border-radius:13.67vw}}@media only screen and (max-width:568px){.outer_face{display:none}}.outer_face .marker,.outer_face::after,.outer_face::before{content:"";position:absolute;width:4px;height:100%;z-index:0;left:50%;margin-left:-2px;top:0;border-top:16px solid #fff;border-bottom:16px solid #fff}.outer_face::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.outer_face .marker{width:4px;margin-left:-2px;border-top:16px solid #fff;border-bottom:16px solid #fff}.outer_face .marker.oneseven{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.outer_face .marker.twoeight{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.outer_face .marker.fourten{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.outer_face .marker.fiveeleven{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.inner_face{position:relative;width:88%;height:88%;border-radius:1000px;z-index:1000;left:6%;top:6%}.inner_face::before{content:"";width:10px;height:10px;border-radius:10px;margin-left:-5px;margin-top:-5px;background:#fff;position:absolute;top:50%;left:50%}.inner_face::after{content:attr(data-content);position:absolute;width:100%;font-family:brandon_grotesqueblack;font-size:1.3rem;color:#fff;text-align:center;bottom:7%}.hand,.hand.hour{position:absolute;width:4px;height:30%;top:20%;left:50%;margin-left:-2px;background:#fff;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:bottom;transform-origin:bottom;z-index:-1}.hand.minute{height:40%;top:10%;width:5px;margin-left:-2.5px}.hand.second{height:50%;width:2px;margin-left:-1px;top:0}.ca-clock .inner_face::after{color:#e73387}.ca-clock .hand.second{background-color:#e73387}.var-clock .inner_face::after{color:#4acef6}.var-clock .hand.second{background-color:#4acef6}@font-face{font-family:brandon_grotesquebold_italic;src:url(../../../assets/fonts/Brandon_bld_it-webfont.eot);src:url(../../../assets/fonts/Brandon_bld_it-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_bld_it-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_bld_it-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_bld_it-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_bld_it-webfont.svg#brandon_grotesquebold_italic) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesquebold;src:url(../../../assets/fonts/Brandon_bld-webfont.eot);src:url(../../../assets/fonts/Brandon_bld-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_bld-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_bld-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_bld-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_bld-webfont.svg#brandon_grotesquebold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesqueblack_italic;src:url(../../../assets/fonts/Brandon_blk_it-webfont.eot);src:url(../../../assets/fonts/Brandon_blk_it-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_blk_it-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_blk_it-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_blk_it-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_blk_it-webfont.svg#brandon_grotesqueblack_italic) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesqueblack;src:url(../../../assets/fonts/Brandon_blk-webfont.eot);src:url(../../../assets/fonts/Brandon_blk-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_blk-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_blk-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_blk-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_blk-webfont.svg#brandon_grotesqueblack) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesqueRgIt;src:url(../../../assets/fonts/Brandon_reg_it-webfont.eot);src:url(../../../assets/fonts/Brandon_reg_it-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_reg_it-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_reg_it-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_reg_it-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_reg_it-webfont.svg#brandon_grotesqueRgIt) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesque_regularRg;src:url(../../../assets/fonts/Brandon_reg-webfont.eot);src:url(../../../assets/fonts/Brandon_reg-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_reg-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_reg-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_reg-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_reg-webfont.svg#brandon_grotesque_regularRg) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesquethin_italic;src:url(../../../assets/fonts/Brandon_thin_it-webfont.eot);src:url(../../../assets/fonts/Brandon_thin_it-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_thin_it-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_thin_it-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_thin_it-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_thin_it-webfont.svg#brandon_grotesquethin_italic) format('svg');font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesquethin;src:url(../../../assets/fonts/Brandon_thin-webfont.eot);src:url(../../../assets/fonts/Brandon_thin-webfont.eot?#iefix) format('embedded-opentype'),url(../../../assets/fonts/Brandon_thin-webfont.woff2) format('woff2'),url(../../../assets/fonts/Brandon_thin-webfont.woff) format('woff'),url(../../../assets/fonts/Brandon_thin-webfont.ttf) format('truetype'),url(../../../assets/fonts/Brandon_thin-webfont.svg#brandon_grotesquethin) format('svg');font-weight:400;font-style:normal}body,html{height:100%;-ms-touch-action:manipulation;touch-action:manipulation}*{-webkit-font-smoothing:antialiased;-webkit-user-drag:none}html{font-size:100%}@media only screen and (min-width:1241px) and (max-width:1550px){html{font-size:85%}}@media only screen and (max-width:1240px){html{font-size:75%}}@media only screen and (max-width:640px){html{font-size:70%}}body{font-family:'Whitney SSm A','Whitney SSm B';font-weight:400;font-style:normal;font-size:16px;line-height:1;color:#333;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;box-sizing:border-box;z-index:0;height:100%;-webkit-backface-visibility:hidden;overflow:hidden;position:relative}p{font-size:inherit;padding-bottom:30px}@media only screen and (max-width:1550px){p{padding-bottom:3.226vw}}h1,h2,h3,h4,h5,h6{line-height:1;color:#333}h1{font-family:brandon_grotesqueblack;font-size:3.25rem;text-transform:uppercase}h1.small{font-size:3.80938rem;text-align:center}h1.big{font-size:4.6875rem;color:#fff;text-align:center}@media only screen and (max-width:640px){h1.big{font-size:3.6875rem}}@media only screen and (max-width:640px){h1{font-size:2.25rem}}h2{font-family:brandon_grotesqueblack;font-size:2.8125rem;text-transform:uppercase}@media (max-width:640px){h2{font-size:1.8125rem}}h2.small{font-size:1.6875rem;color:#a69ead;text-align:center;margin-bottom:3.47vh}@media (max-width:640px){h2.small{font-size:1.5rem}}h2.big{font-size:3.125rem}h2.bigger{color:#fff;font-size:4.875rem}@media only screen and (min-width:640px) and (max-width:1240px){h2.space{padding-bottom:70px}}@media (max-width:640px){h2.space{font-size:1.8125rem;padding-bottom:40px}}h2.biggest{font-family:'Whitney SSm A','Whitney SSm B';font-weight:300;font-style:normal;font-size:3.5rem;color:#01b0ff;text-transform:none}@media only screen and (max-width:1240px){h2.biggest{font-size:2.9rem}}h3{font-family:brandon_grotesqueblack;font-size:2.5rem;line-height:1}h3.smaller{font-size:2rem;color:#fff;text-transform:uppercase}@media only screen and (max-width:640px){h3.smaller{font-size:1.75rem}}@media only screen and (max-width:568px){h3.smaller{font-size:1.5rem}}@media only screen and (max-width:450px){h3.smaller{font-size:1.25rem}}h3.small{font-size:2.25rem}h3.big{font-size:2.8125rem;color:#ececec;text-transform:uppercase}h3.bigger{font-size:3.5rem;color:#f3f5f7;font-weight:500;text-transform:uppercase}@media only screen and (max-width:1240px){h3.bigger{margin-top:10px;font-size:2.813rem}}h4{font-family:brandon_grotesqueblack;font-size:1.875rem}h5{font-family:'Whitney SSm A','Whitney SSm B';font-weight:700;font-style:normal;font-size:1.5625rem}h6{font-family:'Whitney SSm A','Whitney SSm B';font-weight:700;font-style:normal;font-size:1.25rem}h6 em{font-family:'Whitney SSm A','Whitney SSm B';font-weight:400;font-style:italic}h6.bordered{border-top-style:solid;border-top-width:1px;border-top-color:#fff;padding:15px 0}h6.small{font-family:brandon_grotesqueblack;font-size:1.125rem;text-transform:uppercase}.biggest-title{font-size:7.9375rem;color:#fff;text-align:center;padding-bottom:10px}@media only screen and (max-width:768px){.biggest-title{font-size:5rem}}@media only screen and (max-width:640px){.biggest-title{font-size:4.2rem}}@media only screen and (max-width:500px){.biggest-title{font-size:3.8rem}}.title-dash{position:relative;margin-top:3.3125rem}.title-dash:before{content:'';display:block;position:absolute;top:-3.3125rem;left:50%;width:7.5rem;height:8px;margin-left:-3.75rem;background:#e23c8a}.title-dash--small{margin-top:2.1875rem}.title-dash--small:before{top:-2.1875rem}.title-dash--smaller{padding-bottom:18px}.title-dash--smaller:before{width:26px;margin-left:-13px}.title-dash--position2:before{top:initial;bottom:0}a{color:inherit}section{width:100%;position:relative}input,input[type=button],input[type=submit],input[type=text],select,textarea{-webkit-appearance:none;display:block}#back-arrow{display:none;fill:#394551;width:3%}.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pace-progress{background:#DE1374;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:5px}.pace-inactive{display:none}.pace .pace-progress{background:#DE1374;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:5px}.lazy img{opacity:1!important}.scroll-wrapper{-webkit-overflow-scrolling:touch;position:absolute;width:100%;height:100%;z-index:10}.btn,button{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;padding:0 20px;margin:0 auto;font-family:brandon_grotesqueblack;font-size:1.375rem;line-height:3.125rem;color:#fff;text-transform:uppercase;background-color:#e73387;border:none;cursor:pointer;position:relative}.btn--default,button--default{min-width:9.22vw}@media only screen and (min-width:1920px){.btn--default,button--default{min-width:236px}}@media only screen and (max-width:640px){.btn.contact-btn,button.contact-btn{font-size:1rem}}.btn--slider,button--slider{font-size:1.5rem;background-color:#139ad7;border-radius:30px;padding:0 55px}.btn--shadow{width:276px;font-size:1.875rem;line-height:5.125rem;text-align:center;margin:0;border-radius:7px;background-color:#e13485}@media only screen and (max-width:1240px){.btn--shadow{margin-top:20px!important;height:50px!important;line-height:inherit!important;width:auto!important}}.pages{position:relative}.pages--height{height:100%}.page{height:100%;position:relative}.page--home{height:100%}.page__header{position:relative;width:100%;height:100%;color:#fff;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;background-color:#32424b}.page__header .arrow-down{position:absolute;width:31px;height:17px;left:0;right:0;bottom:55px;margin:auto;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);z-index:2}.page__header .arrow-down svg{fill:#fff;width:100%;height:100%;opacity:.17}@media only screen and (max-width:1024px){.page__header .arrow-down{bottom:40px}}@media only screen and (max-width:1280px){.page__header .arrow-down{width:16px;height:25px}}.page__casestudy .page-section .shell:first-of-type{max-width:1550px}.owl-carousel{height:100%}.owl-carousel .shell{display:-ms-flexbox;display:-webkit-box;display:flex}.owl-carousel .item,.owl-carousel .owl-item,.owl-carousel .owl-stage,.owl-carousel .owl-stage-outer,.owl-carousel .owl-wrapper,.owl-carousel .owl-wrapper-outer{height:100%}.owl-carousel .item{background-position:center top;background-size:cover;width:100%;position:relative;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;text-align:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;height:100%}.owl-carousel .item a{position:absolute;top:0;left:0;width:100%;height:100%;font-size:0;text-indent:-4000}.projects-slider .item a{position:relative;width:192px;height:72px;background-color:rgba(255,255,255,.13);border-radius:40px;margin:55px auto 0;font-size:30px;line-height:76px;text-align:center;text-transform:uppercase;display:block;font-family:brandon_grotesqueblack}@media only screen and (max-width:1550px){.projects-slider .item a{width:160px;height:57px;line-height:57px;font-size:24px}}@media only screen and (max-width:1280px){.projects-slider .item a{width:130px;height:45px;line-height:45px;font-size:24px}}@media only screen and (max-width:1024px){.projects-slider .item a{margin-top:20px}}@media only screen and (min-width:1024px){.projects-slider .item a:hover{background-color:#fff;color:#242629}}.projects-slider .owl-next,.projects-slider .owl-prev{position:absolute;top:0;width:180px;height:100%}.projects-slider .owl-next svg,.projects-slider .owl-prev svg{position:absolute;left:50%;top:50%;width:29px;height:48px;fill:#fff;opacity:.17;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none}@media only screen and (max-width:1280px){.projects-slider .owl-next,.projects-slider .owl-prev{width:8vw}.projects-slider .owl-next svg,.projects-slider .owl-prev svg{width:14px;height:23px}}@media only screen and (min-width:1024px){.projects-slider .owl-next:hover svg,.projects-slider .owl-prev:hover svg{opacity:1}}@media only screen and (max-width:1022px){.projects-slider .owl-next,.projects-slider .owl-prev{display:none!important}}.projects-slider .owl-next{right:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.projects-slider .owl-controls{z-index:2}.projects-slider .owl-pagination{position:absolute;left:50%;bottom:20px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);z-index:10}.projects-slider .owl-pagination:before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%}.projects-slider .owl-page{display:inline-block;width:7px;height:7px;border:1px solid rgba(255,255,255,.3);border-radius:100%}.projects-slider .owl-page+.owl-page{margin-left:15px}.projects-slider .owl-page.active{background-color:#fff;border:1px solid #fff}.projects-slider #networx{background-image:url(../img/home/networx.jpg)}.projects-slider #networx .title-dash:before{background:#e23e27}.projects-slider #bob-marley{background-image:url(../img/home/bobmarley.jpg)}.projects-slider #bob-marley .title-dash:before{background:#35bd6e}.projects-slider #rich-beach{background-image:url(../img/home/reach-beach.jpg)}.projects-slider #rich-beach .title-dash:before{background:#e22a6c}.projects-slider #inseller{background-image:url(../img/home/inseller.jpg)}.projects-slider #inseller .title-dash:before{background:#fff}.wrapper{height:100%;width:100%;position:relative;z-index:20}.content{position:relative;z-index:1;padding-bottom:200px}.shell{position:relative;width:100%;height:100%;padding:0 66px;margin:0 auto;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.shell--height{height:100%}.shell--jobs{max-width:1280px;padding:0 20px}.shell__middle{min-height:100vh}@media only screen and (max-width:1550px){.shell__middle{padding-left:10px!important;padding-right:10px!important}}@media only screen and (max-width:320px){.shell__middle{padding-bottom:21.75vh}}.shell--columns{-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-align-self:initial;-ms-flex-item-align:initial;-ms-grid-row-align:initial;align-self:initial;-ms-flex-align:initial;-webkit-box-align:initial;align-items:initial}@media only screen and (min-width:641px) and (max-width:1550px){.shell{padding-left:40px;padding-right:40px}.shell--jobs{padding:0 20px}}@media only screen and (max-width:640px){.shell{padding-left:20px;padding-right:20px}}.footer{position:relative;z-index:500;bottom:0;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end;width:100%;padding-top:50px;padding-bottom:20px;background-repeat:no-repeat;background-position:center 0;background-size:cover;background-color:#fff;line-height:1.4375rem;color:rgba(255,255,255,.36)}.footer__shell{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.footer__row{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;width:100%;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;padding:40px 0 0;max-width:1100px}.footer__row--last{max-width:100%;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.footer__row--last p{font-size:1.25rem}.footer__row:first-of-type{padding-top:0}.footer__row:last-of-type{padding-bottom:0}@media only screen and (max-width:1240px){.footer__row{padding:0}}.footer p{color:#bcc0c4}.footer p a:hover{color:#E13485}.footer h2{color:#e03485;text-shadow:initial}.footer h3{color:#3f4a56}@media only screen and (max-width:1440px){.footer{padding:40px 0;height:auto}.footer__row:first-of-type{padding-top:0;padding-bottom:17px}}@media only screen and (max-width:1240px){.footer{padding:40px 0}}@media (max-width:640px){.footer{padding:30px 0;min-height:200px}.footer h2{font-size:1.9rem}.footer h3{font-size:1.813rem}.footer .btn{font-size:1rem;height:40px!important;margin-top:0!important;border-radius:5px}.footer .box-social{margin-top:5px!important}.footer p{font-size:1rem}}.footer__box{-ms-flex:1 1 500px;-webkit-box-flex:1;flex:1 1 500px;-ms-flex-order:2;-webkit-box-ordinal-group:3;order:2;text-transform:uppercase;font-family:brandon_grotesqueblack}.footer__box p{padding-bottom:0}.footer__box:nth-of-type(2){max-width:276px;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}@media only screen and (max-width:1240px){.footer__box{-ms-flex:1 1 100%;-webkit-box-flex:1;flex:1 1 100%;text-align:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.footer__box:nth-of-type(2){display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;max-width:100%;padding-top:20px}.footer__box.box-social{margin:20px 0;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}}.footer--small{height:initial;min-height:initial;padding:20px 0}@media only screen and (max-width:1240px){.footer--small .footer__box.box-social{margin-top:20px}}.btn-hi{position:relative;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.btn-hi span{width:100%;height:100%;text-align:center}.btn-hi--big{display:block}.btn-hi--big svg{width:160px;height:95px;fill:#47515d}@media only screen and (max-width:1550px){.btn-hi--big svg{width:135px;height:65px}}.btn-hi--big span{position:absolute;top:0;left:0;text-align:center;padding-top:27px;font-size:1.5rem;color:#fff}@media only screen and (max-width:1550px){.btn-hi--big span{font-size:1.7rem;padding-top:17px}}.btn-hi--small svg{position:absolute;top:50%;left:50%;margin-top:-16px;margin-left:-33px;width:66px;height:41px;fill:rgba(255,255,255,.13);-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.btn-hi--small span{display:block;position:relative;color:rgba(255,255,255,.6)}.btn-hi.active:hover svg{fill:#e73387}@media only screen and (min-width:1024px){.btn-hi:hover svg{fill:#e73387}}.box-social__link:not(:first-of-type){margin-left:30px}.box-social__link{display:block}.box-social__link svg{fill:#bcc0c4}.box-social__link--facebook{width:12px;height:22px}.box-social__link--twitter{width:25px;height:20px}.box-social__link--google{width:21px;height:21px}.box-social__link--dribbble{width:23px;height:23px}.box-social__link--behance{width:29px;height:18px}.box-social__link--instagram{width:22px;height:21px}@media screen and (min-width:1024px){.box-social__link:hover{opacity:1}.box-social__link:hover svg{fill:#E13485}}.page-section{position:relative;z-index:2;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.page-section--height{height:100%}.page-section--top{width:100%;height:100%;color:#fff;text-align:center;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;background-position:center top;background-size:cover;background-attachment:fixed}.page-section--home{font-size:1.5625rem;line-height:2.1rem;color:#a69ead;background-color:#fff;text-align:center;background-position:center 100%;background-size:cover;-webkit-backface-visibility:hidden;backface-visibility:hidden}.page-section--home p{margin:0 auto;font-family:'Whitney SSm A','Whitney SSm B';font-weight:400;font-style:normal}.page-section--home--bg-0{color:#3f4a56;background-image:url(../img/home/buildup.jpg)}.page-section--home--bg-0 h1{color:#242629}.page-section--home--bg-0 h1 span{position:relative;color:#fff;display:inline-block;height:100%}.page-section--home--bg-0 h1 span img{width:auto;height:100%;position:absolute;top:-20px;left:8px}@media only screen and (max-width:1024px){.page-section--home--bg-0 h1 span img{top:-15px}}@media only screen and (max-width:768px){.page-section--home--bg-0 h1 span img{top:-10px}}@media only screen and (max-width:640px){.page-section--home--bg-0 p{font-size:18px;line-height:1.9rem}}.page-section--home--bg-1{color:#b1a2c0;background-image:url(../img/home/together.jpg)}.page-section--home--bg-1 p{max-width:870px}.page-section--home--bg-2{background-image:url(../img/home/design.jpg);color:#3f4a56}.page-section--home--bg-2 h1{color:#242629}.page-section--home--bg-3{background-image:url(../img/home/implement.jpg);color:#b1a2c0}@media only screen and (max-width:500px){.page-section--home--bg-3 .biggest-title{font-size:2.8rem}}.page-section--content{max-width:960px;padding-top:1.25rem;width:960px}@media only screen and (max-width:1024px){.page-section--content{width:100%}}.pattern-overlay:before{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:0;background:url(../img/pattern.png);pointer-events:none}@media screen and (min-width:1025px) and only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and (min-device-pixel-ratio:1.5){.pattern-overlay:before{background-image:url(../img/pattern@2.png)}}@media screen and (max-width:1024px){.pattern-overlay:before{display:none}}.page-section__top{width:100%;padding:0;max-height:26.403vh;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}@media only screen and (max-width:640px){.page-section__top{max-height:initial}}.page--projects{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.page-section--projects{background:url(../img/projects/projects.jpg) center 0/auto 50vh repeat-x;-ms-flex:1 1 100%;-webkit-box-flex:1;flex:1 1 100%;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;padding-bottom:5.625rem}@media only screen and (max-width:1024px){.page-section--projects{background-size:auto 40vh;padding-bottom:60px}}@media only screen and (max-width:640px){.page-section--projects{background-size:auto 55vh}}.page-section--projects.pattern-overlay:before{height:50vh}@media only screen and (max-width:1024px){.page-section--projects.pattern-overlay:before{height:40vh}}@media only screen and (max-width:640px){.page-section--projects.pattern-overlay:before{height:55vh}}.shell--projects{-ms-flex:1 1 100%;-webkit-box-flex:1;flex:1 1 100%;-ms-flex-flow:row wrap;flex-flow:row wrap;padding-top:10.9vh}@media only screen and (max-width:1024px){.shell--projects{height:initial}}@media only screen and (max-width:600px){.shell--projects{padding-left:0;padding-right:0}}.shell--projects .title-dash{margin-top:2.5rem;margin-bottom:5vh}.projects-list{width:100%;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;padding-bottom:0;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.projects-list>div{position:relative}.projects-list:after{content:'';display:block;clear:both}.footer--projects{-ms-flex:none;-webkit-box-flex:0;flex:none;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;jutify-content:center;background-color:#fff;z-index:1;height:auto}.project-item{display:block;-ms-flex:1 1 25%;-webkit-box-flex:1;flex:1 1 25%;max-width:540px;width:100%;height:100%;overflow:hidden;position:relative;text-align:center}@media only screen and (max-width:1024px){.project-item{-ms-flex:1 1 50%;-webkit-box-flex:1;flex:1 1 50%;max-width:50%}}@media only screen and (max-width:600px){.project-item{-ms-flex:1 1 100%;-webkit-box-flex:1;flex:1 1 100%;max-width:100%}}.project-item img{width:100%;height:100%;display:block}.project-cnt{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;position:absolute;width:100%;height:100%;top:0;opacity:0;-ms-flex-flow:row wrap;flex-flow:row wrap;background:0 0;-webkit-transition:background .2s ease;transition:background .2s ease}.project-cnt h3{opacity:0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.project-cnt button{background:#fff;border-radius:3px;position:absolute;bottom:3.75rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.project-cnt--event-pro button{color:#1b6ea8}.project-cnt--networx button{color:#ec4e38}.project-cnt--bob-marlay button{color:rgba(18,121,154,.68)}.project-cnt--inseller button,.project-cnt--rich-beach button{background:#fff;color:#37bc9b;opacity:.88}.project-cnt--placehoder,.project-cnt--placehoder:hover{opacity:0}@media only screen and (min-width:1241px){.project-cnt:hover{opacity:1;background:rgba(226,42,108,.88)}.project-cnt:hover h3{opacity:1}}.project-item--coming-soon img{visibility:hidden}.project-item--coming-soon .project-cnt{background-color:#CDB388;opacity:1}.project-item--coming-soon h3{opacity:1}.more-indication:before{content:'...';display:none;position:absolute;font-family:brandon_grotesqueblack;font-size:5vw;line-height:8vw;color:#fff;padding-left:2.8vw;text-transform:uppercase;letter-spacing:.5vw;width:10vw;height:10vw;right:6.66vw;bottom:6.66vw;background-color:rgba(255,255,255,.13);border-radius:32px}@media only screen and (max-width:600px){.more-indication:before{display:block}}@media screen and (max-width:640px){.careers .footer{min-height:150px}}.page-section--careers{background:url(../img/careers/careers-hero.jpg) center 0/auto 50vh repeat-x;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;padding-bottom:100px}@media only screen and (max-width:1024px){.page-section--careers{background-size:auto 40vh}}@media only screen and (max-width:640px){.page-section--careers{background-size:auto 55vh;padding-bottom:50px}}.page-section--careers.pattern-overlay:before{height:50vh}@media only screen and (max-width:1024px){.page-section--careers.pattern-overlay:before{height:40vh}}@media only screen and (max-width:640px){.page-section--careers.pattern-overlay:before{height:55vh}}.careers-list{display:-ms-flexbox;display:-webkit-box;display:flex;width:100%;height:182px;-ms-flex-flow:row wrap;flex-flow:row wrap;padding-bottom:0;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-webkit-transform:translate(0,50%);transform:translate(0,50%)}.careers-list:after{content:'';display:block;clear:both}.careers-list__item{position:relative;-ms-flex:1 1 25%;-webkit-box-flex:1;flex:1 1 25%;max-width:540px;width:100%;height:100%;overflow:hidden;background-color:#F9F6FC;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.careers-list__item:nth-of-type(1),.careers-list__item:nth-of-type(3){background-color:#F3F1F5}.careers-list__item h3{font-size:2.5rem;line-height:3rem;color:#3f4a56;text-transform:uppercase;font-family:'Whitney SSm A','Whitney SSm B';font-weight:300;font-style:normal;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.careers-list__item h3 span{display:block}@media only screen and (max-width:1024px){.careers-list__item{-ms-flex:1 1 50%;-webkit-box-flex:1;flex:1 1 50%;max-width:50%}.careers-list__item:nth-of-type(3){background-color:#F9F6FC}.careers-list__item:last-of-type{background-color:#F3F1F5}}@media only screen and (max-width:640px){.careers-list__item{-ms-flex:1 1 100%;-webkit-box-flex:1;flex:1 1 100%;max-width:100%}.careers-list__item:nth-of-type(3){background-color:#F3F1F5}.careers-list__item:last-of-type{background-color:#F9F6FC}}@media only screen and (max-width:1024px){.careers-list{-webkit-transform:translate(0,0);transform:translate(0,0)}}@media only screen and (min-width:1024px){.careers-list .careers-list__item:hover{background-color:#E13485}.careers-list .careers-list__item:hover h3{color:#fab2d4}.careers-list .careers-list__item:hover h3 span{border-bottom:1px solid #fab2d4}}@media only screen and (max-width:640px){.careers-list{height:auto}.careers-list__item{height:140px}}.jobs-holder__head{position:relative;height:397px;background:url(../img/careers/careers-hero.jpg) center 0/cover repeat-x}.jobs-holder__head h1{position:relative;padding-top:40px;font-size:4.6875rem;line-height:4.6875rem;color:#fff;font-family:brandon_grotesqueblack;text-align:center}.jobs-holder__head h1:before{position:absolute;content:'';left:0;right:0;top:0;margin:0 auto;width:120px;height:8px;background-color:#E23C8A}.jobs-holder__desc{padding:100px 20px;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;height:auto}.jobs-holder__desc article{max-width:850px;margin-bottom:40px;color:#47515d}.jobs-holder__desc article.lists p{position:relative;padding:0 0 10px;display:list-item;list-style-type:none;text-indent:8px}.jobs-holder__desc article.lists p:before{position:relative;left:-8px;content:'-'}.jobs-holder__desc article h3{font-size:1.9rem;text-transform:uppercase;font-family:brandon_grotesqueblack;margin-bottom:3.5vh}.jobs-holder__desc article p{font-size:1.5rem;line-height:2rem;padding-bottom:3.125vh}@media only screen and (max-width:1280px){.jobs-holder__desc{padding:100px 20px}.jobs-holder__desc article{width:100%;margin:0 auto 40px}}@media only screen and (max-width:1024px){.jobs-holder__desc{padding:100px 40px}.jobs-holder__desc article{max-width:100%}}@media screen and (max-width:640px){.jobs-holder__head h1{font-size:4rem;line-height:4rem}.jobs-holder__desc{padding:30px 20px}}.footer--jobs .footer__shell{max-width:1280px;padding:0 20px}.footer--jobs .footer__shell .apply-btn{position:relative;width:192px;height:72px;background-color:#47515D;border-radius:40px;color:#fff;font-size:30px;line-height:76px;text-align:center;text-transform:uppercase;display:block;font-family:brandon_grotesqueblack}@media only screen and (max-width:1280px){.footer--jobs .footer__shell .apply-btn{width:130px;height:45px;line-height:50px;font-size:24px}}@media only screen and (min-width:1024px){.footer--jobs .footer__shell .apply-btn:hover{background-color:#E13485}}[data-tab],[data-tabber-content]{transition:-webkit-transform .6s ease;-webkit-transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease, -webkit-transform .6s ease;-webkit-transform:translateZ(0);transform:translateZ(0)}[data-tab]{display:none;background-color:#fff;width:100%;height:100%;z-index:50}[data-tab].active{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}@media only screen and (max-width:1025px){.clicked,[data-tab-link].clicked,[data-tab-link].clicked span{color:#e73387!important}}#casestudies{position:fixed;top:0;left:0;z-index:1000;height:100%;width:100%;-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;overflow:auto;-webkit-transform:translateX(100%);transform:translateX(100%)}[data-tabber-content=pages]{overflow-x:hidden}[data-tabber-content=pages]>[data-tab]{position:absolute;top:0;left:0;overflow:auto;overflow-x:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-effect-in{z-index:70;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}@media only screen and (max-width:1024px){.slide-effect-in{-webkit-transition-delay:1s;transition-delay:1s}}.slide-effect-out-right{-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-effect-out-left{z-index:60;transition:-webkit-transform 1.4s ease;-webkit-transition:-webkit-transform 1.4s ease;transition:transform 1.4s ease;transition:transform 1.4s ease, -webkit-transform 1.4s ease;-webkit-transform:translateX(-100%)!important;transform:translateX(-100%)!important}@media only screen and (max-width:1024px){.slide-effect-out-left{-webkit-transition-delay:1s;transition-delay:1s}}.no-scroll .page.active,.no-scroll .pages,.no-scroll .scroll-wrapper{overflow:hidden}.page-section--contact{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}@media only screen and (max-width:768px){.page-section--contact{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}@media only screen and (max-width:568px) and (orientation:landscape){.page-section--contact{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;height:100vh}}.contacts-col{position:relative;-ms-flex:1 1 0;-webkit-box-flex:1;flex:1 1 0;max-width:50%;background-repeat:no-repeat;background-position:0 0;background-size:cover;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-flow:column wrap;flex-flow:column wrap;font-family:'Whitney SSm A','Whitney SSm B';font-weight:500;font-style:normal;font-size:2.125rem;color:#fff}@media only screen and (max-width:768px){.contacts-col{max-width:100%;height:50%}}@media only screen and (max-width:568px) and (orientation:landscape){.contacts-col{max-width:50%;height:100%;font-size:2rem}}@media only screen and (min-width:1025px){.contacts-col a:hover{color:#e73387}}.contacts-col p{padding-bottom:15px}.contacts-col small{font-size:1.375rem}.contacts-col--ca{background-image:url(../img/contact/contact-ca-bg.jpg)}.contacts-col--var{background-image:url(../img/contact/contact-bg-bg.jpg)}.contacts-col--var h2:before{background:#4acef6}@media only screen and (min-width:1025px){.contacts-col--var a:hover{color:#4acef6}}@media only screen and (max-width:768px){.contacts-col--var{padding-bottom:40px}}@media only screen and (max-width:568px){.contacts-col--var{padding-bottom:0}}.contacts-col h2{font-size:5.625rem;color:#fff;padding-bottom:.9375rem;margin-bottom:.9375rem}@media only screen and (max-width:768px){.contacts-col h2{font-size:4rem}}.footer--contact{position:absolute;background:0 0;left:50%;bottom:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media only screen and (max-width:568px){.footer--contact{display:none}}.footer--contact .footer__box p{color:#fff}.footer--contact .footer__row{padding-bottom:0}.footer--contact .box-social a svg{fill:#fff}@media only screen and (min-width:1025px){.footer--contact .box-social a:hover svg{fill:#e73387}}.page__casestudy{padding-top:100vh}.page__casestudy img{display:block;width:100%}.page__casestudy .slick-slider{position:relative;z-index:2;overflow:hidden}.page__casestudy .slick-list,.page__casestudy .slick-track{position:relative;z-index:2}.page__casestudy .slick-slide{display:inline-block;z-index:2}.page__casestudy .owl-item{width:100%}.page__casestudy .owl-nav svg,.page__casestudy .slick-next svg,.page__casestudy .slick-prev svg{fill:#d6dfe6}@media only screen and (min-width:1025px){.page__casestudy .owl-nav:hover svg,.page__casestudy .slick-next:hover svg,.page__casestudy .slick-prev:hover svg{fill:#e7398a}}.page__casestudy .owl-next,.page__casestudy .owl-prev,.page__casestudy .slick-next,.page__casestudy .slick-prev{position:absolute;top:0;z-index:9999;width:4.5%;max-width:65px;min-width:55px;height:100%;font-size:0;line-height:0;font-indent:-4000px;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:center;-webkit-box-align:center;align-items:center;padding:20px;cursor:pointer}.page__casestudy .owl-next svg,.page__casestudy .owl-prev svg,.page__casestudy .slick-next svg,.page__casestudy .slick-prev svg{pointer-events:none}@media only screen and (max-width:1022px){.page__casestudy .owl-next,.page__casestudy .owl-prev,.page__casestudy .slick-next,.page__casestudy .slick-prev{display:none!important}}.page__casestudy .owl-prev,.page__casestudy .slick-prev{left:3.5%;-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (max-width:640px){.page__casestudy .owl-prev,.page__casestudy .slick-prev{left:0}}.page__casestudy .owl-next,.page__casestudy .slick-next{right:3.5%}@media (max-width:640px){.page__casestudy .owl-next,.page__casestudy .slick-next{right:0}}.page__casestudy .owl-dots,.page__casestudy .slick-dots{position:absolute;left:50%;bottom:10.138%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);z-index:9999;height:5px}.page__casestudy .owl-dot,.page__casestudy .slick-dots li button{font-size:0;line-height:0;text-indent:-4000px;display:inline-block;width:5px;height:5px;border-radius:2px;background-color:#d6dfe6;padding:0}.page__casestudy .owl-dot+.owl-dot,.page__casestudy .slick-dots li button+.owl-dot{margin-left:5px}.page__casestudy .owl-dot.active,.page__casestudy .slick-dots li button.active{background-color:#e7398a}.page__casestudy .slick-dots li{height:5px;display:inline-block}.page__casestudy .slick-dots li+li{margin-left:5px}.page__casestudy .slick-dots li.slick-active button{background-color:#e7398a}@media (max-width:450px){.page__casestudy .slick-dots{bottom:16.138%}}.casestudy__top{position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center 0;background-size:cover;-webkit-backface-visibility:hidden;backface-visibility:hidden}.casestudy__top__overlay{width:100%;height:100%;opacity:0}.casestudy__details{position:relative;font-family:'Whitney SSm A','Whitney SSm B';font-weight:400;font-style:normal;font-size:1.25rem;line-height:1.625rem}.casestudy__title{position:absolute;width:100%;overflow:hidden;height:11.164vw;top:-11.164vw}@media only screen and (min-width:1024px) and (max-width:1920px) and (orientation:portrait){.casestudy__title{height:9.164vw;top:-9.164vw}}@media only screen and (max-width:1024px) and (orientation:portrait){.casestudy__title{height:19.164vw;top:-19.164vw}}@media only screen and (max-width:740px) and (orientation:landscape){.casestudy__title{height:12vw;top:-12vw}.casestudy__title h1{font-size:2.5rem}.casestudy__title h2{font-size:2.1rem}}@media only screen and (max-width:320px) and (orientation:portrait){.casestudy__title{height:23vw;top:-23vw}}.scroll-arrow{opacity:0;fill:#fff;position:absolute;top:0;right:5%;width:4%;max-width:42px;height:100%;transition:-webkit-transform .3s ease;-webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-transform:scaleY(1);transform:scaleY(1)}@media only screen and (max-width:760px){.scroll-arrow{opacity:1}}.casestudy__details.active .scroll-arrow{-webkit-transform:scaleY(-1);transform:scaleY(-1)}h2.space{padding-bottom:4vw}h2.space~h6{max-width:967px}.shell--spacing{padding-top:4vw;padding-bottom:2vw}.casestudy__info__wrapper{height:auto;overflow:hidden;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:height .5s ease;transition:height .5s ease}@media only screen and (min-width:760px){.casestudy__info__wrapper{height:auto!important}}@media only screen and (max-width:760px){.casestudy__info__wrapper{height:0}}.casestudy__info{padding-bottom:30px}@media screen only and (max-width:1550px){.casestudy__info{padding-bottom:1.172vw}}.casestudy__info__cols-wrapper{padding:10px 0 0;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.casestudy__info h6{color:#fff}.casestudy__info__col{display:-ms-flexbox;display:-webkit-box;display:flex}.casestudy__info__col--cnt{-ms-flex:2 1 796px;-webkit-box-flex:2;flex:2 1 796px;-ms-flex-flow:column wrap;flex-flow:column wrap;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1;margin-top:24px}.casestudy__info__col--cnt p{width:100%;max-width:50%;padding-right:1.953vw}@media only screen and (max-width:700px){.casestudy__info__col--cnt p{min-width:100%}}@media only screen and (max-width:700px){.casestudy__info__col--cnt{height:auto!important;margin-bottom:30px}}.casestudy__info__col--obj{-ms-flex:1 1 365px;-webkit-box-flex:1;flex:1 1 365px;-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-ms-flex-order:2;-webkit-box-ordinal-group:3;order:2}@media only screen and (max-width:1240px){.casestudy__info__col--obj{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}@media only screen and (max-width:568px){.casestudy__info__col--obj{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}.btn--casestudy{font-family:brandon_grotesqueblack;height:60px;padding:0 40px;font-size:1.25rem;line-height:60px;border-radius:30px;margin:0}@media only screen and (min-width:1024px){.btn--casestudy:hover{background-color:#fff}}@media only screen and (min-width:640px) and (max-width:1280px){.btn--casestudy{min-width:100%}}@media only screen and (max-width:568px){.btn--casestudy{min-width:100%}}.btn--app-store{padding:15px 29px;border-radius:29px;font-family:Helvetica,Arial,sans-serif;line-height:1;text-transform:none}.btn--app-store svg{width:17px;height:29px;margin-right:10px;fill:#fff}.btn--app-store small{font-size:10px;display:block}.btn--app-store strong{font-size:24px}.objectives{-ms-flex:1;-webkit-box-flex:1;flex:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1;margin-top:-28px}@media only screen and (max-width:1280px){.objectives{margin-top:0;padding-right:50px}}.obj__row{-ms-flex:1;-webkit-box-flex:1;flex:1;-ms-flex-order:2;-webkit-box-ordinal-group:3;order:2;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}@media only screen and (min-width:640px) and (max-width:1280px){.obj__row{-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}.obj__list{max-width:auto;margin-right:0;font-family:'Whitney SSm A','Whitney SSm B';font-weight:400;font-style:normal;font-size:1.25rem;line-height:1.625rem;padding:30px 0}.download-section{display:block}.casestudy__background{background-repeat:no-repeat;background-position:center 0}.footer--casestudies h3{color:#fff}.footer--casestudies p{color:rgba(255,255,255,.36)}.footer--casestudies p a:hover{color:#fff}.footer--casestudies .box-social__link svg{fill:rgba(255,255,255,.36)}.casestudy__top--event-pro{background-image:url(../img/projects/event-pro/casestudy-top.jpg)}.casestudy__overlay--event-pro{background-color:#216c9f}.btn--event-pro{background-color:rgba(21,68,100,.3);color:#33c8ff}@media only screen and (min-width:1025px){.btn--event-pro:hover{color:#154464}}.event-pro{color:#154464}h1.event-pro,h6.event-pro{color:#fff}@media only screen and (min-width:1025px){.casestudy--event-pro .owl-next:hover:hover svg,.casestudy--event-pro .owl-prev:hover:hover svg,.casestudy--event-pro .slick-next:hover:hover svg,.casestudy--event-pro .slick-prev:hover:hover svg{fill:#12aaeb}}.casestudy--event-pro .owl-dot.active,.casestudy--event-pro .slick-dots li button.active,.casestudy--event-pro .slick-dots li.slick-active button{background-color:#12aaeb}.bordered.event-pro{border-top-color:rgba(21,68,100,.3)}.casestudy__details--event-pro{color:#d0dfe9;background:#216c9f}.casestudy__title--event-pro{background:rgba(33,108,159,.95)}.casestudy__slider--event-pro{background-color:#e8eff5}.casestudy__slider--event-pro--type2{background-color:#fff;overflow:hidden}.casestudy__preview--event-pro{background-color:#eef3f7}.footer--event-pro{background-image:url(../img/projects/event-pro/footer-bg.jpg)}.footer--event-pro .btn-hi svg{fill:#01b0ff}.footer--event-pro .btn-hi span{color:#fff}@media only screen and (min-width:1025px){.footer--event-pro .btn-hi:hover svg{fill:#fff}.footer--event-pro .btn-hi:hover span{color:#01b0ff}}.footer--event-pro h2{color:#01b0ff}.footer--event-pro p a:hover{color:#2d92d7}.footer--event-pro .box-social__link:hover svg{fill:#2d92d7}.casestudy__top--networx{background-image:url(../img/projects/networx/networx-top.jpg)}.casestudy__overlay--networx{background-color:#f2472e}.btn--networx{background-color:rgba(161,48,31,.3);color:#fff}@media only screen and (min-width:1025px){.btn--networx:hover{color:#f2472e}}.networx{color:#a1301f}h1.networx,h6.networx{color:#fff}@media only screen and (min-width:1025px){.casestudy--networx .owl-next:hover svg,.casestudy--networx .owl-prev:hover svg,.casestudy--networx .slick-next:hover svg,.casestudy--networx .slick-prev:hover svg{fill:#f23216}}.casestudy--networx .owl-dot.active,.casestudy--networx .slick-dots li button.active,.casestudy--networx .slick-dots li.slick-active button{background-color:#f23216}.bordered.networx{border-top-color:rgba(161,48,31,.3)}.casestudy__details--networx{color:#fff;background:#f2472e}.casestudy__title--networx{background:rgba(242,71,46,.98)}.casestudy__slider--networx{background-color:#fff}.casestudy__slider--networx--type2{background-color:#fff;overflow:hidden}.casestudy__preview--networx{background-color:#eef3f7}.footer--networx{background-image:url(../img/projects/networx/networx-footer.jpg)}.footer--networx .btn-hi svg{fill:#f2472e}.footer--networx .btn-hi span{color:#fff}@media only screen and (min-width:1025px){.footer--networx .btn-hi:hover svg{fill:#fff}.footer--networx .btn-hi:hover span{color:#f2472e}}.footer--networx h2{color:#f2472e}.footer--networx .box-social__link:hover svg{fill:#fff}.casestudy__top--bob-marley{background-image:url(../img/projects/bob-marley/bob-marley-top.jpg)}.casestudy__overlay--bob-marley{background-color:#35bd6e}.casestudy__details--bob-marley{color:#fff;background-color:#35bd6e}.casestudy__details--bob-marley h1{color:#fff}.casestudy__details--bob-marley h2,.casestudy__details--bob-marley h2.space{color:#1c6c3e}@media only screen and (min-width:1024px){.casestudy__details--bob-marley h2.space span{display:block}}.casestudy__details--bob-marley .btn{background-color:#1c6c3e}@media only screen and (min-width:1025px){.casestudy__details--bob-marley .btn:hover{background-color:#fff;color:#1c6c3e}}.casestudy__title--bob-marley{background-color:#35bd6e}.casestudy__slider--bob-marley .owl-carousel{position:absolute;top:0;left:0}.casestudy__slider--bob-marley .owl-carousel .owl-controls .owl-buttons .owl-next,.casestudy__slider--bob-marley .owl-carousel .owl-controls .owl-buttons .owl-prev{background:rgba(213,23,44,0)}.casestudy__slider--bob-marley .owl-carousel .owl-controls .owl-buttons .owl-next svg,.casestudy__slider--bob-marley .owl-carousel .owl-controls .owl-buttons .owl-prev svg{fill:#fff;width:26px;height:42px}.casestudy__slider--bob-marley .item{max-width:850px;width:100%;margin:auto;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.casestudy__slider--bob-marley .item h2{margin-top:140px;font-family:brandon_grotesqueblack;font-size:66px;font-weight:500;color:#1A7858;text-align:center}.casestudy__slider--bob-marley .item h2 span{color:#fff}.casestudy__slider--bob-marley .item .video{position:relative;-webkit-transform:rotate(-2deg);transform:rotate(-2deg);height:487px;width:835px}.casestudy__slider--bob-marley .item .video:after{content:'';position:absolute;width:100%;height:60px;left:0;bottom:-75px;background:url(../img/projects/bob-marley/video-shadow.png) center top/100% 100% no-repeat;-webkit-transform:rotate(2deg);transform:rotate(2deg);z-index:2}@media only screen and (max-width:1024px){.casestudy__slider--bob-marley .item .video:after{background-image:url(../img/projects/bob-marley/video-shadow.png);height:54px;bottom:-69px}}.casestudy__slider--bob-marley .item .video video{display:none}.casestudy__slider--bob-marley .item .video.visible video{width:100%;display:block;margin-top:9px;margin-left:1px;height:468px;z-index:3}.casestudy__slider--bob-marley .item .video.visible:before{content:'';position:absolute;width:100%;height:97.5%;top:6px;left:0;border:5px solid #fff;background:0 0;pointer-events:none}@media only screen and (min-width:1280px) and (max-width:1919px){.casestudy__slider--bob-marley .item h2{margin-top:110px;font-size:54px}.casestudy__slider--bob-marley .item .video{height:400px;width:691px}.casestudy__slider--bob-marley .item .video.visible video{height:386px}}@media (min-width:1280px){.casestudy__slider--bob-marley .item .video{cursor:pointer}}@media (max-width:1279px){.casestudy__slider--bob-marley .item h2{margin-top:100px;font-size:54px}.casestudy__slider--bob-marley .item .video{height:360px;width:620px}.casestudy__slider--bob-marley .item .video.visible video{height:345px}}@media (max-width:1150px){.casestudy__slider--bob-marley .item h2{margin-top:80px;font-size:40px}.casestudy__slider--bob-marley .item .video{height:305px;width:522px}.casestudy__slider--bob-marley .item .video.visible video{height:290px}}@media (max-width:960px){.casestudy__slider--bob-marley .item h2{margin-top:65px;font-size:29px}.casestudy__slider--bob-marley .item .video{height:250px;width:433px}.casestudy__slider--bob-marley .item .video.visible video{height:240px}.casestudy__slider--bob-marley .item .video:after{bottom:-60px}}@media (max-width:740px){.casestudy__slider--bob-marley .item h2{margin-top:45px;font-size:18px}.casestudy__slider--bob-marley .item .video{height:155px;width:270px}.casestudy__slider--bob-marley .item .video.visible video{height:148px}.casestudy__slider--bob-marley .item .video:after{bottom:-55px}}@media (max-width:500px){.casestudy__slider--bob-marley .item h2{margin-top:20px;font-size:15px}.casestudy__slider--bob-marley .item .video{height:95px;width:165px}.casestudy__slider--bob-marley .item .video.visible video{height:88px}.casestudy__slider--bob-marley .item .video:after{bottom:-40px}}.casestudy__slider--bob-marley-device .slick-dots li.slick-active button{background-color:#1c6c3e}@media only screen and (min-width:1025px){.casestudy__slider--bob-marley-device .owl-nav:hover svg,.casestudy__slider--bob-marley-device .slick-next:hover svg,.casestudy__slider--bob-marley-device .slick-prev:hover svg{fill:#1c6c3e}}.footer--bob-marley{background-image:url(../img/projects/bob-marley/bg-footer.jpg)}.footer--bob-marley img{position:absolute;top:0;left:0}.footer--bob-marley .btn-hi svg{fill:#35bd6e}@media only screen and (min-width:1025px){.footer--bob-marley .btn-hi:hover svg{fill:#fff}.footer--bob-marley .btn-hi:hover span{color:#35bd6e}}.footer--bob-marley h2{color:#35bd6e}.footer--bob-marley p a:hover{color:#1c6c3e}@media only screen and (min-width:1025px){.footer--bob-marley .box-social__link:hover svg{fill:#fff}}.casestudy__top--rich-beach{background-image:url(../img/projects/rich-beach/rich-beach-top.jpg)}.casestudy__overlay--rich-beach{background-color:#043660}.casestudy__details--rich-beach{color:#9ab3c3;background-color:#043660}.casestudy__details--rich-beach h1{color:#fff}.casestudy__details--rich-beach h2,.casestudy__details--rich-beach h2.space{color:#ff2d74}@media only screen and (min-width:1024px){.casestudy__details--rich-beach h2.space span{display:block}}.casestudy__details--rich-beach .btn{background-color:#ff2d74}@media only screen and (min-width:1025px){.casestudy__details--rich-beach .btn:hover{background-color:#fff;color:#ff2d74}.casestudy__details--rich-beach .btn:hover svg{fill:#ff2d74}}.casestudy__title--rich-beach{background-color:#043660}.footer--rich-beach{background-image:url(../img/projects/rich-beach/rich-beach-footer.jpg)}.footer--rich-beach img{position:absolute;top:0;left:0}.footer--rich-beach .btn-hi svg{fill:#ed3475}@media only screen and (min-width:1025px){.footer--rich-beach .btn-hi:hover svg{fill:#fff}.footer--rich-beach .btn-hi:hover span{color:#ed3475}}.footer--rich-beach h2{color:#ed3475}.footer--rich-beach p a:hover{color:#ff2d74}@media only screen and (min-width:1025px){.footer--rich-beach .box-social__link:hover svg{fill:#ed3475}}.casestudy__top--inseller{background-image:url(../img/projects/inseller/inseller-top.jpg)}.casestudy__overlay--inseller{background-color:#f6f4f1}.casestudy__details--inseller{color:#757575;background-color:#f6f4f1}.casestudy__details--inseller h1{color:#263238}.casestudy__details--inseller h2.space{color:#36454C}.casestudy__details--inseller h2{color:#cdb388}.casestudy__details--inseller h6{color:#4A5A61}@media only screen and (min-width:1024px){.casestudy__details--inseller h2.space span{display:block}}.casestudy__details--inseller .btn{background-color:#cdb388}@media only screen and (min-width:1025px){.casestudy__details--inseller .btn:hover{background-color:#fff;color:#cdb388}.casestudy__details--inseller .btn:hover svg{fill:#cdb388}}.obj__row{width:auto}.casestudy__title--inseller{background-color:rgba(246,244,241,.95)}.footer--inseller{background-image:url(../img/projects/inseller/inseller-footer.jpg)}.footer--inseller img{position:absolute;top:0;left:0}.footer--inseller .btn-hi svg{fill:#cdb388}@media only screen and (min-width:1025px){.footer--inseller .btn-hi:hover svg{fill:#fff}.footer--inseller .btn-hi:hover span{color:#cdb388}}.footer--inseller h2{color:#cdb388}.footer--inseller h3{color:#263238}.footer--inseller p{color:rgba(38,50,56,.36)}.footer--inseller p a:hover{color:#cdb388}.footer--inseller .box-social__link svg{fill:rgba(38,50,56,.36)}@media only screen and (min-width:1025px){.footer--inseller .box-social__link:hover svg{fill:#cdb388}}.casestudy__top--svg-devices{background-image:url(../img/projects/svg-devices/svg-devices-header.jpg)}.casestudy__overlay--svg-devices{background-color:#4a325e}@media only screen and (min-width:1025px){.btn--svg-devices:hover{color:#e73387}}.svg-devices{color:#b491cc}h1.svg-devices,h6.svg-devices{color:#fff}.casestudy__details--svg-devices{color:#ebe3f1;background-color:#4a325e}.casestudy__details--svg-devices strong{display:block;color:#b491cc}.casestudy__slider--svg-devices .slick-slide{float:left}.casestudy__slider--svg-devices .slick-next,.casestudy__slider--svg-devices .slick-prev{height:75%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.casestudy__slider--svg-devices .slick-prev{-webkit-transform:translateY(-50%) scale(-1);transform:translateY(-50%) scale(-1)}.casestudy__title--svg-devices{background-color:rgba(74,50,94,.95)}.footer--svg-devices{background-image:url(../img/projects/svg-devices/footer-bg.jpg)}.footer--svg-devices .btn-hi svg{fill:#e63083}.footer--svg-devices .btn-hi span{color:#fff}@media only screen and (min-width:1025px){.footer--svg-devices .btn-hi:hover svg{fill:#fff}.footer--svg-devices .btn-hi:hover span{color:#e63083}}.footer--svg-devices h2,.footer--svg-devices p a:hover{color:#e63083}.footer--svg-devices .box-social__link:hover svg{fill:#e63083}@media only screen and (max-width:1240px){.casestudy__top>div{display:none}}@media only screen and (max-width:640px){.lazy{background-position:center}.lazy img{opacity:0}}.casestudy{padding-top:100vh;z-index:100}.casestudy *{-webkit-backface-visibility:hidden;backface-visibility:hidden}.casestudy__top>div{width:100%;height:100%;opacity:0}#eventray-case .casestudy__top>div{background-color:#216c9f}#networx-case .casestudy__top>div{background-color:#f2472e}.dtail-brand{position:absolute;width:100%;height:15px;left:0;bottom:25px;text-align:center;text-transform:uppercase;font-size:15px;color:#685777;font-family:brandon_grotesqueblack}.errors{height:100%;background:#4A325E}.errors__holder{position:relative;height:100%;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.errors__holder div{max-width:590px}.errors__holder__message{position:relative;height:325px}.errors__holder__message h1{font-size:276px;color:#fff;text-align:center}.errors__holder__message h2{font-size:29px;color:#fff}.errors__holder__message a{position:absolute;width:auto;height:20px;left:0;right:0;bottom:-13.15vh;font-size:20px;text-align:center;text-decoration:underline;text-transform:uppercase;color:#fb3592;font-family:brandon_grotesqueblack}.landing-screen{height:100%;background-color:#4A325E;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.landing-screen:before{content:'';display:block;position:absolute;left:0;top:0;height:10px;width:0;background:#e73387;-webkit-animation:loader 1s forwards;animation:loader 1s forwards}.landing-screen--loading:before{width:auto;max-width:100%}.landing-screen--loaded:before{width:100%}.landing-screen__logo svg{width:191px;height:191px;fill:#fff;margin-bottom:20px}.landing-screen__logo p{font-size:16px;line-height:16px;color:#fff;text-align:center;text-transform:uppercase;font-family:brandon_grotesqueblack}@-webkit-keyframes loader{0%{width:0}100%{width:90%}}@keyframes loader{0%{width:0}100%{width:90%}}</style></head><body> <body id="top" class="home"> <svg style="display:none"><symbol viewBox="64.1 0 483.8 791" id="svg-arrow-square"><title>arrow-square</title> <path d="M64.1,395.5L464.5,0l0,0L544,87.3L230.9,395.5l317,312.1l0,0L464.5,791l0,0L64.1,395.5z"></path> </symbol><symbol viewBox="-49.9 99.5 900 514.3" id="svg-arrow-vertical"><title>arrow-vertical</title> <path d="M736.6,120.9L400.1,459.5L59.4,116.6l0,0c-12.9-10.7-27.9-17.1-45-17.1c-36.4,0-64.3,27.9-64.3,64.3 c0,17.1,6.4,32.1,17.1,45l0,0L353,594.5l0,0c10.7,12.9,27.9,19.3,47.1,19.3l0,0l0,0c17.1,0,34.3-8.6,47.1-19.3l0,0L833,208.8l0,0 c10.7-12.9,17.1-27.9,17.1-45c0-36.4-27.9-64.3-64.3-64.3C766.6,99.5,749.4,108,736.6,120.9"></path> </symbol><symbol viewBox="0 0 24 42" id="svg-arrow"><title>arrow</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M1,5.3L16.8,21L0.8,36.9l0,0C0.3,37.5,0,38.2,0,39c0,1.7,1.3,3,3,3 c0.8,0,1.5-0.3,2.1-0.8l0,0l18-18l0,0c0.6-0.5,0.9-1.3,0.9-2.2c0,0,0,0,0,0c0,0,0,0,0,0c0-0.8-0.4-1.6-0.9-2.2l0,0l-18-18l0,0 C4.5,0.3,3.8,0,3,0C1.3,0,0,1.3,0,3C0,3.9,0.4,4.7,1,5.3"></path> </symbol><symbol viewBox="0 0 28.5 17.9" id="svg-behance"><title>behance</title> <path d="M11.4,8.4c0,0,2.7-0.2,2.7-3.5c0-3.3-2.2-4.9-5-4.9H0l0,17.9h8.8c0,0,5.8,0.7,5.8-4.9 C14.7,12.9,14.9,8.4,11.4,8.4z M3.5,3.4h5.3c0,0,1.5-0.1,1.5,1.8c0,1.9-0.7,2.5-1.5,2.5H3.5V3.4z M8.8,15.3H3.5v-5.1l5.6,0 c0,0,1.8,0,1.8,2.5C11,14.8,9.6,15.3,8.8,15.3z M22.3,3.8c-6.8,0-6.8,7.1-6.8,7.1s-0.5,7,6.8,7c0,0,6.2,0.1,6.2-5.1H25 c0,0,0.3,2.2-2.6,2.2c0,0-3.4,0.3-3.4-3.1h9.5C28.5,11.9,29.4,3.8,22.3,3.8z M25.1,9.3h-5.8c0,0,0.4-2.8,3.1-2.8 C25.1,6.5,25.1,9.3,25.1,9.3z M25.8,0H19v2.6h6.9L25.8,0L25.8,0z"></path> </symbol><symbol viewBox="0 0 66 41" id="svg-bubble-small"><title>bubble-small</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5,0h35C59.1,0,66,6.9,66,15.5C66,24.1,59.1,31,50.5,31H36L24,41 l0-10h-8.5C6.9,31,0,24.1,0,15.5C0,6.9,6.9,0,15.5,0z"></path> </symbol><symbol viewBox="0 0 193 95" id="svg-bubble"><title>bubble</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M36.2,0h120.6c20,0,36.2,16.1,36.2,35.9c0,19.8-16,36.1-36,36.1H85 L56,95V72H37C17,72,0,55.7,0,35.9C0,16.1,16.2,0,36.2,0z"></path> </symbol><symbol viewBox="0 0 23.3 23" id="svg-dribbble"><title>dribbble</title> <path d="M11.7,23C5.2,23,0,17.8,0,11.5S5.2,0,11.7,0c6.4,0,11.7,5.2,11.7,11.5S18.1,23,11.7,23z M21.5,13.1 c-0.3-0.1-3.1-0.9-6.2-0.4c1.3,3.5,1.8,6.4,1.9,7C19.4,18.2,21,15.8,21.5,13.1z M15.5,20.6c-0.1-0.9-0.7-3.9-2.1-7.4c0,0,0,0-0.1,0 c-5.6,1.9-7.6,5.8-7.8,6.1c1.7,1.3,3.8,2.1,6.1,2.1C13,21.3,14.3,21.1,15.5,20.6z M4.3,18.1c0.2-0.4,3-4.8,8.1-6.5 c0.1,0,0.3-0.1,0.4-0.1c-0.3-0.6-0.5-1.1-0.8-1.7c-5,1.5-9.8,1.4-10.2,1.4c0,0.1,0,0.2,0,0.3C1.7,14,2.7,16.3,4.3,18.1z M1.9,9.5 c0.4,0,4.5,0,9.2-1.2C9.5,5.4,7.7,3,7.4,2.6C4.6,3.9,2.6,6.5,1.9,9.5z M9.3,2c0.3,0.4,2.1,2.8,3.7,5.8c3.5-1.3,5-3.3,5.2-3.5 c-1.8-1.5-4.1-2.5-6.6-2.5C10.9,1.7,10.1,1.8,9.3,2z M19.4,5.3c-0.2,0.3-1.9,2.4-5.6,3.9c0.2,0.5,0.5,0.9,0.7,1.4 c0.1,0.2,0.1,0.3,0.2,0.5c3.3-0.4,6.6,0.2,6.9,0.3C21.6,9.1,20.7,7,19.4,5.3z"></path> </symbol><symbol viewBox="0 0 11.2 21.5" id="svg-facebook"><title>facebook</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2,0.2v3.4c0,0-2.7-0.6-3.7,0.1C6.8,4.4,6.9,6.2,6.9,7h4.3 c-0.3,1.3-0.6,2.2-0.9,3.4H6.9v11.1l-4.4,0c0-3.4,0.1-7.5,0.1-11.1H0V6.9h2.5c0.1-2.5-0.3-4.7,1-6C4.9-0.4,6.9,0.1,11.2,0.2"></path> </symbol><symbol viewBox="0 0 20.7 21.3" id="svg-google"><title>google</title> <path d="M11.4,17.1c0-0.2,0-0.4-0.1-0.5c0-0.2-0.1-0.3-0.1-0.5c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.2-0.3-0.3-0.4 c-0.1-0.1-0.2-0.2-0.3-0.4c-0.2-0.1-0.3-0.3-0.4-0.3c-0.1-0.1-0.2-0.2-0.4-0.3C9.4,14.1,9.2,14,9.2,14c-0.1-0.1-0.2-0.1-0.4-0.3 c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1,0-0.4,0-0.6,0c-0.5,0-0.9,0-1.4,0.1c-0.4,0.1-0.9,0.2-1.4,0.3C4.4,14,4,14.1,3.6,14.4 c-0.4,0.2-0.7,0.6-0.9,1c-0.2,0.4-0.4,0.9-0.4,1.4c0,0.6,0.2,1.1,0.5,1.6c0.3,0.5,0.7,0.8,1.2,1.1c0.5,0.3,1,0.5,1.6,0.6 c0.5,0.1,1.1,0.2,1.6,0.2c0.5,0,1-0.1,1.5-0.2c0.5-0.1,0.9-0.3,1.3-0.5c0.4-0.2,0.7-0.5,1-0.9C11.2,18.1,11.4,17.6,11.4,17.1z M9.8,6.1c0-0.5-0.1-1.1-0.2-1.6C9.4,3.9,9.2,3.3,9,2.8c-0.3-0.5-0.6-1-1.1-1.3c-0.5-0.3-1-0.5-1.6-0.5c-0.8,0-1.4,0.3-1.9,0.9 C4,2.4,3.8,3.1,3.8,3.9c0,0.4,0.1,0.8,0.1,1.3c0.1,0.4,0.3,0.9,0.5,1.3C4.6,7,4.9,7.4,5.1,7.7c0.3,0.4,0.6,0.6,1,0.9 C6.6,8.8,7,8.9,7.4,8.9c0.8,0,1.4-0.3,1.8-0.8C9.6,7.6,9.8,6.9,9.8,6.1z M8.1,0h5.7L12,1h-1.8c0.6,0.4,1.1,0.9,1.4,1.6 C12,3.3,12.2,4,12.2,4.8c0,0.6-0.1,1.2-0.3,1.7c-0.2,0.5-0.4,0.9-0.7,1.2c-0.3,0.3-0.6,0.6-0.9,0.8C10,8.7,9.8,9,9.6,9.3 c-0.2,0.3-0.3,0.6-0.3,0.9c0,0.2,0.1,0.4,0.2,0.7c0.1,0.2,0.3,0.4,0.6,0.6c0.2,0.2,0.5,0.4,0.8,0.6c0.3,0.2,0.6,0.5,0.8,0.7 c0.3,0.3,0.5,0.5,0.8,0.8c0.2,0.3,0.4,0.7,0.6,1.1c0.1,0.4,0.2,0.9,0.2,1.4c0,1.4-0.6,2.6-1.8,3.6c-1.3,1.1-3.1,1.7-5.4,1.7 c-0.5,0-1,0-1.5-0.1c-0.5-0.1-1.1-0.2-1.6-0.4c-0.5-0.2-1-0.4-1.4-0.7c-0.4-0.3-0.7-0.7-1-1.1c-0.3-0.5-0.4-1-0.4-1.6 c0-0.5,0.2-1.1,0.5-1.7c0.3-0.5,0.7-1,1.2-1.4c0.6-0.4,1.2-0.7,1.9-0.9c0.7-0.2,1.4-0.4,2-0.5c0.6-0.1,1.3-0.2,1.9-0.2 c-0.6-0.7-0.8-1.3-0.8-1.9c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0.1-0.2c0-0.1,0.1-0.2,0.1-0.3C7,9.8,7,9.7,7,9.6c-0.3,0-0.6,0.1-0.9,0.1 c-1.3,0-2.4-0.4-3.3-1.3C1.9,7.6,1.4,6.5,1.4,5.3c0-1.2,0.4-2.3,1.2-3.2c0.8-0.9,1.8-1.5,3-1.8C6.5,0.1,7.3,0,8.1,0z M20.7,3.4v1.7 h-2.6v2.6h-1.7V5.1h-2.6V3.4h2.6V0.9h1.7v2.6H20.7z"></path> </symbol><symbol viewBox="0 0 21.6 21.3" id="svg-instagram"><title>instagram</title> <path d="M17.3,10.6c0,3.6-2.9,6.4-6.5,6.4c-3.6,0-6.5-2.9-6.5-6.4c0-0.4,0-0.8,0.1-1.2H0V18c0,1.8,1.5,3.3,3.4,3.3 h14.8c1.9,0,3.4-1.5,3.4-3.3V9.4h-4.4C17.3,9.8,17.3,10.2,17.3,10.6z M18.2,0H3.4C1.5,0,0,1.5,0,3.3v3.6h5.5 c1.2-1.6,3.1-2.7,5.3-2.7c2.2,0,4.1,1.1,5.3,2.7h5.5V3.3C21.6,1.5,20.1,0,18.2,0z M19.9,3.6c0,0.4-0.2,0.7-0.5,0.7h-1.6 c-0.3,0-0.5-0.3-0.5-0.7V2.4c0-0.4,0.2-0.7,0.5-0.7h1.6c0.3,0,0.5,0.3,0.5,0.7V3.6z M14.8,10.6c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4 c0,2.2,1.8,4,4,4C13,14.6,14.8,12.8,14.8,10.6z"></path> </symbol><symbol viewBox="0 0 17 29" id="svg-iphone-btn-icon"><title>iphone-btn-icon</title> <path d="M15,0H2C0.6,0,0,0.7,0,2v25c0,1.3,0.6,2,2,2h13c1.4,0,2-0.7,2-2V2C17,0.7,16.4,0,15,0z M8.5,27 C7.7,27,7,26.3,7,25.5C7,24.7,7.7,24,8.5,24c0.8,0,1.5,0.7,1.5,1.5C10,26.3,9.3,27,8.5,27z M15,23H2V4h13V23z"></path> </symbol><symbol viewBox="0 0 24.4 19.7" id="svg-twitter"><title>twitter</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6,0c1.9,0,3,0.7,4,1.6c0.8-0.1,1.9-0.5,2.6-0.9 c0.2-0.1,0.4-0.2,0.6-0.3c-0.4,1-0.9,1.8-1.6,2.3c-0.2,0.1-0.3,0.3-0.5,0.4v0c1.1,0,2-0.5,2.8-0.8v0c-0.4,0.7-1.1,1.4-1.7,1.9 c-0.3,0.2-0.5,0.4-0.8,0.6c0,1.1,0,2.2-0.2,3.2c-1.2,5.6-4.6,9.4-9.8,11C10,19.7,7,19.9,4.8,19.4c-1.1-0.3-2-0.6-2.9-1 c-0.5-0.2-1-0.5-1.4-0.7c-0.1-0.1-0.3-0.2-0.4-0.3c0.5,0,1.1,0.1,1.6,0.1c0.5-0.1,1-0.1,1.4-0.2c1.1-0.2,2.1-0.6,3-1.1 c0.4-0.2,1.1-0.5,1.4-0.9c-0.6,0-1.1-0.1-1.5-0.3c-1.6-0.6-2.6-1.6-3.2-3.2C3.2,12,4.6,12.1,5,11.8c-0.6,0-1.2-0.4-1.6-0.7 C2,10.4,1,9,1,6.9C1.1,7,1.3,7.1,1.5,7.2c0.3,0.1,0.7,0.2,1,0.3c0.2,0,0.5,0.1,0.7,0.1h0C2.9,7.2,2.5,7,2.3,6.7 c-0.8-1-1.6-2.6-1.1-4.5c0.1-0.5,0.3-0.9,0.5-1.3c0,0,0,0,0,0C1.8,1.1,2,1.3,2.2,1.4c0.4,0.5,1,1,1.5,1.4c1.8,1.4,3.5,2.3,6.1,2.9 C10.4,6,11.2,6.1,12,6.1c-0.2-0.7-0.2-1.7,0-2.3c0.4-1.6,1.4-2.7,2.8-3.3c0.3-0.1,0.7-0.3,1.1-0.3C16.2,0,16.4,0,16.6,0"></path> </symbol></svg> <header class="header-nav"> <a href="#!pages:home" data-tabber="pages" data-tab-link="home" class="logo logo--home show active"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://dtailstudio.com/assets/front/img/icons/favicon-32.png"></use> </svg> <span data-history-link="home" class="">dtail studio</span> </a> <a href="#!pages:our-work" data-tabber="pages" data-tab-link="our-work" class="logo logo--back"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-square"></use></svg> <span data-history-link="back">back</span> </a> <a href="#!pages:careers" data-tabber="pages" data-tab-link="careers" class="logo"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-square"></use></svg> <span data-history-link="back">back</span> </a> <nav data-role="mainNav"> <input type="checkbox" id="menuBtn" class="navTrigger" data-role="mainTrigger"> <label for="menuBtn" class="menuButton"> <span class="lines"></span> </label> <ul class="mainMenu" style="height: 100%;"> <li><a href="#!pages:home" data-tabber="pages" data-tab-link="home" class="active">Home</a></li> <li><a href="#!pages:our-work" data-tabber="pages" data-tab-link="our-work" class="">Our Work</a></li> <li> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--small"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble-small"></use></svg> <span>hi</span> </a> </li> <li class="social"> <div class="box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> <p class="social__brand">© 2015 dtailstudio ltd.</p> </li> </ul> </nav> </header> <div id="wrapper" class="scroll-wrapper"> <div class="pages pages--height" data-onclick="tabberCallbackOnClick" data-onchange="tabberCallback" data-oninit="tabberInitCallback" data-tabber-content="pages"> <div class="landing-screen landing-screen--loading landing-screen--loaded"> <div class="landing-screen__logo"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-logo"></use> </svg> <p>Loading ...</p> </div> <p class="dtail-brand">© 2015 dtail studio ltd.</p> </div> <div class="page page--home active slide-effect-in" data-tab="home" style="overflow: auto;"> <header class="page__header page__header--home lazy" data-original="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif"> <div class="owl-carousel projects-slider owl-theme" style="opacity: 1; display: block;"> <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 8880px; left: 0px; display: block; transform: translate3d(-1110px, 0px, 0px); transition: all 800ms ease;"><div class="owl-item" style="width: 1110px;"><div class="item pattern-overlay" id="inseller"> <h2 class="biggest-title title-dash title-dash--small">Inseller</h2> <h3 class="smaller">Online Luxury Shop</h3> <a href="#!pages:inseller" data-tabber="pages" data-tab-link="home" class="active">more</a> </div></div><div class="owl-item" style="width: 1110px;"><div class="item pattern-overlay" id="rich-beach"> <h2 class="biggest-title title-dash title-dash--small">Rich Beach</h2> <h3 class="smaller">Application design and Branding</h3> <a href="#!pages:rich-beach" data-tabber="pages" data-tab-link="home" class="active">more</a> </div></div><div class="owl-item" style="width: 1110px;"><div class="item pattern-overlay" id="networx"> <h2 class="biggest-title title-dash title-dash--small">Networx</h2> <h3 class="smaller">Social application</h3> <a href="#!pages:networx" data-tabber="pages" data-tab-link="home" class="active">more</a> </div></div><div class="owl-item" style="width: 1110px;"><div class="item pattern-overlay" id="bob-marley"> <h2 class="biggest-title title-dash title-dash--small">Bob Marley</h2> <h3 class="smaller">campaign design</h3> <a href="#!pages:bob-marley" data-tabber="pages" data-tab-link="home" class="active">more</a> </div></div></div></div> <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-square"></use></svg></div><div class="owl-next"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-square"></use></svg></div></div></div></div> <span class="arrow-down"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-square"></use></svg></span> </header> <div class="wrapper wrapper--home"> <section class="page-section page-section--home page-section--home--bg-0 pattern-overlay page-section--height"> <div class="shell shell--height"> <h1 class="biggest-title title-dash">Build it up</h1> <p class="page-section--content">We believe every idea has potential to grow into something huge. It takes faith, creativity, knowledge, devotion, and experience. We aim high, challenge everything, and work hard to help build up ideas, and create meaningful products for people.</p> </div> </section> <section class="page-section page-section--home page-section--height page-section--home--bg-1 pattern-overlay"> <div class="shell shell--height"> <h1 class="biggest-title title-dash">Together For Better</h1> <p class="page-section--content">It’s no secret. Team work and collaboration is what makes good ideas great. No matter how large or small a project is, we’ll get the whole crew involved as we work closely together to develop products that make a difference.</p> </div> </section> <section class="page-section page-section--home page-section--home--bg-2 page-section--height pattern-overlay"> <div class="shell shell--height"> <h1 class="biggest-title title-dash">Design</h1> <p class="page-section--content">Great design is about more than simply looking good. <br>It needs to feel good, to sound good, to taste good.</p> </div> </section> <section class="page-section page-section--home page-section--home--bg-3 page-section--height pattern-overlay"> <div class="shell shell--height"> <h1 class="biggest-title title-dash">Implementation</h1> <p class="page-section--content">A great product is innovative but easy to understand. <br>It is faultless, consistent and enjoyable.</p> </div> </section> <footer class="footer"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> </div> <div id="projects" class="page page--projects" data-tab="our-work" style="overflow: auto;"> <section class="page-section page-section--projects pattern-overlay"> <div class="shell shell--projects"> <h1 class="big title-dash title-dash--small">OUR WORK</h1> <div class="projects-list"> <a href="#!pages:inseller" class="project-item pattern-overlay" data-tabber="pages" data-tab-link="networx"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--inseller pattern-overlay"> <h3 class="big">Inseller</h3> </div> <span href="#!pages:inseller" data-tabber="pages" data-tab-link="networx" class="more-indication"></span> </a> <!-- <a href="#!pages:inseller" class="project-item project-item--coming-soon"> <img class="lazy" src="assets/front/img/projects/inseller-thumb.jpg" alt=""> <div class="project-cnt"> <h3 class="big">Inseller</h3> </div> </a> --> <a href="#!pages:rich-beach" class="project-item pattern-overlay" data-tabber="pages" data-tab-link="networx"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--rich-beach pattern-overlay"> <h3 class="big">Rich Beach</h3> </div> <span href="#!pages:rich-beach" data-tabber="pages" data-tab-link="networx" class="more-indication"></span> </a> <a href="#!pages:networx" class="project-item pattern-overlay" data-tabber="pages" data-tab-link="networx"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--networx pattern-overlay"> <h3 class="big">Networx</h3> </div> <span href="#!pages:networx" data-tabber="pages" data-tab-link="networx" class="more-indication"></span> </a> <a href="#!pages:bob-marley" class="project-item pattern-overlay" data-tabber="pages" data-tab-link="bob-marley"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--bob-marlay pattern-overlay"> <h3 class="big">bob marley</h3> </div> <span href="#!pages:bob-marley" data-tabber="pages" data-tab-link="bob-marley" class="more-indication"></span> </a> <a href="#!pages:event-pro" class="project-item pattern-overlay" data-tabber="pages" data-tab-link="event-pro"> <img class="lazy" src="assets/front/img/projects/thumb-event-pro.jpg" alt=""> <div class="project-cnt project-cnt--event-pro pattern-overlay"> <h3 class="big">Event Pro</h3> </div> <span href="#!pages:event-pro" data-tabber="pages" data-tab-link="event-pro" class="more-indication"></span> </a> <a href="#!pages:svg-devices" class="project-item pattern-overlay" data-tabber="pages" data-tab-link="svg-devices"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--svg-devices pattern-overlay"> <h3 class="big">PSD / AI / SVG<br> PACK</h3> </div> <span href="#!pages:svg-devices" data-tabber="pages" data-tab-link="svg-devices" class="more-indication"></span> </a> <!-- <div class="project-item project-item--coming-soon"> <img class="lazy" src="assets/front/img/projects/inseller-thumb.jpg" alt=""> <div class="project-cnt"> <h3 class="big">Coming soon</h3> </div> </div> --> <div class="project-item"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--placehoder"></div> </div> <div class="project-item"> <img class="lazy" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> <div class="project-cnt project-cnt--placehoder"></div> </div> </div> </div> </section> <footer class="footer footer--projects"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div data-sticky-wrapper="" class="page page__casestudy casestudy--event-pro" data-tab="event-pro" data-wrapper="casestudies"> <section class="page-section casestudy__top casestudy__top--event-pro pattern-overlay"> <div class="casestudy__overlay casestudy__overlay--event-pro"></div> </section> <section class="page-section casestudy__details casestudy__details--event-pro"> <div class="casestudy__title casestudy__title--event-pro"> <div class="shell shell--columns"> <h1 class="event-pro">EVENTPRO</h1> <h2 class="event-pro">Interface kit</h2> <div class="scroll-arrow"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-vertical"></use></svg> </div> </div> </div> <div class="casestudy__info__wrapper accordeon-opacity-0"> <div class="casestudy__info casestudy__info--event-pro"> <div class="shell shell--columns shell--spacing"> <h2 class="space event-pro">Next Level Tools for Managing Your Upcoming Events!</h2> <h6 class="event-pro">About</h6> <div class="casestudy__info__cols-wrapper"> <div class="casestudy__info__col casestudy__info__col--cnt"> <p>EventPro is an advanced event management platform, which allows you to manage your upcoming events with ease. It's quick to create a new event... and after that you'll be free to pick the format and interface that best suits your style. Event settings and notifications are managed from a simple, streamlined control panel, as well as allowing you to monitor event activity using a detailed statistical package.</p> <p>In designing the user interface, we were looking for simple – yet powerful – user controls. EventPro allows users to Pin content, Manage items, Track balances, Gather statistics, and more.</p> <p>The platform uses our specially designed activity stream to offer a bird's-eye view of the process – from event creation, through to ticket sales and user interactions. You can browse through user comments, shares, feedback and more.</p> <p>EventPro also makes it easy to keep track of your ticket sales, your users and their interactions with your upcoming event – using powerful statistical engines that do all the hard work for you.</p> </div> <div class="casestudy__info__col casestudy__info__col--obj"> <div class="objectives"> <h6 class="event-pro">Deliverables:</h6> <ul class="obj__list"> <li>Concept Development</li> <li>Web UI/UX Design</li> <li>Mobile UI/UX Design</li> <li>Front End Development</li> <li>Free UI Kit</li> </ul> </div> <div class="obj__row"> <a href="http://dtailstudio.com/downloads-free/EventPro-Full_UI_Kit_DtailStudio.zip" target="_blank" class="btn btn--casestudy btn--event-pro">Download</a> </div> </div> </div> </div> </div> </div> </section> <section class="page-section casestudy__slider casestudy__slider--event-pro"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/event-pro/1920/slide2.jpg" src="assets/front/img/projects/event-pro/slide2.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="2" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/event-pro/1920/slide3.jpg" src="assets/front/img/projects/event-pro/slide3.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">3</button></li></ul></div> </section> <section class="page-section casestudy__preview casestudy__preview--event-pro"> <img data-src="assets/front/img/projects/event-pro/1920/slide4.jpg" src="assets/front/img/projects/event-pro/slide4.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--event-pro"> <img data-src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" src="https://d13yacurqjgara.cloudfront.net/users/662638/screenshots/2399519/secrettexturedprojectdribs2.gif" alt=""> </section> <section class="page-section casestudy__slider casestudy__slider--type2 casestudy__slider--event-pro--type2"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide" data-slick-index="0" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/event-pro/1920/slide6.jpg" src="assets/front/img/projects/event-pro/slide6.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/event-pro/1920/slide7.jpg" src="assets/front/img/projects/event-pro/slide7.jpg" alt=""> </div><div class="item slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/event-pro/1920/slide8.jpg" src="assets/front/img/projects/event-pro/slide8.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="" aria-hidden="true"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li><li aria-hidden="false" class="slick-active"><button type="button" data-role="none">3</button></li></ul></div> </section> <footer class="footer footer--casestudies footer--event-pro"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div data-sticky-wrapper="" class="page page__casestudy casestudy--networx" data-tab="networx" data-wrapper="casestudies"> <section class="page-section casestudy__top casestudy__top--networx pattern-overlay"> <div class="casestudy__overlay casestudy__overlay--networx"></div> </section> <section class="page-section casestudy__details casestudy__details--networx"> <div class="casestudy__title casestudy__title--networx"> <div class="shell shell--columns"> <h1 class="networx">Networx</h1> <h2 class="networx">Social application</h2> <div class="scroll-arrow"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-vertical"></use></svg> </div> </div> </div> <div class="casestudy__info__wrapper accordeon-opacity-0"> <div class="casestudy__info casestudy__info--networx"> <div class="shell shell--columns shell--spacing"> <h2 class="space networx">Connecting Users with a Whole New World of Possibilities</h2> <h6 class="networx">About</h6> <div class="casestudy__info__cols-wrapper"> <div class="casestudy__info__col casestudy__info__col--cnt"> <p>Whether you're at work, in the gym or even discovering a new town! How much do you really know about the people around you? </p> <p>Networx is a social network born from everyone's need to go outside and meet like-minded individuals, share ideas and inspire each other. The user's location serves are the common ground for this purpose.</p> <p>This way the user can discover meet-ups, places and events near and far where they can feel acknowledged and welcomed.</p> <p>Using the innovative search with advanced filters such as clientele, capacity and events calendars, the app can narrow down the results even for the most exquisite taste. Feeling left out? Still? We have thought of this, too.</p> <p> Every user has the ability to create their own events and invite their friends or people with similar interests. Tools like timeline, photos and conversations help keeping track of user's friends and favourite places. Feeling shy? Just announce your arrival and let others come to you. Pretty simple, right?</p> </div> <div class="casestudy__info__col casestudy__info__col--obj"> <div class="objectives"> <h6 class="networx">Deliverables:</h6> <ul class="obj__list"> <li>Concept design</li> <li>App UI/UX Design</li> <li>Web UI/UX Design </li> <li>App Development /iOS & Android/</li> <li>Web Development</li> <li>Social Media Campaigns</li> <li>Video Development</li> <li>Video Production & Post-Production</li> </ul> </div> </div> </div> </div> </div> </div> </section> <section class="page-section casestudy__preview casestudy__preview--networx"> <img data-src="assets/front/img/projects/networx/1920/slide1.jpg" src="assets/front/img/projects/networx/slide1.jpg" alt=""> </section> <section class="page-section casestudy__slider casestudy__slider--networx"> <img data-src="assets/front/img/projects/networx/1920/slide2.jpg" src="assets/front/img/projects/networx/slide2.jpg" alt=""> <img data-src="assets/front/img/projects/networx/1920/slide3.jpg" src="assets/front/img/projects/networx/slide3.jpg" alt=""> <img src="assets/front/img/projects/networx/slide4.jpg" alt=""> <img data-src="assets/front/img/projects/networx/1920/slide5.jpg" src="assets/front/img/projects/networx/slide5.jpg" alt=""> <img data-src="assets/front/img/projects/networx/1920/slide6.jpg" src="assets/front/img/projects/networx/slide6.jpg" alt=""> <img data-src="assets/front/img/projects/networx/1920/slide7.jpg" src="assets/front/img/projects/networx/slide7.jpg" alt=""> <img data-src="assets/front/img/projects/networx/1920/slide8.jpg" src="assets/front/img/projects/networx/slide8.jpg" alt=""> <img data-src="assets/front/img/projects/networx/1920/slide9.jpg" src="assets/front/img/projects/networx/slide9.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--networx"> <img data-src="assets/front/img/projects/networx/1920/slide10.jpg" src="assets/front/img/projects/networx/slide10.jpg" alt=""> </section> <footer class="footer footer--casestudies footer--networx"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div data-sticky-wrapper="" class="page page__casestudy casestudy--bob-marley" data-tab="bob-marley" data-wrapper="casestudies"> <section class="page-section casestudy__top casestudy__top--bob-marley"> <div class="casestudy__overlay casestudy__overlay--bob-marley"></div> </section> <section class="page-section casestudy__details casestudy__details--bob-marley"> <div class="casestudy__title casestudy__title--bob-marley"> <div class="shell shell--columns"> <h1 class="bob-marley">bobmarley.com</h1> <h2 class="bob-marley">campaign design</h2> <div class="scroll-arrow"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-vertical"></use></svg> </div> </div> </div> <div class="casestudy__info__wrapper accordeon-opacity-0"> <div class="casestudy__info casestudy__info--bob-marley"> <div class="shell shell--columns shell--spacing"> <h2 class="space bob-marley">A Message of Love and Harmony, Updated for the <span>Digital Age</span></h2> <h6 class="bob-marley">About</h6> <div class="casestudy__info__cols-wrapper"> <div class="casestudy__info__col casestudy__info__col--cnt"> <p>Bob Marley's legacy lives on – through his children, through his family, and through the #Share1Love campaign on BobMarley.com.</p> <p>The campaign looks to raise awareness of Charity: Water, a non-profit organisation who work hard to bring safe, clean drinking water to at-risk communities in the developing world. Users are encouraged to record, upload and share their own videos to the site, and to their social media feeds as well. The site runs a Videoo plug-in making it easy to share streaming video content online – and in return for the messages of support, Videoo pledges to donate $1 to Charity: Water for every video uploaded.</p> <p>It's no secret that Bob Marley was a charitable soul, an ambassador of love. At BobMarley.com his kindness lives on, carried in the hearts of his fans, his supporters, and other charitable souls the world over. Through the #Share1Love campaign, the site has developed an effective, media-savvy approach to raising charity funds. It uses intelligent video uploaders set in a slick, streamlined site, and combined with all the convenience of a fully social media integrated platform.</p> <p>In creating the user interface, we looked for effective, robust solutions that would make the platform possible... while remaining simple enough that they wouldn't get in the way of the core message. We utilised responsive design, and extensive front-end development in creating a page for powering the Share1Love campaign. Engaging written content and search engine optimisation played a role too, in ensuring the site would get seen by as many people as possible. (?)</p> <p>XShare1Love already has some big names onboard – names such as Ziggy Marley, Richard Branson – and now, with your support too, this positive message stands to reach more people still. So tune in, connect, upload and share... Share1Love with the world, and help raise awareness for the needs of those who lack a voice of their own.</p> </div> <div class="casestudy__info__col casestudy__info__col--obj"> <div class="objectives"> <h6 class="bob-marley">Deliverables:</h6> <ul class="obj__list"> <li>Concept Development</li> <li>Graphic Design</li> <li>UI/UX Design</li> <li>Front End Development</li> <li>Mobile App Design</li> </ul> </div> <div class="obj__row"> <a href="http://www.bobmarley.com/share1love/" target="_blank" class="btn btn--casestudy btn--bob-marley">Visit site</a> </div> </div> </div> </div> </div> </div> </section> <section class="page-section casestudy__preview casestudy__preview--bob-marley"> <img data-src="assets/front/img/projects/bob-marley/1920/bg-content.jpg" src="assets/front/img/projects/bob-marley/bg-content.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--bob-marley"> <img data-src="assets/front/img/projects/bob-marley/1920/bg-content2.jpg" src="assets/front/img/projects/bob-marley/bg-content2.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--bob-marley"> <img data-src="assets/front/img/projects/bob-marley/1920/bg-content3.jpg" src="assets/front/img/projects/bob-marley/bg-content3.jpg" alt=""> </section> <section class="page-section casestudy__slider casestudy__slider--bob-marley"> <img src="assets/front/img/projects/bob-marley/bg-content4.jpg" alt=""> <div class="videoSlider owl-carousel owl-theme" style="opacity: 0; display: block;"> <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 600px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-100px, 0px, 0px);"><div class="owl-item" style="width: 100px;"><div class="item"> <div class="video"> <img class="play" data-src="assets/front/img/projects/bob-marley/1920/video1.png" src="assets/front/img/projects/bob-marley/video1.png" alt=""> <video width="100%" height="100%" controls="controls"> <source src="https://com.videoo.clipsout.s3.amazonaws.com/5501c778-0cd0-4614-873c-3abc26c366fe.mp4" type="video/mp4"> </video> </div> <h2>Watch <span>Ziggy Marley</span><br> #share1love</h2> </div></div><div class="owl-item" style="width: 100px;"><div class="item"> <div class="video"> <img class="play" data-src="assets/front/img/projects/bob-marley/1920/video2.png" src="assets/front/img/projects/bob-marley/video2.png" alt=""> <video width="99.8" height="100" controls="controls"> <source src="https://com.videoo.clipsout.s3.amazonaws.com/55157bb8-e470-4b70-834e-035a0a00001d.mp4" type="video/mp4"> </video> </div> <h2>Watch <span>Richard Branson</span><br> #share1love</h2> </div></div><div class="owl-item" style="width: 100px;"><div class="item"> <div class="video"> <img class="play" data-src="assets/front/img/projects/bob-marley/1920/video3.png" src="assets/front/img/projects/bob-marley/video3.png" alt=""> <video width="99.8" height="100" controls="controls"> <source src="https://com.videoo.clipsout.s3.amazonaws.com/5501c7a7-128c-4ed8-992e-3abc26c366fe.mp4" type="video/mp4"> </video> </div> <h2>Watch <span>Jason Mraz</span><br> #share1love</h2> </div></div></div></div> <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="owl-next"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div></div></div></div> </section> <section class="page-section casestudy__preview casestudy__preview--bob-marley"> <img data-src="assets/front/img/projects/bob-marley/1920/bg-content5.jpg" src="assets/front/img/projects/bob-marley/bg-content5.jpg" alt=""> </section> <section class="page-section casestudy__slider casestudy__slider--bob-marley-device"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide" data-slick-index="0" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/bob-marley/1920/device-slider.jpg" src="assets/front/img/projects/bob-marley/device-slider.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/bob-marley/1920/device-slider2.jpg" src="assets/front/img/projects/bob-marley/device-slider2.jpg" alt=""> </div><div class="item slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/bob-marley/1920/device-slider3.jpg" src="assets/front/img/projects/bob-marley/device-slider3.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="" aria-hidden="true"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li><li aria-hidden="false" class="slick-active"><button type="button" data-role="none">3</button></li></ul></div> </section> <footer class="footer footer--casestudies footer--bob-marley"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div data-sticky-wrapper="" class="page page__casestudy casestudy--rich-beach" data-tab="rich-beach" data-wrapper="casestudies"> <section class="page-section casestudy__top casestudy__top--rich-beach pattern-overlay"> <div class="casestudy__overlay casestudy__overlay--rich-beach"></div> </section> <section class="page-section casestudy__details casestudy__details--rich-beach"> <div class="casestudy__title casestudy__title--rich-beach"> <div class="shell shell--columns"> <h1 class="rich-beach">Rich beach</h1> <h2 class="rich-beach">Application and Branding</h2> <div class="scroll-arrow"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-vertical"></use></svg> </div> </div> </div> <div class="casestudy__info__wrapper accordeon-opacity-0"> <div class="casestudy__info casestudy__info--rich-beach"> <div class="shell shell--columns shell--spacing"> <h2 class="space rich-beach">Rich Beach is a slick new app that brings users together from around the world. </h2> <h6 class="rich-beach">About</h6> <div class="casestudy__info__cols-wrapper"> <div class="casestudy__info__col casestudy__info__col--cnt"> <p>Our mission was to create an interface that would be easy to use, while also conveying a sense of purpose – it had to be both functional and flashy, a sophisticated app with a satisfying user experience.</p> <p>Our work on Rich Beach began at the software architecture stage. Meticulous planning went into the layout of screens, the journeys that different users would take through the app. From the initial splash screen, we sculpted a series of data-form screens… which took the user through the simplified sign-up and log-in processes.</p> <p>After creating an effective logo for the app – and choosing the defining colours for the brand – we went ahead and applied these themes throughout the user experience. Screen layouts and colours have all been carefully although always with an emphasis on creating a clean and straightforward interface.</p> <p>We built a great deal of functionality into the Rich Beach app, as well: subscription screens and secure card payments, a personal messaging system, picture galleries, and rich, multi-dimensional user profiles. All of that was brought together with a discreet-but-effective navigation system, designed for smooth and simple use of all the app’s features.</p> <p>The result? A stylish and sophisticated product, that offers a good range of different features… while maintaining a primary focus on users, their pictures and their profiles.</p> </div> <div class="casestudy__info__col casestudy__info__col--obj"> <div class="objectives"> <h6 class="rich-beach">Deliverables:</h6> <ul class="obj__list"> <li>Concept Development</li> <li>Logo Design</li> <li>Branding</li> <li>App Icon Design</li> <li>Mobile App</li> <li>UI/UX Design</li> <li>Social Media Branding</li> </ul> </div> <div class="obj__row"> <span class="btn btn--casestudy btn--app-store btn--rich-beach"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-iphone-btn-icon"></use></svg> <strong> <small>Coming soon on the</small> App Store </strong> </span> </div> </div> </div> </div> </div> </div> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide1.jpg" src="assets/front/img/projects/rich-beach/slide1.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide2.jpg" src="assets/front/img/projects/rich-beach/slide2.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide3.jpg" src="assets/front/img/projects/rich-beach/slide3.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide4.jpg" src="assets/front/img/projects/rich-beach/slide4.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide5.jpg" src="assets/front/img/projects/rich-beach/slide5.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide6.jpg" src="assets/front/img/projects/rich-beach/slide6.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide7.jpg" src="assets/front/img/projects/rich-beach/slide7.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide8.jpg" src="assets/front/img/projects/rich-beach/slide8.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide9.jpg" src="assets/front/img/projects/rich-beach/slide9.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide10.jpg" src="assets/front/img/projects/rich-beach/slide10.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--rich-beach"> <img data-src="assets/front/img/projects/rich-beach/1920/slide11.jpg" src="assets/front/img/projects/rich-beach/slide11.jpg" alt=""> </section> <footer class="footer footer--casestudies footer--rich-beach"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div data-sticky-wrapper="" class="page page__casestudy casestudy--inseller" data-tab="inseller" data-wrapper="casestudies" style="overflow: auto;"> <section class="page-section casestudy__top casestudy__top--inseller pattern-overlay" style="transform: translate3d(0px, 0px, 0px);"> <div class="casestudy__overlay casestudy__overlay--inseller" style="opacity: 0;"></div> </section> <section class="page-section casestudy__details casestudy__details--inseller"> <div class="casestudy__title casestudy__title--inseller"> <div class="shell shell--columns"> <h1 class="inseller">Inseller</h1> <h2 class="inseller">Online luxury shop</h2> <div class="scroll-arrow"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-vertical"></use></svg> </div> </div> </div> <div class="casestudy__info__wrapper accordeon-opacity-0"> <div class="casestudy__info casestudy__info--inseller"> <div class="shell shell--columns shell--spacing"> <h2 class="space inseller">THE TOP DESTINATION FOR BUYING & SELLING NEW AND PRE-LOVED AUTHENTIC LUXURY</h2> <h6 class="inseller">About</h6> <div class="casestudy__info__cols-wrapper"> <div class="casestudy__info__col casestudy__info__col--cnt" style="height: 697px;"> <p>Inseller Luxury Shopping offers buyers exclusive access to some of the top pre-owned fashion items on the planet. No matter whether you’re in the market for handbags, designer shoes, jewelry or fashion accessories, Dubai’s Inseller Luxury Shopping cuts out the middle-man, allowing users to enjoy some of the best products – and some of the best deals – in the fashion industry.</p> <p>From Louboutins to authentic Celine products, Inseller offers unparalleled access to premier brands. Users are able to enjoy a 100% authenticity guarantee on all items, with accurate, detailed listings to ensure complete buying satisfaction.</p> <p>In creating the perfect platform for Inseller, we knew that style was going to be important. The site’s users would have a taste for quality, and so we put a lot of thought into building an immersive and rich environment which might do justice to some of the finest brands in fashion.</p> <p>In addition to slick visuals, it was crucial that this selling platform featured all the security and control of the leading ecommerce sites. We added a whole range of features to enable smooth and secure transactions, from watertight checkouts and payment systems through to the presentation of authentication guarantees… and of course, space for detailed and thorough listings backed by glossy, hi-resolution images of items.</p> </div> <div class="casestudy__info__col casestudy__info__col--obj"> <div class="objectives"> <h6 class="inseller">Deliverables:</h6> <ul class="obj__list"> <li>Concept Design</li> <li>Logo Design</li> <li>Branding</li> <li>Web UI/UX Design</li> <li>Mobile App Design</li> <li>Social Media Branding</li> </ul> </div> </div> </div> </div> </div> </div> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide1.jpg" src="assets/front/img/projects/inseller/slide1.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide2.jpg" src="assets/front/img/projects/inseller/slide2.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide3.jpg" src="assets/front/img/projects/inseller/slide3.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide4.jpg" src="assets/front/img/projects/inseller/slide4.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide5.jpg" src="assets/front/img/projects/inseller/slide5.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide6.jpg" src="assets/front/img/projects/inseller/slide6.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide7.jpg" src="assets/front/img/projects/inseller/slide7.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide8.jpg" src="assets/front/img/projects/inseller/slide8.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide9.jpg" src="assets/front/img/projects/inseller/slide9.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide10.jpg" src="assets/front/img/projects/inseller/slide10.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide11.jpg" src="assets/front/img/projects/inseller/slide11.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide12.jpg" src="assets/front/img/projects/inseller/slide12.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide13.jpg" src="assets/front/img/projects/inseller/slide13.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide14.jpg" src="assets/front/img/projects/inseller/slide14.jpg" alt=""> </section> <section class="page-section casestudy__preview casestudy__preview--inseller"> <img data-src="assets/front/img/projects/inseller/1920/slide15.jpg" src="assets/front/img/projects/inseller/slide15.jpg" alt=""> </section> <footer class="footer footer--casestudies footer--inseller"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div data-sticky-wrapper="" class="page page__casestudy casestudy--svg-devices" data-tab="svg-devices" data-wrapper="casestudies"> <section class="page-section casestudy__top casestudy__top--svg-devices pattern-overlay"> <div class="casestudy__overlay casestudy__overlay--svg-devices"></div> </section> <section class="page-section casestudy__details casestudy__details--svg-devices"> <div class="casestudy__title casestudy__title--svg-devices"> <div class="shell shell--columns"> <h1 class="svg-devices">Ready to use</h1> <h2 class="svg-devices">FLAT & REAL DEVICES</h2> <div class="scroll-arrow"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow-vertical"></use></svg> </div> </div> </div> <div class="casestudy__info__wrapper accordeon-opacity-0"> <div class="casestudy__info casestudy__info--svg-devices"> <div class="shell shell--columns shell--spacing"> <h2 class="space svg-devices">AN INTRODUCTION TO SCALABLE VECTOR GRAPHICS</h2> <h6 class="svg-devices">About</h6> <div class="casestudy__info__cols-wrapper"> <div class="casestudy__info__col casestudy__info__col--cnt"> <p>Vector graphics have been around for a long time in the print media, and can also be applied to great effect on the web – where they take the form of Scalable Vector Graphics, or SVG files.</p> <p>When it comes to serving up graphics on the web, the SVG format offers a number of notable advantages over the standard Bitmap approach. Here are just a few reasons to upgrade your graphics to SVG:</p> <p><strong>RESOLUTION INDEPENDENCE</strong>Bitmap and other rasterised graphics are "resolution dependent" – this means images are built from pixels, and have a tendency to distort and pixelate as you zoom in. Vector graphics don't have that problem. SVG works independently of resolution, so that these mathematically expressed graphics will maintain their high quality at any zoom level. As such, it's the perfect format for Retina Displaymore, as you track interactions from your online audience.</p> <p><strong>FAST RETRIEVAL</strong>With standard image formats, an HTML document will send the web browser elsewhere to retrieve embedded graphics files. Not so with SVG, however. SVG graphics can be embedded directly into the HTML, using the special SVG tag… which results in better website performance, and faster loading times.</p> <p><strong>STYLISTIC CONTROL</strong>Another benefit of a directly embedded SVG tag, is that it affords us greater control over the way those graphics appear on the screen. We'll be able to modify graphics the same way we work with regular HTML tags – customising backgrounds, opacity, borders and more, thanks to just a few tweaks of the CSS or JavaScript.</p> <p><strong>ANIMATION & FINE TUNING</strong>We can even animate an SVG object, bringing a little life and movement to your web presentation! SVG can be controlled with an animation element, or through JavaScript Libraries such as jQuery. It's also possible to further edit the SVG object using regular text code editors, Adobe Illustrator, or even with freeware graphic applications such as Inkscape.</p> </div> <div class="casestudy__info__col casestudy__info__col--obj"> <div class="objectives"> <h6 class="svg-devices">Deliverables:</h6> <ul class="obj__list"> <li>iPhone 4, 4S</li> <li>iPhone 5, 5C, 5S</li> <li>iPad Mini</li> <li>iPad Air</li> <li>Macbook Air</li> <li>Macbook Pro</li> <li>iMac 27</li> <li>HTC One</li> <li>Nexus 5</li> <li>Nexus 7</li> <li>Nexus 10</li> <li>Nokia Lumia</li> <li>Samsung S4</li> <li>Samsung S5</li> <li>Samsung Note 3</li> </ul> </div> <div class="obj__row"> <a href="http://dtailstudio.com/downloads-free/MobileDevices.zip" target="_blank" class="btn btn--casestudy btn--svg-devices">download</a> </div> </div> </div> </div> </div> </div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider1-4s.jpg" src="assets/front/img/projects/svg-devices/slider1-4s.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider1-4s1.jpg" src="assets/front/img/projects/svg-devices/slider1-4s1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider2-5c.jpg" src="assets/front/img/projects/svg-devices/slider2-5c.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider2-5c1.jpg" src="assets/front/img/projects/svg-devices/slider2-5c1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider3-5s.jpg" src="assets/front/img/projects/svg-devices/slider3-5s.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider3-5s1.jpg" src="assets/front/img/projects/svg-devices/slider3-5s1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider4-ipad-air.jpg" src="assets/front/img/projects/svg-devices/slider4-ipad-air.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider4-ipad-air1.jpg" src="assets/front/img/projects/svg-devices/slider4-ipad-air1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider5-ipad-mini.jpg" src="assets/front/img/projects/svg-devices/slider5-ipad-mini.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider5-ipad-mini1.jpg" src="assets/front/img/projects/svg-devices/slider5-ipad-mini1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider6-air.jpg" src="assets/front/img/projects/svg-devices/slider6-air.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider6-air1.jpg" src="assets/front/img/projects/svg-devices/slider6-air1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider7-pro.jpg" src="assets/front/img/projects/svg-devices/slider7-pro.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider7-pro1.jpg" src="assets/front/img/projects/svg-devices/slider7-pro1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider8-imac.jpg" src="assets/front/img/projects/svg-devices/slider8-imac.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider8-imac1.jpg" src="assets/front/img/projects/svg-devices/slider8-imac1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider9-htc-one.jpg" src="assets/front/img/projects/svg-devices/slider9-htc-one.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider9-htc-one1.jpg" src="assets/front/img/projects/svg-devices/slider9-htc-one1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider10-nexus.jpg" src="assets/front/img/projects/svg-devices/slider10-nexus.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider10-nexus1.jpg" src="assets/front/img/projects/svg-devices/slider10-nexus1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider11-note3.jpg" src="assets/front/img/projects/svg-devices/slider11-note3.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider11-note31.jpg" src="assets/front/img/projects/svg-devices/slider11-note31.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider12-s4s5.jpg" src="assets/front/img/projects/svg-devices/slider12-s4s5.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider12-s4s51.jpg" src="assets/front/img/projects/svg-devices/slider12-s4s51.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <section class="page-section casestudy__slider casestudy__slider--svg-devices"> <div class="visuals-carousel slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="item slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider13-lumia.jpg" src="assets/front/img/projects/svg-devices/slider13-lumia.jpg" alt=""> </div><div class="item slick-slide" data-slick-index="1" aria-hidden="true" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 800; opacity: 0;"> <img data-src="assets/front/img/projects/svg-devices/1920/slider13-lumia1.jpg" src="assets/front/img/projects/svg-devices/slider13-lumia1.jpg" alt=""> </div></div></div> <div class="slick-prev" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><div class="slick-next" style="display: flex;"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg></div><ul class="slick-dots" style="display: block;"><li class="slick-active" aria-hidden="false"><button type="button" data-role="none">1</button></li><li aria-hidden="true" class=""><button type="button" data-role="none">2</button></li></ul></div> </section> <footer class="footer footer--casestudies footer--svg-devices pattern-overlay"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <h2 class="biggest">Are we a good match?</h2> <h3 class="bigger">say hi and find out</h3> </div> <div class="box footer__box"> <a href="#!pages:say-hi" data-tabber="pages" data-tab-link="say-hi" class="btn-hi btn-hi--big"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bubble"></use></svg> <span>Say hi</span> </a> </div> </div> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div id="careers" class="page" data-tab="careers"> <section class="page-section page-section--careers pattern-overlay"> <div class="shell shell--projects"> <h1 class="big title-dash title-dash--small">CAREERS</h1> <div class="careers-list"> <a href="#!pages:designer" class="careers-list__item pattern-overlay" data-tabber="pages" data-tab-link="designer"> <h3><span>UI/ux</span><span>designer</span></h3> </a> <a href="#!pages:php-developer" class="careers-list__item pattern-overlay" data-tabber="pages" data-tab-link="php-developer"> <h3><span>php</span> <span>developer</span></h3> </a> <a href="#!pages:front-developer" class="careers-list__item pattern-overlay" data-tabber="pages" data-tab-link="front-developer"> <h3><span>front end</span> <span>developer</span></h3> </a> <a href="#!pages:ia-trainee" class="careers-list__item pattern-overlay" data-tabber="pages" data-tab-link="ia-trainee"> <h3><span>UI/IA</span> <span>Trainee</span></h3> </a> </div> </div> </section> <footer class="footer footer--projects"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </div> <div id="contact" class="page page--contact" data-tab="say-hi"> <section class="page-section page-section--contact"> <div class="contacts-col contacts-col--ca pattern-overlay"> <div class="outer_face clock ca-clock"> <div class="marker oneseven"></div> <div class="marker twoeight"></div> <div class="marker fourten"></div> <div class="marker fiveeleven"></div> <div class="inner_face" data-content="AM"> <div class="hand hour" style="transform: rotate(10deg);"></div> <div class="hand minute" style="transform: rotate(120deg);"></div> <div class="hand second" style="transform: rotate(351.804deg);"></div> </div> </div> <h2 class="big title-dash title-dash--position2 title-dash--small">CA</h2> <p><a href="mailto:hi-ca@dtailstudio.com">hi-ca@dtailstudio.com</a></p> </div> <div class="contacts-col contacts-col--var pattern-overlay"> <div class="outer_face clock var-clock"> <div class="marker oneseven"></div> <div class="marker twoeight"></div> <div class="marker fourten"></div> <div class="marker fiveeleven"></div> <div class="inner_face" data-content="PM"> <div class="hand hour" style="transform: rotate(460deg);"></div> <div class="hand minute" style="transform: rotate(120deg);"></div> <div class="hand second" style="transform: rotate(351.804deg);"></div> </div> </div> <h2 class="big title-dash title-dash--position2 title-dash--small">VAR</h2> <p><a href="mailto:hi@dtailstudio.com">hi@dtailstudio.com</a></p> </div> <footer class="footer footer--small footer--contact"> <div class="shell footer__shell"> <div class="row footer__row"> <div class="box footer__box"> <p>© 2015 Dtail Studio Ltd.</p> </div> <div class="box footer__box box-social"> <a href="https://www.facebook.com/DtailStudio" target="_blank" class="box-social__link"><svg class="box-social__link--facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-facebook"></use></svg></a> <a href="https://twitter.com/TheDtail" target="_blank" class="box-social__link"><svg class="box-social__link--twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-twitter"></use></svg></a> <a href="https://plus.google.com/103656431672394792565/" target="_blank" class="box-social__link"><svg class="box-social__link--google"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-google"></use></svg></a> <a href="https://dribbble.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--dribbble"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-dribbble"></use></svg></a> <a href="https://www.behance.net/dtail" target="_blank" class="box-social__link"><svg class="box-social__link--behance"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-behance"></use></svg></a> <a href="https://instagram.com/dtailstudio" target="_blank" class="box-social__link"><svg class="box-social__link--instagram"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-instagram"></use></svg></a> </div> </div> </div> </footer> </section> </div> </div> </div> <script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script src="https://dtailstudio.com/assets/front/js/scripts.js"></script> <!-- SCRIPTS --> <script> $(window).on('hashchange', function() { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40155452-1', 'auto'); ga('send', 'pageview'); }); </script> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src="https://dtailstudio.com/assets/front/js/scripts.js"></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script > $(window).on('hashchange', function() { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40155452-1', 'auto'); ga('send', 'pageview'); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Dashboard React
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: