@charset "UTF-8";
/* CSS Document */


body {
  font-family: 'Lato', sans-serif;
	color: #444;
}

p, li {
	font-weight:300;
	font-size: 1.2rem;
}
a:link {
	color: #00aaff;
	text-decoration: none;
	font-weight: 500;
}

strong {
  font-family: 'Lato', sans-serif;
	color: #888;
}

h3 {
	color: #888;
}

/*   TEXT UTILITIES    */

.u-center-text {
	text-align: center !important;
}

.u-margin-bottom-small {
	margin-bottom: 15px !important;
}
.u-margin-bottom-medium {
	margin-bottom: 40px !important;
}
.u-margin-bottom-big {
	margin-bottom: 80px !important;
}

.u-margin-top-huge {
	margin-top: 100px !important;
}
.u-margin-top-big {
	margin-top: 80px !important;
}


/* ///////   GRID SETUP  /////  */
		.grid-test {
			max-width: 1140px;
			margin: 50px auto;
		}
		.row {
			/*background-color: #ccc;*/
		}
		
		.row::after {
			content: "";
			display: table;
			clear: both
		}
		.row:not(:last-child) {
			margin-bottom: 80px;
		}
		[class^="col-"] {
			/*background-color: #00aaff;*/
			float: left;
		}
		[class^="col-"]:not(:last-child) {
			margin-right: 60px;
		}
		.col-1-of-2 {
			width: calc((1140px - 60px) / 2);
		}

		.col-1-of-3 {
			width: calc((1140px - 60px * 2) / 3);
		}

		.col-1-of-4 {
			width: calc((1140px - 60px * 3) / 4);
		}
		.col-2-of-3 {
			width: calc(2 * (((1140px - 60px * 2) / 3)) + 60px);
		}
		.col-2-of-4 {
			width: calc(2 * ((1140px - 60px * 3) / 4) + 60px);
		}
		.col-3-of-4 {
			width: calc(3 * ((1140px - 60px * 3) / 4) + 60px * 2);
		}
/* ///////   GRID SETUP  END   /////  */


/* HEADER  */

.header {
	height: 95vh;
	background-image: linear-gradient(
		to right bottom,
		rgba(255, 255, 255, 0.8),
		rgba(96, 194, 255, 0.8)),
	url(../img/hero.jpg);
	background-size: cover;
	background-position: top;
	
	clip-path: polygon(0 0, 100% 0, 100% 85vh, 50% 100%, 0 85vh);
}

.header__logo-box {
	position: absolute;
	top: 40px;
	left: 40px;
}

.header__logo {
	height: 35px;
}

.header__text-box {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.heading-primary {
	color: #666;
	text-transform: uppercase;
	backface-visibility: hidden;
	margin-bottom: 60px;
}

.heading-primary--main {
	display: block;
	font-size: 60px;
	font-weight: 400;
	letter-spacing: 35px;
	
	animation-name: moveInLeft;
	animation-duration: 1s;
	animation-timing-function: ease-out;
}

.heading-primary--sub {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 17.5px;
	/*animation: moveInRight: 1s ease-out; */
}


/*   SECTIONS   */

.section-about {
	padding: 250px 0;
	margin-top: -200px;
	background-image: 
	url(../img/inky-blot-1-1-1024x800.png);
	background-size: cover;
	background-position: top;
	position: relative;
	margin-top: -100px;
}

.section-features {
	padding: 200px 0;
	background-image: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.8),
		rgba(96, 194, 255, 0.8)),
	url(../img/hero.jpg);
	background-size: cover;
	background-position: top;
	position: relative;
	margin-top: -100px;
	
	transform: skewY(-7deg);
}

.section-features > * {
	transform: skewY(7deg);
}

.section-tours {
	background-color: #f7f7f7;
	padding: 250px 0 150px 0;
	margin-top: -100px;
}

.section-stories {
	position: relative;
	padding: 150px 0;
	background-image: 
	url(../img/hero.jpg);
}

.section-book {
	padding: 150px 0;
	background-image: linear-gradient(
		to right bottom,
		rgba(255, 255, 255, 0.8),
		rgba(96, 194, 255, 0.8)),
	url(../img/hero.jpg);
}

.book {
	background-image: linear-gradient(105deg, 
		rgba(255,255,255, .9) 0%, 
		rgba(255,255,255, .9) 50%, 
		transparent 50%) , 
		url(../img/nat-10.jpg);
	background-size: 100%;
	border-radius: 3px;
	box-shadow: 0 15px 40px rgba(0,0,0,.2);
	
	
	/*width: 80%;
	margin: 0 auto;*/
	height: 500px;
}

.book__form {
	width: 50%;
	padding: 60px;
}


.heading-secondary {
	font-size: 2rem;
	text-transform: uppercase;
	font-weight: 500;
	/*background-image: linear-gradient(to right, #7fc4fd, #83cffe);*/
	display: inline-block;
	-webkit-background-clip: text;
	/*color: transparent;*/
	color: #698ea4;
	letter-spacing: 2px;
	transition: all .5s;
}

.heading-secondary:hover {
	transform: skewY(5deg) skewX(5deg) scale(1.1);
	text-shadow: 5px 20px 5px rgba(0,0,0, .1);
}

.heading-tertiary {
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
}



.paragraph:not(:last-child) {
	margin-bottom: 30px;
}


/*  BUTTON    */
.btn,
.btn:link, 
.btn:visited {
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 40px;
	display: inline-block;
	border-radius: 100px;
	transition: all 2s;
	position: relative;
	
	/* Change for the <button element> */
	border: none;
	cursor: pointer;
}

.btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

.btn:hover::after {
	transform: scaleX(1.4) scaleY(1.6);
	opacity: 0;
}

.btn:active,
.btn:focus {
	outline: none;
	transform: translateY(-1px);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.btn--white {
	background-color: #fff;
	color: #333;
}

.btn--white::after {
	background-color: #fff;
}

.btn--green {
	background-color: rgba(96, 194, 255);
	color: #fff;
}

.btn--green::after {
	background-color: rgba(96, 194, 255);
}

.btn::after {
	content:"";
	display: inline-block;
	height: 100%;
	width: 100%;
	border-radius: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
	transition: all .4s;
}

.btn--animated {
	animation: moveInBottom .5s ease-out .75s;
	animation-fill-mode: backwards;
}


/* BTN TEXT */

.btn-text {
		transition: all .2s;

}

.btn-text:link, 
.btn-text:visited {
	font-size: 30px;
	color: #00aaff;
	display: inline-block;
	text-decoration: none;
	border-bottom: 1px solid #00aaff;
	padding: 5px 10px;
	border-radius: 3px;
}

.btn-text:hover {
	background-color: #00aaff;
	color: #fff;
	box-shadow: 0 10px 20px rgba(0,0,0,.15);
	transform: translateY(-2px);
}

.btn-text:active {
	box-shadow: 0 5px 10px rgba(0,0,0,.15);
	transform: translateY(0);
}


/*  COMPOSITION  */

.composition {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15vh;
}

.composition__photo {
	width: 55%;
	border-radius: 2px;
	position: absolute;
	transition: all .5s;
	z-index: 10;
	outline-offset: 20px;
}

.composition__photo--p1 {
	left: 0;
	top: -2px;
}
.composition__photo--p2 {
	right: 0;
	top: 200px;
}
.composition__photo--p3 {
	left: 0%;
	top: 400px;
}

.composition:hover .composition__photo:not(:hover) {
	transform: scale(.95);

}

.composition__photo:hover {
	outline: none;
	transform: scale(1.05) translateY(-.5rem);
	z-index: 20;
}

/*  COMPONENTS     */

.feature-box {
	background-color: rgba(255,255,255, .8);
	font-size: 15px;
	padding: 25px;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0 15px 40px rgba(0,0,0,.15);
	transition: transform .5s;
}

.feature-box__icon {
	font-size: 60px;
	margin-bottom: 5px;
	background-image: linear-gradient(to right, #56fd89, #78ab23);
	display: inline-block;
	-webkit-background-clip: text;
	color: transparent;
}

.feature-box:hover {
	transform: translateY(-1.5rem) scale(1.03);
}


/* CARDS */

.card {
	perspective: 1500px;
	-moz-perspective: 1500px;
	postion: relative;
	height: 520px;
}

.card__side {
	height: 520px;
	transition: all .8s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	backface-visibility: hidden;
	
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0px 15px 40px rgba(0,0,0,.10);
}

.card__side--front {
	background-color: #fff;

}

.card__side--back {
	transform: rotateY(180deg);

}

.card__side--back-1 {
	background-image: linear-gradient(
		to right bottom,
		rgba(255, 185, 0),
		rgba(255, 119, 48));
}

.card__side--back-2 {
	background-image: linear-gradient(
		to right bottom,
		rgba(126, 213, 111),
		rgba(40, 180, 33));
}

.card__side--back-3 {
	background-image: linear-gradient(
		to right bottom,
		rgba(41, 152, 255),
		rgba(86, 67, 255));
}

.card:hover .card__side--front {
	transform: rotateY(-180deg);
}

.card:hover .card__side--back {
	transform: rotateY(0);
}


/* Front side Styling  */

.card__picture {
	background-size: cover;
	height: 230px;
	background-blend-mode: screen;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	bordertop-left-radius: 3px;
	bordertop-right-radius: 3px;
}

.card__picture--1 {
	background-image: linear-gradient(
		to right bottom,
		rgba(255, 185, 0, .85),
		rgba(255, 119, 48, .85)),
		url("../img/nat-5.jpg");
}

.card__picture--2 {
	background-image: linear-gradient(
		to right bottom,
		rgba(126, 213, 111, .85),
		rgba(40, 180, 33, .85)),
		url("../img/nat-6.jpg");
}

.card__picture--3 {
	background-image: linear-gradient(
		to right bottom,
		rgba(41, 152, 255, .85),
		rgba(86, 67, 255, .85)),
		url("../img/nat-7.jpg");
}

.card__heading {
	font-size: 28px;
	line-height: 1.4em;
	font-weight: 300;
	text-transform: uppercase;
	text-align: right;
	color: #fff;
	position: absolute;
	top: 120px;
	right: 20px;
	width: 75%;
}

.card__heading-span {
	padding: 10px 15px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.card__heading-span--1 {
	background-image: linear-gradient(to right bottom,
		rgba(255, 185, 0, .85),
		rgba(255, 119, 48, .85));
}

.card__heading-span--2 {
	background-image: linear-gradient(to right bottom,
		rgba(126, 213, 111, .85),
		rgba(40, 180, 33, .85));
}

.card__heading-span--3 {
	background-image: linear-gradient(to right bottom,
		rgba(41, 152, 255, .85),
		rgba(86, 67, 255, .85));
}

.card__details {
	padding: 30px;
}

.card__details ul {
	list-style: none;
	width: 80%;
	/*margin: 0 auto;*/
}

.card__details li {
	text-align: center;
	font-size: 15px;
	padding: 10px;
}

.card__details li:not(:last-child) {
	border-bottom: 1px solid #eee;
	
}


/* Back side Styling  */

.card__cta {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	text-align: center;
}

.card__price-box {
	text-align: center;
	color: #fff;
	margin-bottom: 80px
}

.card__price-only {
	font-size: 14px;
	text-transform: uppercase;
}

.card__price-value {
	font-size: 60px;
	font-weight: 100;
}


/*  STORY   */


.story {
	width: 75%;
	margin: 0 auto;
	box-shadow: 0 30px 60px rgba(0,0,0,.1);
	background-color: rgba(255,255,255,.6);
	border-radius: 3px;
	padding: 60px;
	padding-left: 90px;
	font-size: 16px;
	transform: skewX(-12deg);
}



.story__shape {
	width: 150px;
	height: 150px;
	float: left;
	-webkit-shape-outside: circle(50% at 50% 50%);
	shape-outside: circle(50% at 50% 50%); /* causes the item to flow around shape*/
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%); /* displays the object as a circle */
	
	/*  transform: translateX(-30px);  */
	
	transform: skewX(12deg);
	position: relative;
	overflow: hidden;
}

.story__img {
	height: 100%;
	transform: translateX(-40px) scale(1.4);
	backface-visibility: hidden;
	transition: all .5s;
}

.story__text {
	transform: skewX(12deg);
}

.story__caption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 20%);
	color: #fff;
	text-transform: uppercase;
	font-size: 17px;
	text-align: center;
	opacity: 0;
	transition: all .5s;
	backface-visibility: hidden;
}

.story:hover .story__caption {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.story:hover .story__img {
	transform: translateX(-40px) scale(1);
	filter: blur(3px) brightness(80%);
}

/*     BG VIDEO     */

.bg-video {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -10;
	opacity: .1;
	overflow: hidden;
}

.bg-video__content {
	height: 100%;
	width: 100%;
	object-fit: cover;
}


/*  FORM  */

.form {
	
}
.form__group:not(:last-child) {
	margin-bottom: 20px;
}
.form__input {
	font-family: inherit;
	color: inherit;
	font-size: 15px;
	padding: 15px 20px;
	border-radius: 2px;
	background-color: rgba(255,255,255,.5);
	border: none;
	border-bottom: 3px solid transparent;
	width: 70%;
	display: block;
	transition: all .3s;
}
.form__input:focus {
	outline: none;
	box-shadow: 0 10px 20px rgba(0,0,0,.1);
	border-bottom: 3px solid rgba(126, 213, 111);
}
.form__input::-webkit-input-placeholder {
	color: #999;
}
.form__input:focus:invalid {
	border-bottom: 3px solid orangered;
}

.form__label {
	font-size: 12px;
	font-weight: 700;
	margin-left: 20px;
	margin-top: 7px;
	display: block;
	transition: all .5s;
}

.form__input:placeholder-shown + .form__label {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-40px);
}


.form__radio-group {
	width: 49%;
	display: inline-block;
}

.form__radio-input {
	display: none;
}
.form__radio-label {
	font-size: 16px;
	cursor: pointer;
	position: relative;
	padding-left: 45px;
}
.form__radio-button {
	height: 20px;
	width: 20px;
	border: 5px solid rgba(126, 213, 111);
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	left: 0;
	top: -5px;
}

.form__radio-button::after {
	content: "";
	display: block;
	height: 13px;
	width: 13px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(126, 213, 111);
	opacity: 0;
	transition: opacity .2s
}

.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
	opacity: 1;
}

/* FOOTER  */

.footer {
	background-color: #333;
	padding: 100px 0;
	font-size: 14px;
}

.footer__logo-box {
	text-align: center;
	margin-bottom: 80px;
}

.footer__logo {
	width: 100px;
	height: auto;
}

.footer__navigation {
	border-top: 1px solid #999;
	padding-top: 20px;
	display: inline-block;
}
	
.footer__list {	
	list-style: none;
}

.footer__item {
	display: inline-block;
}
.footer__item:not(:last-child) {
	margin-right: 15px;
}

.footer__link {
	
}

.footer__link:link,
.footer__link:visited {
	color: #777;
	background-color: #333;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	transition: all .2s;
	font-weight: 300;
	font-size: 1em;
}

.footer__link:hover,
.footer__link:active {
	color: #00aaff;
	box-shadow: 0 10px 20px rgba(0,0,0, .4);
	transform: rotate(5deg) scale(1.3);
}

.footer__copyright {
	color: #777;
	border-top: 1px solid #999;
	padding-top: 20px;
	display: inline-block;
	width: 80%;
	float: right;
}


/* NAVIGATION */

.navigation {
	
}

.navigation__checkbox {
	display: none;
}

.navigation__button {
	background-color: #fff;
	height: 70px;
	width: 70px;
	position: fixed;
	top: 60px;
	right: 60px;
	border-radius: 50%;
	z-index: 2000;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	text-align: center;
	cursor: pointer;

}

.navigation__background {
	height: 60px;
	width: 60px;
	border-radius: 50%;
	position: fixed;
	top: 65px;
	right: 65px;
	/*background-image: radial-gradient(
		rgba(126, 213, 111 ),
		rgba(40, 180, 33 ));*/
	background-image: linear-gradient(
		to right bottom,
		rgba(255, 255, 255, 0.8),
		rgba(96, 194, 255, 0.8)),
	url(../img/hero.jpg);
	background-size: cover;
	background-position: top;
	z-index: 1000;
	
	transition: transform .8s cubic-bezier(.86,0,.07,1);

	/*transform: scale(80); */
}

.navigation__nav {
	height: 100vh;
	position: fixed;
	top: 0;
	left: -200px;
	z-index: 1500;
	
	opacity: 0;
	width: 0;
	transition: all .8s cubic-bezier(.68,-.55,.265,1.55);
}

.navigation__list {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	list-style: none;
	text-align: center;
	width: 100%;
}

.navigation__item {
	margin: 20px;
}

.navigation__link {
	
}

.navigation__link:link, 
.navigation__link:visited {
	display: inline-block;
	font-size: 30px;
	font-weight: 300;
	padding: 10px 20px;
	color: #333;
	text-decoration: none;
	text-transform: uppercase;
	background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
	background-size: 220%;
	transition: all .4s;
}

.navigation__link:link span, 
.navigation__link:visited span{
	margin-right: 15px;
	display: inline-block;
}

.navigation__link:hover, 
.navigation__link:active {
	background-position: 100%;
	color: #00aaff;
	transform: translateX(10px);
}

/* NAVIGATION FUNCTIONALITY */


.navigation__checkbox:checked ~ .navigation__background {
	transform: scale(80);
}

.navigation__checkbox:checked ~ .navigation__nav {
	opacity: 1;
	width: 100%;
	left: 0;
}


/* NAVIGATION ICON */


.navigation__icon  {
	position: relative;
	margin-top: 35px;
}

.navigation__icon,
.navigation__icon::before,
.navigation__icon::after  {
	width: 30px;
	height: 2px;
	background-color: #333;
	display: inline-block;
}

.navigation__icon::before, 
.navigation__icon::after {
	content: "";
	position: absolute;
	left: 0;
	transition: all .3s;
}


.navigation__icon::before {
	top: -8px;
}

.navigation__icon::after  {
	top: 8px;
}

.navigation__button:hover .navigation__icon::before {
	top: -10px;
}

.navigation__button:hover .navigation__icon::after  {
	top: 10px;
}

.navigation__checkbox:checked + .navigation__button .navigation__icon {
	background-color: transparent;
	
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
	top: 0px;
	transform: rotate(135deg);
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
	top: 0px;
	transform: rotate(-135deg);
}


/* POPUP */

.popup {
	height: 100vh;
	width: 100%;
	position: fixed;
	top:0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
}

.popup__close:hover {
	color: rgba(126, 213, 111);
}

.popup__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.25);
	
	width: 75%;
	background-color: #fff;
	box-shadow: 0 20px 40px rgba(0,0,0,.2);
	border-radius: 3px;
	display: table;
	overflow: hidden;
	opacity: 0;
	transition: all .4s .2s;
}

.popup__left {
	width: 33.333333%;
	display: table-cell;
}

.popup__right {
	width: 66.6666667%;
	display: table-cell;
	vertical-align: middle;
	padding: 30px 50px;
}

.popup__img {
	display: block;
	width: 100%;
}

.popup__text {
	font-size: 14px;
	margin-bottom: 40px;
	
	/* Column Layout*/
	
	-moz-column-count: 2;
	-moz-column-gap: 2rem;
	-moz-column-rule: 1px solid #eee;
	
	column-count: 2;
	column-gap: 2rem;
	column-rule: 1px solid #eee;
	
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}


/* POPUP OPEN STATES */

.popup:target {
	opacity: 1;
	visibility: visible;
}

.popup:target .popup__content {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.popup__close,
.popup__close:link,
.popup__close:visited  {
	color: #777;
	position: absolute;
	top: 25px;
	right: 25px;
	font-size: 30px;
	text-decoration: none;
	line-height: 10px;
	display: inline-block;
	transition: all .2s;
}




/*  MEDIA QUERY MANAGER  


0 - 600px:		Phone
600 - 900px:	Tablet portrait
900 - 1200px:	Tablet Landscape
[1200 - 1800]: 	Normal Styles
1800+:			Big Desktop;

*/

@media (max-width: 1200px) {
	.col-1-of-2 {
		width: 90%;
		margin-left: 5%;
	}
.composition {
	margin-top: 10px;
	}
}


@media (max-width: 500px) {
	p, li {
		font-size: 1.5rem;
	}
	.heading-primary {
		margin-top: 60px;
	}
	.heading-primary--main {
		font-size: 30px;
		letter-spacing: 5px;
		margin-top: 30px;
	}
	img.header-logo {
	  	max-width: 70px;
	}
	.heading-primary--sub {
	  	letter-spacing: 5px;
	}
    img {
        max-width: 90%;
    }
}