@font-face {
    font-family: 'Samim-FD';
    src: url('Samim-Medium-FD-WOL.eot');
    src: url('Samim-Medium-FD-WOL.eot?#iefix') format('embedded-opentype'),
    url('Samim-Medium-FD-WOL.woff2') format('woff2'),
    url('Samim-Medium-FD-WOL.woff') format('woff'),
    url('Samim-Medium-FD-WOL.ttf') format('truetype');
    font-weight: 500;
}

html, body, h1, h2, h3, h4, h5, h6, p, div, li, label {
    font-family: "Samim-FD", Calibri, serif !important;
    text-align: justify;
}

.title {
    font-size: 2vw;
    display: block;
    margin: .5rem 1.5rem;
    text-shadow: 0 13.36px 8.896px #dddddd, 0 -2px 1px #fff;
}


nav > .nav.nav-tabs {

    border: none;
    color: #fff;
    background: #272e38;
    border-radius: 0;

}

nav > div a.nav-item.nav-link,
nav > div a.nav-item.nav-link.active {
    border: none;
    padding: 18px 25px;
    color: #fff;
    background: #272e38;
    border-radius: 0;
}

nav > div a.nav-item.nav-link.active {
    background: #92B7FE !important;
}


.tab-content {
    background: #fdfdfd;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top: 5px solid #92B7FE;
    border-bottom: 5px solid #92B7FE;
    padding: 30px 25px;
}

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus {
    border: none;
    background: #92B7FE;
    color: #fff;
    border-radius: 0;
    transition: background 0.20s linear;
}


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    background: #272e38;
    background-image: none;
    border: 0;
}

/* Remove IE arrow */
select::-ms-expand {
    display: none;
}

/* Custom Select */
.select {
    position: relative;
    display: flex;
    width: 11em;
    height: 2em;
    background: #92B7FE;
    overflow: hidden;
    border-radius: .25em;
    margin-right: 9%;
}


select {
    flex: 1;
    padding: 0 3em;
    color: #fff;
    cursor: pointer;
    font-size: .5rem;

}

/* Arrow */
.select::after {
    content: '\25BC';
    position: absolute;
    top: 12.5%;
    right: 0;
    padding: 0 1em;
    background: #272e38;
    cursor: pointer;
    pointer-events: none;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
    height: 100%;
    color: #92B7FE;
}

/* Transition */
.select:hover::after {
    color: #92B7FE;
}


header nav {
    border: 0.3rem solid transparent;
    border-top-color: #92B7FE;
}

header nav h1 {
    color: #272e38;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, .1),
    0 0 5px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15);
    text-align: center;
    font-size: 1.5rem;
}



.paragraph {
    margin-right: 6%;
}

.chart {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82%;
    margin: 0 auto;
}

table td {
    text-align: center;
    width: 100px;
}

footer p {
    padding: 0 1%;
}





/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {


    .chart {
        width: 100%;
    }

    header h1 {
        font-size: .63rem !important;;
        text-align: right;
        margin: 0px;
        font-weight: bold;
    }

    header img {
        width: 50px;
        height: 30px;
    }

    .nav-link {
        font-size: .5rem;
    }

    .title {
        font-size: .8rem !important;
        font-weight: bold;
    }

    .paragraph {
        margin-top: 1.5%;
        font-size: .7rem;
    }

    .select {
        width: 5.5rem;
        height: 1.5rem;
        margin-right: 1%;
        padding: 0;
    }

    select {
        flex: 1;
        padding: 0 1.8em;
        color: #fff;
        cursor: pointer;
        font-size: .75rem !important;
    }

    /* Arrow */
    .select::after {
        padding: 0 .2em;
    }

    footer p {
        font-size: .45rem;
    }
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .chart {
        width: 100%;
    }

    header h1 {
        font-size: 1.2rem !important;
    }

    header img {
        width: 90px;
        height: 70px;
    }

    .nav-link {
        font-size: .9rem;
    }

    .title {
        font-size: 1rem !important;
        font-weight: bold;
    }

    .paragraph {
        margin-top: 1.5%;
        font-size: .8rem;
    }

    .select {
        width: 5.5rem;
        height: 1.5rem;
        margin-right: 1%;
        padding: 0;
    }

    select {
        flex: 1;
        padding: 0 1.8em;
        color: #fff;
        cursor: pointer;
        font-size: .75rem !important;
    }

    /* Arrow */
    .select::after {
        padding: 0 .2em;
    }

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {

    .chart {
        width: 100%;
    }

    header h1 {
        font-size: 1.6rem !important;
    }
    
     header img {
        width: 130px;
        height: 90px;
    }

  
    .nav-link {
        font-size: .6rem;
    }

    .title {
        font-size: 1.5rem !important;
        font-weight: bold;
    }

    .paragraph {
        margin-top: 1.5%;
        font-size: 1rem;
    }

    .select {
        width: 7rem;
        height: 2rem;
        margin-right: 1%;
        padding: 0;
    }

    select {
        flex: 1;
        padding: 0 1.8em;
        color: #fff;
        cursor: pointer;
        font-size: 1rem !important;
    }

    /* Arrow */
    .select::after {
        padding: 0 .2em;
    }

}


/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    header h1 {
        font-size: 2.5rem !important;
    }

    .title {
        font-size: 2rem;
        font-weight: bold;
    }

    .paragraph {
        margin-top: 1.5%;
        font-size: 1.5rem;
    }

    .nav-link {
        font-size: 1rem;
    }


}