@font-face {
    font-family: Unicredit-Bold;
    src: url(../fonts/Unicredit-Bold.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: UniCredit-Regular;
    src: url(../fonts/UniCredit-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: UniCredit-Medium;
    src: url(../fonts/UniCredit-Medium.ttf);
    font-weight: normal;
    font-style: normal;
}

.text-right {text-align: right;}
.ingredient.f-de, .ingredient.f-de.visible {font-size: 1em;}

#menu li {
    display:block;
    width: 50px;
    height: 50px;
    margin: 10px;
    color: #2B2A29;
    background:#cda3d7;
    -webkit-border-radius: 10px 0 10px 0;
            border-radius: 10px 0 10px 0;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}
#menu li span {position: absolute; padding: 18px; pointer-events: none; font-family: 'Unicredit-Bold', Arial, sans-serif;}
#menu li.active{
    /* background:#2B2A29; */
    color: #cda3d7 !important;
    background:#656468;
    color: #2B2A29;
}
#menu li a{
    position: absolute;
    background:#2B2A29;
    height: 50px;
    -webkit-border-radius: 10px 0 10px 0;
            border-radius: 10px 0 10px 0; 
    text-decoration:none;
    color: #cda3d7;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}
#menu li.active a:hover{
}
#menu li:hover{
    background:#2B2A29;
}
#menu li a,
#menu li.active a{
    width: 200px;
    padding: 20px 18px 9px 70px;
    display: none;
    word-wrap: no-wrap;
}
#menu li:hover a,
#menu li:hover.active a{
    display: block;
}
#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 99999;
    padding: 0;
    margin:0;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
        
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
    text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
    font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q::before,q::after {
    content:'';
}
abbr,acronym { border: 0;
}



/* Custom CSS
 * --------------------------------------- */

html, * {
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    font-family: 'UniCredit-Regular', Arial, sans-serif;
    color: #fff;
    color: rgba(0,0,0,0.5);
}
h1{
    font-family: 'UniCredit-Bold', Arial, sans-serif;
    font-size: 2em;
}
h2{
    font-family: 'UniCredit-Bold', Arial, sans-serif;
    font-size: 1.6em;
}
h3{
    font-family: 'UniCredit-Medium', Arial, sans-serif;
    font-size: 1.4em;
}
p{
    font-size: 1.5em;
}
.graduated{
    background-size: cover;
    top:0;
}
.graduated,
.fullscreen{
    position: absolute;
    width:200%;
    height: 100vh;
    left: 0;
    z-index: 1;
    vertical-align: middle;
    text-align: center;
}
.fullwidth{
    position: absolute;
    width:200%;
    height: auto;
    left: 0;
    z-index: 1;
    vertical-align: top;
    text-align: left;
}
#extensions-text a{
    color: #333;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.9em;
}
#extensions-text a:hover{
    color: #fff;
}

#markup{
    margin: 15px 0;
}

p {font-size: 2.1vh; line-height: 3vh; margin: 1vh auto; text-align: justify;}

.brandcolor {
    color: #cda3d7 !important;
}

/* Section 1
 * --------------------------------------- */
.ms-left .sec-home .fullscreen {
    /* background: #2B2A29; */
    top: 0;
    /* background-image: url(../images/home-montagna.png); */
    /* background-position: bottom 100px center; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    /* width: 100%; */
    z-index: 9;
}

.ms-left .sec-home {
    background: #000;
}

.ms-left .sec-home .fullscreen.nomountaign {
    background-image:none;
    pointer-events: none;
}

.ms-left .sec-home .fleft {
    width: 50%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
.ms-left .sec-home .fright {
    width: 50%;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    background: #000;
}
.ms-left .sec-home .fbottom {
    position: absolute;
    bottom: 0px;
    background: #000;
    left: 0;
    right: 0;
    height: 9vh;
    padding: 3vh;
    text-align: center;
    font-size: 1em;
    color: #fff;
    z-index: 9999;
    width: 200vh;
}
.ms-left .sec-home .fbottom a {
    color: #fff;
}
/* .sec-home img { */
    /* margin: 24px 0 15px 0; */
/* } */
.sec-home {
    /* background: #000 url(../images/sfondo-sx.jpg); */
    /* background-repeat: no-repeat; */
    /* background-position: right 3px bottom 99px; */
    /* background-size: contain; */
}
.ms-right .sec-home {
    /* background: #000; */
}
h1.claim {
    color: #cda3d7;
    font-family: 'UniCredit-Regular', Arial, sans-serif;
    margin-top: 100px;
    left: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;    
}
h1.hlogo {
    margin-top: 100px;
    left: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
}
.ms-right .sec-home .content {
    z-index: 9;
    width: 100%;
    position: absolute;
    height: 100vh;
    top: 25vh;
    padding: 7vh;
    color: #fff;
}

.sec-home video {
    width: 100%;
    position: absolute;
    bottom: calc(5% + 100px);
    left: 0;
}

/* .sec-home .logo {width: 10rem; position: absolute; top: 75px; right: 50%; z-index: 10;} */
.sec-home .logo {width: 10rem; margin-right: 2rem; z-index: 10;}

.homesteps {
    padding: 10vh;
}    
.homestep {
    width: 33.333%;
    float: left;
    text-align: center;
    position: relative;
    bottom: -47vh;
    transition-duration: 2s;
}
.homestep img {max-width: 100%;}
.homestep.active {
    bottom: -18vh;
}

#hometext-right {opacity: 0; transition-duration: .2s;}
#hometext-right.visible {opacity: 1; transition-duration: 1s;}

#hometext-left {
    z-index: 9;
    width: 68vh;
    height: 15vh;
    opacity: 0;
    left: 17vh;
    position: absolute;
    top: 30vh;
    padding: 5vh;
    color: #cca3d6;
    border-top: 0;
    border-bottom: 0;
    transform: scale(.8);
    transition-duration: 1s;
}
#hometext-left.withborder {
    border-top: 2px solid #cca3d6;
    border-bottom: 2px solid #cca3d6;
}
#hometext-left img {
    width: 100%;
    margin-top: -4vh;
}
#hometext-left.visible {opacity: 1; transform: scale(1);transition-duration: 1s;}

#hometext-left h2, #hometext-left h4 {color: #fff;}
#hometext-left h2 span {color: #cca3d6;}
#hometext-left h4 {
    margin-left: 11.4vh;
    margin-top: 1vh;
}
/* Section 2
 * --------------------------------------- */
.sec-esperienza{
    background-image: url(../images/montagna-milano-left.png), url(../images/cielo-nuvole-i.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, right top;
    background-size: auto 50%, auto;
}
.ms-right .sec-esperienza{
    background: #fff url(../images/montagna-milano-right.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: auto 50%;
}

.ms-left .sec-esperienza .content{
    right: 10%;
    display:block;
    top: 10%;
    position: absolute;
}

.ms-left .sec-esperienza .content h2 {
    position: relative;
    margin: 20px auto;
    height: 70px;
    color: #cda3d7;
    text-align: right;
    text-shadow: 0 0 10px #ffffff;
}

.ms-left .sec-esperienza .content h2::after {
    content: "";
    position: absolute;
    height: 2px;
    border-top: 2px solid #cda3d7;
    top: 12px;
    margin-left: 10px;
    width: 600px;
}

.ms-right .sec-esperienza .content{
    display:block;
    top: 10%;
    position: absolute;
}

.ms-right .sec-esperienza .content h2 {
    padding-left: 10%;
    position: relative;
    margin: 20px 100px 20px auto;
    height: 70px;
    color: #cda3d7;
    text-align: left;
}
.ms-right .sec-esperienza .content h2 span {
    font-family: 'UniCredit-Regular', Arial, sans-serif;
    display: block;
    font-size: .8em;
    color: #000;
}
.ms-right .sec-esperienza .content h2::before {
    content: "";
    position: absolute;
    height: 2px;
    border-top: 2px solid #cda3d7;
    top: 12px;
    margin-right: 0;
    left: 0;
    width: 600px;
    width: 9%;
    right: 90%;
}

.ms-right .sec-esperienza .content h2::after {
    content: "\2022";
    position: absolute;
    height: 18px;
    top: -18px;
    font-size: 50px;
    text-align: right;
    width: 10%;
    right: 90%;
}

.ms-right .sec-esperienza .content .subcontent {
    position: absolute;
    left: 30%;
    margin-top: 40px;
}
.ms-right .sec-esperienza .content .subcontent p {font-size: 1.4em; color: #000;}
.ms-right .sec-esperienza .content .subcontent p strong {color: #cda3d7;}

.ms-right .sec-esperienza .logo-YR-simple-t {width: 40vh; margin-left: 10%; margin-top: 40px;}


@media all and (max-height: 768px){
    .ms-left .sec-esperienza .content h2, .ms-right .sec-esperienza .content h2 {height: 60px;}
    .ms-right .sec-esperienza .content h2 span {font-size: .7em;}
    .ms-right .sec-esperienza .logo-YR-simple-t {margin-top: 20px;}
    .ms-right .sec-esperienza .content .subcontent {margin-top: 10px; font-size: .7em;}
}
@media all and (max-width: 1280px){
    .ms-right .sec-esperienza {
        /*  background-position: left; */
    }
}
@media all and (max-width: 1024px){
    .ms-right .sec-esperienza .content, .ms-left .sec-esperienza .content {top: 5%;}
    .ms-right .sec-esperienza .content h2 {font-size: 1.3em;}
    .ms-right .sec-esperienza .content .subcontent {left: 20px; margin-top: 0;}
    .ms-right .sec-esperienza .content .subcontent p {font-size: 1em;}
    
    .ms-left .sec-trattamento .box-trattamento .trattamento-desc p {font-size: 1em; text-align: left; }
}

a.show-ingredient {color: #fff;}
.ingredient {display: none; transition-duration: 1s;}
.ingredient.visible {
    display: block;
    font-size: 1.4em;
    line-height: 1.2em;
    padding: 1em;
}
.sec-tecnologici .ingredient.visible {
    background-color: #01939f;
}
.sec-fitoderivati .ingredient.visible {
    background-color: #cf7be2;
}
@media all and (max-width: 1280px){
    .ingredient.visible {
        font-size: 1em !important;
        line-height: 1em !important;
        padding: 2em .5em;
    }
}
i.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin: 0 1em;
}

i.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

i.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

i.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

i.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* Section 3
 * --------------------------------------- */
.ms-left .sec-tecnologici{
 /* fallback */
  background-color: #fff;
}
.ms-right .sec-tecnologici{
    background-color: #00b1bf;
}

.ms-right .sec-tecnologici img{
    width: auto;
    max-width: 100%;
    max-height: 90%;
}

.sec-tecnologici h1{
    font-size: 1.3em;
}
.sec-tecnologici h1 span {
    width: 50%;
    display: inline-block;
    background: #00b1bf;
    border-radius: 0 20px 0 0;
    padding: 14px 10px 10px 100px;
    color: #fff;
}
.sec-tecnologici h1 a {
    position: absolute;
    left: 52%;
    top: 14px;
    color: #cda3d7;
} 
.sec-tecnologici h2{
    margin: 15px 0 0 0;
    color: #cd8a91;
    color: rgba(255,255,255,0.5);
}
.sec-tecnologici .content{
    display: block;
    top: 20%;
    box-sizing: border-box;
}
.sec-tecnologici .content .iat {
    background-color: #00b1bf;
    padding: 5vh;
    padding-left: 100px;
    height: 100vh;
    position: relative;
    border-radius: 0 50px 0 0;
    color: #fff;
}
@media all and (max-width: 1280px){
    .sec-tecnologici .content .iat p {
        font-size: 2vh;
        line-height: 2.8vh;
    }
}
/* Section 4
 * --------------------------------------- */
.ms-left .sec-fitoderivati{
 /* fallback */
  background-color: #fff;
}
.ms-right .sec-fitoderivati{
    background: #FEFEFE url(../images/dolomiti-nuvola.jpg);
    background-size: contain;
    background-position: center -40px;
    background-repeat: no-repeat;
}
.ms-right .sec-fitoderivati #btn-play {position: absolute; width: 100px; height: 100px; top: 1vh; right: 1vh;}
.ms-right .sec-fitoderivati img{
    width: 100%;
    margin-right: 10%;
}

.sec-fitoderivati h1{
    font-size: 1.3em;
}
.sec-fitoderivati h1 span {
    width: 50%;
    display: inline-block;
    background: #cda3d7;
    border-radius: 0 20px 0 0;
    padding: 14px 10px 10px 100px;
    color: #fff;
}
.sec-fitoderivati h1 a {
    position: absolute;
    left: 52%;
    top: 14px;
    color: #00b1bf;
} 
.sec-fitoderivati h2{
    margin: 15px 0 0 0;
    color: #cd8a91;
    color: rgba(255,255,255,0.5);
}
.sec-fitoderivati .content{
    display: block;
    bottom: 20%;
}
.ms-right .sec-fitoderivati .content {
    font-size: 2.4vh;
    position: absolute;
    bottom: 0;
    margin: auto 100px 0;
}
.ms-right .sec-fitoderivati .content h2 {color: #9C9D9D; font-family: 'UniCredit-Regular', Arial, sans-serif; font-weight: normal;}
.ms-right .sec-fitoderivati .content p {
    font-family: 'UniCredit-Regular', Arial, sans-serif;
    font-weight: normal;
    font-size: 2.8vh;
    width: 50vh;
}
.ms-right .sec-fitoderivati .content p strong {color: #cda3d7; font-family: 'UniCredit-Regular', Arial, sans-serif; font-weight: normal;}
.sec-fitoderivati .content .iat {
    background-color: #cda3d7;
    padding: 5vh;
    padding-left: 100px;
    height: 100vh;
    position: relative;
    border-radius: 0 50px 0 0;
    color: #fff;
}

.ms-right .sec-fitoderivati .content .subcontent {
    margin: 100px 0 30px;
}



/* Section 5
 * --------------------------------------- */
.ms-left .sec-trattamento {
 /* fallback */
  background-color: #fff;
}
.ms-right .sec-trattamento {
    background: #FEFEFE url(../images/face.jpg);
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
}

.ms-right .sec-trattamento img {
    width: 90%;
    margin-top: 20px;
}

.sec-trattamento h1 {
    color: #cda3d7;
    /* font-size: 1.4em; */
    /* padding: 20px 10px 0 100px; */
    padding-top: 3vh;
 }
.sec-trattamento h2 {
    margin: 15px 0 0 0;
    color: #cd8a91;
    color: rgba(255,255,255,0.5);
}
.sec-trattamento .content {
    display: block;
    top: 20%;
    box-sizing: border-box;
}
.ms-left .sec-trattamento .title, .ms-left .sec-trattamento .title p {
    text-align: right; font-style: italic;
}
.ms-left .sec-trattamento .content {width: 50%; padding-left: 20vh;}
.ms-left .sec-trattamento .content p {margin-left: 100px; font-size: 1.4em;}

.ms-left .sec-trattamento .box-trattamento {margin: 4vh auto; height: auto; overflow: hidden; opacity: 0; transform: scale(.8); transition-duration: 1s;}
.ms-left .sec-trattamento .box-trattamento.visible {opacity: 1; transform: scale(1);}
.ms-left .sec-trattamento .box-trattamento .trattamento-step {float: left; margin-right: 4vh;}
.ms-left .sec-trattamento .box-trattamento .trattamento-step img {width: 15vh;}
.ms-left .sec-trattamento .box-trattamento .trattamento-desc {}
.ms-left .sec-trattamento .box-trattamento .trattamento-desc img {height: 2.4vh; margin-top: 4vh;}

.sec-trattamento .content .iat {
    margin-top: 20px;
    padding: 50px;
    padding-left: 100px;
    height: 100vh;
    position: relative;
    border-radius: 0 50px 0 0;
    color: #000;
}

.sec-trattamento .hrfirst {
    margin-top: 30px;
    width: 50%;
    padding: 5px;
    background: #cda3d7;
}
.sec-trattamento .hrfirst h1 {
    padding-top: 0;
    color: #fff;
}
.sec-trattamento .hrfirst {
    width: 105%;
	position: relative;
    height: 36px;
	background: #cda3d7;
}
.sec-trattamento .hrfirst::after, .sec-trattamento .hrfirst::before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.sec-trattamento .hrfirst::before {
	border-left-color: #cda3d7;
	border-width: 18px;
	margin-top: -18px;
}



.sec-trattamento .hrsecond {
    margin-top: 30px;
    width: 40vh;
    padding: 5px;
    background: #cda3d7;
    border-radius: 0 30px 0 0;
}
.sec-trattamento .hrsecond h1 {
    padding-top: 0;
    color: #fff;
    padding-left: 120px;
}





.sec-trattamento .hrthird::before {
	border-left-color: #cda3d7;
	border-width: 18px;
	margin-top: -18px;
}

.sec-trattamento .hrthird {
    margin-left: 100px;
    padding: 5px;
    background: #cda3d7;
    width: calc(105% - 100px);
	position: relative;
    height: 36px;
	background: #cda3d7;
    border-radius: 0 0 0 30px;
}
.sec-trattamento .hrthird h1 {
    padding-top: 0;
    color: #fff;
    padding-left: 20px;
}
.sec-trattamento .hrthird::after, .sec-trattamento .hrthird::before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.sec-trattamento .hrthird::before {
	border-left-color: #cda3d7;
	border-width: 18px;
	margin-top: -18px;
}

.sec-trattamento .plus3 {width: 100%; margin-left: 100px; padding-top: 10px;}
.sec-trattamento .plus3 h2 {color: #cda3d7; font-family: 'UniCredit-Regular', Arial, sans-serif; margin: 0;}
.sec-trattamento .plus3 h2 span {display: inline-block; width: 200px; text-align: center; font-family: 'UniCredit-Medium', Arial, sans-serif;}

.sec-trattamento h2.first {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #cda3d7; font-weight: normal; margin: 0; margin-top: 10px; margin-left: 100px; text-align: left;}
.sec-trattamento h2.second {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #292927; font-weight: normal; margin: 0; text-align: center;}
.sec-trattamento h2.third {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #cda3d7; font-weight: normal; margin: 0; text-align: right;}


.ms-right .sec-trattamento .content {margin-left: 10%; margin-right: 5%;}
.ms-right .sec-trattamento .content .tratt-box1 {position: absolute; top: 0;}
.ms-right .sec-trattamento .content .tratt-box1 h2 {color: #6F6F6E; font-style: italic; font-family: 'UniCredit-Regular', Arial, sans-serif; font-weight: normal;     margin-top: 33px; font-size: 3vh;}
.ms-right .sec-trattamento .content .tratt-box1 h2 strong {color: #cda3d7; font-style: italic;}
.ms-right .sec-trattamento .content .tratt-box1 .test {color: #cda3d7; margin: 40px auto 20px; font-size: 2.4vh;}
.ms-right .sec-trattamento .content .tratt-box1 .test h4 {padding-top: 6vh;}
.ms-right .sec-trattamento .content .tratt-box1 .test div {}
.ms-right .sec-trattamento .content .tratt-box1 .test ul {margin-top: 4vh; margin-left: 14vh;}
.ms-right .sec-trattamento .content .tratt-box1 .test ul li {color: #1A1A18; padding: 5px 0;}
.ms-right .sec-trattamento .content .tratt-box1 .test img {float: left; width: 10vh; margin-right: 4vh; }

.ms-right .sec-trattamento .content .tratt-box2 {position: absolute; padding-right: 10vh; bottom: 5vh;}
.ms-right .sec-trattamento .content .tratt-box2 h3 {color: #cda3d7;}
.ms-right .sec-trattamento .content .tratt-box2 h3 span {display: block; margin-left: 20%;}







/* .content.product p {font-size: 2.4vh; line-height: 3.4vh; margin: 1vh auto 2vh;} */
.content.product p {font-size: 1.2vw; line-height: 1.6vw; margin: 1vh auto 2vh;}

.content.product .boxproduct {position: absolute; top: 0; padding: 0 20px 20px 100px;}
.content.product .boxproduct h2 {padding: 40px 20px 20px; background: #cda3d7; color: #fff; display: inline-block; font-size: 3vh;}
.content.product .boxproduct h3 {display: inline; float: right; padding: 45px 40px 0 0; font-size: 2.4vh; font-family: 'UniCredit-Regular', Arial, sans-serif; color: #cda3d7;}
@media all and (max-width: 1280px){
    #hometext-left {left: auto; top: 10%; height: auto;}
    .homesteps {padding: 10px 10px 10px 80px;}
    .homestep {padding: 10px;}
    .content.product .boxproduct h2 {padding: 20px; font-size: 2.4vh;}
    .content.product .boxproduct h3 {display: block; float: none; padding: 10px; font-size: 2vh;}
    .content.product .boxproduct .body {padding-top: 0 !important;}
    .content.product .step h3 {font-size: 1.1em !important; padding: 10px 10px 10px 100px !important;}
    .content.product .step h3 span {font-size: .8em;}
    .content.product .step .stepcontent {padding: 10px 10px 10px 110px !important;}
    .sec-tecnologici h1, .sec-fitoderivati h1 {font-size: 1em;}
    .sec-tecnologici .content .iat, .sec-fitoderivati .content .iat {padding-left: 75px; padding-top: 10px; border-radius: 0;}
    .ms-right .sec-trattamento .content .tratt-box1 .test ul {margin-top: 2vh;}
    .ms-left .sec-obiettivi .content .boxcontact h3 {font-size: 1.3em;}
    .ms-left .sec-obiettivi .content .boxcontact h3 strong {text-shadow: 0 0 15px rgb(255, 255, 255);}
}
.content.product .boxproduct .body {padding: 4vh 4vh 4vh 0;}
.content.product .boxproduct .body strong {color: #cda3d7;}

.content.product .step {position: absolute; bottom: 100px;}
.content.product .step h3 {padding: 20px 20px 20px 100px; color: #cda3d7;}
.content.product .step h3 span {font-family: 'UniCredit-Regular', Arial, sans-serif;}
.content.product .step .stepcontent {padding: 20px 40px 20px 160px; background: #cda3d7; color: #fff;}

.sec-prod-purifyng-sistem .content.product .step .stepcontent {background-image: url(../images/icon-sera-mattina.png); background-repeat: no-repeat; background-size: contain; background-position:  left 60px center;}
.sec-prod-siero-viso .content.product .step .stepcontent {background-image: url(../images/icon-notte.png); background-repeat: no-repeat; background-size: contain; background-position:  left 60px center;}
.sec-prod-crema-viso .content.product .step .stepcontent {background-image: url(../images/icon-mattina.png); background-repeat: no-repeat; background-size: contain; background-position:  left 60px center;}

.sec-prod-purifyng-sistem .content.product .step .stepcontent.english {background-image: url(../images/icon-sera-mattina-en.png);}
.sec-prod-siero-viso .content.product .step .stepcontent.english {background-image: url(../images/icon-notte-en.png);}
.sec-prod-crema-viso .content.product .step .stepcontent.english {background-image: url(../images/icon-mattina-en.png);}

.sec-prod-purifyng-sistem .content.product .step .stepcontent.de {background-image: url(../images/icon-sera-mattina-de.png);}
.sec-prod-siero-viso .content.product .step .stepcontent.de {background-image: url(../images/icon-notte-de.png);}
.sec-prod-crema-viso .content.product .step .stepcontent.de {background-image: url(../images/icon-mattina-de.png);}

.sec-prod-purifyng-sistem .content.product .step .stepcontent.es {background-image: url(../images/icon-sera-mattina-es.png);}
.sec-prod-siero-viso .content.product .step .stepcontent.es {background-image: url(../images/icon-notte-es.png);}
.sec-prod-crema-viso .content.product .step .stepcontent.es {background-image: url(../images/icon-mattina-es.png);}

.sec-prod-purifyng-sistem .content.product .step .stepcontent.fra {background-image: url(../images/icon-sera-mattina-fra.png);}
.sec-prod-siero-viso .content.product .step .stepcontent.fra {background-image: url(../images/icon-notte-fra.png);}
.sec-prod-crema-viso .content.product .step .stepcontent.fra {background-image: url(../images/icon-mattina-fra.png);}


.content.product ul.buttons {position: absolute; width: 100%; padding: 0 20px 20px 100px;}
.content.product ul.buttons li {display: inline-block !important; width: 30%;}
.content.product ul.buttons li a {position: relative; display: inline-block;}
.content.product ul.buttons li.left {}
.content.product ul.buttons li.center {text-align: center;}
.content.product ul.buttons li.right {text-align: right;}

.content.product ul.buttons li.left div {position: relative; left: calc(50% - 20px);}
.content.product ul.buttons li.center div {position: relative; left: calc(50% - 20px);}
.content.product ul.buttons li.right div {position: relative; left: calc(50% - 20px);}

.content.product ul.buttons .button div {
	border-color: #cda3d7 transparent;
	border-style: solid;
	border-width: 20px 20px 0px 20px;
	height: 0px;
	width: 0px;    
}
.content.product ul.buttons .button span {
    font-family: 'UniCredit-Regular', Arial, sans-serif;
    font-size: 2vh;
    display: inline-block;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #767676;
    border-radius: 30px;
    background: #767676;
    color: #fff;
}
.content.product .buttons .button.active span {
    color: #fff;
    background: #cda3d7;
    border-color: #cda3d7;
}

.ms-right .sec-prod-purifyng-sistem, .ms-right .sec-prod-siero-viso, .ms-right .sec-prod-crema-viso {
    background-image: url(../images/montagna-milano-left.png), url(../images/cielo-nuvole.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: left -6px bottom 94px, left -150px bottom 100px;
    background-size: auto 50%, auto;
}
.ms-right .product img {
    position: absolute;
    bottom: 10px;
    width: 90%;
}
.ms-right .product .tested {position: absolute; top: 50px; left: 50px; font-size: 2vh; text-align: center; font-family: 'UniCredit-Medium', Arial, sans-serif; color:#cda3d7; line-height: 3vh;}
.ms-right .product .tested span {display: inline-block; padding: 0 20px; width: auto; border: 1px solid #cda3d7; margin: 0; border-radius: 10px;}


.ms-left .sec-obiettivi {
    background: #FEFEFE url(../images/pag6-sfondo-sx.png);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
}
.ms-left .sec-obiettivi .content .boxcontact {text-align: right; top: 0;}
.ms-left .sec-obiettivi .content .boxcontact h2 {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #cda3d7; margin: 30px 20px;}
.ms-left .sec-obiettivi .content .boxcontact h2 strong {font-family: 'UniCredit-Medium', Arial, sans-serif;}
.ms-left .sec-obiettivi .content .boxcontact h3 {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #000; margin: 30px 20px;}
.ms-left .sec-obiettivi .content .boxcontact h3 strong {font-family: 'UniCredit-Medium', Arial, sans-serif;}
.ms-left .sec-obiettivi .content .boxcontact {
    position: absolute;
    bottom: 0;
    right: 5%;
}
.ms-left .sec-obiettivi .content .boxcontact div {
    position: absolute;
    width: 200px;
    bottom: 0;
    right: 5%;
    color: #fff;
}
.ms-left .sec-obiettivi .content .boxcontact img {width: 100%; margin-bottom: 10px;}
.ms-left .sec-obiettivi .content .boxcontact p {background: #cda3d7; text-align: center; margin: 0; padding: 10px; font-size: .9em;}

.ms-right .sec-obiettivi {
    background-image: url(../images/pag6-sfondo-dx.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

img.effetto-barriera {opacity: 0; transition-delay: 1s; transform: scale(.8); transition-duration: 2s;}
.active img.effetto-barriera {opacity: 1;transform: scale(1); }

img.piante {opacity: 0; transform: scale(.6); transition-duration: 2s;}
.active img.piante {opacity: 1;transform: scale(1); }

img.productimg {opacity: 0; transition-delay: .5s; transform: scale(.6); transition-duration: 1s;}
.active img.productimg {opacity: 1;transform: scale(1); }

.contactform {opacity: 0; transition-delay: 1s; transition-duration: 1s;}
.active .contactform {opacity: 1;}

#fixedelement {position: fixed; z-index: 999; width: 50%; padding: 2px; display: none;}
#fixedelement ul.menu-efficacia {position: absolute; right: 0; margin-top: 10vh; width: 36vh;}
#fixedelement ul.menu-efficacia li {height: 8.45vh;}
#fixedelement ul.menu-efficacia li h3 {padding: 1vh 0 1vh 3vh; border-radius: 20px 0 0 20px; transition-duration: .4s;}
#fixedelement ul.menu-efficacia li.active h3 {background: #fff;}
#fixedelement ul.menu-efficacia li h3 a {color: #fff; font-style: italic;}
#fixedelement ul.menu-efficacia li.active h3 a {color: #CBA2D7;}
#fixedelement ul.menu-efficacia li:hover h3 {
    padding-left: 4vh;
}

.ms-left .sec-efficacia {background: #CBA2D7;}
.ms-left ul.menu-efficacia {position: absolute; right: 0; top: 5%;}
.ms-left ul.menu-efficacia li {margin: 10px 0; padding: 10px 100px 10px 10px; border-radius: 20px 0 0 20px;}
.ms-left ul.menu-efficacia li.active {background: #fff;}
.ms-left ul.menu-efficacia li h3 a {color: #fff; font-style: italic;}
.ms-left ul.menu-efficacia li.active h3 a {color: #CBA2D7;}


.ms-right .sec-efficacia-1 .content,
.ms-right .sec-efficacia-2 .content,
.ms-right .sec-efficacia-3 .content,
.ms-right .sec-efficacia-4 .content {
    position: absolute;
    top: 0;
    padding: 5vh;
}
#rotating-text {margin-top: 5vh;}

.contentbottom {position: absolute; bottom: 0; width: 100%; bottom: -3px; left: 1px;}
.contentbottom img.fw {width: 100%;}

.beautystep {
    width: 33.333%;
    float: left;
    text-align: center;
    position: relative;
    padding:  0 4% 4% 4%;
    opacity: 0;
    transform: scale(.8);
    transition-duration: 1s;
}
.beautystep.visible {
    opacity: 1;
    transform: scale(1);
}
.beautystep img {width: 100%;}



.sec-efficacia-5 .box-efficacia {position: absolute; width: 100%; top: 0; padding: 6vh; height: 24vh;}
.sec-efficacia-5 h2.first {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #cda3d7; font-weight: normal; margin: 0; text-align: left;}
.sec-efficacia-5 h2.second {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #292927; font-weight: normal; margin: 0; text-align: center;}
.sec-efficacia-5 h2.third {font-family: 'UniCredit-Regular', Arial, sans-serif; color: #cda3d7; font-weight: normal; margin: 0; text-align: right;}

.sec-efficacia-5 .box-prodotti {height: 20vh; width: 100%; position: absolute; top: 24vh; left: 1px;}
.sec-efficacia-5 .box-prodotti div {width: 33.333%; float: left; padding: 2vh 6vh; background: linear-gradient(0deg, #ffffff 32.6%, #cba2d7 0%);}
.sec-efficacia-5 .box-prodotti p {width: 100%; padding: 3vh 6vh; font-size: 1.2em; height: auto; overflow: hidden;}

.efficacia-caratteristiche {width: 100%; position: absolute; bottom: 0; padding: 0 10vh 6vh;}

.ms-left .sec-distribuzione h3 {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 32vh;    
}
.ms-left .sec-distribuzione .content {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    height: 100vh;
    background: url(../images/milan-skyline-white.jpg);
    background-position: center bottom -18px;
    background-repeat: no-repeat;
    background-size: 100%;
    border-bottom: 3vh solid #cda3d7;
}
.ms-left .sec-distribuzione .content img {width: 20vh; margin-top: 10vh;}
.ms-right .sec-distribuzione .content .boxcontact {text-align: right; top: 0;}
.ms-right .sec-distribuzione .content .boxcontact {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.ms-right .sec-distribuzione .content .boxcontact .contact-info  {
    float: left;
    text-align: center;
    width: 33.333%;
    color: #cda3d7;
    bottom: 0;
}

.ms-right .sec-distribuzione .content .boxcontact img {width: 100%; margin-bottom: 10px;}
.ms-right .sec-distribuzione .content .boxcontact .contact-info div {
    position: absolute;
    bottom: 0;
}

.ms-right .sec-distribuzione .content .boxcontact .contact-info1 {
    position: absolute;
    bottom: 0;
    width: 33%;
    padding: 1vh;
    left: 0;
    text-align: center;
    font-size: 1.8vh;
}
.ms-right .sec-distribuzione .content .boxcontact .contact-info2 {
    position: absolute;
    bottom: 0;
    width: 33%;
    padding: 0 1vh;
    left: 33%;
    text-align: center;
    font-size: 1.8vh;
}
.ms-right .sec-distribuzione .content .boxcontact .contact-info2 strong {
    font-weight: bold;
    display: block;
    font-size: 1.4em;
}
.ms-right .sec-distribuzione .content .boxcontact .contact-info2 h3 {margin: 1vh auto;}
.ms-right .sec-distribuzione .content .boxcontact .contact-info3 {
    position: absolute;
    bottom: 0;
    width: 33%;
    padding: 1vh;
    left: 66%;
    text-align: center;
    font-size: 1.8vh;
}

.ms-right .sec-distribuzione .content .boxcontact img {width: 100%; margin-bottom: 10px;}
.ms-right .sec-distribuzione .content .boxcontact p {background: #cda3d7; color: #fff; text-align: center; margin: 0; padding: 4vh 0 1vh 0; font-size: .9em;}

/*
.ms-right .sec-distribuzione .content .boxcontact div {
    position: absolute;
    width: 200px;
    bottom: 0;
    right: 5%;
    color: #fff;
}*/


/*
.boxproduct .body p.first {opacity: 0; transition-delay: 1s; transition-duration: 1s;}
.active .boxproduct .body p.first {opacity: 1; }

.boxproduct .body p.second {opacity: 0; transition-delay: 1.5s; transition-duration: 1s;}
.active .boxproduct .body p.second {opacity: 1; }
*/



.colinst {color: #cda3d7 !important;}

.contactform {width: 70vh;}
.contactform .fields {padding: 10px;}
.contactform label {display: inline-block; width: 20%; vertical-align: top;}
.contactform .field {
    width: 70%;
    border: 1px solid #CBA2D7;
    padding: 10px;
}
.contactform .button {display: inline-block; background: #cda3d7; color: #fff; border: 0; padding: 10px;}
.contactform .disclaimer {font-size: .9em; line-height: 1.2em;}

#video {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    background: rgba(0,0,0,.9);
    transition-duration: .4s;
}
#video.visible {
    z-index: 99999;
    opacity: 1;
}
#video #video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99999;
    margin: 0 auto;
    width: 640px;
    overflow: hidden;
    margin-left: -320px;
    height: 500px;
    margin-top: -250px;    
}
#btn-stop {height: 20px; position: absolute; right: 0;}
#btn-stop a {color: #fff; float: right;}