.clr-white {color: white}
.clr-black {color: black}

.bg-white {background-color: white}
.bg-black {background-color: black}

.text-decoration-none {text-decoration: none;}
.list-style-none {list-style-type: none;}

.margin-start {margin-block-start:0rem;}
.margin-end {margin-block-end:0rem;}

.padding-start {padding-inline-start:0;}


.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1024px) {
	.container {
	    padding-left: 30px;
	    padding-right: 30px;
	}
}


.game-img {
	max-width: 100%;
	display: flex;
	margin: auto;
	border-radius: 14px;
}

.game {
	background-color: hsl(252deg 44.4% 23.98%);
}
.game iframe {
	height: 500px;
	width: 90%;
	margin: auto;
	display: flex;
}

.footer,.header,.main {
	background-color: #1B3C53;
}
.logo {width: 90px;}
.header-logo {width: 70px;}


.desktop {display: flex;}
.phone {display: none !important;}

.phone-nav {
	position: absolute;
    
    left: 0;
    top: 80%;
    width: -webkit-fill-available;
    padding-top: 3%;
    padding-bottom: 3%;
    left: -100%;
    transition: left .5s ease-in-out;
    z-index:999;
    display: none;
}


.contact {
	background-image: url(../images/contact.webp);
	background-size: cover;
	background-position: top;
	position: relative;
	height: 80vh;
}

.contact-content {
	padding: 20px;
    background: #000000b5;
    position: absolute;
    height: -webkit-fill-available;
    top: 0;
    right: 9%;
    bottom: 0;
    overflow: hidden;
    margin: auto;
    width: 32%;
} 

.form {
	width: -webkit-fill-available;
}

.input-fields {
	padding:12px;
	border-radius: 5px;
	border:none;
	font-family: "Roboto Condensed", sans-serif;
	outline: none;
	box-sizing: border-box;
}

.font-play { font-family: "Playfair", serif;}

button,h2 {
	 font-family: "Playfair", serif !important;
}

.btn {
	    padding: 12px 35px;
    border-radius: 20px;
    border: none;
    transition: 0.3s linear;
    background-color: #456882;
    color: white;
    text-shadow: 0 4px 4px #00000040;
    font-size: 26px;
}
.btn:hover {
	transition: 0.3s linear;
	opacity: 0.7;
}


.about {
	background-image: url(../images/about.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
	height: 80vh;
}

.about-content {
	padding: 20px;
    background: #000000b5;
    position: absolute;
    height: -webkit-fill-available;
    top: 0;
    right: 9%;
    bottom: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden;
    margin: auto;
    width: 32%;
} 

.hero {
	background-image: url(../images/hero.webp);
	background-size: cover;
	background-position: top;
	position: relative;
	height: 80vh;
}

.hero-content {
	padding: 20px;
    background: #000000b5;
    position: absolute;
    height: -webkit-fill-available;
    top: 0;
    right: 9%;
    bottom: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden;
    margin: auto;
    width: 32%;
} 

.sub {
	background-image: url(../images/sub.jpg);
	background-size: cover;
	background-position: top;
	position: relative;
	height: 80vh;
	background-attachment: fixed;
}

.sub-content {
	padding: 20px;
    background: #000000b5;
    position: absolute;
    height: -webkit-fill-available;
    top: 0;
    right: 9%;
    bottom: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden;
    margin: auto;
    width: 32%;
}


@media only screen and (max-width: 750px) {
	.contact-content,.about-content {
		width: -webkit-fill-available !important;
		right: 0;
		background-color: #000000d4;
	}
	.hero-content,.sub-content {
		width:-webkit-fill-available !important;
		right: 0;
	}
}




@media only screen and (max-width: 900px) {
	.flex-column-md {flex-direction: column !important;}
	.w-100-md {width: 100% !important;}
	.desktop {display: none !important;}
	.phone {
		display: flex !important;
		color: white;
		cursor: pointer;
	}
	.phone-nav.show {
		left: 0% !important;
		background: hsl(242deg 27.1% 21.73%);
		transition: left .5s ease-in-out;
		z-index:999;
		display: flex;
	}
}