html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    font-family: 'Arimo', sans-serif;
}


.dropdown>.dropdown-menu {
    width: fit-content;
    top: 100%;
    transition: 0.5s all ease-in-out;
}
  
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
    pointer-events: none;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none ; 
}

#logo{ transition: 0.6s;}

.nav-style{
    font-family: 'Arimo', sans-serif;
    font-size: large;
    height: fit-content;
}

.my-navbar{
    display: flex;
    flex-direction: row;
    background-color: lightgrey;
    width: 100%;
    padding: 0px !important;
}


.color1{ color: #d19f08 }
.color2{ color: #bf830c }
.color3{ color: #bf6b14 }
.color4{ color: #ca6417 }
.color5{ color: #c3460e }
.color6{ color: #b82a05 }

.bg-color1{ background-color: #d19f08 }
.bg-color2{ background-color: #bf830c }
.bg-color3{ background-color: #bf6b14 }
.bg-color4{ background-color: #ca6417 }
.bg-color5{ background-color: #c3460e }
.bg-color6{ background-color: #b82a05 }

.btn-border1{ border: 1px solid #d19f08; border-radius: 5px; }
.btn-border2{ border: 1px solid #bf830c; border-radius: 5px; }
.btn-border3{ border: 1px solid #bf6b14; border-radius: 5px; }
.btn-border4{ border: 1px solid #ca6417; border-radius: 5px; }
.btn-border5{ border: 1px solid #c3460e; border-radius: 5px; }
.btn-border6{ border: 1px solid #b82a05; border-radius: 5px; }

.clr1:hover, .clr1:active{ background-color: #d19f08 !important;}
.clr2:hover, .clr2:active{ background-color: #bf830c !important;}
.clr3:hover, .clr3:active{ background-color: #bf6b14 !important;}
.clr4:hover, .clr4:active{ background-color: #ca6417 !important;}
.clr5:hover, .clr5:active{ background-color: #c3460e !important;}
.clr6:hover, .clr6:active{ background-color: #b82a05 !important;}


.btn-border:hover, .open > .dropdown-toggle.btn-border {
    background: rgb(216, 152, 15);
}

.lang1{
    display: inline;
}

.navbar-toggler-style{
    width: 60px; 
    margin-left: 15px;
}

.logo-div{
    padding: 10px;
}

.blank-div{
    height: 170px;
    background-color: whitesmoke;
}

.main-page{
    display: flex;
    justify-content: start;
    background-color: whitesmoke;    
}

.main-page-col{
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: whitesmoke;
    padding-top: 200px;
}

.main-page-next-col{
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: whitesmoke;
    padding-top: 50px;
}

/* .background-image-top{
    padding-top: 200px;
    background-image: url('pictures/picture.jpg');
    background-repeat: no-repeat;
    height: 100%;
    min-height: 1000px;
    background-position: center;
    background-size: cover;
    z-index: -1;
} */


.background-image-mid{
    background-image: url('pictures/picture2.jpg');
    background-repeat: no-repeat;
    height: 100%;
    min-height: 1000px;
    background-position: center;
    background-size: cover;
}

.main-page-text-light{
    display: flex;
    flex-direction: column;
    justify-content: start;
    color: whitesmoke;
    margin: 5%;
}

.main-page-text-dark{
    display: flex;
    flex-direction: column;
    justify-content: end;
    color: black;
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
}

.text-medium-font{
    font-size: x-large;
}

.text-large-font{
    font-size: xx-large;
}

.main-page-button-position-end{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

hr {
    border: none;
    border-top: 3px double #333;
    color: #ca6417;
    overflow: visible;
    text-align: center;
    margin-bottom: 70px;}

hr:after {
    background: whitesmoke;
    content: 'O O O O O';
    padding: 0 4px;
    position: relative;
    top: -13px;
}

.max-img-height{
    height: 150px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .logo-img{
        height: 80px; 
        width: 150px;
    }

    .navbar-nav{
        display: flex;
        flex-direction: column !important;
    }

    i{
        display: none !important;
    }

    .main-page-button{
        margin-left: 0%;
        margin-right: 0%;
        margin-bottom: 5%;
    }

    .main-page-button-position-end{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .my-dropdown{
        padding: 0px;
    }

    .my-dropdown-item{
        padding: .25rem .5rem;
    }

    .btn-border{
        text-align: center;
        white-space: nowrap;
        padding: 5px 10px;
    }

    .text-medium-font{
        font-size: 14px;
    }
    
    .text-large-font{
        font-size: 18px;
    }
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    .logo-img{
        height: 80px; 
        width: 150px;
    }

    .navbar-nav{
        display: flex;
        flex-direction: column;
    }

    .main-page-button{
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
    }

    .my-dropdown{
        padding: 0px;
    }

    .my-dropdown-item{
        padding: .25rem .5rem;
    }

    .btn-border{
        text-align: center;
        white-space: nowrap;
        padding: 5px 10px;
    }

    .text-medium-font{
        font-size: 16px;
    }
    
    .text-large-font{
        font-size: 20px;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .btn-border{
        text-align: center;
        white-space: nowrap;
        padding: 10px 20px;
    }

    .my-dropdown{
        padding: 5px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
    .logo-img{
        height: 110px; 
        width: 200px;
    }

    .navbar-nav{
        display: flex;
        flex-direction: row !important;
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 100%;
    }

    .my-dropdown{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin-top: 10px;
        padding: 0px 0px;
    }

    .text-medium-font{
        font-size: 18px;
    }
    
    .text-large-font{
        font-size: 22px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    .text-medium-font{
        font-size: 20px;
    }
    
    .text-large-font{
        font-size: 24px;
    }
}