﻿
.divRelatedHeader {
    max-width: 600px;
    padding: 10px 50px 10px 50px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox*/
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera*/
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*.divSlideTitleRelated {
    font-size: 1.5em;
    font-family: 'Geologica', sans-serif;
    padding-bottom: 20px;
}
*/
/*.divSubTextRelated {
    font-size: .9em;
}*/

/*#mainRelated {
    margin: 20px;
}*/

#navRelated {
    margin: auto !important;
    height: 18px;
    display: table;
}

    #navRelated div {
        float: left;
        /*background: url(/images/dot_off.png) no-repeat top center;*/
        border-radius: 50px;
        border: 4px solid #2b2726;
        background-color: #2b2726;
    }

        #navRelated div:hover, #nav div:active {
            float: left;
            /*background: url(/images/dot_off.png) no-repeat top center;*/
            border-radius: 50px;
            border: 4px solid #7c7574;
            background-color: #7c7574;
        }

    #navRelated a {
        display: inline-block;
        width: 18px;
        height: 10px;
    }

    #navRelated div.activeSlide {
        /*background: url(/images/dot_on.png) no-repeat top center;*/
        /*border-radius: 30px;*/
        border: 4px solid #2b2726;
        background-color: transparent;
    }

        #navRelated div.activeSlide a {
        }

    #navRelated a:focus {
        outline: none;
    }

#prevRelated {
    cursor: pointer;
    z-index: 100;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -60px;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 0.7;
}

#nextRelated {
    cursor: pointer;
    z-index: 100;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -60px;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 0.7;
}

#prevRelated img {
   width:50px;
}

#nextRelated img {
    width: 50px;
}

#prevRelated:hover img {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 0.5;
}

#nextRelated:hover img {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 0.5;
}

/********** Responsive *************/
/*wide width**********************************************/
@media (min-width: 1101px) {

    .slideshowRelated {
        height: 20vw;
    }

    .divSliderRelated {
        position: relative;
        text-align: left;
        display: block;
        width: 75%;
        margin-left: 60px;
        height: 100% !important;
        display:inline-block;
    }


    /*.divImgRelated {
        display: table-cell;
        width: 50% !important;
        vertical-align: top;
    }

    .divTextRelated {
        width: 50% !important;
        display: table-cell;
        vertical-align: top;
    }

    .divSliderRelated {
        width: 65%;
    }

    .divBoxRelated {
        display: table;
        width: 100% !important;
    }*/

}

/*medium width**********************************************/
@media (min-width: 701px) and (max-width: 1100px) {

    .slideshowRelated {
        height: 20vw;
    }

    .divSliderRelated {
        position: relative;
        text-align: left;
        display: block;
        width: 65%;
        margin-left: 60px;
        height: 100% !important;
        display: inline-block;
    }

   /* .divImgRelated {
        display:block;
        width: 100% !important;
        vertical-align: top;
    }

    .divTextRelated {
        width: 100% !important;
        display: block;
        vertical-align: top;
    }

    .divBoxRelated {
        display: block;
        width: 100% !important;
    }*/
}

/* mobile width*******************************************/
@media (max-width: 700px) {
    .divSliderRelated {
        display: none;
    }

    .divRelatedHeader {
        display: none;
    }
    
}


/********** End Responsive *************/
