/*  RETINA IMAGES */
@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {

		.image1 {
		background-image: url('../images/mainlogo@2x.png');
		-webkit-background-size: 114px;
		-moz-background-size: 114px;
		-o-background-size: 114px;
		background-size: 114px;
	}

}

@media only screen and (-webkit-min-device-pixel-ratio: 3) and (min-width: 768px),
only screen and (min--moz-device-pixel-ratio: 3) and (min-width: 768px),
only screen and (-o-min-device-pixel-ratio: 3/1) and (min-width: 768px),
only screen and (min-device-pixel-ratio: 3) and (min-width: 768px),
only screen and (min-resolution: 3dppx){
  /* dpr 3 */
  .image1{
      background-image:url('image1@3x.jpg');
      -webkit-background-size: 114px;
      -moz-background-size: 114px;
      -o-background-size: 114px;
      background-size: 114px;
  }
}


/*  DESKTOP HD
================================================== */

@media screen and (min-width: 1540px) { 
	.row {width: 1400px; margin: 0 auto; padding-right: 20px; padding-left: 20px;
	}
	
	section.work .project.one, section.work .project.six, section.work .project.eleven, section.work .project.sixteen {
	  margin-left: 0;
	}
	
	section.work .project.five, section.work .project.ten, section.work .project.fifhteen, section.work .project.twenty {
	  margin-right: 0;
	}
	
}


/*  DESKTOP 
================================================== */

@media screen and (min-width: 1280px) and (max-width: 1539px) { 
	.row {width: 1080px; margin: 0 auto; padding-right: 20px; padding-left: 20px;
	}
	
	section.work .project {
	  width: 240px;
	  margin-right: 17px;
	  margin-left: 17px;
	}
	
	section.work .project.one, section.work .project.five, section.work .project.nine, section.work .project.thirteen {
	  margin-left: 0;
	}
	
	section.work .project.four, section.work .project.eight, section.work .project.twelve, section.work .project.sixteen {
	  margin-right: 0;
	}

	
	body.about section.content .about-pic-two, body.about section.content .about-pic-three, body.about section.content .about-pic-four  {
		width: 350px;
	}
	
	body.about section.content .about-pic-two {
		right: -157px;
	}
	
	
	
	
}


/*  DESKTOP 
================================================== */

@media screen and (min-width: 1080px) and (max-width: 1279px) { 
	.row {width: 920px; margin: 0 auto; padding-right: 20px;
	padding-left: 20px;}
	
	section.work .project {
	  width: 200px;
	  margin-right: 17px;
	  margin-left: 17px;
	}
	
	section.work .project.one, section.work .project.five, section.work .project.nine, section.work .project.thirteen {
	  margin-left: 0;
	}
	
	section.work .project.four, section.work .project.eight, section.work .project.twelve, section.work .project.sixteen {
	  margin-right: 0;
	}
	
	.project-page section.related-project .content, .project-page section.related-project .content img {
		width: 80%;
	}
	
	
	body.about section.content .about-pic-two, body.about section.content .about-pic-three, body.about section.content .about-pic-four  {
		width: 350px;
	}
	
	
	body.about section.content .about-pic-one {
		left: -140px;
	}
	
	body.about section.content .about-pic-two {
		right: -157px;
	}
	
	body.about section.content .about-pic-three {
		left: -160px;
	}
	
	body.about section.content .about-pic-four {
		right: -110px;
	}
	
	
	
	
}



/* #Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 1079px) {
	/*.project-page section.intro {
		background: red;
	}*/
	
	.row {width: 680px; margin: 0 auto; padding-right: 20px;
	padding-left: 20px;}
	
	.button_container {
	  display: block;
	}
	
	header .left.tablet {
		display: block;
	}
	
	header .left.desktop {
		display: none;
	}
	
	header, .mobilemenu {
	  position: relative;
	}
	
	@-webkit-keyframes logofade {
	    0%   {opacity:0; top:50px;}
	    100% {opacity:1; top:70px;}
	}
	
	/* Standard syntax */
	@keyframes logofade {
	    0%   {opacity:0; top:50px;}
	    100% {opacity:1; top:70px;}
	}
	
	header .right li {
	  margin-left: 15px;
	  display: block;
	  text-align: right;
	  margin-bottom: 20px;
	}
	
	header .center a, header .center .logowhite {
	  top: 70px;
	}
	
	header .circle {
	  top: 123px;
	}
	
	header .logo:hover ~ .circle {
	  top: 57px;
	}
	
	header .right {
	  display: none;
	}
	
	.home header .left, header .left {
	  margin-top: 125px;
	}
	
	body.home section.work {
	  padding-top: 120px;
	}
	
	section.work .project {
	  width: 200px;
	  margin-right: 17px;
	  margin-left: 17px;
	}
	
	section.work .project.one, section.work .project.four, section.work .project.seven, section.work .project.ten {
	  margin-left: 0;
	}
	
	section.work .project.three, section.work .project.six, section.work .project.nine, section.work .project.thirteen {
	  margin-right: 0;
	}
	
	.project-page section.related-project .content, .project-page section.related-project .content img {
		width: 80%;
	}
	
	.project-page section.related-project .content p.title {
		letter-spacing: 2px;
		padding: 0;
		font-size: 9px;
		max-width: 155px;
		margin-bottom: 20px;
	}
	
	.project-page.woder-identity section.related-project .content .text {
		margin-top: 0;
	}
	
	
	
	/*** ABOUT ***/
	
	
	body.about section.content .bg-about-me {
		height: 850px;
	}
	
	body.about section.content .text-block {
		width: 325px;
	}
	
	body.about section.content .wrap {
		padding-top: 100px;
	}
	
	body.about section.content .text-block p.recognition {
		margin-top: 400px;
	}
	
	body.about section.content .about-pic {
		width: 300px;
	}
	
	
	body.about section.content .about-pic-one {
		top: 180px;
		left: -145px;
	}
	
	body.about section.content .text-block span.signature {
		top: 275px;
	}
	
	body.about section.content .about-pic-two {
		top: 530px;
		right: -150px;
	}
	
	body.about section.content .about-pic-three {
		left: -140px;
	}
	
	body.about section.content .about-pic-four {
		right: -120px;
	}
	
	body.about section.content .about-pic-five {
		margin-top: 75px;
	}
	
	body.about section.content .instagram {
		top: 875px;
		right: 83px;
	}



	
	
	
}




/*  #Mobile (Portrait)
================================================== */


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

  html, body {margin: 0; padding: 0;}
	
	body.home {
		overflow: hidden
	}
	
	section.work .project:hover .top .inner {
		top: 0;
	}
	
	section.work .project .top .inner {
		position: relative;
	}
	
	section.work .project .image, section.work .project .top {
		height: unset;
	}
	
	section.work .project .image {
		margin-bottom: 30px;
	}
	
	section.work .project .description {
		text-align: center;
	}
	
	section.work .project:hover .description {
		color: #929292;
	}
	
	section.work .project .description span {
		font-weight: 500;
	}
	
	section.work .project .description span.title {
		display: block;
		margin-bottom: 12px;
		color: #0000FF;
	}
	
	section.work .project .description span.dot {
		display: none;
	}
  
  .work .swipe {
    width: 30px;
    height: 30px;
    display: block;
    background: #0000FF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    position: absolute;
    right: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation: swipe 8s ease-in-out 1.5s forwards infinite;
    animation: swipe 8s ease-in-out 1.5s forwards infinite;
    visibility: hidden;
    }
    
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes swipe {
        0%   {width: 35px; height: 35px; opacity:0; visibility: hidden;}
        2% {width: 30px; height: 30px; opacity:1; transform: translateY(0px); visibility: visible;}
        25% {width: 30px; height: 30px; transform: translateX(-100px); opacity: 0;
          visibility: visible;}
        100% {width: 30px; height: 30px; transform: translateX(-100px); opacity: 0;
          visibility: visible;}
    }
    
    /* Standard syntax */
    @keyframes swipe {
        0%   {width: 35px; height: 35px; opacity:0; visibility: hidden;}
        2% {width: 30px; height: 30px; opacity:1; transform: translateY(0px); visibility: visible;}
        25% {width: 30px; height: 30px; transform: translateX(-100px); opacity: 0;
          visibility: visible;}
        100% {width: 30px; height: 30px; transform: translateX(-100px); opacity: 0;
          visibility: visible;}
    }
    
    .work .swipeshadow {
      width: 60px;
      height: 60px;
      display: block;
      background: #0000FF;
      -moz-border-radius: 10px;
      -webkit-border-radius: 70px;
      border-radius: 70px;
      position: absolute;
      right: 50px;
      top: 0;
      bottom: 0;
      margin: auto;
      -webkit-animation: swipeshadow 8s ease-in-out 1.5s forwards infinite;
      animation: swipeshadow 8s ease-in-out 1.5s forwards infinite;
      visibility: hidden;
    }
    
    @-webkit-keyframes swipeshadow {
        0%   {width: 30px; height: 30px; opacity:0; visibility: hidden;}
        1% {width: 30px; height: 30px; opacity:0.1; visibility: visible;}
        5% {width: 80px; height: 80px; opacity:0; visibility: visible; transform: translateX(18px)}
        100% {opacity: 0;}
    }
    
    @keyframes swipeshadow {
        0%   {width: 30px; height: 30px; opacity:0; visibility: hidden;}
        1% {width: 30px; height: 30px; opacity:0.1; visibility: visible;}
        5% {width: 80px; height: 80px; opacity:0; visibility: visible; transform: translateX(18px)}
        100% {opacity: 0;}
    }
    
    
  section.work .project.mobileonly {
    display: block;
  }

  body#top.home {
    height: 100%!important;
  }

	.row {margin: 0 auto;}
	
	.home header .center {
	  display: none;
	}
	
	header .center a, header .center .logowhite {
		top: -20px;
	}
	
	header .circle {
		top: 31px;
	}
	
	header .logo:hover ~ .circle {
		top: -31px;
	}
	
	@-webkit-keyframes logofade {
	    0%   {opacity:0; top:-50px;}
	    100% {opacity:1; top:-20px;}
	}
	
	/* Standard syntax */
	@keyframes logofade {
	    0%   {opacity:0; top:-50px;}
	    100% {opacity:1; top:-20px;}
	}
	
	.button_container {
	  display: block;
    top: 30px;
    left: 30px;
  }
	
	header .right, header .left {
	  display: none;
	}
	
	body.home section.work  {
	  height: 80vh;
	  padding: 0;
	  top: 0;
	  bottom: 0;
	  position: absolute;
	  margin: auto;
	}
	
	section.work .project {
	  width: 100%;
	  display: table;
	  margin: auto;
	  top: 0;
	  bottom: 0;
	  height: 100%;
	}
	
	section.work .project a {
	  display: table-cell;
	  vertical-align: middle;
	}
	
	section.work .project .description {
	  width: 250px;
	  margin: 0 auto;
	}
	
	
	
	.project-page section.related-project .content, .project-page section.related-project .content img {
		width: 80%;
	}
	
	.project-page section.related-project .content p.title {
		letter-spacing: 2px;
		padding: 0;
		font-size: 9px;
		max-width: 155px;
		margin-bottom: 20px;
	}
	
	.project-page.woder-identity section.related-project .content .text {
		margin-top: 10px;
	}
	
	.project-page section.related-project .separator {
		margin-bottom: 50px;
	}
	
	.project-page section.related-project .content .text {
		width: 90%;
		max-width: 300px;
	}

	footer {
	  display: none;
	}
	
	
	
	
	/*** ABOUT ***/
	
	
	body.about section.content .bg-about-me {
		display: none;
	}
	
	body.about section.content .wrap {
		padding: 0;
	}
	
	body.about section.content .text-block {
		width: 100%;
		margin-top: 0;
	}
	
	body.about section.content .aboutme-wrap {
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 220px;
		padding-bottom: 150px;
		background: #F6F6F6;
	}
	
	body.about section.content .recognition-wrap {
		padding-left: 40px;
		padding-right: 40px;
	}
	
	body.about section.content .text-block p.recognition {
		margin-top: 140px;
	}
	
	body.about section.content .about-me {
		margin: 0;
	}
	
	body.about section.content .text-block span.signature {
		display: none;
	}
	
	body.about section.content .text-block span.signature-mobile {
		width: 130px;
		height: 111px;
		background: url('../images/about/about-signature@2x.png') no-repeat left top;
		display: block;
		margin-top: -35px;
		margin-left: 138px;
		display: block;
		-webkit-background-size: 128px;
		-moz-background-size: 128px;
		-o-background-size: 128px;
		background-size: 128px;
		}
	
	body.about section.content .about-pic {
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin-left: auto;
		margin-right: auto;
		display: block;
		width: 80%;
		max-width: 389px;
		margin-bottom: 30px;
	}
	
	body.about section.content .about-pic-five {
		margin-top: 0px;
		margin-bottom: 80px;
	}
	
	
	body.about section.content .instagram {
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin-left: auto;
		margin-right: auto;
		display: block;
		text-align: center;
		
		width: 100%;
		margin-top: 80px;
		margin-bottom: 0px;
		padding: 90px 0;
		border-top: 1px solid #EEE;
		
	}
	
	
	
	
	
}



/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */

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


}





/* IPHONE XS MAX LANDSCAPE */

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) {

.home header .center a, header .center .logowhite {
	top: -20px;
}

.home header .circle {
	top: 31px;
}

.home header .logo:hover ~ .circle {
	top: -31px;
}

.home header .left {
	margin-top: 35px!important;
}

.home .button_container {
	top: 32px!important;
}

@-webkit-keyframes logofade {
    0%   {opacity:0; top:-40px;}
    100% {opacity:1; top:-20px;}
}

/* Standard syntax */
@keyframes logofade {
    0%   {opacity:0; top:-40px;}
    100% {opacity:1; top:-20px;}
}


}





/* DESKTOP ONLY */

@media only screen and (min-width : 960px) {
	
}


/* MOBILE ONLY */

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

  .flickity-prev-next-button {
    display: none;
  }

}


/* MOBILE LANDSCAPE ONLY */

@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation:landscape) {

}


/* TABLETS (LANDSCAPE & PORTRAIT) ONLY */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  header {
    position: relative;
  }
  
  header .right, header .left {
  	-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;
  }
}


/* TABLETS (LANDSCAPE) ONLY */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation:landscape) {

  body.home section.work {
    padding-top: 110px;
  }
  
  header .circle {
    top: 123px;
  }
  
  header .logo:hover ~ .circle {
    top: 57px;
  }
  
  header .center .logowhite, header .center a.logo {
    top: 70px;
  }
  
  header .right, header .left {
  	margin-top: 115px;
  }
  
  @-webkit-keyframes logofade {
      0%   {opacity:0; top:50px;}
      100% {opacity:1; top:70px;}
  }
  
  /* Standard syntax */
  @keyframes logofade {
      0%   {opacity:0; top:50px;}
      100% {opacity:1; top:70px;}
  }
  

}


/* TABLETS (PORTRAIT) ONLY */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}