* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    cursor: pointer
}



body {
    background-image: url(../img/bg-min.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    /*background-color: rgba(158, 84, 18, .7); */
}

.container {
    width: 100%;
    margin-top: -8%;
    margin-top: -8%
}


.preloader {
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;

    visibility: hidden;

    width: 100%;
    height: 100%;
    /* background: linear-gradient(to top right, rgb(34,66,96) 0%,rgb(47,91,134) 25%,rgb(59,117,174) 50%); */
    transition: 2s all;

    opacity: 0;
    background: rgba(34, 66, 96, .75);
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    transform-origin: center center;
    text-align: center;
}

.done {
    visibility: visible;

    opacity: 1;
}




/* header {
    height: 2em;
    background: rgba(158,84,18,.9);
} */


/* footer {
    height: 10em;
    background: rgba(158,84,18,.9);
} */

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

#header {
    position: absolute;
    top: 12%;

    width: 40%;
    margin: 0 30%;
}

#header svg {
    transform: rotate(0deg) !important
}

.icon svg {
    width: 75%;
}


#Layer_2 {
    transition: all 2s;
    transform: rotate(0deg);
    transform-origin: 49.7% 55.8%;
}

#Layer_2:hover {
    transition: all 100s;
    transform: rotate(1000deg);
    transform-origin: 49.7% 55.8%;
}

.cityable {
    position: absolute;

    width: 100%;
    height: 100%;
}

.city {
    position: absolute;
    z-index: 1000;
}

.city img {
    width: 50%;
    margin: 0 25%;
}

.city p {
    text-align: center;
}

.st20:hover {
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -ms-transition: all .8s ease-out;
    -o-transition: all .8s ease-out;

    opacity: 1;

    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
}

.st411:hover {
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -ms-transition: all .8s ease-out;
    -o-transition: all .8s ease-out;

    opacity: 1;

    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
}

.st601:hover {
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -ms-transition: all .8s ease-out;
    -o-transition: all .8s ease-out;

    opacity: 1;

    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
}

.st800:hover {
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -ms-transition: all .8s ease-out;
    -o-transition: all .8s ease-out;

    opacity: 1;

    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
}

@media (min-width: 745px) and (max-width: 1200px) {
    .container {
        width: 103%;
        margin-top: auto;
    }
}

@media (max-width: 745px) {
    .container {
        width: 85%;
        margin-top: auto;
    }
}


@media (orientation: portrait) and (max-width: 745px) {
    .container {
        width: 100%;
        margin-top: auto;
    }
}

@media (orientation: portrait) {
    body {
        padding-top: 50%;
    }
}

@media (orientation: portrait) and (min-width: 745px) and (max-width: 1200px) {
    body {
        padding-top: 35%;
    }
    .container {
        width: 100%;
    }
}



/*-------------------------------------------------------------------
---------------------------------------------------------------------*/