/* BARRIOTHEME > RESPONSIVE CSS  */

@media (max-width: 567px) {
	
	.overlayMenu {
		display: block;
	}

	.wrapper {
		width: calc(100% - 20px);
		max-width: calc(100% - 20px);
		margin: auto;
	}
	
	.hamburger {
		right: 20px;
	}
	
	.lang_selector {
		right: 55px;
		top: 25px;
	}
	
	.squarePrenota, 
	.squarePrenota:visited, 
	.squarePrenota:focus, 
	.squarePrenota:hover {
		position: fixed;
		top: auto;
		bottom: 0px;
		right: 0px;
		width: 100%;
		height: 60px;
	}
	
	.openMenu .squarePrenota,
	.openMenu .squarePrenota:visited,
	.openMenu .squarePrenota:focus,
	.openMenu .squarePrenota:hover {
		right: 0;
		bottom: -60px;
	}
	
	
	.button,
	.button:visited,
	.button:focus,
	.button:hover {
		margin-top: 20px;
	}
	
	.squarePrenota p {
		transform: translateY(0);
		margin: auto;
		line-height: 60px;
	}

	.squarePrenota p::before {
		display: inline;
		font-size: 15px;
		margin-right: 10px;
	}
	
	.logo, 
	.logo:visited, 
	.logo:focus, 
	.logo:hover {
		width: 100px;
		height: 69px;
		margin: 35px 0px 0px !important;
	}

	header {
		margin-top: 70px;
	}
	
	header .reservation {
		display: none;
	}
	
	header h1 {
    	font-size: 20px;
	}
	
	.home .fullscreen {
		height: 80vh;
		min-height: 80vh;
		margin-top: 0px;
	}
	
	.fadeItem {
		height: 80vh;
		min-height: 80vh;
	}
	
	.titleHeader {
		width: 90%;
		left: 5%;
		margin-left: 0px;
	}
	
	.fullscreen::after {
		height: 100px;
		bottom: -50px;
	}
	
	.slideContainer .slider img,
	.introPagina.smallBox img {
		height: 40vh;
	}
	
	.slideContainer .pagingSlide {
		top: auto;
		left: auto;
		right: 0px;
		bottom: -40px;
		transform: rotate(0);
	}
	
	.slideHeader .slick-dots {
		top: auto;
		bottom: 25px;
		left: 20px;
	}
	
	.slideHeader .caption {
		width: calc(100% - 150px);
		text-align: right;
		right: 20px;
		left: auto;
		bottom: -76px;
		height: 50px;
		line-height: 1.3em !important;
	}
	
	.slideContainer .slick-dots {
		top: auto;
		bottom: -30px;
		left: auto;
		right: 50px;
	}
	
	.slideHeader .slick-dots li,
	.slideContainer .slick-dots li{
		display: inline-block;
		float: left;
		margin-right: 5px;
		margin-bottom: 0px;
	}

	.slideHeader {
		margin-top: 50px;
		width: calc(100% + 50px);
		margin-left: -25px;
	}
	
	.slideHeader .pagingSlide {
		width: 50px;
		left: 40px;
	}
	
	.slideHeader img {
		display: block;
		min-height: 50vh;
	}

	
	.slideHeader::before {
		display: none;
	}
	
	.payoffHome {
		padding-top: 100px;
	}
	
	.payoffHome p {
    	font-size: 18px;
	}
	
	.prenota,
	.testoPagina,
	.introPagina {
		padding-top: 50px;
	}
	
	.testoPagina {
		text-align: left;
	}
	
	.introPagina .descPagina {
		padding: 50px 0px;
	}
	
	.introPagina .dettaglioPagina {
		padding: 30px;
	}
	
	.introPagina .icone {
		margin-top: 30px;
	}
	
	.introPagina .iconaServizi {
		margin-top: 30px;
	}
	
	.introPagina .iconaServizi.seconda,
	.introPagina .iconaServizi.quarta {
		border: none;
	}
	
	.introPagina.smallBox .descPagina {
		padding: 50px 0px;
	}
	
	.introPagina.smallBox .descPagina.ultima {
		padding-bottom: 0px;
	}
	
	.introPagina.bigBox .descPagina {
		padding: 50px 10px 0px 10px;
	}
	
	.testiEvento,
	.testoContatti {
		padding-top: 70px;
	}
	
	.introPagina.smallBox {
		padding-top: 50px;
	}
	
	.introPagina.bigBox {
		padding-top: 0px;
	}
	
	.testiCamere {
    	padding-top: 0px;
	}
	
	.testiCamere .colonnaDx {
		height: auto !important;
	}
	
	.boxPrenotazione .date p {
		font-size: 12px;
		line-height: 1.3em;
		margin: 15px 0px;
		padding: 0px 50px 0px 20px;
	}
	
	.boxPrenotazione .date p span.day {
		font-size: 30px;
	}
	
	.boxPrenotazione .date p::after {
    	font-size: 15px;
		top: 27px;
	}
	
	.boxPrenotazione .pultantePrenota {
		padding: 0px 30px;
	}
	
	.testiCamere .colonnaSx,
	.testiCamere .colonnaDx {
		padding: 30px;
	}
	
	.testiEvento .fotoEvento {
    	margin-bottom: 40px;
	}
	
	.testiEvento .descEvento {
		padding: 0px 0px 50px;
	}
	
	.testoContatti .colonnaDx {
    	padding: 30px;
		margin-top: 40px;
	}

	footer {
		margin-top: 50px;
	}
	
	.piede {
    	padding: 30px 0px 90px;
	}
	
	.contatti {
    	padding: 50px 0px 50px;
	}
	.contatti .logo, 
	.contatti .logo:visited,
	.contatti .logo:focus, 
	.contatti .logo:hover {
		margin-top: 5px !important;
	}
	
	.menuFooter li {
		display: block;
		padding: 0px 0px 5px 0px;
		margin: 0px;
	}

}

@media (min-width: 568px) and (max-width: 767px) {
	
	.rotate {
		position: fixed;
		display: block;
		width: 100%;
		height: 100%;
		background: #df9356 url(../img/rotate.png) center center no-repeat;
		z-index: 10000;
	}
	
}

@media (min-width: 768px) and (max-width: 991px) {
	
	.overlayMenu {
		display: block;
	}
	
	.wrapper {
		width: calc(100% - 70px);
		max-width: calc(100% - 70px);
		margin: auto;
	}
	
	.lang_selector {
		right: 50px;
		top: 25px;
	}
	
	.squarePrenota, 
	.squarePrenota:visited, 
	.squarePrenota:focus, 
	.squarePrenota:hover {
		top: 100px;
	}
	
	.logo, 
	.logo:visited, 
	.logo:focus, 
	.logo:hover {
		width: 140px;
		height: 96px;
	}

	header {
		margin-top: 100px;
	}
	
	header .reservation {
		width: 100%;
	}
	
	.fullscreen::after {
		height: 100px;
		bottom: -50px;
	}
	
	.slideContainer .slider img,
	.introPagina.smallBox img {
		height: 40vh;
	}

	.slideHeader {
		margin-top: 70px;
		width: calc(100% + 100px);
		margin-left: -50px;
	}
	
	.slideHeader img {
		display: block;
		min-height: 50vh;
	}
	
	.slideHeader .slick-dots {
		left: 20px;
	}
	
	.slideHeader::before {
		display: none;
	}
	
	.slideContainer .pagingSlide {
		top: 35px;
	}
	
	.slideContainer .slick-dots {
		top: 55px;
	}
	
	.payoffHome {
		padding-top: 100px;
	}
	
	.prenota,
	.testoPagina,
	.introPagina {
		padding-top: 100px;
	}
	
	.introPagina .descPagina {
		padding: 70px 70px 70px;
	}
	
	.introPagina .dettaglioPagina {
		padding: 70px;
	}
	
	.introPagina .icone {
		margin-top: 50px;
	}
	
	.introPagina .iconaServizi {
		margin-top: 50px;
	}
	
	.introPagina .iconaServizi.terza {
		border: none;
	}
	
	.introPagina.smallBox .descPagina {
		padding: 70px;
	}
	
	.introPagina.smallBox .descPagina.ultima {
		padding-bottom: 0px;
	}
	
	.introPagina.bigBox .descPagina {
		padding: 60px 30px 0px 30px;
	}
	
	.testiEvento,
	.testoContatti {
		padding-top: 70px;
	}
	
	.introPagina.smallBox {
		padding-top: 100px;
	}
	
	.introPagina.bigBox {
		padding-top: 0px;
	}
	
	.testiCamere {
    	padding-top: 0px;
	}
	
	.testiCamere .colonnaDx {
		height: auto !important;
	}
	
	.boxPrenotazione .date p {
		font-size: 12px;
		line-height: 1.3em;
		margin: 15px 0px;
		padding: 0px 50px 0px 20px;
	}
	
	.boxPrenotazione .date p span.day {
		font-size: 30px;
	}
	
	.boxPrenotazione .date p::after {
    	font-size: 15px;
		top: 27px;
	}
	
	.boxPrenotazione .pultantePrenota {
		padding: 0px 30px;
	}
	
	.testiCamere .colonnaSx,
	.testiCamere .colonnaDx {
		padding: 70px;
	}
	
	.testiEvento .descEvento {
		padding: 0px 70px 70px;
	}
	
	.testoContatti .colonnaDx {
    	padding: 50px;
	}

	footer {
		margin-top: 100px;
	}
	
	.piede {
    	padding: 70px 0px;
	}
	
	.contatti {
    	padding: 50px 0px 50px;
	}
	.contatti .logo, 
	.contatti .logo:visited,
	.contatti .logo:focus, 
	.contatti .logo:hover {
		margin-top: 5px !important;
	}
	
}

@media (min-width: 992px) and (max-width: 1199px) {
	
	.wrapper {
		width: calc(100% - 100px);
		max-width: calc(100% - 100px);
		margin: auto;
	}
	
	.logo, 
	.logo:visited, 
	.logo:focus, 
	.logo:hover {
		width: 140px;
		height: 96px;
	}
	
	.menuClassic {
		margin:100px 60px 0px 0px;
	}
	
	.menuClassic li {
		padding:0px 0px 0px 15px;
	}

	header {
		margin-top: 100px;
	}
	
	.fullscreen::after {
		height: 100px;
		bottom: -50px;
	}
	
	.slideHeader {
		margin-top: 120px;
	}
	
	.slideHeader::before {
		height: 100px;
		top: -50px;
	}
	
	.payoffHome {
		padding-top: 100px;
	}
	
	.prenota,
	.testoPagina,
	.introPagina {
		padding-top: 100px;
	}
	
	.introPagina .descPagina {
		padding: 0px 70px 70px;
	}
	
	.introPagina .dettaglioPagina {
		padding: 70px;
	}
	
	.introPagina .icone {
		margin-top: 50px;
	}
	
	.introPagina .iconaServizi {
		margin-top: 50px;
	}
	
	.introPagina .iconaServizi.terza {
		border: none;
	}
	
	.introPagina.smallBox .descPagina {
		padding: 60px 30px 0px 30px;
	}
	
	.introPagina.bigBox .descPagina {
		padding: 60px 30px 0px 30px;
	}
	
	.testiEvento,
	.testoContatti {
		padding-top: 120px;
	}
	
	.introPagina.smallBox {
		padding-top: 100px;
	}
	
	.introPagina.bigBox {
		padding-top: 50px;
	}
	
	.boxPrenotazione .date p {
		font-size: 12px;
		line-height: 1.3em;
		margin: 15px 0px;
		padding: 0px 50px 0px 20px;
	}
	
	.boxPrenotazione .date p span.day {
		font-size: 30px;
	}
	
	.boxPrenotazione .date p::after {
    	font-size: 15px;
		top: 27px;
	}
	
	.boxPrenotazione .pultantePrenota {
		padding: 0px 30px;
	}
	
	.testiCamere .colonnaSx,
	.testiCamere .colonnaDx {
		padding: 70px;
	}
	
	.testiEvento .descEvento {
		padding: 0px 70px 70px;
	}
	
	.testoContatti .colonnaDx {
    	padding: 70px;
	}

	footer {
		margin-top: 100px;
	}
	
	.piede {
    	padding: 70px 0px;
	}
	
	.contatti .logo, 
	.contatti .logo:visited,
	.contatti .logo:focus, 
	.contatti .logo:hover {
		margin-top: -10px !important;
	}

}

@media (min-width: 1200px) and (max-width: 1599px) {
	
	.wrapper {
		width: calc(100% - 100px);
		max-width: calc(100% - 100px);
		margin: auto;
	}

	header {
		margin-top: 100px;
	}
	
	.fullscreen::after {
		height: 100px;
		bottom: -50px;
	}
	
	.slideHeader {
		margin-top: 120px;
	}
	
	.slideHeader::before {
		height: 100px;
		top: -50px;
	}
	
	.payoffHome {
		padding-top: 150px;
	}
	
	.prenota,
	.testoPagina,
	.introPagina {
		padding-top: 150px;
	}
	
	.introPagina .descPagina {
		padding: 0px 100px 100px;
	}
	
	.introPagina .dettaglioPagina {
		padding: 100px;
	}
	
	.introPagina .iconaServizi {
		margin-top: 150px;
	}
	
	.testiEvento,
	.testoContatti {
		padding-top: 120px;
	}
	
	.introPagina.smallBox {
		padding-top: 120px;
	}
	
	.introPagina.bigBox {
		padding-top: 50px;
	}
	
	.boxPrenotazione .date p {
		font-size: 12px;
		line-height: 1.3em;
		margin: 15px 0px;
		padding: 0px 50px 0px 20px;
	}
	
	.boxPrenotazione .date p span.day {
		font-size: 30px;
	}
	
	.boxPrenotazione .date p::after {
    	font-size: 15px;
		top: 27px;
	}
	
	.boxPrenotazione .pultantePrenota {
		padding: 0px 30px;
	}
	
	.testiCamere .colonnaSx,
	.testiCamere .colonnaDx {
		padding: 100px;
	}
	
	.testiEvento .descEvento {
		padding: 0px 100px 100px;
	}

	footer {
		margin-top: 150px;
	}

}