/*
Theme Name: ARP Albergo Ristorante Penice
Description: tema per Albergo Ristorante Penice
Version: 1.0
Author: Enrico Mingardo
Author URI: http://enricomingardo.com/
Template: twentyeleven
*/

@import url('../twentyeleven/style.css');

.clear {clear: both;}

/* Typography ========================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* default fonts ======================= */
body {}
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }

/* MODIFICHE DHYNET */

.widget-area {font-size:16px;}
.map-pin-icon {background-size:10px auto !important;}
small {font-size:11px;}
.wp-block-quote {margin:0 !important; padding-left: 48px !important; padding-right: 48px !important;}




/* blockquote ========================== */
blockquote {
  background: url('images/blockquote.png') no-repeat left top;
  padding-left: 40px;
}

/* Table =============================== */
table.tariffe {
	border: 0;
	font-size: 12px;
}
table.tariffe td.prezzo {
	text-align: right;
	text-transform: none;
}
table.tariffe td.note {
	text-transform: none;
	text-align: right;
	font-size: 10px;
}
table.tariffe td strong {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* LOGO ================================ */
div.logo {
	position: absolute;
	height: 70px;
	width: 340px;
	background: url(images/logo.png) center center no-repeat;
  background-size:315px auto;
	z-index: 10;
	top: -16px;
  left: 0px;
}

/* branding ============================ */
#branding {
	border-top: 2px solid #a88e43;
	padding-bottom:0;
}
#header-image {
	border-bottom: 3px solid #A88E43;
}

/* MENU ================================ */
#access {
	margin: 0 auto;
	background: #fff;
	-webkit-box-shadow: rgba(58, 40, 20, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(58, 40, 20, 0.4) 0px 1px 2px;
	box-shadow: rgba(58, 40, 20, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	width: 100%;
}
#access div { margin: 0; }
#access ul {
	font-size: 18px;
  font-family: 'Playfair Display', serif;
	/*font-family: Georgia, serif;*/
	float: right;
	margin-left: 400px;
}
#access a {color: #a88e43;}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #a88e43;
}
#access li:hover > a,
#access a:focus {
	background: #a88e43; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#e9e1c9, #a88e43);
	background: -o-linear-gradient(#e9e1c9, #a88e43);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9e1c9), to(#a88e43)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#e9e1c9, #a88e43);
	color: #fff;
}
#access ul ul a {
	color: #A88E43;
	font-size: 15px;
}
/* ==========================*/
#main {
	background: #F7F2EC;
}

#page {
	margin: 1.2em auto;
	max-width: 1280px;
	background: #F7F2EC;
}
.singular.page .hentry {
	padding: 1.5em 0 0;
}
.hentry {
	border-bottom: 1px solid #E9E1C9;
}

.entry-meta .edit-link a, .commentlist .edit-link a {
	background: #E9E1C9;
	color: #A88E43;
}

.entry-meta .edit-link a:hover, .commentlist .edit-link a:hover {
	background: #A88E43;
	color: #E9E1C9;
}

h3.widget-title {
	color: #3a2814;
	font-size: 16px;
  letter-spacing:0;
}
input#s {
	background-color: white;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	border: 1px solid #A88E43;
	color: #3a2814;
}

input[type="text"], input[type="email"], input[type="password"], textarea {
	background-color: white;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	border: 1px solid #A88E43;
	color: #3a2814;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.widget ul {
	list-style: none;
}

/* pagina contatti ==================== */
#map-canvas iframe {
  border-bottom: 2px solid #A88E43;
}


/* Contact Form  ========================= */
.half-width {
	width: 50%;
	float: left;
}

div.wpcf7 p {
	margin-bottom: 0;
}


input.wpcf7-submit {
	background: #E9E1C9;
	border: none;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	color: #3a2814;
	cursor: pointer;
	font-size: 16px;
  text-transform: uppercase;
	margin: 20px 0;
	padding: 5px 22px;
	position: relative;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

input.wpcf7-submit:hover {
	background: #A88E43;
	color: #E9E1C9;
}

/* per contatti nel footer ============================== */
.map-pin-icon{
	background: url('images/map_pin.png') no-repeat left top;
	padding-left: 15px;
	background-position-y: 4px;
}
a.no-underscore:hover, a.no-underscore:focus, a.no-underscore:active {
	text-decoration: none;
}

#supplementary {border-top: 0;}
#colophon {
	background-color: #3a2814;
	border-top: 2px solid #a88e43;
	color: #e9e1c9;
}
#colophon h3.widget-title {
	color: #e9e1c9;
	font-size: 18px;
}
#colophon ul { list-style: none;}
#colophon .widget a { color: #e9e1c9; }
#primary {background: #F7F2EC;}
#site-generator {
	background: #e9e1c9;
	border-top: 2px solid #a88e43;
	color: #3a2814;
	font-size: 12px;
	line-height: 2.2em;
	padding: 2.2em 0.5em;
	text-align: center;
}
#site-generator a {
	color: #3a2814;
	font-weight: bold;
}

#site-generator a.enrico-mingardo-logo {
  background: url('images/logo-enrico-mingardo.png') no-repeat right top;
  padding-right: 28px;
  padding-top: 2px;
}

.singular h1.entry-title, h1.entry-title, h1.entry-title a {
	color: #3a2814;
}

.home h1.entry-title {
  text-align: center;
}

.page-title {
	color: #3a2814;
	font-size: 12px;
}

/* sidebars ====================== */

#secondary {
  background: #D7C797;
  margin-bottom: 2em;
}
.widget {
  margin: 1em 1em 2.2em;
}


/* Images ======================= */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border: 1px solid #a88e43;
	padding: 6px;
	background: #fff;
}
.wp-caption img {
	border-color: #eee;
}
a:focus img[class*="align"],
a:hover img[class*="align"],
a:active img[class*="align"],
a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"],
#content .gallery .gallery-icon a:focus img,
#content .gallery .gallery-icon a:hover img,
#content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */
	background: #fff;
	border-color: #3a2814;
}
.wp-caption a:focus img,
.wp-caption a:active img,
.wp-caption a:hover img {/* ... including captioned images! */
	background: #fff;
	border-color: #ddd;
}



/* Swappers ============================== */
#swappers {
  width: 800px;
	margin-left: -400px;
	left: 50%;
	height: 50px;
	z-index: 10000;
	position: absolute;
	bottom: -10px;
}
div.swapper {
	float: left;
	color: black;
	width: 30%;
	height: 50px;
	position: relative;
	margin-left: 5%;
	overflow: hidden;
	background: rgb(233,225,201); /* fallback for old browser*/
	background: rgba(255,255,255, 0.8);
}
#swappers > div.swapper:first-child {margin-left: 0px;}
a.indicator {
	position:absolute;
	top:0;
	right:0;
	color: #a88e43;
	padding-right: 3px;
}
h3.swapper-title {
	border-bottom: 2px solid #a88e43;
	color: #a88e43;
	padding: 0 10px;
	font-size: 20px;
	line-height: 48px;
}
div.swapper div.textwidget { padding: 0 10px; }
div.swapper ul {
	list-style:none;
	margin: 0 10px
}


/* Icone ================================= */

.ico_fb {display:inline-block; background:url(images/ico_facebook.svg) center center no-repeat; width:30px; height:30px; margin:0 6px 0 0;backgorund-size:30px auto;}
.ico_ig {display:inline-block; background:url(images/ico_instagram.svg) center center no-repeat; width:30px; height:30px; backgorund-size:30px auto;}






/* Hamburgher Menu */
*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}

.mobilenav-hidden {overflow:hidden;}

/*
.top-animate {background: #D5D1C9 !important; width:15px !important; left:0 !important; top: 13px !important; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.mid-animate {opacity: 1; left:2px;}
.bottom-animate {background: #D5D1C9 !important; width:15px !important; left:0 !important; top: 3px !important; -webkit-transform: rotate(-225deg); transform: rotate(-225deg);}
*/

.top-animate {background: #fff !important; top: 8px !important; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.mid-animate {opacity: 0;}
.bottom-animate {background: #fff !important; top: 8px !important; -webkit-transform: rotate(-225deg); transform: rotate(-225deg);}


.top-menu {top: 0px; width: 30px; height: 3px; border-radius: 0; background-color: #fff;}
.mid-menu {top: 8px; right:0px; width: 30px; height: 3px; border-radius: 0; background-color: #fff;}
.bottom-menu {top: 16px; width: 30px; height: 3px; border-radius: 0; background-color: #fff;}


.menui {
  background: #fff;
  transition: 0.4s ease;
  transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
  position: absolute;
  z-index: 99999;
}

.icon {
  display:block;
  padding:0;
  height:20px;
  width:20px;
  margin:0;
}

.hamburger-menu {
	width:70px;
  height:70px;
  top:10px;
  right:6px;
  position:fixed;
  z-index:99;
  background:#000;
  border-radius:50%;

  -webkit-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.36);
  -moz-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.36);
  box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.36);
}

.hamburger {
  position:absolute;
  top:25px;
  left:20px;
  display:block;
  width:30px;
  height:20px;
  margin:0;
  z-index:9999;
}









.mobilenav {
  position:fixed;
  top: 0;
  left:0;
  padding:0;
  z-index: 10;
  display:none;
  width:100vw;
  height:100vh;
  background:rgba(233,225,201,0.92);
  overflow-x: hidden;
  overflow-y: auto;
}

.mobilenav .mobilenav-inner {
  width:calc(100vw - 60px);
  height:calc(100vh - 60px);
  padding:0;
}





.mobilenav ul {
  width:calc(100% - 30px);
  margin:40px 0 0 0;
  padding:30px;
  letter-spacing:1px;
}

.mobilenav li {
  width:100%;
  list-style-type: none;
  padding:0;
  margin:0;
  opacity:0;

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
}

.mobilenav li a {
  position:relative;
  display:block;
  margin: 0;
  padding:6px 20px;
  font-size: 22px;
  color: #3a2814;
  text-decoration: none;
  width: calc(100% - 20px);

  border-bottom:1px solid #a88e43;

  transition:all 0.6s ease-in-out;
}

.mobilenav li a:hover {
  color:rgba(255,255,255,0.5);
  transition:all 0.6s ease-in-out;
}

.mobilenav-animate li {
  /*width:100%;*/
  opacity: 1;

  -webkit-transform: translateY(0);
  transform: translateY(0);

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
}

.mobilenav li.current_page_item a {
  /*color:#fff;
  background:#a88e43;*/
}


.mobilenav ul .sub-menu {padding:0 0 0 20px; margin:0;}
.mobilenav ul .sub-menu li {padding-left:0;}
.mobilenav ul .sub-menu li:before {content:' » '; color:#a88e43; font-size:22px; line-height:38px; font-weight:300; display:inline-block; position:absolute;}
.mobilenav ul .sub-menu li a {border-bottom:1px dotted #a88e43 !important; font-size:18px;}

.mobile--nav {display:none; position:absolute; top:0; right:0; width:70px; height:70px;}


















/* ====================================== */
/*               Responsive               */
/* ====================================== */




@media (max-width: 800px) {
	#swappers {display: none;}
}



/* SMARTPHONE PORTRAIT ------------------------------------------------------------------------------------------------*/
@media only screen
    and (min-width: 300px)
    and (max-width: 470px)
    and (orientation: portrait) {

      .mobile--nav {display:block;}
      .menu-main-container {height:70px;}
      #access ul {display:none;}

      div.logo {width: 230px; background-size: 210px auto; top: 0px; left:6px;}
      #access ul {margin: 60px auto 0px auto; float:none;}

      footer {text-align: center;}
      .map-pin-icon {background-size:0px auto !important;}

      .left-sidebar #secondary {text-align:center; padding-bottom:30px; margin-bottom:40px !important;}

      .wpcf7-form .half-width {width:100%;}
    }




/* SMARTPHONE LANDSCAPE ------------------------------------------------------------------------------------------------*/
@media only screen
    and (min-width: 471px)
    and (max-width: 1023px)
    and (orientation: landscape){
      div.logo {width: 230px; background-size: 210px auto; top: 0px; left:calc(50% - 105px);}
      #access ul {margin: 60px auto 0px auto; float:none;}
      #access a {padding: 0 16px;}

      footer {text-align: center;}
      .map-pin-icon {background-size:0px auto !important;}

      .left-sidebar #secondary {text-align:center; padding-bottom:30px; margin-bottom:40px !important;}

      .wpcf7-form .half-width {width:100%;}
    }





/* TABLET PORTRAIT -----------------------------------------------------------------------------------------------------*/
@media only screen
    and (min-width: 768px)
    and (max-width: 1023px)
    and (orientation: portrait){
      div.logo {width: 230px; background-size: 210px auto; top: 0px; left:calc(50% - 105px);}
      #access ul {margin: 60px auto 0px auto; float:none;}

      footer {text-align: center;}
      .map-pin-icon {background-size:0px auto !important;}

      .left-sidebar #secondary {text-align:center; padding-bottom:30px; margin-bottom:40px !important;}
    }





/* TABLET LANDSCAPE ----------------------------------------------------------------------------------------------------*/
@media only screen
    and (min-width: 1024px)
    and (max-width: 1180px)
    and (orientation: landscape){

      div.logo {width: 240px; background-size: 220px auto; top: -8px;}
      #access ul {margin-left: 260px;}

    }


/* ================================ */