@font-face 
{
font-family: Encore;
src: url("../fonts/PFEncoreSansPro-Light.otf");
font-weight: normal;
}

@font-face 
{
font-family: Encore;
src: url("../fonts/PFEncoreSansPro-Bold.otf");
font-weight: bold;
}

*
{
-webkit-backface-visibility: hidden;
}

@media (min-width: 1400px) {.container {width: 1370px;}}
@media (min-width: 1500px) {.container {width: 1470px;}}

@keyframes anim-fade-out
{
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes anim-fade-in
{
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes anim-move-in-left
{
0% {margin-left: -100%;}
100% {margin-left: 0%;}
}

@keyframes anim-move-out-left
{
0% {margin-left: 0%;}
100% {margin-left: -100%;}
}

@keyframes anim-move-in-bottom
{
0% {margin-bottom: -150px;}
100% {margin-bottom: 0px;}
}

@keyframes anim-move-out-bottom
{
0% {margin-bottom: 0px;}
100% {margin-bottom: -150px;}
}

@keyframes anim-move-in-top
{
0% {margin-top: -150px;}
100% {margin-top: 0px;}
}

@keyframes anim-move-out-top
{
0% {margin-top: 0px;}
100% {margin-top: -150px;}
}

@keyframes anim-fade-in-up
{
0% {opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px);}
100% {opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);}
}

@keyframes anim-fade-in-down
{
0% {opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px);}
100% {opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);}
}

@keyframes anim-fade-in-side-right
{
0% {opacity: 0; -webkit-transform: translate(30px,0px); -ms-transform: translate(30px,0px); -o-transform: translate(30px,0px); transform: translate(30px,0px);}
100% {opacity: 1; -webkit-transform: translate(0px,0px); -ms-transform: translate(0px,0px); -o-transform: translate(0px,0px); transform: translate(0px,0px);}
}

@keyframes anim-fade-in-side-right-big
{
0% {opacity: 0; -webkit-transform: translate(60px,0px); -ms-transform: translate(60px,0px); -o-transform: translate(60px,0px); transform: translate(60px,0px);}
100% {opacity: 1; -webkit-transform: translate(0px,0px); -ms-transform: translate(0px,0px); -o-transform: translate(0px,0px); transform: translate(0px,0px);}
}

@keyframes anim-logo-splash
{
0% {opacity: 0; margin-left: 40px;}
40% {opacity: 1; margin-left: 0px;}
60% {opacity: 1; margin-left: 0px;}
100% {opacity: 0;margin-left: -40px;}
}

@keyframes anim-menu-navlogo-splash
{
0% {top: -40px;}
100% {top: 20px;}
}

@keyframes anim-menu-navlogo-splash-xs
{
0% {top: -40px;}
100% {top: 10px;}
}

@keyframes anim-menu-handle-splash-xs
{
0% {right: -40px;}
100% {right: 20px;}
}

@keyframes anim-menu-splash
{
0% {left: 35px;}
100% { left: 0px;}
}

@keyframes anim-shake
{
0% {margin-left: 0px;}
25% {margin-left: -10px;}
50% {margin-left: 0px;}
75% {margin-left: 10px;}
100% { margin-left: 0px;}
}


body
{
background-color: #ffffff;
color: #000000;
font-family: "Encore", Arial, sans-serif;
font-size: 20px;
line-height: 1;
width: 100%;
height: 100%;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

body.home {}
body.project-detail {}

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

	body
	{
	font-size: 19px;
	}

}

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

	body
	{
	font-size: 18px;
	}

}

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

	body
	{
	font-size: 16px;
	}

}

body.portrait .landscape
{
display: none;
}

body.landscape .portrait
{
display: none;
}

#wrap
{
width: 100%;
height: 100%;
overflow: hidden;
}

.container
{
padding-left: 0px;
padding-right: 0px;
}

.container-fluid
{
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}

h1, h2, h3, h4
{
font-weight: bold;
font-family: "Encore", Arial, sans-serif;
line-height: 1;
padding: 0px;
margin: 0px;
}

h1
{
font-size: 2.2em;
}

h2
{
font-size: 2.3em;
}

h3
{
font-size: 1.4em;
}

h4
{
font-size: 1.2em;
}


p
{
margin: 0px;
padding: 0px;
}

p + p
{
margin-top: 0.5em;
}

a 
{
color: #000000;
text-decoration: none;
line-height: 1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}

a:hover, a:focus 
{
text-decoration: none;
color: #000000;
}

a:active
{
opacity: 0.5;
}

a:focus
{
outline: none;
}

section.inverted a {color: #ffffff;}
section.inverted a:hover {color: #ffffff;}
section.inverted a:focus {color: #ffffff;}

button,button:hover,button:focus,button:active
{
border: none;
outline: none !important;
box-shadow: none;
background-color: transparent;
border-radius: 0px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

button:hover
{
cursor: pointer;
}

button:active
{
}

ul
{
padding-left: 1.1em;
list-style-type: disc;
}

ol
{
padding-left: 1.1em;
}

#preload
{
display: none;
}

.animated
{
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

blockquote
{
margin: 0px;
padding: 0px;
border: 0px;
}

.bigger
{
font-size: 1.4em;
font-weight: bold;
}

.small, small
{
font-size: 1em;
}

@media screen and (max-width: 767px) {.xs-show{display: block;} .xs-hide{display: none !important;}}
@media screen and (min-width: 768px) and (max-width: 991px) {.sm-show{display: block;} .sm-hide{display: none !important;}}
@media screen and (min-width: 992px) and (max-width: 1199px) {.md-show{display: block;} .md-hide{display: none !important;}}
@media screen and (min-width: 1200px) {.lg-show{display: block;} .lg-hide{display: none !important;}}

header
{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
width: 100%;
}

header.single
{
mix-blend-mode: difference;
z-index: 9999;
}

article
{
width: 100vw;
overflow-x: hidden;
overflow-y: overlay;
height: 100vh;
position: relative;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}

html.no-touch .snapper, html.touch .snapper
{
scroll-snap-type: y proximity;
}

@media not all and (min-resolution:.001dpcm) {

    html.no-touch .snapper, html.touch .snapper {scroll-snap-type: unset;}
}

html.no-touch .snapper::-webkit-scrollbar, html.touch .snapper::-webkit-scrollbar
{
display: none;
}

html.no-touch .snapper.unsnap, html.touch .snapper.unsnap
{
scroll-snap-type: none;
}

html.no-touch .snapper > *, html.touch .snapper > *
{
scroll-snap-align: start;
}


/*=======================================*/
/*==
/*==  sections
/*==
/*=======================================*/

section
{
position: relative;
z-index: 10;
padding: 0px;
display: block;
}

section.full
{
width: 100%;
width: 100vw;
height: 100vh;
}

section.full.project-section
{
overflow: hidden;
}

section.full > div.container-fluid:first-of-type
{
padding: 0px;
min-width: 100px;
min-height: 100%;
position: relative;
}

section.full.project-section > div.container-fluid:first-of-type
{
height: 100%;
}

section.full > div.container > .row, section.full > div.container-fluid > .row
{
height: 100%;
position: relative;
}

section.full > div.container > .row > .col, section.full > div.container-fluid > .row > .col
{
height: 100%;
position: relative;
padding: 30px;
}

section.full > div.container-fluid > .row
{
margin: 0px;
}

section.full > div.container-fluid > .row > .col-plaintext
{
padding-left: 90px;
padding-right: 120px;
padding-bottom: 90px;
max-width: 1500px;
}

/* section.full.project-section > div.container > .row > .col:first-of-type */
/* { */
/* padding-left: 150px; */
/* } */

/* section.full.project-section > div.container > .row > .col:last-of-type */
/* { */
/* padding-right: 150px; */
/* } */

section.full.fixed
{
position: fixed;
top: 0px; 
left: 0px;
background-color: #ffffff;
height: 100%;
}

section.full.scrollable
{
height: auto;
min-height: 100vh;
max-height: 999999px;
position: absolute;
top: 0px;
}


/*=======================================*/
/*==
/*==  bg
/*==
/*=======================================*/

section.bg
{
z-index: 1;
}

.bgbox
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 1;
z-index: -1;
z-index: 0;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}

.bgbox.inactive
{
opacity: 0;
}

.bgbox .bg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
z-index: -1;
z-index: 0;
}

html.landscape section.bg.bgfull .bgbox.video video
{
width: 100%;
}

html.portrait section.bg.bgfull .bgbox.video video
{
height: 100%;
}

section.bg.bg.bgfull .bgbox.video video
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

section.bg.tiles .bgbox, section.bg.tiles .bgbox.small, section.bg.tiles .bgbox.med, section.bg.tiles .bgbox.big
{
width: 0.05px;
height: 0px;
position: relative;
float: left;
background: rgba(0,0,0,0.3);
}

section.bg.tiles .bgbox.video .bg
{
background-color: black;
overflow: hidden;
}

html.landscape section.bg.tiles .bgbox.video video
{
width: 100%;
}

html.portrait section.bg.tiles .bgbox.video video
{
height: 100%;
}

section.bg.tiles .bgbox.video video
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

section.bg.tiles .bgbox.deselected
{
opacity: 0;
width: 0% !important;
height: 0px !important;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}


section.bg.tiles .bgbox.inacitve
{
opacity: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}

section.bg.tiles .bgbox.active
{
z-index: 99;
opacity: 1;
width: 100%; 
height: 100vh;
-webkit-transition-delay: 0.4s; transition-delay: 0.4s; 
}

section.bg.tiles .bgbox {width: 25%; height: 25vw;}
section.bg.tiles .bgbox.small {width: 25%; height: 25vw;}
section.bg.tiles .bgbox.med {width: 50%; height: 25vw;}
section.bg.tiles .bgbox.big {width: 50%; height: 50vw;}
section.bg.tiles .bgbox.active {width: 100%; height: 100vh;}
section.bg.tiles .bgbox.active h2 {opacity: 0;}

section.bg.tiles .bgbox
{
overflow: hidden;
}

section.bg.tiles .bgbox .bg
{
top: -2%;
left: -2%;
width: 104%;
height: 104%;
z-index: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

section.bg.tiles .bgbox:hover .bg
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

section.bg.tiles .bgbox.active:hover .bg {-webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}
section.bg.tiles .bgbox.active .bg {top: 0%; left: 0%; width: 100%; height: 100%;}


/*=======================================*/
/*==
/*==  menu
/*==
/*=======================================*/

.menu
{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,1);
padding: 40px;
padding-left: 90px;
padding-right: 55px;
position: fixed;
top: 0px;
z-index: 9999;
margin-left: 100%;
-webkit-transition: all 1.2s;
transition: all 1.2s;
}

html.menu-open .menu
{
margin-left: 0%;
}

.menu a
{
color: #ffffff;
}

.menu nav
{
position: absolute;
bottom: 20%;
text-transform: uppercase;
font-weight: normal;
line-height: 1.2;
}

nav ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

nav ul li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

nav.logo
{
position: fixed;
bottom: auto;
top: 20px;
right: 8px;
z-index: 9999;
}

.menubutton
{
display: none;
font-size: 0px;
z-index: 9999;
}

.menu nav.main
{
font-size: 3.5em;
line-height: 1;
font-weight: bold;
}

.menu nav.social
{
left: 22em;
font-size: 1.6em;
}

.menu nav.language
{
bottom: 80vh;
/* top: 40px; */
/* top: 20vh; */
font-weight: bold;
font-size: 1.5em;
}

a.aeraki-logo
{
display: block;
width: 45px;
height: 45px;
font-size: 0px;
}

a.aeraki-logo::before, a.aeraki-logo::after
{
display: block;
content: "";
width: 45px;
height: 45px;
font-size: 0px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}	

a.aeraki-logo::before {background-image: url("../images/aeraki-logo-black.png"); opacity: 1;}
a.aeraki-logo::after {background-image: url("../images/aeraki-logo-white.png"); opacity: 0;}
html.menu-open a.aeraki-logo::after {opacity: 1;}

header.single a.aeraki-logo::before {opacity: 0;}
header.single a.aeraki-logo::after {opacity: 1;}

.menu .handle
{
cursor: pointer;
width: 35px;
height: 40vh;
position: absolute;
top: 30vh;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.menu .handle.black
{
right: 100%;
background-color: black;
background-image: url("../images/burger-white.svg");
background-size: 80% auto;
}

.menu .handle.white
{
right: 0%;
background-color: white;
background-image: url("../images/burger-black.svg");
background-size: 90% auto;
}

.inverted .menu
{
background-color: white;
color: black;
}

.inverted .menu a {color: black;}

.inverted .menu .handle.black {background-color: white; background-image: url("../images/burger-black.svg"); background-size: 90% auto;}
.inverted .menu .handle.white {background-color: black; background-image: url("../images/burger-white.svg"); background-size: 80% auto;}

.menu .handle.white {background-image: url("../images/menux-black.svg");}
.inverted .menu .handle.white {background-image: url("../images/menux-white.svg");}

.inverted a.aeraki-logo::before {background-image: url("../images/aeraki-logo-white.png");}
.inverted a.aeraki-logo::after {background-image: url("../images/aeraki-logo-black.png"); opacity: 0;}

.menu nav:not(.logo) ul li 
{
opacity: 0;
margin-left: 150px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}

html.menu-open .menu nav ul li {opacity: 1; margin-left: 0px;}

html.menu-open .menu nav.language ul li:nth-child(1) {-webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s;}

html.menu-open .menu nav.main ul li:nth-child(1) {-webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s;}
html.menu-open .menu nav.main ul li:nth-child(2) {-webkit-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s;}
html.menu-open .menu nav.main ul li:nth-child(3) {-webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
html.menu-open .menu nav.main ul li:nth-child(4) {-webkit-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s;}
html.menu-open .menu nav.main ul li:nth-child(5) {-webkit-transition-delay: 0.8s; -ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s;}

html.menu-open .menu nav.social ul li:nth-child(1) {-webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s;}
html.menu-open .menu nav.social ul li:nth-child(2) {-webkit-transition-delay: 1.0s; -ms-transition-delay: 1.0s; -o-transition-delay: 1.0s; transition-delay: 1.0s;}
html.menu-open .menu nav.social ul li:nth-child(3) {-webkit-transition-delay: 1.1s; -ms-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s;}
html.menu-open .menu nav.social ul li:nth-child(4) {-webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s;}
html.menu-open .menu nav.social ul li:nth-child(5) {-webkit-transition-delay: 1.3s; -ms-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s;}

.menu nav ul li a.unhover
{
opacity: 0;
}

/*=======================================*/
/*==
/*==  controls
/*==
/*=======================================*/

.projects-controls
{
width: 100%;
padding: 40px;
padding-left: 55px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
}

html.menu-open .projects-controls
{
left: -100%;
}

.projects-controls > div
{
display: inline-block;
vertical-align: text-top;
}

.projects-controls .bg
{
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
/* background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); */
background-color: #ffffff;
opacity: 1;
z-index: -1;
/* z-index: 0; */
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}

.projects-controls .bg.transparent, .projects-controls .bg.permatransparent
{
opacity: 0;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
-webkit-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.projects-controls .bg.opaque
{
opacity: 1;
}

.projects-controls .categories
{
margin-left: 1em;
margin-top: 5px;
}

.projects-controls button
{
font-family: "Times New Roman", serif;
font-size: 0.8em;
text-align: center;
text-shadow: 1px 1px rgba(255,255,255,0.2);
position: relative;
vertical-align: bottom;
margin-right: 10px;
line-height: 1;
}

.projects-controls button > div
{
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.projects-controls button .i
{
font-size: 16px;
line-height: 1;
vertical-align: bottom;
font-style: italic;
font-weight: normal;
opacity: 1;
position: absolute;
bottom: 0px;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: contain;
}

.projects-controls button .n
{
font-size: 14px;
line-height: 1;
vertical-align: bottom;
font-style: normal;
font-weight: bold;
opacity: 0;
font-family: "Encore", Arial, sans-serif;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: contain;
}

@media not all and (min-resolution:.001dpcm) { @media {
	.projects-controls button .n {margin-bottom: -1px;}
}}

.projects-controls button:hover .i, .projects-controls button.active .i {opacity: 0;}
.projects-controls button:hover .n, .projects-controls button.active .n {opacity: 1;}

.projects-controls .mode > button
{
width: 15px;
height: 15px;
font-size: 0px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
opacity: 1;
position: relative;
}


.projects-controls .mode > button::before, .projects-controls .mode > button::after
{
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.projects-controls .mode > button.list::before {background-image: url("../images/mode-list-inactive.svg"); opacity: 1;}
.projects-controls .mode > button.tiles::before {background-image: url("../images/mode-tiles-inactive.svg"); opacity: 1;}

.projects-controls .mode > button.list::after {background-image: url("../images/mode-list-active.svg");}
.projects-controls .mode > button.tiles::after {background-image: url("../images/mode-tiles-active.svg");}

html.no-touch .projects-controls .mode button.list:hover::before, .projects-controls .mode button.list.active::before {opacity: 0;}
html.no-touch .projects-controls .mode button.list:hover::after, .projects-controls .mode button.list.active::after {opacity: 1;}

html.no-touch .projects-controls .mode button.tiles:hover::before, .projects-controls .mode button.tiles.active::before {opacity: 0;}
html.no-touch .projects-controls .mode button.tiles:hover::after, .projects-controls .mode button.tiles.active::after {opacity: 1;}

.projects-controls .modeswitch > button
{
width: 22px;
height: 15px;
font-size: 0px;
background-image: url("../images/mode-all.gif");
}

.projects-controls .modeswitch > button.list {background-position: 50% 0%;}
.projects-controls .modeswitch > button.tiles {background-position: 50% 100%;}

.projects-controls .modeswitch > button.list:hover {background-position: 50% 100%;}
.projects-controls .modeswitch > button.tiles:hover {background-position: 50% 0%;}



.projects-controls button.all, .projects-controls button.branding, .projects-controls button.websites, .projects-controls button.packaging, .projects-controls button.miscellaneous
{
vertical-align: top;
margin-right: 13px;
position: relative;
}

.projects-controls button.miscellaneous {margin-right: 0px !important;}

.projects-controls button.all .n, .projects-controls button.branding .n, .projects-controls button.websites .n, .projects-controls button.all .i, .projects-controls button.branding .i, .projects-controls button.websites .i,  .projects-controls button.packaging .n,  .projects-controls button.packaging .i,  .projects-controls button.miscellaneous .n,  .projects-controls button.miscellaneous .i
{
position: absolute;
bottom: auto;
top: 0px;
font-size: 0px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 16px; 
}

.projects-controls button.all {width: 23px; height: 16px;}
.projects-controls button.all .n {background-image: url("../images/filters/all-encore.svg");}
.projects-controls button.all .i {background-image: url("../images/filters/all-times.svg");}

.projects-controls button.branding {width: 72px; height: 16px;}
.projects-controls button.branding .n {background-image: url("../images/filters/branding-encore.svg");}
.projects-controls button.branding .i {background-image: url("../images/filters/branding-times.svg");}

.projects-controls button.websites {width: 72px; height: 16px;}
.projects-controls button.websites .n {background-image: url("../images/filters/websites-encore.svg");}
.projects-controls button.websites .i {background-image: url("../images/filters/websites-times.svg");}

.projects-controls button.packaging {width: 81px; height: 16px; }
.projects-controls button.packaging .n {background-image: url("../images/filters/packaging-encore.svg");}
.projects-controls button.packaging .i {background-image: url("../images/filters/packaging-times.svg");}

.projects-controls button.miscellaneous {width: 112px; height: 16px; }
.projects-controls button.miscellaneous .n {background-image: url("../images/filters/miscellaneous-encore.svg");}
.projects-controls button.miscellaneous .i {background-image: url("../images/filters/miscellaneous-times.svg");}



.project-detail-controls
{
position: absolute;
top: 0px;
left: 38px;
}

.project-detail-controls .backtomenu
{
width: 25px;
height: 60px;
background-color: white;
text-align: center;
position: relative;
/* margin-top: -100px; */
}

.project-detail-controls .backtomenu > a
{
position: absolute;
bottom: 1px;
left: 1px;
display: inline-block;
font-size: 0px;
width: 23px;
height: 23px;
font-size: 0px;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: contain;
background-image: url("../images/menux-black.svg");
}

.project-detail-controls .backtomenu > a:hover
{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

/*=======================================*/
/*==
/*==  projects
/*==
/*=======================================*/

section.projects h2
{
font-size: 3em;
letter-spacing: -0.01em;
margin-bottom: 0em;
text-transform: uppercase;
display: inline-block;
line-height: 1;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}

section.projects.list
{
margin-left: -100%;
padding: 50px;
padding-top: 100px;
-webkit-transition: all 1.2s;
transition: all 1.2s;
/* mix-blend-mode: difference; */
}

html.menu-open section.projects.list
{
margin-left: -100%;
}

section.projects.list > div
{
position: relative;
}

section.projects.list.active
{
margin-left: 0%;
display: block;
opacity: 1;
z-index: 4;
}

section.projects.list h2 a
{
-webkit-transition: all 1.2s;
transition: all 1.2s;
}

section.projects.list h2
{
max-width: 90%;
}

section.projects.list h2.deselected
{
opacity: 0.1;
}

section.projects.list h2.inactive
{
opacity: 0;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
}

section.projects.list h2 {margin-left: -800px; }
section.projects.list.active h2 {margin-left: 0px;}

section.projects.list.active h2 {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.0s;}
section.projects.list.active h2:nth-of-type(0) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.0s;}
section.projects.list.active h2:nth-of-type(1) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.0s;}
section.projects.list.active h2:nth-of-type(2) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.2s;}
section.projects.list.active h2:nth-of-type(3) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.3s;}
section.projects.list.active h2:nth-of-type(4) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.4s;}
section.projects.list.active h2:nth-of-type(5) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.5s;}
section.projects.list.active h2:nth-of-type(6) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.6s;}
section.projects.list.active h2:nth-of-type(7) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.7s;}
section.projects.list.active h2:nth-of-type(8) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.8s;}
section.projects.list.active h2:nth-of-type(9) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 0.9s;}
section.projects.list.active h2:nth-of-type(10) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.0s;}
section.projects.list.active h2:nth-of-type(11) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.1s;}
section.projects.list.active h2:nth-of-type(12) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.2s;}
section.projects.list.active h2:nth-of-type(13) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.3s;}
section.projects.list.active h2:nth-of-type(14) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.4s;}
section.projects.list.active h2:nth-of-type(15) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.5s;}
section.projects.list.active h2:nth-of-type(16) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.6s;}
section.projects.list.active h2:nth-of-type(17) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.7s;}
section.projects.list.active h2:nth-of-type(18) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.8s;}
section.projects.list.active h2:nth-of-type(19) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 1.9s;}
section.projects.list.active h2:nth-of-type(20) {transition: opacity 0.5s, top 0.5s, margin 1s ease-in-out 2.0s;}


section.projects.list a
{
color: #000000;
}

section.projects.list a:hover
{
color: #ffffff;
}

section.projects.tiles
{
position: absolute;
max-height: 999999px;
overflow: visible;
height: auto;
top: 100px;
opacity: 0;
-webkit-transition: all 0.8s;
transition: all 0.8s;
display: none;
}

section.projects.tiles.active
{
display: block;
opacity: 1;
max-height: 999999px;
}



section.projects.tiles.active .bgbox
{
-webkit-animation-delay: 0.10s;
-ms-animation-delay: 0.10s;
-o-animation-delay: 0.10s;
animation-delay: 0.10s;
-webkit-animation-duration: 0.99s;
-ms-animation-duration: 0.99s;
-o-animation-duration: 0.99s;
animation-duration: 0.99s;
-webkit-animation-name: anim-fade-in;
-ms-animation-name: anim-fade-in;
-o-animation-name: anim-fade-in;
animation-name: anim-fade-in;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

section.projects.tiles.active .bgbox:nth-child(0) {-webkit-animation-delay: 0.00s; -ms-animation-delay: 0.00s; -o-animation-delay: 0.00s; animation-delay: 0.00s;}
section.projects.tiles.active .bgbox:nth-child(1) {-webkit-animation-delay: 0.20s; -ms-animation-delay: 0.20s; -o-animation-delay: 0.20s; animation-delay: 0.20s;}
section.projects.tiles.active .bgbox:nth-child(2) {-webkit-animation-delay: 0.40s; -ms-animation-delay: 0.40s; -o-animation-delay: 0.40s; animation-delay: 0.40s;}
section.projects.tiles.active .bgbox:nth-child(3) {-webkit-animation-delay: 0.60s; -ms-animation-delay: 0.60s; -o-animation-delay: 0.60s; animation-delay: 0.60s;}
section.projects.tiles.active .bgbox:nth-child(4) {-webkit-animation-delay: 0.80s; -ms-animation-delay: 0.80s; -o-animation-delay: 0.80s; animation-delay: 0.80s;}
section.projects.tiles.active .bgbox:nth-child(5) {-webkit-animation-delay: 1.00s; -ms-animation-delay: 1.00s; -o-animation-delay: 1.00s; animation-delay: 1.00s;}
section.projects.tiles.active .bgbox:nth-child(6) {-webkit-animation-delay: 1.20s; -ms-animation-delay: 1.20s; -o-animation-delay: 1.20s; animation-delay: 1.20s;}
section.projects.tiles.active .bgbox:nth-child(7) {-webkit-animation-delay: 1.40s; -ms-animation-delay: 1.40s; -o-animation-delay: 1.40s; animation-delay: 1.40s;}
section.projects.tiles.active .bgbox:nth-child(8) {-webkit-animation-delay: 1.60s; -ms-animation-delay: 1.60s; -o-animation-delay: 1.60s; animation-delay: 1.60s;}
section.projects.tiles.active .bgbox:nth-child(9) {-webkit-animation-delay: 1.80s; -ms-animation-delay: 1.80s; -o-animation-delay: 1.80s; animation-delay: 1.80s;}
section.projects.tiles.active .bgbox:nth-child(10) {-webkit-animation-delay: 2.00s; -ms-animation-delay: 2.00s; -o-animation-delay: 2.00s; animation-delay: 2.00s;}
section.projects.tiles.active .bgbox:nth-child(11) {-webkit-animation-delay: 2.20s; -ms-animation-delay: 2.20s; -o-animation-delay: 2.20s; animation-delay: 2.20s;}
section.projects.tiles.active .bgbox:nth-child(12) {-webkit-animation-delay: 2.40s; -ms-animation-delay: 2.40s; -o-animation-delay: 2.40s; animation-delay: 2.40s;}
section.projects.tiles.active .bgbox:nth-child(13) {-webkit-animation-delay: 2.60s; -ms-animation-delay: 2.60s; -o-animation-delay: 2.60s; animation-delay: 2.60s;}
section.projects.tiles.active .bgbox:nth-child(14) {-webkit-animation-delay: 2.80s; -ms-animation-delay: 2.80s; -o-animation-delay: 2.80s; animation-delay: 2.80s;}
section.projects.tiles.active .bgbox:nth-child(15) {-webkit-animation-delay: 3.00s; -ms-animation-delay: 3.00s; -o-animation-delay: 3.00s; animation-delay: 3.00s;}
section.projects.tiles.active .bgbox:nth-child(16) {-webkit-animation-delay: 3.20s; -ms-animation-delay: 3.20s; -o-animation-delay: 3.20s; animation-delay: 3.20s;}
section.projects.tiles.active .bgbox:nth-child(17) {-webkit-animation-delay: 3.40s; -ms-animation-delay: 3.40s; -o-animation-delay: 3.40s; animation-delay: 3.40s;}
section.projects.tiles.active .bgbox:nth-child(18) {-webkit-animation-delay: 3.60s; -ms-animation-delay: 3.60s; -o-animation-delay: 3.60s; animation-delay: 3.60s;}
section.projects.tiles.active .bgbox:nth-child(19) {-webkit-animation-delay: 3.80s; -ms-animation-delay: 3.80s; -o-animation-delay: 3.80s; animation-delay: 3.80s;}
section.projects.tiles.active .bgbox:nth-child(20) {-webkit-animation-delay: 4.00s; -ms-animation-delay: 4.00s; -o-animation-delay: 4.00s; animation-delay: 4.00s;}

section.projects.tiles.selected
{
/* top: 0px; */
}

section.projects.tiles a
{
display: block;
width: 90%;
height: 90%;
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(0,0,0,0);
z-index: 10;
}

section.projects.tiles h2
{
display: inline;
word-wrap: break-word;
font-size: 2.5em;
line-height: 0.9;
color: #ffffff;
opacity: 0;
}

section.projects.tiles a:hover h2
{
opacity: 1;
}

section.projects.list h2.visited_project a
{
font-family: times new roman;
text-transform: none;
font-style: italic;
font-weight: normal;
}

section.projects.list::after
{
content: "";
width: 100%;
height: 4em;
position: fixed;
bottom: 0px;
left: 0px;
background-color: transparent;
background-image: linear-gradient(0deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
opacity: 0;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}

section.projects.list.active::after
{
opacity: 1;
}

section.projects.list.hovered::after
{
opacity: 0;
}
	
/*=======================================*/
/*==
/*==  project section
/*==
/*=======================================*/

nav.projectsections
{
/* position: sticky; */
position: fixed;
/* width: 100vh; */
text-align: center;
left: 40px;
top: 50%;
z-index: 99;
color: #ffffff;
 mix-blend-mode: difference;
font-size: 0.7em;
transform-origin: 0% 100%;
-webkit-transform: rotate(-90deg) translate(-50%,100%);
-ms-transform: rotate(-90deg) translate(-50%,100%);
-o-transform: rotate(-90deg) translate(-50%,100%);
transform: rotate(-90deg) translate(-50%,100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

nav.projectsections.inactive
{
opacity: 0;
}

nav.projectsections ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

nav.projectsections ul li
{
display: inline-block;
padding: 0.2em 0.8em;
}

nav.projectsections ul li.active
{
/* background-color: red; */
}

nav.projectsections ul li a
{
color: #ffffff;
text-align: center;
display: block;
}

nav.projectsections ul li a > div 
{
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

nav.projectsections ul li a .i
{
margin: 0px;
margin-bottom: 4px;
font-size: 17px;
line-height: 1;
vertical-align: bottom;
font-style: italic;
font-weight: normal;
opacity: 0;
position: absolute;
bottom: 0px;
font-family: "Times New Roman", serif;
text-transform: lowercase;
}

nav.projectsections ul li a .n
{
margin: 0px;
font-size: 14px;
line-height: 1;
vertical-align: bottom;
font-style: normal;
font-weight: normal;
opacity: 1;
font-family: "Encore", Arial, sans-serif;
text-transform: uppercase;
}

@media not all and (min-resolution:.001dpcm) { @media {
	nav.projectsections ul li a .n {margin-bottom: -1px;}
}}

nav.projectsections ul li a:hover .i, nav.projectsections ul li.active a .i {opacity: 1;}
nav.projectsections ul li a:hover .n, nav.projectsections ul li.active a .n {opacity: 0;}

nav.projectsections ul li a:active {opacity: 0.3;}

section.project-section .small-title
{
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 0.7em;
margin-bottom: 0.5em;
}

section.project-section .col.white
{
background-color: #ffffff;
}

article
{
/* margin-bottom: 100vh; */
-webkit-overflow-scrolling: touch;
}

article section.project-section.text-color-light .project-content-left-middle
{
color: #ffffff;
}

article section.project-section.text-color-light .project-content-left-middle a
{
color: #ffffff;
}

article section.project-section.text-color-dark .project-content-left-middle
{
color: #000000;
}

article section.project-section.text-color-dark .project-content-left-middle a
{
color: #000000;
}

section.project-section .text-style-standard
{
line-height: 2;
/* padding-right: 100px; */
}

section.project-section .text-style-large
{
line-height: 2;
font-size: 1.2em;
}

section.project-section .text-style-upper-small
{
text-transform: uppercase;
font-size: 0.8em;
}

section.project-section .text-style-upper-small .lower
{
text-transform: lowercase;
}

section.project-section .text-style-upper-small p + p
{
margin-top: 0.3em;
}

section.project-section .bgbox .bg.cover
{
background-size: cover;
}

section.project-section .bgbox .bg.contain
{
background-size: contain;
}

section.project-section .bgbox .bg.center
{
background-size: contain;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
}

section.project-section:nth-last-child(3)
{
/* margin-bottom: 100vh; */
}

section.project-section a
{
padding: 0em;
margin: 0em;
margin-left: -3px;
padding-left: 3px;
margin-right: -3px;
padding-right: 3px;
padding-bottom: 2px;
color: black;
background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
background-size: 100% 2px;
background-position: 0% 100%;
background-repeat: no-repeat;
}

section.project-section.text-color-light a
{
color: white;
background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
}

section.project-section a.no-hover
{
background-image: none;
}

section.project-section .project-intro-text a:hover
{
color: white;
background-size: 100% 100%;
}

section.project-section a:hover
{
color: white;
background-size: 100% 100%;
}

section.project-section.text-color-light a:hover
{
color: black;
background-size: 100% 100%;
}


article.text-color-light section.project-section .text-color-change a
{
/* background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); */
}

section.project-section .project-intro-detail a
{
margin: 0px;
padding: 0px;
display: inline;
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
background-position: 0 100%;
background-size: 0 1px;
}

section.project-section .project-intro-detail a:hover
{
background-size: 100% 1px;
}


section.project-section .project-content-center-middle
{
min-width: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 40px;
}

section.project-section .project-content-left-middle
{
min-width: 60%;
position: absolute;
left: 0%;
top: 50%;
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
transform: translate(0%, -50%);
margin-left: 40px;
margin-right: 60px;
}

section.project-section .project-content-center-quart
{
min-width: 60%;
position: absolute;
left: 50%;
top: 70%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 40px;
}


section.plaintext a
{
padding: 0em;
margin: 0em;
margin-left: -3px;
padding-left: 3px;
margin-right: -3px;
padding-right: 3px;
padding-bottom: 2px;
color: white;
background-image: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
background-size: 100% 2px;
background-position: 0% 100%;
background-repeat: no-repeat;
}

section.plaintext a:hover
{
color: black;
background-size: 100% 100%;
}

section.plaintext p.follow a:hover
{
color: white;
}

section.project-empty
{

}

.bgcolor
{
position: absolute;
position: fixed;
z-index: -2;
z-index: 0;
}

section.project-section.text-color-light
{
color: #ffffff;
}

section.project-section.text-color-dark
{
color: #000000;
}

/*=======================================*/
/*==
/*==  project header
/*==
/*=======================================*/

section.project-header
{
overflow: hidden;
}

section.project-header .project-header-text
{
width: 100%;
margin: 0px;
position: absolute;
bottom: 0px;
left: 0px;
padding: 30px 0px;
padding-left: 90px;
}

section.project-header .project-header-text h1
{
text-transform: uppercase;
display: inline;
margin-right: 0.1em;
}

section.project-header .project-header-text .small-title
{
margin-top: 1em;
margin-bottom: 0.3em;
}

section.project-header .project-header-text .year
{
text-transform: uppercase;
display: inline;
font-size: 0.8em;
}

section.project-header .project-header-text .deliverables
{
text-transform: uppercase;
font-size: 0.8em;
}

section.project-header .bgcolor
{
width: 100%;
height: 150px;
bottom: 0px;
}



/*=======================================*/
/*==
/*==  project intro
/*==
/*=======================================*/

section.project-intro
{

}

section.project-intro .project-intro-text
{
/* padding-left: 100px; */
max-width: 1000px;
color: #000000;
}

section.project-intro .project-intro-awards
{
margin-top: 3em;
color: #000000;
/* padding-left: 100px; */
}

section.project-intro .project-intro-awards img
{
height: 100px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

section.project-intro .project-intro-awards a:hover img
{
-webkit-transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-o-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
}

section.project-intro .project-intro-awards a::after
{
content: "";
display: inline-block;
height: 60px;
width: 1px;
background-color: #000000;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
}

section.project-intro .project-intro-awards a:last-child::after
{
display: none;
}

section.project-intro .project-intro-detail
{
padding-left: 1em;
margin-bottom: 3em;
}

section.project-intro .bgcolor
{
width: 50%;
height: 100%;
top: 0px;
left: 0px;
background-color: #ffffff;
position: absolute;
}

/*=======================================*/
/*==
/*==  project fullphoto
/*==
/*=======================================*/




/*=======================================*/
/*==
/*==  project halfhalf
/*==
/*=======================================*/

section.project-halfhalf .project-halfhalf-text
{
/* position: absolute; */
/* bottom: 50px; */
}

section.project-halfhalf .bgbox
{
width: 50%;
left: 50%;
}

/*=======================================*/
/*==
/*==  project motto
/*==
/*=======================================*/

section.project-motto
{
background-color: #ffffff;
}

section.project-motto .project-motto-text
{
text-align: center;
margin-top: 45vh;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

/*=======================================*/
/*==
/*==  project golden
/*==
/*=======================================*/

section.project-golden .project-golden-text
{
/* position: absolute; */
/* bottom: 50px; */
}

section.project-golden .bgbox.right
{
width: 55%;
left: 45%;
}

section.project-golden .bgbox.top
{
width: 45%;
height: 40%;
}

/*=======================================*/
/*==
/*==  project gallery
/*==
=======================================*/

section.project-gallery
{
/* cursor: pointer; */
}

section.project-gallery .bgbox
{
position: relative;
width: 999999px;
left: 50%;
height: 0px;
/* z-index: 99999; */
}

section.project-gallery .bgbox .bg
{
left: 0px;
position: relative;
display: inline-block;
background-color: rgba(0,0,0,0.2);
cursor: pointer;
cursor: url("../images/cursor-click-me.svg") 46 8, pointer;
/* z-index: 99999; */
}

section.project-gallery .bgbox .bg.prev
{
cursor: url("../images/cursor-click-prev.svg") 46 8, pointer;
}

section.project-gallery .bgbox .bg:last-of-type
{
cursor: url("../images/cursor-click-start.svg") 46 8, pointer;
}

html.landscape section.project-gallery .bgbox
{
top: 15vh;
}

html.landscape section.project-gallery .bgbox .bg
{
width: 70vh;
height: 70vh;
margin-left: 5vh;
margin-right: 5vh;
}

html.landscape section.project-gallery .bgbox .bg:first-child
{
margin-left: -35vh;
}

html.landscape section.project-gallery .bgbox[data-index="0"] {margin-left: 0vh;}
html.landscape section.project-gallery .bgbox[data-index="1"] {margin-left: -80vh;}
html.landscape section.project-gallery .bgbox[data-index="2"] {margin-left: -160vh;}
html.landscape section.project-gallery .bgbox[data-index="3"] {margin-left: -240vh;}
html.landscape section.project-gallery .bgbox[data-index="4"] {margin-left: -320vh;}
html.landscape section.project-gallery .bgbox[data-index="5"] {margin-left: -400vh;}
html.landscape section.project-gallery .bgbox[data-index="6"] {margin-left: -500vh;}
html.landscape section.project-gallery .bgbox[data-index="7"] {margin-left: -600vh;}
html.landscape section.project-gallery .bgbox[data-index="8"] {margin-left: -700vh;}
html.landscape section.project-gallery .bgbox[data-index="9"] {margin-left: -800vh;}
html.landscape section.project-gallery .bgbox[data-index="10"] {margin-left: -900vh;}
html.landscape section.project-gallery .bgbox[data-index="11"] {margin-left: -1000vh;}
html.landscape section.project-gallery .bgbox[data-index="12"] {margin-left: -1100vh;}
html.landscape section.project-gallery .bgbox[data-index="13"] {margin-left: -1200vh;}
html.landscape section.project-gallery .bgbox[data-index="14"] {margin-left: -1300vh;}
html.landscape section.project-gallery .bgbox[data-index="15"] {margin-left: -1400vh;}
html.landscape section.project-gallery .bgbox[data-index="16"] {margin-left: -1500vh;}
html.landscape section.project-gallery .bgbox[data-index="17"] {margin-left: -1600vh;}
html.landscape section.project-gallery .bgbox[data-index="18"] {margin-left: -1700vh;}
html.landscape section.project-gallery .bgbox[data-index="19"] {margin-left: -1800vh;}
html.landscape section.project-gallery .bgbox[data-index="20"] {margin-left: -1900vh;}


html.portrait section.project-gallery .bgbox
{
top: 0vh;
height: 100vh;
}

html.portrait section.project-gallery .bgbox .bg
{
width: 80vw;
height: 80vw;
margin-left: 2.5vw;
margin-right: 2.5vw;
top: 50vh;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

html.portrait section.project-gallery .bgbox .bg:first-child
{
margin-left: -40vw;
}

html.portrait section.project-gallery .bgbox[data-index="0"] {margin-left: 0vw;}
html.portrait section.project-gallery .bgbox[data-index="1"] {margin-left: -85vw;}
html.portrait section.project-gallery .bgbox[data-index="2"] {margin-left: -170vw;}
html.portrait section.project-gallery .bgbox[data-index="3"] {margin-left: -255vw;}
html.portrait section.project-gallery .bgbox[data-index="4"] {margin-left: -340vw;}
html.portrait section.project-gallery .bgbox[data-index="5"] {margin-left: -425vw;}
html.portrait section.project-gallery .bgbox[data-index="6"] {margin-left: -510vw;}
html.portrait section.project-gallery .bgbox[data-index="7"] {margin-left: -595vw;}
html.portrait section.project-gallery .bgbox[data-index="8"] {margin-left: -680vw;}
html.portrait section.project-gallery .bgbox[data-index="9"] {margin-left: -765vw;}
html.portrait section.project-gallery .bgbox[data-index="10"] {margin-left: -850vw;}
html.portrait section.project-gallery .bgbox[data-index="11"] {margin-left: -935vw;}
html.portrait section.project-gallery .bgbox[data-index="12"] {margin-left: -1020vw;}
html.portrait section.project-gallery .bgbox[data-index="13"] {margin-left: -1105vw;}
html.portrait section.project-gallery .bgbox[data-index="14"] {margin-left: -1190vw;}
html.portrait section.project-gallery .bgbox[data-index="15"] {margin-left: -1275vw;}
html.portrait section.project-gallery .bgbox[data-index="16"] {margin-left: -1360vw;}
html.portrait section.project-gallery .bgbox[data-index="17"] {margin-left: -1445vw;}
html.portrait section.project-gallery .bgbox[data-index="18"] {margin-left: -1530vw;}
html.portrait section.project-gallery .bgbox[data-index="19"] {margin-left: -1615vw;}
html.portrait section.project-gallery .bgbox[data-index="20"] {margin-left: -1700vw;}

section.project-bg .bgbox
{
-webkit-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}

html.landscape section.project-bg .bgbox.video video
{
width: 100%;
}

html.portrait section.project-bg .bgbox.video video
{
height: 100%;
}

section.project-bg .bgbox.video video
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

/*=======================================*/
/*==
/*==  project video
/*==
/*=======================================*/

section.project-video
{
background-color: black;
overflow: hidden;
}

section.project-video video
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

html.landscape section.project-video video
{
width: 100%;
}

html.portrait section.project-video video
{
height: 100%;
}


/*=======================================*/
/*==
/*==  newsletter
/*==
/*=======================================*/

section.newsletter
{
background-color: #ffffff;
/* position: fixed; */
/* top: 0px; */
z-index: 5;
z-index: -99;
/* border: 3px solid red; */
opacity: 0;
-webkit-transition: 0.5s;
transition-delay: 0.5s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

section.newsletter .newsletter-text, section.newsletter-empty .newsletter-text
{
text-align: center;
position: fixed;
top: 45vh;
left: 0px;
width: 100vw;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

section.newsletter .newsletter-text .newsletter-text-title,
section.newsletter-empty .newsletter-text .newsletter-text-title
{
text-transform: uppercase;
font-size: 3.8em;
}

section.newsletter .newsletter-text .newsletter-text-subtitle,
section.newsletter-empty .newsletter-text .newsletter-text-subtitle
{
text-transform: uppercase;
font-size: 1.4em;
margin-top: 4em;
}

section.newsletter form,
section.newsletter-empty form
{
font-size: 1.4em;
margin-top: 1em;
width: 70%;
margin-left: 15%;
text-align: left;
}

section.newsletter form input,
section.newsletter-empty form input
{
box-shadow: none;
outline: 0px;
border: 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #000000;
width: 60%;
text-align: center;
display: inline-block;
padding: 3px;
margin: 0px;
line-height: 1;
height: auto;
border-style: outset;
vertical-align: middle;
border-radius: 0;
-webkit-appearance: none;
}

section.newsletter form input:focus,
section.newsletter-empty form input:focus
{
border-bottom: 2px solid #000000;
border-top: 1px solid #ffffff;
outline: none;
}

section.newsletter form input::-webkit-input-placeholder, section.newsletter form input::-moz-input-placeholder, section.newsletter form input::-ms-input-placeholder, section.newsletter form input::-o-input-placeholder,
section.newsletter-empty form input::-webkit-input-placeholder, section.newsletter-empty form input::-moz-input-placeholder, section.newsletter-empty form input::-ms-input-placeholder, section.newsletter-empty form input::-o-input-placeholder
{
color: #aaaaaa;
}

section.newsletter form input[type=submit],
section.newsletter-empty form input[type=submit]
{
width: 1.5em;
background-color: transparent;
border: none;
font-size: 1.8em;
margin-top: 0.15em;
}

section.newsletter .newsletter-follow,
section.newsletter-empty .newsletter-follow
{
position: fixed;
bottom: 15px;
left: 15px;
text-transform: uppercase;
font-size: 0.9em;
max-width: 50%;
}

section.newsletter .newsletter-follow a,
section.newsletter-empty .newsletter-follow a
{
margin-right: 1em;
display: inline-block;
}



section.newsletter .newsletter-follow .emoticon-activate.smaller,
section.newsletter-empty .newsletter-follow .emoticon-activate.smaller
{
font-size: 0.7em;
margin-top: 2.5em;
}

section.newsletter-empty
{
/* opacity: 0; */
z-index: -1;
z-index: 0;
}

section.newsletter
{

}

section.newsletter.full .newsletter-form
{
text-align: center;
}

.contacttype form input
{
outline: 0px;
border: 0px;
border-radius: 0px;
border-top: 0px solid #000000;
border-bottom: 1px solid #ffffff;
background-color: #000000;
color: #ffffff;
width: 250px;
width: 85%;
text-align: center;
display: inline-block;
padding: 3px;
margin: 0px;
font-size: 0.8em;
margin-top: 1em;
line-height: 1;
height: auto;
border-style: outset;
vertical-align: middle;
text-align: left;
float: left;
box-shadow: none;
transition: none;
}

.contacttype form input:focus
{
border-bottom: 2px solid #ffffff;
outline: none;
}

.contacttype form input[type=submit] 
{
margin-top: 0.5em;
width: 1.5em;
background-color: transparent;
border: none;
font-size: 1.8em;
float: left;
}

/* .contacttype form input[type=submit]::before */
/* { */
/* content: ">"; */
/* display: inline-block; */
/* background: red; */
/* width: 1.5em; */
/* height: 1.5em; */
/* } */

.contacttype form
{
margin-right: 40%;
}

.contacttype form::after
{
content: "";
clear: both;
display: table;
}

.form-control:focus
{
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}

form input.input-error
{
-webkit-animation-duration: 0.1s;
-ms-animation-duration: 0.1s;
-o-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-name: anim-shake;
-ms-animation-name: anim-shake;
-o-animation-name: anim-shake;
animation-name: anim-shake;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: 5;
-ms-animation-iteration-count: 5;
-o-animation-iteration-count: 5;
animation-iteration-count: 5;
}

/*=======================================*/
/*==
/*==  plaintext
/*==
/*=======================================*/

section.plaintext
{
z-index: 1;
opacity: 0;
font-size: 1.2em;
-webkit-transition: all 1.2s;
transition: all 1.2s;
}

section.plaintext .col
{
height: 100%;
vertical-align: top;
display: inline-block;
float: none;
}

section.plaintext.active 
{
display: block;
opacity: 1;
}

section.plaintext .small-title
{
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 1em;
margin-bottom: 2em;
}

section.plaintext h1
{
font-size: 1.1em;
font-weight: 400;
margin-bottom: 1em;
}

section.plaintext h2
{
font-size: 2.7em;
font-weight: 400;
margin-bottom: 0.8em;
margin-right: 20%;
}

section.plaintext h2 a
{
position: relative;
display: inline;
padding-left: 0.1em;
margin-left: -0.1em;
padding-right: 0.1em;
margin-right: -0.1em;
}

section.plaintext h2 a::after
{
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0px;
left: 0px;
background: white;
z-index: -1;
z-index: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

section.plaintext h2 a:hover
{
color: black;
}

section.plaintext h2 a:hover::after
{
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background: white;
}

section.plaintext p
{
line-height: 1.4;
margin-top: 1em;
margin-right: 20%;
}

section.plaintext ul
{
line-height: 1.4;
margin-top: 1em;
margin-bottom: 1em;
font-size: 0.9em;
margin-right: 20%;
}

section.plaintext ul li
{
margin-bottom: 0.5em;
}

section.plaintext.inverted
{
color: #ffffff;
}

section.plaintext.inverted .bgcolor
{
background-color: #000000;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}

section.plaintext.inverted > .bgcolor
{
z-index: -2;
}

section.plaintext .service
{
font-size: 0.8em;
margin-top: 3em;
width: 31%;
margin-right: 2.5%;
margin-bottom: 1em;
display: inline-block;
vertical-align: top;
}

section.plaintext .service:nth-child(3n)
{
margin-right: 0%;
}

section.plaintext .service h3
{
text-transform: uppercase;
font-weight: normal;
font-size: 1.9em;
}

section.plaintext .service p
{
margin-right: 0px;
}

section.plaintext .service .small-title
{
font-size: 1.3em;
margin-top: 0.1em;
margin-bottom: 1em;
}

section.plaintext .service .servicelist
{
font-size: 0.8em;
margin-top: 0.8em;
color: #cfcfcf;
/* letter-spacing: -0.03em; */
}

section.plaintext .clientcategory
{
font-size: 0.75em;
margin-top: 2em;
margin-bottom: 0em;
width: 29%;
margin-right: 5%;
margin-bottom: 1em;
display: inline-block;
vertical-align: top;
}

section.plaintext .clientcategory:nth-child(3n)
{
margin-right: 0%;
}

section.plaintext .clientcategory h3
{
text-transform: uppercase;
font-weight: normal;
font-size: 1.7em;
cursor: pointer;
display: inline;
width: 100%;
background: 
    linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
    linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

section.plaintext .clientcategory h3::after
{
/* content: ""; */
/* display: block; */
/* width: 0%; */
/* height: 1px; */
/* margin-top: 0.2em; */
/* background-color: white; */

}

section.plaintext .clientcategory.active h3
{
background-size: 0 2px, 100% 2px;
}

section.plaintext .clientcategory h3 sup
{
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 0.6em;
margin-left: 0.2em;
}

section.plaintext .clientcategory h3 + sup
{
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 1em;
margin-left: 0.2em;
}

section.plaintext .clientcategory .clientlist
{
font-size: 1em;
}

section.plaintext .clientcategory .clientlist p + p
{
margin-top: 0.2em;
}

section.plaintext .contacttype
{
margin-bottom: 3em;
overflow: visible;
}

section.plaintext .contacttype h2
{
text-transform: uppercase;
font-weight: normal;
font-size: 1.7em;
margin-bottom: 0.2em;
margin-right: 40%;
}

section.plaintext .contacttype h2 + p
{
margin-top: 0px;
}

section.plaintext .contacttype p
{
margin-right: 40%;
font-size: 0.9em;
}

section.plaintext .contacttype .follow a
{
text-transform: uppercase;
margin-right: 2em;
font-size: 0.8em;
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
background-position: 0 100%;
background-size: 0 1px;
}

section.plaintext .contacttype .follow a:hover
{
background-size: 100% 1px;
}

section.plaintext .distinction
{
margin-bottom: 4em;
}

section.plaintext .distinction.half
{
width: 40%;
display: inline-block;
margin-right: 5%;
vertical-align: top;
}

section.plaintext .distinction h2
{
text-transform: uppercase;
font-weight: normal;
font-size: 1.7em;
margin-bottom: 0.2em;
margin-right: 40%;
}

section.plaintext .distinction h2 sup
{
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 0.4em;
margin-left: 0.2em;
top: -1em;
}

section.plaintext .readmore-box
{
width: 100%;
margin-top: 0.5em;
position: relative;
}

section.plaintext .readmore-box .readmore-box-inner
{
height: 250px;
overflow: hidden;
width: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

section.plaintext .readmore-box .readmore-box-more
{
z-index: 9;
height: 200px;
/* border: 1px solid yellow; */
position: absolute;
bottom: 0px;
width: 100%;
background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

section.plaintext .readmore-box.open .readmore-box-inner
{
max-height: 99999px;
}

section.plaintext .readmore-box.open .readmore-box-more
{
opacity: 0;
}

section.plaintext .readmore-box .readmore-box-more .readmore
{
position: absolute;
bottom: 0px;
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 0.8em;
cursor: pointer;
}

section.plaintext .awards
{
/* border: 1px solid red; */
display: table;
}

section.plaintext .award
{
display: block;
font-size: 0.7em;
display: table-row;
}

section.plaintext .award > *
{
display: inline-block;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 50px;
display: table-cell;
vertical-align: middle;
}

section.plaintext .award .year {width: 100px; font-weight: bold;}
section.plaintext .award .institution {}
section.plaintext .award .title {font-weight: bold;}
section.plaintext .award .field {font-weight: bold;}
section.plaintext .award .project {}

section.plaintext .pub
{
font-size: 0.7em;
margin-top: 0.2em;
margin-bottom: 0.8em;
}

section.plaintext .pub > *
{
display: block;
padding-top: 0.3em;
padding-bottom: 0.3em;
}

section.plaintext .pub .title {font-weight: bold;}
section.plaintext .pub .title span {font-weight: normal;}
section.plaintext .pub .publisher {}

section.plaintext .exhib
{
font-size: 0.7em;
margin-top: 0.2em;
margin-bottom: 0.5em;
}

section.plaintext .exhib > *
{
display: block;
padding-top: 0.3em;
padding-bottom: 0.3em;
}

section.plaintext .exhib .title {font-weight: bold;}
section.plaintext .exhib .place {}

section.project-video iframe
{
width: 100%;
height: 100%;
}

section.splash > *
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

section.splash .logo, section.splash .motto
{
opacity: 0;
-webkit-animation-duration: 3.33s;
-ms-animation-duration: 3.33s;
-o-animation-duration: 3.33s;
animation-duration: 3.33s;
-webkit-animation-name: anim-logo-splash;
-ms-animation-name:anim-logo-splash;
-o-animation-name: anim-logo-splash;
animation-name: anim-logo-splash;
}

section.splash .logo
{
width: 486px;
height: 51px;
background-image: url("../images/aeraki-design-logo.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
font-size: 0px;
}

section.splash .motto
{
-webkit-animation-delay: 2.4s;
-ms-animation-delay: 2.4s;
-o-animation-delay: 2.4s;
animation-delay: 2.4s;
font-family: "Times New Roman", serif;
font-style: italic;
opacity: 0;
width: 80vw;
text-align: center;
}

.menu.splash
{
-webkit-animation-delay: 4.83s;
-ms-animation-delay: 4.83s;
-o-animation-delay: 4.83s;
animation-delay: 4.83s;
-webkit-animation-duration: 0.66s;
-ms-animation-duration: 0.66s;
-o-animation-duration: 0.66s;
animation-duration: 0.66s;
-webkit-animation-name: anim-menu-splash;
-ms-animation-name:anim-menu-splash;
-o-animation-name: anim-menu-splash;
animation-name: anim-menu-splash;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.menu.splashstart
{
-webkit-transition: all 0.5s;
transition: all 0.5s;
margin-left: 110%;
}

.splash nav.logo, .splashstart nav.logo
{
top: -40px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.splash nav.logo
{
-webkit-animation-delay: 4.83s;
-ms-animation-delay: 4.83s;
-o-animation-delay: 4.83s;
animation-delay: 4.83s;
-webkit-animation-duration: 0.66s;
-ms-animation-duration: 0.66s;
-o-animation-duration: 0.66s;
animation-duration: 0.66s;
-webkit-animation-name: anim-menu-navlogo-splash;
-ms-animation-name:anim-menu-navlogo-splash;
-o-animation-name: anim-menu-navlogo-splash;
animation-name: anim-menu-navlogo-splash;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

footer.splash
{
-webkit-animation-delay: 4.83s;
-ms-animation-delay: 4.83s;
-o-animation-delay: 4.83s;
animation-delay: 4.83s;
-webkit-animation-duration: 0.66s;
-ms-animation-duration: 0.66s;
-o-animation-duration: 0.66s;
animation-duration: 0.66s;
-webkit-animation-name: anim-fade-in;
-ms-animation-name: anim-fade-in;
-o-animation-name: anim-fade-in;
animation-name: anim-fade-in;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}


/*=======================================*/
/*==
/*==  footer
/*==
/*=======================================*/

footer
{
position: fixed;
bottom: 0px;
right: 0px;
padding: 15px;
z-index: 5;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

footer nav, footer .footer-credits
{
font-size: 0.5em;
text-transform: uppercase;
line-height: 1.2;
}

footer nav ul
{
list-style-type: none;
margin: 0px;
}

footer nav ul li
{
display: inline-block;
margin-left: 1em;
float: right;
}

footer nav ul li:nth-child(3)
{
clear: right;
}

footer nav ul li a
{
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
background-position: 0 100%;
background-size: 0 1px;
}

footer nav ul li a:hover
{
background-size: 100% 1px;
}

.footer-credits
{
width: 300px;
position: absolute;
bottom: 50px;
right: 15px;
transform-origin: 100% 100%;
-webkit-transform: rotate(-90deg) translate(100%,0%);
-ms-transform: rotate(-90deg) translate(100%,0%);
-o-transform: rotate(-90deg) translate(100%,0%);
transform: rotate(-90deg) translate(100%,0%);
display: none;
}

footer.inverted {color: white;}
footer.inverted a {color: white;}




/*=======================================*/
/*==
/*==  smoothstate animations
/*==
/*=======================================*/

#ss
{
width: 100%;
height: 100vh;
background-color: white;
overflow: hidden;
}

/* section.projects.list,  */
section.project-header, section.project-header .project-header-text, section.project-header .bgcolor, section.project-bg
{
-webkit-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

/*--------------------------------*/

#ss section.projects.list
{

}

#ss.exiting section.projects.list
{
margin-left: -100%;
}

/*--------------------------------*/

#ss section.projects.tiles
{

}

#ss.exiting section.projects.tiles:not(.selected)
{
opacity: 0;
}

#ss.exiting section.projects.tiles:not(.selected) .bgbox
{
height: 0px;
}

/*--------------------------------*/

#ss section.project-header
{
-webkit-animation-duration: 0.99s;
-ms-animation-duration: 0.99s;
-o-animation-duration: 0.99s;
animation-duration: 0.99s;
}

#ss.exiting section.project-header
{
-webkit-animation-name: anim-fade-out;
-ms-animation-name: anim-fade-out;
-o-animation-name: anim-fade-out;
animation-name: anim-fade-out;
}

#ss section.project-header .project-header-text
{
-webkit-animation-duration: 0.99s;
-ms-animation-duration: 0.99s;
-o-animation-duration: 0.99s;
animation-duration: 0.99s;
-webkit-animation-name: anim-move-in-bottom;
-ms-animation-name: anim-move-in-bottom;
-o-animation-name: anim-move-in-bottom;
animation-name: anim-move-in-bottom;
}

#ss section.project-header .bgcolor
{
-webkit-animation-duration: 0.99s;
-ms-animation-duration: 0.99s;
-o-animation-duration: 0.99s;
animation-duration: 0.99s;
-webkit-animation-name: anim-move-in-bottom;
-ms-animation-name: anim-move-in-bottom;
-o-animation-name: anim-move-in-bottom;
animation-name: anim-move-in-bottom;
}

/*--------------------------------*/

#ss section.project-bg
{
-webkit-animation-duration: 1.33s;
-ms-animation-duration: 1.33s;
-o-animation-duration: 1.33s;
animation-duration: 1.33s;
/* -webkit-animation-name: anim-fade-in; */
/* -ms-animation-name: anim-fade-in; */
/* -o-animation-name: anim-fade-in; */
/* animation-name: anim-fade-in; */
}

#ss.exiting section.project-bg
{
-webkit-animation-delay: 0.55s;
-ms-animation-delay: 0.55s;
-o-animation-delay: 0.55s;
animation-delay: 0.55s;
-webkit-animation-duration: 0.99s;
-ms-animation-duration: 0.99s;
-o-animation-duration: 0.99s;
animation-duration: 0.99s;
-webkit-animation-name: anim-fade-out;
-ms-animation-name: anim-fade-out;
-o-animation-name: anim-fade-out;
animation-name: anim-fade-out;
}

/*--------------------------------*/

#ss .projects-controls
{
opacity: 1;
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
-webkit-transition: all 1.2s;
transition: all 1.2s;
}

#ss.exiting .projects-controls
{
opacity: 0;
}

/*--------------------------------*/

/*--------------------------------*/

#ss .project-detail-controls
{
margin-top: 0px;
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
-webkit-transition: all 0.99s;
transition: all 0.99s;
}

html.menu-open #ss .project-detail-controls
{
margin-top: -150px;
}

#ss.exiting .project-detail-controls
{
margin-top: -150px;
}

/*--------------------------------*/

#ss nav.projectsections
{
opacity: 1;
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
-webkit-transition: all 0.99s;
transition: all 0.99s;
}

#ss nav.projectsections.inactive
{
opacity: 0;
left: -50px;
}

#ss.exiting nav.projectsections
{
opacity: 0;
}

/*--------------------------------*/

#ss section.plaintext
{

}

#ss.exiting section.plaintext
{
opacity: 0;
}

/*--------------------------------*/

#ss section.newsletter
{
opacity: 1;
}





/*=======================================*/
/*==
/*==  emoticons
/*==
/*=======================================*/

.emoticon
{
width: 1em;
height: 0.7em;
display: inline-block;
position: relative;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.emoticon > *
{
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0px;
left: 0px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.emoticon.smile
{
background-image: url("../images/emoticons/emoticon-smile.svg");
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.emoticon.smile.animate
{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.emoticon.smile > div:nth-child(1)
{
opacity: 0;
background-image: url("../images/emoticons/emoticon-smile-cheeks.svg");
}

.emoticon.smile.animate > div:nth-child(1)
{
opacity: 1;
}



.emoticon.wink
{
background-image: url("../images/emoticons/emoticon-wink-base.svg");
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.emoticon.wink.animate
{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.emoticon.wink > div:nth-child(1)
{
opacity: 1;
background-image: url("../images/emoticons/emoticon-wink-wink.svg");
}

.emoticon.wink > div:nth-child(2)
{
opacity: 0;
background-image: url("../images/emoticons/emoticon-wink-eye.svg");
}

@keyframes anim-emoticon-wink-1
{
0% {opacity: 0;}
40% {opacity: 0;}
41% {opacity: 1;}
90% {opacity: 1;}
91% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes anim-emoticon-wink-2
{
0% {opacity: 1;}
35% {opacity: 1;}
36% {opacity: 0;}
90% {opacity: 0;}
91% {opacity: 1;}
100% {opacity: 1;}
}

.emoticon.wink.animate > div:nth-child(1)
{
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: anim-emoticon-wink-1;
-ms-animation-name: anim-emoticon-wink-1;
-o-animation-name: anim-emoticon-wink-1;
animation-name: anim-emoticon-wink-1;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.emoticon.wink.animate > div:nth-child(2)
{
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: anim-emoticon-wink-2;
-ms-animation-name: anim-emoticon-wink-2;
-o-animation-name: anim-emoticon-wink-2;
animation-name: anim-emoticon-wink-2;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}



.emoticon.kiss
{
background-image: url("../images/emoticons/emoticon-kiss-eyes.svg");
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.emoticon.kiss.animate
{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.emoticon.kiss > div:nth-child(1)
{
opacity: 1;
background-image: url("../images/emoticons/emoticon-kiss-kiss.svg");
}

.emoticon.kiss > div:nth-child(2)
{
opacity: 0;
background-image: url("../images/emoticons/emoticon-heart.svg");
background-size: auto 80%;
background-position: 100% 50%;
}

@keyframes anim-emoticon-kiss-1
{
0% {opacity: 0;}
20% {opacity: 0;}
21% {opacity: 1;}
}

@keyframes anim-emoticon-kiss-2
{
0%
	{
	opacity: 0;
	transform: scale(0.2) translate(10px,0px);
	}
20%
	{
	opacity: 1;
	transform: scale(0.2) translate(10px,0px);
	}
80% 
	{
	opacity: 1;
	}
100% 
	{
	opacity: 0;
	transform: scale(1) translate(30px,-30px);
	}
}

.emoticon.kiss.animate > div:nth-child(1)
{
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: anim-emoticon-kiss-1;
-ms-animation-name: anim-emoticon-kiss-1;
-o-animation-name: anim-emoticon-kiss-1;
animation-name: anim-emoticon-kiss-1;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.emoticon.kiss.animate > div:nth-child(2)
{
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: anim-emoticon-kiss-2;
-ms-animation-name: anim-emoticon-kiss-2;
-o-animation-name: anim-emoticon-kiss-2;
animation-name: anim-emoticon-kiss-2;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}



.emoticon.frown
{
background-image: url("../images/emoticons/emoticon-sad.svg");
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.emoticon.frown.animate
{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.emoticon.frown > div:nth-child(1)
{
opacity: 0;
background-image: url("../images/emoticons/emoticon-tear.svg");
background-size: auto 80%;
background-position: 100% 50%;
}

@keyframes anim-emoticon-frown-1
{
0%
	{
	opacity: 0;
	transform: scale(0.8) translateY(0px);
	}
20%
	{
	opacity: 1;
	transform: scale(0.8) translateY(0px);
	}
80% 
	{
	opacity: 1;
	}
100% 
	{
	opacity: 0;
	transform: scale(0.8) translateY(30px);
	}
}

.emoticon.frown.animate > div:nth-child(1)
{
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: anim-emoticon-frown-1;
-ms-animation-name: anim-emoticon-frown-1;
-o-animation-name: anim-emoticon-frown-1;
animation-name: anim-emoticon-frown-1;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}



/*=======================================*/
/*==
/*==  responsive
/*==
/*=======================================*/

@media screen and (min-width: 1200px)
	{
	.menu nav.social {left: 28em;}
	section.newsletter .newsletter-text .newsletter-text-title br {display: none;}
	}
/*==== 1200+ end ==== */


@media screen and (max-width: 1199px)
	{
	section.project-intro .project-intro-text {padding-left: 0px;}
	section.project-intro .project-intro-awards {padding-left: 0px;}
	section.project-section .project-content-center-middle {margin-left: 15px; }
	section.project-section .project-content-left-middle {margin-left: 15px;}
	section.project-golden .bgbox.right {width: 50%; left: 50%;}
	section.project-golden .bgbox.top {width: 50%; height: 30%;}
	section.project-golden .project-content-center-quart {top: 65%;  margin-left: 15px;}
	section.newsletter form {width: 80%; margin-left: 10%;}
	section.newsletter form input {width: 60%;}
	section.newsletter form input[type=submit] {width: 8%;}
	section.plaintext h2 {margin-right: 10%;}
	section.plaintext p {margin-right: 10%;}
	section.plaintext .service {width: 46%; margin-right: 5%;}
	section.plaintext .service:nth-child(3n) {margin-right: 5%;}
	section.plaintext .service:nth-child(2n+1) {margin-right: 0%;}
	section.plaintext .clientcategory {width: 46%; margin-right: 5%;}
	section.plaintext .clientcategory:nth-child(3n) {margin-right: 5%;}
	section.plaintext .clientcategory:nth-child(2n) {margin-right: 0%;}
	section.plaintext .contacttype h2 {margin-right: 10%;}
	section.plaintext .contacttype p {margin-right: 10%;}
	.contacttype form {margin-right: 10%;}
	}
/*==== 1199 end ==== */


@media screen and (max-width: 991px)
	{
	section.full > div.container-fluid > .row > .col-plaintext {padding-left: 60px; padding-right: 60px;}
	section.plaintext .distinction h2 {margin-right: 0%;}
	section.plaintext .distinction.half {width: 100%;}
	section.newsletter form input[type=submit], section.newsletter-empty form input[type=submit] {margin-top: 0.35em;}
	section.newsletter form input {width: 70%;}
	.menu {padding-left: 50px;}
	.menu nav {bottom: auto; top: 30%;}
	.menu nav.main {}
	.menu nav.language {top: 7%; left: auto;}
	.menu nav.social {top: auto; bottom: 7%; left: auto;}
	}
/*==== 991 end ==== */


@media screen and (max-width: 767px)
	{
	section.full > div.container > .row > .col.col-xs-8 {width: 100%; height: 50%;}
	section.full > div.container > .row > .col.col-xs-4 {width: 100%; height: 50%;}
	.projects-controls .bg {height: 90px;}
	nav.projectsections {display: none;}
	section.project-section .text-style-standard {padding-right: 30px;}
	section.projects.list {padding: 30px; padding-top: 90px;}
	section.projects.tiles {top: 90px;}
	section.project-intro .bgcolor {display: none;}
	section.project-halfhalf .bgbox {width: 100%; height: 50%; left: 0%;}
	section.project-motto .project-motto-text {padding-left: 30px; padding-right: 30px;}
	section.project-golden .bgbox.right {height: 60%;}
	.projects-controls {padding: 25px 40px;}
	section.project-section .project-content-center-middle, section.project-section .project-content-left-middle, section.project-section .project-content-center-quart
		{
		position: relative;
		left: auto;
		top: auto;
		-webkit-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
		}
	section.plaintext h2 {margin-right: 0%;}
	section.plaintext p {margin-right: 0%;}
	section.plaintext ul {margin-right: 0%;}
	section.plaintext .service {width: 100%; margin-right: 0%;}
	section.plaintext .service:nth-child(3n) {margin-right: 0%;}
	section.plaintext .service:nth-child(2n+1) {margin-right: 0%;}
	section.plaintext .clientcategory {width: 100%; margin-right: 0%;}
	section.plaintext .clientcategory:nth-child(3n) {margin-right: 0%;}
	section.plaintext .clientcategory:nth-child(2n+1) {margin-right: 0%;}
	section.plaintext .awards {display: block;}
	section.plaintext .award {display: block; margin-bottom: 0.8em;}
	section.plaintext .award > * {display: inline; padding-right: 0px; width: auto; line-height: 1.6;}
	section.plaintext .award > *::after {display: inline; content:"-"; margin-left: 0.7em; margin-right: 0.7em;}
	section.plaintext .award .year {width: auto;}
	section.plaintext .award .title::after {content: "\a"; white-space: pre;}
	section.plaintext .award .project::after {content: "\a"; white-space: pre;}
	section.plaintext .contacttype h2 {margin-right: 0%;}
	section.plaintext .contacttype p {margin-right: 0%;}
	nav.logo {top: 10px;}
	.menu nav.main {font-size: 2.8em; top: 25%;}
	.menu nav.language {font-size: 1.3em; top: 20px;}
	.menu nav.social {font-size: 1.3em; bottom: 80px;}
	.menu {padding-left: 20px;}
	section.full > div.container-fluid > .row > .col-plaintext {padding-left: 20px; max-width: 100%;}
	section.project-header .project-header-text h1 {display: block;}
	section.newsletter .newsletter-follow a.social {display: block; margin-top: 0.3em;}
	section.newsletter .newsletter-follow a.social:nth-child(1) {margin-top: 1.1em;}
	section.newsletter .newsletter-follow .emoticon-activate.smaller, section.newsletter-empty .newsletter-follow .emoticon-activate.smaller {margin-top: 2em;}
	section.full > div.container-fluid > .row > .col-plaintext:nth-child(1) {padding-top: 22px;}
	.contacttype form {margin-right: 0%;}
	.contacttype form input {width: 92%;}
	.contacttype form input[type=submit] {width: auto;}
	section.newsletter form {width: 100%; margin: 0px;}
	}
/*==== 767 end ==== */


@media screen and (max-width: 575px)
	{
	/* footer {padding: 8px; width: 50%; background-image: linear-gradient(0deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);} */
	footer {padding: 8px; width: 50%;}
	footer.single {background-image: none;}
	footer.inverted {background-image: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);}
	#ss.exiting footer {background-image: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%);}
	#ss.exiting footer.inverted {background-image: linear-gradient(0deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 100%);}
	section.splash > * {top: 45%;}
	section.splash .logo {width: 300px; height: 31px;}
	section.splash .motto {width: 200px; font-size: 1.15em;}
	.menu .handle {width: 25px;}
	.projects-controls button .i {font-size: 14px;}
	.projects-controls button .n {font-size: 12px;}
	html.no-touch .snapper, html.touch .snapper {scroll-snap-type: none; height: auto;}
	section.full.xs-auto {height: auto;}
	section.full.xs-fullwidth {height: 100vw;}
	html.portrait section.project-gallery .bgbox .bg {top: auto; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin-top: 10vw; margin-bottom: 10vw;}
	section.projects.list {padding-left: 22px;}
	section.projects h2 {letter-spacing: -0.03em; font-size: 2.4em; line-height: 1.2;}
	section.projects.list h2 a {line-height: 0.8; display: inline-block;}
    section.project-header .project-header-text {padding-left: 30px; margin-left: -35px; padding-right: 30px; padding-bottom: 30px;}
	section.project-section .text-style-standard {padding-right: 0px;}
	section.project-section .small-title {font-size: 0.8em;}
	section.project-halfhalf .project-halfhalf-text {position: relative; bottom: auto;}
	section.project-halfhalf .bgbox {height: 100vw; position: relative;}
	section.project-motto .project-motto-text {top: auto; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin-top: 10vw; margin-bottom: 10vw; padding: 20px; text-align: left;}
	section.project-motto .project-motto-text.text-style-large {line-height: 1.8; font-size: 1.4em;}
	section.project-golden .project-content-center-quart {margin-left: 0px;}
	section.project-golden .project-golden-text {position: relative; bottom: auto;}
	/* section.project-golden .bgbox.top {width: 50vw; height: 50vw;} */
	section.project-golden .bgbox.top {width: 100vw; height: 100vw; left: 0px; top: 0px; position: relative;}
	/* section.project-golden .bgbox.right {width: 50vw; height: 50vw;} */
	section.project-golden .bgbox.right {width: 100vw; height: 100vw; left: 0px; top: 0px; position: relative;}
	.projects-controls {padding: 25px; padding-right: 0px;}
	.projects-controls .categories 
		{
		display: block;
		margin: 0px;
		/* margin-left: -0.5em; */
		margin-left: -2px;
		margin-top: 1.1em;
		width: 120%;
		-webkit-transform-origin: 0% 50%;
		-ms-transform-origin: 0% 50%;
		-o-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
		transform: scale(0.9);
		}
	.menu.splash .handle.black, .menu.splash .handle.white, .menu.splashstart .handle.black, .menu.splashstart .handle.white
		{
		top: -40px;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		}
	.projects-controls button {margin: 0px; margin-right: 10px; padding: 0px;}
	.project-detail-controls {left: 20px;}
	html.portrait section.project-gallery .bgbox {height: 100vw;}
	section.bg.tiles .bgbox {width: 100vw !important; height: 100vw !important;}
	section.bg.tiles .bgbox.med {width: 100vw !important; height: 100vw !important;}
	section.bg.tiles .bgbox.small {width: 50vw !important; height: 50vw !important;}
	section.bg.tiles .bgbox.active {width: 100vw !important; height: 100vh !important;}
	.menu nav.language {}
	.menu nav.social li {padding-bottom: 0.1em;}
	body {overflow-y: auto;}
	#ss {height: auto;}
	section.full > div.container > .row > .col, section.full > div.container-fluid > .row > .col {padding-left: 20px; padding-right: 20px; padding-top: 40px; padding-bottom: 40px;}
	section.project-header .project-header-text {margin-left: 0px; padding: 20px; position: fixed;}
	body.scrolled section.project-header .project-header-text {bottom: -300px;}
	section.project-section .project-content-center-middle {margin-left: 0px;}
	section.project-section .project-content-left-middle {margin-left: 0px;}
	section.project-intro .project-intro-detail {margin-top: 1.5em; margin-bottom: 1.5em; padding-left: 0px;}
	section.newsletter {position: relative; z-index: 10;}
	section.full.newsletter > div.container-fluid > .row > .col {padding-right: 20px;}
	section.newsletter .newsletter-follow, section.newsletter-empty .newsletter-follow {position: absolute;}
	section.newsletter .newsletter-text, section.newsletter-empty .newsletter-text {position: relative; width: 100%; top: 35vh;}
	section.newsletter .newsletter-text .newsletter-text-title, section.newsletter-empty .newsletter-text .newsletter-text-title {font-size: 3.2em;}
	section.newsletter .newsletter-text .newsletter-text-subtitle, section.newsletter-empty .newsletter-text .newsletter-text-subtitle {font-size: 1.15em; margin-top: 3em;}
	section.newsletter form input {width: 90%;}
	section.plaintext h2 {font-size: 2.2em;}
	section.plaintext .award > * {line-height: 1.2;}
	section.plaintext .exhib > * {line-height: 1.2;}
	section.plaintext .exhib .publisher {padding-top: 0.1em; padding-bottom: 0.4em;}
	section.plaintext .pub .publisher {padding-top: 0.1em; padding-bottom: 0.4em;}
	nav.logo {right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%);}


	.menubutton
	{
	display: block;
	width: 25px; 
	height: 25px; 
	position: fixed; 
	right: 20px; 
	top: 20px; 
	background-color: transparent;
	background-image: url("../images/burger-black-mob.svg");
	}

	html.menu-open .menubutton
	{
	background-image: url("../images/x-white-mob.svg");
	}
	
	.inverted .menubutton, .single .menubutton
	{
	background-image: url("../images/burger-white-mob.svg");
	}
	
	html.menu-open .inverted .menubutton
	{
	background-image: url("../images/x-black-mob.svg");
	}

	.splash .menubutton, .splashstart .menubutton
	{
	right: -40px; 
	}

	.menu .handle, .menu .handle.black, .menu .handle.white {display: none;}

	.menu.splash .handle.black, .menu.splash .handle.white
	{
	-webkit-animation-delay: 4.83s;
	-ms-animation-delay: 4.83s;
	-o-animation-delay: 4.83s;
	animation-delay: 4.83s;
	-webkit-animation-duration: 0.66s;
	-ms-animation-duration: 0.66s;
	-o-animation-duration: 0.66s;
	animation-duration: 0.66s;
	-webkit-animation-name: anim-menu-handle-splash-xs;
	-ms-animation-name:anim-menu-handle-splash-xs;
	-o-animation-name: anim-menu-handle-splash-xs;
	animation-name: anim-menu-handle-splash-xs;
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	.menu.splash nav.logo
	{
	-webkit-animation-name: anim-menu-navlogo-splash-xs;
	-ms-animation-name:anim-menu-navlogo-splash-xs;
	-o-animation-name: anim-menu-navlogo-splash-xs;
	animation-name: anim-menu-navlogo-splash-xs;
	}
	html.menu-open header .handle.white {background-color: transparent; background-image: url("../images/menux-white.svg");}
	.project-detail-controls .backtomenu {height: 47px;}
	.menu nav.language {font-size: 0.8em; top: 27px;}
	section.projects.list h2 {max-width: 100vw; width: 95vw;}
	.projects-controls button.all, .projects-controls button.branding, .projects-controls button.websites, .projects-controls button.packaging, .projects-controls button.miscellaneous {margin-right: 13px;}
	section.newsletter form input[type=submit], section.newsletter-empty form input[type=submit] {font-size: 36px; margin-top: 25px;}
	.project-detail-controls .backtomenu {background-color: transparent;}
	.project-detail-controls .backtomenu > a {background-image: url(../images/menux-white.svg); bottom: 0px; left: 0px; width: 25px; height: 25px;}
	#ss.exiting .project-detail-controls {opacity: 0; margin-top: 0px;}
	section.full.fixed {height: 100vh;}
	header.single a.aeraki-logo::before {background-image: url("../images/aeraki-logo-white.png");}
	section.project-intro .project-intro-awards img {height: 50px;}
	}
/*==== 575 end ==== */

@media screen and (max-width: 375px)
	{
	.projects-controls .categories 
		{
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
		transform: scale(0.9);
		}
	.projects-controls button.all, .projects-controls button.branding, .projects-controls button.websites, .projects-controls button.packaging, .projects-controls button.miscellaneous {margin-right: 2px;}
	}

@media screen and (max-width: 370px)
	{
	section.newsletter .newsletter-text .newsletter-text-title, section.newsletter-empty .newsletter-text .newsletter-text-title
		{
		font-size: 2.6em;
		}
	section.newsletter form input {width: 80%;}
	}

@media screen and (max-width: 360px)
	{
	.projects-controls .categories 
		{
		-webkit-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
		}
	.projects-controls button.all, .projects-controls button.branding, .projects-controls button.websites, .projects-controls button.packaging, .projects-controls button.miscellaneous {margin-right: 8px;}
	}



#cookie-notice
{
font-family: inherit !important;
font-size: 0.8em !important;
border-top: 1px solid rgba(255,255,255,0.2);
}

.cn-button.wp-default, .cn-button.bootstrap
{
font-family: inherit !important;
box-shadow: none;
border: none;
border-radius: 0px !important;
background: #ffffff;
}

.cn-button.wp-default:hover, .cn-button.bootstrap:hover
{
box-shadow: none;
}

.cookie-btn
{
background-color: black;
color: white;
border: 0px;
border-radius: 0px;
padding: 0.3em 1em;
margin-left: 2em;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
}

.cookie-btn
{
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
background-position: 0 100%;
background-size: 100% 1px;
padding-left: 0.3em;
padding-right: 0.3em;
margin-left: 1.5em;
}

.cookie-btn:hover
{
background-size: 100% 100%;
}

.mc4wp-response p
{
display: inline;
float: left;
margin-top: 0px !important;
font-family: "Times New Roman", serif;
font-style: italic;
}

section.full.newsletter .mc4wp-response p
{
text-align: center;
width: 100%;
}

section.test-color
{
background-color: red !important;
}


@media screen and (min-width: 768px)
{

	#ss section.plaintext h2
	{
	-webkit-animation-duration: 0.99s;
	-ms-animation-duration: 0.99s;
	-o-animation-duration: 0.99s;
	animation-duration: 0.99s;
	-webkit-animation-name: anim-fade-in-side-right;
	-ms-animation-name: anim-fade-in-side-right;
	-o-animation-name: anim-fade-in-side-right;
	animation-name: anim-fade-in-side-right;
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	}

	#ss section.plaintext h2:nth-of-type(2) {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}


	#ss section.plaintext .readmore-box, #ss section.plaintext .service, #ss section.plaintext .contacttype, #ss section.plaintext .distinction
	{
	-webkit-animation-delay: 0.29s;
	-ms-animation-delay: 0.29s;
	-o-animation-delay: 0.29s;
	animation-delay: 0.29s;
	-webkit-animation-duration: 0.99s;
	-ms-animation-duration: 0.99s;
	-o-animation-duration: 0.99s;
	animation-duration: 0.99s;
	-webkit-animation-name: anim-fade-in-side-right-big;
	-ms-animation-name: anim-fade-in-side-right-big;
	-o-animation-name: anim-fade-in-side-right-big;
	animation-name: anim-fade-in-side-right-big;
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	}

	#ss section.plaintext p, #ss section.plaintext ul, #ss section.plaintext .readmore-box
	{
	-webkit-animation-delay: 0.49s;
	-ms-animation-delay: 0.49s;
	-o-animation-delay: 0.49s;
	animation-delay: 0.49s;
	-webkit-animation-duration: 0.99s;
	-ms-animation-duration: 0.99s;
	-o-animation-duration: 0.99s;
	animation-duration: 0.99s;
	-webkit-animation-name: anim-fade-in-side-right-big;
	-ms-animation-name: anim-fade-in-side-right-big;
	-o-animation-name: anim-fade-in-side-right-big;
	animation-name: anim-fade-in-side-right-big;
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	}

	#ss section.plaintext p:nth-of-type(0) {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext p:nth-of-type(1) {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext p:nth-of-type(2) {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext p:nth-of-type(3) {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext p:nth-of-type(4) {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext p:nth-of-type(5) {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext p:nth-of-type(6) {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext p:nth-of-type(7) {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext p:nth-of-type(8) {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext p:nth-of-type(9) {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}
	#ss section.plaintext p:nth-of-type(10) {-webkit-animation-delay: 2.49s; -ms-animation-delay: 2.49s; -o-animation-delay: 2.49s; animation-delay: 2.49s;}
	#ss section.plaintext p:nth-of-type(11) {-webkit-animation-delay: 2.69s; -ms-animation-delay: 2.69s; -o-animation-delay: 2.69s; animation-delay: 2.69s;}
	#ss section.plaintext p:nth-of-type(12) {-webkit-animation-delay: 2.89s; -ms-animation-delay: 2.89s; -o-animation-delay: 2.89s; animation-delay: 2.89s;}
	#ss section.plaintext p:nth-of-type(13) {-webkit-animation-delay: 3.09s; -ms-animation-delay: 3.09s; -o-animation-delay: 3.09s; animation-delay: 3.09s;}
	#ss section.plaintext p:nth-of-type(14) {-webkit-animation-delay: 3.29s; -ms-animation-delay: 3.29s; -o-animation-delay: 3.29s; animation-delay: 3.29s;}
	#ss section.plaintext p:nth-of-type(15) {-webkit-animation-delay: 3.49s; -ms-animation-delay: 3.49s; -o-animation-delay: 3.49s; animation-delay: 3.49s;}
	#ss section.plaintext p:nth-of-type(16) {-webkit-animation-delay: 3.69s; -ms-animation-delay: 3.69s; -o-animation-delay: 3.69s; animation-delay: 3.69s;}
	#ss section.plaintext p:nth-of-type(17) {-webkit-animation-delay: 3.89s; -ms-animation-delay: 3.89s; -o-animation-delay: 3.89s; animation-delay: 3.89s;}
	#ss section.plaintext p:nth-of-type(18) {-webkit-animation-delay: 4.09s; -ms-animation-delay: 4.09s; -o-animation-delay: 4.09s; animation-delay: 4.09s;}
	#ss section.plaintext p:nth-of-type(19) {-webkit-animation-delay: 4.29s; -ms-animation-delay: 4.29s; -o-animation-delay: 4.29s; animation-delay: 4.29s;}
	#ss section.plaintext p:nth-of-type(20) {-webkit-animation-delay: 4.49s; -ms-animation-delay: 4.49s; -o-animation-delay: 4.49s; animation-delay: 4.49s;}
	#ss section.plaintext p:nth-of-type(21) {-webkit-animation-delay: 4.69s; -ms-animation-delay: 4.69s; -o-animation-delay: 4.69s; animation-delay: 4.69s;}
	#ss section.plaintext p:nth-of-type(22) {-webkit-animation-delay: 4.89s; -ms-animation-delay: 4.89s; -o-animation-delay: 4.89s; animation-delay: 4.89s;}

	#ss section.plaintext ul:nth-of-type(0) {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext ul:nth-of-type(1) {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext ul:nth-of-type(2) {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext ul:nth-of-type(3) {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext ul:nth-of-type(4) {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext ul:nth-of-type(5) {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext ul:nth-of-type(6) {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext ul:nth-of-type(7) {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext ul:nth-of-type(8) {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext ul:nth-of-type(9) {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}
	#ss section.plaintext ul:nth-of-type(10) {-webkit-animation-delay: 2.49s; -ms-animation-delay: 2.49s; -o-animation-delay: 2.49s; animation-delay: 2.49s;}
	#ss section.plaintext ul:nth-of-type(11) {-webkit-animation-delay: 2.69s; -ms-animation-delay: 2.69s; -o-animation-delay: 2.69s; animation-delay: 2.69s;}
	#ss section.plaintext ul:nth-of-type(12) {-webkit-animation-delay: 2.89s; -ms-animation-delay: 2.89s; -o-animation-delay: 2.89s; animation-delay: 2.89s;}
	#ss section.plaintext ul:nth-of-type(13) {-webkit-animation-delay: 3.09s; -ms-animation-delay: 3.09s; -o-animation-delay: 3.09s; animation-delay: 3.09s;}
	#ss section.plaintext ul:nth-of-type(14) {-webkit-animation-delay: 3.29s; -ms-animation-delay: 3.29s; -o-animation-delay: 3.29s; animation-delay: 3.29s;}
	#ss section.plaintext ul:nth-of-type(15) {-webkit-animation-delay: 3.49s; -ms-animation-delay: 3.49s; -o-animation-delay: 3.49s; animation-delay: 3.49s;}
	#ss section.plaintext ul:nth-of-type(16) {-webkit-animation-delay: 3.69s; -ms-animation-delay: 3.69s; -o-animation-delay: 3.69s; animation-delay: 3.69s;}
	#ss section.plaintext ul:nth-of-type(17) {-webkit-animation-delay: 3.89s; -ms-animation-delay: 3.89s; -o-animation-delay: 3.89s; animation-delay: 3.89s;}
	#ss section.plaintext ul:nth-of-type(18) {-webkit-animation-delay: 4.09s; -ms-animation-delay: 4.09s; -o-animation-delay: 4.09s; animation-delay: 4.09s;}
	#ss section.plaintext ul:nth-of-type(19) {-webkit-animation-delay: 4.29s; -ms-animation-delay: 4.29s; -o-animation-delay: 4.29s; animation-delay: 4.29s;}
	#ss section.plaintext ul:nth-of-type(20) {-webkit-animation-delay: 4.49s; -ms-animation-delay: 4.49s; -o-animation-delay: 4.49s; animation-delay: 4.49s;}
	#ss section.plaintext ul:nth-of-type(21) {-webkit-animation-delay: 4.69s; -ms-animation-delay: 4.69s; -o-animation-delay: 4.69s; animation-delay: 4.69s;}
	#ss section.plaintext ul:nth-of-type(22) {-webkit-animation-delay: 4.89s; -ms-animation-delay: 4.89s; -o-animation-delay: 4.89s; animation-delay: 4.89s;}

	#ss section.plaintext .service:nth-of-type(0) {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .service:nth-of-type(1) {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .service:nth-of-type(2) {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .service:nth-of-type(3) {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .service:nth-of-type(4) {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .service:nth-of-type(5) {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .service:nth-of-type(6) {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .service:nth-of-type(7) {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .service:nth-of-type(8) {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .service:nth-of-type(9) {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}

	#ss section.plaintext .service:nth-of-type(0) p {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .service:nth-of-type(1) p {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .service:nth-of-type(2) p {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .service:nth-of-type(3) p {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .service:nth-of-type(4) p {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .service:nth-of-type(5) p {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .service:nth-of-type(6) p {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .service:nth-of-type(7) p {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .service:nth-of-type(8) p {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .service:nth-of-type(9) p {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}

	#ss section.plaintext .contacttype:nth-of-type(0) {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .contacttype:nth-of-type(1) {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .contacttype:nth-of-type(2) {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .contacttype:nth-of-type(3) {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .contacttype:nth-of-type(4) {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .contacttype:nth-of-type(5) {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .contacttype:nth-of-type(6) {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .contacttype:nth-of-type(7) {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .contacttype:nth-of-type(8) {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .contacttype:nth-of-type(9) {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}

	#ss section.plaintext .contacttype:nth-of-type(0) p {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .contacttype:nth-of-type(1) p {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .contacttype:nth-of-type(2) p {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .contacttype:nth-of-type(3) p {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .contacttype:nth-of-type(4) p {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .contacttype:nth-of-type(5) p {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .contacttype:nth-of-type(6) p {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .contacttype:nth-of-type(7) p {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .contacttype:nth-of-type(8) p {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .contacttype:nth-of-type(9) p {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}

	#ss section.plaintext .distinction:nth-of-type(0) {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .distinction:nth-of-type(1) {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .distinction:nth-of-type(2) {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .distinction:nth-of-type(3) {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .distinction:nth-of-type(4) {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .distinction:nth-of-type(5) {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .distinction:nth-of-type(6) {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .distinction:nth-of-type(7) {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .distinction:nth-of-type(8) {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .distinction:nth-of-type(9) {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}

	#ss section.plaintext .distinction:nth-of-type(0) p {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .distinction:nth-of-type(1) p {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .distinction:nth-of-type(2) p {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .distinction:nth-of-type(3) p {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .distinction:nth-of-type(4) p {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .distinction:nth-of-type(5) p {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .distinction:nth-of-type(6) p {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .distinction:nth-of-type(7) p {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .distinction:nth-of-type(8) p {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .distinction:nth-of-type(9) p {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}

	#ss section.plaintext .distinction:nth-of-type(0) .readmore-box {-webkit-animation-delay: 0.49s; -ms-animation-delay: 0.49s; -o-animation-delay: 0.49s; animation-delay: 0.49s;}
	#ss section.plaintext .distinction:nth-of-type(1) .readmore-box {-webkit-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -o-animation-delay: 0.69s; animation-delay: 0.69s;}
	#ss section.plaintext .distinction:nth-of-type(2) .readmore-box {-webkit-animation-delay: 0.89s; -ms-animation-delay: 0.89s; -o-animation-delay: 0.89s; animation-delay: 0.89s;}
	#ss section.plaintext .distinction:nth-of-type(3) .readmore-box {-webkit-animation-delay: 1.09s; -ms-animation-delay: 1.09s; -o-animation-delay: 1.09s; animation-delay: 1.09s;}
	#ss section.plaintext .distinction:nth-of-type(4) .readmore-box {-webkit-animation-delay: 1.29s; -ms-animation-delay: 1.29s; -o-animation-delay: 1.29s; animation-delay: 1.29s;}
	#ss section.plaintext .distinction:nth-of-type(5) .readmore-box {-webkit-animation-delay: 1.49s; -ms-animation-delay: 1.49s; -o-animation-delay: 1.49s; animation-delay: 1.49s;}
	#ss section.plaintext .distinction:nth-of-type(6) .readmore-box {-webkit-animation-delay: 1.69s; -ms-animation-delay: 1.69s; -o-animation-delay: 1.69s; animation-delay: 1.69s;}
	#ss section.plaintext .distinction:nth-of-type(7) .readmore-box {-webkit-animation-delay: 1.89s; -ms-animation-delay: 1.89s; -o-animation-delay: 1.89s; animation-delay: 1.89s;}
	#ss section.plaintext .distinction:nth-of-type(8) .readmore-box {-webkit-animation-delay: 2.09s; -ms-animation-delay: 2.09s; -o-animation-delay: 2.09s; animation-delay: 2.09s;}
	#ss section.plaintext .distinction:nth-of-type(9) .readmore-box {-webkit-animation-delay: 2.29s; -ms-animation-delay: 2.29s; -o-animation-delay: 2.29s; animation-delay: 2.29s;}



	section.project-intro .col.white, section.project-intro.scrolled-past .col.white
	{
	opacity: 0;
	-webkit-transition: all 2.5s;
	transition: all 2.5s;
	-webkit-transform: translateX(-200px);
	-ms-transform: translateX(-200px);
	-o-transform: translateX(-200px);
	transform: translateX(-200px);
	}
	section.project-intro.scrolled-animate .col.white
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-intro .project-content-center-middle, section.project-intro.scrolled-past .project-content-center-middle
	{
	opacity: 0;
	margin-left: 140px;
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	}
	section.project-intro.scrolled-animate .project-content-center-middle
	{	
	opacity: 1;
	}


	section.project-intro .project-content-left-middle, section.project-intro.scrolled-past .project-content-left-middle
	{
	opacity: 0;
	margin-left: 140px;
	-webkit-transition: all 2.5s;
	transition: all 2.5s;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
	}
	section.project-intro.scrolled-animate .project-content-left-middle
	{	
	opacity: 1;
	margin-left: 40px;
	}


	section.project-motto .project-motto-text p, section.project-motto.scrolled-past .project-motto-text p
	{	
	opacity: 0;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	}
	section.project-motto.scrolled-animate .project-motto-text p
	{	
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}


	section.project-fullphoto .bgbox {overflow: hidden;}
	section.project-fullphoto .bgbox .bg, section.project-fullphoto.scrolled-past .bgbox .bg
	{	
	/* -webkit-transform-origin: 0% 50%; */
	/* -ms-transform-origin: 0% 50%; */
	/* -o-transform-origin: 0% 50%; */
	/* transform-origin: 0% 50%; */
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	}
	section.project-fullphoto.scrolled-animate .bgbox .bg
	{	
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}


	section.project-golden .bgbox.right .bg, section.project-golden.scrolled-past .bgbox.right .bg
	{	
	opacity: 0;
	-webkit-transform: translateX(200px);
	-ms-transform: translateX(200px);
	-o-transform: translateX(200px);
	transform: translateX(200px);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: 0.9s;
	transition-delay: 0.9s;
	}
	section.project-golden.scrolled-past .bgbox.right .bg
	{	
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	}
	section.project-golden.scrolled-animate .bgbox.right .bg
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-golden .bgbox.top .bg, section.project-golden.scrolled-past .bgbox.top .bg
	{	
	opacity: 0;
	-webkit-transform: translateX(200px);
	-ms-transform: translateX(200px);
	-o-transform: translateX(200px);
	transform: translateX(200px);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	}
	section.project-golden.scrolled-past .bgbox.top .bg
	{	
	-webkit-transition-delay: 0.9s;
	transition-delay: 0.9s;
	}
	section.project-golden.scrolled-animate .bgbox.top .bg
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-golden .project-golden-text, section.project-golden.scrolled-past .project-golden-text
	{	
	opacity: 0;
	-webkit-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	}
	section.project-golden.scrolled-animate .project-golden-text
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-halfhalf .project-halfhalf-text, section.project-halfhalf.scrolled-past .project-halfhalf-text
	{	
	opacity: 0;
	-webkit-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	}
	section.project-halfhalf.scrolled-animate .project-halfhalf-text
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-halfhalf .bgbox .bg, section.project-halfhalf.scrolled-past .bgbox .bg
	{	
	opacity: 0;
	-webkit-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	}
	section.project-halfhalf.scrolled-animate .bgbox .bg
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-gallery .bgbox.gallery, section.project-gallery .scrolled-past .bgbox.gallery
	{	
	opacity: 0;
	-webkit-transform: translateX(200px);
	-ms-transform: translateX(200px);
	-o-transform: translateX(200px);
	transform: translateX(200px);
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	}
	section.project-gallery.scrolled-animate .bgbox.gallery
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}
}


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


	#ss section.plaintext h1,
	#ss section.plaintext h2,
	#ss section.plaintext p,
	#ss section.plaintext .distinction,
	#ss section.plaintext .service,
	#ss section.plaintext .clientcategory
	{
	opacity: 0;
	-webkit-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}

	#ss section.plaintext p,
	#ss section.plaintext .distinction,
	#ss section.plaintext .service,
	#ss section.plaintext .clientcategory
	{
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
	}

	#ss section.plaintext h1.scrolled-active,
	#ss section.plaintext h2.scrolled-active,
	#ss section.plaintext p.scrolled-active,
	#ss section.plaintext .distinction.scrolled-active,
	#ss section.plaintext .service.scrolled-active,
	#ss section.plaintext .clientcategory.scrolled-active
	{
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}

	section.project-intro .col.white, section.project-intro.scrolled-past .col.white
	{
	opacity: 0;
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-intro.scrolled-animate .col.white
	{	
	opacity: 1;
	}


	section.project-intro .project-content-center-middle, section.project-intro.scrolled-past .project-content-center-middle
	{
	opacity: 0;
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-intro.scrolled-animate .project-content-center-middle
	{	
	opacity: 1;
	}


	section.project-intro .project-content-left-middle, section.project-intro.scrolled-past .project-content-left-middle
	{
	opacity: 0;
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-intro.scrolled-animate .project-content-left-middle
	{	
	opacity: 1;
	}


	section.project-motto .project-motto-text p, section.project-motto.scrolled-past .project-motto-text p
	{	
	opacity: 0;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-motto.scrolled-animate .project-motto-text p
	{	
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}


	section.project-fullphoto .bgbox {overflow: hidden;}
	section.project-fullphoto .bgbox .bg, section.project-fullphoto.scrolled-past .bgbox .bg
	{	
	/* -webkit-transform-origin: 0% 50%; */
	/* -ms-transform-origin: 0% 50%; */
	/* -o-transform-origin: 0% 50%; */
	/* transform-origin: 0% 50%; */
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-fullphoto.scrolled-animate .bgbox .bg
	{	
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}


	section.project-golden .bgbox.right .bg, section.project-golden.scrolled-past .bgbox.right .bg
	{	
	opacity: 0;
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
	}
	section.project-golden.scrolled-past .bgbox.right .bg
	{	
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	}
	section.project-golden.scrolled-animate .bgbox.right .bg
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}


	section.project-golden .bgbox.top .bg, section.project-golden.scrolled-past .bgbox.top .bg
	{	
	opacity: 0;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	}
	section.project-golden.scrolled-past .bgbox.top .bg
	{	
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
	}
	section.project-golden.scrolled-animate .bgbox.top .bg
	{	
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}


	section.project-golden .project-golden-text, section.project-golden.scrolled-past .project-golden-text
	{	
	opacity: 0;
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-golden.scrolled-animate .project-golden-text
	{	
	opacity: 1;
	}


	section.project-halfhalf .project-halfhalf-text, section.project-halfhalf.scrolled-past .project-halfhalf-text
	{	
	opacity: 0;
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-halfhalf.scrolled-animate .project-halfhalf-text
	{	
	opacity: 1;
	}


	section.project-halfhalf .bgbox .bg, section.project-halfhalf.scrolled-past .bgbox .bg
	{	
	opacity: 0;
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-halfhalf.scrolled-animate .bgbox .bg
	{	
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}


	section.project-gallery .bgbox.gallery, section.project-gallery .scrolled-past .bgbox.gallery
	{	
	opacity: 0;
	-webkit-transform: translateX(200px);
	-ms-transform: translateX(200px);
	-o-transform: translateX(200px);
	transform: translateX(200px);
	-webkit-transition: all 0.9s;
	transition: all 0.9s;
	}
	section.project-gallery.scrolled-animate .bgbox.gallery
	{	
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	}
}