*, *::before, *::after {
	box-sizing: border-box;
}

html {	
	background-color: #282a2c;
	overflow-x: hidden;
	font-family: 'Kanit', sans-serif;
	scroll-behavior: smooth;
}

p {
  	font-size: calc(12px + 6 * ((100vw - 320px) / 680));
}

/*--------Anchor Area --------*/
a.anchor {
    display: block;
    position: relative;
    top: 30px;
    visibility: hidden;
}

#exploreNewPlacesNav,
#loveTravelNav {
	top: -20px ;
}

a {
	text-decoration: none;
	color: #30639A;
}

a:hover, a:focus {	
	color: #97A8BD;
}

/* ---------------Nav Bar----------------- */

.navBar {
	pointer-events: none;
  	position: fixed;
  	display: flex;
  	height: 40px;
  	width: 100%;
  	justify-content: flex-end;
  	top: 0;
  	color: #30639A;
  	z-index: 1;
  	background: rgb(226,231,235);
	background: -webkit-linear-gradient(rgba(226,231,235,0.3) -20%, rgba(87,125,165,0.05) 43%, rgba(40,42,44,0.0) 100%);
	background: -o-linear-gradient(rgba(226,231,235,0.3) -20%, rgba(87,125,165,0.05) 43%, rgba(40,42,44,0.0) 100%);
	background: linear-gradient(rgba(226,231,235,0.3) -20%, rgba(87,125,165,0.05) 43%, rgba(40,42,44,0.0) 100%);
}

.navbar ul a li {
	padding-top: 5px;
}

#nav-icon {
	order: 1;
	width: 45px;
	height: 25px;
	position: relative;
	align-self: center;	
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
} 

#nav-icon {
  	display: flex;
  	pointer-events: all;  	
}

#nav-icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 30%;
    background: #E2E7EB;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);  
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon:hover span {
	background-color: #97A8BD;
}

#nav-icon:hover + .menuWordText   {
	color: #97A8BD;
	transition: color .25s ease-in-out;
}

#nav-icon span:nth-child(even) {
    left: 30%;
    border-radius: 0 9px 9px 0;
}

#nav-icon span:nth-child(odd) {
    left: 0px;
    border-radius: 9px 0 0 9px;
}

#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {
    top: 0px;
}

#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
    top: 10px;
}

#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
    top: 20px;
}

#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(1) {
    left: 2px;
    top: 6px;
}

#nav-icon.open span:nth-child(2) {
    left: calc(50% - 12px);
    top: 6px;
}

#nav-icon.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

#nav-icon.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

#nav-icon.open span:nth-child(5) {
    left: 2px;
    top: 15px;
}

#nav-icon.open span:nth-child(6) {
    left: calc(50% - 12px);
    top: 15px;
}

.enjoyTheCold:hover {
  animation: shake 0.3s;
  animation-iteration-count: .1s;
  cursor: none;
}

@keyframes shake {
  0% { transform: translate(.5px, .5px) rotate(0deg); }
  10% { transform: translate(-.5px, -1px) rotate(-.5deg); }
  20% { transform: translate(-1.5px, 0px) rotate(.5deg); }
  30% { transform: translate(1.5px, 1px) rotate(0deg); }
  40% { transform: translate(.5px, -.5px) rotate(.5deg); }
  50% { transform: translate(-.5px, 1px) rotate(-.5deg); }
  60% { transform: translate(-1.5px, .5px) rotate(0deg); }
  70% { transform: translate(1.5px, .5px) rotate(-.5deg); }
  80% { transform: translate(-.5px, -.5px) rotate(.5deg); }
  90% { transform: translate(.5px, 1px) rotate(0deg); }
  100% { transform: translate(.5px, -1px) rotate(-.5deg); }
}

.menuWordText {
	color: #E2E7EB;
	font-weight: bold;
	align-self: center;
	margin-right: .7rem;
	font-size: 20px;
	transition: color .5s;
	z-index: 20;
}

.enjoyTheCold {
	pointer-events: all;
	display: inline-block;
	font-size: 38px;
	font-style: italic;
	color: #E2E7EB;
	align-self: center;
	margin-right: auto; 
	margin-left: 0.5em;
	z-index: 20;
}

.menuDropdown {
	border: 1px solid #30639A;
	border-radius: 5px;
	background-color: transparent;
	position: absolute;
	list-style-type: none;
	transform: translate3d(25rem, 8rem, 0);
	transition: all .25s cubic-bezier(.47,-0.78,1,-0.59);
	overflow: hidden;
	visibility: hidden;
}

.menuDropdown.hideMenuDropdown {
	transform: translate3d(0, 0,0);
	visibility: visible;	
	transition: all .27s cubic-bezier(0,1.8,.36,1.55);
}

ul.menuDropdown {
	pointer-events: all;  
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
	z-index: -1;
}

.menuDropdown li {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	background-color: #E2E7EB;
	height: 25vh;
	border-bottom: 2px solid #30639A;
	font-size: calc(16px + (100 - 46) * ((100vw - 400px) / (1600 - 300)));
}

/*----------Hero Image------------*/

.heroImage {
  	position: relative;
  	width: 100vw;
  	height: 100vh;
  	background: url("../images/hero-cold-mountain.jpg") no-repeat #222;
  	background-size: cover;
  	background-position: center top;
}

.h1TitleStyles {
	font-size: calc(22px + (100 - 26) * ((100vw - 300px) / (1600 - 300)));
	color: #E2E7EB;
	-moz-text-stroke-color: #E2E7EB;
    -webkit-text-stroke-color: #E2E7EB;	
    -moz-text-stroke-width: 1px;  
    -webkit-text-stroke-width: 1px;
    white-space: nowrap;
    color: rgba(21, 36, 61, 0.1);
}

.heroImageText {
	position: absolute;
	top: 37%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color: #E2E7EB;
	-moz-text-stroke-color: #E2E7EB;
    -webkit-text-stroke-color: #E2E7EB;
}

h1 span {
	color: rgba(226, 231, 235, .08);
	-moz-text-stroke-color: #E2E7EB;
    -webkit-text-stroke-color: #E2E7EB;
    -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
}

.sectionTitlesText {
	position: relative;
	text-align: center;
	font-size: calc(16px + (100 - 58) * ((100vw - 300px) / (1600 - 300)));
}

.sectionTitlesText span {
	color: rgba(226, 231, 235, 1);
	-moz-text-stroke-width: 0;  
    -webkit-text-stroke-width: 0;
}

/*--------General Styles--------*/

.afterHeroBodyArea {
	width: 80%;
	margin: 0 auto;
	margin-top: 5rem;
}

.gridImgSizing {
	height: 100%;
	width: 100%;
}

img {
	transition: all .4s ease;
	box-shadow: 1.5px 1px 2.5px #000;	
}

img:hover {
	transform: translate3d(-2px, -2px, 0);	
	box-shadow: 6px 4px 10px #000;
	transition: all .3s ease;
}

/* ----------Keep Cool Text Container-------------*/

.keepCoolTxtContainer {
	position: relative;
	margin-top: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #E2E7EB;
	font-size: .9rem;
	text-align: right;
}

.keepCoolTxtContainer span {
	margin-left: 2rem;
}

.containerLine {
	content: '';
	width: 2px;
	height: calc(2.3rem + (40) * ((100vw - 400px) / (1600 - 300)));
	background-color: #E2E7EB;
	margin-top: 4px;
	margin-right: 10%;
}

/* --First Picture Grid-- */

.grid-container1 {
    width: 90%;
    max-width: 1000px;
    display: grid;
    margin: 6rem auto;
    grid-gap: calc(10% / 6);
    grid-row-gap: calc(15% / 6);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "topPicture topPicture rightPicture" 
    					   "bottomLeftPicture middlePicture rightPicture";
}

.topPicture1 { 
	grid-area: topPicture;
}

.rightPicture1 { 
	grid-area: rightPicture;
}

.bottomLeftPicture1 { 
	grid-area: bottomLeftPicture;
}

.middlePicture1 { 
	grid-area: middlePicture; 
}

/*---------Love Travel Text Area--------*/

.loveTravelTxtContainer{
	position: relative;
	margin-top: 4rem;
	display: flex;
	justify-content: center;
	align-items: flex-start ;
	color: #E2E7EB;
	font-size: .9rem;
	text-align: right;
}

.loveTravelTxtContainer p {
	text-align: left;	
}

.loveAlignment {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	transform: translateX(16%);
}

.loveTravelLine {
	margin-top: .5rem ;
	content: '';
	height:  calc(6.1rem + (150) * ((100vw - 200px) / (1600 - 300)));
	margin-right: 2%;
}

.loveTravelText { 
	position: relative;
	text-align: left;
	margin-bottom: 1rem;
	font-size: calc(16px + (100 - 58) * ((100vw - 300px) / (1600 - 300)));
		
}

.loveTravelText span {
	color: rgba(226, 231, 235, 1);
	-moz-text-stroke-width: 0;  
    -webkit-text-stroke-width: 0;
    margin-left: 0;
    margin-left: 0;
}

/*---------Wide Image--------*/
.wideMountain {
	margin: 6rem auto;
	margin-bottom: 4rem;
	width: 90%;		
}

a .wideImageContiner {
	display: flex;
	justify-content: flex-end;
	height: 100%;
	width: 100%;
}

/*---------Explore Your Path Container--------*/

.explorePathTxtContainer {
	position: relative;
	margin: 0 auto;
	margin-top: 3em;
	color: #E2E7EB;
	font-size: .9rem;
	text-align: right;
}

.innerExplorePathTxtContainer {
	margin-top: 1rem;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	max-width: 35rem;
	align-items:center;
	text-align: left;
}

.explorePathTxtContainer h3 {
	margin: 1.5rem auto;
	max-width: 95%;
	text-align: center;
	font-size: calc(18px + 5 * ((100vw - 320px) / 680));
  
}

.exploreYourPathContainerLine {
	content: '';
	width: 3px;
	height: calc(1.2rem + (30) * ((100vw - 200px) / (1800 - 20)));;
	background-color: #E2E7EB;
	margin-right: 8%;
}

/*---------Second Picture Grid--------*/

.grid-container2 {
  width: 90%;
  max-width: 1000px; 
  display: grid;
  margin: 6rem auto;
  line-height: 0.74rem;
  grid-gap: calc(10% / 6);
  grid-row-gap: calc(18% / 6);
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "leftPicture topMiddlePicture topRightPicture" 
  					   "leftPicture bottomPicture bottomPicture";
}

.leftPicture2 { 
	grid-area: leftPicture;
}

.topMiddlePicture2 { 
	grid-area: topMiddlePicture;
}

.topRightPicture2 { 
	grid-area: topRightPicture;
}

.bottomPicture2 { 
	grid-area: bottomPicture;
}

/*---------Find Your Cool Section--------*/

.keepCoolTxtContainer ul {
	margin-top: .4rem;
}

.keepCoolTxtContainer li {	
	margin-bottom: 0.6rem;	
}

.locatioIcons li {
	font-size: calc(12px + (6 * ((100vw - 320px) / 680)));
	height: calc(1.8rem * ((100vw - 200px) / (1800 - 20)));
	text-align: center;
	margin-right: 1rem;
	line-height: 1rem;
}

.locationList li {
	font-size: calc(12px + (6 * ((100vw - 320px) / 680)));
	line-height: calc(12px + (6 * ((100vw - 320px) / 680)));;
	text-align: left;
}

.locationLine {
	margin-top: -1px;
	margin-right: 4%;
	height: calc(3.8rem + (20) * ((100vw - 300px) / (1600 - 300)));
}

/*---------Footer--------*/

footer {
	margin-top: 4rem;
	width: 100%;
	height: 3rem;
	background: repeating-linear-gradient(
	  -55deg,
	  #282a2c,
	  #555 2px,
	  #282a2c 3px,
	  #282a2c 6px
	);
	display: flex;
	align-items: center;
}

footer a .fa-twitter,
footer a .fa-youtube,
footer a .fa-instagram,
footer a .fa-tumblr-square {
	margin-left: .8rem;
	color: #E2E7EB;
	font-size: 1.3rem;
	transition: color .7s ease;
}

.fa-twitter:hover,
.fa-youtube:hover, 
.fa-instagram:hover, 
.fa-tumblr-square:hover,
a:focus .fa-twitter, 
a:focus .fa-youtube, 
a:focus .fa-instagram, 
a:focus .fa-tumblr-square {
	color: #4484BC;
	transition: color .2s ease;
}

a {
	outline: none;
}

footer :nth-child(5) {
	margin-left: auto;
}

footer :last-child {
	margin-right: 1rem;
	text-align: right;
	color: #E2E7EB;
	font-size: .8rem;
}

.navDarken {
	color: #30639A;
}

#nav-icon.navDarkenBurger span {
	background-color: #30639A;
}

#nav-icon.navDarkenBurger:hover span {
	background-color: #97A8BD;
}

/*---------------@Media Stuff--------------*/

@media only screen and (min-width: 750px) {
	.explorePathTxtContainer h3 {
	    max-width: 75%;
	    font-size: calc(20px + 5 * ((100vw - 320px) / 680));
	}

	.menuDropdown.hideMenuDropdown  {
		transform: translate3d(0, 2.5rem, 0);		
	}

	ul.menuDropdown {
		width: 10rem;	
		border: 0; 
	}

	.menuDropdown li {	
		align-items: flex-start;
		border-radius: 77% 23% 56% 44% / 61% 61% 39% 39%;		
		width: 100%;
		height: 2rem;
		padding-top: .5rem;		
		border: 1.5px solid #30639A;
		font-size: 1rem;
	}

	.navDarken {
	 	color: #E2E7EB;
	}
	
	#nav-icon.navDarkenBurger span {
		background-color: #E2E7EB;
	}
}