/* General rules */

:root {
    --brand: 0px;
    --slider: 0px;
}

.form-error-icon {
    color: #ff3333;
    border: dashed #ff3333 1px ;
}

#see-activity {
    border: solid #92897d 2px;
}

#ul-header li a {
    color: #92897d;
    font-weight: 700;
}

li {
    list-style: none;
}

li.breadcrumb-item a {
    text-decoration: none;
    color: #ff3333;
}

/*Utility class*/
    /* wrap text */
    .my-wrap {
        overflow-wrap: break-word;
    }

    /* opacity */
    .opacity-3 {
        opacity: 0.5;
    }

    /* Color */

    .bg-red-light {
        background-color: #ff3333;
    }

    .bg-red {
        background-color: #e2232e;
    }

    .bg-green {
        background-color: #339933;
    }

    .bg-yellow {
        background-color: #fdc131;
    }


    .bg-white {
        background-color: #fff;
    }

    .bg-light-grey {
        background-color: #ebe6df;
    }

    .bg-grey {
        background-color: #92897d;
    }

    .white {
        color: white;
    }

    .red {
        color: #e2232e;
    }

    .grey-black {
        color: #92897d;
    }

    .black-grey {
        color: #48433c;
    }

    .green {
        color: #339933;
    }

    /* Size */

    .w-h-100 {
        width: 100%;
        height: 100%;
    }

    .w-100-px {
        width: 100px;
    }

    .vh-20 {
      height: 20vh;
    }

    .vh-33 {
        height: 33vh;
    }
        
    .pr-5 {
        padding-right: 2rem !important;
    }

    /* Font sizes */

    .fs-25 {
        font-size: 0.25rem;
    }

    .fs-50 {
        font-size: 0.5rem;
    }

    .fs-75 {
        font-size: 0.75rem;
    }

    .fw-700 {
        font-weight: 700;
    }

    /* Position */

    .relative{
        position: relative;
    }

    .flex-column-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


/*** Pages ***/
    /*Nav*/

    #badge-tel {
        position: absolute;
        top: 0;
        right: 20px;     
        color: #92897d;
        font-weight: 700;
        border: solid #fdc131 3px;
        height: 40px;
        width: 170px;
    }

    #size-tel {
        width: 30px;
    }
  
    #size-logo {
        width: 80px;
    }

    /*Header*/

    .size-icon {
        width: 50px;
    }
    
    #slider {
        width: min-content;  
    }

    @keyframes slider {
        0% {
            transform: translateX(var(--brand));
        }
    
        100% {
            transform: translateX(var(--slider));
        }
    }

    #main-image {
        height: 10vh;
        background-image: url("../../../uploads/header/header.jpg");
        background-size: cover;
    }

    h1 {
        font-size: 1rem;
        font-weight: bold;
        color: white;
    }

    /* organizational chart */
    .org-line {
        display: grid;
        grid-template-columns: 30px, 1fr;
        grid-template-rows: 1fr, 1fr;
    }

    .org-line-horizontal-top {
        grid-column: 2 ;
        grid-row: 1;
        border-right: 0 !important;
    }

    .org-line-horizontal-bottom {
        grid-column: 2 ;
        grid-row: 2;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    /* home page questions */

    #size-logo-questions {
        width: 50%;
    }

    /* partner height */

    .logo-partner {
        height: 20vh;
    }

    #partner-h2 {
        font-size: 1.25rem;
    }

    /* Footer */

    #size-logo-footer {
        width: 80%;
    }

    .footer-title {
        font-size: 1.2rem;
    }

    /* gallery */
    .mansory {
        columns: 2;
    }

    .filters {
        font-weight: bolder;
        color: #92897d;
   }

   .form-check-input:checked {
        background-color: #339933;
        border-color: #339933;
   }

    /* paginator */
   .page-item.active .page-link {
        background-color: #92897d;
        border-color: #92897d;
    }

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

        /* Nav */

        #size-logo {
            width: 100px;
        }
    
        #badge-tel {
            right: 60px;     
        }

        /* header */

        #main-image {
            height: 15vh;
        }

        h1 {
            font-size: 1.3rem;
        }

    /* gallery */

    .mansory {
        columns: 3;
    }
}

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

    /* General rules */

        /* Nav */

        #size-logo {
            width: 120px;
        }
    
        #badge-tel {
            right: 90px;     
        }

        /* header */

        #main-image {
            height: 19vh;
        }

        h1 {
            font-size: 1.7rem;
        }

        /* partner */
        #partner-h2 {
            font-size: 1.5rem;
        }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {

    /* General rules */

        /* Nav */

        #size-logo {
            width: 140px;
        }
    
        #badge-tel {
            top: 80px;
            right: 100px;     
        }

        #ul-header {
            position: absolute;
            top: 45px;
        }

        /* header */

        #main-image {
            height: 23vh;
        }

        h1 {
          font-size: 2.5rem;
        }

        /* partner */

        #partner-h2 {
            font-size: 1.7rem;
        }
 
        /* survey */

        #link-questions {
        position: absolute;
        top: -10px;
        right: 0;
        }

    /*Utility class*/

    .rounded-lg-0 {
        border-radius: 0 !important;
    }

    .relative-lg {
      position: relative;
    }
  }

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

    /* General rules */

    #size-logo {
        width: 160px;
    }

    #badge-tel {
        right: 130px;     
    }
    
        /* Nav */

        #ul-header {
            top: 55px;
        }

        /* header */
        
        h1 {
            font-size: 2.9rem;
        }
        
        /* footer */

        .footer-title {
            font-size: 1.4rem;
        }
        
        /* partner */
        
        #partner-h2 {
            font-size: 2rem;
        }

        /* gallery */

        .mansory {
            columns: 4;
        }
}

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

}