html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: MerriweatherSans;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide picture > img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	@media(max-width:1268px){
		position: absolute;
		right: -50%;
		width: auto;
		max-width: none;
	}
	@media (max-height: 420px) {
			position: absolute;
			right: 0;
	}

}

body {
    background: #000;
    color: #000;
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 100%;
    width: 100%;
}

.mySwiper {
    max-width: 89.6%;
    position: absolute;
    height: 11%;
    top: 80%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;
    padding: 10px 0;
}

@media(max-height: 420px){
	.mySwiper {
		top:75%;
		height: 20%;
	}
}

.mySwiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 25%;
    height: 100%;
    max-height: 6vw;
    opacity: 0.4;
    background: transparent;
    max-width: 20%;
}

.mySwiper .swiper-slide-thumb-active {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 1;
    background: transparent;
    max-width: 20%;
}



.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sliderBody {
    max-width: 89.6%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.sliderBox {
    background: #c8102e;
    color: #ffffff;
    padding: 2.14rem 1.71rem;
    width: 23%;
    left: 7%;
    height: 21vw;
    position: absolute;
    top: 25.34% !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}



.boxTitle {
    font-family: MerriweatherSans-Book;
    font-size: 0.9vw;
    line-height: 1vw;
    text-align: left;
    margin-bottom: 27px;
}

.boxSubTitle {
    font-family: MerriweatherSans;
    font-size: 1.5vw;
    line-height: 2vw;
    text-align: left;
    margin-bottom: 1vw;
}

.boxInfo {
    font-family: MerriweatherSans-Book;
    font-size: 0.9vw;
    line-height: 1vw;
    text-align: left;
}

.boxInfo a {
    color: #fff;
    text-decoration: underline;
}



.controlLink {
    position: absolute;
    top: 51%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 0.7vw;
    color: #000;
}

.controlLink a {
    color: #000;
}

.controlLink img {
    margin-left: auto;
    margin-right: auto;
    max-width: 3vw;


}

#playbtn {
    margin-left: auto;
    margin-right: auto;
    max-width: 1.7vw;

}

#micbtn {
    margin-left: auto;
    margin-right: auto;
    max-width: 2vw;
}

.swiper-wrapper {
    justify-content: space-between;
}

.swiperControl {
    background-image: url("/edwardsmasters/wp-content/uploads/sites/2/2021/12/play_area_bg.png");
    background-repeat: no-repeat;
    width: 11.56%;
    height: auto;
    position: absolute;
    background-position: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-height: 16.4389vh;
    background-size: contain;
    z-index: 1;
}

.swiper-button-prev {
    opacity: 0;
    left: 12%;
}

.swiper-button-next {
    opacity: 0;
    left: 78%;
}


.thumbsTitle {
    font-family: MerriweatherSans-Bold;
    text-align: left;
    font-size: 0.9vw;
    line-height: 1.5vw;
}

.thumbsInfo {
    font-family: MerriweatherSans;
    text-align: left;
    font-size: 0.9vw;
    line-height: 1vw;
    padding-bottom: 1vw;
    height: 100%;
    overflow: hidden;
}

.mySwiper .swiper-slide-thumb-active .thumbsTitle {
    color: #c8102e;
}



.progress {
    background-color: transparent;
    animation: progressBar 5s ease-in-out;
    animation-fill-mode: both;
    height: 7px;
    overflow: visible;
    background-image: url("/wp-content/uploads/2022/01/progress_dot.png");
    background-position: top right;
    background-repeat: no-repeat;
    top: -3px;
    border-radius: 0px;
    min-width: 7px;
    margin-top: -2%;
}

.progress:hover {
    animation-play-state: paused;
}

.progress_dot {
    margin-top: 2px;
    height: 3px;
    width: 100%;
    background-color: #c8102e;
}

.meter.ui-state-disabled {
    cursor: pointer;
    pointer-events: all;
}

@keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.footerNew {
    max-width: 89.6%;
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 5;
}

.footerGrid {

    position: relative;
    display: flex;
    font-size: max(0.6vw, 8px);
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

}

.sliderBox::before {
    content: "";
    width: 2.05vw;
    height: 2.05vw;
    background: #c8102e;
    position: absolute;
    bottom: -2.05vw;
    left: -2.05vw;
}

@media screen and (min-width: 830px) {
    .swiperControl {
        min-width: 245.18px
    }

    .controlLink {
        font-size: max(0.7vw, 14px);
    }

    #playbtn {
        max-width: max(1.7vw, 29.7px);
    }

    #micbtn {
        margin-left: auto;
        margin-right: auto;
        max-width: max(2vw, 36.15px);
    }

    .controlLink img {
        margin-left: auto;
        margin-right: auto;
        max-width: max(3vw, 50.03px);
    }

    .sliderBox {
        min-width: 322px;
        min-height: 322px;
    }

    .boxTitle {
        font-size: max(0.9vw, 16px);
        line-height: max(1vw, 18px);
    }

    .boxSubTitle {

        font-size: max(1.5vw, 22px);
        line-height: max(2vw, 30px);

    }

    .boxInfo {
        font-size: max(0.9vw, 16px);
        line-height: max(1vw, 18px);
    }

    .thumbsTitle {

        font-size: max(0.9vw, 11px);
        line-height: max(1.5vw, 16px);
    }

    .thumbsInfo {
        font-size: max(0.9vw, 11px);
        line-height: max(1vw, 15px);
    }

    .mySwiper .swiper-slide {

        /* max-height: max(6vw, 15px);*/

    }
}


@media(max-height: 420px){
	.controlLink img {
		margin-left: auto;
		margin-right: auto;
		max-width: 30px;
		margin-bottom: 2px !important;
	}
	.controlLink {
		font-size: 10px;
	}
}

@media screen and (max-width: 1650px) {
    .sliderBox {
        left: 8%;
    }
}

@media screen and (max-width: 1440px) {
    .swiperControl {
        top: 75%;
    }

    .controlLink {
        top: 76%;
    }
}

@media screen and (max-height: 420px) {
	.swiperControl {
		top: 60%;
	}

	.controlLink {
		top: 60%;
	}

	.swiper-button-next {
		left: 60%;
	}
	.swiper-button-prev {
		left: 28%;
	}

}



@media screen and (max-width: 1380px) {
    .sliderBox {
        left: 9%;
    }
}

@media screen and (max-width: 1150px) {
    .sliderBox {
        left: 11%;
    }
}

@media screen and (max-width: 950px) {
    .sliderBox {
        left: 12%;
    }
}

@media screen and (max-width: 850px) {
    .sliderBox {
        left: 13%;
    }
}




@media screen and (max-width: 829px) {
    .swiperControl {
        min-width: 183.88px
    }

    .controlLink {
        font-size: max(0.7vw, 10px);
    }

    #playbtn {
        max-width: max(1.7vw, 22.7px);
    }

    #micbtn {
        margin-left: auto;
        margin-right: auto;
        max-width: max(2vw, 29.15px);
    }

    .controlLink img {
        margin-left: auto;
        margin-right: auto;
        max-width: max(3vw, 43.03px);
    }

    .sliderBox {
        min-width: 207px;
        min-height: 207px;
        left: 13%;
    }


    .boxTitle {
        font-size: max(0.9vw, 14px);
        line-height: max(1vw, 17px);
    }

    .boxSubTitle {

        font-size: max(1.5vw, 16px);
        line-height: max(2vw, 20px);
    }

    .boxInfo {
        font-size: max(0.9vw, 14px);
        line-height: max(1vw, 17px);
        max-height: 72px;
        overflow: hidden;
    }

    .thumbsTitle {

        font-size: max(0.9vw, 11px);
        line-height: max(1.5vw, 16px);
    }

    .thumbsInfo {
        font-size: max(0.9vw, 11px);
        line-height: max(1vw, 15px);
        overflow: hidden;
    }

    .mySwiper .swiper-slide {

        max-height: max(14vw, 30px);

    }
}

@media screen and (max-width: 700px) {
    .sliderBox {
        left: 22%;
    }
}

@media screen and (max-width: 501px) {

    .sliderBody {
        width: 100%;
    }

    .sliderBox {
        min-width: 304px;
        min-height: 169px;
        left: 24vw;
        top: 15vw !important;

    }

    .sliderBox::before {

        width: 24px;
        height: 24px;
        bottom: -24px;
        left: -24px;
    }

    .boxTitle {
        margin-bottom: 2vw;
    }

    .thumbsTitle {

        margin-bottom: 2vw;
        height: 32px;
    }

    .thumbsInfo {
        display: none;
    }

    .mySwiper .swiper-slide {

        margin-left: 3%;
        max-height: 13vw;
    }

    .mySwiper {
        max-width: 100%;
        background-color: #FFF;
        height: 12%;
        top: 88%;
    }

    .swiperControl {
        background-image: url(/edwardsmasters/wp-content/themes/theme-edwardsmasters-drupal2wp/img/mobilering.png);
        background-repeat: no-repeat;
        width: 11.56%;
        height: auto;
        position: absolute;
        background-position: 50%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        min-height: 16.4389vh;
        background-size: contain;
        z-index: 1;
        max-width: 108px;
        max-height: 108px;
    }

    .controlLink {
        top: 51%;
    }

    .swiper-button-prev {
        left: auto;
        background-image: url(/wp-content/uploads/2023/03/arrow_left.png) !important;
        width: 64px;
        height: 64px;
        top: 60%;
        left: -100px;
        color: transparent;
        transform: translate(0, -50%);
        position: absolute;
        cursor: pointer;
        opacity: 1;
    }

    .swiper-button-next {
        left: auto;
        background-image: url(/wp-content/uploads/2023/03/arrow_left.png) !important;
        width: 64px;
        height: 64px;
        top: 60%;
        right: -100px;
        color: transparent;
        transform: scaleX(-1) translate(0, -50%);
        position: absolute;
        cursor: pointer;
        opacity: 1;
    }

    .progress {
        margin-top: -4%;
    }

    .footerNew {
        display: none;
    }

    .boxInfo {
        display: none;
    }
}

@media screen and (min-width: 2600px) {
    .swiperControl {
        min-width: 454.18px;
        top: 53%;
    }

    .controlLink {
        top: 54%;
        font-size: 25px;
    }

    .mySwiper {
        top: 70%;
    }

    .footerNew {
        bottom: 3% !important;
    }

    .footerGrid {
        font-size: 20px;
    }

    .sliderBox {
        top: 17% !important;
        left: 8%;
        max-width: 567px;
        max-height: 567px;
        padding: 1.56vw 0.833vw 1.56vw 1.246vw;
    }
}

@media screen and (min-width: 1199px) and (max-width: 1281px) and (max-height: 801px) {
    .sliderBox {
        top: 17% !important;
        min-width: 300px;
        min-height: 300px;
    }

    .swiperControl {
        top: 64% !important;
    }

    .controlLink {
        top: 65% !important;
        font-size: 14px !important;
    }

    .footerNew {
        bottom: 1% !important;
    }

    .footerGrid {
        font-size: 10px !important;
    }

    .thumbsTitle {
        font-size: 16px !important;
        line-height: 20.11px !important;
    }

    .thumbsInfo {
        font-size: 16px !important;
        line-height: 20.11px !important;
    }
}