@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@import url('https://fonts.googleapis.com/css?family=Prociono');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Vidaloka');
@import url('https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield');
@import url('https://fonts.googleapis.com/css?family=Rozha+One');

*, html { margin: 0; padding: 0; overflow: hidden; font-family: 'Lato', sans-serif; }
body { width: 100%; height: 100%; overflow: auto; margin: 0; -webkit-overflow-scrolling: touch; }
#canvas { position: absolute; left: 0; top: 0; z-index: 1; }
#loader img { position: absolute; top: 50%; left: 50%; z-index: 31; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10vw; opacity: 0; }
#logo { position: absolute; top: 4vh; left: 5vw; height: 25px; width: auto; z-index: 5; }
#logo img { height: 100%; width: auto; }

#menu { position: absolute; width: 100vw; height: 100vh; overflow: hidden; top: -100vh; }

#openMenu { position: absolute; top: 7vh; right: 5vw; width: 70px; height: 70px; z-index: 5; cursor: pointer; }
#openMenu .hamburger { position: absolute; width: 40px; height: 36px; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#openMenu .circle { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#openMenu .circle svg { z-index: 1; fill: transparent; stroke-width: 2px; stroke: #fff; stroke-dasharray: 207.44511px; stroke-dashoffset: 207.44511px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#openMenu.open .circle svg { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
#openMenu .hamburger span { display: block; width: 40px; height: 2px; background-color: #fff; position: absolute; left: 0; }
#openMenu .hamburger span:first-child { top: 8px; }
#openMenu .hamburger span:nth-child(2) { top: 18px }
#openMenu .hamburger span:last-child { top: 28px; }

#sectionNav { position: absolute; top: 50%; left: -5vw; width: 31px; height: 220px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; }
#navTitle { position: absolute; top: 50%; left: calc(5vw - 8px); color: #fff; z-index: 5; -ms-transform: translateY(-150px); -webkit-transform: translateY(-150px); transform: translateY(-150px); text-transform: uppercase; font-size:10px; letter-spacing:2px; text-indent:1px; }
#viewAll { position: absolute; top: calc(4vh + 5px); right: 5vw; color: #fff; z-index: 5; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; text-indent:1px; cursor: pointer; }
#openMag { position: absolute; top: calc(4vh + 5px); right: 15vw; color: #fff; z-index: 5; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; text-indent:1px; cursor: pointer; }
.open-mag-btn{
 color: #fff; 

}

#sectionNav .circle { cursor: pointer; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }

#socialMag { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: transparent; visibility: hidden; opacity: 0; z-index: 4; padding: 10vh 5vw; -ms-transform: scale(0.2); -webkit-transform: scale(0.2); transform: scale(0.2); }
#socialMag .left, #socialMag .right { position: relative; width: 50%; float: left; height: auto; }
#socialMag .right { padding-top: 20vh; }
#socialMag .socialItem { position: relative; width: 70%; height: auto; margin: 0 15% 20vh 15%; }
#socialMag .socialItem .socialDate { margin-bottom: 1vh; }
#socialMag .socialItem .socialDate span { color: #fff; font-size: 18px; }
#socialMag .socialItem .socialImage img { width: 100%; height: auto; display: block; }
#socialMag .socialItem .socialText { margin-top: 1vh; }
#socialMag .socialItem .socialText p { color: #fff; font-size: 16px; }
#socialMag .socialItem .socialText a  { color: #fff; text-decoration: none; text-transform: uppercase; }

@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to   {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to   {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to   {-o-transform: rotate(360deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to   {transform: rotate(360deg);}
}

.section.active{cursor: initial;}
.section{cursor:pointer;}

#sectionNav .circle[data-order="1"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .circle[data-order="1"] .normal, #sectionNav .circle[data-order="1"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .circle[data-order="1"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="1"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="1"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#sectionNav .line[data-parent="1"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .line[data-parent="1"] .normal, #sectionNav .line[data-parent="1"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .line[data-parent="1"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .line[data-parent="1"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .line[data-parent="1"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#sectionNav .circle[data-order="2"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .circle[data-order="2"] .normal, #sectionNav .circle[data-order="2"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .circle[data-order="2"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="2"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="2"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#sectionNav .line[data-parent="2"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .line[data-parent="2"] .normal, #sectionNav .line[data-parent="2"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .line[data-parent="2"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .line[data-parent="2"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .line[data-parent="2"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#sectionNav .circle[data-order="3"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .circle[data-order="3"] .normal, #sectionNav .circle[data-order="3"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .circle[data-order="3"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="3"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="3"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#sectionNav .line[data-parent="3"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .line[data-parent="3"] .normal, #sectionNav .line[data-parent="3"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .line[data-parent="3"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .line[data-parent="3"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .line[data-parent="3"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#sectionNav .circle[data-order="4"] { position: relative; width: 31px; height: 31px; float: left; }
#sectionNav .circle[data-order="4"] .normal, #sectionNav .circle[data-order="4"] .hover { position: absolute; top: 0; left: 0; width: 31px; height: 31px; }
#sectionNav .circle[data-order="4"] .normal svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 1.963,1.963; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="4"] .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 94.24778px; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }
#sectionNav .circle[data-order="4"].active .hover svg { z-index: 1; fill: transparent; stroke-width: 1px; stroke: #fff; stroke-dasharray: 94.24778px, 94.24778px; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5; transition: stroke-dashoffset 0.5s; transition-timing-function: ease-in-out; }

#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; z-index: 20; }

#container2 { position: relative; width: 100vw; height: 100vh; z-index: 2;  overflow: hidden; white-space: nowrap; }
#content2 { -webkit-perspective: 1000px; perspective: 1000px; -moz-perspective: 1000px; position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#content2 .section { position: absolute; top: 0; height: 100vh; width: 50vw; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.5; }
#content2 .section:first-child { left: 25vw; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
#content2 .section .item { position: relative; height: 60vh; width: 45vw; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform-style: preserve-3d; overflow: visible; margin: 0 auto; top: 20vh; }
#content2 .section .item .images { position: relative; height: 60vh; width: calc(15vw + 25vh); overflow: visible; }
#content2 .section .item .images img { position: absolute; width: auto; }
#content2 .section[data-order="1"] .item .images img:first-child{left:20vw;}
#content2 .section[data-order="2"] .item .images img:first-child{left:10vw;}
#content2 .section[data-order="3"] .item .images img:first-child{left:7vw !important;top:20vh;}
#content2 .section[data-order="3"] .item .images img:nth-child(2){left:10vw;top:0vh;height:25vh;}
#content2 .section .item .images img:first-child { top: 0; right: 0; height: 25vh; -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }
#content2 .section .item .images img:nth-child(2) { top: 17vh; left: 0; height: 40vh; -ms-transform: translateZ(100px); -webkit-transform: translateZ(100px); transform: translateZ(100px); }
#content2 .section .item .images img:last-child { bottom: 0; left: 10vw; height: 25vh; -ms-transform: translateZ(200px); -webkit-transform: translateZ(200px); transform: translateZ(200px); }
#content2 .section .item .images .sketchOne { top: 0 !important; height: 60vh !important; left: 0 !important; }
#content2 .section .item .images .imgOne { height: 40vh !important; left: 10vw !important; }
#content2 .section .item .title { position: absolute; top: 10vh;  left: 18vw; overflow: visible; }
#content2 .section .item .title h2 { color: #fff; font-size: 8vh; -ms-transform: translateZ(220px); -webkit-transform: translateZ(220px); transform: translateZ(220px); overflow: visible; font-family: 'Rozha One', serif; margin-top:0px; background-color:#FF3399;
}
#content2 .section[data-order="2"] .item .title{left:12vw;}
#content2 .section[data-order="4"] .item .title{left:14vw;}
#content2 .section[data-order="4"] .item .images .sketchOne{left:-5vw;}
#content2 .section .item .text { position: absolute; bottom: 10vh; left: 19vw; width: 25vw; white-space: normal; -ms-transform: translateZ(220px); -webkit-transform: translateZ(220px); transform: translateZ(220px); overflow: visible; }
#content2 .section .item .text p { color: #fff; font-size: 13px; background-color:#000; padding:10px; }
#content2 .section .item .text h3 { color: #fff; }
#content2 .section .item .text h3 a { color: #fff; text-decoration: none; }
#content2 .section.cursore{cursor: pointer;}

#copy { position: absolute; bottom: 30px; left: 5vw; z-index: 31; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing:2px; text-indent:1px; }
#rights { position: absolute; bottom: 30px; right: 5vw; z-index: 31; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing:2px; text-indent:1px; }
#rights a { text-decoration: none; color: #fff; }
iframe{margin-top:150px;}