* {box-sizing:border-box; margin:0; padding:0;}

body {font:25px calibri; color:white;}
a {text-decoration:none; font-weight:bold; color:white;}

header {width:100%; height:553px; position:relative; top:0; left:0;}
video {height:553px; width:100%; position:scroll; object-fit:cover;}
h1 {margin: 10px;}
nav {width:100%; background:crimson; opacity:0.9; padding:0 10px 10px; position:fixed; top:0; left:0; text-align:center; z-index:5;}

#nav {font:25px calibri; border:5px solid white; display:flex; overflow:hidden;justify-content: space-between;}

.login input[type=text], .login input[type=password] {padding:2px 5px; font-size:14px; border:none; outline:none; width:100px; font-weight:bold; height:26px; margin-bottom:6px; color:crimson;}
.login button {padding:2px 5px; font-size:14px; border:none; outline:none; font-weight:bold; height:26px; margin-bottom:6px; margin-right:6px; background:white; color:crimson;}
.login button:hover {background:turquoise; color:white;cursor:pointer;}
.mn {cursor:pointer; rotate:90deg; font-weight:bold; font-size:32px; margin-left:1px; z-index:5;}
.mn:hover {background:white; color:crimson;}


#menu {height:100%; width:0; position:fixed; top:0; left:0; background:crimson; overflow-x:hidden; transition:0.5s; padding-top:65px; box-shadow:0 0 10px black; z-index:9;}
#menu a {padding:10px; display:block; transition:0.3s; text-align:left;}
#menu a:hover {color:crimson; background:linear-gradient(to right,white,white,crimson);}
#menu .x {position:absolute; padding:17px; top:0; left:0; width:100%; text-align:center;}

.sos {position:absolute; left:0; bottom:0; width:100%; display:flex; justify-content:space-between; text-align:center; align-items:flex-end;}
.sos img {width:30px; height:30px; margin:5px;}
.lg {width:25%; opacity:0.5; overflow:hidden; height:40px; cursor:pointer; background:white; -webkit-transition:height 0.3s ease-in-out; transition:height 0.3s ease-in-out; line-height:50%;}
.lg b {visibility:hidden; font-size:20px;}
.lg:hover, .lg b {opacity:0.7; height:80px; visibility:visible;}
.lg1:hover {background:#5F9EA0;} 
.lg2:hover {background:#6A5ACD;}
.lg3:hover {background:red;}
.lg4:hover {background:#32CD32;}

.h2 {color:grey; position:sticky; top:125px; padding:10px; border-left:10px solid crimson; background:white; z-index:3;}
.k {text-align:center; border:none; background:#F5F5F5; border-bottom:5px solid grey;}

.rt2 {flex-wrap:wrap; display:flex; height:auto; margin:10px; border:5px solid #F5F5F5;}
.tab {background:#F5F5F5; width:25%; height:auto;}
.tab button {color:grey; padding:10px; width:100%; border:none; text-align:left; font-weight:bold;cursor:pointer; transition:0.3s; font-size:20px;}
.tab button:hover {background:linear-gradient(to right,grey,#F5F5F5); color:white;}
.tab button.active {background:linear-gradient(to right,grey,#F5F5F5); color:white;}
.kab {width:75%; height:400px; position:relative; left:0; top:0; z-index:1;}
.kab img {height:300px; width:100%; position:scroll;}
.in {padding:5px; color:grey; width:100%; position:absolute; right:0; bottom:0; height:100px; text-align:center; border-top:5px solid #F5F5F5; font-size:20px; display:flex; justify-content:space-around; align-items:center;}

.rt {color:grey; padding:10px; font-size:20px;}
summary {width:100%; padding:10px; cursor:pointer; border-bottom:5px solid #F5F5F5; font-weight:bold;}
summary:hover {background:#F5F5F5;}
.rt ul {padding:5px 30px 20px 50px; border:5px solid #F5F5F5; border-top:none;}

.pt {padding:10px; overflow:auto; white-space:nowrap; margin:10px;}
.pt img {width:450px; height:150px; padding:10px; display:inline;}
.pt img:hover {background:#F5F5F5; border-radius:10px;}

.map {height:500px; border:0; padding:10px; width:100%;}

.hp {padding:10px; color:grey; font-size:20px;}
.box {box-shadow: 0 0 5px grey; height:auto; width:100%; padding:10px; border-radius:10px;margin-bottom:20px; transition:0.5s;}
.box:hover {background:crimson; color:white; cursor:pointer;}
.box img {width:30%; height:auto; padding:10px; background:crimson; border-radius:100%; margin-top:5px;}
.box b {width:100%;}
.box p {width:100%;}

main {float:none; width:100%; background:white;}
aside {float:none; width:100%; background:#F5F5F5;}

footer {background:crimson; text-align:center; padding:10px; opacity:0.9; width:100%; clear:both; position:sticky; bottom:0; font-size:20px; z-index:4; display:flex; justify-content:space-between; align-items:center;}
.imgf {height:0; width:0;}

@media (min-width:721px) {
	body{font-size:35px;} footer {font-size:25px;} .rt {font-size:25px;}
	main {float:left; width:70%; height:100%;}
	aside {position:sticky; top:0; width:30%; height:100%; float:right; padding-bottom:70px;}
	.h2 {top:140px;}
	form input[type=text], form input[type=password] {font-size:25px;}
	#menu, #login {padding-top:85px;}
	#menu .x, #login a {padding:21px;}
	.imgf {height:60px; width:120px;}
}

@media (min-width:921px) {
	body {margin:0 10%; box-shadow:0 0 10px black; background:url("../bg/bg.jpg");}
	nav {margin:0 10%; width:80%;}
	#menu {left:10%;} #login {right:10%;}
	footer {opacity:1;}
}