@charset "UTF-8";
/* Pizzaria Transalpina™ - CSS for Mobile */

@media (max-width: 767px){
	
	.push-top {
		position: relative;
		display: block;
		width: 100vw;
		height: 60px;
		background-color: rgba(255,255,255,0);
	}
	
	.pizzamenu {
		position: absolute;
		display: block;
		width: 30px;
		height: 30px;
		top: 15px;
		right: 30px;
		cursor: pointer;
	}
	
	.pizzamenu svg {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.pizzamenu svg path {
		fill: rgba(225,177,114,1);
	}
	
	.back-page {
		position: absolute;
		display: block;
		width: 20px;
		height: 20px;
		top: 20px;
		left: 30px;
		cursor: pointer;
	}
	
	.back-page svg {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.back-page svg path {
		fill: rgba(225,177,114,1);
	}
	
	.header {
		position: fixed;
		display: block;
		width: 100vw;
		height: 60px;
		padding: 0;
		margin: 0;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,1);
		z-index: 9;
	}
	
	.header.active {
		position: fixed;
		display: block;
		width: 100vw;
		height: 60px;
		padding: 0;
		margin: 0;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,1);
		z-index: 9;
	}
	
	.header.scrolled {
		position: fixed;
		display: block;
		width: 100vw;
		height: 60px;
		padding: 0;
		margin: 0;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,1);
		z-index: 9;
	}
	
	.header .logo {
		position: absolute;
		display: block;
		width: auto;
		height: 40px;
		top: 10px;
		left: 50%;
		transform: translate(-50%, 0)
	}
	
	.header.active .logo {
		position: absolute;
		display: block;
		width: auto;
		height: 40px;
		top: 10px;
		left: 50%;
		transform: translate(-50%, 0)
	}
	
	.header.scrolled .logo {
		position: absolute;
		display: block;
		width: auto;
		height: 40px;
		top: 10px;
		left: 50%;
		transform: translate(-50%, 0)
	}
	
	.header .navigating {
		position: fixed;
		display: block;
		overflow: hidden;
		width: 0;
		height: calc(100vh - 60px);
		top: 60px;
		right: 0;
		transition: all .4s ease;
		background-color: rgb(255,255,255);
		z-index: 999;
	}
	
	.header.scrolled .navigating {
		position: fixed;
		display: block;
		overflow: hidden;
		width: 0;
		height: calc(100vh - 60px);
		top: 60px;
		right: 0;
		transition: all .4s ease;
		background-color: rgb(255,255,255);
		z-index: 999;
	}
	
	.header.active .navigating {
		position: fixed;
		display: block;
		overflow: hidden;
		width: 0;
		height: calc(100vh - 60px);
		top: 60px;
		right: 0;
		transition: all .4s ease;
		background-color: rgb(255,255,255);
		z-index: 999;
	}
	
	.header .navigating.opened {
		position: fixed;
		display: block;
		overflow: hidden;
		width: 100%;
		height: calc(100vh - 60px);
		top: 60px;
		right: 0;
		transition: all .4s ease;
		background-color: rgb(255,255,255);
		z-index: 999;
	}

	#cookie-law .cookie-info-box {
		width: 90vw;
	}

	#cookie-law .cookie-info-box a.cookie-info-button {
		font-size: 13px;
	}
	
	.header .navigating ul {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		line-height: normal;
		padding: 0;
		margin: 0;
		top: calc(50% - 30px);
		transform: translate(0, -50%);
	}

	.header .navigating ul li {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		padding: 15px 0;
		margin: 0 30px;
	}

	.header .navigating ul li:last-child {
		margin: 0 30px;
	}

	.header .navigating ul li a {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		font-size: 24px;
		font-weight: 500;
		text-transform: lowercase;
		text-decoration: none;
		text-align: center;
		outline: none;
		color: rgb(225,177,114);
		transition: all .2s ease;
	}

	.header .navigating ul li a:hover {
		color: rgb(50,152,203);
	}

	.header .navigating ul li a.active {
		color: rgb(50,152,203);
	}

	.header .navigating ul li ul {
		position: absolute;
		display: none;
		overflow: hidden;
		width: auto;
		height: auto;
		max-height: 0;
		padding: 0;
		margin: 60px 0 0 0;
		top: 0;
		left: -15px;
		background-color: rgb(255,255,255);
		transition: all .4s ease;
	}
	
	.menu .social{
		position: absolute;
		display: block;
		width: calc(100vw / 3 - 210px);
		height: 40px;
		bottom: 120px;
		left: 105px;
	}
	
	.footer {
		position: relative;
		display: block;
		overflow: hidden;
		width: 100vw;
		height: auto;
		background-color: rgb(50,152,203);
	}

	.footer .links {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
	}

	.footer .links ul{
		position: relative;
		display: block;
		width: auto;
		height: auto;
		padding: 30px 0;
		margin: 0;
	}

	.footer .links ul li{
		position: relative;
		display: block;
		width: auto;
		height: auto;
	}

	.footer .links ul li a{
		position: relative;
		display: inline-block;
		width: auto;
		height: auto;
		font-size: 26px;
		color: rgb(255,255,255);
		text-decoration: none;
		text-transform: uppercase;
	}

	.footer .copyright {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		bottom: auto;
		margin: 0 0 30px 0;
		left: 50%;
		font-size: 26px;
		color: rgb(255,255,255);
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transform: translate(-50%, 0);
	}

	.footer .social-links {
		position: relative;
		display: block;
		width: auto;
		height: 30px;
		bottom: auto;
		right: auto;
		margin: 0 0 30px 0;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
	}

	.footer .social-links a {
		position: relative;
		display: inline-block;
		width: 30px;
		height: 30px;
		margin: 0 15px;
	}

	.footer .social-links a svg{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}

	.footer .social-links a svg path{
		fill: rgb(255,255,255);
	}
}