/* ==== BROWSER RESETS  ==== */
* { box-sizing: border-box; padding: 0; margin: 0 }
body, html { height: 100% }
body { max-width: 1600px; margin: 0 auto }


/* ==== UTILITY CLASS  ==== */
.img-fluid { width: 100%; height: auto }
* { margin:0; padding:0; box-sizing: border-box }

/*

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

*/




/* === 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 {
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

.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)));
}

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

/* 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%; 
		margin-left: auto;
		margin-right: auto;
	}
	.hero-block-1 h1 { margin-bottom: 10% }
	.hero-block-1 h2 { margin-bottom: 0 }
}

/* === 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 {
	text-align: left;
	color: #000;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

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

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


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

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




/* === HERO BLOCK 3 === */

.hero-block-3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #0065f2;
}

.hero-block-3 h1, .hero-block-3 h2 {
	text-align: left;
	color:#273c75;
	font-weight: bold;
	font-family: 'Merriweather', serif;
}

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

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

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

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


.hero-block h1 {
/*	text-shadow: 2px 2px #222; */
}

.hero-block h2 {
/*	text-shadow: 2px 2px #222;*/
}


.color-change-2x {
	        animation: color-change-2x 2s linear infinite alternate both;
}


/* ----------------------------------------------
 * Generated by Animista on 2019-4-3 8:17:9
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-2x
 * ----------------------------------------
 */

@keyframes color-change-2x {
  0% {
    background: #f6e58d;
  }
  100% {
    background: #f1c40f;
  }
}




/* === HERO BLOCK 4 === */

.hero-block-4 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #0065f2;
	background-image: linear-gradient(#512d6d,#c42f9e);
}

.hero-block-4 h1, .hero-block-4 h2 {
	text-align: left;
	color: #fff;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

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

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

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

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


/* === HERO BLOCK 5 === */
.hero-block-5 {
	display: flex;
	flex-direction: column;
	justify-content: center;

	background-image: url('../img/hotel-dark.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-block-5 h1, .hero-block-5 h2 {
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

.hero-block-5 h1 {
	font-weight: bold;
	font-size: calc(54px + (112 - 54) * ((100vw - 320px)/ (1600 - 320)));
	text-shadow: 2px 2px #222;

}

.hero-block-5 h2 {
	font-weight: bold;
	font-size: calc(24px + (64 - 24) * ((100vw - 320px)/ (1600 - 320)));
	line-height: 1.5;
	text-shadow: 2px 2px #222;
}

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


/* === HERO BLOCK 6 === */
.hero-block-6 {
	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-repeat: no-repeat;
	background-size: cover;
}

.hero-block-6 h1, .hero-block-6 h2 {
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

.hero-block-6 h1 {
	font-weight: bold;
	font-size: calc(54px + (112 - 54) * ((100vw - 320px)/ (1600 - 320)));
	text-shadow: 2px 2px #222;

}

.hero-block-6 h2 {
	font-weight: bold;
	font-size: calc(22px + (48 - 22) * ((100vw - 320px)/ (1600 - 320)));
	line-height: 1.5;
	text-shadow: 2px 2px #222;
	text-transform:uppercase;
}

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

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

/* === HERO BLOCK 7 === */
.hero-block-7 {
	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-repeat: no-repeat;
	background-size: cover;
}

.hero-block-7 h1, .hero-block-7 h2 {
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-family: 'Roboto Condensed', sans-serif;
}

.hero-block-7 h1 {
	font-weight: bold;
	font-size: calc(34px + (84 - 34) * ((100vw - 320px)/ (1600 - 320)));
	text-shadow: 2px 2px #222;
	text-transform:uppercase;
}

.hero-block-7 h2 {
	font-weight: bold;
	font-size: calc(22px + (48 - 22) * ((100vw - 320px)/ (1600 - 320)));
	line-height: 1.5;
	text-shadow: 2px 2px #222;
}

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

/* Mobiles - height and bottom margin, text width */
@media all and (max-width:767px) { 
	.hero-block-7 { height: 360px; margin-bottom: 40px }
	.hero-block-7 h1, .hero-block-7 h2  { 
		margin-top: 0; 
		width: 90%; 
		margin-left: auto;
		margin-right: auto;
	}
	.hero-block-7 h1 { margin-bottom: 5% }
	.hero-block-7 h2 { margin-bottom: 0 }
}


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

.hero-block-8 h1, .hero-block-8 h2 {
	text-align: left;
	color: #000;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

.hero-block-8 h1 {
	font-weight: bold;
	font-size: calc(34px + (68 - 34) * ((100vw - 320px)/ (1600 - 320)));
	line-height:1.1;
}

.hero-block-8 h2 {
	font-weight: bold;
	font-size: calc(18px + (32 - 18) * ((100vw - 320px)/ (1600 - 320)));
	line-height: 1.5;
}

/* Desktop - height and bottom margin,, text width */
@media all and (min-width:768px) { 
	.hero-block-8 { height: 480px; margin-bottom: 80px }
	.hero-block-8 h1, .hero-block-8 h2 { 
		width: 40%; 
		margin-left: 10%;
		margin-right: auto;
	}
	.hero-block-8 h1 { margin-bottom: 2% }
	.hero-block-8 h2 { margin-bottom: 0 }
}

/* Mobiles - height and bottom margin, text width */
@media all and (max-width:767px) { 
	.hero-block-8 { 
		background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url('../img/stormy-beach-mobile.jpg');
		height: 440px; margin-bottom: 40px
	}
	.hero-block-8 h1, .hero-block-8 h2  { 
		margin-top: 0; 
		width: 90%; 
		margin-left: auto;
		margin-right: auto;
	}
	.hero-block-8 h1 { margin-bottom: 5% }
	.hero-block-8 h2 { margin-bottom: 0 }
}


/* === HERO BLOCK 9 === */

.hero-block-9 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url('../img/plants.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-block-9 h1, .hero-block-9 h2 {
	text-align: left;
	color: #000;
	font-weight: bold;
	font-family: 'Playfair Display', sans-serif;
}

.hero-block-9 h1 {
	font-weight: bold;
	font-size: calc(42px + (68 - 42) * ((100vw - 320px)/ (1600 - 320)));
	line-height:1.1;
}

.hero-block-9 h2 {
	font-weight: bold;
	font-size: calc(22px + (32 - 22) * ((100vw - 320px)/ (1600 - 320)));
	line-height: 1.5;
}

/* Desktop - height and bottom margin,, text width */
@media all and (min-width:768px) { 
	.hero-block-9 { height: 480px; margin-bottom: 80px }
	.hero-block-9 h1, .hero-block-9 h2 { 
		width: 40%; 
		margin-left: 10%;
		margin-right: auto;
	}
	.hero-block-9 h1 { margin-bottom: 2% }
	.hero-block-9 h2 { margin-bottom: 0 }
}

/* Mobiles - height and bottom margin, text width */
@media all and (max-width:767px) { 
	.hero-block-9 { 
		background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url('../img/plants.jpg');
		height: 440px; margin-bottom: 40px
	}
	.hero-block-9 h1, .hero-block-9 h2  { 
		margin-top: 0; 
		width: 80%; 
		margin-left: auto;
		margin-right: auto;
	}
	.hero-block-9 h1 { margin-bottom: 8% }
	.hero-block-9 h2 { margin-bottom: 0 }
}




/* === HERO BLOCK 10 === */





/* === HERO BLOCK 11 === */