@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Raleway:100,300,500,600,700,800|Playfair+Display:200,400,700|Roboto:200,300,400,700');

.w-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: calc(100% - 200px);
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  
  overflow-x: hidden;

}

/* =============================================================================
   My CSS
   ========================================================================== */

.hero-section {
  height: 100vh;
  padding-top: 1px;
  background-size: cover;
  opacity: 0.99;
}



/* =============================================================================
   Background Video
   ========================================================================== */



.fullscreen-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  opacity: 1;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .5s ease-out;
  padding-left: 20px;
  padding-right: 20px;
    margin-top: -100px;
}

.fullscreen-bg__video-open {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  transition: all .5s ease-out;
  padding-left: 20px;
    padding-right: 20px;
    margin-top: -100px;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

}

@media (max-width: 579px) {
  .fullscreen-bg {
  width: 250%;
  left: -100%;
}

}


  @media (max-width: 267px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }
}


/* =============================================================================
   END - Background Video
   ========================================================================== */



.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


#snow2{
  background: none;
  font-family: Androgyne;
  background-color #0d224252;
  background-image: url('../images/sf_dsign_front.png');
  opacity: 0.95;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index:1;
  background-size: cover;
}

.btn-position {
  /*position: absolute;*/
  z-index: 100;
  margin-top: -16px;
  text-align: center;
}

.btn-close-position {
  position: absolute;
  bottom: 71px;
  z-index: 100;
}

.btn-goldengate-position {
  position: absolute;
  bottom: 171px;
  z-index: 100;
}

.btn:hover {
box-shadow: 0px 3px 8px rgba(34,62,66,.25);
}


a.btn {
  transition: all .5s ease-out;
  background: linear-gradient(45deg, rgba(59, 175, 181, 0.75) 20%, rgba(59,110,181,0.75) 50%,
  rgba(34,127,46,0.70) 70%);
  background-size: 400% 400%;
  -webkit-animation: Gradient 8s ease infinite;
  -moz-animation: Gradient 8s ease infinite;
  animation: Gradient 8s ease infinite;

  border-radius: 0px;
  
    color: #fff;
    font-family: 'Roboto', sans-serif;  
    font-weight: 100;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 16px 28px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    opacity: 1;
    cursor: pointer;
    
}

a.btn-hide {
  transition: all .5s ease-out;
  background: transparent !important;
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(34,62,66,.25);
    color: transparent !important;
    font-family: 'Roboto', sans-serif;  
    font-weight: 100;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 16px 28px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    opacity: 0.8;
    cursor: default;
        visibility: hidden;
}

a.btnclose {
  background-color: #ffffff;
    color: #000000;
    font-family: 'Playfair Display', serif;  
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 16px 32px;
    text-decoration: none;
    transition: box-shadow 1s ease;
    display: inline-block;
    cursor: pointer;
    
}


a.btn-goldengate {
  background-color: #ffffff;
    color: #000000;
    font-family: 'Playfair Display', serif;  
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 16px 32px;
    text-decoration: none;
    transition: box-shadow 1s ease;
    display: inline-block;
    cursor: pointer;
  }



.cursors {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100vh;
}

.cursors > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 10px 2px;
  text-align: center;
}
.cursors > div:nth-child(odd) {
  background: #eee;
}
.cursors > div:hover {
  opacity: 0.25;
}

.png {
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.png"), auto;
}





.container-skyline {
  background-size: cover;
    background-image: url(../images/sf_dsign_front.png);
    height: 100%;
    opacity: 0;
  transition: all .5s ease-out;
  z-index: -1;
    margin-top: -450px;
}


.container-skyline-open {
  background-size: cover;
    background-image: url(../images/sf_dsign_front.png);
    height: 100%;
    margin-top: -450px;
    z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  transition: all .5s ease-out;
}

@media (min-width: 1699px) {
.container-skyline-open {
  margin-top: -530px;

}

}


.container-goldengate {
  background-size: cover;
    background-image: url(../images/golden_gate_web3.png);
    height: 100%;
    opacity: 0;
  transition: all .5s ease-out;
  z-index: -1;
    margin-top: -480px;
}


.container-goldengate-open {
  background-size: cover;
    background-image: url(../images/golden_gate_web3.png);
    height: 100%;
    margin-top: -480px;
    z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  transition: all .5s ease-out;
}


.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .5s ease-out;
  padding-left: 20px;
  padding-right: 20px;
}

.fullscreen-bg__video-open {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  transition: all .5s ease-out;
  padding-left: 20px;
    padding-right: 20px;
}

.container108 {
  padding-bottom: 0px;
    height: 100%;
}



.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: url('../images/loading_comp.gif') center no-repeat #fff;
  z-index: 99999999;
}

.se-pre-con2 {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: url('../images/loading_comp.gif') center no-repeat #fff;
  z-index: 99999999;
}




.paulie-promo { 
  padding-top: 50px;
  padding-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #efefef;
 }




#slogan {
    -webkit-animation: slogananim 1.5s ease-in-out;
}

@-webkit-keyframes slogananim {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
  }



  /* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 0.1; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 0.1; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 0.1; /* IE9 only */ } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}


.hideme
{
    opacity:0;
}


img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

.solidd {
  border-style: solid;
  padding: 10px;
}


/* =============================================================================
   HAMBURGER MENU
   ========================================================================== */


.myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: #fff;
    height: 100vh;
/*    height: 100vh;*/
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-out;
}

.myDIV-open {
  z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  transition: all .3s ease-out;

}


.menu-container {
  padding-top: 50px;
  padding-bottom: 0px;
}

@media (min-width: 1699px) {
.menu-container {
  padding-top: 100px;
  padding-bottom: 0px;

}

}


@media (min-width: 1999px) {
.menu-container {
  padding-top: 200px;
  padding-bottom: 0px;

}

}


.w-col-menu {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
}


.icons-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 530px;
}

.icons-section {
  padding-top: 100px;
  padding-bottom: px;
  height: ;
}


.icons {
  width: 20%;
  margin-top: 60px;
  font-size: 1em;
}

.icons-section-aboutme {
  padding: 0px 0px 100px 0px;
}

/* =============================================================================
   END --- HAMBURGER MENU
   ========================================================================== */




/* =============================================================================
   About me page
   ========================================================================== */

   .feature-aboutme {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/davidsteinn.JPG') center no-repeat;
  background-size: cover;
  background-position: top;
}


.project-heading-aboutme {
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 142px;
  line-height: 140px;
  color: black;
}

@media (max-width: 767px) {
  .project-heading-aboutme {
    font-size: 62px;
  line-height: 70px;
  }

}


.about-project-heading-aboutme {
    margin-top: px;
    font-family: 'Playfair Display';
    font-weight: 600;
    font-size: 42px;
    color: black;
}


@media (max-width: 767px) {
  .about-project-heading-aboutme {
  margin-top: 20px}
  }

}

.about-project-heading-3 {
    margin-top: -10px;
    font-family: 'Roboto';
    font-weight: 300;
    line-height: 2;
    font-size: 16px;
    color: white;
}        

@media (min-width: 1699px) {
  .about-project-heading-3 {
   font-size: 18px !important;
  }

}


.second-title {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 16px;
    color: #008bff;
    line-height: 30px;
    letter-spacing: 1px;
    margin-top: -10px;
    padding-bottom: 15px;
}   

.second-title-nasa {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 16px;
    color: #f0c3a6;
    line-height: 30px;
    letter-spacing: 1px;
    margin-top: -10px;
    padding-bottom: 15px;
}   

/* =============================================================================
   END --- About me page
   ========================================================================== */


.bigger { font-size: 170%; }



.headwrap-animation {
  width: 100%;
  height:100%;
  -webkit-animation: zoom 30s ease infinite alternate;
  -moz-animation: zoom 30s ease infinite alternate;
  animation: zoom 30s ease infinite alternate; 
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}
/* ZOOM ANIMATION OF THE HEADER IMAGE */
@-webkit-keyframes zoom {
  0%, 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    transform: scale(1.25);
  }
}
/* ZOOM ANIMATION OF THE HEADER IMAGE */



#snow{
  background: none;
  font-family: Androgyne;
  background-color: #0d224252;
  background-image: url('http://www.pngmart.com/files/5/Snow-PNG-Transparent-Image.png'), url('http://www.pngmart.com/files/5/Snow-PNG-Transparent-Image.png'), url('http://www.pngmart.com/files/5/Snow-PNG-Transparent-Image.png');
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index:1;
  -webkit-animation: snow 123s linear infinite;
  -moz-animation: snow 123s linear infinite;
  -ms-animation: snow 123s linear infinite;
  animation: snow 123s linear infinite;
  background-size: 90%;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  100% {background-position: 5000px 10000px, 2000px 4000px, -1000px 3000px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  100% {background-position: 4000px 10000px, 2000px 4000px, 1000px 3000px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  100% {background-position: 5000px 10000px, 2000px 4000px, -1000px 3000px;}
}

@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 5000px 5000px, 1000px 2000px, -1000px 1500px;}
  100% {background-position: 5000px 10000px, 2000px 4000px, -1000px 300px;}
} 





.w-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1140px;
}

.top-w-container {
  margin-left: auto;
  margin-right: auto;
}



.header {
  background-color: #ffffff;
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 70px;
  z-index: 1;
  transition: .3s ease-in-out;
}
  

  .header-transparent-top {
  background-color: transparent;
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 65px;
  z-index: 1;
  transition: .3s ease-in-out;
}


.white {
    background-color: white;
  }




.nav-up {
    top: -70px;
}


.navbar {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  transition: .3s ease-in-out;
  height: 65px;
  background-color: white;
  z-index: 1;
}

.w-nav-menu {
  position: fixed;
  float: right;
  margin-left: -30px;
}

.w-nav-menu {
  position: relative;
  float: right;
}

.w-nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333;
}


.w-nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

/* Hamburger Icon 3 */

#nav-icon3 {
  background-color: transparent;
  width: 30px;
  height: 45px;
  position: relative;
  margin: 23px 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #000;
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;



  border-radius: 8px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}


/* Continued Hamburger Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 8px;
  width: 100%;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
  width: 100%
}

#nav-icon3 span:nth-child(4) {
  top: 22px;
  width: 100%;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 100%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


.headwrap {
    width: 100%;
    height: 100vh;
    background-color: #f9f9f9;
    overflow: hidden;
    position: relative;
}



#f {
    background: transparent;
    width:40%;
    position:fixed;
}

@media (max-width: 599px) {
#f {
  width: 90%;
}

}


.project-name-top {
  padding: 200px 0px 0px 0px;
}

@media (min-width: 1699px) {
  .project-name-top {
  padding: 400px 0px 50px 0px;
}

}


.about-project-top {
  padding: 400px 0px 50px 0px;
}

@media (max-width: 799px) {
  .about-project-top {
  padding: 250px 0px 50px 0px;
}

}


.about-project-top-paulie {
  padding: 300px 0px 50px 0px;
}


.scroller {
    width: 1px;
    background: rgb(0, 0, 0);
    position: absolute;
    height: 188px;
    left: 50%;
    bottom: 0;
    overflow: hidden;
}


span.year {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    color: #bababa;
    position: relative;
    transform: translateX(95px);
    animation-duration: 1s;
    text-transform: uppercase;
}

span.year::before {
    content:'';
    height: 2px;
    width: 85px;
    background: #bababa;
    position: absolute;
    top: 50%;
    transform: translateX(-95px);
    animation-duration: 1s;
}




ul {
  list-style-type: none;
}

li {
  display: inline;
}

.ullisti {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: right;
  display: inline-flex;
  margin-top: 28px;
}


.lilisti {
  display: inline;
  padding-left: 32px;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    color: #5B5958;
}

.lilisti:hover {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    /*background-color: #f3f3f3;*/
    color: #ccc;
}


.lilistiLeft {
  display: inline;
  padding-right: 56px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 24px;
    color: #5B5958;
}






/*Cookie Consent Begin*/
#cookieConsent {
        background-color: rgb(255, 255, 255);
    min-height: 26px;
    font-size: 14px;
    color: #000000;
    line-height: 26px;
    padding: 12px 0px 12px 0px;
    font-family: "Roboto",sans-serif;
    font-weight: 400;
    position: fixed;
    bottom: 20px;
    /* left: 20px; */
    right: 20px;
    display: none;
    z-index: 9999;
    border-radius: 8px;
    text-align: center;
    max-width: 300px;

}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    float: right;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #bababa;
}
#cookieConsent a.cookieConsentOK {
    color: #000000;
    /* background-color: black; */
    padding: 8px 18px;
    border: solid 1px #eaeaea;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    /* margin: 10px 0px; */
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 600;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    box-shadow: rgba(43, 83, 88, 0.05) 0px 0px 18px;
    margin-top: 5px;
    float: right;
}
#cookieConsent a.cookieConsentOK:hover {
        background-color: #f3f3f3;
    color: black;
    animation: Gradient 8s ease infinite;
    transition: all .3s ease-out;
}
/*Cookie Consent End*/



.parallax {
    /* The image used */
    background-image: url('../images/lumex_mockup.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}


.parallax-paulie {
    /* The image used */
    background-image: url('../images/bur_iphone3.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% 0%;
    background-color: #ffffff;
}



.parallax-oracle {
    /* The image used */
    background-image: url('../images/oracle_icon.png');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #d0443e;
    background-position: right;
}



.parallax-tymewear {
    /* The image used */
    background-image: url('../images/tymewear_mockup.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #d0443e;
    background-position: right;
}


.parallax-smartpark {
    /* The image used */
    background-image: url('../images/beacon_cover.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}



.parallax-lineful {
    /* The image used */
    background-image: url('../images/lineful_homepage_2.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
    background-position: right;
}


.parallax-lineful2 {
    /* The image used */
    background-image: url('../images/lineful_homepage_2.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: center;
}




.parallax-plass {
    /* The image used */
    background-image: url('../images/plass_cover.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}


.parallax-indiana {
    /* The image used */
    background-image: url('../images/indi_mockup2.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}




.parallax2 {
    /* The image used */
    background-image: url('../images/lineful_parall_screen1.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}

.parallax3 {
    /* The image used */
    background-image: url('../images/flat_love_ex.png');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}


.parallax4 {
    /* The image used */
    background-image: url('../images/letur-text-bigger.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 140%;
    background-color: #26B689;
}

.parallax-lineful-1 {
    /* The image used */
    background-image: url('../images/lineful_parall_screen1.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}


.parallax-lineful-2 {
    /* The image used */
    background-image: url('../images/lineful_parall_screen2.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}


.parallax-lineful-3 {
    /* The image used */
    background-image: url('../images/lineful_homepage_2.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}


.parallax-lineful-4 {
    /* The image used */
    background-image: url('../images/lineful_homepage_2.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}

.parallax-lineful-5 {
    /* The image used */
    background-image: url('../images/lineful_homepage_2.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}

.paulie-project-image {
    /* The image used */
    background-image: url('../images/bur_stofa.jpg');

    /* Set a specific height */
    height: 80vh; 

    /* Create the parallax scrolling effect */
    background-repeat: no-repeat;
    background-size: cover;
}




.indiana-project-image {
    /* The image used */
    background-image: url('../images/indiana_hlaup.jpg');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-repeat: no-repeat;
    background-size: cover;
}


.indiana-project-image2 {
    /* The image used */
    background-image: url('../images/indi_strokes.png');

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-repeat: no-repeat;
    background-size: cover;
}


.tokyo-project-image {
    /* The image used */
    background-image: url('../images/divingpingpong.png');

    /* Set a specific height */
    height: 80vh; 

    /* Create the parallax scrolling effect */
    background-repeat: no-repeat;
    background-size: cover;
}


/* Slideshow container */
.slideshow-container {
  max-width: 50%;
  position: relative;
  margin: auto;
  margin-top: -100px;
}


@media (max-width: 799px) {
.slideshow-container {
  max-width: 100%;
}

}


/* Slideshow container on the right */
.slideshow-container-right {
  max-width: 100%;
  position: relative;
  margin: auto;
}


@media (max-width: 799px) {
.slideshow-container-right {
  max-width: 100%;
}

}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #000000;
  background-color: unset;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: #ffffff;
}

/* Caption text */
.text {
  color: #ffffff;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-family: 'Playfair Display';
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  background-color: #ffffffc2;
  font-size: 14px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  font-family: 'Playfair Display';
  font-weight: 600;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #a2a2a2;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.countdown {
  text-align: center;
  font-family: 'Playfair Display';
    font-weight: 100;
    font-size: 60px;
    color: #94cde9;
    margin-top: 0px;
    padding-bottom: 100px;
}


.beacon-gif {
    width: 50%;
    box-shadow: 0px 0px 18px rgba(43, 83, 88, 0.18);
    border-radius: 30px;
}


@media (max-width: 799px) {
.beacon-gif {
  margin-top: 40px;
  border-radius: 32px;
}

}

@media (min-width: 1799px) {
.beacon-gif {
  border-radius: 42px;
}

}


.feature-paulie {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/bur_iphone2.jpg') center no-repeat;
  background-size: cover;
}





.feature-smartpark {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/beacon_cover.jpg') center no-repeat;
  background-size: cover;
}

.feature-smartpark2 {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #f1f1f1 url('../images/beacon_cover.jpg') center no-repeat;
  background-size: cover;
}


.feature-indiana {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/indi_mockup2.jpg') center no-repeat;
  background-size: cover;
}


.feature-lineful {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #ffffff url('../images/lineful_homepage_2.jpg') center no-repeat;
  background-size: cover;
}

.feature-plass {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #ffffff url('../images/plass_cover.jpg') center no-repeat;
  background-size: cover;
}


.feature-tokyo2020 {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/tokyo_posterr_both.jpg') center no-repeat;
  background-size: cover;
}



.feature-visualdesign3 {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/vd3.png') center no-repeat;
  background-size: cover;
}



.feature-paulie-mynd {
  background: url('../images/paulie_project_black.png') center no-repeat;
  background-size: cover;
}


.feature-letur {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/letur-poster.jpg') center no-repeat;
  background-size: cover;
}

.feature-letur2{
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/letur_poster_mockup.jpg') center no-repeat;
  background-size: cover;
}


.feature-aauintro{
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/nasamotion.jpg') center no-repeat;
  background-size: cover;
}



.feature-citymusic {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #d0443e url('../images/project/citymusic_trans.png') center no-repeat;
  background-size: cover;
}

.feature-citymusic-appicon {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #d0443e url('../images/citymusic_appicon.png') center no-repeat;
  background-size: cover;
}


.feature-paulie-appicon {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #f1f1f1 url('../images/paulie_appicon.png') center no-repeat;
  background-size: cover;
}


.feature-paulie-appicon2 {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/paulie_appicn-2.png') center no-repeat;
  background-size: cover;
}



.feature-paulies-place2 {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/bur-utskyringar.jpg') center no-repeat;
  background-size: cover;
}

.feature-paulies-place3 {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #26B689 url('../images/bur1.197.jpg') center no-repeat;
  background-size: cover;
}



.feature-glama {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #e0e0e0;
}

.feature-glama-mynd {
  background: url('../images/project/glama_trans.png') center no-repeat;
  background-size: 55%;
}  

.feature-glama_pitch {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #dadada url('../images/glama_pitch_mynd-01.png') center no-repeat;
  background-size: 100%;
}


.feature-beggi {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #a3c19c;
  background-size: cover;
}

.feature-beggi-mynd {
  background: url('../images/beggiolafs_projects1.png') center no-repeat;
  background-size: 90%;
}


.feature-intern-mynd {
  background: url('../images/brand_intern.jpg') center no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.feature-beggi-fyrirlestur {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #a3c19c url('../images/beggio_fyrirlestur_trans.png') center no-repeat;
  background-size: cover;
}


.feature-hreyfill {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #fff894 ;
  background-size: cover;
}

.feature-hreyfill-mynd {
  background: url('../images/hreyfill_900.png') center no-repeat;
  background-size: 50%;
}


.feature-hreyfill-appicon {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #fff894 url('../images/hreyfill_icon_logo.png') center no-repeat;
  background-size: cover;
}


.feature-kicks-appicon {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #ea3f43 url('../images/kicks_appicon.png') center no-repeat;
  background-size: cover;
}



.feature-kicks {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #ea3f43 url('../images/kicksonfire_redpaper.png') center no-repeat;
  background-size: cover;
  background-size: 70%;
}


.feature-tokyo {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #f7f7f7 url('../images/tokyobig.png') center no-repeat;
  background-size: cover;
  background-size: 100%;
}


.hero-menu-section {
  height: 100vh;
  padding-top: 0px;
  background: #fff;
  background-size: 400% 400%;
}


.hero-section-tokyo {
  height: 100vh;
  padding-top: 0px;
  background-color: #94cde959;
  background-size: cover;
  background-image: url('../images/tokyobig.png');
  opacity: 0.99;
}


.hero-section-2 {
  height: 100vh;
  padding-top: 0px;
  background-color: #94cde9;
  background: linear-gradient(-45deg, #94cde9, #0e2143, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  background-image: url'../images/background_deebo.jpg')
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  opacity: 0.8;
}

@-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%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}





.hero-section-paulie {
    clear: both;
    width: 100%;
    height: 100vh;
    margin: 0px auto;
    background: #fff url(../images/bur1-minni.jpg) center no-repeat;
    background-size: cover;
}




.w-container {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - 200px);
}

.view-wrapper {
  position: absolute;
    width: 100%;
    z-index: 2;
    bottom: 23px;
    left: 0px;
}

.viewprojects {
  font-size: 14px;;
    color: #000000;
    text-align: center;
    line-height: 24px;
    font-family: 'Playfair Display', serif;
    /* font-style: italic; */

}


.arrow {
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding-bottom: 45px;
  padding-top: 6px;
  z-index: 2;
  background-color: #ffffff;
}

.bounce {
  -webkit-animation-name bounce;
  -moz-animation-name bounce;
  -o-animation-name bounce;
  animation-name bounce;
}
.animated{-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;

            animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

animation-fill-mode:both;
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-ms-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}


@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-20px);}
  60% {-webkit-transform: translateY(-10px);}
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
  40% {-moz-transform: translateY(-20px);}
  60% {-moz-transform: translateY(-10px);}
}

@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
  40% {-o-transform: translateY(-20px);}
  60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-10px);}
}






.image {
  padding: 20px 0px;
}

.hero-subheading {
  color: #fff;
}

.heading-hero {
    color: #000;
    font-size: 60px;
    margin-top: -11px;
    font-weight: 300;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 70px;
    padding-top: 225px;
    font-family: 'Playfair Display', serif;
    width: 800px;
}

@media (max-width: 999px) {

.heading-hero {
  width: 600px;
  font-size: 40px;
  line-height: 60px;
  padding-top: 225px;

}

}



@media (min-width: 1699px) {
.heading-hero {
  width: 1000px;
  font-size: 65px !important;
  line-height: 85px !important;
  padding-top: 260px !important;

}

}



.headingg2 {
    font-family 'Raleway', sans-serif;
    color: #bababa;
    font-size: 24px;
    margin-top: -20px;
    font-weight: 100;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    line-height: 30px;
}

.heading {
    font-size: 42px;
    width: 700px;
    color: #fff;
    text-align: center;
    line-height: 44px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Playfair Display', sans-serif;
}

.heading2 {
    font-size: 42px;
    color: #333;
    text-align: center;
    line-height: 44px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Playfair Display', sans-serif;
}




h1 {
  font-size: 42px;
  line-height: 44px;
  margin-top: 20px;
  font-family: 'Playfair Display', sans-serif;
}

.button {
    background-color: #94cde9;
    border 5px solid #2b2e32;
    color: #fff;
    padding: 6px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
}

.button-paulie {
    color: #000000;
    padding: 8px 18px;
    border: solid 1px #bababa;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 600;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border-radius: 4px;
    box-shadow: rgba(43, 83, 88, 0.05) 0px 0px 18px;
}


.buttonhover2:hover {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    /*background-color: #f3f3f3;*/
    box-shadow: rgba(43, 83, 88, 0.15) 0px 0px 18px;
    border: solid 1px #929191;
}


.buttonhover:hover {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    margin-left: 5px;

}



.button-tokyo {
    background: linear-gradient(135deg, #eb4e24 15%, rgb(48, 179, 130) 50%, rgb(211, 101, 162) 90%);
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button-letur {
    background-color: #94cde9;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}


.button-aauintro {
    background-color: #2e3191;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}



.button-glama {
    background-color: #30373a;
    border 5px solid #2b2e32;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.button-hreyfill {
    background-color: #fff894;
    border 5px solid #2b2e32;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.button-city {
    background-color: #d0443e;
    border 5px solid #2b2e32;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.button-beggi {
    background-color: #a3c2a4;
    border 5px solid #2b2e32;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}

.button-kicks {
    background-color: #ea3f43;
    border 5px solid #2b2e32;
    color: #fff;
    padding: 10px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
    font-family: 'Playfair Display';
    font-weight: 300;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
}


.button-arrow {
  height: 60px;
  width: 100px;
  background:;
}

.button-arrow:before {
  content: "";
  width: 25px;
  height: 2px;
  background: black;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  right: 24px;
  transition: all 0.3s ease;
}

.button-arrow:hover:before {
  right: 34px;
  width: 35px;
}

.button-arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #000000;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 20px;
  transition: all 0.3s ease;
}

.button-arrow:hover:after {
  right: 34px;
  right: 30px;
}

.section {
  padding: 49px 0px;
}

/* ---- DIV ANIMATE ---- */
div.line-animate {
	height: 8px;
	width: 0px;
	margin-top: 10px;
	background-color: rgba(249, 249, 249, 0);
  -webkit-transition: background-color .1s ease-in-out !important;
	-moz-transition: background-color .1s ease-in-out !important;
	transition: background-color .1s ease-in-out !important; 
}

div.top-main-section:hover div.line-animate {
	width: 280px;
  background-color: #26B689;
  -webkit-transition: all .2s ease-in-out !important;
  -moz-transition: all .2s ease-in-out !important;
  transition: all .2s ease-in-out !important; 
  transition-delay: .4s !important;
} 

.cool-link {
    display: inline-block;
    color: #000;
    text-decoration: none;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .5s;
}

.cool-link:hover::after {
    width: 100%;
    //transition: width .5s;
}

.main-section {
  padding-top: 0px;
  padding-bottom: 0px;
}

.top-main-section {
  padding-top: 0px;
  padding-bottom: 100px;
}

.cold-main-section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.cold-container {
    padding-top: 510px;
    padding-bottom: 0px;
}

/* =============================================================================
   CLEARFIX
   ========================================================================== */

.main-section::after {
    content: "";
    clear: both;
    display: table;
}


.top-main-section::after {
    content: "";
    clear: both;
    display: table;
}


.cold-main-section::after {
    content: "";
    clear: both;
    display: table;
}
/* =============================================================================
   END OF CLEARFIX
   ========================================================================== */

.main-section-right {
  padding-top: 100px;
  padding-bottom: px;
  height: 100vh;
  margin-top: -100px;
}



.top-about-col {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 60%;
}

.top-about-col-right {
  position: relative;
  float: right;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 0px;
  width: 50%;
  padding-bottom: 100px;
  padding-top: 100px;
  line-height: 64px;
}

.about-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.main-section-about-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 100%;
  padding-bottom 100px;
  padding: 100px 10px;
  margin-left: auto;
  margin-right: auto;
}

.about-col-tokyo2020 {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  padding-bottom: 100px;
  padding-top: 100px;
  margin-left: auto;
  margin-right: auto;
}

.paulies-flying-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.logo-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  padding-bottom 100px;
  padding-top: 100px;
  margin-left: auto;
  margin-right: auto;
}

.branding-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}


.app-col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
      padding-bottom: 100px;
    padding-top: 100px;
}

.img-col {
  position: relative;
  
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -80px;
}

.w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.index-menu-w-row {
  margin-left: 0px;
  margin-right: 0px;
}

.w-col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  padding-bottom 100px;
  padding-top 100px;
}

.top-w-col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right 10px;
  padding-bottom 100px;
  padding-top 100px;
}

.w-col-glamagif {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  padding-bottom 100px;
}

.w-col-nopadding {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
}




.w-col-projects {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
}


.w-col-haegri {
  position: relative;
  float: right;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}

.main-section-w-col-haegri {
  position: relative;
  float: right;
  width: 100%;
  min-height: 1px;
}

.w-col-left {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
}

.w-col-right {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  margin-left: auto;
}

.w-col-4 {
  width: 33.33333333%;
}

.w-col-6 {
  width: 50%;
}

.w-col-index {
  width: 48%;
}


.w-col-7 {
  width: 66.66666666%;
  z-index: -1;
}

.w-col-70-right {
  width: 70%;
  z-index: -1;
  float: right;
}

.w-col-70-left {
  width: 70%;
  z-index: -1;
  float: left;
}

.w-col-8 {
  width: 33.33333333%;
}






.about-block {
  padding: 10px;
}


.main-section-about-block {
  padding: 115px 20px 80px 20px;
  text-align: left;
  margin: 0 auto;
  max-width: calc(100% - 0px);
  position: relative;
  left: 100px;
}

.cold-section-about-block {
  padding: 100px 50px;
  height 100vh;
  text-align: left;
}


.top-cold-section-about-block {
  padding: 0px 50px;
  height 100vh;
  text-align: left;
}

.project-image {
  text-align: center;
  background-color: #f5f5f5;
}

.project-image-paulie {
  text-align: center;
  background-color: #26B689;
}

.project-image-aauintro {
  text-align: center;
  background-color: #f7f7f7;
}

.project-image-glama {
  text-align: center;
  background-color: #f7f7f7;
}

.project-image-letur {
  text-align: center;
  background-color: #f7f7f7;
}

.project-image-hreyfill {
  text-align: center;
  background-color: #fff894;
  border-radius 50%;
}


.project-image-citymusic {
  text-align: center;
  background-color: #d0443e;
  border-radius 50%;
}


.project-image-beggiolafs {
  text-align: center;
  background-color: #a3c2a4;
  border-radius 50%;
}

.project-image-kicks {
  text-align: center;
  background-color: #ea3f43;
  border-radius 50%;
}


.cold-yellow-image-top {
  text-align: center;
  background-color: #ecb020;
  border-radius: 50%;
  margin-top: 100px;
}

.cold-yellow-image {
  text-align: center;
  background-color: #ecb020;
  border-radius: 50%;
}


.cold-blue-image {
  text-align: center;
  background-color: #4f55a5;
  border-radius: 50%;
}



.gif-image {
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
    border-radius: 6px;
    width: 50%;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-bottom: px;
}

.taxi-sign-image {
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
    border-radius: 6px;
    width: 62%;
    margin-top: 40px;
    margin-bottom: px;
}
   
.gif-glama {
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
    border-radius: px;
    width: 100%;
    margin-top 40px;
    margin-bottom: px;
}

.gif-tokyo {
    width: 100%;
}


.gif-paulie {
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
    border-radius: 6px;
    width: 50%;
    margin-top: 20px
}


.mid-image {
	margin-top: 10px;
}


.problem-image {
  text-align: center;
  background-color:;
  margin-top: -90px;
}

.column {
  text-align: center;
}

.heading-2 {
  margin-top: 20px;
  font-family: 'Playfair Display';
  font-weight: 600;
  z-index: 1;
  color: #000;
  font-size: 152px;
  line-height: 140px;
  transition-duration: 0.4s;
}

@media (min-width: 1699px) {
  .heading-2 {
    font-size: 180px;
  }

}

.heading-3 {
  margin-top: -20px;
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: #686766;
  margin-top: -80px;
  padding-right: 100px;
  padding-bottom: 10px;
  padding-top: 10px;
}

@media (min-width: 1699px) {
  .heading-3 {
    padding-right: 180px;
    font-size: 24px;
  }

}


.heading-2-small {
    font-family: 'Playfair Display';
    font-weight: 600;
    z-index: 1;
    color: #000;
    font-size: 42px;
    line-height: 40px;
    transition: 0.4s;

}

.heading-3-small {
    margin-top: -20px;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    color: #686766;
    float: unset;
}

.main-section-about-block-small {
  padding: 50px 20px 20px 0px;
  text-align: left;
  margin-top: 0 auto;
  transition-duration: 0.4s;


}


.heading-menu-4 {
  text-align: center;
  margin-top: 22px;
  font-family: 'Playfair Display';
  font-weight: 300;
  font-size: 22px;
  color: #fff;
}

.heading-menu-5 {
  text-align: center;
  margin-top: -20px;
  font-family: 'Playfair Display';
  font-size: 14px;
  font-weight: 300;
  line-height: 35px;
  color: #fff;
}

.heading-menu-6 {
  text-align: center;
  font-family: 'Playfair Display';
  font-size: 12px;
  font-weight: 300;
  padding: 20px;
  color: #333;
}

.heading-menu-2 {
  text-align: center;
  margin-top: 42px;
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 32px;
}



.heading-menu-3 {
  text-align: center;
  margin-top: -20px;
  font-family: 'Playfair Display';
  font-size: 18px;
  font-weight: 300;
  line-height: 45px;
  text-decoration: none;
  transition-duration: 0.4s;
}

a {
  text-decoration: none;
  color: #333;
}

a-2 {
  text-decoration: none;
  color: #fff;
}

.project-heading-2 {
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 142px;
  line-height: 140px;
  color: black;
}

.project-heading-3 {
  margin-top: -80px;
  font-family: 'Roboto';
  font-size: 24px;
  font-weight: 300;
  line-height: 1.6;
  font-size: 22px;
  color: #686766;
}


.about-image {
  font-family: 'Playfair Display';
  font-weight: 300;
  font-size: 12px;
  font-style: italic;
  color: #bababa;
  margin-top: 10px;
}


.about-project-heading-2 {
  margin-top: px;
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 32px;
}

.about-project { 
padding: 50px 0px;
 }

 .about-project::after {
    content: "";
    clear: both;
    display: table;
}

.about-project-paulie { 
padding-top: 100px;
padding-bottom 100px;
 }

 .about-project-paulieminus { 
padding-top: -100px;
padding-bottom 100px;
 }

.about-project-tokyo { 
padding-top: 100px;
padding-bottom: 100px;
 }


@media (max-width: 767px) {
  .about-project-tokyo {
   padding-top: 50px;
padding-bottom: 50px;
 }

}


 .about-project-tokyo::after {
    content: "";
    clear: both;
    display: table;
}

.about2-project { 
padding-top: 20px;
padding-bottom: 20px;
 }


.about-project-heading-3 {
  margin-top: -10px;
  font-family: 'Roboto';
  font-weight: 300;
  line-height: 2;
  font-size: 16px;
}

.about-project-mainpage {
  margin-top: 10px;
  font-family: 'Raleway';
  font-size: 24px;
  font-weight: 300;
  line-height: 25px;
  font-size: 18px;
}

.title-break {
    background-color: #191919;
    width: 150px;
    height: 3px;
    margin-top: -10px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
}    


.container {
  padding-top: 310px;
  padding-bottom: 0px;
}



#content-wrap-paulie {
  width: 100%;
  max-width: 100%;
  padding: 0em 0em;
  margin: 0em auto;
  margin-top: ;
  overflow: hidden;
}


#content-wrap-hreyfill {
  width: 100%;
  max-width: 100%;
  padding: 0em 0em;
  margin: 4em auto;
  margin-top: ;
  overflow: hidden;
}

article-paulie {
  float:left;
  width: 50%;
  height: auto;
  border: 0px solid #000;
  margin: 0em 0;
  margin-top: 0em;
  padding: 0em 0em;
}

article-glama {
  float:left;
  width: 50%;
  height: auto;
  border: 0px solid #000;
  margin: 0em 0;
  margin-top: -2em;
  padding: 0em 0em;
}

.article-2 {
    float: left;
    width: 100%;
    height: auto;
    border: 0px solid #000;
    margin: 0em auto;
    padding: 2em 2em;
    text-align: center;
}


.one-up {
  width: 100%;
}

.one-up-70 {
  width: 70%;
}


.two-up {
  width: 50%;
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
    border-radius: 6px;
    width: 28%;
    margin: 2em;
}

.one-up > img {
  display: block;
  width: 100%;
  margin: 0em auto;
}



.two-up > img {
      border-radius: 6px;
}

.about-project-heading-3 > img {
      padding-top: 10px
}

.about-project-heading- > img {
	margin-top: 50px;
}

article {
      float: left;
    width: 100%;
    height: auto;
    border: 0px solid #000;
    margin: 0em 0;
    padding: 1em 1em;
    display: block;
}

#content-wrap2 {
	width: 100%;
	max-width: 60%;
	padding: 0em 2em;
	margin: 0em auto;
	overflow: hidden;
	padding-bottom: 70px	
}

#content-wrap3 {
  width: 100%;
  padding: 0em 0em;
  margin: 0em auto;
  overflow: hidden; 
}

#content-wrap50 {
  width: 50%;
  padding: 0em 0em;
  margin: 0em auto;
  overflow: hidden; 
}

#content-wrap60 {
  width: 60%;
  padding: 0em 0em;
  margin: 0em auto;
  overflow: hidden; 
}

#content-wrap80 {
  width: 80%;
  padding: 0em 0em;
  margin: 0em auto;
  overflow: hidden; 
}




.two-upp {
  width: 50%;
}

.two-upp > img {
      display: block;
    width: 90%;
    margin: 0em auto;
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
        border-radius: 8px;
}




#footer-wrap {
  float: left;
  clear: both;
  width: 100%;
  background: #000000;
}

#footer-allrights {
  float: left;
  clear: both;
  width: 100%;
  background: #fff;
}

#menu-footer-wrap {
  float: left;
  clear: both;
  margin-top: ;
  width: 100%;
  padding: 0em 2em;
  background: #333;

      position: fixed;
    left: 0px;
    bottom: 0px;
    right: 0px;
}


footer {
  float: ;
  clear: both;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  height: auto;
}
footer > p {
  
  color: #fff;
  font-size: 12px;
  overflow: hidden;
  margin: 2em;
  font-family: 'Playfair Display';
    font-weight: 100;
    text-align: center;
}

nav.footer-nav {
  width: 100%;
  padding: 0;
}

nav.footer-nav ul {
  width: 100%;
  margin-left: -20px;
  list-style-type: none;
}

nav.footer-nav li {
  width: 50%;
}

nav.footer-nav li {
    width: 50%;
}

nav li {
    float: left;
}

a.np-links:hover > div.next-previous {
  background-color: #000000;
  color: #fff;

}

div.next-previous {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: ##0d2243;
  color: #fff;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

div.footer-line-animate {
  height: 4px;
  width: 0px;
  margin: 10px auto;
  background-color: rgba(249, 249, 249, 0);
  -webkit-transition: background-color .1s ease-in-out !important;
  -moz-transition: background-color .1s ease-in-out !important;
  transition: background-color .1s ease-in-out !important; 
}

a.np-links:hover  div.footer-line-animate {
  width: 280px;
  background-color: #f9f9f9;
  -webkit-transition: all .25s ease-in-out !important;
  -moz-transition: all .25s ease-in-out !important;
  transition: all .25s ease-in-out !important; 
  transition-delay: .2s !important;
  -webkit-transition-delay: .2s !important;
  -moz-transition-delay: .2s !important;
} 

div.np-title {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 60px;
}

div.np-title:hover {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  margin-left: 10px;
}

div.np-title-left {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 60px;
}

div.np-title-left:hover {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  margin-right: 10px;
}

div.np-title-right {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 60px;
}

div.np-title-right:hover {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  margin-left: 10px;
}

div.np-project {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 28px;
}


.heading-hero-hide {
    color: transparent !important;
    transition: all .5s ease-out;
    font-size: 60px;
    margin-top: -11px;
    font-weight: 300;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    line-height: 70px;
    padding-top: 225px;
    font-family: 'Playfair Display', serif;
    cursor: default;
}

.heading-hero2 {
  transition: all .5s ease-out;
   color: #bababa;
  margin-top: -20px;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 100;
    line-height: 30px;
    padding-bottom: 5px;

}

.heading-hero2-hide {
  color: transparent !important;
    transition: all .5s ease-out;
  margin-top: -20px;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 100;
    line-height: 30px;
    padding-bottom: 5px;

}


.heading {
    font-size: 42px;
    width: 580px;
    color: #fff;
    text-align: center;
    line-height: 44px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Playfair Display', sans-serif;
}


@media (min-width: 1699px) {

.w-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: calc(100% - 600px);
}


.main-section-about-block {
    padding: 190px 120px 80px 20px;
    text-align: left;
    margin: 0 auto;
    max-width: calc(100% - 0px);
    position: relative;
    left: 300px;
}    

}  



@media (max-width: 1199px) {

  .main-section-about-block {
  padding: 75px 20px 80px 20px;
}

.container-skyline{
margin-top: -470px;
}

.container-skyline-open{
margin-top: -470px;
}

.heading-3 {
  float: left;
}

#content-wrap60 {
  width: 100%;
}  

}

@media (max-width: 999px) {

 .main-section-about-block {
  padding: 100px 20px;
  margin: 0 auto;
  max-width: unset;
  position: unset;
  left: unset;
}

.heading-3 {
  margin-top: -20px;
  font-weight: 300;
  color: #9c9b9b;
  margin-top: -80px;
  padding-right: unset;
}

.container-skyline{
margin-top: -470px;
}

.container-skyline-open{
margin-top: -470px;
}

.hero-section {
  height: 100vh;
  padding-top: 0px;
  background-color: #ffffff;
}

.w-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: unset;
}
}




@media (max-width: 799px) {


#content-wrap60 {
  width: 100%;
}  


.button-paulie {
  display: none;
}


.hero-section {
  height: 100vh;
  padding-top: 0px;
  background-size: cover;
  opacity: 0.99;
}

.w-container {
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
  max-width: unset;
}


.container-skyline{
margin-top: -515px;
}

.container-skyline-open{
margin-top: -515px;
}


.heading-2 {
  margin-top: 20px;
  font-family: 'Playfair Display';
  font-weight: 600;
  z-index: 1;
  color: #000;
  font-size: 42px;
  line-height: 40px;
  transition-duration: 0.4s;

}

.heading-3 {
  margin-top: -20px;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  color: #9c9b9b;
  float: unset;
}

.project-heading-2 {
  font-size: 72px;
  line-height: 64px;
}


.project-heading-3 {
margin-top: -40px;
font-size: 26px;
}

.about-project-heading-3 {
  margin-top: -10px;
  font-family: 'Roboto';
  font-weight: 300;
  line-height: 1.8;
  font-size: 16px;
}

.top-about-col {
  width: 100%
 } 

.paulies-flying-col {
  width: 100%
 } 

 .main-section-about-block {
  padding: 50px 20px 20px 20px;
}

.menu-container {
  padding-top: 0px;
  padding-bottom: 0px;
}

.top-main-section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.main-section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.main-section::after {
    content: "";
    clear: both;
    display: table;
}

.about-col {
  width: 100%;
}

.branding-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.w-col-4 {
  width: 100%;
}

.w-col-6 {
  width: 100%;
  padding-bottom: 0px;
  padding-top: 0px
}

.w-col-index {
  width: 100%;
}

.w-col-7 {
  width: 100%;
}

.w-col-70-right {
  width: 100%;
}

.w-col-70-left {
  width: 100%;
}

.w-col-8 {
  width: 100%;
}

.two-upp {
  width: 100%;
}

#content-wrap2 {
	width: 100%;
	max-width: 60%;
	padding: 0em 0em;
	margin: 0em auto;
	overflow: hidden;
	
}

.myDIV-open {
  z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  margin-top: -10px;
  transition: all .3s ease-out;

}


.heading-menu-2 {
  text-align: center;
  margin-top: 0px;
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 22px;
}

@media (min-width: 1499px) {
.heading-menu-2 {
  font-size: 42px;

}

}


.heading-menu-3 {
  text-align: center;
  margin-top: -25px;
  font-family: 'Playfair Display';
  font-size: 16px;
  font-weight: 300;
  line-height: 45px;
  text-decoration: none;
}

@media (min-width: 1499px) {
.heading-menu-3 {
  font-size: 24px;
  line-height: 55px;

}

}


.feature-hreyfill {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #fff894 url('../images/hreyfill_900.png') center no-repeat;
  background-size: cover;
  background-size: 90%;
}

.feature-kicks {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #ea3f43 url('../images/kicksonfire_redpaper.png') center no-repeat;
  background-size: cover;
  background-size: 100%;
}

.icons {
  width: 20%;
  margin-top: 0px;
}

.icons-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 700px;
}


.parallax-paulie {
    /* The image used */
    background-image: url('../images/paulie_project_grid.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% 0%;
    background-color: #ffffff;
}

.parallax-oracle {
    /* The image used */
    background-image: url('../images/oracle_icon.png');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    
    background-color: #f80000;
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}


.parallax-smartpark {
    /* The image used */
    background-image: url('../images/beacon_cover.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}

.parallax-lineful {
    /* The image used */
    background-image: url('../images/lineful_homepage_2.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}

.parallax-plass {
    /* The image used */
    background-image: url('../images/plass_cover.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
    background-position: right;
}

.parallax-indiana {
    /* The image used */
    background-image: url('../images/indi_mockup2.jpg');

    /* Set a specific height */
    height: 50vh; 

    /* Create the parallax scrolling effect */
    background-attachment: unset;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26B689;
}

}




@media (max-width: 579px) {



.container-skyline {
  padding-top: 260px;
  padding-bottom: 0px;
  margin-top: -515px;
}


.container-skyline-open{
margin-top: -515px;
}

a.btn {
    font-size: 14px;
    letter-spacing: 1px;
    padding: 12px 12px;
    visibility: hidden;
}

#snow{
  background-size: 190%;
}

  .hero-section {
  height: 100vh;
  padding-top: 0px;
  background-size: cover;
  opacity: 0.99;
}


  .heading {
    font-size: 24px;
    width: 300px;
    margin-top: -40px;
  }

  .heading-hero {
    color: #000;
    font-size: 40px;
    margin-top: -11px;
    font-weight: 300;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    line-height: 60px;
    padding-top: 200px;
    font-family: 'Playfair Display', serif;
    text-align: center;
    width: 300px;
}

 .heading-hero2 {
    transition: all .5s ease-out;
    color: #bababa;
    margin-top: -20px;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 100;
    line-height: 24px;
    padding-bottom: 5px;
}

.heading2 {
    font-size: 28px;
  }

  .main-section-about-block {
  padding: 50px 20px 20px 20px;
}

.about-block {
  padding: 10px;
}

  .two-upp {
  width: 100%;
}

#content-wrap2 {
	width: 100%;
	max-width: 60%;
	padding: 0em 0em;
	margin: 0em auto;
	overflow: hidden;
	
}
  .w-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: unset;
}

.menu-container {
  padding-top: 0px;
  padding-bottom: 0px;
}

.w-col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 0px;
}

.w-col-4 {
  width: 100%;
}

.w-col-6 {
  width: 100%;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.about-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about-col-tokyo2020 {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 100%;
  padding-bottom: 50px;
  padding-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.gif-glama {
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,.12);
    width: 100%;
    margin-bottom: 50px;
    }

.gif-tokyo {
    width: 100%;
    margin-bottom: 50px;
}

.branding-col {
  width: 100%;
}


.projec-image {
  text-align: center;
  padding: 10px;
}

.top-main-section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.main-section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.main-section::after {
    content: "";
    clear: both;
    display: table;
}

.main-section-about-col {
  width: 100%;
  padding: 100px 20px 0px 20px;
}


.logo-col {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 10px;
  width: 100%;
  padding-bottom 100px;
  padding-top: 400px;
  margin-left: auto;
  margin-right: auto;
}

.top-about-col-right {
  position: relative;
  float: right;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 0px;
  width: 100%;
  padding-bottom: 100px;
  padding-top: 100px;
  line-height: 64px;
}

.project-heading-2 {
  font-size: 72px;
  line-height: 64px;
}


.project-heading-3 {
margin-top: -40px;
}

.top-about-col {
  width: 100%
 } 

.paulies-flying-col {
  width: 100%
 } 

.myDIV-open {
  z-index: 100 !important;
  opacity: 100 !important;
  visibility: visible !important;
  margin-top: 0px;
  transition: all .3s ease-out;

}


.heading-menu-2 {
  text-align: center;
  margin-top: 0px;
  font-family: 'Playfair Display';
  font-weight: 600;
  font-size: 22px;
}

.heading-menu-3 {
  text-align: center;
  margin-top: -25px;
  font-family: 'Playfair Display';
  font-size: 16px;
  font-weight: 300;
  line-height: 45px;
  text-decoration: none;
}

.icons {
  width: 20%;
  margin-top: 20px;
}

.icons-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 530px;
}


.feature-glama {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
}


.feature-citymusic-appicon {
  clear: both;
  width: 100%;
  height: 50vh;
  margin: 0px auto;
  background: #d0443e url('../images/citymusic_appicon.png') center no-repeat;
  background-size: cover;
}


.feature-paulie-appicon {
  clear: both;
  width: 100%;
  height: 50vh;
  margin: 0px auto;
  background: #f1f1f1 url('../images/paulie_appicon.png') center no-repeat;
  background-size: cover;
}

.feature-hreyfill-appicon {
  clear: both;
  width: 100%;
  height: 50vh;
  margin: 0px auto;
  background: #fff894 url('../images/hreyfill_icon_logo.png') center no-repeat;
  background-size: cover;
}


.feature-kicks-appicon {
  clear: both;
  width: 100%;
  height: 50vh;
  margin: 0px auto;
  background: #ea3f43 url('../images/kicks_appicon.png') center no-repeat;
  background-size: cover;
}


.feature-kicks {
  clear: both;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  background: #ea3f43 url('../images/kicksonfire_redpaper.png') center no-repeat;
  background-size: cover;
  background-size: 100%;
}


/*
.button-glama-inline {
    display: inline;
  }
*/  

  div.np-title {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  text-transform uppercase;
}

div.np-title:hover {
  font-family: 'Playfair Display', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  text-transform uppercase;
}

}