@charset "utf-8";
/* CSS Document */

* {
	outline:none;
	padding:0;
	margin:0;
}

html{
	height:auto;
	min-height:100%;
	padding:0;
	margin:0;
}

body{
	height:100%;
	overflow-x:hidden;
    font-family:Arial, sans-serif;
	padding:0;
	margin:0;
}

body::before {
    content:"";
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100vh;
    background-image:url(../images/background.jpg);
    background-size:cover;
    background-position:center;
    z-index:-1;
}

/* ALL */
.clear{clear:both;}
.shadow{text-shadow:-1px -1px 1px rgba(0,0,0,0.7), 1px -1px 1px rgba(0,0,0,0.7), -1px 10px 10px rgba(0,0,0,0.7), 10px 10px 10px rgba(0,0,0,0.7);}
.footer{font-size:clamp(18px, 2vw, 36px); padding:0; margin:clamp(30px, 4vw, 60px) auto;}

/* HEADER */
.header{position:sticky; top:0; background-color:rgba(0,0,0,0.4); text-align:center; padding:0.5vw 1vw; z-index:99;}
.header .fa{color:#FFF; font-size:32px; margin:0 0 0 1vw;}

/* CONTENT */
.content{max-width:1480px; position:relative; font-family:"Rajdhani", sans-serif; font-size:clamp(24px, 2vw, 48px); color:#e1d1b4; font-weight:500; text-align:center; padding:0; margin:0 auto; z-index:1;}
.content p{display:block; font-size:clamp(18px, 2vw, 36px); text-align:justify; padding:0 clamp(20px, 3vw, 40px); margin:0 auto;}
.content h1,
.content h2{font-size:clamp(32px, 3vw, 56px); font-weight:600; margin:0 0 clamp(15px, 2vw, 30px) 0;}

/* --- TOP --- */
.content .top{width:auto; height:auto; max-height:50%; position:relative; padding:0; margin:0;}

/* === IMAGE === */
.content .top img{width:auto; max-width:100%; height:auto; max-height:100%; position:relative; padding:0; margin:0 auto; z-index:1;}

/* --- COLUMN --- */
.content .columns{display:-webkit-flex; display:flex; padding:0; margin:0 auto clamp(30px, 4vw, 60px) auto;}
.content .columns .box{flex:1; padding:20px; margin:0;}
.content .columns .box iframe{width:100%; height:100%; max-height:1666px; position:relative; border:none; padding:0; margin:0;}
.content .columns .box .container{width:100%; position:relative; overflow:hidden; padding-top:56.25%; margin:clamp(15px, 2vw, 30px) auto 0 auto; box-shadow:0px 0px 5px rgba(0, 0, 0, 1);}
.content .columns .box .container iframe{max-height:none; position:absolute; top:0; bottom:0; left:0; right:0;}

/* MOBILE */
@media only screen and (max-width:768px){
	.content .columns{display:block;}
	.content .columns .box{flex:none; margin:clamp(15px, 2vw, 30px) auto 0 auto;}
	.content .columns .box:first-of-type{margin:0;}
	.content .columns .box iframe{height:1250px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:640px){
	.content .columns .box iframe{height:1150px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:600px){
	.content .columns .box iframe{height:1100px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:550px){
	.content .columns .box iframe{height:1050px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:500px){
	.content .columns .box iframe{height:1000px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:450px){
	.content .columns .box iframe{height:950px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:400px){
	.content .columns .box iframe{height:900px;}
	.content .columns .box .container iframe{height:100%;}
}

@media only screen and (max-width:350px){
	.content .columns .box iframe{height:850px;}
	.content .columns .box .container iframe{height:100%;}
}