.speakerList .box {
    width: 24%;
    margin: 20px 5px;
    border: 1px solid #ae1c28;
    display: inline-grid;
    height: 500px;
}
.fourcolumn .box{
  border: 1px solid #060e3a !important;
  background:#060e3a !important;
}

.speakerList .box .thumbnail{
    border: none;
    border-right: 0px !important;
}

.speakerList .box:hover h4{
    color:#ae1c28 !important;
}

.socialMedia{
        margin-top: 25px;
}
a.lkndn .fa{
    border: 2px solid #ae1c28;
    padding: 10px;
    font-size: 20px;
    margin-bottom: 11px !important;
	color:#060e3a;
}

.fourcolumn .lkndn .fa {
    color:#fff !important;
    border: 1px solid #fff;
}
.box p{
    font-size: 14px;
}

.sideLeft {
    width: 60%;
    float: left;
    padding-left: 20px;
    padding-bottom: 50px;
}


.sideRight {
    width: 35%;
    float: right;
   
}

.sp_wrapper .sideRight img{
     border-right: 7px solid #ae1c28;
}

.sp_wrapper{
    height: auto;
    overflow: hidden;
    margin-top: 60px;
    margin-bottom: 60px;
}
.sp_wrapper .sideLeft h1 {
    position: relative;
    font-size: 45px !important;
    margin-bottom: 25px !important;
	font-weight:bold !important;
}
.sp_wrapper .sideLeft h1:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 64px;
    top: 50%;
    transform: translate(0, -50%);
    left: -20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ae1c28 !important;
}

.sp_wrapper .sideLeft h3{
    color: #ae1c28;
    margin-left: 3px;
    margin-bottom: 10px;
    font-size: 23px;
}

.sp_wrapper .sideLeft h4 {
    color: #6771bd;
    text-transform: uppercase;
    margin-left: 4px;
    line-height: 40px;
}

.sp_wrapper .sideLeft p {
    margin-left: 7px;
    margin-bottom: 30px;
}
.sp_wrapper .sideLeft span a{    
    border: 1px solid #ae1c28;
    padding: 10px;
    margin-left: 9px;
    font-size: 25px;
}

.speakerList .box h4{
    margin-bottom: 10px;
    padding: 0px 10px;
	color:#060e3a;
}

.fourcolumn .box h4{
    color:#fff !important;
}

.fourcolumn .box p{
    color:#fff !important;
}

.speakerList .box p{
    margin-bottom: 5px;
    padding-left: 10px;
	color:#000;
}

.lkndn {
    font-size: 25px;
    margin-left: 10px;
    padding: 1px;
    margin-bottom: 0px !important;
}

/* 
    Reviews
*/

.snip1533 {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    color: #9e9e9e;
    font-size: 16px;
    margin: 20px 10px;
    position: relative;
    text-align: center;
    background-color: #060e3a;
    border-radius: 5px;
    border-top: 5px solid #ae1c28;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.snip1533 p{
    color: #000 !important;
}

.snip1533 *,
.snip1533 *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.snip1533 figcaption {
    padding: 0% 0% 5% 0%;
}
.snip1533 .pname {
    color: #ae1c28;
    font-size: 13px !important;
    margin-bottom: 0px !important;
    letter-spacing: 0.5px;
	text-transform:uppercase;
}
.snip1533 .revtitle {
    color: #000;
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: normal !important;
    letter-spacing: 0.5px !important;
}
.snip1533 figcaption:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #000fffd9;
    border-radius: 50%;
    box-shadow: 0 0 10px rgb(0 0 0);
    color: #060e3a;
    content: "\f10e";
    font-family: 'FontAwesome';
    font-size: 32px;
    font-style: normal;
    left: 50%;
    line-height: 60px;
    position: absolute;
    top: -30px;
    width: 60px;
    z-index: 1;
}
.snip1533 figcaption a{
color: #000;
}
.snip1533 figcaption a i:hover{
    background-color: #ae1c28;
    color: #000;
}

.snip1533 .thumb{
    width: 100px;
    border-radius: 20em;
    margin-top: 25px;
}

/* tweak gutter once, everything recalculates */
.grid { --gutter: 2%; }

.grid-sizer,
.grid-item {
  width: calc((100% - 2 * var(--gutter)) / 3); /* 3 cols, 2 gaps */
}

.gutter-sizer { width: var(--gutter); }
.grid-item { margin-bottom: var(--gutter); }  /* vertical gap */

.grid { opacity: 0; transition: opacity .2s; }
.grid.is-ready { opacity: 1; margin-top: 30px;margin-bottom:0px;}
* { box-sizing: border-box; } /* avoid padding/border overflow */

    


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.sp-video-slider-container { position: relative; margin: 40px 0; }
.sp-video-swiper { padding: 10px; }
.swiper-slide { text-align: center; }
.video-box { position: relative; border-radius: 8px; overflow: hidden; }
.video-box a{
    text-decoration: none;
}
.video-box img { width: 100%; display: block; border-radius: 8px; }
.watch-btn {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6); color: white; border: none;
    padding: 10px 20px; font-size: 16px; border-radius: 6px; cursor: pointer;
}
.video-box a:hover h4{
    color: #000;
}
.video-box h4 {
    text-align: left;
    font-size: 17px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.8);
}
.swiper-button-prev:after{
    color:#000;
    left: -100px;
}

.swiper-button-next:after{
    color:#000;
    right: -100px;
}

.sp-interviews-slider-container { position: relative; margin: 40px 0; }
.sp-interviews-swiper { padding: 10px; }
.swiper-slide { text-align: center; }
.interviews-box { position: relative; border-radius: 8px; overflow: hidden; }
.interviews-box a{
    text-decoration: none;
}
.interviews-box img { width: 100%; display: block; border-radius: 8px; }
.watch-btn {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6); color: white; border: none;
    padding: 10px 20px; font-size: 16px; border-radius: 6px; cursor: pointer;
}
.interviews-box h4 {
    text-align: left;
    font-size: 17px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.8);
}
.interviews-box a:hover h4 {
    color: #000;
}
/*
    Posts
*/


.sp-post-slider-wrap { margin: 50px 0; position: relative; }
.sp-post-swiper { padding: 10px; }

.post-card h4 {
    text-align: left;
    font-size: 17px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.8);
}
.post-card a:hover h4{
    color: #000;
}
.sp-post-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.post-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
}
.session-content p{
    color: #060e3a;
}

.fancybox__caption {
    margin-top: 20px;
    width: 900px;
    text-align: center;
}

.read-more-btn:hover{
    color:#000;
}

.reviews-pagination{
	height: auto;
    overflow: hidden;
    display: block;
    text-align: center;
}

.reviews-pagination ul{
	background:#000;
}

.reviews-pagination ul li:before{
	content:"" !important;
	display:none !important;
}
.reviews-pagination ul.page-numbers {
    background: #000;
    display: block;
    width: 100%;
}
.reviews-pagination ul li.current span{
	background: #fc0 !important;
	color:#000 !important;
}

/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

@media (min-width: 500px) {
  .grid-item {
    width: 30%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 30%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 31%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}

@media(min-width:320px) and (max-width:568px){
    .recent_posts ul li div.title, .viewallnews a{
         width: 76%;
    }
    .sp_wrapper {
        margin-top: 10px;
    }
    .speakerList .box {
        width: 100%;
        margin-bottom: 0px;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 30px;
        height: auto !important;
    }
    .speakerList .box .thumbnail{
        height: 300px !important;
    }
    .speakerslist{
        padding:0px !important;

    }

    .sideLeft {
        width: 100%;
        padding-bottom: 0px !important;
        padding-right: 30px !important;
    }

    .sideRight {
        width: 100%;
        padding: 0px 30px;
        margin-top: 30px;
    }

    .sp_wrapper .sideLeft h4 {
        line-height: 40px;
    }

    .sp_wrapper .sideLeft h1 {
        font-size: 35px !important;
    }

    .sp_wrapper .sideLeft h3 {
        font-size: 22px !important;
    }

    .snip1533 .pname{
        margin-top: 15px;
    }

}