/*
Theme Name: LogicOne
Author: the LogicOne team

*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

@font-face {
  font-family: "smd";
  src:
    url('fonts/smd.woff2?1') format('woff2'),
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

BODY {font-family: Lato, sans-serif;font-weight:300; font-size:110%; color: #000; margin: 0;padding:0;background:#fff; text-align:justify; line-height:1.5; -webkit-text-size-adjust: 100%}
a:link, a:visited, a:before, a:after, a *, a *:before, a *:after, input {text-decoration:none; transition: all 0.2s linear}
a:link, a:visited {color:#56A8D0}
a:hover {color:#cc66ff}

#footer a {color:#fff; text-decoration:underline}
#footer a:hover {text-decoration:none}

a.mtli_attachment {display:flex; justify-content:space-between; align-items:center;padding-left:70px !important}

/* form e img */
header, main, footer, figure, blockquote {display:block;margin:0}

body > header, footer, main {min-width:320px}
main {padding:40px 25px; margin:0 auto}

*, *: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}
h1, h2, h3, h4 {position: relative;margin:0;font-weight:700; line-height: 1; color:#56A8D0}

h1 {margin-bottom: 40px}
h2 {font-size:25px}
h3 {font-size:21px;}
h4 {font-size:16px;}

div.wpcf7 {margin-bottom:30px}
.wpgmza_map {margin-top:10px}
#cmplz-document {max-width: 100% !important}
.grecaptcha-badge {display:none !important}
.recaptcha {font-size:10px}

b, strong {font-weight: 500}
img {border:0;display:block; max-width: 100%; height:auto}
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}
.owl-stage {margin:0 auto}


/* 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;}


.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: #CCDFF2; color:#333; margin:0 5px; font-weight:500}
.pagination .nav-links > .current {background: #139369; color:#fff}

input[type="text"], input[type="number"], input[type="email"], input[type="submit"], textarea, select  {font-family: Lato, 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"] {border:0;height:40px;padding:0 15px; border-radius:5px; font-size:18px; text-transform:uppercase; cursor:pointer; background:#139369; color:#fff; font-weight:600}
input[type="submit"]:disabled, input[type="submit"]:disabled:hover, input[type="submit"]:disabled:hover {background:#ccc;color:#fff;cursor:text}
input[type="submit"]:hover {background:#CEB994; color:#333}
input[type="submit"]:active {background:#CCDFF2;}
::-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:marconi; content:'q'; display:block; color:#fff; font-size:15px; position:absolute; top:0; right:10px; line-height:34px; pointer-events: none}

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:#56A8D0 !important}

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

#top {position: absolute;top:0;width:100%;text-align: left}
#logo, #slide {position:relative}
#logo {z-index: 4;width:290px; padding:20px 20px 35px 20px; background: #fff; border-bottom-right-radius: 110px; border-top-right-radius: 15px 40px}
#headerimg img {width: 100%;height: auto}

#header {height: 400px}

#slide {margin:0 auto}
#slide a {width:100%}
#slide figure > div {height:100vh}
#slide figure > div:before {content:'';position: absolute; top:0; left:0;display:block;background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%);width:100%;height:100%}

.objectfit img {object-fit: cover; min-width: 100%; min-height: 100%; width: 100%; height: auto; max-width: 100%; max-height: 100%}
#slide figcaption {position: absolute; bottom:30%; left:5%;max-width: 85%;text-align: right}
#slide strong {position: relative; z-index: 1;color:#fff;font-size: 40px;line-height: 40px;font-weight: 200}

body > header > img {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 {display:block;font-family:marconi; content:'M';font-size:22px; width:40px;height:40px;line-height:40px; color:#fff; text-align:center}

.open-menu a#toggle:before {content:'X'; color:#56A8D0; font-size:20px}
a#toggle:hover:before {color:#C4975E}


footer {position:relative; width:100%; text-align:left; border-top-right-radius: 100px; padding:60px 25px 30px 25px; background: #5CADD6; text-align: center}

#footer {color:#fff; font-size: 15px; max-width: 1200px;margin:0 auto; text-align: left}
#footer h4 {color:#fff; text-transform: uppercase}
#footer img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#footer p {margin: 22px 0 0 0}


#credits {text-align: center; color:#fff; font-size: 20px}

.imgborder {position: relative; margin:20px auto; text-align: center}
.imgborder > div {margin:0 auto;display: inline-block; position: relative; padding: 15px 0 0 15px}
.imgborder img, .imgborder > div:before {border-radius: 0 60px 0 60px}
.imgborder > div:before {content: ''; background:  #39c; width:calc(100% - 15px); height:calc(100% - 15px); display: block; position: absolute; top: 0; left:0; z-index: -1}

#welcome {margin:0 auto;max-width: 1200px}

#laboratori {margin: 50px auto 0 auto; max-width: 1260px}
#laboratori h2 {border-right: 8px solid #c6f; height:80px;line-height:80px; padding-right: 40px; text-align: right}
#laboratori h3 {margin-bottom: 30px}
#laboratori > div:not(:first-child) {background: #DEF4FF; border-radius: 0 60px 0 60px; padding: 50px 30px; font-weight: 400; text-align: center; margin:30px 0 0 0}
#laboratori > div:not(:first-child) > div {margin:0 auto; display: inline-block;text-align: left}
.marker:before, .tel a:before {font-family: smd; color:#666; height:50px; line-height:50px; margin-right: 10px}
.marker:before {content:'m'; font-size: 50px}
.tel a:before {content:'t'; font-size: 40px}
.tel a {color:#000}
.tel a:hover {color:#666}
#laboratori > div > div > div, #laboratori > div > div > div > a {display: flex; justify-content: flex-start; align-items: center}
#laboratori > div > div > div {margin-top: 20px}

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

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

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

}

@media screen and (min-width: 480px) {
  .contatti {display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content: space-between}
  .contatti > div {width:30%}
}

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

  .readmore{position:relative; height: 300px;z-index: 2}
  .readmore > div {height: 210px; overflow: hidden}
  .readmore, .readmore:before {overflow:hidden}
  .readmore:after {position:absolute}
  .readmore.open:after{content:none}
  .readmore.open, .readmore.open > div {height:auto}
  .readmore.open {padding-bottom: 70px}
  .readmore .readmorebtn {position:absolute; bottom:20px; cursor: pointer; font-size:18px; z-index:2; height:34px; line-height:34px; color:#56A8D0; display: inline-block; text-transform: uppercase; text-align:center; white-space: nowrap; left: 50%;  transform: translateX(-50%); padding-right: 30px}
  .readmore.open .readmorebtn {top:auto; bottom:20px}
  .readmore .readmorebtn:before {content:'A'; font-family: marconi; font-size: 14px; transform: rotate(90deg);display: block;height: 34px;line-height: 34px; width: 20px;position: absolute;top: 0;right: 0;}
  .readmore.open .readmorebtn:before {transform: rotate(-90deg)}
}

@media screen and (min-width: 640px) {
    #laboratori {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap}
    #laboratori > div, #laboratori > div:not(:first-child) {width:46%; margin:2%}
     #laboratori h2 {margin-right: 30px}
    
  .content {padding:50px; /*background: #eee*/}

  .readmore .readmorebtn {display:none}

  }

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

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

}

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

}

@media screen and (min-width: 840px) {
.imgborder {float: right; margin:5px 0 0 30px}
     #footer {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap}
    #footer > div {width:50%}
	 #footer > div:last-child > div {display: flex; align-items: center; }
}

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

}

@media screen and (min-width: 900px) {
  h1 {font-size: 200%}
  .home h2 {font-size: 182%}
  main {padding: 70px 25px}
}

@media screen and (max-width: 1023px) {
#fmenu {position: absolute; top:-999999px; left:-999999px}
}

@media screen and (min-width: 1024px) {
   footer {padding: 80px 25px 50px 25px;
}
}
@media screen and (min-width: 1100px) {

}

@media screen and (max-width: 1199px) {
  .overlaybg {height:100%; width:100%; position:fixed;left:0;	top:0;z-index:4 !important;background:rgba(35,31,32,0.85)}
  /* push menu*/
  .menu {-webkit-transition: all 0.2s linear; transition: all 0.2s linear;position: fixed;  overflow: hidden; overflow-y: auto;height: 100%; top: 0; background-color: #fff; z-index: 10;opacity: 1; text-align:left; right: -100%;  width: 100%; padding-top: 40px}

  /* push menu*/
  /* push menu*/
  .menu ul {list-style: none; margin: 0;padding: 0}
  .menu > ul a {padding:0 20px; color: #56A8D0; font-size: 18px; display: block;line-height:50px; text-decoration: none;position:relative;text-transform: uppercase; border-bottom: 1px solid #eee; font-weight: 400}
  .menu ul li.open ul li a {background:#F7F7F7;color:#333; line-height:40px;text-transform: none}
  .menu ul li.open ul li a:hover {background:#56A8D0;color:#fff}

  .menu > ul {list-style: none; margin: 0;padding: 0}
  .menu > ul > li > a:hover, .menu > ul > li.open > a {background:#56A8D0;color:#fff; }
  .menu > ul li.menu-item-has-children > a:after {position:absolute; top:4px;right:20px; line-height:40px;height:40px; font-family:itslaw;transform: rotate(90deg);content:'a'; text-transform: none}
  .menu > ul li.menu-item-has-children.open > a:after {transform: rotate(270deg)}
  .menu > ul > li.open > a:after {color:#fff}
  .menu > ul li.menu-item-has-children a:hover:after {color:#fff}

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

  html.open-menu a#toggle {right:0}
  a#toggle {position:absolute; display: block;z-index:5; top:12px;right:20px}
  html.open-menu a#toggle {top:0}
  a#toggle span {position: absolute; top: -999999px; left: -999999px}

  html.open-menu {overflow: hidden}
  html.open-menu nav.menu {z-index: 4; right:0}
    
  #footer img {display: none}
}

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

  body {font-size: 120%}
  .overlaybg {display:none !important}

  #top nav.menu {position: absolute; top:60px;right:20px; z-index: 2}
  nav.menu > ul {line-height: 40px; display: flex; justify-content: center}
  nav.menu > ul > li > a {position: relative; color:#fff;font-size: 19px; font-weight: 400; display: block; text-decoration: none; line-height:40px; padding:0 15px; border-top: 1px solid transparent}
  nav.menu > ul > li > a:hover, nav.menu > ul > li.menu-item-has-children:hover > a {color:#fff;border-top: 1px solid #fff}
  nav.menu > ul li ul {display:none; text-align: left;position: absolute; top: 35px;background:#f7f7f7}
  nav.menu > ul li:hover ul {display:block; z-index:2; border-radius: 5px}
  nav.menu > ul li ul li a {color:#56A8D0;font-size:15px; line-height: 40px; display: block;padding:0 20px;}
  nav.menu > ul li ul li a:hover {color:#2c2c2c}

  #footer > div {width: 33.33333%}
    #footer > div:last-child {display: flex;justify-content: center; margin-bottom: 30px}
}


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

@media screen and (min-width: 1280px) {
  #header {height: 600px}
  .imgborder {margin:5px 0 0 60px}
  #laboratori > div, #laboratori > div:not(:first-child) {width:27.3333%; margin:3%}
  #laboratori h2 {height: 130px;line-height: 1;	display: flex;align-items: center}
}

@media screen and (min-width: 1360px) {
main {padding: 120px 0}
#laboratori {margin: 120px auto 0 auto}
}

@media screen and (min-width: 1600px) {
#header {height: 900px}
}