@font-face {
    font-family: "Tandelle";
    src: url(../fonts/tandelle.ttf);
}

@font-face {
    font-family: "Lato Bold";
    src: url(../fonts/Lato-Bold.ttf);
}

@font-face {
    font-family: "Lato Light";
    src: url(../fonts/Lato-Light.ttf);
}

@font-face {
    font-family: "Lato";
    src: url(../fonts/Lato-Regular.ttf);
}

html,
body {
    height: 100%;
}

body {
    background-color: #000;
    font-family: "Lato", sans-serif;
    position: relative;
}

a {
    color: rgb(247, 54, 32);
}

a:hover {
    color: rgb(247, 54, 32);
    text-decoration: underline;
}


/* NAVBAR */

#logo-navbar {
    left: 15% !important;
}

@media screen and (max-width: 810px) {
    #logo-navbar {
        width: 30px;
        height: 30px;
        position: relative;
    }
}

@media screen and (min-width: 811px) and (max-width: 945px) {
    #logo-navbar {
        width: 160px;
        height: 160px;
        position: relative;
    }
    .navbar {
        font-size: 18px !important;
    }
    .nav > .divider-before::before {
        content: "|";
        font-family: "Tandelle", sans-serif;
        font-size: 18px;
        display: table;
        position: absolute;
        font-weight: 500;
        color: rgb(247, 54, 32);
        margin-top: 12px;
    }
}

@media screen and (min-width: 946px) and (max-width: 999px) {
    #logo-navbar {
        width: 230px;
        height: 230px;
        position: relative;
    }
    .navbar {
        font-size: 22px !important;
    }
    .nav > .divider-before::before {
        content: "|";
        font-family: "Tandelle", sans-serif;
        font-size: 22px;
        display: table;
        position: absolute;
        font-weight: 500;
        color: rgb(247, 54, 32);
        margin-top: 9px;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1249px) {
    #logo-navbar {
        width: 230px;
        height: 230px;
        position: relative;
    }
    .navbar {
        font-size: 25px !important;
    }
    .nav > .divider-before::before {
        content: "|";
        font-family: "Tandelle", sans-serif;
        font-size: 25px;
        display: table;
        position: absolute;
        font-weight: 500;
        color: rgb(247, 54, 32);
        margin-top: 6px;
    }
}

@media screen and (min-width: 1250px) {
    #logo-navbar {
        width: 300px;
        height: 300px;
        position: relative;
    }
    .navbar {
        font-size: 36px !important;
    }
    .nav > .divider-before::before {
        content: "|";
        font-family: "Tandelle", sans-serif;
        font-size: 36px;
        display: table;
        position: absolute;
        font-weight: 500;
        color: rgb(247, 54, 32);
        margin-top: -4px;
    }
}

.navbar-default .navbar-collapse {
    border-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: rgb(247, 54, 32);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: rgb(247, 54, 32) !important;
}

.navbar-default {
    border: 0;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
}

.navbar {
    font-family: "Tandelle", sans-serif;
    margin-bottom: 0px;
}

.nav {
    padding-top: 15px;
}

.navbar .navbar-nav li>a {
    background-image: none !important;
    background-color: transparent !important;
    color: rgb(255, 255, 255) !important;
    box-shadow: none !important;
}

.navbar .navbar-nav li>a:hover {
    background-image: none !important;
    background-color: transparent !important;
    color: rgb(247, 212, 208) !important;
    box-shadow: none !important;
}

.navbar .navbar-nav .active a {
    background-image: none !important;
    background-color: transparent !important;
    color: rgb(247, 54, 32) !important;
    box-shadow: none !important;
}

.navbar .navbar-nav .active a:hover {
    background-image: none !important;
    background-color: transparent !important;
    color: rgb(247, 54, 32) !important;
}

/* HEADER */

.header {
    background-image: url(../img/bg1.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000000;
}

.jumbotron {
    padding: 0;
    margin-bottom: 0;
}

.jumbotron img {
    width: 100%;
}


/* FOOTER */

.footer {
    margin-top: 10px;
    margin-bottom: 40px;
}

.footer p {
    color: #ffffff;
    text-align: center;
    font-size: 11px;
}


/* TOP */

#top {
    height: 65px;
}


/* DIVIDER */

.divider {
    margin-top: 20px;
    margin-bottom: 20px;
    border-color: rgb(247, 54, 32);
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-width: medium;
    width: 85%;
}


/* SCROLL CLASSES */

.scrolled {
    width: 40px !important;
    height: 40px !important;
    position: relative;
}

.scrollnavbar {
    background-color: rgba(60, 60, 60, 0.5);
}


/* SECTIONS */

.title-section {
    font-family: "Tandelle", sans-serif;
    font-size: 130px;
    color: rgb(247, 54, 32);
    margin-top: -20px;
}

/* ABOUT */
.about-text {
    float: left;
    position: absolute;
    z-index: 1000;
    left: 20px;
    top: 28vw;
    height: 28vw;
    width: 32vw;
    overflow-y: scroll;
}

@media screen and (min-width: 960px) and (max-width: 1150px) {
    .about-text {
        top: 29vw !important;
    }
}

@media screen and (min-width: 830px) and (max-width: 959px) {
    .about-text {
        top: 30vw !important;
    }
}

@media screen and (min-width: 740px) and (max-width: 829px) {
    .about-text {
        top: 31vw !important;
    }
}

@media screen and (min-width: 680px) and (max-width: 739px) {
    .about-text {
        top: 32vw !important;
    }
}

@media screen and (min-width: 580px) and (max-width: 679px) {
    .about-text {
        top: 34vw !important;
    }
}

@media screen and (min-width: 460px) and (max-width: 579px) {
    .about-text {
        top: 37vw !important;
    }
}

@media screen and (max-width: 459px) {
    .about-text {
        top: 41vw !important;
    }
}

.about-text p, .about-text div {
    font-family: "Tandelle", sans-serif;
    color: #ffffff;
    font-size: 2vw;
}

/* NEWS */

.news-text p {
    padding-top: 2px !important;
}

/* COLORS */
.highlight-color {
    color: rgb(247, 54, 32);
}

/* HIDE FB */
.hidefb {
    width: 0px !important;
    height 0px !important;
}

/* IMG NEWS */
.imgnews {
    width: 20vw !important;
    margin-bottom: 5px !important;
}