@import url("https://fonts.googleapis.com/css?family=Roboto:900");
/**
  * style variables
*/
/**
  * Control & indicator mixin
*/
.imgcarousel{
    height: 600px !important;
    max-width: 100%;
} 
.carousel {
    height: 600px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    position: relative;
    padding: 0;
    list-style: none;
    /**
      * Where the magic happens
      */
    /**
        * Control element - right/left arrows
      */
    /**
        * Element for holding slide indicators
      */
    /**
        * Indicator for indicating active slide
      */
    /**
        * Create rules for when slides are contained within a track
      */
    imgcarousel{
        background-position: center;
        background-repeat: no-repeat; 
        z-index: 95
    }
    .carousel__controls{

        background-color: rgba(0, 0, 0, 0.72);
        z-index: 1;
    }
}

@media (min-height:506px){
    .carousel__controls,
    .carousel__activator {
        display: none;
        background-color: rgb(49, 59, 72);
        z-index: 1;
    }
    .carousel__activator:nth-of-type(1):checked ~ .carousel__track {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    .carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
        transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
        top: 0;
        left: 0;
        right: 0;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {
        display: block;
        opacity: 1;

    }
    .carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {
        opacity: 1;

    }
    .carousel__activator:nth-of-type(2):checked ~ .carousel__track {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    .carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
        transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
        top: 0;
        left: 0;
        right: 0;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {
        display: block;
        opacity: 1;
    }
    .carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {
        opacity: 1;

    }
    .carousel__activator:nth-of-type(3):checked ~ .carousel__track {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    .carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
        transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
        top: 0;
        left: 0;
        right: 0;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {
        display: block;
        opacity: 1;
    }
    .carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {
        opacity: 1;

    }
    .carousel__activator:nth-of-type(4):checked ~ .carousel__track {
        -webkit-transform: translateX(-300%);
        transform: translateX(-300%);
    }
    .carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
        transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
        top: 0;
        left: 0;
        right: 0;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {
        display: block;
        opacity: 1;
    }
    .carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) {
        opacity: 1;

    }
    .carousel__activator:nth-of-type(5):checked ~ .carousel__track {
        -webkit-transform: translateX(-400%);
        transform: translateX(-400%);
    }
    .carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
        transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
        top: 0;
        left: 0;
        right: 0;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {
        display: block;
        opacity: 1;
    }
    .carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) {
        opacity: 1;

    }
    .carousel__control {
        height: 36px;
        width: 36px;
        margin-top: -15px;
        top: 50%;
        position: absolute;
        display: block;
        cursor: pointer;
        border-width: 5px 5px 0 0;
        border-style: solid;
        border-color: #fafafa;
        opacity: 0.35;
        outline: 0;
        z-index: 3;
    }
    .carousel__control:hover {
        opacity: 1;
    }
    .carousel__control--backward {
        left: 10px;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    .carousel__control--forward {
        right: 10px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .carousel__indicators {
        position: absolute;
        bottom: 58px;
        width: 100%;
        text-align: center;
    }
    .carousel__indicator {
        height: 15px;
        width: 15px;
        border-radius: 100%;
        display: inline-block;
        z-index: 2;
        cursor: pointer;
        opacity:0.53;
        margin: 0 2.5px 0 2.5px;
    }
    .carousel__indicator:hover {
        opacity: 1;
    }
    .carousel__track {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        margin: 0;
        -webkit-transition: -webkit-transform 0.5s ease 0s;
        transition: -webkit-transform 0.5s ease 0s;
        transition: transform 0.5s ease 0s;
        transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
    }
    .carousel__track .carousel__slide {
        display: block;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0.53;
    }
    .carousel__track .carousel__slide:nth-of-type(1) {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    .carousel__track .carousel__slide:nth-of-type(2) {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    .carousel__track .carousel__slide:nth-of-type(3) {
        -webkit-transform: translateX(200%);
        transform: translateX(200%);
    }
    .carousel__track .carousel__slide:nth-of-type(4) {
        -webkit-transform: translateX(300%);
        transform: translateX(300%);
    }
    .carousel__track .carousel__slide:nth-of-type(5) {
        -webkit-transform: translateX(400%);
        transform: translateX(400%);
    }
    .carousel--scale .carousel__slide {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    .carousel__slide {
        height: 100%;
        position: absolute;
        overflow-y: auto;
        opacity: 0;
    }
    /**
      * Theming
    */

    .carousel-container {
        display: inline-block;
    }
    .my-carousel {
        border-radius: 5px;
        margin: 0px;
    }
    .carousel__slide {
        overflow: hidden;
    }
    .carousel--thumb .carousel__indicator {
        height: 15px;
        width: 15px;
    }

    .carousel__indicator {
        background-color: #444444;
    }
    .carousel__slide:nth-of-type(1),
    .carousel--thumb .carousel__indicators:nth-of-type(1) {
        z-index: 1;
        background-position: center;

        background-repeat: no-repeat;
        /*  background-size: cover;*/

    }
    .carousel__slide:nth-of-type(2),
    .carousel--thumb .carousel__indicators:nth-of-type(2) {
        z-index: 1;
        /*background-size: cover;*/
        background-position: center;

        background-repeat: no-repeat;
    }
    .carousel__slide:nth-of-type(3),
    .carousel--thumb .carousel__indicators:nth-of-type(3) {
        z-index: 1;
        /*background-size: cover;*/
        background-position: center;

        background-repeat: no-repeat;
    }
    .carousel__slide:nth-of-type(4),
    .carousel--thumb .carousel__indicators:nth-of-type(4) {
        z-index: 1;
        /*background-size: cover;*/
        background-position: center;

        background-repeat: no-repeat;
    }
    .carousel__slide:nth-of-type(5),
    .carousel--thumb .carousel__indicators:nth-of-type(5) {
        z-index: 1;
        /*  background-size: cover;*/
        background-position: center;

        background-repeat: no-repeat;
    }
    .carousel-text {
        font-size: 20px;
        line-height: 50px;
        color: #fafafa;
        position: absolute;
        top: 95%;
        width: 100%;
        text-align: center;
        margin-top: -25px;
        background-color: rgba(0, 0, 0, 0.53);
        background-repeat: no-repeat;
    }
    .carousel-text:hover{
        background-color: rgba(0, 0, 0, 0.63);
    }
}