* {box-sizing:border-box;}

:root {font-family: 'Arial', sans-serif; font-size:16px;}
:link {text-decoration:none; color:blue;}
:visited {text-decoration:none; color:blue;}
h1 {font-size:3rem; text-align:center; color:darkBlue;}
h2 {margin:40px 0px 20px 0px; color:darkBlue;}

#bkg {background:url('../img/background.jpg');}
#page {max-width:1000px; min-height:1000px; border:1px solid transparent; margin:0px auto;}
#title {width:100%;}
#subtitle {text-transform:uppercase; color:white; text-align:center; font-size:16pt;}	
#content-menu {background:white; max-width:1000px; min-height:1500px; border:1px solid transparent; border-radius:10px; margin:20px auto; zanimation:1s linear 3s 1 forwards apparition;}
#content {border:0px solid transparent;}

#mobile-menu {display:none; border:1px solid; box-shadow:5px 5px 2px darkgray; width:max-content; padding:5px; position:absolute; background:white; z-index:1;}
#mobile {display:none; padding:10px 10px; }
#mobile-btn {display:inline-block; vertical-align:middle;}
#mobile-btn img {width:2rem; border:1px solid;}
.mobile-idx  {text-transform:uppercase; display:inline-block; padding:10px; vertical-align:middle;}
.mobile-idx:hover {background:darkBlue; color:white;}
.mobile-item {margin:5px; text-transform:uppercase; padding:5px 10px; border-radius:5px;;}
.mobile-item :link {color:inherit;}
.mobile-item :visited {color:inherit;}
.mobile-item:hover {background:darkblue; color:white;}

#menu {padding:10px 15px; font-size:1rem; height:40px; overflow-y:hidden;}
.menu-item {text-transform:uppercase; display:inline-block; padding:5px 10px; border-radius:5px;}
.menu-item :link {color:inherit;}
.menu-item :visited {color:inherit;}
.menu-item:hover {background:darkblue; color:white;}

.error {color:red; border:3px double red; padding:10px; text-align:center;}

#text {padding:10px;}

.slider {display:grid; grid-template-columns:50px 1fr 50px; margin:50px auto;}
.slider-button {text-align:center;}
.slider-button input {height:100%;}
.slider-images {overflow-x:hidden; white-space:nowrap;}
.slider-image {display:inline-block; text-align:center; position:relative;}
.slider-image img {width:100%;}

.back {text-align:right; margin:50px 0px 20px 0px;}
.back-text {display:inline-block; }
.back-logo {display:inline-block; }
.back-logo img {height:2rem; vertical-align:baseline; margin:0px 10px;}

@media(width <= 600px) {
	#menu {display:none;}
	#mobile {display:block;}
	#content {width:90vw;}
}