/*
#screen-width {
  position: fixed;
  top: 20px;
  left: 20px;
  color: #000;
  display: block;
  z-index: 4000;
} */

html, body, img {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
  font-size: 100%;
  /* background-color: #001B2E; */
  background-color: #FFF;
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}

#header, #footer {
  height: 40px;

  background-image: linear-gradient(-225deg, rgba(42,245,152,1), rgba(76,195,255,1), rgba(124,100,213,1), rgba(255,5,124,1), rgba(255,154,68,1));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc3ff', endColorstr='#ff057c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-size: 400% 400%;

  -webkit-animation: Gradient 30s ease infinite;
  -moz-animation: Gradient 30s ease infinite;
  -ms-animation: Gradient 30s ease infinite;
  animation: Gradient 30s ease infinite;
}

#header {
  text-align: left;
  position: fixed;
  width: 100%;
  z-index: 2000;
}

#footer {
  text-align: center;
  clear: both;
}

#header a img, #footer a img {
  margin: 10px 12px;
  width: 20px;
  height: 20px;
}

.previous {
  float: left;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.next {
  float: right;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#works {
  padding-top: 40px;
  /* compensate fixed top bar */
}

.presentation-text {
  float: left;
  padding: 0px 80px;
  background-color: #FFF;
}

.presentation-text div {
  /* text container */
  display: table-cell;
  vertical-align: middle;
  height: 45vw;
}

.presentation-text h1 {
  font-weight: 800;
  color: #001B2E;
  font-size: 2.5em;
}

.presentation-text h5 {
  color: #416275;
  font-size: 1.2em;
}

.presentation-text p {
  color: #aab;
  font-size: 1.2em;
}

.description-text {
  float: left;
  padding: 80px 80px;
  text-align: center;
  font-size: 1.2em;
  font-weight: 100;
}

.arrow-sml {
  width: 70px;
  height: 35px;
  margin: 20px 0 -50px 0;
}

.work-image {
  float: left;
  height: 50vw;
  padding: 0;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.website-laptop {
  position: absolute;
  /* background-color: red; */
  /* opacity: 0.5; */

  top:18.3%;
  left: 28.7%;
  width: 42.6%;
  height: 59.5%;
}

.website-tablet {
  position: absolute;
  /* background-color: red; */
  /* opacity: 0.5; */

  top:13.8%;
  left: 28.3%;
  width: 43.4%;
  height: 72.1%;
}

.website-desktop {
  position: absolute;
  /* background-color: red;
  opacity: 0.5; */

  top:7.3%;
  left: 26.5%;
  width: 47%;
  height: 62.5%;
}

.website-video {
  position: absolute;
  /* background-color: red;
  opacity: 0.5; */

  top:18%;
  left: 26.5%;
  width: 47%;
  height: 62.5%;
}

.website img, .website video {
    width:100%;
    height: 100%;
}

/* @media (min-width: 1281px) and (max-width: 1920px) {

} */

@media (min-width: 992px) and (max-width: 1280px) {

  body {
    font-size: 90%;
  }

}

/********** START IMAGES COLUMN DISPOSITION *********/

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

  body {
    font-size: 90%;
  }

  .work-image {
    /* height: 50vw; */
  }

  .presentation-text {
    padding: 40px 60px;
  }

  .presentation-text h1 {
    font-size: 2.1em;
  }

  .description-text {
    padding: 60px 80px;
  }

}

@media (min-width: 480px) and (max-width: 576px) { /* iPhone SE landscape */

  body {
    font-size: 80%;
  }

  .work-image {
    /* height: 50vw; */
  }

  .presentation-text {
    padding: 30px 60px;
  }

  .presentation-text h1 {
    font-size: 2.1em;
  }

  .description-text {
    padding: 40px 80px;
  }

  .arrow-sml {
    /* width: 35px;
    height: 18px; */
    margin: -60px 0 -100px 0;
  }

}

@media (min-width: 320px) and (max-width: 479px) { /* iPhone SE portrait */

  body {
    font-size: 80%;
  }

  .work-image {
    /* height: 55vw; */
  }

  .presentation-text {
    padding: 30px 50px;
  }

  .presentation-text h1 {
    font-size: 2.1em;
  }

  .description-text {
    padding: 40px 40px;
  }

  .arrow-sml {
    width: 35px;
    height: 18px;
    margin: -60px 0 -100px 0;
  }

}

/*********** GRADIENT ANIMATION *************/

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-ms-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}