@media screen and (max-width:767px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}
@media screen and (min-width:768px) {
    .desktop {
        display: block;
    }
    .mobile {
        display: none;
    }
}
.logo {
    max-width: 300px;
}
.action-button {
    cursor: pointer;
    display: inline-flex;
    padding: 5px 20px;
    border: 2px solid #64ab5b;
    border-radius: 29px;
    color: #64ab5b !important;
    text-decoration: none !important;
    font-size: 20px;
    font-weight: 500;
}
.action-button-text {
    line-height: 20px;
    position: relative;
    top: 7px;
    margin-left: 10px;
    margin-right: 2px;
}
.page-title {
    font-size: 24px;
    text-align: center;
    color: black;
    /*text-shadow: 1px 1px black;*/
}

/* SEARCHING BY TEXT */
.menu-result {
    display: block;
    z-index: 1000;
    list-style-type: none;
    text-align: left;
    
    background: white;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid gray;
    
    position: absolute;
    margin-top: 51px !important;
    width: 82% !important;
}
.result-item {
    cursor:pointer;
    padding: 7px 0;
    margin-top: 2px;
    border-bottom: 1px solid lightgray;
}
.result-item:last-child(){
    border-bottom: none !important;
}
.result-item:hover,.result-item:focus {
    font-weight:bold;
}
.result-item:active {
}
.search-input {
    display: inline-flex;
    width: 85% !important;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 10px !important;
    border: 1px solid gray;
    border-radius: 5px;
    
    /* to avoid highlight red over input */
    outline: none !important; /* border red hightlight */
    text-decoration: none !important; /* underline red hightlight */
    color: inherit !important; /* text red hightlight */
}
.search-icon { 
    display: inline-flex; 
    position: absolute; 
    right: 15%;
    width: 61px !important;
    margin: 7px !important;
}
    
/* CAROUSEL (that component exist?) */
.carousel-img {
    max-height: 500px;
    max-width: 100%;
    margin: auto;
}
.carousel-inner {
    height: 500px;
    align-content: center;
}
.carousel-control-next,
.carousel-control-prev {
    opacity: 1 !important;
}

/* COMPOSITIONS */
.center {
    text-align:center; 
    align-content: center;
}
.composition {
    padding: 10px !important;
}
.image-composition {
    width: 100%;
    cursor:pointer;
}

/* PRESENTATION */
.presentation {
    padding: 20px;
    text-align: center;
    background: #1a6999;
    /*font-weight: bold;*/
    color: white;
    letter-spacing: 1px;
    word-spacing: 1px;
}
.presentation-title {
    font-size: 27px;
    text-align: center;
    color: #c15f00;
    font-weight: bold;
    margin-top:10px;
    text-shadow: 1px 1px black;
}
.page-description {
    padding: 10px;
}
.list-icon {
    width: 100px;
}

/* CAROUSEL ARROWS */

/*.carousel-arrow-img {*/
/*    position: relative;*/
/*    top: -18px;*/
/*}*/
/*.carousel-arrow {
    color: black;
    font-size: 50px;
}
.carousel-control-next,
.carousel-control-prev {
    filter: invert(100%);
}
changin the color of arr9ow to black: fill='%23000' 
.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}*/
footer {
    padding: 10px;
    background: #fff;
    color: black;
}
.footer-title {
    margin-top: 10px;
    text-align: center;
}
.footer-data {
    display: inline-flex;
    align-items: flex-start;
    margin:10px;
    color: black;
    text-decoration: none;
}

.img-icon {
    margin-right: 10px;
}

/* For category pages: */
.header-category {
    width: 100%; 
    max-width: 800px; 
    text-align:center;  
    margin:auto !important;
}
.img-logo {
    max-width: 300px !important; 
    margin:auto;
}
.img-category {
    margin: 20px auto;
}
.list-category {
    max-width:1200px !important; 
    margin: 20px auto !important;
    text-align:center !important;
}
.title-category {
    font-size: 22px;
    color:#555
}
.tip-category {
    margin-top:20px !important; 
    color:#64ab5b;
}
.footer-category {
    max-width:1200px; 
    margin:auto !important
}
.button-back {
    border-color:#428fe1 !important; 
    color:#428fe1 !important;
    margin-bottom: 30px !important;
}