@font-face {
    font-family: lato-bold;
    src: url("../fonts/lato.bold.ttf");
}
@font-face {
    font-family: lato-black;
    src: url("../fonts/lato.black.ttf");
}



* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    height: 100%;
    
}

body {
    margin: 0;
    font: 16px/1.3 sans-serif;
}

/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
http://stackoverflow.com/a/34696029/383904
*/

.CSSgal {
    position: relative;
    overflow: hidden;
    height: max-content; /* Or set a fixed height */
    min-height:600px;
    display: none;
    background-color: #dddfe3;
}

    /* SLIDER */

    .CSSgal .slider {
        height: 100%;
        white-space: nowrap;
        font-size: 0;
        transition: 0.8s;
        
    }

        /* SLIDES */

        .CSSgal .slider > * {
            font-size: 1rem;
            display: inline-block;
            white-space: normal;
            vertical-align: top;
            height: 100%;
            width: 100%;
            background: none 50% no-repeat;
            background-size: cover;
        }

    /* PREV/NEXT, CONTAINERS & ANCHORS */

    .CSSgal .prevNext {
        position: fixed;
        z-index: 1;
        bottom: 60%;
        width: 100%;
        height: 0;
        
        font-family:lato-bold;
    }

        .CSSgal .prevNext > div + div {
            visibility: hidden; /* Hide all but first P/N container */
            
        }

        .CSSgal .prevNext a {
            font-size:13px;
            background-color: #455ec2;
            font-family:lato-regular;
            color:white;
            position: fixed;
            width: 40px;
            height: 40px;
            line-height: 40px; /* If you want to place numbers */
            text-align: center;
            opacity: 0.5;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
            
        }

            .CSSgal .prevNext a:hover {
                opacity: 1;
            }

            .CSSgal .prevNext a + a {
                left: auto;
                right: 0;
            }

        .Next {
            background-color: #455ec2;
            font-family: lato-black;
            color: white;
            position: fixed;
            width: 40px;
            height: 40px;
            line-height: 40px; /* If you want to place numbers */
            text-align: center;
            opacity: 0.5;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
        }

.Arrow {
    background: linear-gradient(#1f3468, #405cb7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 80px !important;
}

.Arrow-right {
    background: linear-gradient(#1f3468, #405cb7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 80px !important;
}


    /* NAVIGATION */

    .CSSgal .bullets {
        position: relative;
        z-index: 2;
        top: 80px;
        padding: 10px 0;
        width: 100%;
        text-align: center;
        margin-top:40px;
    }
    /*
        .CSSgal .bullets > a {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            background-color: rgba(255, 255, 255, 1);
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }*/
        /*
            .CSSgal .bullets > a + a {
                background: rgb(32, 68, 183); /* Dim all but first */
                /*background: rgba(255, 255, 255, 0.5);
            }*/
/*
            .CSSgal .bullets > a:hover {
                background: rgba(255, 255, 255, 0.7) !important;
            }*/
/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal > s:target ~ .bullets > * {
        background: white;
        
    }
/* ACTIVE */
#s1:target ~ .bullets > *:nth-child(1) {
    background: rgb(32, 68, 183);
}

#s2:target ~ .bullets > *:nth-child(2) {
    background: rgb(32, 68, 183);
}

#s3:target ~ .bullets > *:nth-child(3) {
    background: rgb(32, 68, 183);
}

#s4:target ~ .bullets > *:nth-child(4) {
    background: rgb(32, 68, 183);
}
#s5:target ~ .bullets > *:nth-child(5) {
    background: rgb(32, 68, 183);
}
#s6:target ~ .bullets > *:nth-child(6) {
    background: rgb(32, 68, 183);
}
#s7:target ~ .bullets > *:nth-child(7) {
    background: rgb(32, 68, 183);
}

#s8:target ~ .bullets > *:nth-child(8) {
    background: rgb(32, 68, 183);
}

#s9:target ~ .bullets > *:nth-child(9) {
    background: rgb(32, 68, 183);
}

}
/* More slides? Add here more rules */
/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal > s:target ~ .prevNext > * {
    visibility: hidden;
}
/* ACTIVE: */
#s1:target ~ .prevNext > *:nth-child(1) {
    visibility: visible;
}

#s2:target ~ .prevNext > *:nth-child(2) {
    visibility: visible;
}

#s3:target ~ .prevNext > *:nth-child(3) {
    visibility: visible;
}

#s4:target ~ .prevNext > *:nth-child(4) {
    visibility: visible;
}
#s5:target ~ .prevNext > *:nth-child(5) {
    visibility: visible;
}

#s6:target ~ .prevNext > *:nth-child(6) {
    visibility: visible;
}

#s7:target ~ .prevNext > *:nth-child(7) {
    visibility: visible;
}

#s8:target ~ .prevNext > *:nth-child(8) {
    visibility: visible;
}

#s9:target ~ .prevNext > *:nth-child(9) {
    visibility: visible;
}




/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slider {
    transform: translateX( 0%);
    -webkit-transform: translateX( 0%);
}

#s2:target ~ .slider {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

#s3:target ~ .slider {
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
}

#s4:target ~ .slider {
    transform: translateX(-300%);
    -webkit-transform: translateX(-300%);
}
#s5:target ~ .slider {
    transform: translateX( -400%);
    -webkit-transform: translateX( -400%);
}

#s6:target ~ .slider {
    transform: translateX(-500%);
    -webkit-transform: translateX(-500%);
}

#s7:target ~ .slider {
    transform: translateX(-600%);
    -webkit-transform: translateX(-600%);
}

#s8:target ~ .slider {
    transform: translateX(-700%);
    -webkit-transform: translateX(-700%);
}

#s9:target ~ .slider {
    transform: translateX(-800%);
    -webkit-transform: translateX(-800%);
}


/* More slides? Add here more rules */


/* YOU'RE THE DESIGNER! 
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

.CSSgal {
    color: #203566;
    text-align: center;
}

    .CSSgal .slider h2 {
        margin-top: 40vh;
        font-weight: 200;
        letter-spacing: -0.06em;
        word-spacing: 0.2em;
        font-size: 3em;
    }

    .CSSgal a {
        border-radius: 50%;
        margin: 0 3px;
        color: rgba(0,0,0,0.8);
        text-decoration: none;
    }

.not_sel_bull_s {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 25px;
    text-decoration: none;
    text-align: center;
    background-color: white;
    color: #203566 !important;
    font-size: 15px;
    font-family: lato-bold;
    pointer-events: none;
    cursor: default;
    background-color:#666666 !important;
    /*  pointer-events:none;*/
}

.not_sel_bull {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    text-align: center;
    background-color: white;
    color: #203566 !important;
    font-size: 15px;
    font-family: lato-bold;
    pointer-events: none;
    cursor: default;
    /*  pointer-events:none;*/
}

    .not_sel_bull .ev {
        pointer-events: none;
        cursor: default;
    }

.sel_bull_s{
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 25px;
    text-decoration: none;
    text-align: center;
    background-color: rgb(32, 68, 183);
    color: white !important;
    font-size: 15px;
    font-family: lato-bold;
    pointer-events: none;
    cursor: default;
    /*pointer-events: none;*/
}

.sel_bull {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    text-align: center;
    background-color: rgb(32, 68, 183);
    color: white !important;
    font-size: 15px;
    font-family: lato-bold;
    pointer-events: none;
    cursor: default;
    /*pointer-events: none;*/
}

    .sel_bull .ev {
        pointer-events: auto;
    }

@media only screen and (max-width: 400px) {

    

    .CSSgal .prevNext {
        position: fixed;
        z-index: 99999;
        bottom: 30%;
        width: 100%;
        height: 0;
        font-family: lato-bold;
    }

    

    .CSSgal .slider {
        
        margin-top: 3%;
    }

    
}