/* ==== 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 }



/* ==== FONT  ==== */
body { font-family: 'Lato', sans-serif }


/*===================== DESKTOP LOGO AND NAVIGATION MENU BAR ======================= */

/* Hide on mobiles */
@media all and (max-width:767px) { 
	.container-menu-desktop { display: none }
}

/* Display on desktops */
@media all and (min-width:768px) { 
	.container-menu-desktop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		width: 100%;
	}

	/* Logo */
	.container-menu-desktop .item-logo img { display: block; margin-left: 8px }

	/* Menu options */
	.container-menu-desktop .item-menu ul { text-align: right }

	.container-menu-desktop .item-menu ul li {
		display: inline;
		list-style-type: none;
		line-height:1;
	}

	.container-menu-desktop .item-menu ul li:last-child { 
	    margin-right: 12px;
	}

	.container-menu-desktop .item-menu ul li a { 
		text-decoration: none;
		font-weight:bold;
		font-size: calc(14px + (19 - 14) * ((100vw - 320px)/(1600 - 320)))
	}

	.container-menu-desktop .item-menu ul li a:hover, 
	.container-menu-desktop .item-menu ul li a:active { 
		text-decoration: underline;
	}

	/* Menu option styled as a button */
	.container-menu-desktop .item-menu ul li a.btn-solid { 
		padding: 8px 28px;
		border-width: 2px;
		border-style: solid;
	}

	.container-menu-desktop .item-menu ul li a.btn-solid:hover, 
	.container-menu-desktop .item-menu ul li a.btn-solid:active { 
		text-decoration: none;
		background-color: #009DA0;
		color:#fff;
	}

	/* Button corner styles */
	.container-menu-desktop .item-menu ul li a.btn-soft    { border-radius: 5px }
	.container-menu-desktop .item-menu ul li a.btn-rounded { border-radius: 100px }

}

/* Spacing for various desktop screen widths */
@media all and (min-width:768px) and (max-width:899px) { 
	.container-menu-desktop { padding: 0 2% }
	.container-menu-desktop .item-menu { margin-left: -200px }
	.container-menu-desktop .item-menu ul li { margin-right: 20px }
}

@media all and (min-width:901px) and (max-width: 1099px) { 
	.container-menu-desktop { padding: 0 5% 0 5% }
	.container-menu-desktop .item-menu { margin-left: -180px }
	.container-menu-desktop .item-menu ul li { margin-right: 30px }
}

@media all and (min-width:1100px) { 
	.container-menu-desktop { padding: 0 8% 0 8% }
	.container-menu-desktop .item-menu { margin-left: 0 }
	.container-menu-desktop .item-menu ul li { margin-right: 40px }
}


/* Styles for light (white background) and dark (green background) menus */
@media all and (min-width:768px) { 

	/*== Dark desktop menu == */
	.menu-desktop-dark { background-color: #009DA0; box-shadow: 0px 1px 10px #888; }
	.menu-desktop-dark .item-menu ul li a { color: #fff }

	.menu-desktop-dark .item-menu ul li a.btn-solid { 
		background-color: #fff; border-color: #fff; color:#009DA0;
	}

	.menu-desktop-dark .item-menu ul li a.btn-solid:hover, 
	.menu-desktop-dark .item-menu ul li a.btn-solid:active { 
		background-color: #009DA0; color:#fff;
	}

	/*== Light desktop menu == */
	.menu-desktop-light { background-color: #fff; box-shadow: 0px 1px 10px #888; }
	.menu-desktop-light .item-menu ul li a { color: #009DA0 }

	.menu-desktop-light .item-menu ul li a.btn-solid { 
		background-color: #009DA0; border-color: #009DA0; color: #fff;
	}

	.menu-desktop-light .item-menu ul li a.btn-solid:hover, 
	.menu-desktop-light .item-menu ul li a.btn-solid:active { 
		background-color: #fff; color: #009DA0;
	}

	/*== Transparent desktop menu == */
	.menu-desktop-transparent { background-color: transparent }
	.menu-desktop-transparent .item-menu ul li a { color: #fff }

	.menu-desktop-transparent .item-menu ul li a.btn-solid { 
		background-color: #fff; border-color: #fff; color: #009DA0
	}

	.menu-desktop-transparent .item-menu ul li a.btn-solid:hover, 
	.menu-desktop-transparent .item-menu ul li a.btn-solid:active { 
		background-color: #009DA0; color:#fff; border-color: #009DA0
	}

	/*== Sticky desktop menu == */
	.menu-desktop-sticky { position: fixed }
}


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

.hero-block {
	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 h1, .hero-block h2 {
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	text-shadow: 2px 2px #222;
}

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

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

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

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



/* ==== PAGE WRAPPER  ==== */
.page-wrapper { padding-bottom: 10% }

.page-wrapper h1, .page-wrapper h2, .page-wrapper h3 { line-height: 1.2; font-weight: 900 }

.page-wrapper h1 { font-size: calc(36px + (72 - 36) * ((100vw - 320px)/(1600 - 320))) }
.page-wrapper h2 { font-size: calc(28px + (42 - 28) * ((100vw - 320px)/(1600 - 320))); color: #009DA0 }
.page-wrapper h3 { font-size: calc(18px + (28 - 18) * ((100vw - 320px)/(1600 - 320))); color: #009DA0 }

.page-wrapper p, 
.page-wrapper li { font-size: calc(15px + (20 - 15) * ((100vw - 320px)/(1600 - 320))); line-height: 1.6  }
.page-wrapper li { margin-left: 17px }

.page-wrapper a.fancy-link:link, 
.page-wrapper a.fancy-link:visited {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: solid 2px #009DA0;
	color: #009DA0;
}

.page-wrapper a.fancy-link:hover, 
.page-wrapper a.fancy-link:active {
	text-decoration: none;
	border-bottom: none
}

/* Desktop */
@media all and (min-width:768px) {
	.page-wrapper { width: 60%; margin-left: auto; margin-right: auto }
	.page-wrapper h1 { margin: 0 0 5% 0 }
	.page-wrapper h2 { margin: 5% 0 1% 0 }
	.page-wrapper h3 { margin: 4% 0 0 0 }
	.page-wrapper p, .page-wrapper ul li { margin-bottom: 20px }
	.page-wrapper img { display: block; margin-bottom: 20px }
}

/* Mobiles */
@media all and (max-width:767px) {
	.page-wrapper { width: 80%; margin-left: auto; margin-right: auto }
	.page-wrapper h1 { margin: 0 0 5% 0 }
	.page-wrapper h2 { margin: 12% 0 1% 0 }
	.page-wrapper h3 { margin: 8% 0 0 0 }
	.page-wrapper p, .page-wrapper ul li { margin-bottom: 14px }
	.page-wrapper img { display: block; margin-bottom: 14px }
}