/* SCSS Document */

@import url(https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap);

h1 {
  font-family: 'Montserrat', 'Helvetica', 'Arial', 'sans-serif';
  font-weight: 900;
  letter-spacing: 1px; }

h1, h2, h3, h4, h5, h6 {
	color: #016190;
	font-weight: 400;
	font-family: congenial, sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
	scroll-behavior: smooth;
}

body {
	color: #606161;
  font-family: 'Montserrat', 'Helvetica', 'Arial', 'sans-serif'; }

section {
  padding-top: 100px;
  padding-bottom: 100px; }

section.text-center {
  text-align: center; }

.button-bg {
	background-color: #016190;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	border-radius: 1000px;
}

.btn-primary {
	background-color: #016190;
	border: none;
	padding: 15px 45px;
	border-radius: 300px;
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	transition: 0.4s;
}

.btn-primary:hover, .btn-primary:focus {
	background-color: #75C79E;
}

.btn-secondary {
	background-color: #75C79E;
	border: none;
	padding: 15px 45px;
	border-radius: 300px;
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	transition: 0.4s;
}

.btn-secondary:hover, .btn-primary:focus {
	background-color: #016190;
	color: #FFF;
}

.carousel {
	min-height: 100vh;
	background-image: url("../img/mountain-coloured-bg.jpg");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.item {
	padding: 15px;
}


.carousel-image {
	margin: 0 auto;
	text-align: center;
	padding: 20px 100px;
}

.carousel-content {
	text-align: center;
}

@media (min-width: 768px){
	.carousel-content {
		text-align: left;
	}
}

.carousel-content h1, p {
	margin-bottom: 30px;
}

.carousel-indicators li {
	background-color: #016190 !important;
}

.carousel-indicators .active {
	background-color: #75C79E !important;
}

.navbar {
	background-color: #F8F8F8;
}

.navbar-nav > li > a {
	font-size: 10px;
	color: #016190 !important;
	font-weight: 500;
	letter-spacing: 0.4em;
	transition: 0.4s;
}

.navbar-nav > li > a:hover {
	color: #75c79e !important;
}

@media (max-width: 450px) {
	.navbar-brand {
		width: 80%;
		padding: 18px 0 18px 15px;
	}
	
}


@media (min-width: 768px){
.white-space {
	padding: 0 120px;
}
}

.dropdown-menu {
	background-color: #FFF;
}

.about {
	background-color: #F8F8F8;
	color: #606161;
}

.infographic {
	padding: 24px 0;
}

.basecamp {
	background-color: #76c79e;
}

.basecamp, .summit {
	color: #FFF !important;
}

.basecamp h2, .basecamp h4 {
	color: #016190 !important;
}

.summit {
	background-color: #016190;
	color: #FFF !important;
}

.summit h2, .summit h4 {
	color: #76c79e !important;
}

.compare {
	background-color: #F8F8F8;
	color: #606161;
}

/*
table.compare {
	margin: 0 auto;
	text-align: center;
	border-collapse: collapse;
	width: 100%;
}
*/

/*
table.compare td, table.compare th {
  border: 1px solid #F8F8F8;
  padding: 20px;
}
*/


.table-bg {background-color: #fff;}

.table-bg p {
	margin-bottom: 0px !important;
}

.table-row {
	padding: 20px 0 20px 0;
	border: 1px solid #f8f8f8;
}

.table-row:hover {background-color: #e9eff4; color: #016190;}

.table-header {
	text-align: center;
	background-color: #d1dfe9;
 	color: #016190;
	padding: 20px 0px 20px 0px;
	border: 1px solid #F8F8F8;
}


.table-bg i.fa-check, i.fa-plus-square {
	color: #76c79e;
}

.table-bg i.fa-times {
	color: #016190;
}

.decide {
	color: #76C79E;
}

.top-margin {
	margin-top: 80px;
}

h2 strong {
	color: #76c79e;
	text-transform: uppercase;
}

.box {
	/*background-color: #919191;*/
	min-height: 150px;
	text-align: center;
	color: #FFF;
}

footer {
	background: #016190;
	color: #FFF;
 	padding: 40px; 
	text-align: center;
}

footer a {
	text-decoration: none;
	color: #FFF;
}

footer a:hover {
	color: #F6CF9E;
}
