/* ==========================================================================
   General styles
   ========================================================================== */
html {
  scroll-padding-top: 75px; 
}  

body {
    background: #f1f1f1;
}

section {
    margin-top: 20px;
}

section h2, h3, h4, h5 {
    text-align: center;
    color: #666666;
}


section h2 {
    text-align: center;
    color: #666666;
}

section .title {
    padding-top: 20px;
}

section .title p {
    padding-top: 20px;
    padding-bottom: 20px;
}

hr {
    margin-top: 0px;
    height: 10px;
    border: 0;

    -moz-box-shadow: inset 0 10px 10px -10px rgba(38, 67, 72, 1);
    -webkit-box-shadow: inset 0 10px 10px -10px rgba(38, 67, 72, 1);
    -ms-box-shadow: inset 0 10px 10px -10px rgba(38, 67, 72, 1);
    -o-box-shadow: inset 0 10px 10px -10px rgba(38, 67, 72, 1);
    box-shadow: inset 0 10px 10px -10px rgba(38, 67, 72, 1);
    /* rgba(38, 67, 72, 1) = #264348  */
}

// To address the blue highlight icon issue for IG icon
// a .fa-instagram {
//   color: black; /* or any specific color you want */
// }
a .fa-brands {
  color: black; /* or any specific color you want */
}



/* ==========================================================================
   Navi
   ========================================================================== */

.menu-li:hover {
    font-weight: 700;
}


/* --------------------------------------
   Carousel 
   -------------------------------------- */




/* ==========================================================================
   News
   ========================================================================== */

#news .old {
    display: none;
    /*  hide: none, show: inline   */
}

#newsrecent,
#newsall,
#newsmiddlebar,
#newsrightroundbracket,
#newsleftroundbracket {
    font-size: 60%
}

#newsrecent {
    font-weight: bold;
}


.post p {
    padding: 10px 0px;
    margin-bottom: 10px;
}

.post .postname {
    font-size: 110%;
}


/* ==========================================================================
   About Us
   ========================================================================== */

#about h4 {
    margin: 0px 0px 20px 0px;
}

#about h5 {
    margin: 0px auto;
}



#about img {
    margin: 10px auto;
    display: block;
    border-radius: 10%;
}

#about .jobtitle {
    font-style: italic;
}


/* ==========================================================================
   Gallery
   ========================================================================== */

#gallery .title p {
    text-align: right;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}


.subtitle {
    margin: 50px auto 10px auto;
}

.photo-wrapper img {
    margin: 10px auto;
    display: block;
    border-radius: 5%;
}



.photo-wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
}




.photo-wrapper:hover {
    background-color: #264348;
    background-image: url(../images/zoom.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-radius: 5%;
}



.photo-wrapper:hover .photo {
    opacity: 0.4;
}





/* ==========================================================================
   Representation
   ========================================================================== */
#representation .hidetemp {
    display: none;
}

.store p {
    padding: 10px 0px;
    margin-bottom: 10px;
}

.store .storename {
    font-size: 110%;

}

/* ==========================================================================
   Event
   ========================================================================== */
#event .past {
    display: none;
    /*  hide: none, show: inline   */
}

#evtupcoming,
#evtall,
#middlebar,
#rightroundbracket,
#leftroundbracket {
    font-size: 60%
}

#evtupcoming {
    font-weight: bold
}


.market p {
    padding: 10px 0px;
    margin-bottom: 10px;
}

.market .marketname {
    font-size: 110%;
}






/* ==========================================================================
   Contact
   ========================================================================== */




/* ==========================================================================
   footer
   ========================================================================== */

footer {
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background: #d1d1d1;
}




/* --------------------------------------
   Media Queries for Carousel
   -------------------------------------- */


@media (max-width: 991px) {

    /* padding not to hide the top area of each section by sticky nav bar - mobil view */ 
    html {
    scroll-padding-top: 300px; 
    }  

    #topCarousel .item {
        height: 437px;
    }

    .carousel-caption h4 {
        font-size: 12px;
        color: white;
    }
}





/* (2) desktop - lg    992px - 1199px */


@media (max-width: 1199px) {
    #topCarousel .item {
        height: 564px;
    }

    .carousel-caption h4 {
        font-size: 32px;
        color: white;
    }
}


/* (3) Large desktop    1200+ px */
@media (min-width: 1200px) {

    #topCarousel .item {
        height: 702px;
    }

    .carousel-caption h4 {
        font-size: 56px;
        color: white;
    }

}