/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');


.wrapper-footer-picks{
  display: flex;
  /*max-width: 1200px;*/
    position: relative;
    width: 800px;
    float: none;
    margin-left: auto;
    margin-right: auto;
    /*margin-bottom: 5em;*/
}
.wrapper-footer-picks em{
  top: 50%;
  height: 44px;
  width: 44px;
  color: #343F4F;
  cursor: pointer;
  font-size: 1.15rem;
  position: absolute;
  text-align: center;
  line-height: 44px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.1s linear;
  z-index: 2;
}
.wrapper-footer-picks em:active{
  transform: translateY(-50%) scale(0.9);
}
.wrapper-footer-picks em:hover{
  background: #30807f;
}
.wrapper-footer-picks em:first-child{
  left: -22px;
  display: none;
}
.wrapper-footer-picks em:last-child{
  right: -22px;
}
.wrapper-footer-picks .carousel-footer-picks{
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.carousel-footer-picks.dragging{
  cursor: grab;
  scroll-behavior: auto;
}
.carousel-footer-picks.dragging img,
.carousel-footer-picks.dragging figure{
  pointer-events: none;
}
.carousel-footer-picks img, .carousel-footer-picks figure{
	height: 340px;
    display: inline-block;
}


.carousel-footer-picks img:first-child{
  margin-left: 0px;
}

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
    background: #01133f;
    margin: 1em 5px;
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 200px;
}

figure.effect-milo img {
    transition: transform 0.3s ease;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
}

figure.effect-milo:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1.2);
}

figure.effect-milo h2 {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1em 1em;
}

figure.effect-milo p {
    padding: 0 0px 0 0;
    /*width: 50%; */
    /*border-right: 1px solid #fff;*/
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    /*transition: opacity 0.35s, transform 0.35s;*/
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



.carousel-footer-picks figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 18px;
}

.carousel-footer-picks figure figcaption::before,
.carousel-footer-picks figure figcaption::after {
	pointer-events: none;
}

.carousel-footer-picks figure figcaption,
.carousel-footer-picks figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.carousel-footer-picks figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}


figcaption h2{
	color: #fff;
	font-weight: 500;
	font-size: 1em;
	text-transform: capitalize;
}

figure h2 span {
	font-weight: 800;
}

figcaption p{
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    /* letter-spacing: 1px; */
    /* text-transform: capitalize; */
    white-space: normal;
    background-color: rgb(25 49 79);
    padding: 10px!important;
}



.wrapper-editorial-picks-title{
    background: rgb(25,49,79);
    border-top-left-radius: 70% 5%;
    border-top-right-radius: 70% 5%;
}


.section-editorial-picks-container {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 775px;
    padding: 40px 20px 0px;
}

.section-editorial-picks-title {
  position: relative;

  
  > h1 {
    display: inline-block;
    padding-bottom: 0.5em;
    border-bottom: 3px solid #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    font-family: "Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
    font-size: 1.285rem;
    line-height: 2.143rem;

  }
}


@media (min-width: 250px){

    .head-top-card-profile {
        display: none !important;
    }

    .head-top-text h1 {
        font-size: 16px !important;
        line-height: 22px !important;
        margin: 3rem 0 3rem !important;
    }
    
    .section-editorial-picks-container {
        width: 100%;
        padding: 50px 0px 20px;
        text-align: center;
    }
    
    .section-editorial-picks-title h1{
        font-size: 17px;
    }
    .wrapper-footer-picks {
        width: 82%;
        margin-left: 23px;
        margin-right: 0;
    }
    
    .pkp_footer_content {
        padding-top: 3em !important;
    }
}

@media (min-width: 430px){
    
    .head-top-card-profile {
        display: flex !important;
    }
    
    .head-top-card-profile h3 {
        font-size: 12px !important;
    }
    
    .head-top-text h1 {
        font-size: 16px !important;
        line-height: 22px !important;
        margin: 2rem 0 2rem !important;
    }
    
    .section-editorial-picks-container {
       padding: 50px 45px 20px;
       width: 100%;
       text-align: left;
    }
    
    .section-editorial-picks-title h1{
        font-size: 14px;
        color: #fff !important;
    }
    .wrapper-footer-picks {
        width: 90%;
        margin-left: 23px;
    }
}

@media (min-width: 685px){
    
    .section-editorial-picks-title h1{
        font-size: 14px;
    }
    .wrapper-footer-picks {
        width: 95%;
        margin-left: 20px;
    }
}



@media (min-width: 813px){

    .section-editorial-picks-title h1{
        font-size: 15px;
    }
    .wrapper-footer-picks {
        width: 94%;
        margin-left: 26px;
    }
}

@media (min-width: 992px){
    .wrapper-footer-picks {
        width: 93%;
        margin-left: 35px;
    }
}

@media (min-width: 1200px){
.section-editorial-picks-container {
    padding: 50px 65px 20px;
    width: 1200px;
}
}



.floatingButtonWrap {
    display: block;
    position: fixed;
    bottom: 45px;
    right: 45px;
    z-index: 999999999;
}

.floatingButtonInner {
    position: relative;
}

.floatingButton {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    background: -webkit-linear-gradient(45deg, #8769a9, #507cb3);
    background: -o-linear-gradient(45deg, #8769a9, #507cb3);
    background: linear-gradient(297deg, rgba(45,122,121,1) 0%, rgba(86,195,191,1) 100%, rgba(86,195,191,1) 100%, rgba(255,255,255,1) 100%);
    color: #fff;
    line-height: 50px;
    position: absolute;
    border-radius: 50% 50%;
    bottom: 0px;
    right: 0px;
    border: 5px solid #b2bedc;
    /* opacity: 0.3; */
    opacity: 1;
    transition: all 0.4s;
}

.floatingButton .fa {
    font-size: 15px !important;
}

.floatingButton.open,
.floatingButton:hover,
.floatingButton:focus,
.floatingButton:active {
    opacity: 1;
    color: #fff;
}


.floatingButton .fa {
    transform: rotate(0deg);
    transition: all 0.4s;
}

.floatingButton.open .fa {
    transform: rotate(270deg);
}

.floatingMenu {
    position: absolute;
    bottom: 60px;
    right: 0px;
    /* width: 200px; */
    display: none;
}

.floatingMenu li {
    width: 100%;
    float: right;
    list-style: none;
    text-align: right;
    margin-bottom: 5px;
}

.floatingMenu li a {
padding: 8px 15px;
    display: inline-block;
    background: #378c8a;
    color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s;
    -webkit-box-shadow: 1px 3px 5px rgba(211, 224, 255, 0.5);
    box-shadow: 1px 3px 5px rgba(211, 224, 255, 0.5);
    text-decoration: none;
    font-family: system-ui;
    font-size: 15px;
}

.floatingMenu li a:hover {
    margin-right: 10px;
    text-decoration: none;
}