/* ==== BROWSER RESETS  ==== */
* { box-sizing: border-box; padding: 0; margin: 0 }
body, html { height: 100% }
body { max-width: 1600px; font-family: sans-serif }
img { width: 100%; height: auto; display: block }


/*== HERO BLOCK 1 ==*/
.hero-block-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #0065f2;
}
.hero-block-1 h1, .hero-block-1 h2 {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4
}

.hero-block-1 h1 {
   font-size: calc(36px + (72 - 36) * ((100vw - 320px)/(1600 - 320)));
}

.hero-block-1 h2 {
   font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320)));
}
/* Mobiles - height and bottom margin, text width */
@media all and (max-width:767px) {
    .hero-block-1 { height: 360px; margin-bottom: 40px }
    .hero-block-1 h1, .hero-block-1 h2 { width: 80% }
    .hero-block-1 h1 { margin-bottom: 10% } 
}

/* Desktop - height and bottom margin, text width */
@media all and (min-width:768px) {
    .hero-block-1 { height: 480px; margin-bottom: 70px }
    .hero-block-1 h1, .hero-block-1 h2 { width: 60% }
    .hero-block-1 h1 { margin-bottom: 4% }
}
.slide-in-top {
	-webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-4-13 11:43:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }









/*== HERO BLOCK 2 ==*/
.hero-block-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #78d8da;
}

.hero-block-2 h1, .hero-block-2 h2 {
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-weight: bold;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5
}

.hero-block-2 h1 {
     font-size: calc(32px + (84 - 32) * ((100vw - 320px)/(1600 - 320)));
}

.hero-block-2 h2 {
    font-size: calc(18px + (32 - 18) * ((100vw - 320px)/(1600 - 320)));
    font-weight: normal
}

/* Mobiles */
@media all and (max-width:767px) {
    .hero-block-2 { height: 360px; margin-bottom: 40px }
    .hero-block-2 h1, .hero-block-2 h2 { width: 80% }
    .hero-block-2 h1 { margin-bottom: 10% } 
}

/* Desktop */
@media all and (min-width:768px) {
    .hero-block-2 { height: 480px; margin-bottom: 80px }
    .hero-block-2 h1, .hero-block-2 h2 { width: 60% }
    .hero-block-2 h1 { margin-bottom: 4% }
}







/*== HERO BLOCK 3 ==*/
.hero-block-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(#512d6d,#c42f9e);
}

.hero-block-3 h1, .hero-block-3 h2 {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4
}

.hero-block-3 h1 {
   font-size: calc(32px + (72 - 32) * ((100vw - 320px)/(1600 - 320)));
}

.hero-block-3 h2 {
   font-size: calc(18px + (32 - 18) * ((100vw - 320px)/(1600 - 320)));
   font-weight: normal
}

/* Mobiles */
@media all and (max-width:767px) {
    .hero-block-3 { height: 360px; margin-bottom: 40px }
    .hero-block-3 h1, .hero-block-3 h2 { width: 70% }
    .hero-block-3 h1 { margin-bottom: 5% } 
}

/* Desktop */
@media all and (min-width:768px) {
    .hero-block-3 { height: 480px; margin-bottom: 80px }
    .hero-block-3 h1, .hero-block-3 h2 { width: 60% }
    .hero-block-3 h1 { margin-bottom: 1% }
}





/*== HERO BLOCK 4 ==*/
.hero-block-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('../img/hotel-dark.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-block-4 h1, .hero-block-4 h2 {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    text-shadow: 2px 2px #222 
}

.hero-block-4 h1 {
    font-size: calc(60px + (112 - 60) * ((100vw - 320px)/(1600 - 320)));
}

.hero-block-4 h2 {
    font-size: calc(24px + (54 - 24) * ((100vw - 320px)/(1600 - 320)));
}

/* Mobiles */
@media all and (max-width:767px) {
    .hero-block-4 { height: 360px; margin-bottom: 40px }
    .hero-block-4 h1, .hero-block-4 h2 { width: 70% }
    .hero-block-4 h1 { margin-bottom: 5% } 
}

/* Desktop */
@media all and (min-width:768px) {
    .hero-block-4 { height: 480px; margin-bottom: 80px }
    .hero-block-4 h1, .hero-block-4 h2 { width: 60% }
    .hero-block-4 h1 { margin-bottom: 1% }
}





/*== HERO BLOCK 5 ==*/
.hero-block-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url('../img/bike-tours.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-block-5 h1, .hero-block-5 h2 {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    text-shadow: 2px 2px #222 
}

.hero-block-5 h1 {
    font-size: calc(60px + (112 - 60) * ((100vw - 320px)/(1600 - 320)));
    line-height: 1.2
}

.hero-block-5 h2 {
    font-size: calc(24px + (54 - 24) * ((100vw - 320px)/(1600 - 320)));
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

/* Mobiles */
@media all and (max-width:767px) {
    .hero-block-5 { height: 360px; margin-bottom: 40px }
    .hero-block-5 h1, .hero-block-5 h2 { width: 80% }
    .hero-block-5 h1 { line-height: 1.2; margin-bottom: 10% }
}

/* Desktop */
@media all and (min-width:768px) {
    .hero-block-5 { height: 480px; margin-bottom: 80px }
    .hero-block-5 h1, .hero-block-5 h2 { width: 80% }
    .hero-block-5 h1 { margin-bottom: 5% }
}






/*== HERO BLOCK 6 ==*/
.hero-block-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(rgba(0,0,255,0.5),rgba(0,0,255,0.5)),url('../img/meeting.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-block-6 h1, .hero-block-6 h2 {
    font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    text-shadow: 2px 2px #222;
    text-transform: uppercase;
}

.hero-block-6 h1 {
    font-size: calc(34px + (76 - 34) * ((100vw - 320px)/(1600 - 320)));
}

.hero-block-6 h2 {
    font-size: calc(22px + (40 - 22) * ((100vw - 320px)/(1600 - 320)));
}

/* Mobiles */
@media all and (max-width:767px) {
    .hero-block-6 { height: 360px; margin-bottom: 40px }
    .hero-block-6 h1, .hero-block-6 h2 { width: 70% }
    .hero-block-6 h1 { line-height: 1.2; margin-bottom: 10% }
}

/* Desktop */
@media all and (min-width:768px) {
    .hero-block-6 { height: 480px; margin-bottom: 80px }
    .hero-block-6 h1, .hero-block-6 h2 { width: 60% }
    .hero-block-6 h1 { margin-bottom: 2% }
}