/**
 * This file should get overwritten if Method 1 is used. If Method 2 is chosen,
 * remove this comment and start adding your styles to this file.
 */

/* CSS Document */
@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700,800,900');

/* SYSTEM */

.wide {
    margin: 0 -9999px;
    padding: 0px 9999px;
    position: relative;
    background-color: #FFFFFF;
}

.wide.odd { background-color: #ebecec; }

.wide.even { background-color: #e20721; }

.padding-vertical { padding-bottom: 1em; padding-top: 1em; }
.padding-vertical2 { padding-bottom: 2em; padding-top: 2em; }
.padding-left { padding-left: 15px; }
.padding-right { padding-right: 15px; }
.padding-top { padding-top: 1em; }
.padding-bottom { padding-bottom: 1em; }
.padding-top2 { padding-top: 2em; }
.padding-bottom2 { padding-bottom: 2em; }
.nopadding-top { padding-top: 0;}
.nopadding-bottom { padding-bottom: 0;}
.margin-top { margin-top: 1em; }
.margin-bottom { margin-bottom: 1em; }
.nomargin-top { margin-top: 0;}
.nomargin-bottom { margin-bottom: 0;}
.nomargin { margin: 0;}
.alpha { padding-left: 0px; }
.omega { padding-right: 0px; }

.table { margin: 0; padding: 1em 0; }

.grid-flex {
    width: 100%;
    float: left;
    position: relative;
    display: block;
}

.row-full {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

#page { 
    overflow: hidden;
/*  background-color: #003c84;
    -webkit-appearance: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  box-shadow: 5px 5px 20px #666666;
  margin: 50px 0 20px;*/
}

/* DEFAULT */

body {
    background: none no-repeat scroll 0 0 #FFFFFF;
    font: 17px/1.2 Helvetica,Arial,sans-serif;
    font-family: 'Muli', sans-serif;
    font-weight: 400;
    color: #0e0c14;
    margin: 0px 0px;
}

h1, h2, h3, h4, h5, h6, p { 
    font-family: Helvetica,Arial,sans-serif;
    font-family: 'Muli', sans-serif;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #0e0c14;
    line-height: 1.2;
}

h1, .h1 { font-weight: 300; font-size: 3em; line-height: 1.2; } /*64*/

h1.title, .h1.title { font-weight: 300; font-size: 5em; line-height: 1; } 

h2, .h2 { font-weight: 300; font-size: 2.2em; line-height: 1.1; } /*48*/

h3, .h3 { font-weight: 300; font-size: 1.55em; line-height: 1.2; } /*32*/

h4, .h4 { font-size: 1.15em; line-height: 1.2; } /*24*/

h5, .h5 { font-size: 0.86em; line-height: 1.2; } /*18*/

h6, .h6 { font-size: 0.76em; line-height: 1.2; } /*16*/

p, ul { 
    font-family: 'Muli', sans-serif; /*21*/
    font-size: 1em;
    color: #0e0c14;
    line-height: 1.3;
    font-weight: 400;
    margin-top: 0px;
}

ul.bullet-image {  list-style: outside url("../images/bullet2.png") none; padding-left: 2em; }
ul.bullet-image li { color: #FFFFFF; font-size: 0.8em;  margin-top: 1em; }

ul.list-unstyled {  list-style: outside none none; padding-left: 2em; }
ul.list-bullet { padding-left: 1.5em; list-style: outside none none;  }
ul.list-bullet li { display: block; margin-bottom: 0.3em; }
ul.list-bullet li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e258";
    font-family: 'Glyphicons Halflings';
    font-size: 1em;
    float: left;
    margin-top: 4px;
    margin-left: -1.1em;
    color: #005573;
}

p.big { font-size: 1.3em; }

.thin { font-weight: 100!important; }
.extra-light { font-weight: 200!important; }
.light { font-weight: 300!important; }
.normal { font-weight: 400!important; }
.medium { font-weight: 500!important; }
.semi-bold { font-weight: 600!important; }
.bold { font-weight: 700!important; }
.extra-bold { font-weight: 800!important; }
.ultra-bold { font-weight: 900!important; }


/* STYLE */

.cover, .img-cover img {

    width: 100%;
    height: 50vw;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    object-position: left center;
    object-position: center top;

}

a, img { border: 0 none; transition: all 0.25s ease-in-out 0s; }

a:link, a:visited, li a:link, li a:visited {  color: #e20721; text-decoration: none; }

a:hover, a:focus, li a:hover { color: #2c234a; outline: none; }

a:active, li a:active, a.active, li a.active { color: #2c234a;  }

a.negative:hover, a.negative:focus, li a.negative:hover { color: #FFFFFF; outline: none; }

a.negative:active, li a.negative:active, a.negative.active, li a.negative.active { color: #FFFFFF;  }

.marker, .form-required, .request { color: #FFFFFF; }

* { cursor: url("../images/icon_cursor.png") 25 25, auto; }

a:hover,
a:hover img {  cursor: url("../images/icon_cursor_hover.png") 15 15, auto; }



.evidenza { color: #e20721; }
.rosso { color: #e20721; }
.ciano { color: #3dfcfc; }
.dblu { color: #2c234a; }
.dgray { color: #666666; }
.white { color: #FFFFFF; }
.black { color: #000000; }
.text { color: #0e0c14; }

.bggray { background-color: #F4F5F5; }

.fprimary { font-family: 'Muli', sans-serif; }

strong,b { font-weight: 700; }

span.sup { font-size: 70%; position: relative; top: -0.5em; }

sub { font-size: 70%; position: relative; top: 2px; }

.btn { border: none; padding: 0.6em 1em 0.8em; }

/*https://www.cssmatic.com/gradient-generator*/
.gradient-hor { 
    background: #020203;
    background: -moz-linear-gradient(left, #020203 0%, #2c2249 50%, #020203 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #020203), color-stop(50%, #2c2249), color-stop(100%, #020203));
    background: -webkit-linear-gradient(left, #020203 0%, #2c2249 50%, #020203 100%);
    background: -o-linear-gradient(left, #020203 0%, #2c2249 50%, #020203 100%);
    background: -ms-linear-gradient(left, #020203 0%, #2c2249 50%, #020203 100%);
    background: linear-gradient(to right, #020203 0%, #2c2249 50%, #020203 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020203', endColorstr='#020203', GradientType=1 );
}

/*https://www.cssmatic.com/gradient-generator*/
.gradient-hor-negative { 
    background: #2c2249;
    background: -moz-linear-gradient(left, #2c2249 0%, #020203 50%, #2c2249 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #2c2249), color-stop(50%, #020203), color-stop(100%, #2c2249));
    background: -webkit-linear-gradient(left, #2c2249 0%, #020203 50%, #2c2249 100%);
    background: -o-linear-gradient(left, #2c2249 0%, #020203 50%, #2c2249 100%);
    background: -ms-linear-gradient(left, #2c2249 0%, #020203 50%, #2c2249 100%);
    background: linear-gradient(to right, #2c2249 0%, #020203 50%, #2c2249 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2249', endColorstr='#2c2249', GradientType=1 );
}


.esagono  { background: transparent url("../images/tasto_esagono.png") scroll no-repeat center center / cover; padding: 1em 2em; padding: 1.3em 4em; }

.shine { color: #FFFFFF !important; text-shadow: #3dfcfc 0px 0px 5px; }
a.shine { color: #FFFFFF !important; text-shadow: none; }
a.shine:hover { text-shadow: #33ffff 0px 0px 5px; }


/*HEADER*/
/*https://codepen.io/mattgrosswork/pen/jrdwK*/
.visual-video img.logo { }
.visual-video img.logo-shine { position: absolute; top: 0; left: 10px; z-index: -1; }

.visual-video  p.video { margin: 0; line-height: 0; }
.visual-video #video-background {
    background: #020203 url('../images/img_video.jpg.jpg')  no-repeat scroll top center / cover;
    position: relative;
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: -100;
}
.visual-video .box-overlay { 
    background: transparent url('../images/video-motivo.png')  repeat scroll top center ;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
}

.visual-video .box-overlay .row1 .logo_xguide { text-align: right; margin-top: 1em; }
.visual-video .box-overlay .row1 h1 { }
.visual-video .box-overlay .row1 p { }

.visual-video .box-overlay .row2 { margin-top: 20%; position: absolute; bottom: 0; width: 1170px; }
.visual-video .box-overlay .row2 .box-richiedi { position: absolute; left: 0; padding: 0; top: 2.5em; }
.visual-video .box-overlay .row2 .box-richiedi h6 span { position: relative; top: 1em; }

.visual-video .box-overlay { }

/*YTVIDEO*/
.YTvideo .box-custom { position: relative; right: 0; width: 585px; float: right; padding-left: 30px; padding-right: 30px; }
.YTvideo .box-video { padding: 0; text-align: right; }
.YTvideo .spacing { padding: 0.5em 0 0; }
.YTvideo .box-custom h6 { padding-bottom: 0.5em; border-bottom: 1px solid red; margin-bottom: 0.5em; }

/*PAZIENTI*/
.pazienti {}

/*SLIDER*/
.slider { background: #FFFFFF url("../images/slider_fascia_esagono.png") scroll no-repeat top center / cover;  min-height: 37em; }
.slider .box-header h3 { position: relative; left: 9em; top: 2.5em; }
.slider .box-footer h3 { position: relative; left: 8em; top: 1.5em; }

/* SLIDER SWIPER */

.slider .swiper-slide { background: #2c234a; height: auto; }
.slider .swiper-slide.noslide { background: transparent; }
.slider .swiper-slide .caption { padding: 1em 0.5em 1.5em; text-align: left;  }

/*.slider .swiper { padding-right: 30px; }*/

.slider .swiper-container { margin-top: 6em; } 
.slider .swiper-pagination,
.slider .swiper-scrollbar { display: none; }

.swiper-slider .swiper-slider-next {  background-image: none;  right: 10px;  }

.swiper-controls .swiper-prev,
.swiper-controls .swiper-next {
    background: #e20721;
    color: #FFFFFF;
    font-size: 2em;
    text-align: center;
    padding: 0.4em 0.5em 0.5em;
    width: 2em;
    height: auto;
/*    position: absolute;*/
/*    top: 5em;*/
/*    left: 20%;*/
    position: relative;
    top: 8em;
    left: 1.5em;
    z-index: 2;
    cursor: pointer;
    cursor: url("../images/icon_cursor_hover.png"), auto;
/*    line-height: 1;*/
}

.swiper-controls .swiper-next { background-color: black; top: 3em; top: 8em; }

.swiper-controls .swiper-prev:hover,
.swiper-controls .swiper-next:hover { opacity: 0.9; }


/*RICHIEDI*/
.richiedi .row-full { background: #000000 url("../images/richiedi_fascia_gradiente.png") scroll no-repeat top center / cover;  }
.richiedi .box-scarica { 
    position: absolute;
    top: 45%;
    left: -1.5em;
    left: 0;
    padding: 0em 6em;
    top: 15em;
}
.richiedi .box-strillo { 
    border-left: 2px solid #e20721;
    padding-left: 1em;
    margin-top: 9em;
    margin-left: 10em;
}
.richiedi .box-tasto { margin-top: 4em; cursor: default; }
.richiedi .box-social { margin: 1em 0 2em; }
.richiedi .box-social .box-icon { 
    text-align: right;
    width: auto;
    float: right;
    margin: 10px 0 0 10px;
}

.richiedi .box-social .box-icon .icon:hover { opacity: 0.7; }


.richiedi .hsforms { margin-top: 2em; }
.richiedi .hsforms label,
.richiedi .hsforms input,
.richiedi .hsforms select  { 
  font-family: 'Muli', sans-serif;
  font-weight: 300;
}

.richiedi .hsforms label { 
  font-family: 'Muli', sans-serif;
  color: #FFFFFF;
  font-size: 0.8em;
  margin-top: 0.5em;
}

.richiedi .hsforms ul { 
  list-style-type: none;
  padding: 0.5em 0;
  padding-left: 0em;
  margin: 0;
}

.richiedi .hsforms .hs-submit { text-align: center; }

.richiedi .hsforms .hs-button  { 
  background: transparent url("../images/tasto_esagono.png") scroll no-repeat center center / cover;
  padding: 1em 5em;
  color: #FFFFFF;
  border: 0;
}

/*FOOTER FIRST*/
.footer-first .logo_biocare { text-align: right; }

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

.img-responsive { display: inline-block; }


    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 300px) {

        body { font-size: 17px; }

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

        body { font-size: 18px; }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

        body { font-size: 19px; }

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

        body { font-size: 20px; }

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

        body { font-size: 21px; }

    }


    /*==========  Non-Mobile First Method  ==========*/


    /* Large Devices, Wide Screens LG */
    @media only screen and (max-width : 1400px) {

        /*HEADER*/
        .visual-video #video-background { max-width: 100vw; }

        /*YTVIDEO*/
        .YTvideo .box-custom { right: unset; width: 100%; float: left; padding-left: 15px; padding-right: 15px; }
        .YTvideo .spacing { padding: 10px 0 0;  }
        .YTvideo .cover { min-height: 22em; }

    }

    /* Large Devices, Wide Screens LG */
    @media only screen and (max-width : 1200px) {

        h1, .h1 {  font-size: 2.8em; }

    }

    /* Medium Devices, Laptop MD*/
    @media (min-width: 992px) and (max-width: 1199px) { 

        /*HEADER*/
        .visual-video .box-overlay .row2 { width: 970px }

        /*PAZIENTI*/
        .pazienti .row-full h3 { font-size: 1.4em; } 

        /*SLIDER*/

        .slider .box-header h3 { top: 2em; }
        .slider .box-footer h3 { top: 1em; margin: 1em 0; }

        .slider { min-height: 32em; }
        .slider .swiper-slide .caption { padding-bottom: 1em; }
        .slider .swiper-slide .caption p { font-size: 0.9em; }

        .slider .swiper-container { margin-top: 5em; } 
        .swiper-controls .swiper-prev, .swiper-controls .swiper-next { top: 6em; left: 1em; }

        /*RICHIEDI*/
        .richiedi .box-scarica {  padding: 0em 4em; top: 15em; }
        .richiedi .box-strillo { margin-left: 6em; }



    }

    /* Medium Devices, Desktops MD*/
    @media only screen and (max-width : 992px) {



    }

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {

        h1, .h1 { font-size: 2.3em; }

        /*HEADER*/
        .visual-video { overflow: hidden; }
        .visual-video .box-overlay .row2 { width: 750px }
        .visual-video .box-overlay { height: 30em; }

        /*YTVIDEO*/
        .YTvideo .box-custom h2 { font-size: 1.7em; }
        .YTvideo .box-custom h3 { font-size: 1.4em; }
        .YTvideo .box-custom p { font-size: 0.9em; }

        /*PAZIENTI*/
        .pazienti .bullet-image { padding-bottom: 2em; }

        /*SLIDER*/
        .slider .box-header h3 { top: 1em; }
        .slider .box-footer h3 { left: 5em; top: 0;  margin: 1em 0; }

        .slider { min-height: auto;  background-size: contain; }
        .slider .swiper-slide .caption { padding-bottom: 1em; }
        .slider .swiper-slide .caption p { font-size: 0.9em; }

        .slider .swiper-container { margin-top: 5em; } 
        .swiper-controls .swiper-prev, .swiper-controls .swiper-next { top: 6em; left: 1em; }

        /*RICHIEDI*/
        .richiedi .box-scarica { padding: 0em 3em; top: 10em; }
        .richiedi .box-strillo { margin-left: 0em; margin-top: 3em; }
        .richiedi .esagono { padding: 1em 2em; }

    }

    /* Small Devices, Tablets SM*/
    @media only screen and (max-width : 767px) {

        /*HEADER*/
        .visual-video .box-overlay .row2 { width: 100% }

        .visual-mobile .logo_xguide { margin-top: 1em; }
        .visual-mobile { height: 28em; overflow: hidden;  max-height: 28em; }
        .visual-mobile h1 { font-size: 2em; margin-bottom: 1em; }
        .visual-mobile .box-richiedi { position: absolute; left: 0; padding: 0; top: 2.5em; }
        .visual-mobile .box-richiedi h6 { font-size: 1em; }
        .visual-mobile .box-richiedi h6 span { position: relative; top: 1em; }

        /*YTVIDEO*/
        .YTvideo .box-custom h2 { font-size: 1.7em; }
        .YTvideo .box-custom h3 { font-size: 1.4em; }
        .YTvideo .box-custom p { font-size: 0.9em; }
        .YTvideo .box-custom h6 { margin-bottom: 1em; }

        /*PAZIENTI*/
        .pazienti .bullet-image { padding-bottom: 2em; }

        /*SLIDER*/
/*        .slider { min-height: auto; max-height: 37em; overflow: hidden; background-size: auto; background-position: top left; }*/
        .slider {
            margin-top: 1em;
            min-height: auto;
            max-height: 34em;
            overflow: hidden;
            background-size: 150%;
        }

        .slider .box-header h3 { top: 0.5em; left: 0; text-align: center; }
        .slider .box-footer h3 { left: 0; top: -5em; margin: 1em 0; text-align: center; }

        .slider .swiper-container { margin-top: 5em; }
        .swiper-controls .swiper-prev, .swiper-controls .swiper-next { top: 6em; left: 1em; }

          /*RICHIEDI*/
        .richiedi .box-scarica { padding: 2em 1em 1em;  top: 0;    position: relative; }
        .richiedi .box-strillo { margin-left: 1em; margin-top: 1em; }
        .richiedi .box-social { margin: 2em 0; }
        .richiedi .box-social .box-icon { text-align: center; width: 33%; float: left; margin: 10px 0; }
        .richiedi .esagono { padding: 1em 2em; }

        /*FOOTER FIRST*/
        .footer-first .logo_xguide { text-align: right; }
        .footer-first .logo_biocare { text-align: center; }

    }

    /* Mobile Large, Extra Small Devices, Phones XS*/ 
    @media only screen and (max-width : 480px) {

    }

    /* Mobile Medium, iPhone Retina */ 
    @media only screen and (max-width : 375px) {


    }

    /* Mobile Small, Custom iPhone Retina */ 
    @media only screen and (max-width : 320px) {

        .richiedi .esagono { padding: 1em 1.8em; font-size: 0.9em; }
        .richiedi .box-strillo br { display: none; }
    }

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }


@media (max-width: @screen-xs-max) {  }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {  }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {  }
@media (min-width: @screen-lg-min) {  }