@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

:root {
    --greenColor: rgb(85, 138, 101);
    --yellowColor: rgb(217, 221, 66);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    /*background: #222 !important;*/
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    position: relative;
}

#navbar {
  /*overflow: hidden;*/
  /*background-color: #f1f1f1;*/
  /*padding: 90px 10px;*/
  transition: 0.4s;
  /*position: fixed;*/
  /*width: 100%;*/
  /*top: 0;*/
  /*z-index: 99;*/
}

.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.card {
    border: 0;
    border-radius: 10px;
    transition: box-shadow 200ms linear;
}

.card:hover {
    box-shadow: 0 0.75rem 1rem rgba(0, 0, 0, .2);
}

header {
    background: var(--greenColor);
    /*text-align: center;*/
    /*position: fixed;*/
    z-index: 999;
    width: 100%;
}

.nav-link {
    font-size: 1.2rem;
    color: white;
}

.nav-link:hover {
    color: black;
}

button:focus {
    outline: 0 !important;
}

.carisma_logo {
    width: 60%;
    height: auto;
}

@media (max-width: 800px) {
    .logo img {
        width: 30%;
    }
}

@media screen and (min-width: 800px) {
    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
    }

    .logo {
        grid-column: 2 / 3;
    }

    .logo img {
        width: 40%;
    }

    nav ul {
        display: flex;
    }

    nav li {
        margin-left: 3em;
        margin-bottom: 0;
    }

    nav a {
        opacity: 1;
        position: relative;
    }

    nav .nav-link::before {
        content: '';
        display: block;
        height: 3px;
        background: #222;
        position: absolute;
        /*top: -.1em;*/
        bottom: 2em;
        left: 0;
        right: 0;
        transform: scale(0, 1);
        transform-origin: left;
        transition: transform ease-in-out 250ms;
    }

    nav .nav-link:hover::before {
        transform: scale(1, 1);
    }
}

.btn:focus {
    box-shadow: 0 0 0 0 !important;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#welcomeSection {
    width: 100%;
    min-height: 40vh;
    background: url("img/shutterstock_63214747.jpg") fixed center center;
    background-size: cover;
    position: relative;
    /*margin-bottom: -80px;*/
}

#welcomeSection:before {
    content: "";
    background: rgba(85, 138, 101, 0.8);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

#imgSection {
    width: 100%;
    min-height: 40vh;
    background: url("/img/shutterstock_529024915.jpg") fixed center center;
    background-size: cover;
    position: relative;
    /*margin-bottom: -80px;*/
}

#imgSection:before {
    content: "";
    background: rgba(217, 221, 66, 0.6);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

@media (max-width: 576px) {
    .welcomeMsg {
        text-align: center;
    }
}

#hero .hero-container {
    /*!*position: absolute;*!*/
    /*bottom: 0;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*display: flex;*/
    /*!*padding-top: 80px;*!*/
    /*!*justify-content: center;*!*/
    /*!*align-items: center;*!*/
    /*flex-direction: column;*/
    /*text-align: center;*/
}

#hero h1 {
    /*margin: 0 0 10px 0;*/
    font-size: 44px;
    font-weight: 300;
    line-height: 56px;
    color: #fff;
}

#hero h2 {
    color: #eee;
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: 300;
}

#hero .btn-get-started {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 28px 10px 28px;
    border-radius: 50px;
    transition: 0.5s;
    border: 1px solid #fff;
    color: #fff;
}

#hero .btn-get-started:hover {
    background: #fff;
    color: #c9a0dc;
    border: 1px solid #c9a0dc;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

@media (max-width: 768px) {
    #hero h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    /*display: none;*/
    width: 40px;
    height: 40px;
    border-radius: 3px;
    right: 15px;
    bottom: 15px;
    background: var(--greenColor);
    color: #fff;
    transition: display 0.5s ease-in-out;
    z-index: 99999;
}

.back-to-top i {
    font-size: 24px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.back-to-top:hover {
    color: #fff;
    background: #488e5f;
    transition: background 0.2s ease-in-out;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    /*padding-bottom: 60px;*/
    /*border: 1px solid red;*/
}

.section-bg {
    background-color: #f2f9f8;
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

.section-title h2 {
    font-size: 36px;
    font-weight: 400;
    /*margin-bottom: 20px;*/
    padding-bottom: 0;
    color: white !important;
}

.section-title p {
    margin-bottom: 0;
}

.sectionTitle:before {
    content: "\2005";
    cursor: pointer;
    background: var(--yellowColor);
    display: inline-block;
    transform: rotate(15deg);
}

.overviewTitle {
    transition: all 200ms linear;
}

.overviewTitle:hover {
    text-shadow: 2px 2px #ccc;
}

.fa-chevron-right {
    color: var(--greenColor);
    margin-right: 1rem;
}

ul {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}


/*--------------------------------------------------------------
# Project Description Section
--------------------------------------------------------------*/

.projectDescription p {
    font-size: 18px;
}

.details-panel-title {
    position: relative;
    /*min-width: calc(100% - 60px)*/
    min-width: 100%;
    left: 0;
}

.details-panel-title::after {
    content: "\f106";
    color: #fff !important;
    right: 0;
    position: absolute;
    font-family: "Font Awesome 5 Pro"
}

.details-panel-title[aria-expanded="false"]::after {
    content: "\f107";
}

.card-header {
    color: white !important;
    font-weight: bold;
    background-color: rgba(85, 138, 101, 0.7) !important;
}

.documentLink {
    color: #555 !important;
    transition: all 80ms linear;
}

.documentLink:hover {
    color: var(--greenColor) !important;
    font-weight: 500;
}

.card-body li {
    font-size: 18px !important;
}

/* Carousel */
.brands {
    width: 100%;
    /*padding-top: 90px;*/
    /*padding-bottom: 90px*/
}

.brands_slider_container {
    height: 280px;
    border: solid 1px #e8e8e8;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    padding-left: 97px;
    padding-right: 97px;
    background: #fff
}

.brands_slider {
    height: 50%;
    margin-top: 50px
}

.brands_item {
    height: 100%
}

.brands_item img {
    max-width: 100%
}

.brands_nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 5px;
    cursor: pointer
}

.brands_nav i {
    color: #e5e5e5;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease
}

.brands_nav:hover i {
    color: #676767
}

.brands_prev {
    left: 40px
}

.brands_next {
    right: 40px
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    background: var(--greenColor);
    padding: 30px 0;
    color: #fff;
    font-size: 14px;
}

#footer .copyright {
    text-align: center;
}

#footer .credits {
    padding-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #fff;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

.w3-animate-left{position:relative;animation:animateleft 0.6s}@keyframes animateleft{from{left:-600px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.6s}@keyframes animateright{from{right:-600px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.6s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}