/* cyrillic-ext */

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/_UIws5dpKC1RfhGPW_D7VQ.woff2) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}


/* cyrillic */

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/VI6dwR3qOFADPI7kkTnlug.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek */

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/4W1i2GqDprP6PUrv5L9lzw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* latin-ext */

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/YjD7Z5idi6Khm_WnIgFa0Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/ZNo-5SxCwH1CXgZ-n3bt2g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/* latin */

@font-face {
    font-family: 'Varela Round';
    font-style: normal;
    font-weight: 400;
    src: local('Varela Round'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html,
body {
    background: #c4c4c4;
    font-family: 'Varela Round', sans-serif;
    height: 100%;
    width: 100%;
}

p{
    margin: 15px 0;
    font-size: 14px;
    font-weight: 300;
}

.js .selectnav {
    display: none;
}

.nav-wrapper {
    width: 100%;
    height: 70px;
    border-top: 3px solid rgba(46, 45, 45, 0.5);
    border-bottom: 2px solid rgb(49, 49, 49);
    background: #535353;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.nav-wrapper > .container {
    background-image: url(../images/cglogow.png);
    background-repeat: no-repeat;
    border: 0;
    padding: 0;
}

.nav {
    position: relative;
    text-align: left;
    float: right;
    display: inline-block;
    margin: 0;
    padding: 23px 4px 14px 0;
    list-style: none;
    z-index: 20;
}

.nav li {
    display: inline-block;
    position: relative;
    margin-left: 0;
    font-family: 'Play', sans-serif;
}

.nav li a,
.nav li ul li:first-child a {
    font-size: 14px;
    margin-left: -4px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-right: 1px solid rgba(123, 123, 123, 0.2);
    text-decoration: none;
    color: #ededed
}

.nav > li:first-child > a {
    border-left: 1px solid rgba(123, 123, 123, 0.2);
}

.nav li a {
    padding: 27px 15px 27px 15px;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}

.nav li:first-child a {
    margin-left: 0;
}

.nav li a:hover {
    background: #333;
    color: #fff;
}

.nav li ul {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 47px;
    left: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
    z-index: 10;
}

.nav li ul li {
    margin: 0;
    padding: 0;
    width: 175px;
}

.nav li ul li a {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
    width: 100%;
    font-size: 13px;
    padding: 10px;
}

.nav li ul li a:hover {
    background: #666;
}

.nav li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

.slider {
    height: calc(100% - 75px);
    max-height: calc(100% - 75px);
    min-height: calc(100% - 75x);
    overflow: hidden;
    display: block;
}

.slider div {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}

.slider div img {
    margin: auto;
    margin-top: 10%;
}

.nothome {
    height: 250px;
}

.underslider {
    height: 60px;
    border-top: 1px solid rgba(114, 114, 114, 0.5);
    border-bottom: 1px solid rgb(49, 49, 49);
    background: #535353;
    margin-bottom: 20px;
    overflow: hidden;
}

.underslider .container {
    border: 0;
    font-family: 'Play', sans-serif;
    font-size: 22px;
    color: #ededed;
    text-align: center;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
    padding: 0;
}

.underslider .container span {
    display: block;
    margin-top: -3px;
    font-size: 16px;
    color: #dedede;
}

.container {
    border-right: 1px solid rgba(141, 141, 141, 0.33);
    border-left: 1px solid rgba(141, 141, 141, 0.33);
}

h4 {
    display: block;
    width: 100%;
    text-align: center;
}

.center {
    text-align: center;
}


/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 5vh;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100vw;
    /* Full width */
    height: 100vh;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6);
    /* Black w/ opacity */
    z-index: 1000;
}


/* Modal Content */

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 90vw;
    max-height:90vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}



/* Add Animation */

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}


/* The Close Button */

.close {
    color: white;
    float: right;
    font-size: 18px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 10px 16px;
    font-size: 20px;
    background-color: #7b7b7b;
    color: white;
}

.modal-body {
    padding: 0;
    margin: 0 0 -8px 0;
    max-height: 80vh;
    overflow: scroll;
}

hr {
    width: 100%;
    display: block;
    height: 0;
    border-top: 1px solid #AEAEAE;
}

.fb {
    text-align: center;
}

.fb-post {
    background-color: white;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

@media (max-width: 1035px) and (max-height: 680px), (max-width: 905px) and (max-height: 700px) {


}

@media (max-width: 725px) {
    .nav-wrapper {
        width: 100%;
        height: auto;
    }
    .nav-wrapper .container {
        width: 100%;
        padding-top: 10%;
        background-size: original;
    }
    .slider {
        width: 100%;
        height: 79vh;
    }
    .nothome {
        height: 150px;
    }
    .slider div img {
        margin: 10% auto 0 auto;
        max-width: 70%;
        object-fit: contain;
    
    }
}

@media (max-width: 610px) {
    .nav-wrapper .container {
        width: 100%;
        padding-top: 10%;
        background-size: contain;
    }

    .nothome {
        height: 125px;
    }
    .slider div img {
        margin: 15px auto 0 auto;
        max-width: 90%;
        object-fit: contain;
    
    }
}

@media (max-width: 510px) {
    .nothome {
        height: 100px;
    }
    .slider div img {
        margin: 30px auto 0 auto;
        max-width: 80%;
        object-fit: contain;
        }
}


/* Larger than mobile */

@media (min-width: 476px) {}


/* Larger than phablet (also point when grid becomes active) */

@media (min-width: 550px) {}


/* Larger than tablet */

@media (min-width: 750px) {}


/* Larger than desktop */

@media (min-width: 1000px) {}


/* Larger than Desktop HD */

@media (min-width: 1200px) {}