*{ margin:0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; letter-spacing: 0.3px; outline: none; transition: 1s all;}
*:hover,*:focus{ outline: none; }
body{ font: 16px/1.2 'Montserrat', sans-serif; overflow-x: hidden; font-weight: 400; margin: 0; padding:0; color: #6c757d; position: relative; height: 100vh; overflow: hidden;}
ul, li{ margin: 0; padding: 0; list-style-type: none; }
img{ max-width: 100%; }
a, a:hover, a:focus{ color: #333; transition: 300ms all; text-decoration: none; outline: none;}
.bg{position: absolute; bottom: 0; z-index: -1; width: 60%; left: 0; right: 0; margin: auto;}
.csMain{ width: 100%; height: 100vh; position: relative; }
.csMain:before{ content: ''; height: 100%; display: inline-block; vertical-align: middle; margin-left: -5px; }
.csInner{ display: inline-block; vertical-align: middle; width: 100%; text-align: center; }
.csBG .csInner img{ margin-bottom: 0px; }
.csInner img{ width: 500px; margin-bottom: 30px;}
.csBG .content{ opacity: 0; }
.csBG .content>*{ color: #f3ac12;}
p{ font-size: 24px; font-weight: 700; color: #fb0a3b; margin-bottom: 20px;}
h1{ color: #fb0a3b; font-size: 60px; letter-spacing: 1px; text-transform: uppercase; bottom: 0}
.csBG{ background: #f3ac12;}

@media only screen and (max-width: 1600px){
	.bg{ width: 70%; }
}

@media only screen and (max-width: 1400px){
	.bg{ width: 75%; }
	.csInner img { width: 400px;}
	h1{ font-size: 50px; font-weight: 800; }
}

@media only screen and (max-width: 1024px){
	.bg{ width: 90%; }
	.csInner img { width: 350px;}
	h1{ font-size: 40px; }
}

@media only screen and (max-width: 767px){
	body{ background: #fef7e8; }
	.bg{ display: none; }
	.csInner img { width: 300px; margin-bottom: 60px;}
	.content{ position: absolute; bottom: 50px; width: 100%; }
	p{ font-size: 21px;}
}

@media only screen and (max-width: 575px){
	.content{ bottom: 100px;}
	p{ margin-bottom: 15px; }
	h1 {font-size: 33px; }
}