/*
    VIDEOLIBRO

    Author: Alberto Cobre
    eMail: a.cobre@promonivideo.com
    Company: PROMOinVIDEO Srl

    rev: 03.10.2014
*/

/************* BASE *************/
html, body {
    width: 100%;
    height: 100%;

    min-width: 320px;
    min-height: 360px;

    overflow-y: hidden;
    margin: 0;

    font-family: Verdana, Arial;
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
    color: #575757;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.template {
    display: none;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

p, h1, h2, h3 {
    margin: 0;
    font-weight: normal;
}

a:link {
    color: #fecc00;
}

a:visited {
    color: #970a2c;
}

.tooltip {
    color: #970a2c;
    text-decoration: underline;
    cursor: pointer;
}

.background {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.swiper-pagination-switch {
  display: inline-block;

  width: 8px;
  height: 8px;
  margin-right: 5px;

  background: #555;
  opacity: 0.8;

  border-radius: 8px;
  border: 1px solid #fff;
  cursor: pointer;
}

.swiper-scrollbar {
    bottom:auto !important;
}

.swiper-active-switch {
  background: #fff;
}

.vertical-align {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
}

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

.fitWidth {
    width: 100%;
    height: auto;
}

.fitHeight {
    width: auto;
    height: 100%;
}
.fill {
    position: absolute;
    width: 100%;
    height: 100%;
}
/************* PAGE SECTIONS: STRUTTURA *************/
#top {
    width: 100%;
    height: 80px;

    background-color: #000927;
}
#categoria {
    display: none;

    width: auto;
    height: 100%;

    font-size: 26px;
}
#high {
    background-color: #f1f1f1;

    width: 100%;
    height: 50px;
}
#middle {
    background-color: #fff;

    position: absolute;
    overflow: hidden;

    width: 100%;
    top: 80px; /* section:top + section:high*/
    bottom: 60px; /* section:bottom */
}
#bottom {
    background-color: #000927;

    position:absolute;
    bottom: 0;

    width: 100%;
    height: 60px;
}
/************  PAGE SECTIONS: SECTION ************/
.swiper-section-container, .swiper-section-slide {
    width: 100%;
    height: 100%;
}

/*************  PAGE SECTIONS: COVER *************/
#cover {
    display: none;

    position: absolute;
    z-index: 99;

    top: 80px; /* section:top + section:high*/
    bottom: 60px; /* section:bottom */

    width: 100%;

    border-top: solid 1px rgb(50, 50, 50);

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
}

#cover iframe {
    position: relative;
    border: 0;
}

#cover::before {/* won't bother in IE8 */
    position: absolute;
    z-index: 99;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: '';
    pointer-events: none;

    -webkit-box-shadow: inset 0 2px 10px 0 rgb(100, 100, 100);
    -moz-box-shadow:    inset 0 2px 10px 0 rgb(100, 100, 100);
    box-shadow:         inset 0 2px 10px 0 rgb(100, 100, 100);
}

    #covertop {
        height: 80px;
        background-color: #000927;
    }

    #covermiddle {
        position: absolute;
        overflow: hidden;
        
        width: 100%;
        
        top: 80px;
        bottom: 60px;

        background-color: #000;
    }
        
        .swiper-videobar-container {
            width: auto;
            height: 100%;
            margin-right: 160px;
        }
        .swiper-videobar-slide {
            opacity: .3;
            cursor: pointer;
            min-width: 80px;
            /*max-width: 120px;*/
            width: 16%;
            height: 70px;
            margin-top: 5px;
        }
        .swiper-videobar-content {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
        }

        .swiper-video-container, .swiper-video-slide {
            width: 100%;
            height: 100%;
        }
        .coverplayer {
            width: 100%;
            height: 100%;
            /*pointer-events: none;*/
        }
        .coverplayer .ppdisplay {
            pointer-events: none;
        }
        .ppdisplay {
            background-color: #000;
        }
        
    #coverbottom {
        width: 100%;

        background-color: #000927;

        bottom: 0;
        height: 60px;

        position:absolute;
    }

    #coverbottom img {
        height: 60px;
    }

    .btnLingua {
        opacity: .3;
    }


/*************  PAGE SECTIONS: LOGO *************/
.top-logo {
    width: 15%;
    max-width: 335px;
    min-width: 100px;
    height: 80px;

    float:left;

    background-image: url('../images/logo.png');
    background-size: contain;
    background-color: #000927;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
}
.top-center, .bottom-center {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 109px;

    cursor: pointer;
}

.top-right {
    position: absolute;
    right: 0;
    top: 0;
}
/************* PAGE SECTION: CATEGORIA *************/
#categoria .swiper-wrapper {
    margin: 0 auto;
    /* margin-left: 0; left aligned */
    margin-right: 0; /*right aligned*/
}

#categoria .swiper-slide {
    width: auto;
    height: 100%;

    background-color: #fff;
    
    text-align: center;
    cursor: pointer;

    padding-left: 15px;
    padding-right: 15px;
}

#categoria .swiper-slide:first-child {
	border-left: none;
}

#categoria .swiper-slide p {
    position: relative;
}

#categoria .selected{
    background-color: #970a2c;
}

#categoria .active {
    color: #970a2c;
    background-image: url('../images/select.png');
    background-position: center bottom;
    background-repeat: no-repeat;

    -moz-box-shadow: inset #970a2c 0 -3px 0 0;
    -webkit-box-shadow: inset #970a2c 0 -3px 0 0;
    box-shadow: inset #970a2c 0 -3px 0 0;
}

/************* PAGE SECTION: FAMIGLIA *************/
#famiglia {
    width: auto;
    height: 50%;
}

#famiglia .swiper-wrapper {
    width: 100%;
}

#famiglia .swiper-slide {
    width: 150px;
    height: 100%;

    background-size: 100% 100%;
    background-color: rgb(50, 50, 50);
    
    -webkit-box-shadow:inset -1px -1px 0px 0px #808080;
    -moz-box-shadow:inset -1px -1px 0px 0px #808080;
    box-shadow:inset -1px -1px 0px 0px #808080;

    text-align: center;
    cursor: pointer;
}
#famiglia .swiper-slide:first-child {
	border-left: none;
}

#famiglia .swiper-slide p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
}

#famiglia .selected{
    background-color: #ffffff;
    background-size: 100% 100%;
}
#famiglia .active {
    background-color: #970a2c;
    background-size: 100% 100%;
}


/************* PAGE SECTION: SOTTOFAMIGLIA *************/
#sottofamiglia {
    width: auto;
    height: 50%;

    display: none;
}

#sottofamiglia .swiper-wrapper {
    width: 100%;
    min-width: 150px;
}

#sottofamiglia .swiper-slide {
    width: 150px;
    height: 100%;

    background-size: 100% 100%;
    background-color: rgb(50, 50, 50);
    
    -webkit-box-shadow:inset -1px -1px 0px 0px #808080;
    -moz-box-shadow:inset -1px -1px 0px 0px #808080;
    box-shadow:inset -1px -1px 0px 0px #808080;

    border-right: 0;

    text-align: center;
    cursor: pointer;
}
#sottofamiglia .swiper-slide:first-child {
	border-left: none;
}

#sottofamiglia .swiper-slide p {
    position: relative;
}

#sottofamiglia .selected{
    background-color: #ffffff;
    background-size: 100% 100%;
}
#sottofamiglia .active {
    background-color: #970a2c;
    background-size: 100% 100%;
}

/************* TEMPLATE: PRODOTTO *************/
#prodotto {
    width: 100%;
    height: 100%;

    position: relative;
}

#prodotto .swiper-container, .subswiper {
    width: 100%;
    height: 100%;
}

    #prodotto .swiper-slide, .subslide, .swiper-slide-content  {
        width: 100%;
        height: 100%;

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        position: relative;
    }
#prodotto .swiper-button-prev {
    background-image: url('../images/freccia_sx.png');
    left: 0;
}
#prodotto .swiper-button-next {
    background-image: url('../images/freccia_dx.png');
    right: 0;
}

.subswiper-pagination {
    right: 5% !important;
}
.subswiper-pagination .swiper-pagination-bullet {
    width: 25px;
    height: 25px;

    opacity: 1;
    background-color: rgba(255,255,255,.3);
    background-image: url('../images/blu.png');
    background-size: 100% 100%;
}
    .subswiper-pagination .swiper-pagination-bullet-active {
        background-image: url('../images/giallo.png');
    }

    .swiper-bar-content {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

@media only screen and (max-width : 400px) {
    .subswiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
}
@media only screen and (max-width : 800px) {
    #prodotto .swiper-slide {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    #prodotto .product-details {
        width: 100%;
    }
 
    #prodotto .product-image {
        width: 100%;
        height: 50%;
        background-position: center;
    }  
}
@media only screen and (max-height : 700px) {
    #high {
        display: none;
    }
    #cover {
        top: 72px;
    }
    #middle {
        top: 72px;
    }
}
@media only screen and (max-height : 600px) and (max-width : 800px) {
     #top, #top #logo {
        height: 40px;
    }
     #middle {
        top: 42px;
        line-height: 1.3;
    }
}
/************* SLIDE BAR *************/
.slide-bar {
    position: absolute;
    height: 80px;
    bottom: 0;
    right: 0;
    width: 100%;
    text-align: center;

    -ms-flex-direction: row;
    flex-direction: row-reverse;
    display: flex;
    z-index: 99;
}
.slide-bar img {
    cursor: pointer;
    margin: 20px;
}
.slide-button {
    height: 100%;
    width: 20%;
    min-width: 150px;
    max-width: 190px;
    display: inline-block;
    margin: 20px;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
}
.slide-play {
    background-image: url('../images/play.jpg');
    display: none;
}
.slide-print {
    background-image: url('../images/print.jpg');
    display: none;
}
.slide-pdf {
    background-image: url('../images/download.jpg');
    display: none;
}
.slide-pdf.slide-button-active:hover {
    background-image: url('../images/download-hover.jpg');
}
.slide-pdf.slide-button-active:active {
    background-image: url('../images/download.jpg');
}


.mfp-content {
    max-width: none !important;
}
.mfp-iframe-holder {
    padding: 50px !important;
}

@media only screen and (max-width : 800px) {
    .slide-bar {
        -ms-flex-direction: column;
        flex-direction: column;
        right: 0;
        height: 150px;
        width: auto;
    }
}
@media only screen and (max-height : 600px) {
    .slide-bar {
        display: none;
    }
}
/************* TEMPLATE: PRODOTTO-BAR *************/
#prodottobar {
    float: left;
 
    width: 100%;
    height: 100%;

    margin: 0;
}

#prodottobar .swiper-wrapper {
    width: 100%;
    min-width: 50px;
}

#prodottobar .swiper-slide {
    width: auto;
    height: 100%;
   
    text-align: center;
    cursor: pointer;

    opacity: .3;
}
    .slide-active {
        opacity: 1 !important;
    }

#prodottobar .swiper-slide p {
    position: relative;
}

#prodottobar .selected{
    color: #970a2c;
}
#prodottobar .active {
    color: #970a2c;
    background-image: url('../images/select.png');
    background-position: center bottom;
    background-repeat: no-repeat;

    -moz-box-shadow: inset #970a2c 0 -3px 0 0;
    -webkit-box-shadow: inset #970a2c 0 -3px 0 0;
    box-shadow: inset #970a2c 0 -3px 0 0;
}

.prodottobar-arrow {
    float: left;
    width: 5%;
    height: 100%;
    
    text-align: center;
    cursor: pointer;

    line-height: 65px;
}
.prodottobar-arrow i {
    color: #808080;
}
.prodottobar-arrow:hover i {
    color: #970a2c;
}
.prodottobar-arrow:active i {
    color: brown;
}
/************* TEMPLATE: FOOTER *************/
#footer {
    display: none;

    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    box-sizing: padding-box;

    position: absolute;

    bottom: 0;
    width: 100%;
    height: 27px;

    color: #fff;
    background-color: #4a1c27;
    
    text-align: right;
    font-family: Arial;
    font-size: 11px;
}

#footer p {
    margin-right: 10px;
}

@media only screen and (max-width : 480px) {
    #footer {
        text-align: center;
    }
    #footer p {
        margin-right: 0;
    }
}