/**
	Navik - HTML header navigation menu
 	Copyright (c) 2020, Pophonic 
	
	Author: Pophonic
	Profile: https://codecanyon.net/user/pophonic
	
**/


.hero-banner {
background-image: url('../images/banner.jpg');
  height: 100%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-banner:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(20,47,77,0.5);
}

.hero-banner-inside {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
z-index: 1;
    font-family: "Gotham", sans-serif;
}

.banner-title {
	font-size: 2em;
	text-align: center;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}

.banner-subtitle {
	font-size: 0.9em;
	font-weight: 300;
	text-align: center;
}

.button {
    text-align: center;
	padding: 20px 0 0 0;
}

.button a {
  display: inline-block;
  color: #FFF;
  text-decoration: none;
  font-size: 1.2em;
	font-weight: 600;
	text-transform: uppercase;
	padding: 12px 20px;
}

.button a:hover {
  color: #da4251;
  text-decoration: none;
}

ul#buttons-horizontal  { 
margin: 20px 0 10px 0;
padding: 0;
list-style: none;
} 

ul#buttons-horizontal li{
display: inline-block;
font-weight:600;
font-family:'Open Sans', sans-serif;
font-size:0.9em;
color: #FFF;
padding:10px;
 border:3px solid #FFF;
 margin:0 5px 25px 0;
 box-shadow:none;
text-transform: uppercase;
}

ul#buttons-horizontal li a{
color: #FFF;
}

ul#buttons-horizontal li:hover {
color: #FFF;
background-color: #da4251;
 border:3px solid #da4251;
}

/* =============================================
================================================
Media queries for responsive design
================================================
================================================ */
@media (min-width: 480px) {
}

@media (min-width: 768px) {
	.hero-banner {
		min-height: 700px;
	}
	.hero-banner-inside {
  text-align: left;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
z-index: 1;
}
	.navik-side-content .hero-banner {
		min-height: 680px;
	}
.banner-title {
	font-size: 3.0em;
	text-align: center;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}

.banner-subtitle {
	font-size: 0.9em;
	text-align: center;
	font-weight: 300;
	padding:10px;
}

ul#buttons-horizontal  { 
margin: 20px 0 50px 0;
padding: 0;
list-style: none;
} 

ul#buttons-horizontal li{
display: inline-block;
font-weight:600;
font-family:'Open Sans', sans-serif;
font-size:0.9em;
color: #FFF;
padding:10px 15px 10px 15px;
 border:3px solid #FFF;
 margin:0 15px 25px 0;
 box-shadow:none;
text-transform: uppercase;
}

ul#buttons-horizontal li a{
color: #FFF;
}

ul#buttons-horizontal li:hover {
color: #FFF;
background-color: #da4251;
 border:3px solid #da4251;
}
}

@media (min-width: 1200px) {
	
	.hero-banner-inside {
  text-align: left;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
z-index: 1;
}

.banner-title {
	font-size: 3.4em;
	text-align: center;
	font-weight: 800;
	line-height: 1.2em;
	margin-bottom: 30px;
	letter-spacing: 5px;
}

.banner-subtitle {
	font-size: 1.0em;
	text-align: center;
	font-weight: 300;
}


ul#buttons-horizontal  { 
margin: 20px 0 50px 0;
padding: 0;
list-style: none;
} 

ul#buttons-horizontal li{
display: inline-block;
font-weight:600;
font-family:'Open Sans', sans-serif;
font-size:0.9em;
color: #FFF;
padding:10px 15px 10px 15px;
 border:3px solid #FFF;
 margin:0 15px 25px 0;
 box-shadow:none;
text-transform: uppercase;
}

ul#buttons-horizontal li a{
color: #FFF;
}

ul#buttons-horizontal li:hover {
color: #FFF;
background-color: #da4251;
 border:3px solid #da4251;
}


.button {
    text-align: center;
	padding: 140px 0 0 0;
}	
	.banner-offset-top .banner-subtitle {
		margin-top: 70px;
	}
	.landing-page .navik-menu > ul > li:hover > a {
		color: rgba(255,255,255,0.8) !important;
	}
	.landing-page .sticky .navik-menu > ul > li:hover > a {
		color: rgba(33,33,33,0.8) !important;
	}
	.hero-banner-main {
		padding: 50px 0 40px;
	}
	.hero-banner-main .hero-banner-inside {
		display: table;
		width: 100%;
		text-align: left;
	}
	.hero-banner-main .button {
		text-align: center;
	}
	.hero-main-img {
		display: table-cell;
		left: 0;
		margin-bottom: 0;
		width: 60%;
	}
	.hero-main-info {
		display: table-cell;
		vertical-align: bottom;
		width: 40%;
		padding: 0 7.5% 100px 90px;
	}
	.hero-banner-main .banner-title {
		line-height: 1.1em;
		margin-bottom: 45px;
	}
	.hero-banner-main .banner-subtitle {
		margin-bottom: -2px;
	}
	.hero-main-img-inner {
		margin-top: -20px;
		margin-left: -50%;
	}
	
}

@media (min-width: 1400px) {
	.hero-main-img-inner {
		margin-top: 0px;
		margin-left: -30%;
	}
	#menu-level-with-logo {padding-top:10px;padding-right:15px;}
	.banner-title {
	font-size: 4.0em;
	text-align: center;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 30px;
}

.banner-subtitle {
	font-size: 1.2em;
	font-weight: 300;
	text-align: center;
}
ul#buttons-horizontal  { 
margin: 20px 0 50px 0;
padding: 0;
list-style: none;
} 

ul#buttons-horizontal li{
display: inline-block;
font-weight:600;
font-family:'Open Sans', sans-serif;
font-size:0.9em;
color: #FFF;
padding:10px 15px 10px 15px;
 border:3px solid #FFF;
 margin:0 15px 25px 0;
 box-shadow:none;
text-transform: uppercase;
}

ul#buttons-horizontal li a{
color: #FFF;
}

ul#buttons-horizontal li:hover {
color: #FFF;
background-color: #da4251;
 border:3px solid #da4251;
}
}

@media (min-width: 1600px) {
	.hero-main-img-inner {
		margin-left: -20%;
	}
	#menu-level-with-logo {padding-top:10px;padding-right:15px;}
}

@media (min-width: 1800px) {
	.hero-main-img-inner {
		margin-left: -10%;
	}
	#menu-level-with-logo {padding-top:10px;padding-right:15px;}
}