@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&display=swap');
html,body{
	font-family: 'Dosis', sans-serif;
	margin:0 auto;
	padding:0;
	position:relative;
	text-transform:uppercase;
}
html{height:100%}
body{min-height:100%}
/*-----------HEADER*/
header{
	background-attachment:fixed;
	background-image:url('bg.jpg');
	background-position:center -150px;
	background-repeat:no-repeat;
	background-size:cover;
	color:white;
	font-size:25px;
	height:500px;
	position:relative;
}
nav{
	height:50px;
	position:sticky;
	top:0;
	text-transform:initial;
	transition:all .5s;
	z-index:10;
}
nav span{
	position:absolute;
}
nav ul{
	list-style-type:none;
	margin:0;
	padding:0;
	position:absolute;
	right:10px;
}
nav ul li{
	display:inline-block;
}
#header{
	background-color:rgba(0,0,0,0.5);
	content:'';
	height:100%;
	padding:0;
	position:absolute;
	width:100%;
}
header *{
	padding:10px;
}
#logo{
	display:block;
	font-size:70px;
	font-weight:600;
	margin:40px auto 0 auto;
	position:relative;
	text-align:center;
	width:800px;
}
#logo:after{
    bottom:0;
    border-bottom:10px solid red;
    content:'';
    height:5px;
	left:0;
    position:absolute;
    width:100%;
}
header p{
	background-color:#e2e2e2;
	border-radius:12px;
	box-shadow:0 0.125rem 0.5rem rgba(0,0,0,.3),0 0.0625rem 0.125rem rgba(0,0,0,.2);
	color:black;
	font-size:30px;
	margin:60px auto;
	max-width:800px;
	position: relative;
	text-transform:initial;
}
header p::before {
	border:1rem solid transparent;
	border-top-color:#e2e2e2;
	top:100%;
	content:'';
	left:calc(50% - 24px);
	position:absolute;
}
/*-----------MAIN*/
main{
	margin:0 auto;
	text-align:center;
	width:90%;
}
img{
	height:300px;
}
footer{
	background-color:#444;
	bottom:0;
	color:#2caeff;
	font-size:25px;
	padding:25px 0;
	position:absolute;
	text-align:center;
	width:100%;
}
.footer_fix{padding-bottom:100px}
/*-----------OTHERS*/
.tile{
	color:white;
	display:inline-block;
	height:300px;
	margin:20px;
	position:relative;
}
.tile:after{
	content:attr(title);
	background-color:rgba(000,000,000,0.5);
	bottom:0;
	font-size:35px;
	left:0;
	padding:10px 0;
	position:absolute;
	width:100%
}
a{color:inherit}
@media only screen and (max-width:810px){
	nav{display:none}
	#logo{
		font-size:40px;
		width:500px;
	}
}
@media only screen and (max-width:600px){
	#logo{
		font-size:30px;
		width:350px;
	}
	img,.tile{
		height:230px;
	}
	.tile:after{
		font-size:25px;
	}
}