html {
	margin: 0;
}

body {
	margin: 0;
	background: white;
}

.left {
	float: left;
}

.right {
	float: right;
}

ul.nav li {
	display: inline-block;
	list-style: none;
}

section.work .project.mobileonly {
  display: none;
}

header {
	z-index: 10000;
	color: white;
	width: 100%;
	position: fixed;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.headerafter {
  margin-top: -10px!important;
}

.headerscroll {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: none;
}

.headerscroll h1, .headerscroll ul {
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.headerscroll .right, .headerscroll .left {
	margin-top: -10px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.headerfade .right, .headerfade .left, .headerfade .btn {
  opacity: 0!important;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

header .right, header .left {
	margin-top: 145px;
}

header .left.tablet {
	display: none;
}

header ul, header h1, footer ul, footer h1 {
	margin: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

header .right a, header .left a {
	color: black;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation-name: headerfade; /* Safari 4.0 - 8.0 */
		-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
		animation-name: headerfade;
		animation-duration: 2s;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
	}
	
	/* Safari 4.0 - 8.0 */
	@-webkit-keyframes headerfade {
	    0%   {opacity:0;}
	    100% {opacity:1;}
	}
	
	/* Standard syntax */
	@keyframes headerfade {
	    0%   {opacity:0;}
	    100% {opacity:1;}
	}
	
	
header .right a:hover, header .left a:hover, footer a:hover {
	opacity: 0.3;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

header .center {
	margin: 0 auto;
	display: block;
	position: relative;
	width: 114px;
	/*height: 92;*/
	z-index: 999999;
}

header .center a {
	width: 114px;
	height: 114px;
	display: block;
	top: 95px;
	position: fixed;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-animation-name: logofade; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: logofade;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes logofade {
    0%   {opacity:0; top:80px;}
    100% {opacity:1; top:95px;}
}

/* Standard syntax */
@keyframes logofade {
    0%   {opacity:0; top:80px;}
    100% {opacity:1; top:95px;}
}

header .center a.logo {
	background: url('../images/mainlogo.svg') no-repeat left top;
	z-index: 999999;
}


header .center a:hover {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0;
}

header .center .logowhite {
	background: url('../images/mainlogowhite.svg') no-repeat left top;
	width: 114px;
	height: 114px;
	display: block;
	top: 95px;
	position: fixed;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	z-index: 1000;
	opacity: 0;
}

header .logo:hover ~ .logowhite {
opacity: 1;
}

header .circle {
	width: 10px;
	height: 10px;
	opacity: 0;
	background: #0000FF;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px;
	position: fixed;
	text-align: center;
  top: 147px;
  /*left: 51px;*/
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 100;
	left: 0;
	right: 0;
	margin: auto;
}

header .logo:hover ~ .circle {
  opacity: 1;
  top: 82px;
  /*left: -13px;*/
	left: 0;
	right: 0;
	margin: auto;
  width: 140px;
  height: 140px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #0000FF;
  z-index: 100;
}

.test-grey {
  background: red;
}




/*** WORK ***/

body.home section.work {
  padding-top: 330px;
  padding-bottom: 100px;
  display: block;
  overflow: hidden;
  width: 100%;
}

section.work .project .logomobile {
  height: 100%;
  width: 200px;
  display: block;
  margin: 0 auto;
  background: url('../images/mainlogo.svg') no-repeat center center;
}

section.work .project {
  width: 240px;
  margin-right: 22px;
  margin-left: 22px;
  margin-bottom: 50px;
  display: inline-block;
  vertical-align: top;
  visibility: hidden;
}

section.work .projectload {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
  opacity: 0;
  visibility: visible;
  -webkit-animation: workfade 1s ease forwards;
         -moz-animation: workfade 1s ease forwards;
           -o-animation: workfade 1s ease forwards;
              animation: workfade 1s ease forwards;
  }
  
  @-webkit-keyframes workfade {
    0% {
			visibility: visible;
			opacity: 0;
      -webkit-transform: translateY(40px); /* WebKit */
			-moz-transform: translateY(40px); /* Mozilla */
			-o-transform: translateY(40px); /* Opera */
			-ms-transform: translateY(40px); /* Internet Explorer */
			transform: translateY(40px); /* CSS3 */
    }
    100% {
			visibility: visible;
			opacity: 1;
      -webkit-transform: translateY(0px); /* WebKit */
      -moz-transform: translateY(0px); /* Mozilla */
      -o-transform: translateY(0px); /* Opera */
      -ms-transform: translateY(0px); /* Internet Explorer */
      transform: translateY(0px); /* CSS3 */
    }
  }
  
  @keyframes workfade {
    0% {
			visibility: visible;
			opacity: 0;
      -webkit-transform: translateY(40px); /* WebKit */
      -moz-transform: translateY(40px); /* Mozilla */
      -o-transform: translateY(40px); /* Opera */
      -ms-transform: translateY(40px); /* Internet Explorer */
      transform: translateY(40px); /* CSS3 */
    }
    100% {
			visibility: visible;
			opacity: 1;
      -webkit-transform: translateY(0px); /* WebKit */
      -moz-transform: translateY(0px); /* Mozilla */
      -o-transform: translateY(0px); /* Opera */
      -ms-transform: translateY(0px); /* Internet Explorer */
      transform: translateY(0px); /* CSS3 */
    }
  }
  
section.work .project.two {
  -webkit-animation-delay: .10s;
  -moz-animation-delay: .10s;
  -o-animation-delay: .10s;
  animation-delay: .10s;
}

section.work .project.three {
  -webkit-animation-delay: .20s;
  -moz-animation-delay: .20s;
  -o-animation-delay: .20s;
  animation-delay: .20s;
}

section.work .project.four {
  -webkit-animation-delay: .30s;
  -moz-animation-delay: .30s;
  -o-animation-delay: .30s;
  animation-delay: .30s;
}

section.work .project.five {
  -webkit-animation-delay: .40s;
  -moz-animation-delay: .40s;
  -o-animation-delay: .40s;
  animation-delay: .40s;
}

section.work .project.six {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
  -o-animation-delay: .50s;
  animation-delay: .50s;
}

section.work .project.seven {
  -webkit-animation-delay: .60s;
  -moz-animation-delay: .60s;
  -o-animation-delay: .60s;
  animation-delay: .60s;
}

section.work .project.eight {
  -webkit-animation-delay: .70s;
  -moz-animation-delay: .70s;
  -o-animation-delay: .70s;
  animation-delay: .70s;
}

section.work .project.nine {
  -webkit-animation-delay: .80s;
  -moz-animation-delay: .80s;
  -o-animation-delay: .80s;
  animation-delay: .80s;
}

section.work .project.ten {
  -webkit-animation-delay: .90s;
  -moz-animation-delay: .90s;
  -o-animation-delay: .90s;
  animation-delay: .90s;
}

section.work .project.eleven {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

section.work .project a {
  display: block;
}

section.work .project .top {
  width: 100%;
  height: 200px;
  position: relative;
}

section.work .project .top .inner {
  position: absolute;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: 0;
}

section.work .project:hover .top .inner {
  top: -10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

section.work .project .image {
  width: 100%;
  height: 200px;
  display:flex;
  align-items:center;
  justify-content:center;
}


section.work .project .mellowidentityimg img {
  width: 210px;
} 

section.work .project .woderid img {
	max-width: 130px;
}

section.work .project .wandleid img {
	max-width: 146px;
}

/*section.work .project {
	filter: grayscale(100%);
}

section.work .project:hover  {
	filter: none;
}*/

section.work .project .woder-website img {
  width: 250px;
} 

section.work .project .pmc-website img {
  width: 181px;
} 

section.work .project .description {
  color: #929292;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 20px;
  text-transform: uppercase;
  text-align: justify;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

section.work .project .description span {
  color: black;
  -webkit-transition: all 0.5s ease;
           -moz-transition: all 0.5s ease;
             -o-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;   
}

section.work .project:hover .description {
  color: #CCC;
  -webkit-transition: all 0.5s ease;
           -moz-transition: all 0.5s ease;
             -o-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;    
}

section.work .project:hover .description span {
  color: #0000FF;
  font-weight: 500; 
  -webkit-transition: all 0.5s ease;
           -moz-transition: all 0.5s ease;
             -o-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;     
}



/*** FOOTER ***/


footer {
  display: block;
  padding-bottom: 100px;
  position: relative;
  vertical-align: top;
  width: 100%;
}

footer a {
  color: black;
} 

footer .center {
  margin: 0 auto -13px;
  text-align: center;
}

footer .center li:first-child, footer .center ul {
  margin-left: 0;
  padding-left: 0;
}




/*** MOBILE MENU ***/

.mobilemenu {
  position: fixed;
  display: block;
  width: 100%;
  z-index: 10000000;
}

.mobilemenu .row {
  position: relative;
}

.container {
  position: absolute;
  width: 100%;
  heigh: 100%;
  text-align: center;
  top: 40%;
  left: 0;
  margin: 0 auto;
  font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif;
}
.container p {
  font-size: 20px;
}
.container a {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #FF5252;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  top: 5px;
}
.container a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  -webkit-transition: .35s ease;
  transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
  width: 100%;
}

.button_container {
  display: none;
  position: absolute;
  top: 117px;
  height: 27px;
  width: 25px;
  cursor: pointer;
  z-index: 10000000;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
  right: 20px;
  -webkit-animation-name: headerfade; /* Safari 4.0 - 8.0 */
  	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  	animation-name: headerfade;
  	animation-duration: 2s;
  	-webkit-animation-timing-function: ease;
  	animation-timing-function: ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(9px) translateX(0) rotate(45deg);
          transform: translateY(9px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
          transform: translateY(-8px) translateX(0) rotate(-45deg);
  background: #FFF;
}

.button_container.active .bottom {
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
          transform: translateY(-8px) translateX(0) rotate(-45deg);
  background: #FFF;
}

.button_container span {
  background: black;
  border: none;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.button_container span:nth-of-type(2) {
  top: 8px;
}
.button_container span:nth-of-type(3) {
  top: 16px;
}

.overlay {
  position: fixed;
  background: #0000FF;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s;
  transition: opacity .35s, visibility .35s;
  overflow: hidden;
  z-index: 1000000;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .05s;
          animation-delay: .05s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .10s;
          animation-delay: .10s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .15s;
          animation-delay: .15s;
}
.overlay nav {
  position: relative;
  /*height: 70%;
  top: 55%;*/
	
	height: 275px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	
  /*-webkit-transform: translateY(-50%);
          transform: translateY(-50%);*/
  font: 14px "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 10px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  /*height: 25%;*/
  /*height: calc(100% / 4);*/
	height: 130px;
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}

.overlay ul li a:hover {
	opacity: 0.5;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
/*.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}*/

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    top: 10%;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    top: 10%;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

/*** FLICKITY ***/


.home .main-carousel {
  height: 100%;
}

.home .main-carousel:focus {
  outline: none !important;
}

.home .carousel-cell {
  width: 100%; /* full width */
  height: 160px; /* height of carousel */
  margin-right: 10px;
  background: red;
}