/* General Settings */

html,
body {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	min-width: 320px;
	background-color: #111;
	scroll-behavior: smooth;
}

.container img {
	width: 100%;
	height: auto;
}

/* Typography */

h1, h2, h3, h4, h5, h6{font-family: 'Noto Serif', serif;}
.post h3, .post h4, .post h5, .post h6 {margin: 18px 0 30px 0; font-weight: 300;}

p {font-family: 'Montserrat', sans-serif;}
a, a:visited {color: #4E8DA6;}
a:hover {color: #4E8DA6; text-decoration: underline;}
a: active {color: #4E8DA6;}

ul, li {list-style: none;}
.post ul {}
.post li {list-style: circle; font-family: 'Montserrat', sans-serif; padding: 10px 0 6px 0; margin-left: 15px;}

.seemee {border: 1px dotted red;}

/* Main Structure */

#main-wrap {
	background-color: #FFF;
	color: #444;
	min-height: 100%;
	position: relative;
	overflow-x: hidden; /*disable horizontal scroll */
	padding-bottom: 200px; /*footer height */
}

#header {
	z-index: 9;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #111;
	color: #fff;
}

#after-header {
}

#footer {
	position: absolute;
	background-color: #111;
	bottom: 0;
	left: 0;
	color: #ccc;
	width: 100%;
	height: 200px;
}

#anchor-1 {}

/* Front Page */

.scrolldown {
	position: absolute;
	top: 90vh;
	font-size: 5em;
	color: #8C162C;
}

.welcome,
.front-section-2,
.front-section-3 {
	min-height: 100vh;
}

.welcome,
.front-section-3, 
.single-banner {
	background-color: #232323;
	color: #CCC;
	margin: 0 -15px;
}

.welcome {	
	
}

.welcome-post {
	position: absolute;
	top: 25vh;
	margin-left: 30px;
	max-width: 50%;
}

.welcome-post h1 {
	font-size: 5vh;
}

.welcome-post p {
	font-size: 2vh;
	line-height: 1.8em;
}

.front-section-2 {
	}

.front-section-3 {
	
}

.front-section-title {
	padding: 60px 0 20px 0;
	text-align: center;
}

.front-section-content {
	text-align: center;
}

.guide-feed {
	padding-top: 6px;
}

.guide-feed img {
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Header and Nav */

.navbar h1 {
	font-size: 1.3em;
	margin-bottom: 0;
}

.navbar a {color: #ccc;}
.navbar a:hover {color: #fff;}

.navbar li {
	padding-left: 10px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.dropdown-menu {background-color: #111;}

.navbar-collapse {}

/* Posts */

.post-header {
	margin-top: 50px;
}

.post-header h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.7em;
	font-weight: 500;
	color: #8C162C;
}

.post {}

.post p {margin-bottom: 20px;}

.blog-header {
	padding-bottom: 20px;
}

.blog-content{}

.blog-feed-content {
	padding: 20px;
}

/* Images */

/* Images (js Orientation Detector*/

.imgorientation {}
.portrait {}
.landscape {}

/* Grids */


/* Utilities */

.big-button {
	margin: 20px 0;
	padding: 6px 30px 10px 30px;
	border: 1px #4E8DA6 solid;
	background-color: inherit;
	color: #4E8DA6;
	font-size: 1.5em;
}

.big-button:hover {
	border: 1px #CCC solid;
	color: #CCC;
}


.fullVH {height: 100vh;}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.red-left {
	border-left: 4px #8C162C solid;
	padding-left: 16px;
}

.red-top {
	border-top: 4px #8C162C solid;
}

.hovered {
	opacity: .85; 
	transition: opacity .15s ease-in-out;
   -moz-transition: opacity .15s ease-in-out;
   -webkit-transition: opacity .15s ease-in-out;
}

.hovered:hover {opacity: 1;}

.icon {
	filter: invert();
	opacity: .5;
	width: 50px !important;
	padding: 10px 10px;
	height: auto;
}

/* Responsive */
.mobileonly {display: none;}
.desktoponly {display: block;}



@media (max-width: 1200px) { 
}

@media (max-width: 992px) {
.mobileonly {display: block;}
.desktoponly {display: none;}

.welcome-post {top: 7vh; margin-left: 12px; max-width: 80%;}
.welcome-post h1 {font-size: 4vh;}
.welcome-post p {font-size: 1.7vh;}

@media (max-width: 768px) {

.big-button {font-size: 1.2em; padding: 4px 20px 4px 20px;}
.front-section-title h1 {font-size: 1.8em; padding-bottom: 10px;}
.welcome-post h3 {font-size: 1.8em;}
.blog-feed-content {padding: 8px;}
.blog-feed-content p {font-size: .9em;}
}

@media (max-width: 576px) { }

@media (max-width: 460px) { } /* Not Bootstrap Default */