html, body {
	box-sizing:border-box;
	height:100%;
}

body {
	overflow-y:hidden;
}

*, *:before, *:after {
	box-sizing:inherit;
	margin:0;
	padding:0;
	color:white;
	font-family:"ADAM.CG PRO";
}

@font-face{
	src:url("font/ADAM.CG PRO.otf");
}

::-moz-selection { 
    background: red;
    color: black;
}
::selection {
    background: red; 
    color: black;
}

header {
	background-color:black;
	position:fixed;
	top:0;
	left:0;
	right:0;
}

header nav > img {
	width:50px;
	position:absolute;
	top:30px;
	left:30px;
	cursor: pointer;
	transform:scale(1);
	transition-duration:0.35s;
}

header nav > img:hover {
	transform:scale(1.3);
}

header h1 {
	text-align:center;
	margin:0 auto;
}

header h1 img {
	width:85px;
	margin:10px auto;
}

.width-sidebar ul {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul {
	text-align: center;
	background-color:rgba(130, 0, 0, 0.5);
	position:fixed;
	top:101px;
	width:100%;
	padding:20px;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-transition:0.5s;
	transition: 0.5s;
}

li {
	list-style:none;
	display:inline-block;
	padding:0 0 10px 0;
	border-bottom: 2px solid black;
	position:relative;
	-webkit-transition-duration:0.5s;
	        transition-duration:0.5s;
}

li:first-child {
	margin:0 10px 0 0;
	left:-100%;
}

li:nth-child(2) {
	margin:0 10px;
	left:-50%;
} 

li:nth-child(3) {
	margin:0 10px;
	right:-55%;
}

li:last-child {
	margin:0 0 0 10px;
	right:-100%;
}

.width-sidebar li:first-child {
	margin:0 10px 0 0;
	left:0;
}

.width-sidebar li:nth-child(2) {
	margin:0 10px;
	left:0;
} 

.width-sidebar li:nth-child(3) {
	margin:0 10px;
	right:0;
}

.width-sidebar li:last-child {
	margin:0 0 0 10px;
	right:0;
}

li a {
	text-decoration:none;
	color:white;
	padding:0 0 10px 0;
}

li:hover a {
	color:black;
}

main {
	/* margin-top:100px; */
	/* height:calc(100% - 101px); */
	height:100%;
}

section {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height:100%;
}

section:first-of-type {
   background: url(images/berlin.jpeg) center center no-repeat fixed;
   background-size:cover;
}

section:nth-of-type(2) {
   background: url(images/ville.jpg) center center no-repeat fixed;
   background-size:cover;
}

section:nth-of-type(3) {
   background: url(images/eiffel.jpg) center center no-repeat fixed;
   background-size:cover;
}

section h1 {
	font-size:4vw;
	color:white;
	background-color:rgba(0,0,0,0.5);
	padding:5vw;
	margin:5vw;
}

h1 strong {
	font-size:5vw;
	color:red;
}

@media screen and (max-width:500px) {

	li {
		display:block;
		width:50%;
	}

	li:first-child {
	margin:0 auto;
	left:-135%;
	}

	li:nth-child(2) {
		margin:0 auto;
		left:-110%;
	} 

	li:nth-child(3) {
		margin:0 auto;
		right:-110%;
	}

	li:last-child {
		margin:0 auto;
		right:-135%;
	}

	.width-sidebar li:first-child {
		margin:0 auto 10px auto;
	}

	.width-sidebar li:nth-child(2) {
		margin:0 auto 10px auto;
	} 

	.width-sidebar li:nth-child(3) {
		margin:0 auto 10px auto;
	}

	.width-sidebar li:last-child {
		margin:0 auto 10px auto;
	}

	section h1 {
	font-size:6vw;
	color:white;
	background-color:rgba(0,0,0,0.5);
	padding:5vw;
	margin:5vw;
}

h1 strong {
	font-size:7vw;
	color:red;
}

}