/**
* Style
**/
body{
    font-size: 18px;
}
h1{
    font-size: 1.12em;
}
h3{
    font-size: 0.80em;
}
h4{
    font-size: 0.67em;
}

/**
* Debug styles
**/
.debug-on #intro,
.debug-on #manufacturing-sizes,
.debug-on #specialist-recommendation,
.debug-on #about-company
{
    background: pink;
}

.debug-on #about-filters,
.debug-on #documents,
.debug-on #about-napkin,
.debug-on #copyright
{
    background: gray;
}


/**
* 4th layout
**/
#milk-spot{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('../images/milk-spot.png');
    background-repeat: repeat;
    background-position: 0 0;
    z-index: -9999;
}
/**
* 3rd layout
**/
#milk-drops{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('../images/milk-drops.png');
    background-repeat: repeat;
    background-position: 0 0;
    z-index: -999;
}

/**
* 2nd layout
**/
#milk-jets{

}
#milk-jet-center{
    position: absolute;
    top: 290px;
    left: 0;
    height: 1200px;
    width: 100%;
    background: url('../images/milk-jet-center.png');
    background-repeat: no-repeat;
    z-index: -999;
}

#milk-jet-right{
    position: absolute;
    top: 1750px;
    right: 0;
    height: 800px;
    width: 100%;
    background: url('../images/milk-jet-right.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: -999;
}

/**
* 1st layout
**/
#slides{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

#slides div{
    position: relative;
    width: 100%;
    background-size: 100% auto;
}

#milk-jug{
    background: url(../images/milk-jug.png) no-repeat top center;
    /* background-size: auto 1000px; */
    height: 1800px; /*** Manipulate with block height  ***/
}

#milk-complex{
    background: url(../images/milk-complex.png) no-repeat top center;
    /* background-size: auto 1000px; */
    height: 2100px; /*** Manipulate with block height  ***/
}

#specialist-recommends{
    background: url(../images/specialist-recommends.png) no-repeat top center;
    /* background-size: auto 800px; */
    height: 1700px; /*** Manipulate with block height  ***/
}

#milk-hand{
    background: url(../images/milk-hand.png) no-repeat top center;
    /* background-size: auto 800px; */
    height: 1000px;
}

/**
* Content
**/
#content{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-shadow: 1px 1px 1px black;
}

/*** Intro ***/
#intro{
    padding-top: 180px;
    padding-bottom: 300px; /*** Manipulate with text height  ***/
}
    #material-title{
        text-transform: uppercase;
        font-weight: bold;
        color: #F2C029;
        padding-bottom: 30px;
        font-size: 1.25em; /* 56px */
    }

    #intro .products{
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.625em;/* 28px; */
        padding-bottom: 30px;
        margin-bottom: 0;
    }

/*** About filters ***/
#about-filters{
    padding-bottom: 350px; /*** Manipulate with text height  ***/
}

    #filter-name{
        text-align: center;
    }

    #filter-description{
        text-align: center;
        padding-bottom: 25px;
    }

/*** Sizes ***/
#manufacturing-sizes{
    padding-bottom: 200px; /*** Manipulate with text height  ***/

}
    #manufacturing-sizes-name{
        padding-bottom: 30px;
    }
    #special-order-name{

    }

/*** Documents ***/
#documents{
    padding-bottom: 400px; /*** Manipulate with text height  ***/
}
    #documents-name{
        padding-bottom: 30px;
        text-align: center;
    }

/*** Recommendations  ***/
#specialist-recommendation{
    padding-bottom: 300px; /*** Manipulate with text height  ***/
}
    #specialists-name{

    }

    #video-block{
        display: table;
    }

    #video-block a{
        position: relative;
        display: block;
    }
    #video-block a .play-video{
        display: none;
        position: absolute;
        left: 48%;
        top: 40%;
    }
    #video-block a:hover .play-video{
        display: block;
    }
    #video-block a img{
        max-width: 100%;
    }

/*** About napkin ***/
#about-napkin{
    padding-bottom: 250px; /*** Manipulate with text height  ***/
}
    #napkin-name{

    }
    #napkin-description{
        padding-top: 30px;
        padding-bottom: 30px;

    }

/*** About company ***/
#about-company{
    padding-bottom: 50px; /*** Manipulate with text height  ***/
}
#about-company h3{
    padding-top: 20px;
}
#about-company p,
#about-company h1,
#about-company h3{
    margin-bottom: 10px;
}

/*** Copyright ***/
#copyright{
    padding-top: 50px; /*** Manipulate with text height  ***/

}

/**
* Styles
**/
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.wow {
    visibility: hidden;
}
.margin-bottom-reset{
    margin-bottom: 0;
}
.text-uppercase{
    text-transform: uppercase;
    font-weight: bold;
}

/**
* Animated
**/
.animated-40{
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
}

/**
* Header
*/
.container-header{
    background-color: #0895ac;
    /* background-color: rgba(0,0,0,0.1); */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    min-height: 70px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}
/*** Main menu ***/
.nav-main{
    float: right;
    text-transform: uppercase;
    font-size: 18px;
    font-family: Roboto Condensed, Arial, Helvetica, sans-serif;
    margin-bottom: 0;
    font-weight: bold;
    text-shadow: 0 1px 1px #111;
}
.nav-main li{
    position: relative;
    display: block;
    float: left;
    margin-bottom: 0;
}
.nav-main li a{
    color: #f5f5f5;
    padding: 27px 10px;
    text-decoration: none;
    display: block;
}
.nav-main li a:hover{
    background: rgba(0,0,0,0.2);
}

/* 2nd level */
.nav-main ul {
    display: none;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
    position:absolute;
    margin-top:0;
    margin-left:0;
    top: 100%;
}

.nav-main li:hover > ul {
    display: block;

}

.nav-main ul {
    background-color: #0895ac;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    /* width: 100%; */
    /*
    background: #006666;
    background: linear-gradient(top, #006666 0%, #0B9090 100%);
    background: -moz-linear-gradient(top, #006666 0%, #0B9090 100%);
    background: -webkit-linear-gradient(top, #006666 0%,#0B9090 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 6px;
    list-style: none;
    position: relative;
    z-index: 999;
    */
}
.nav-main ul:after {
    content: ""; clear: both; display: block;
}

/* 1nd level menu */
.nav-main ul li {
    display: block;
    width: 100%;
    /*
    float: left;
    text-align: left;
    */
    /* background: url("../img/template/nav-border.png") no-repeat 0 50%; */
}
.nav-main ul li:hover {
    /*
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    */
}
.nav-main ul li:hover a {
    color: #fff;
}

.nav-main ul li a {
    display: block;
    /* padding: 25px 40px; */
    text-decoration: none;
    text-shadow: 0 1px 1px #111;
    color: #f5f5f5;
    padding: 15px 10px;
}

.nav-main ul li:last-child,
.nav-main ul li:last-child a,
.nav-main ul li:last-child:hover,
.nav-main ul li:last-child a:hover{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/**
* Content
**/
.phone-number{
    font-size: 0.80em; /* 36px; */
}
.phone-number .country{
    font-size: 0.45em; /* 20px; */
}
.phone-number .operator{
    font-size: 0.625em; /* 28px; */
    padding: 0 4px;
}
.phone-number .number{

}
.address a, .email{
    font-size: 0.71em; /* 32px; */
}
.address a, #copyright a{
    color: #f5f5f5;
}
#copyright a{
    text-shadow: none;
    font-size: 0.35em;
}




/*** Boxes ***/
.boxes{
    border-radius: 25px;
}
.boxes .shadow{
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.boxes a{
    /*
    background-size: 110%;
    */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    border: 0;
    margin: 0;
    padding: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;

    text-decoration: none;

    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.boxes a .zoom-in{
    display: none;
    background: url("../images/zoom-in.png") 50% 54% no-repeat #000;
    top:0;
    left:0;
    position: absolute;
    opacity: .5;
    width: 100%;
    height: 100%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
/*
.boxes.documents, .boxes.documents a, .boxes.documents a .zoom-in{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
*/
.boxes a:hover {
    /* background-size: 120%; */ /* 110%; */
    /* opacity: 0; */
}

.boxes a:hover img{
    opacity: 0.2;
}

.boxes a:hover .zoom-in{
    display: block;
}

.boxes .icon{
    margin-bottom: 0;
    display: block;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    height: 200px;
}

.boxes .text {
    font-size: 0.34em; /* 16px; */
    display: block;
    padding: 15px 10px;
    background: #0895ac;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    color: white;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#box-1 a{
    background-image: url("../images/icons/box-1.jpg");
}

#box-2 a{
    background-image: url("../images/icons/box-2.jpg");
}

#box-3 a{
    background-image: url("../images/icons/box-3.jpg");
}

/*** Documents ***/
#box-4 a{
    background-image: url("../images/documents/1.jpg");
}

#box-5 a{
    background-image: url("../images/documents/2.jpg");
}

#box-6 a{
    background-image: url("../images/documents/3.jpg");
}

#box-4 a, #box-4 .icon,
#box-5 a, #box-5 .icon,
#box-6 a, #box-6 .icon{
    height: 500px; /* 440px */
}

/*** Napkin ***/
#box-7 a{
    background-image: url("../images/icons/box-7.jpg");
}

#box-8 a{
    background-image: url("../images/icons/box-8.jpg");
}

#box-9 a{
    background-image: url("../images/icons/box-9.jpg");
}

/*** Sizes ***/
.size{
    float: right;
}
.producer{
    float: left;
}
.size, .producer{
    background: #09adc8;
    cursor: pointer;
    border-radius: 10px;
    display: block;
    margin: 0 20px 15px 0;
    text-align: center;

    padding: 5px 10px;
    font-size: 0.45em;

    box-shadow: 0 0 10px rgba(0,0,0,0.5);

    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;

    font-smooth: never;
    -webkit-font-smoothing : none;
}

.size:hover, .producer:hover,
.size.active, .producer.active{
    background: #0895ac;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.size.disable, .producer.disable{
    opacity: 0.6;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);

}

/*** Sounds ***/
.volume-control{
    min-width: 30px;
    text-align: center;
}

/*** Modal ***/
.mfp-content{
    color: #222;
}
#dialog-box {
    background: white;
    padding: 20px 30px;
    text-align: left;
    max-width: 1000px;
    margin: 40px auto;
    position: relative;
    /* border-radius: 10px; */
}
#dialog-box p, #dialog-box ol, #dialog-box ul{
    font-size: 18px;
}
#dialog-box h4{
    font-size: 26px;
}
#dialog-box p.comment{
    /*
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
    */
    /*
    position: absolute;
    top: 0;
    */
    background: rgba(0,0,0,0.2);
    padding: 10px 0px;
    left: 0;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 16px;
    z-index: 9999;
    cursor: none;
    /*
    color: #f5f5f5;
    text-shadow: 0 1px 1px #111;
    */
    margin-bottom: 0;
}
#dialog-box img{
    /* border-radius: 10px; */
}
#dialog-box .zooming-image{
    margin-bottom: 2.5rem;
    /*
    max-height: 200px;
    max-width: 270px;
    */
}
#dialog-box .img-responsive{
    width: 100%;
}





@-webkit-keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.hvr-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:active {
    -webkit-animation-name: hvr-pulse-grow;
    animation-name: hvr-pulse-grow;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

/* Bob */
@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

.hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

/* From 1680px to 1920px */
@media (max-width: 1920px) {

}

/* From 1600px to 1680px */
@media (min-width: 1600px) {
    /* Content */
    #intro {
        padding-top: 250px;
        padding-bottom: 330px;
    }
    #material-title{
        padding-bottom: 100px;
    }
    #about-filters {
        padding-bottom: 400px;
    }
    #manufacturing-sizes {
        padding-bottom: 150px;
    }
    #manufacturing-sizes-name{
        padding-bottom: 20px;
    }
    #documents-name{
        padding-bottom: 30px;
    }
    #documents {
        padding-bottom: 350px;
    }
    #specialist-recommendation{
        padding-bottom: 250px;
    }
    #napkin-description{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #about-napkin {
        padding-bottom: 250px;
    }
    #about-company {
        padding-bottom: 10px;
    }
    #copyright {
        padding-top: 10px;
    }

    #milk-jets{

    }
    #milk-jet-center{
        top: 400px;
        /* background-size: auto; */
        background-size: 65%;
    }

    #milk-jet-right{
        top: 2100px;
        background-size: 28%;
    }

    /* Sliders */
    #milk-jug{
        height: 2100px;
    }
    #milk-complex{
        height: 2200px;
    }
    #specialist-recommends{
        height: 1900px;
    }
    #milk-hand{
        height: 1400px;
    }
}

/* From 1440px to 1600px */
@media (min-width: 1440px) {
    .boxes .text{
        font-size: 0.3em;
    }
    #milk-jets{

    }
    #milk-jet-center{
        /* top: 300px; */
        /* background-size: auto; */
        background-size: 65%;
    }

    #milk-jet-right{
        top: 2100px;
        background-size: 28%;
    }
    #milk-complex{
        height: 2300px;
    }
    #documents {
        padding-bottom: 450px;
    }
    #specialist-recommends{
        height: 1950px;
        padding-bottom: 350px;
    }
    #milk-hand{
        height: 1200px;
    }
}

/* From 1366px to 1440px */
@media (min-width: 1366px) {
    #milk-jets{

    }
    #milk-jet-center{
        top: 300px;
        /* background-size: auto; */
        background-size: 70%;
    }

    #milk-jet-right{
        top: 1890px;
        background-size: 25%;
    }

    #specialist-recommends{
        padding-bottom: 100px;
        height: 1900px;
    }
    #milk-hand{
        height: 1150px;
    }
}

/* From 1024px to 1366px */
@media (max-width: 1366px) {

}

/* From 768 to 1024px */
@media (max-width: 1024px) {
    #milk-jets{
        display: none;
    }
    /* Content */
    #intro {
        padding-top: 130px;
        padding-bottom: 110px;
    }
    #material-title{
        padding-bottom: 70px;
    }
    #about-filters {
        padding-bottom: 200px;
    }
    #manufacturing-sizes {
        padding-bottom: 160px;
    }
    #manufacturing-sizes-name{
        padding-bottom: 0;
    }
    #documents-name{
        padding-bottom: 10px;
    }
    #documents {
        padding-bottom: 170px;
    }
    #specialist-recommendation{
        padding-bottom: 100px;
    }
    #napkin-description{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #about-napkin {
        padding-bottom: 120px;
    }
    #about-company {
        padding-bottom: 10px;
    }
    #copyright {
        padding-top: 10px;
    }

    /* Sliders */
    #milk-jug{
        height: 1200px;
    }
    #milk-complex{
        height: 1500px;
    }
    #specialist-recommends{
        height: 1200px;
    }
    #milk-hand{
        height: 750px;
    }
}

/* From 640 to 768px */
@media (max-width: 768px) {
    /* Content */
    #intro {
        padding-top: 150px;
        padding-bottom: 110px;
    }
    #material-title{
        padding-bottom: 60px;
    }
    #about-filters {
        padding-bottom: 120px;
    }
    #manufacturing-sizes {
        padding-bottom: 60px;
    }
    #manufacturing-sizes-name{
        padding-bottom: 0;
    }
    #documents-name{
        padding-bottom: 10px;
    }
    #documents {
        padding-bottom: 120px;
    }
    #specialist-recommendation{
        padding-bottom: 40px;
    }
    #napkin-description{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #about-napkin {
        padding-bottom: 120px;
    }
    #about-company {
        padding-bottom: 10px;
    }
    #copyright {
        padding-top: 10px;
    }

    /* Sliders */
    #milk-jug{
        height: 1050px;
    }
    #milk-complex{
        height: 1300px;
    }
    #specialist-recommends{
        height: 900px;
    }
    #milk-hand{
        height: 600px;
    }
}

/* From 480 to 640px */
@media (max-width: 640px) {
    /* Content */
    #intro {
        padding-top: 140px;
        padding-bottom: 100px;
    }
    #material-title{
        padding-bottom: 40px;
    }
    #about-filters {
        padding-bottom: 40px; /**/
    }
    #manufacturing-sizes {
        padding-bottom: 10px;
    }
    #manufacturing-sizes-name{
        padding-bottom: 0;
    }
    .size, .producer{
        float: none;
    }
    #documents-name{
        padding-bottom: 10px;
    }
    #documents {
        padding-bottom: 30px;
    }
    #specialist-recommendation{
        padding-bottom: 40px;
    }
    #napkin-description{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #about-napkin {
        padding-bottom: 20px;
    }
    #about-company {
        padding-bottom: 10px;
    }
    #copyright {
        padding-top: 10px;
    }

    /* Sliders */
    #milk-jug{
        height: 1750px;
    }
    #milk-complex{
        height: 2700px;
    }
    #specialist-recommends{
        height: 1650px;
    }
    #milk-hand{
        height: 500px;
    }
}

/* From 0 to 480px */
@media (max-width: 480px) {
    /* Content */
    #intro {
        padding-top: 80px;
        padding-bottom: 20px;
    }
    #material-title{
        padding-bottom: 20px;
    }
    #about-filters {
        padding-bottom: 10px;
    }
    #manufacturing-sizes {
        padding-bottom: 10px;
    }
    #manufacturing-sizes-name{
        padding-bottom: 0;
    }
    .size, .producer{
        float: none;
    }
    #documents-name{
        padding-bottom: 10px;
    }
    #documents {
        padding-bottom: 10px;
    }
    #specialist-recommendation{
        padding-bottom: 10px;
    }
    #napkin-description{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #about-napkin {
        padding-bottom: 20px;
    }
    #about-company {
        padding-bottom: 10px;
    }
    #copyright {
        padding-top: 10px;
    }

    /* Sliders */
    #milk-jug{
        height: 1550px;
    }
    #milk-complex{
        height: 2700px;
    }
    #specialist-recommends{
        height: 1520px;
    }
    #milk-hand{
        height: 500px;
    }
}