/*
Theme Name: Os2
Theme URI: https://www.os2.it
Author: the Os2 team

*/

@import url('https://fonts.googleapis.com/css?family=Kodchasan:400,400i,500,500i,600,600i,700,700i');

@font-face {
  font-family: "palmeri";
  src:url("fonts/palmeri.eot?2");
  src:url("fonts/palmeri.eot?#iefix") format("embedded-opentype"),
    url("fonts/palmeri.woff?2") format("woff"),
    url("fonts/palmeri.ttf?2") format("truetype"),
    url("fonts/palmeri.svg#palmeri?2") format("svg");
  font-weight: normal;
  font-style: normal;
}

BODY {font-family: Kodchasan, sans-serif; font-weight:400; font-size:95%; color: #928A77; margin: 0;padding:0;background:#fff; text-align:justify; line-height:1.40; -webkit-text-size-adjust: 100%; background: url(images/bg.gif) repeat}
a:link, a:visited, a:before, a:after, a *, a *:before, a *:after, input {text-decoration:none;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;}
a:link, a:visited {color:#928A77}
a:hover {color:#444}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
	max-width: 100% !important;
}

/* form e img */
header, main, footer, figure, blockquote {display:block;margin:0}
body > header {min-width:320px;position:relative; text-align: center;}

header, main, #footer {padding:0; margin:0 auto; text-align:center;}
#footer, main, #top {min-width:320px; position:relative}
main {padding:20px 0 0 0}

*, *:after, *:before {-webkit-box-sizing: border-box; box-sizing: border-box;-webkit-font-smoothing: antialiased;-webkit-appearance:none;}
input[type="checkbox"] {-webkit-appearance:checkbox;}
input[type="radio"] {-webkit-appearance:radio;}
p {margin:10px 0}
.imgdx {float:right;margin:5px 0 0 5px}
.imgsx {float:left;margin:8px 5px 0 0}
h1, h2, h3, h4 {position: relative;margin:0;font-family:"Kodchasan", sans-serif; font-weight:400; text-transform: uppercase; line-height: 1; color:#928A77}
h1, h2 {font-size:19px}
h3 {font-size:20px;}
h4 {font-size:17px;}
h1.entry-title {margin-bottom:20px}
div.wpcf7 {margin-bottom:30px}
.wpgmza_map {margin-top:10px}

b, strong {font-weight: 700}
img {border:0}
form {margin:0}
ul {margin:0; padding:0; list-style:none}
.content ul {margin:10px; padding:10px; list-style:initial}
.content img {max-width:100%; heighT:auto}
*:focus {outline:none}
.clearfix:after {content: ""; display: table; clear: both;*zoom: 1}
.center {text-align:center; clear:both}

/* Alignment */

.alignleft {display: inline;float: left;margin-right: 1.625em;}
.alignright {display: inline; float: right;	margin-left: 1.625em;}
.aligncenter {clear: both;display: block;	margin-left: auto; margin-right: auto;}

#gallery-2 .gallery-item img {border: 1px solid #cfcfcf;}

.pagination {margin-top:50px}
.pagination .nav-links {display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content:center; justify-content: center}
.pagination .nav-links > * {width:40px; height:40px; line-height:40px; display:block; background: #000; color:#fff; margin:0 5px; font-weight:500}
.pagination .nav-links > .current {background: #C62E1F; color:#fff}

input[type="text"], input[type="number"], input[type="email"], input[type="submit"], textarea, select  {font-family: Kodchasan, sans-serif; font-size:15px; margin:0; padding:0; border:0; color:#333}
input[type="text"], input[type="email"], input[type="number"], select, textarea {border:1px solid #ccc; border-radius:5px; padding:10px; background: #fff}
input[type="text"], input[type="email"], input[type="number"] {height:40px}

.contatti {text-align: left; margin:40px 0 20px 0}
label {text-align: left; display: inline-block;}
.contatti > div {margin-top:10px}
.contatti > div input[type="text"], .contatti > div input[type="email"], textarea {width:100%; margin-top:3px}
.contatti > p {clear:both;width:94%;margin:3%}

#policy {font-size:80%; margin:20px 0}

span.wpcf7-list-item {margin: 0 !important;}

input[type="submit"], input[type="button"] {border:0;height:40px;padding:0 15px; border-radius:5px; font-size:18px; text-transform:uppercase; cursor:pointer; background:#928A77; color:#fff; font-weight:600}
input[type="submit"]:disabled, input[type="submit"]:disabled:hover, input[type="submit"]:disabled:hover, input[type="button"]:disabled, input[type="button"]:disabled:hover, input[type="button"]:disabled:hover {background:#ccc;color:#fff;cursor:text}
input[type="submit"]:hover, input[type="button"]:hover {background:#000;}
input[type="submit"]:active, input[type="button"]:active {background:#000; color:#fff}
::-webkit-input-placeholder {color: #999; font-style: italic;}
:-moz-placeholder { /* Firefox 18- */ color: #999;opacity: 1;  font-style: italic;}
::-moz-placeholder {  /* Firefox 19+ */  color: #999;opacity: 1;  font-style: italic;}
:-ms-input-placeholder { color: #999;  font-style: italic;}

.submit {position:relative; display:inline-block; height: 34px}
.submit input[type="submit"] {padding-right:25px}
.submit:after {font-family:palmeri; content:'q'; display:block; color:#fff; font-size:15px; position:absolute; top:0; right:10px; line-height:34px; pointer-events: none;}

#homevideo {width: 100%;max-height: 100vh;overflow:hidden}
#homevideo video {width: 100%;height: auto}

.content {margin:0 auto; max-width: 1200px; text-align: justify; padding:0 10px}

#logo {position:absolute; top:0; left:30px; z-index: 2}
#logo a {display:block; background: #fff; overflow: hidden; width:72px;height:90px; position:relative;}
#logo a img {height:100px; display:block; position: absolute; top: 15px; left:50%;transform: translateX(-50%);}

body > header:before {position:absolute; top:0; left:0; width:100%; content:''}
body > header > img {display:block;width:100%; height: auto}


.home body > header:before {height:70px}

a#toggle {width: 40px; height: 40px; text-align: center; display: none; transition: all ease-out 0.3s;}
a#toggle:before {float:left;display:block;font-family:palmeri; content:'m';font-size:20px; width:40px;height:40px;line-height:40px; color:#fff; text-align:center}

.open-menu a#toggle:before {content:'x';color:#fff; font-size:20px}
a#toggle:hover:before {color:#17232A}

footer {clear:both; position:relative; width:100%; font-size:13px; text-align:left; background: #928A77; color:#fff}

#footer {padding:30px 20px; max-width: 1200px}
#footer a {color:#fff}
#footer a:hover {text-decoration: underline}

#copyright span {display:block}
#copyright:before {content:''; display:block;margin:0 auto 30px auto; width:229px; height:130px;background: #fff; -webkit-mask: url(images/palmeri-studio-odontoiatrico.svg) center / contain no-repeat; mask: url(images/palmeri-studio-odontoiatrico.svg) center / contain no-repeat}

#contacts a {margin:0 auto;display:block; width:260px; height:50px;line-height:46px; border:1px solid #fff; border-radius: 5px; text-align: center; color:#fff; overflow:hidden}
#contacts a:first-child {margin-bottom:20px}

#contacts a:before {background: #fff; display:block; color:#928A77; font-family: palmeri;font-size:30px; width:50px;height:50px; float:left;}
#contacts a#tel {font-size: 26px}
#contacts a#fb {font-size: 14px}
#contacts a#tel:before {content:'t'}
#contacts a#fb:before {content:'f'}

#welcome {padding:0 15px 10px 15px; margin: 0 auto; text-align: left; max-width: 1280px}
#welcome article {color:#17232A; max-width: 1000px; margin:0 auto}
.prenota {text-align: center; margin-top:50px}
.prenota a {display:inline-block;height:50px;line-height:50px; padding:0 30px; background: #928A77; color:#fff; border-radius: 25px; margin: 0 auto;text-transform: uppercase}
.prenota a:hover {background: #fff; color:#928A77;}

.owl-stage {margin:0 auto; line-height: 1}
.sliderservizi {text-align: center}
.sliderservizi div.owl-item > a {font-size: 20px}
.sliderservizi div.owl-item > a > span {max-width: 140px; margin:0 auto; display:block}
.sliderservizi div.owl-item > a:before {margin:20px auto; display:block; font-family: palmeri; font-size: 50px; background: #fff; border-radius: 50%; width:100px; height:100px; text-align: center; line-height: 100px; color:#928A77; box-shadow: 0px 0px 20px 5px rgba(221,221,221,0.65); -webkit-box-shadow: 0px 0px 20px 5px rgba(221,221,221,0.65);}
.sliderservizi a#endodonzia:before {content:'e';}
.sliderservizi a#estetica:before {content:'E';}
.sliderservizi a#conservativa:before {content:'c';}
.sliderservizi a#pediatrica:before {content:'p';}
.sliderservizi a#protesi:before {content:'P';}
.sliderservizi a#implantologia:before {content:'i';}
.sliderservizi a#ortodonzia:before {content:'o'; font-size: 60px}


#micro {display: -webkit-flex; display: flex}
#micro div {background: #F0F0F0; padding:30px 15px; text-align: left}
#micro h1 {margin-bottom:20px}
#micro p {margin:0}
#micro span {width: 100%; display:block}
#micro img {object-fit: cover; object-position: top center; min-width: 100%; min-height: 100%;  width: 100%; height: auto; max-width: 100%; max-height: 100%;}

a.fb {position: relative; padding-left:13px}
a.fb:before {content:'f'; font-family: palmeri; color:#069; font-size: 15px;line-height: 15px; position:absolute; top:0; left:-3px}

#homenews {margin:20px 25px; text-align: left;}
.slidernews h3 {font-size:17px; line-height: 1.15}
.slidernews a:hover h3 {color:#666}
.slidernews img {float:left; width:33%; max-width: 190px; margin-right: 10px}
.slidernews p {color:#000}

span.wpcf7-not-valid-tip {color: #C62E1F !important}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {background:#D1AA66 !important}
div.wpcf7-mail-sent-ok {background:#060 !important}

#news {margin:10px; text-align: left}
#news article {padding:10px 0}
#news article a {background:#F0F0F0; display:block; padding:20px; border-radius: 5px}
#news h3 {font-size:16px; margin:10px 0;min-height: 45px; text-align: left; line-height: 1}
#news p {font-size:13px; color:#000}
#news a:hover h3 {color:#000}

@media screen and (min-width: 360px) {
 }
@media screen and (min-width: 360px) {
  #fconsulenza div:first-child {font-size: 18px}
  #fconsulenza div:first-child strong {font-size: 24px}
  #homenews {margin: 20px 30px}
 }
@media screen and (max-width: 479px) {
  #gallery-2.gallery .gallery-item {width:100%; max-width: 100%}
  body:not(.home) .prenota a {padding:0 10px; font-size: 13px}
}

@media screen and (min-width: 480px) {
  h1 {font-size:24px; text-align: center}
  .contatti {display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content: space-between}
  .contatti.preventivo {flex-wrap: wrap}
  .contatti > div {width:30%}
  .contatti.preventivo > div {width:47%}

  #gallery-2.gallery .gallery-item {padding:10px}
  #copyright div > span > span {display: inline}

  #news {-webkit-flex:flex; display: flex; -webkit-justify-content:space-between; justify-content: space-between; flex-wrap: wrap}
  #news article {width:48%}
}

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

@media screen and (max-width: 639px) {
#micro {-webkit-flex-direction: column-reverse; flex-direction: column-reverse}
#micro span {max-height: 200px}
}

@media screen and (min-width: 640px) {
  h1, h2 {font-size: 30px}
  #micro h1 {text-align: left}
  #welcome {padding: 0 30px 40px 30px}
  .content {padding:50px; background: #eee}
  #micro div {display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;-webkit-justify-content:center; justify-content: center}
  #micro span {max-height: 520px}
  }
@media screen and (min-width: 768px) {
  #logo a {width:287px;height:190px}
  #logo a img {height: 130px; top:50%;transform: translate(-50%, -50%);}
  main {padding-top:60px}
  #welcome {padding: 0 60px 60px 60px}
  body {font-size: 105%}

  #news:after {content: '';flex: auto;}
  #news article {width:31.33333%; margin:1%}
  #news h3 {font-size:18px}
  #news p {font-size:14px}
}

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

  }

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

  }
@media screen  and (min-width: 840px) and (max-width: 1199px) {

}
@media screen and (max-width: 899px) {
  #contacts {margin-top:20px}
}

@media screen and (min-width: 900px) {
  #welcome h1:after {display:block; content:''; width:170px; height:4px; background: #928A77; position:absolute;bottom:0;left: 50%; transform: translateX(-50%)}
  #welcome h1 {padding-bottom: 30px; margin-bottom:30px}
  #footer, #copyright {display:-webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content: space-between}
  #copyright div {text-align: left; line-height: 2.25}
  #copyright:before {margin: 8px 30px 0 0}
  #contacts {display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;-webkit-justify-content:space-between; justify-content: space-between; padding:8px 0}

  #micro div {width:35%; padding:30px}
  #micro span {width:65%}

}

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

  }

@media screen and (min-width: 1024px) {
  main {padding: 50px 0 0 0;}
  #welcome {padding: 0 0 60px 0}
  h1 {font-size:35px}

  #homeboxes {background: #EFF1F8}
  #homeboxes > div {margin:0 auto;max-width:1200px;display:-webkit-flex; display: flex; -webkit-justify-content:space-around; justify-content: space-around; -webkit-align-items:center; align-items: center; margin-bottom:50px; line-height: 1.6}

  #news article {width:23%}
  #news h3 {font-size:22px}
  #news p {font-size:16px}
}

@media screen and (min-width: 1100px) {
  #micro div {padding:50px}
  #micro h1 {margin-bottom: 50px}
  #homeservizi {margin-top:80px}
}

@media screen and (max-width: 1199px) {
  body > header:before {height:70px;
  background: rgba(0,0,0,0.6);
  background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.6)), color-stop(100%, rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
  }
  .overlaybg {height:100%; width:100%; position:fixed;left:0;	top:0;z-index:4 !important;background-color:rgba(146,138,119,0.80)}
  /* push menu*/
  #menu {moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;position: fixed;  overflow: hidden; overflow-y: auto;height: 100%; top: 0; right: -280px;  background-color: #fff; z-index: 10; width: 280px; opacity: 1; text-align:left}

  /* push menu*/
  #menu ul {list-style: none; margin: 0;padding: 0}
  #menu > ul a {padding:0 10px; color: #928A77; font-size: 13px; display: block;line-height:40px; text-decoration: none;position:relative; text-transform:uppercase}
  #menu ul li.open ul li a {background:#eee;color:#000; font-size:15px; line-height:40px}
  #menu ul li.open > a:after {-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);  transform: rotate(-90deg)}
  #menu ul li.open ul li a:hover {color:#928A77;}

  #menu > ul {list-style: none; margin: 0;padding: 0}
  #menu > ul > li > a:hover, #menu > ul > li.open > a {background:#928A77;color:#fff; }
  #menu > ul li.sub > a:after {position:absolute; top:0;right:20px; line-height:40px;height:40px}
  #menu > ul > li.open > a:after {color:#fff}
  #menu > ul li.sub a:hover:after {color:#fff;}

  #menu > ul li ul, ul.catmenu > li ul {display: none; position: static; width: 100%;}
  #menu > ul li:hover > ul { display: none; }
  #menu > ul li.open > ul, ul.catmenu li a { display: block; }


  a#toggle {position:absolute; top:16px; right:10px; display: block;z-index:5 }
  a#toggle span {position: absolute; top: -999999px; left: -999999px;}

  html.open-menu { overflow: hidden;}
  html.open-menu nav#menu {z-index: 4; right:0}
  html.open-menu a#toggle { right:280px }
}

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

  .overlaybg {display:none !important}
  h1 {font-size:40px; margin-bottom:30px}

  #menu {position:absolute; top:100px;z-index:1;left:0; width:100%; line-height:70px;height:70px; background: rgba(255,255,255,0.85); padding: 0 20px 0 330px}
  ul.mainmenu {display: -webkit-flex; display: flex;-webkit-justify-content:space-between; justify-content: space-between}
  nav > ul.mainmenu > li > a {display: block; text-decoration: none; text-transform: uppercase}
  ul.mainmenu > li > a {position: relative; line-height:70px; color:#928A77;font-size: 14px}
  ul.mainmenu > li:hover > a {color:#333}

  nav > ul.mainmenu > li.sub > a:after {float:right; margin: 2px 0 0 6px;}
  nav > ul.mainmenu li ul {display:none; text-align: left;position: absolute; top: 70px;background:#f5f5f5}
  ul.mainmenu li ul {top: 30px}
  nav > ul.mainmenu li:hover ul {display:block; z-index:2}
  nav > ul.mainmenu li ul li a {color:#928A77;font-size:15px; line-height: 34px; display: block;padding:0 20px}
  nav > ul.mainmenu li ul li a:hover {color:#fff;background:#928A77}

  body {font-size: 105%; line-height: 1.6}

  footer {font-size: 16px}
  #copyright div {line-height: 1.78}
  main {padding: 90px 0 0 0}
  #welcome h1 {margin-bottom: 70px}
  #welcome {padding: 0 0 90px 0}
}


@media screen and (min-width: 1240px) {
  #homeboxes > div {-webkit-justify-content:space-between; justify-content: space-between}
  #footer {padding:60px 0}
}

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

}
@media screen and (min-width: 1360px) {
  body {font-size: 112%}
  #menu {padding: 0 30px 0 350px;}
  ul.mainmenu > li > a {position: relative; font-size: 15px}
}