/* Var */
/* ********************************************************************************  */
:root {    
    --color-grey-medium:        hsla(0, 0%, 80%, 0.988);
    --color-grey-medium-dark:   hsla(0, 0%, 54%, 0.988);    
    --color-dark:               hsla(0, 0%, 0%, 0.991);
    --color-red-bright:         #ea4335;
    --color-yellow:             #f4a712;
    --color-green-bright:       #34a853;
    --color-blue-pastel:        #3575b5;
    --color-dark-blue:          #113752;
    --color-purple-dark:        #5b28cb;
    --color-dark-brown:         #626060;
    --color-blue-vibrant:       hsla(203, 100%, 54%, 0.967);
    --color-blue-50a:           hsla(218, 63%, 18%, 0.45);
    --color-transparent:        transparent;
    
    --color-dark-dark:          #010101;

    --color-bright:  #f4f5f6;
    --color-blue-light: #209dd9;
    --color-blue-dark:  #122e56;
    --color-grey-light: #ebebeb;
    --color-orange: #f16322;
}



/* Font Family */
/* ********************************************************************************  */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

h1, h2, h3, h4 { font-family: 'Open Sans', sans-serif; }

p, li, blockquote,
.timer-number,
.number-label,
.timer-colon { font-family: 'Manrope', sans-serif; }



/* Font Color */
/* ********************************************************************************  */
h1  { color: var(--color-dark); text-shadow: var(--text-shadow); }
h2  { color: var(--color-dark); text-shadow: var(--text-shadow); }
h3  { color: var(--color-dark); text-shadow: var(--text-shadow); }
p, li { color: var(--color-dark); }


h1 a:link, h2 a:link, h3 a:link,
h1 a:visited, h2 a:visited, h3 a:visited {
    color: var(--color-dark)
}

footer p { color: var(--color-dark); }


/* Theme Color */
/* ********************************************************************************  */
.highlight-text { color: var(--color-dark-dark); }
.highlight-bg   { background-color: var(--color-dark-dark); }

.dropdown-center button {
    width:100%; 
    border: 3px solid var(--color-grey-medium); 
    border-radius: 15px;
}

.dropdown-center button span {
    color: var(--color-grey-medium);
}

#sms { background-color: #00283e;}

/* Header */
/* ********************************************************************************  */
header {
    background-image: url("../images/masthead-bg-texture.jpg");
    background-color: var(--color-dark-dark);
    background-size:cover !important;
    background-repeat: no-repeat;
    background-position: bottom;
    min-width: 100%;
    z-index: 999;
}

#header #header-group { 
    margin-top: 1.8rem; 
    position: relative; 
    top: 3px; 
}

/* Video Carousel */

#playerContainer, #container-carousel { 
    box-sizing: border-box;
    padding: 2px;
    border-width: 4px;

    border-style: solid;
    border-width: 4px;
    border-image: linear-gradient(45deg, rgb(204, 204, 204), #8a8a8a) 1;

    -webkit-box-shadow: 0px 0px 14px 1px rgba(17, 55, 82, 1);
    box-shadow: 0px 0px 14px 1px rgba(17, 55, 82, 1);
}

#playerContainer:hover, #container-carousel { 
    box-sizing: border-box;
    padding: 2px;
    border-width: 4px;
    
    transition: 0.3s;
    
    transform: scale(1.01);
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 18px 1px rgba(17, 55, 82, 1);
    box-shadow: 0px 0px 18px 1px rgba(17, 55, 82, 1);
}

/* Body */
/* ********************************************************************************  */
body {
    background-image: url("../images/bg-texture.jpg");
    background-color: var(--color-dark-dark);
    background-size:cover !important;
    background-repeat: no-repeat;
    background-position: middle;
    background-attachment: fixed;
    padding: 0px;
    margin: 0px auto;
    max-width:100%;
}

.mobile-image,
.mobile-image-article {
    display: none;
}


.main-event { 
    background-color: var(--color-grey-light);
    color: var(--color-grey-light);
    width: 75%;
    padding-top: 15px;
    padding-left: 20px;
    overflow: auto;
}

.main-button {
    background-color: rgb(224, 117, 10);
    padding: 30px;
    margin-left: -12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: none;
}

.main-button:hover {
    background-color: #113752;
}

.article-event-container {
    margin-top: 3.5rem;
}

.article-event {
    background-color: var(--color-grey-medium);
    width: 100%;
    margin-left: -1rem;
}

.article-hero {
    width: 90%;
}

.article-image {
    width: 85%;
}

.article-2-image {
    width: 30%;
    margin-left: 300px;
}

@media (max-width: 768px) {
    .desktop-image {
        display: none;
      }
    
    .mobile-image {
        display: block;
        width: 75%;
        margin-right: auto;
        margin-left: auto;
      }
    
    .main-event {
        display: block;
        margin-left: 0;
        transform: none;
    }

    .article-event-container {
        margin-top: 0;
    }

    .article-event-header {
        margin-top: 0;
    }

    .article-event {
        margin-left: 2.5rem;
        width: 80%;
    }

    .desktop-image-article {
        display: none;
    }

    .mobile-image-article {
        display: block;
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .article-content-container {
        margin: 0 15px;
        padding: 0 15px;
    }
}

.event-text {
    color: var(--color-dark-blue);
}

.container-event-detail,
#sms,
.block-event-detail { background-color: var(--color-dark-blue); }

.author {
    width: 75%;
    display: block;
    margin: 0 auto;
}

.icon-event-detail { 
    width: 20%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    filter: invert(19%) sepia(7%) saturate(5053%) hue-rotate(163deg) brightness(97%) contrast(97%);
    /* filter: invert(1); */
 }

 #article-listing button {
    background-color: rgb(224, 117, 10);
    color: var(--color-grey-light);
 }

.button-effect:hover {
    transform: scale(1.05);
    filter: contrast(130%);
    cursor: pointer;
    filter: drop-shadow(0px 0px 24px rgb(224, 117, 10) );
 }

 .container-event-detail {
    background-image: url("../images/bg-texture.jpg");
 }


/* SMS */
/* ********************************************************************************  */
.campaign-text { font-size: clamp(1.78rem, 4vw, 3.5rem); }
.bh-sms-marketing-success p,
.bh-sms-marketing-disclaimer-text p { color: #ffffff !important; }

@media (max-width: 768px) {
    .sms-text-container {
      display: flex !important;
      justify-content: center !important;
    }
}


/* Footer */
/* ********************************************************************************  */
footer img { 
    width: 120px;
    /* opacity: 0.3; */
    /* filter: brightness(1) invert(1) grayscale(1);
    -webkit-filter: brightness(100%) invert(100%) grayscale(100%); */
}
/* 
.layout-group-2 {
    background-image: url('../image/site/site--bg-2000x1123.jpg');
    background-color: var(--color-dark-dark);
    background-size:cover !important;
    background-repeat: no-repeat;
    background-position: middle;
    background-attachment: fixed;
    padding: 0px;
    margin: 0px auto;
    max-width:100%;
} */