@import url('https://fonts.googleapis.com/css?family=Lora|Open+Sans+Condensed:300&display=swap');

* {
	margin: 0px;
	padding: 0px;
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	overflow-x:hidden;
	font-family: 'Open Sans Condensed', sans-serif;
	background-color: #000; 
}

.wrapper {
	width: 100%;
	height: 100%;
	background-image: url(img/sfondo.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	right: 0px;
	-webkit-transition: all 0.4s ease-in-out;
  	-moz-transition: all 0.4s ease-in-out;
 	 -ms-transition: all 0.4s ease-in-out;
 	 -o-transition: all 0.4s ease-in-out;
 	 transition: all 0.4s ease-in-out;
}

.wrapper.side-open {
	right: calc(100vw - 52px);
}


.wrapper div {
	position: absolute;
}

.wrapper .logo {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: rgba(255,255,255,.8);
	padding: 20px;
	max-width: calc(100vw - 110px);
}

.wrapper .logo img {
	width: 100%;
}
.wrapper .icon {
	right: 10px;
	top: 10px;
	background: #DF314D;
	border-radius: 3px;
	display: block;
	padding: 10px 12px;
	z-index: 10;
	cursor: pointer;
	cursor: hand;
}

.wrapper .area {
	right: 0px;
	top: 0px;
	width: 52px;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 0;
}

.wrapper .content {
	position: fixed;
	right: calc(-100vw);
	top: 0px;
	width: calc(100vw - 52px);
	height: 100%;
	background-color: #000;
	padding: 26px 52px;
	color: #fff;
	box-sizing: border-box;
	text-align: center;
		-webkit-transition: all 0.4s ease-in-out;
  	-moz-transition: all 0.4s ease-in-out;
 	 -ms-transition: all 0.4s ease-in-out;
 	 -o-transition: all 0.4s ease-in-out;
 	 transition: all 0.4s ease-in-out;
 	 overflow: auto;
}

.wrapper.side-open .content {
  right: 0px;
}

p {
	margin-bottom: 16px;
}

p b {
	font-family: 'Lora', serif;
	text-transform: uppercase;
	font-weight: 600;
	position: relative;
	box-sizing: border-box;
	padding-bottom: 8px;
}

p b:after {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	background-color: #fff;
	width: 90%;
	height: 1px;
}

@media screen and (min-width: 768px) {

.wrapper.side-open {
	right: 30vw;
}

.wrapper .content {
	position: absolute;
	right: -30vw;
	top: 0px;
	width: 30vw;
	height: 100%;
	background-color: #000;
	padding: 50px;
	color: #fff;
	box-sizing: border-box;
	text-align: center;
}

.wrapper.side-open .content {
  right: -30vw;
}

}