@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('normalize.css');
@import url('skeleton.css');

body { background: url("../images/spl_bg.png") repeat-y top center / 100% 100% #20251F; color: var(--main-text-color); font-family: var(--main-text-font); font-weight: 400; }
:root { 
	--main-text-font: 'Montserrat', sans-serif, Arial, Helvetica;
	--main-text-color: #5E6B5B;
	--primary-color: #ffffff;
}
a { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--main-text-color); font-family: var(--main-text-font); text-transform: capitalize; }
p, li { color: var(--primary-color); font: 400 16px var(--main-text-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }
.center { text-align: center; }

#wrapper {
    clear: both;
    height: 100%;
    padding: 0px;
    width: 100%;
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.container {
    position: relative;
}

.main { margin-top: 5%; text-align: center; }
.main h1 { font-size: 70px; font-weight: 500; margin: 15px 0px 10%; text-transform: uppercase; letter-spacing:5px; }
.main h2 { font-size: 42px; font-weight: 600; margin: 20px 0px 0px; opacity: 0.2; text-transform: uppercase; letter-spacing:1.5px; margin-top: 50px; }
.main h1 small { font-size: 22px; font-weight: 600; letter-spacing:1.5px; }
.intro { clear: both; width: 100%; }
.intro p { line-height: 22px; margin: 0px auto 25px; max-width: 620px; letter-spacing:1.5px; }

.button { border-radius : 30px; border-color: #BBC4BA; color: #BBC4BA; font-size: 14px; height: 50px; line-height: 50px; width: 188px; }
.button:hover { background-color: #BBC4BA; }
.copy { color: #5E6B5B; font-size: 13px; font-weight: 500; letter-spacing:0.5px; margin-top:10px; }


/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
	body { background-repeat: repeat-y;}
	p { font-size: 14px; }
	.main img { width: 180px; }
	.main h1 { font-size: 37px; }
	.main h1 small { font-size: 16px; }
	.main h2 { font-size: 28px; }
	.button { height: 40px; line-height: 40px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.main h1 { font-size: 60px; }
	.main h1 small { font-size: 20px; }
	.main h2 { font-size: 32px; }
}