/* @font-face {
    font-family: "CustomFont";
    src: url("https://yoursite.com/css/fonts/CustomFont.eot");
    src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
    url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
    url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
} */
/* Sora_Regular_400.ttf */

/* @font-face {
    font-family:"Sora";
    src: url("../SERBA_SERBI_WEBSITE/ASSETS/Sora_Font_Family/Sora_Regular_400.ttf") format("truetype");
} */

/* @font-face {
    font-family: 'Gotham Black';
    src: url("../SERBA_SERBI_WEBSITE/ASSETS/Gotham_Bold_Font/Gotham-Bold.woff");
} */

body {
    /* font-family: 'Sora', Arial, sans-serif; */
    font-family: Gotham Black;
}

.bg-black {
    background-color: #000000;
}

.bg-body-page {
    background-color: #0f0f0f;
}

.bg-1 {
    background-color: #00FFE0;
}

.bg-2 {
    background-color: #FF00C7;
}

.bg-3 {
    background-color: #FFE967;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-50 {
    margin-bottom: 50px;
}

.padding-20 {
    padding: 20px;
}

.text-center {
    text-align: center !important;
    align-self: center !important;
}

.text-bold {
    font-weight: bold;
}

.text-white {
    color: #FFFFFF;
}

.text-grey {
    color: #888888;
}

.title5{font-size: 18px; line-height: 1.1; text-align: left; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; padding-bottom: 35px;}

.flex-direction-row {
    flex-direction: row;
}

.float-left {
    float: left;
}

.hover-pointer:hover {
    cursor: pointer;
}

.content-center {
    align-items: center;
    align-self: center;
}

/* custom large or mobile */
#our-shows-mobile { display: none; }
#featured-mobile { display: none; }
/* end custom large or mobile */

.navbar-custom {
    background-color: transparent}

.nav-item {
    padding-left: 15px;
    padding-right: 15px;
}

/* ===================== PLAY RADIO SECTION ========================== */

.play-radio {
    background-color: #FFE967;
    justify-content: center;
}

.play-radio-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding-top: 10px;
    padding-bottom: 20px;
}

.play-pause {
    margin-right: 5px;
    padding-top: 2px;
}

.title-and-audio-control {
    display: flex;
    flex-direction: column;
}

.audio-control {
    display: flex;
    flex-direction: row;
}

.play-radio-title {
    text-align: left;
    padding-top: 20px;
    color: #000000;
    font-size: 20px;
}

#stream {
    display: none;
}

#volume-control {
    width: 100%;
}

.img-play-pause {
    border-radius: 50%;
}

#btn-pause {
    display: none;
}

.btn-volume {
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 2px;
    float: left;
}

#btn-volume-off {
    display: none;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Chromium */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

/* ===================== END PLAY RADIO SECTION ========================== */

/* ========================= RESPONSIVE DISPLAY ============================ */

@media only screen and (max-width: 600px) {
    #stream {
        width: 100%;
    }
}

@media only screen and (min-width: 600px) {
    #stream {
        width: 400px;
    }

    .our-shows-container {
        min-height: 300px;
        padding: 20px
    }

    .audio-container {
        max-width: 60%;
    }
}

/* ======================= END RESPONSIVE DISPLAY ====================== */

/* ======================= OUR SHOWS ====================== */

.our-shows-title {
    color: #FFFFFF;
    text-align: center;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 25px;
}

.img-show {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.grid-odd {
    background-color: #00FFE0;
    max-width: 100%;
    margin: 5px;
}

.grid-even {
    background-color: #FF00C7;
    max-width: 100%;
    margin: 5px;
}

.our-shows-grid {
    transition: transform .2s;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.our-shows-grid:hover {
    cursor: pointer;
    -ms-transform: scale(1.25); 
    -webkit-transform: scale(1.25);
    transform: scale(1.25); 
}
/* ===================== END OUR SHOWS ==================== */

/* ===================== SPOTIFY ==================== */

.playlist {
    background-color: transparent;
    max-height: 500px !important;
    margin-bottom: 50px;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.playlist-title {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    background-color: #FF00C7;
    color: #FFFFFF;
    height: 80px;
    justify-content: center;
    border-radius: 5px;
}

.playlist-title-text {
    padding-top: 15px;
    align-content: center;
}

.playlist-body {
    height: 380px !important;
}

/* ===================== END SPOTIFY ==================== */

/* ===================== MESSAGE ==================== */

.message {
    background-color: transparent;
    max-height: 500px !important;
    margin-bottom: 50px;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.message-title {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    background-color: transparent;
    color: #FFFFFF;
    min-height: 80px;
    justify-content: center;
    border-radius: 5px;
}

.message-title-text {
    padding-top: 15px;
    align-content: center;
}

.message-body {
    max-height: 380px !important;
    overflow: auto;
    padding-right: 5px;
    padding-left: 5px;
}

.message-card {
    border-radius: 10px;
    flex-direction: row;
    /* background-color: #00FFE0; */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.message-card:hover {
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.message-card-title {
    font-size: 18px;
}

.message-card-subtitle {
    font-size: 10px;
    // color: rgb(70, 70, 70);
}

.message-card-body {
    font-size: 14px;
}

.message-card-empty {
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    margin-top: 150px;
}

/* ===================== END MESSAGE ==================== */


/* ===================== TWITTER ==================== */
.tweets-wrapper {
    background-color: transparent;
    max-height: 500px !important;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
}

.tweets {
    height: 460px !important;
    overflow: auto;
    margin-bottom: 20px;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
}
/* ===================== END TWITTER ==================== */

/* ===================== ARTICLE ==================== */
.article-content {
    background-color: transparent;
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 5px;
}

.article-content:hover {
    background-color: rgba(255, 255, 255, 0.034);
}

.article-photo {
    flex: 1;
    text-align: center;
    background-color: #00FFE0;
    height: 200px;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.article-title {
    flex: 1;
    margin-bottom: 10px;
}
.article-title-text {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
}
.article-preview {
    flex: 1;
}
.article-preview-text {
    color: #FF00C7;
    font-size: 14px;
}

#show-all-article {
    text-align: right;
    /* color:rgba(255, 255, 255, 0.5) */
    color: #0d6efd;
}

#show-all-article:hover {
    /* color: #FFFFFF; */
    cursor: pointer;
}

.img-news {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
/* ===================== END ARTICLE ==================== */

/* ===================== ARTICLE / BLOG PAGE ==================== */
.article-page-title {
    color: #FFFFFF}

.article-page-sub-title {
    color: #888888}

.article-page-body {
    font-family: Arial;
    color: rgb(255 255 255 / 80%);
}
/* ===================== END ARTICLE / BLOG PAGE ==================== */

/* ===================== YOUTUBE ==================== */
.youtube-inner {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 50px;
}

/* custom carousel */
.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5% !important;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}
/* ===================== END YOUTUBE ==================== */

/* ===================== FOOTER ==================== */
.icon-contacts {
    float: left;
    margin-right: 20px;
}

.contacts-content {
    flex-direction: row;
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
}

/* ===================== END FOOTER ==================== */

/* ============================= toTop ====================== */
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; z-index: 1000; overflow:hidden; width:50px; height:50px; border:none; text-indent:100%; background:url(../images/totop.gif) no-repeat left top; }
#toTopHover { background:url(../images/totop.gif) no-repeat left bottom; width:50px; height:50px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus { outline:none; }



/*
 *  Scrollbar
 */

 .custom-scrollbar::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
     background-color: #F5F5F5;
 }
 
 .custom-scrollbar::-webkit-scrollbar
 {
     width: 5px;
     background-color: #F5F5F5;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
     background-color: rgba(107, 107, 107, 0.5);;
     /* background-color: rgba(139, 139, 139, 0.7); */
 }


 /* 
 Modal Custom
 */

 /* The Modal (background) */
  .modal-custom {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  /* Caption of Modal Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation */
  .modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

/* .SandboxRoot.env-bp-550 .timeline-Tweet-text {
    font-size: 12px !important;
    font-family: 'Gotham Black' !important;
}

.TweetAuthor-name .Identity-name .customisable-highlight {
    font-family: 'Gotham Black' !important;
}

.SandboxRoot.env-bp-330 .TweetAuthor-name, .SandboxRoot.env-bp-430 .TweetAuthor-name, .SandboxRoot.env-bp-550 .TweetAuthor-name  {
    font-family: 'Gotham Black' !important;
} */

/* ============================= slick ====================== */
.img-responsive{width: auto \9;}
.slick-slider-wrapper{padding-top: 100px; padding-bottom: 100px; position: relative; overflow: hidden;}
.slick-slider-wrapper .container{position: static;}
.slick-slider{text-align: center; position: static; margin-bottom: 0;}
.slick-slider *:focus{outline: none;}

.slick-list{overflow: visible;}

.slick-prev{left: 3%; z-index: 10; width: 53px; height: 52px; background: url(../images/prev.png) left top no-repeat;}
.slick-prev:focus{background: url(../images/prev.png) left top no-repeat;}
.slick-prev:hover{background: url(../images/prev.png) left bottom no-repeat;}
.slick-prev:before{display: none;}

.slick-next{right: 3%; z-index: 10; width: 53px; height: 52px; background: url(../images/next.png) left top no-repeat;}
.slick-next:focus{background: url(../images/next.png) left top no-repeat;}
.slick-next:hover{background: url(../images/next.png) left bottom no-repeat;}
.slick-next:before{display: none;}

.slick-center .slick-slider-inner{transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); z-index: 2;}

.slick-slider-inner{position: relative; z-index: 1; margin-left: 15px; margin-right: 15px;
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.slick-slider-inner figure{display: block; position: relative; background: #252525;}
.slick-slider-inner figure img{width: 100%; display: block; opacity: 0.3; filter:alpha(opacity=30);
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.slick-center .slick-slider-inner figure img{opacity: 1; filter:alpha(opacity=100);}
.slick-slider-inner .caption{position: absolute; width: 100%; left: 0; bottom: 0;}
.slick-slider-inner .caption{opacity: 0; filter:alpha(opacity=0);
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.slick-center .slick-slider-inner .caption{padding: 0 10px 20px; opacity: 1; filter:alpha(opacity=100);}
.slick-slider-inner .slick-slider-overlay{position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100;}

.slick-center .slick-slider-inner .caption .txt1{line-height: 1; padding-bottom: 5px;}
.slick-center .slick-slider-inner .caption .txt1 span{display: inline-block; font-size: 10px; font-weight: bold; background: #cf101f; padding: 2px 5px;}

.slick-center .slick-slider-inner .caption .txt2{line-height: 1; padding-bottom: 5px;}
.slick-center .slick-slider-inner .caption .txt2 span{display: inline-block; font-size: 22px; font-weight: bold; background: #cf101f; padding: 2px 5px;}

.slick-center .slick-slider-inner .caption .txt3{line-height: 1;}


.slick-center .slick-slider-inner .slick-slider-overlay{display: none;}


/* ============================= slick end ====================== */

/* ============================= blog ====================== */
.blog_sidebar{margin-bottom: 30px;}
.blog_content{margin-bottom: 30px;}

.latest2{padding: 0; margin: 0 0 60px; list-style: none;}
.latest2 li{display: block; float: left; padding: 0 3px 3px 0;}
.latest2 li a{display: block;text-decoration: none;}
.latest2 li a figure{position: relative;}
.latest2 li a figure img{position: relative;}
.latest2 li a figure em{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #fff; opacity: 0; filter:alpha(opacity=0);
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.latest2 li a:hover figure em{opacity: 1; filter:alpha(opacity=100);}

.news2_wrapper{padding-bottom: 40px;}
.news2{margin-bottom: 20px;}
.news2 a{display: block; text-decoration: none; line-height: 1.5;}
.news2 a .txt1{ font-size: 18px;
transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.news2 a:hover .txt1{color: #0c9ec3;}
.news2 a .txt2{ font-size: 14px;}

.cat1{padding: 0; margin: 0 0 50px; list-style: none;}
.cat1 li{padding: 0 0 15px; margin: 0; list-style: none;}
.cat1 li a{display: block; color: #fff; line-height: 1.2; text-decoration: none;}
.cat1 li a:hover{color: #0c9ec3;}

.tags2{padding-bottom: 50px;}
.tags2 a{text-decoration: none;}
.tags2 a:hover{color: #0c9ec3;}
.tags2 span{padding: 0 13px;}

.blockquote1{margin-top: 20px; margin-bottom: 20px; background: #0c9ec3; padding: 10px; color: #fff; font-size: 24px; font-weight: 300; border: none; margin-left: 3%; font-style: italic; line-height: 1.4;}

.blockquote2{margin-top: 20px; margin-bottom: 20px; background: none; padding: 10px; color: #fff; font-size: 24px; font-weight: 300; border: none; margin-left: 3%; font-style: italic; line-height: 1.4;}
.blockquote2 span{font-weight: 300; color: #888888; font-size: 14px; font-style: normal; padding-top: 10px; display: block;}



.post{margin-bottom: 50px;}
.post.post-full{margin-bottom: 20px;}
.post .post-header{padding-bottom: 20px;}
.post .post-header .post-image{position: relative;}
.post .post-header .post-image img{width: 100%;}

.post .post-story{}

.post .post-story .post-story-body{margin-bottom: 30px;}

.post .post-story .post-story-link{}

.num-comments{font-size: 18px; color: #ffffff; font-weight: 300; padding: 0 0 20px 0; text-transform: uppercase; letter-spacing: 4px;}

.comment-block{margin-bottom: 30px;}
.comment-block.left1{margin-left: 125px;}
.comment-block figure{float: left; margin-right: 20px;}
.comment-block figure img{}
.comment-block .caption{overflow: hidden;}
.comment-block .caption .top{padding-bottom: 12px; line-height: 1.4;}
.comment-block .caption .top .left{float: left;}
.comment-block .caption .top .right{float: right;}
.comment-block .caption .top .right a{color: #888888; text-decoration: none;}
.comment-block .caption .top .txt1{color: #fff; font-size: 18px;}
.comment-block .caption .top .txt2{color: #888888;}
.comment-block .caption .txt{color: #fff;}

.live-comment{padding-top: 20px; padding-bottom: 20px;}
.live-comment .live-comment-title{ font-weight: 300; font-size: 18px; color: #fff; padding-bottom: 20px; text-transform: uppercase; letter-spacing: 4px;}

.pager_wrapper{padding-top: 15px; margin-bottom: 20px;}
.pager{display: block; text-align: right; margin: 0;padding: 0; font-family: 'Roboto'; font-weight: 700; font-size: 12px; text-transform: uppercase;}
.pager li{margin-left: 10px; margin-bottom: 10px; display: inline-block;}
.pager li:first-child{margin-left: 0;}
.pager li > a{display: inline-block; border: 1px solid #676767; padding: 0px 2px; border-radius: 2px; background: none; color: #FFFFFF; text-align: center; min-width: 40px; line-height: 36px; text-decoration: none;}
.pager li > a:hover{text-decoration: none; background: none; color: #FFFFFF;}
.pager li.active > a{background: #0984e3; color: #fff; cursor: default; text-decoration: none; border-color: #c80913;}
.pager .prev{}
.pager .prev > a{float: none; background: none; color: #fff; padding: 0 30px; border: 1px solid #676767; text-align: center;}
.pager .prev > a:hover{}
.pager .next{}
.pager .next > a{float: none; background: none; color: #fff; padding: 0 30px; border: 1px solid #676767; text-align: center;}
.pager .next > a:hover{}


/* ============================= blog end ====================== */

@media (min-width: 768px) and (max-width: 991px) {  
    .slick-center .slick-slider-inner .caption .txt2 span{font-size: 15px;}
}

@media (max-width: 480px) {
    .slick-center .slick-slider-inner .caption .txt2 span{font-size: 12px;}
}