* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
*:focus {outline:0 !important;}

:root {
  --color1: #86492C;
  --color2: #86492C;
  --color3: #86492C;
}

html, body {text-rendering:optimizeLegibility; font-family: "the-seasons", sans-serif;}
html {height: 100%; font-size: 56.25%;}
body {height:100%; background-size: cover; background-repeat: no-repeat; background-position:left center; padding:5% 0; color:#fff; display:flex; flex-direction:column; justify-content: center;}
body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('bg.jpg');
}
.color1 {color:var(--color1);}
.color2 {color:var(--color2);}
.white {color: #fff;}

.bg1 {background-color:var(--color1)!important;}
.bg2 {background-color:var(--color2)!important;border-color:var(--color2)!important;}

.font1 {font-family: "all-round-gothic", sans-serif;}

.logo {
	width:60rem;
	max-width: 95%;
	filter: grayscale(1) brightness(500%);
}

.title {
    font-size: 6rem;
	font-weight: 500;
    letter-spacing: .25rem;
	line-height: 1.3;
}
.subtitle {
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: .1rem;
}
.text {font-size:1.8rem;}
.cst-btn {
	border: 1px solid #fff;
	color:#fff!important;
	background-color:transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding:0 4rem;
	transition: all .3s;
	margin: 1rem 2rem 1rem 0;
	font-size: 2rem;
	letter-spacing: .1rem;
	border-radius: 0;
	height:63px;
	font-weight:400;
}
.cst-btn.disc-btn i {font-size:3rem;}
.cst-btn:hover {
	border: 1px solid var(--color3)!important;
	background-color:var(--color3)!important;
}
.cst-btn.bg2:hover {
	border: 1px solid var(--color1)!important;
	background-color:var(--color1)!important;
}
.cst-btn i {font-size: 2.5rem;}

#footer {
	position: absolute;
	bottom:2rem;
	left:4rem;
	right:4rem;
	text-align: center;
	color:#fff;
}
#footer a {color:#fff;}
@media (max-width:1199px) {
	.logo {width:45rem;}
	.title {font-size: 6rem;}
	.subtitle {font-size: 3.5rem;}
	.text {font-size:2.5rem;}
}
@media (max-width:991px) {
	.logo {width:40rem;}
	.cst-container {padding:3rem;}
	.title {font-size: 5rem;}
	.subtitle {font-size: 2.8rem;}
	.text {font-size:2rem;}
	.cst-btn {font-size:2.1rem; height:55px;}
}
@media (max-width:767px) {
	.logo {width:35rem;}
	.title {font-size: 4rem;}
	.subtitle {font-size: 2.3rem;}	
	.cst-btn {font-size:1.7rem; margin: 1rem 0 1rem 2rem;}
	.cst-container {justify-content: start;}	
}
@media (max-height:600px) {	
	body {padding:2rem 0; justify-content: start;}
	.subtitle {font-size:2.2rem}
	.cst-btn {
		padding:0 4rem;
		margin: 1rem 2rem 1rem 0;
		font-size: 1.8rem;
		height:45px;
	}
}
@media (max-width:575px) {	
	body{
		background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('bg-mob.jpg');
		justify-content: start;
		padding-top:4rem;
	}
	.logo {width:30rem;}
	.title {font-size: 4rem; line-height: 1;}	
	.subtitle {font-size: 2.4rem;}
	.text {font-size:2rem; font-weight:400}
	.cst-btn {padding:0 1rem; width:100%; margin:1rem 0;}
	.cst-btn i {font-size: 1.7rem;}
	#footer {
		left:3rem;
		right:3rem;
	}
}
@media (max-height: 800px) and (min-width: 600px) {
	body {justify-content: start;}
	.logo {width:45rem;}
	.title {font-size:5rem; line-height: 1;}	
	.subtitle {font-size: 3rem;}
	.cst-btn {width:auto; margin:1rem; height: 40px;}
}
@media (max-height:600px) {	
	.logo {width:40rem;}
	.title {font-size: 4.5rem; line-height: 1;}	
	.subtitle {font-size: 2.2rem;}
	.text {font-size:2rem; font-weight:400}
	.cst-btn {padding:0 3rem; margin:1rem; height:45px;}
	.cst-btn i {font-size: 1.7rem;}
}