:root {
    --white: #FFF;
    --charcoal: #465362;
    --silver: #C4BFC0;
    --seashell: #EEE2DF;
    --rustyred: #3e9a00;
    --canary: #d3a530;
    --emerald: #4bc35e;
}

.waiting {
    color: yellow;
    font-weight: bold;
    background-color: purple;
    font-size: 2em;
}

html, body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* -- NAVBAR -- */
.navbar {
    background-color: var(--charcoal) !important;
}
.navbar .logo{
    position: absolute;
    top: 0px;
    left: 0px;
}
.nav-item a {
    color: var(--white);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
    font-size: 0.85em;
}
.nav-item:hover > a {
    color: var(--rustyred);
}
.nav-item .nav-link {
    margin-left: 5px;
    margin-right: 5px;
}
.nav-item.active a, .nav-item .nav-link.active {
    border-radius: 3px !important;
    color: white !important;
    background-color: var(--rustyred) !important;
}
.navbar-brand {
    color: var(--rustyred) !important;
    font-size: 1.6em;
    padding-top: 0px !important; 
    padding-left: 6px;
    padding-right: 6px;
}
.navbar .navbar-toggler .icon-bar {
    background-color: #fff;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--rustyred); 
    color: white !important;
}
.navbar .navbar-toggler {
    border-color: var(--seashell);
    background-color: var(--seashell);
}
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
    background-color: var(--seashell);
    -webkit-filter: brightness(80%);
}
.custom-toggler.navbar-toggler {
  border-color: rgb(251,186,118);
} 
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
} 
.navbar .dropdown-menu {
    background-color: var(--seashell);
}
.navbar .dropdown-item.active {
    background-color: var(--charcoal);
    color: white;
}
.navbar .dropdown-menu li > a {
    background-color: var(--seashell);
    color: var(--charcoal)
}
.navbar .dropdown-menu li:hover > a {
    color: var(--rustyred);   
}
.navbar .nav-link:focus {
    color: var(--rustyred);
}
.navbar-toggler {
    position: absolute;
    right: 10px;
    top: 10px;
}


@media (max-width: 400px){
    .navbar-brand span {
        font-size: 0.8em !important;
    }
}

@media (max-width: 1349px){
    .navbar .logo{
        width: 80px;
    }
    .navbar-brand span {
        margin-left: 65px;
    }
    .navbar .navbar-nav {
        padding-top: 25px;
    }
    .navbar-nav a {
        padding-left: 20px;
    }
}
@media (min-width: 1350px){
    .navbar .logo{
        width: 100px;
    }
    .navbar-brand span {
        margin-left: 90px;
    }
    .language-dropdown {
        position: absolute;
        right: 10px;
    }
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        justify-content: center;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

.button-language svg {
    height: 35px;
}
.button-language .btn {
    padding-left: 10px;
    padding-right: 10px;
}

.button-language button {
    color: white;
}
.button-language button:hover {
    color: var(--rustyred);
}
.button-language button.active {
    color: var(--white);
}

/* -- /NAVBAR -- */


/* -- BODY -- */

.body-container {
    margin-top: 59px;
}

.social a {
    color: inherit;
    text-decoration: none;
}

/* -- /BODY -- */



/* -- Info-Block -- */

.info-block {
    background-color: transparent;
    color: var(--charcoal);
    right: 0;
    text-align: right;
}

@media (min-width: 454px){
    .info-block .contact span {
        margin-right: 20px;
    }
}
@media (max-width: 453px){
    .info-block .contact span {
        margin-right: 20px;
        display: block;
        text-align: center;
    }
}
.info-block span i {
    margin-right: 4px;
}
.info-block .social {
    position: absolute;
    margin-top: 5px;
    text-align: right;
    right: 0;
    margin-right: 14px;
    font-size: 1.6em;
}
.info-block .social .fb {
    color: #385398;
    background-color: var(--seashell);
    padding: 6px 3px 3px 7px;
    border-radius: 10px;
}
.info-block .social .insta {
    color: #c9376e;
    background-color: var(--seashell);
    padding: 6px 3px 3px 7px;
    border-radius: 10px;
}
.info-block .social .tiktok {
    color: black;
    background-color: var(--seashell);
    padding: 6px 3px 3px 7px;
    border-radius: 10px;
}

/* -- /Info-Block -- */




/* -- SECTION INTRO -- */
#intro{
    text-shadow: 3px 0 var(--charcoal), -3px 0 var(--charcoal), 0 3px var(--charcoal), 0 -3px var(--charcoal), 2px 2px var(--charcoal), -2px -2px var(--charcoal), 2px -2px var(--charcoal), -2px 2px var(--charcoal);
    width: 100%;
    text-align: center;
    color: var(--white);
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-top: 110px;
    padding-bottom: 90px;
}
#intro h1{
    margin-bottom: 25px;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2.2em;
    line-height: 35px;
    text-transform: uppercase;
}
/* -- SECTION INTRO -- */




/* -- SECTION fishing-details -- */

.fishing-details {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.fishing-details > .row {
    margin-top: -109px;
}

.col-description {
    background-color: var(--seashell);
    padding: 0;
}

.col-description .avg-note {
    font-size: 1.1em;
    margin-top: 10px;
    text-align: center;
}
.col-description .avg-note span {
    padding-right: 20px;
}
.col-description .avg-note .bi {
    color: var(--canary);
}

.col-description .flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 4px solid var(--rustyred);
}

.col-description .flex-container > div {
    overflow-y: hidden;
    cursor: pointer;
}
.col-description .flex-container > div > div {
    transition-duration: 0.2s;
}
.col-description .flex-container > div:hover > div {
    transform: translateY(100%);
    transition-duration: 0.2s;
}

@media (min-width: 1200px){
    .col-description .flex-container > div:nth-child(1) {
        margin-right: 2px;
        width: calc(20% - 2px);
    }
    .col-description .flex-container > div:nth-child(5) {
        margin-left: 2px;
        width: calc(20% - 2px);
    }

    .col-description .flex-container > div:nth-child(2),
    .col-description .flex-container > div:nth-child(3),
    .col-description .flex-container > div:nth-child(4) {
        margin-left: 2px;
        margin-right: 2px;
        width: calc(20% - 4px);
    }
}

@media (min-width: 500px) and (max-width: 1199px){
    .col-description .flex-container > div:nth-child(1) {
        margin-right: 2px;
        width: calc(33.33% - 2px);
    }
    .col-description .flex-container > div:nth-child(2) {
        margin-left: 2px;
        margin-right: 2px;
        width: calc(33.33% - 4px);
    }
    .col-description .flex-container > div:nth-child(3) {
        margin-left: 2px;
        width: calc(33.33% - 2px);
    }
    .col-description .flex-container > div:nth-child(4) {
        margin-right: 2px;
        margin-top: 4px;
        width: calc(50% - 2px);
    }
    .col-description .flex-container > div:nth-child(5) {
        margin-left: 2px;
        margin-top: 4px;
        width: calc(50% - 2px);
    }
}

@media (max-width: 499px){
    .col-description .flex-container > div:nth-child(1) {
        margin-right: 2px;
        width: calc(50% - 2px);
    }
    .col-description .flex-container > div:nth-child(2) {
        margin-left: 2px;
        width: calc(50% - 4px);
    }
    .col-description .flex-container > div:nth-child(3) {
        margin-top: 4px;
        width: calc(100% - 2px);
    }
    .col-description .flex-container > div:nth-child(4) {
        margin-left: 2px;
        margin-top: 4px;
        width: calc(50% - 2px);
    }
    .col-description .flex-container > div:nth-child(5) {
        margin-left: 2px;
        margin-top: 4px;
        width: calc(50% - 2px);
    }
}

.col-description .flex-container > div {
    background-color: rgba(70, 83, 98, 0.7);
    height: 240px;
    min-width: 150px;
    
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-shadow: 3px 0 var(black), -3px 0 var(black), 0 3px var(black), 0 -3px var(black), 3px 3px var(black), -3px -3px var(black), 3px -3px var(black), -3px 3px var(black);
}
.col-description .flex-container > div > h2{
    background-color: var(--charcoal);
    color: white;
    text-align: center;
    padding: 8px 0;
    font-size: 1.1em;
    height: 40px;
    margin-bottom: 0px;
}
.col-description .flex-container > div > div:nth-child(2) {
    background-color: rgba(70, 83, 98, 0.7);
    color: white;
    text-align: center;
    padding: 40px 5px;
    font-size: 1.3em;
    height: 200px;
}

/*
.fishing-details .col {
    background-color: #F9F9F9;
    border: 1px solid var(--silver);
}
.fishing-details .col div:nth-child(1){
    width: 60px;
    float: left;
    height: 140px;
    font-size: 35px;
    text-align: left;
    padding-right: 20px;
    padding-top: 8px;
    color: var(--rustyred);
}
.fishing-details .col div:nth-child(2){
    width: calc(100% - 60px);
    float: right;
    height: 60px;
    padding-top: 20px;
    font-size: 1.1em;
}
.fishing-details .col div:nth-child(3){
    width: calc(100% - 60px);
    float: right;
    height: 80px;
    color: var(--charcoal);
}*/

@media (max-width: 991px){
    .col-price {
        padding: 0px;
        margin-top: 10px;
    }
}
.col-price div:nth-child(1) {
    background-color: var(--rustyred);
    color: white;
    padding: 12px 0 12px 0 ;
    font-size: 1.4em;
    text-align: center;
}
.col-price div:nth-child(2) {
    background-color: var(--charcoal);
    color: white;
    padding: 12px 0 12px 0 ;
    font-size: 1em;
    text-align: center;
    font-style: italic;
}
.col-price .help-card:not(.highlighted) {
    margin-top: 7px;
}
.col-price .help-card {
    background-color: var(--seashell);
    padding: 20px 20px;
}
.col-price .help-card h2 {
    font-size: 1.2em;
    text-align: center;
}
.highlight {
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 1.4em;
    text-align: center;
    background-color: var(--rustyred);
    color: white;
}

/* -- /SECTION fishing-details -- */

.card-description {
    padding: 0 40px;
}

.card-description h2 {
    margin: 30px 0px 20px 0px;
    font-size: 1.4em;
}
.card-description h3 {
    margin: 10px 0px 10px 10px;
    font-size: 1.1em;
}
.card-description p {
    margin-left: 20px;
}

.card-description .bi-check2-square {
    color: var(--emerald);
}
.card-description .bi-x-square {
    color: var(--rustyred);
}




.btn-primary {
    background-color: var(--rustyred);
    border: 1px solid var(--silver);
    color: white;
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--rustyred) !important;
    border: 1px solid var(--charcoal) !important;
    filter: brightness(0.8); 
}




.home-right {
    
}
.home-left {
    
}
.home-right h1 {
    font-size: 1.6em;
}

.carousel {
    margin-top: 20px;
    margin-bottom: 30px;
}
.carousel img {
}




footer {
    margin-top: 20px;
    padding: 20px 0;
    background-color: var(--silver);
}
footer a {
    color: inherit;
}
footer .logo {
    text-align: right;
}
footer .footer-text p {
    margin-bottom: 5px;
}
footer .logo img {
    width: 100px;
}