/* 
 * Probrand homepage
 *
 */
.pb-link-icon {
  padding-top: .25rem;
  display: block;
}
a.pb-featured-link p {
  color: RGB(105, 108, 125);
}
a.pb-featured-link {
  display: block;
  text-decoration: none;
}
.wrapper.pb-home-top{
    border-bottom:1px solid #d1d7e2;
}
.pb-link-icon i {
  margin-left: 5px;
  transition: transform 0.3s ease;
}
a:hover .pb-link-icon i, .pb-link-icon:hover i {
  transform: translateX(6px);
}
.wrapper.pb-homepage-service-advisors{
    padding-top:0;
    padding-bottom:20px;
}
.wrapper.pb-homepage-product-advisors{
    padding-bottom:20px;
}
.wrapper.pb-homepage-daas-advisors{
    padding-bottom:20px;
    padding-top:0;
}
.wrapper.pb-home-offers{
    padding-bottom:0;
}
.wrapper.pb-home-brands{
    padding-top:20px;
}
.wrapper.pb-homepage-blog{
    padding-bottom:0;
}

/* Homepage benefits tab */
.tabs-module.pb-benefits-tabs{
    margin-bottom:0;
    margin-top:-37px;
}
.pb-benefits-tabs .tab-content::after{
    content:'';
    clear:both;
    display:block;
}
.pb-benefits-tabs .tab-content >div:first-child{
    float:left;
    width:100px;
    margin-right:20px;
}
.pb-benefits-tabs .tab-content >div:last-child{
    float:right;
    width:calc(100% - 120px);
}
.pb-benefits-tabs .tab-content img{
    max-width:100%;
}

.pb-marketplace-benefits-top a.pb-featured-link {
    width: 100%;
}

.pb-marketplace-benefits-top .pb-detailed-icon img {
    width: 100px;
    height: 100px;
}

@media (min-width: 1200px){
    /* Homepage tabs */
    .pb-benefits-tabs .tab-content{height:312px;}
}

@media (max-width: 992px){
    /* Homepage tabs */
    .tabs-module.pb-benefits-tabs{margin-bottom:0;margin-top:0;}
}

@media (max-width: 576px){
    /* Homepage benefits tab */
    .pb-benefits-tabs .tab-content >div:first-child{float:none; width:100%;margin-right:0; margin-bottom:20px; }
    .pb-benefits-tabs .tab-content >div:last-child{float:none; width:100%;}
}

/* Homepage stats */
.pb-stats-container{
    background-color: #222538; 
    background-image:url('https://cdn.onknowledgekube.net/probrand/images/homepage/pb-stats-background.svg');
    padding:25px;
    position:relative;
    overflow:hidden;
    margin-bottom:2rem;
}

.pb-stats-container::after{
  content:'';
  clear:both;
  display:block;
}
.pb-graph{
    float:left;
    width:36px;
    height:28px;
    vertical-align:bottom;
    margin-right:20px;
}
.pb-graph::after{
    content:'';
    clear:both;
    display:block;

}
.pb-graph span{
    border-radius:2px;
    float:left;
    width:5px;
    margin-right:3px;
    background-color:#00AC95;
    max-height:28px;
    height:28px;
    vertical-align:bottom;
    transform-origin:bottom center;
}
.pb-graph span:first-child{
    animation: grow-1 1.5s linear infinite;
}
.pb-graph span:nth-child(2){
    height:28px;
    transform:scale(1, 0.333);
    animation: grow-2 1.5s linear infinite;
}
.pb-graph span:nth-child(3){
    height:28px;
    transform:scale(1, 0.833);
    animation: grow-3 1.5s linear infinite;
}
.pb-graph span:nth-child(4){
    height:28px;
    transform:scale(1, 0.625);
    animation: grow-4 1.5s linear infinite;
}

.pb-live{
    position: absolute;
    display: block;
    padding: 0 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 11px;
    color: #ffffff;
    background-color: #FF0000;
    top: 5px;
    right: 5px;
    line-height: 18px;
    height: 18px;
}
.pb-stats{
    float:right;
    width:calc(100% - 60px);
    vertical-align:bottom;
    height:28px;
    position:relative;
    overflow:hidden;
}
span.pb-stats-big{
    font-size:24px;
    font-weight:bold;
	  padding:0 5px;
}
span.pb-stats-text{
	font-size:1rem;
	font-weight:normal;
}
span.pb-stats-dots{
	padding:0 0 0 5px;
    font-size:16px;
    font-weight:600;
	opacity:0.4;
    letter-spacing: 4px;
}

#pb-marketplace-stats{
	display: block;
	width: 100%;
	height: 28px;
	box-sizing: border-box;
	position: relative;
	line-height: 28px;
	overflow: hidden;
	border-radius: 2px;
	font-size: 14px;
}

#pb-marketplace-stats ul{
	display: block;
	height: 28px;
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	width: 100%;
	position: relative;
  overflow:hidden !important;
}

#pb-marketplace-stats ul::after{
	content:'';
	clear:both;
	display:block;
}

#pb-marketplace-stats li{
	float: left;
	position: relative;
	width: auto;
	padding:0;
	margin:0;
	height:28px;
	line-height:28px;
	color: #ffffff;
}
#pb-marketplace-stats a{
	white-space: nowrap;
	text-decoration: none;
	padding: 0;
	line-height:28px;
	color: #ffffff;
	position: relative;
	display: block;
	overflow: hidden;
}


@keyframes grow-1{
    0% {
        transform:scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }

    50% {
        transform:scale(1, 0.333);
        -webkit-transform: scale(1, 0.333);
        -ms-transform: scale(1, 0.333);
    }

    100% {
        transform:scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }

} 
@keyframes grow-2{

    0% {
        transform:scale(1, 0.333);
        -webkit-transform: scale(1, 0.333);
        -ms-transform: scale(1, 0.333);
    }

    50% {
        transform:scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
    100% {
        transform:scale(1, 0.333);
        -webkit-transform: scale(1, 0.333);
        -ms-transform: scale(1, 0.333);
    }

} 
@keyframes grow-3{

    0% {
        transform:scale(1, 0.833);
        -webkit-transform: scale(1, 0.833);
        -ms-transform: scale(1, 0.833);
    }

    33.33% {
        transform:scale(1, 0.333);
        -webkit-transform: scale(1, 0.333);
        -ms-transform: scale(1, 0.333);
    }
    66.66% {
        transform:scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
    100%{
        transform:scale(1, 0.833);
        -webkit-transform: scale(1, 0.833);
        -ms-transform: scale(1, 0.833);
    }

} 
@keyframes grow-4{

    0% {
        transform:scale(1, 0.625);
        -webkit-transform: scale(1, 0.625);
        -ms-transform: scale(1, 0.625);
    }

    33.33% {
        transform:scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
    66.66% {
        transform:scale(1, 0.333);
        -webkit-transform: scale(1, 0.333);
        -ms-transform: scale(1, 0.333);
    }
    100%{
        transform:scale(1, 0.625);
        -webkit-transform: scale(1, 0.625);
        -ms-transform: scale(1, 0.625);
    }


} 

/* Homepage slider */
.product-slick {
    position:relative;
    overflow:hidden;
}
.product-slick  img{
    max-width:100%;
    height:auto;
	padding-right:1px;
}

.product-slick  .slick-arrow{
    border:none;
    position:absolute;
    border-radius:50%;
    font-size:0;
    line-height:0;
    padding:0;
    margin:0;
    display:block;
    height:50px;
    width:50px;
    top:calc(50% - 25px);
    background-color:rgba(0,0,0,0.25);
    z-index: 999;
}
.product-slick  .slick-arrow:hover{
    background-color:rgba(0,0,0,0.55);
}
.product-slick  .slick-arrow::after{
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    line-height:50px;
    width:50px;
    display:block;
    text-align:center;
    font-size: 1.5rem;
    color: #ffffff;
    transition:transform 0.3s ease;
}
.product-slick  .slick-prev{
    left:5px;
    transform:translateX(-100px);
}
.product-slick:hover .slick-prev{
    transform:translateX(0);
}
.product-slick  .slick-prev::after{
    content: '\f104';
}
.product-slick .slick-next{
    right:5px;
    transform:translateX(100px);
}
.product-slick:hover .slick-next{
    transform:translateX(0);
}
.product-slick .slick-next::after{
    content: '\f105';
}

ul.slick-dots{
    list-style-type:none;
    display:block;
    text-align:center;
    padding:0;
    margin:10px 0 0 0;
}
ul.slick-dots li{
    display:inline-block;
    margin:0;
    padding:0 10px;
}
ul.slick-dots button{
    font-size:0;
    display:block;
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:rgba(0,0,0,0.15);
    border:none;
    padding:0;
    margin:0;
}
ul.slick-dots button:hover{
    background-color:rgba(0,0,0,0.35);
}
ul.slick-dots li.slick-active button{
    background-color:#008F7C;
}
.wrapper.pb-homepage-product-carousel{
    padding-bottom:0;
}


/* 
 * Tabs
 *
 */
 
 .tabs-module{	margin:0 0 30px 0;}


 .tabs{
     list-style-type: none;
     margin:0;
     padding: 0;
     display:block;
 }
 .tabs li{
     margin:0;
     padding:0;
     display:inline-block;
     margin-bottom:-1px;
     overflow:visible;
 }
 .tabs li:last-child a{
     border-right:1px solid #d1d7e2;
 }
 
 .tabs a{
     background-color: #e5e6ea;
     color: #222538;
     display: inline-block;
     padding: 10px 25px;
     line-height:1;
     vertical-align:middle;
     text-decoration:none;
     border:1px solid #d1d7e2;
     border-right:none;
 }
 
 .tabs a:hover{
     background-color: #e5e6ea;
     text-decoration: none;
 }
 
 .tabs a.active,
 .tabs a.active:hover{
     background-color: #ffffff;
     color: #222538;
     border-bottom:1px solid #ffffff;
 }
 
 .tab-content {
     background-color: #ffffff;
     display:block;
     padding:30px;
     border:1px solid #d1d7e2;
 }

 /* 
 * Video player
 *
 */

@media screen and (max-width: 768px) {
    .probrand-youtube-player {
        width: 100% !important;
        height: 380px !important;
    }
}


/* 
 * Product carousel
 *
 */

.product-slick  .pb-product-carousel{
    padding-left:70px;
    padding-right:70px;
    padding-top:0;
    position:relative;
}
.product-slick .pb-product-carousel .slick-slide{
    outline:none;
}
.product-slick .pb-product-carousel a{
    display:block;
    text-decoration:none;
    padding:20px;
    background-color:#ffffff;
    margin:1px;
    outline:none;
    position: relative;
}
.product-slick .pb-product-carousel a:hover{
    box-shadow: inset 0px 0px 0px 2px #00AC95;
}