﻿@import url(fonts.css);

/* ==========================================================================
  Stili del Progetto
   ========================================================================== */

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #2c343b;
    line-height: 1.5em;
    font-size: 16px;
    margin: 0;
    padding: 0;
	overflow-x:hidden;
    background: #2c343b;
}

img {border: 0;}

/* sistema form */
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}
input {margin: 0 10px 0 0; color: #5e5e5e; vertical-align: middle; font-size: 9pt;}
textarea {border: 1px solid #bebebe; color: #666667; vertical-align: middle; height:80px; padding: 3px; font-size: 9pt;}
select {margin: 0 10px 0 0; padding: 3px; border: 1px solid #d6d6d6; color: #5e5e5e; vertical-align: middle; font-size: 9pt; text-transform: uppercase;}



.nocompiled {border: 1px solid #005bab !important; /* background: url(../images/ico_input_warning.png) center right no-repeat #fff /* !important;}
.nocompiled2 {padding: 0 17px 0 0; color: #005bab; /* background: url(../images/ico_input_warning.png) center right no-repeat */ !important;}

/**/

/*table { border-collapse: collapse;}*/

a {color: #a0a0a0; text-decoration: none; outline: none !important;}
a:hover {text-decoration: underline;}

p {font-size: 0.9em; margin: 0 0 1em 0;}


h1,h2,h3,h4,h5,h6 {font-family: OpenSansBold, Arial, Helvetica, sans-serif; font-weight: normal; color: #000; margin: 0 0 1em 0; line-height: 1em; padding:0; clear: both;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {text-decoration: none;}

h1{ font-size: 1.5em;}
h2{ font-size: 1.4em;}
h3{ font-size: 1.3em;}
h4{ font-size: 1.2em;}
h5{ font-size: 1.1em;}
h6{ font-size: 1em;}


.corporateColor {color: #ff0 !important;}

ol {margin:0; padding: 0; line-height:normal;}
ul {margin:0; padding: 0; line-height:normal;}
li {margin:0; padding: 0; line-height:normal;}

dl, dt, dd {margin:0; padding: 0;}

form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}

.nocompiled {border: 1px solid #f00 !important;}
.nocompiled2 {padding: 0 17px 0 0; color: #f00;}


select {
    padding: 3px 5px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    outline: none;
    border: 1px solid #c8c8c8;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    color: #8c8c8c;
    background: #fff;
    }
select.form-control { border-radius: 0px; }

/*button*/
button {
    padding: 3px 5px;
    outline: none;
    border: 1px solid #c8c8c8;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    background: #09b156;
}
button:hover {
    color: #09b156;
    background: #fff;
}

/*text area*/
textarea.form-control {border-radius: 0px;}


/*input text*/
input[type=text] {
    padding: 3px 5px;
    outline: none;
    border: 1px solid #c8c8c8;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    color: #8c8c8c;
    background: #fff;
}
input[type=text]:focus {}

/*input password*/
input[type=password] {
    padding: 3px 5px;
    outline: none;
    border: 1px solid #c8c8c8;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    color: #8c8c8c;
    background: #fff;
}
input[type=password]:focus {}


/*set icone*/
.icon-button { /*input */
    outline: none;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 16px;
    height: 16px;    
    text-indent: -9999px;
}

.icon-set { /*link href */
    display: block;
    float: left;
    margin: 0 3px 3px 0;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
}
/**/

.noborder {border: 0px solid #FFF !important;}
.marginclear {margin-right: 0px !important;}
.clear {clear: both !important;}
.floatSx {float: left; }
.floatDx {float: right; }
.title-hide {text-indent: -9999px; font-size: 0; height: 0; margin: 0;}
#yt-embeded {width: 100% !important; }
#googlemap {width: 100% !important; }



header *, .fullCat *, .content *, footer * {
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}

/* ==========================================================================
  HEADER
   ========================================================================== */
header {
	width: 100%;
	height: auto;
}
nav.top {height: 90; background: #fff;}
nav.corporate {position: relative; min-height: 65px; background: #0c437c;}

@media (min-width: 992px) {
    .corporate.collapse {
        display: block!important;
        height: auto!important;
        overflow: visible!important;
        visibility: visible!important;
    }
}

/*toggle menu*/
#nav-toggle {display: block; position: absolute; width: 50px; height: 50px; top: 20px !important; padding: 16px; right: 16px; background: #0c437c; }
#nav-toggle { cursor: pointer; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; height: 3px; width: 18px; background: #fff; position: absolute; top: 23px; display: block; content: ''; }
#nav-toggle:hover span, #nav-toggle:hover span:before, #nav-toggle:hover span:after { background: #fff; }
#nav-toggle span:before { top: -7px; }
#nav-toggle span:after { top: 7px; }
#nav-toggle.active span, #nav-toggle.active span:before, #nav-toggle.active span:after { background: #fff; }

/*logo*/
.logo {
    float: left;
    height: 90px;
    padding-top: 15px;
}
/*menu azienda*/
.serviceMenu {
    position: absolute;
    right: 180px;
    top: -54px;
}
.serviceMenu ul {list-style: none;}
.serviceMenu ul li { float: left;  margin: 0 0 0 20px;}
.serviceMenu ul li a { color: #2c343b; font-size: 0.9em; text-transform: uppercase; font-family: 'Titillium Regular', Arial, Helvetica, sans-serif;}
.serviceMenu ul li a:hover { color: #0c437c; text-decoration: none;}

/*social + lan*/
.social {
    position: absolute;
    right: 15px;
    top: -55px;
}

/*icone social*/
.social ul {list-style: none}
.social ul li {
    float: left;
    margin: 0 5px 0 0;
}
.social ul li a {
    display: block;
    width: 24px;
    height: 24px;
    text-indent: -9999px;
}
.social ul li a.mtchannel {background: url(../images/ico-mtchannel.png) left top no-repeat}
.social ul li a.youtube {background: url(../images/ico-youtube.png) left top no-repeat}
.social ul li a.facebook {background: url(../images/ico-facebook.png) left top no-repeat}
.social ul li a.twitter {background: url(../images/ico-twitter.png) left top no-repeat}
.social ul li a.lan.ita {margin-left:20px; background: url(../images/flag-ita.png) left top no-repeat}
.social ul li a.lan.eng {background: url(../images/flag-eng.png) left top no-repeat}
.social ul li a:hover {
    opacity:0.5;
    filter:alpha(opacity=50);
}

/*menu navigazione principale*/
.mainMenu ul {
    list-style: none;
    min-height: 65px;
}
.mainMenu ul li {float: left; margin-right: 10px;}
.mainMenu li.dropdown.open {background-color: #089c5c;}
.mainMenu li.dropdown { background: url(../images/ico-arrowdw.png) right 20px no-repeat;}
.mainMenu li.dropdown a {padding: 13px 40px 13px 10px;}
.mainMenu li a { display: block; height: 65px; padding: 13px 10px; font-size: 0.95em; color: #fff; text-transform: uppercase; font-family: 'Titillium Regular', Arial, Helvetica, sans-serif;}
.mainMenu ul li a:hover,
.mainMenu ul li a:active,
.mainMenu ul li a:focus {color: #fff; text-decoration: none !important;}
.dropdown-menu {
  left: 0px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 250px;
  padding: 10px;
  margin: 0;
  font-size: 14px;
  background-color: #089c5c;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
}
.dropdown-menu li {float: none; font-size: 1em; border-left: none;}
.dropdown-menu li a {height: auto; padding: 5px; color: #fff; }
.dropdown-menu li a:hover {color: #000 !important; background: none !impotant;}

.mainMenu ul li.last {float: right; margin-right: 0; margin-left: 20px;}
.mainMenu ul li.last a {padding: 25px 0 13px 40px; height:65px; font-family: 'Titillium Regular', Arial, Helvetica, sans-serif;}
.mainMenu ul li.last.mtc a {background: url(../images/ico-mtchannel.png) left 15px no-repeat;}

.dropdown-backdrop {display: none !important}

@media (max-width: 1199px)  {
    .mainMenu ul li { margin: 0px;}
}

@media (max-width: 991px)  {
    .logo {width: 200px; padding-top: 20px;}
    .logo img { width: 100%;}
    .companyMenu {clear: both; margin: 30px 0; width: 100%}
    .companyMenu ul {float: none;}
    .companyMenu li {float: left; margin-left: 15px; font-size: 0.9em;}
    .companyMenu li a {color: #fff;}
    .companyMenu li a:hover {color: #000;}

    /*.social {display: none}*/
    .social {position: static}
    .social ul li:last-child {padding: 15px 0;}
    .serviceMenu {position: static}
    .serviceMenu ul li {float: none; margin: 0; padding: 5px 0;}    
    .serviceMenu ul li a {color: #fff;}    
    
    .mainMenu {float: none; width: 100%;}
    .mainMenu ul li {font-size: 1.1em; margin: 0; float: none; border-bottom: 1px solid #089c5c;}
    .mainMenu ul li a,
    .mainMenu li.dropdown a {height: auto; float: none; padding: 10px 0 10px 0; background-position: 10px 50%}
    .mainMenu li a:hover, .travelMenu li.icon-menu a:hover {background-color: #089c5c;}
    .mainMenu ul li.last {float: none; margin-left: 0;}
    .mainMenu ul li.last a {padding: 10px 0 10px 0; background: none !important;}

    .open .dropdown-menu { position: static;  float: none;  border: 0;}
    .open .dropdown-menu li {float: none; font-size: 1em; border: none;}
    .open .dropdown-menu li a {padding: 5px; color: #fff; background: none;}
    .open .dropdown-menu li a:hover {color: #fff;}
}

/* ==========================================================================
    Generici
   ========================================================================== */
.max{width:100%;}
.btn-link{display:inline-block; padding: 20px 30px; font-size:0.85em; color:#fff; text-transform:uppercase; border-radius:30px; box-shadow: 0 0 15px rgba(8,158,93,0.5); background:#089e5d;}
.btn-link:hover{text-decoration:none; color:#089e5d; background:#fff;}


/* ==========================================================================
    HOME PAGE
   ========================================================================== */
/*Hero img*/
.hero-img-home {position: relative; background: #000;}
.hero-img-home img{position: relative; width: 100%}

/* Lista 
  ========================================================================== */
.content.h-cat {padding: 100px 0; background: #fff;}
.content.h-cat h4{margin-bottom:70px; text-align:center; color:#0c437c; font-size:1.6em}
.content.h-cat h4 span{font-size:1em}

.prodList {list-style: none; float: left; width: 100%; margin: 0!important; padding: 0 !important;}
.prodList li {position:relative; top:0; margin-bottom: 30px; padding: 0 30px; overflow:visible}
.prodList li .img {position: relative; padding: 10px; text-align: center;}
.prodList li .img img {width: 100%; position:relative; z-index:2}
.prodList li .img .circle {position: absolute; z-index: 1; top: 0; left: 50%; transform:translate(-50%,0); width: 80%; height: auto;}
.prodList li .img .circle circle {fill:url(#cGradient)}
.prodList li .txt {position: relative; padding: 15px 0; min-height: 110px; overflow: hidden; text-align: center;}
.prodList li .txt h2 {font-weight:bold; text-transform:uppercase; font-size: 1.2em; color:#089e5d; margin-bottom: 0.5em}
.prodList li .txt h3 {font-family: OpenSansSemibold, Arial, Helvetica, sans-serif; text-transform:uppercase; font-size: 0.8em; color:#089e5d; margin-bottom: 0.5em}

/*variante visualizzazioni catalogo*/
.prodList li .zoom{position:absolute; width:115%; left:50%; top:0; opacity:0; transform: translate(-50%, -5%); padding: 15px; background:trnasparent;}
.prodList li .zoom .img .circle circle {fill:url(#cGradientH)}
.prodList li:hover > .img,
.prodList li:hover > .txt{opacity:0;}

.prodList li:hover .zoom{z-index:1; position:absolute; opacity:1;}
.prodList li .zoom .txt p {font-size: 1.2em;}

@media(max-width: 991px){
.prodList li .zoom{display:none}
.prodList li:hover > .img,
.prodList li:hover > .txt{opacity:1;}
}

/* ==========================================================================
    PAGE
   ========================================================================== */

/*Content
=========================================*/

#content {
    width: 100%;
    float: left;
    padding: 0 0 0 0;
}

    section.insights {
        width: 100%;
        min-height: 700px;
        height:auto !important;
        height: 700px;        
        float: left;
        padding: 80px 0 80px 0;
        background: #fff;
    }
    .insights.bgtech {background: url(../images/bg-tech.png) left top no-repeat #fff !important;}
    .insights.bgproddett {padding: 0 !important;}
    section.insights h4 {text-align: center; color: #089c5c; font-size: 2em;}
    section.insights h3 {color: #089c5c;}
    section.insights h2 {color: #089c5c;}


    /*colonne pagina*/
    .box-1-3 { width: 300px; float: left; margin: 0 30px 30px 0;}
    .box-1-4 { width: 210px; float: left; margin: 0 40px 40px 0;}
    .box-2-3 { width: 630px; float: left; margin: 0 30px 30px 0;}
    .box-max { width: 960px; float: left; margin: 40px 0 40px 0;}


/*Intestazioni Pagina
=========================================*/

.mainBanner-page  { padding: 50px 0; background: #089c5c}
.mainBanner-page .divTitle { float: left;}

.mainBanner-page h1 {
    text-transform: uppercase;
    color: #fff;
    font-size: 1.7em;
    font-family: 'Titillium Thin', Arial, Helvetica, sans-serif;
    margin: 0;
}

.optionContent {}
.selectOption {
    width: 100%;
    padding: 10px; 
    text-transform: uppercase;
    color: #fff;
    font-size: 0.8em;
    cursor: pointer;
    background: url(../images/ico-arrowdw.png) center right no-repeat rgba(0,0,0,0.2);
}
.selectOption:hover { background-color: rgba(0,0,0,0.3);}

.dropdownOption {
    position: absolute;
    z-index: 100;
    display: none;
    top: 30px;
    left: 0;
    width: 100%;
    padding: 15px;
}
.dropdownOption .inner { padding: 15px; background: #066e41;}

.dropdownOption ul { list-style: none; }
.dropdownOption ul li { font-size: 0.8em;  padding: 4px 0; color: #fff; text-transform: uppercase; }
.dropdownOption ul li a { color: #fff; }


/*PAGINE
=========================================*/

/*Approfondimento */
section.insights article {
    width: 630px;
    float: left;
}
section.insights aside {
    width: 250px;
    float: right;
}

/*Lista prodotti*/
    .prodList {list-style: none; width: 100%; float: left; margin: 0 0 20px 0;}
    .prodList li {
        min-height: 360px;
        text-align: center;
    }
    .prodList li img {width: 100%; max-width: 100% }
    .prodList li h3  {
        padding: 0 15px;
        line-height: normal;
        font-size: 1em !important; 
        font-family: OpenSansSemibold;
     }
    .prodList li h3 a  {color: #089c5c;}
    .prodList li h3 a  span{display: block; text-align: center; color: #f00;}


/*Dettaglio prodotti*/
    .prodDett {
        width: 100%;
        padding: 80px 0;
        background: #e7e7e7;
    }
    .prodDett .figure {text-align:center;}
    .prodDett .figure img{width: 100%;}
    .prodDett .figcaption {text-align: justify;}
    .prodDett .figcaption h3 {
        font-size: 1.4em !important; 
        font-family: OpenSansSemibold;
        text-align: left;
    }
    .prodDett .figcaption h2 {
        font-size: 1.4em !important; 
        color: #089c5c !important;
        margin-bottom: 0.5em;
        font-family: OpenSansSemibold;
    }
    .prodDett .figcaption h6 {
        color: #fff !important;
        font-family: OpenSansSemibold;
    }

    .docdownload {
        list-style: none;
        padding: 10px;
        margin: 20px 0 0 0;
        background: #0c437c;
    }
    .docdownload li {padding: 0 0 8px 30px;}
    
    .docdownload li.link-pdf {background: url(../images/ico-pdf.png) center left no-repeat}
    .docdownload li.link-foto {background: url(../images/ico-foto.png) center left no-repeat}
    .docdownload li.link-video {background: url(../images/ico-video.png) center left no-repeat}
    .docdownload li.link-info {background: url(../images/ico-contact.png) center left no-repeat}
    .docdownload li a {
        color: #fff;
        font-size: 0.75em;
        text-transform: uppercase;
    }
    .docdownload li.link-info a {color: #fff;}

    a.advised {
        display: block;
        margin: 20px 0 0 0;
        padding: 5px 15px 5px 70px;
        color: #fff;
        font-size: 0.75em;
        text-align: left;
        font-family: OpenSansSemibold, Arial, Helvetica, sans-serif;
        background: url(../images/ico-mtchannel-rev.png) 12px 50% no-repeat rgba(0, 199, 220, 0.5);
    }
    a.advised:hover { opacity: 0.7; filter:alpha(opacity=70); text-decoration: none;}
    a.advised strong {font-size: 1.3em;}

/*caratteristiche*/
    .deeping {padding: 80px 0; text-align: justify;}
    .deeping h4 {text-align: left !important;}
    .morePhoto img {width: 100%; max-width: 100%}

/*Pannello info*/
#msgCustom {
	position: absolute;
	z-index:10;
	display: none;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    padding: 20px;
    background: #089c5c;
}

/*Lista news*/
.listNews {list-style: none;}
.listNews li {
	padding: 10px 0;
	width: 100%;
	float: left;
	border-bottom: 1px solid #089c5c;
}
.listNews li a {
	font-size: 1.2em;
	font-weight: bold;
	color: #089c5c;
}
.listNews li img {
	float: left;
	width: 300px;
	margin-right: 30px;
}

/*Dettaglio news*/
.newsDetSx img {width: 100%; max-width: 100%; height: auto;}
.newsDetDx {}

 @media (max-width: 771px)  {
	.listNews li img {width: 100%;}
}
    
    
/*=======================================
/*Footer
=========================================*/

footer {
	width: 100%;
	float: left;
	line-height: 1.3em;
	padding: 30px 0;
	font-size: 0.85em;
	color: #fff;
	background: #2c343b; 
}
footer strong{color: #089c5c; text-transform: uppercase;}
footer a {color: #fff;}
footer a:hover {color: #089c5c;}
footer img{max-width: 100%; }

/**strutturazione*/
.footerNav {list-style: none; padding: 0 0 20px 0;}
.footerNav li {margin: 0 0 1em 0;  text-transform: uppercase;}
    

#welcomeMsg {overflow: auto; text-align: center;}

#modalInfoProd {font-size: 0.8em; line-height: normal;}


/*Credits*/
#modalCredits .modal-dialog {
    width: 260px;
    font-size: 0.8em;
}