/**
 * Valmet Rollcovers application
 * main.css
 * @author Samuli Partanen
 * Company: Pardco Group Oy
 * Update Johannes Harju 10.10.2019
 */

@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,500,700);

html,
button,
input,
select,
textarea {
    color: #222;
}

a{
    text-decoration: none;
}

html {
    line-height: 1.4;
    height: 100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

body {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 100%; 
    font-family: 'Maven Pro', sans-serif;
}

body, html{
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 500;
}



/* HEADER */
.header-container, .footer-container, .main-container{
    width: 100%;
    min-width: 768px;
    float: left;
}
.main-content{
    position: relative;
    width: 100%;
    min-width: 768px;
    float: left;
}
.papermachine-image img{
    width: 100%;
    height: auto;
}
.main-title{
    margin: 20px 0 0 0;
}

.header-logo{
    float: right;
    margin: 3px 0;
	
}

/* NAVIGAATIO */
#navigation{
    float: left;
}
#navigation .nav{
    padding: 0;
    list-style: none;
}

#navigation .nav li{
    display: inline-block;
}

#navigation .nav li a{
    color:#fff;
    display: block;
    line-height: 1.125em;
    padding: 10px 18px;
    background: #4c4d4f;
}

#navigation .nav li a:hover, #navigation .nav li.active a{
    background:#1f9122;
}

/* CONTACT US */
#navigation_c{
   float: left;
   position:relative;
   top: -10px;
}
#navigation_c .nav{
    padding: 0;
    list-style: none;
}

#navigation_c .nav li{
    display: inline-block;
	
}

#navigation_c .nav li a{
    color:#1f9122;
    display: block;
   line-height: 1.125em;
    padding: 2px 8px;
    background: #DCDCDC;
	
}

#navigation_c .nav li a:hover, #navigation .nav li.active a{
    background:#1f9122;
	color:#fff;
}

/* SLIDER NAVIGAATIO */
.slick-dots{
   position: relative!important;
   bottom:0!important;
}

.slick-dots li{
    float: left;
    margin: 0!important;
    height: auto!important;
    width: auto!important;
}

.slick-dots .slick-active .tab, .slick-dots .tab:hover{
    background: #e27208;
}

.slick-dots li .tab{
    line-height: 1.125em;
    background:#008bab;
    color:#fff;
    padding: 10px 18px;
    margin: 2px;
}
.slick-dots li .tab:first-letter{
     /* text-transform: uppercase; */
}

/* PAPER MACHINE IMAGE */
.papermachine-image{
    position: relative;
}

/* HOTSPOT */
.hotspot {
    background: rgba(31, 145, 34, 0.6);
    height: 58px;
    width: 58px;
    border: 2px solid #4c4d4f;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
}

.red{
    background: rgba(255, 0, 18, 0.6);
}

.hotspot:hover, .hotspot.active, .hotspot.active-other{
    background: rgba(226, 114, 8, 0.6);
}

.hotspot.active .info, .info.active{
    visibility: visible;
    z-index: 9999;
}

/* HOTSPOT SIZES */
.hotspot-lg{
    height: 65px;
    width: 65px;
}

.hotspot-xs{
    height: 25px;
    width: 25px;
}

.hotspot-sm{
    height: 30px;
    width: 30px;
}

.hotspot-md{
    height: 40px;
    width: 40px;
}

.hotspot-mini{
    height: 15px;
    width: 15px;
}

.hotspot-mdd{
    height:50px;
    width: 50px;
}
.hotspot-yankee{
    width: 150px;
    height: 150px;
}
/* INFO WINDOW */
.info{
    width: 435px; 
    position: relative;
    left:-120px;
    top:0;
    visibility: hidden;
    float: left;
    border-radius: 0 0 20px 0;
}

.info-2{
    width: 435px; 
    position: relative;
    left:-120px;
    top:0;
    visibility: hidden;
    float: left;
    border-radius: 0 0 20px 0;
}

.info h2{
    margin: 0;
    padding: 5px 0;
    background: #4c4d4f;
    color:#fff;
    font-size: 1.125em;
    text-align: center;
    float: left;
	width: 100%;
}

.info-2 h2{
    margin: 0;
    padding: 5px 0;
    background: #4c4d4f;
    color:#fff;
    font-size: 1.125em;
    text-align: center;
    float: left;width: 100%;
}

.info a{
    color:#222;
}

.info a:hover{
    color:#1f9122;
}

.info p{
    padding: 7px;
    margin: 0;
}

.info-content{
    background:#f5f5f5;
    padding:10px;
    float: left;
    width: 100%;
    max-width: 415px;
    border-radius: 0 0 20px 0;
}


.info-2 a{
    color:#222;
}

.info-2 a:hover{
    color:#1f9122;
}

.info-2 p{
    padding: 7px;
    margin: 0;
}

.info-2-content{
    background:#f5f5f5;
    padding:10px;
    float: left;
    width: 100%;
    max-width: 395px;
    border-radius: 0 0 20px 0;
}

.info-content-2{
    background:#f5f5f5;
    padding:10px;
    float: left;
    width: 100%;
    max-width: 430px;
    border-radius: 0 0 20px 0;
}


.info-content-3{
    background:#f5f5f5;
    padding:10px;
    float: left;
    width: 100%;
    max-width: 440px;
    border-radius: 0 0 20px 0;
}

.info-content-3 h2{
width: 440px;
}




.info2{

}

.info .button{
    width: 225px;
    float: left;
    border-radius: 5px 0 5px 0;
    padding: 3px 5px;
    margin: 3px 15px 3px 0;
    background: #e4e4e4;
	font-size: 14px;
}

.info .button-255{
    width: 255px;
    float: left;
    border-radius: 5px 0 5px 0;
    padding: 3px 5px;
    margin: 3px 15px 3px 0;
    background: #e4e4e4;
	font-size: 14px;
}

.info .button-285{
    width: 280px;
    float: left;
    border-radius: 5px 0 5px 0;
    padding: 3px 5px;
    margin: 3px 15px 3px 0;
    background: #e4e4e4;
	font-size: 14px;
}

.info .button-285:hover{
    color: #fff;
    background: #1f9122;
}

.info .button-255:hover{
    color: #fff;
    background: #1f9122;
}

.info .button:hover{
    color: #fff;
    background: #1f9122;
}

/* INFO SYMBOLIT */
.info span.co, .info span.ru, .info span.hc, .info span.pu, .info span.t, .info span.te, .info span.p {
    float: left;
    position: relative;
    width: 20px;
    height: 25px;
    line-height: 35px;
}

.info span.co-small, .info span.ru-small, .info span.hc-small, .info span.pu-small, .info span.t-small, .info span.te-small, .info span.p-small {
    line-height: 25px;
    margin: 5px 0;
}

.info .iroll{
    float:left;
    width: 100%;
    border-top:1px solid #cecece;
}
.iroll .button{
    padding:5px;
}
/* INFO FOOTER MATERIAL SPANS */
.info-footer span.hc, .info-footer span.pu, .info-footer span.ru, .info-footer span.co, .info-footer span.t, .info-footer span.te, .info-footer span.p {
    padding-left: 25px;
    padding-right: 0;
    line-height: 25px;
    font-size: 0.875px;
}

span.hc-small{
    height: 25px;
    width: 25px;
    right:0;
    background: url(../img/flat-icons/hc-small.png) no-repeat;
    background-position: 100% 50%;
}

span.t-small{
    height: 25px;
    width: 25px;
    right:0;
    background: url(../img/t-small.png) no-repeat;
    background-position: 100% 50%;
}

span.te-small{
    height: 25px;
    width: 25px;
    right:0;
    background: url(../img/te-small.png) no-repeat;
    background-position: 100% 50%;
}

span.p-small{
    height: 25px;
    width: 25px;
    right:0;
    background: url(../img/p-small.png) no-repeat;
    background-position: 100% 50%;
}

span.pu-small{
    height: 25px;
    width: 25px;
    right:0;
    background: url(../img/flat-icons/pu-small.png) no-repeat;
    background-position: 100% 50%;
}

span.ru-small{
    height: 25px;
    width: 25px;
    right:0;
    background: url(../img/flat-icons/ru-small.png) no-repeat;
    background-position: 100% 50%;
}

span.co-small{
    height: 20px;
    width: 20px;
    right:0;
    background: url(../img/flat-icons/co-small.png) no-repeat;
    background-position: 100% 50%;
}

.info-footer span.hc:after, .info-footer span.pu:after, .info-footer span.ru:after, .info-footer span.co:after, .info-footer span.t:after, .info-footer span.te:after, .info-footer span.p:after {
    left:0;
    right: auto;
}

.info span.best, .info span.premium, .info span.standard{
    float: right;
    width: 90px;
    font-size: 0.7em;
    padding:10px;
}

.info span.improved{ 
    float: right;
    width: 110px;
    font-size: 0.7em;
    padding:10px;
}

.info span.improved_multiline{ 
    float: right;
    width: 110px;
    font-size: 0.7em;
    padding:7px;
}

.info span.improved_multiline_three{ 
    float: right;
    width: 110px;
    font-size: 0.7em;
    padding:5px;
}

.info span.improved_multiline_reli{ 
    float: right;
    width: 110px;
    font-size: 0.7em;
    padding:3px;
}

.info span.improved_multiline_reli5{ 
    float: right;
    width: 110px;
    font-size: 0.7em;
    padding:3px 5px 3px 3px;
}

.info-footer span{
    display: inline-block;
    width: 37%!important;
    margin: 0;
    float: none;
}
/* PAPER MACHINE CAROUSEL */
.papermachine-carousel{
    padding: 0;
}

.main-title{
    margin: 0;
    font-weight: bold;
}

.main-title, .slide-title{
    padding: 0 10px;
    margin-top: 5px;
}

.papermachine-carousel .slick-list{
    overflow: visible;
}

.slick-prev:before, .slick-next:before{
    display: none;
}

.papermachine-carousel .slick-prev, .papermachine-carousel .slick-next{
    width: 38px;
    height: 54px;
}

.papermachine-carousel .slick-prev{
    left:0;
}

.papermachine-carousel .slick-next{
    right:0;
}

.papermachine-carousel .slick-prev:before, .papermachine-carousel .slick-next:before{
    content:" ";
    display: block;
    color:#1f9122;
    height:54px;
    width: 38px;
    border-radius: 50%;
}

.papermachine-carousel .slick-prev:before{
    background: url(../img/prev.png);
}

.papermachine-carousel .slick-next:before{
    background: url(../img/next.png);
}

.papermachine-carousel .slick-prev:hover:before{
    background: url(../img/prev-hover.png);
}

.papermachine-carousel .slick-next:hover:before{
    background: url(../img/next-hover.png);
}


.papermachine-carousel .slick-slide{
    opacity: 0;
}

.papermachine-carousel .slick-slide .slide-title{
    visibility: hidden;
}

.papermachine-carousel .slick-active{
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
}

.papermachine-carousel .slick-active .slide-title{
    visibility: visible;
}

.papermachine-carousel .slick-cloned{
    visibility: hidden!important;
}

/* THUMBNAIL SLIDER */
.papermachine-thumbnails .slick-prev:before, .papermachine-thumbnails .slick-next:before{
    color:#fff;
    font-size: 2.5em;
}

.offsetLeft{
    left:-20px;
}

.offsetRight{
    left:auto;
    right:250px;
}

.info-footer{
    position: relative;
    float: left;
    visibility: hidden;
    height: 40px;
    width: 100%;
}
h2.inner-title{
    background: transparent;
    margin-top: 10px;
    color: #222;
    border-bottom: 1px solid #cecece;
}
/* FOOTER*/
.logo{
    float: right;
	width: 200px !important;
	height: 71px !important;
}

/* ACTIVE INFO WINDOW */
.info.active{
    visibility: visible;
    display: block;
}

.info-2.active{
    visibility: visible;
    display: block;
}

/* FOOTER */
.footer-container{
	vertical-align:top;
    margin-top: 8px;
}

.copyright{

    font-size: 0.875em;
    color: rgb(76, 77, 79);
	
	z-index: -999;
}

@media only screen and (max-width : 1025px) {
    .info-footer{
        height: 0px !important;
    }
}

@media only screen and (max-width : 992px) {
    .hotspot{
        height: 53px;
        width: 53px;
    }

    .hotspot-lg{
        height: 57px;
        width: 57px;
    }

    .hotspot-sm{
        height: 27px;
        width: 27px;
    }

    .hotspot-md{
        height: 35px;
        width: 35px;
    }

    .hotspot-mdd{
        height:45px;
        width: 45px;
    }

    .hotspot-xs{
        height:23px;
        width: 23px;
    }
    .hotspot-mini{
        height: 13px;
        width: 13px;
    }
    .hotspot-yankee{
        width: 135px;
        height: 135px;
    }
}

@media only screen and (max-width : 878px) {
    .hotspot{
        height: 48px;
        width: 48px;
    }

    .hotspot-lg{
        height: 52px;
        width: 52px;
    }

    .hotspot-sm{
        height: 22px;
        width: 22px;
    }

    .hotspot-md{
        height: 30px;
        width: 30px;
    }

    .hotspot-mdd{
        height:40px;
        width: 40px;
    }

    .hotspot-xs{
        height:20px;
        width: 20px;
    }
    .hotspot-mini{
        height: 11px;
        width: 11px;
    }
    #navigation .nav li a{
        padding: 10px 12px;
    }
    .slick-dots li .tab{
        padding: 10px 12px;
    }
    .hotspot-yankee{
        width: 120px;
        height: 120px;
    }
}

@media only screen and (max-width : 767px) {
    .hotspot{
        height: 43px;
        width: 43px;
    }

    .hotspot-lg{
        height: 47px;
        width: 47px;
    }

    .hotspot-sm{
        height: 19px;
        width: 19px;
    }

    .hotspot-md{
        height: 28px;
        width: 28px;
    }
    
    .hotspot-mdd{
        height:35px;
        width: 35px;
    }

    .hotspot-xs{
        height:17px;
        width: 17px;
    }
    .mobileClass{
        display: block;
    }
    .hotspot-mini{
        height: 10px;
        width: 10px;
    }
    .hotspot-yankee{
        width: 110px;
        height: 110px;
    }
}


/* Desktops and laptops ----------- */
@media only screen and (min-width : 1024px) {
/* Styles */
    .main-content{
        position: relative;
        width: 1024px;
        float: left;
    }
    .wrapper {
        width: 1024px;
        margin: 0 auto;
    }
}