@import url('../fonts/mrseaves/font.css');

html, body {
    scroll-behavior: smooth;
}

* {
    font-family: 'Inter', sans-serif;
}

.header-color {
    background-color: #ffffff;
}

.slider-hizlama {
    margin-top: 3%;
    padding-top: 1%;
}

.slider-text {
    text-align: right;
    margin-right: 20%;
    font-family: 'Inter', sans-serif;
}

.slider-text2 {
    text-align: right;
    margin-right: 20%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.slider-text2 strong {
    font-family: 'MrsEavesSmartLig';
    font-weight: bold;
}

.wordpress-text {
    font-family: 'MrsEavesSmartLig';
}

.ust_slider {
    width: 100%;
}
.slide-item {
    height:650px !important;
    display: flex;
    align-items:center;
}

@media (max-width: 550px) {
    .slider-text {
        text-align: center;
        margin-bottom:20px;
        margin-right:0px;
    }

    .slider-text2 {
        text-align: center;
        margin-bottom:20px;
        margin-right:0px;
    }
    .slide-item {
        height: 500px !important;
    }
}

.best-star {
    height: 60px;
    margin-bottom: 20px;
}

.servicesArea {
    width:100%;
    position:relative;
    background: radial-gradient(circle at 30% center,#ffffff 20%,#eaf1fe 50%);
    padding:0px 200px;
    margin:50px 0px;
}

.wordpress-best-plugin {
    width:100%;
    margin-top:70px;
}

@media (max-width:1699px) {
    .servicesArea {
        padding:50px 0px;
    }
    .wordpress-best-plugin {
        width:700px;
        position:absolute;
        left:50px;
        bottom:0px;
    }
}

@media (max-width:1399px) {
    .servicesArea {
        padding:50px 0px;
    }
    .wordpress-best-plugin {
        width:650px;
        position:absolute;
        left:50px;
        bottom:0px;
    }
}

@media (max-width:1199px) {
    .servicesArea {
        padding:50px 50px;
    }
    .wordpress-best-plugin {
        display:none;
    }
}

@media (max-width:750px) {
    .servicesArea {
        padding:50px 30px;
    }
}

@media (max-width:550px) {
    .servicesArea {
        padding:50px 15px;
    }
}

.featuredItems {
    width:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    margin:0px;
    padding:0px;
}

.experience-item {
    width: 100%;
    border-radius: 2rem;
    position: relative;
    padding:10px 15px;
    margin:5px 0px;
    list-style:none;
}

.experience-item:hover {
    background: linear-gradient(to right, #e2ecfd, #e6e8ea);
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.08);
}

.experience-item img {
    width: 65px;
    height: 100%;
    padding-right: 4%;
    margin-left: 15%;
}

@media (max-width:550px) {
    .experience-item {
        padding:10px 0px;
    }
}

.feature-container {
    padding: 60px 200px;
}

@media (max-width:1699px) {
    .feature-container {
        padding: 60px 100px;
    }
}

@media (max-width:750px) {
    .feature-container {
        padding: 60px 30px;
    }
}

.feature {
    padding: 10px;
}

.swiper-container{position:relative;}
.swiper-container:hover .yon-button {display:inline-flex;}

.yon-button {
    z-index: 2;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:none;
}


.yon-button.swiper-button-prev {left:10px;}
.yon-button.swiper-button-next {right:10px;}

.swiper-container:hover .swiperButton {display:inline-flex;}

.swiperButton {
    display:none;
}


.compare-container {
    background: radial-gradient(600px at 300px 150px,#ffffff 20%,#eaf1fe 50%);;
}

.compare-info {
    display: inline-block;
    text-align: center;
    border-width: .0625rem;
    box-shadow: none;
    border-radius: 50rem
}

.compare-vs-img {
    width:auto;
    display:inline-block;
    height:150px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.compare-vs-img img {
    height:150px;
}
@media (max-width:949px) {
    .compare-vs-img {
        position:relative;
        top:0;
        left:0%;
        transform:translate(0,0);
        width:100%;
        text-align:center;margin-bottom:30px;
    }
}

.compare-logo {
    width: 50%;
    height: 50%;
}

.testimoal-container {
    padding: 1% 5%;
}

.pricess-container {
    padding: 1% 8%;
}

.pricess {

}

.pricess-down {
    width: 50%;
    background-color: rgb(139, 0, 0);
}

.pricess-price {
    background-color: rgba(82, 82, 82, 0.151);
    margin-top: 2%;
    display: inline-block;
    text-align: center;
    border-width: .0625rem;
    box-shadow: none;
    border-radius: 50rem;
    line-height:1;
    padding:6px 15px;
}

.pricess-checked {
    color: rgb(77, 209, 165);
}

.pricess-checked li:first-child {font-weight:600;}

.pricess-checked text {
    color: #000;;
}


.feature-nav {
    padding-top: 4%;
}

.feature-navside {
    margin-top: 23%;
}

.timer-container {
    padding: 1% 9%;
}

.mainFeatured .card .card-body {padding:20px; display:flex;align-items:center;}
.mainFeatured .card .card-body .d-flex {align-items:center;}

.avatar {border-radius:0 !important;}

.vsCard {
    width:100%;
    max-width:75%;
    height:100%;
    position:relative;
    margin:0px auto;
}

@media (max-width:750px) {
    .vsCard {
        max-width:95%;
    }
}

.vsCard.dark {
    background:#6a7786;
}
.vsCard .card-header {
    padding:20px;
    position:relative;
}
.vsCard .card-header .title {
    width:100%;
    min-height:70px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:25px;
    font-weight:700;
    color:#000;
    background:#d9dbde;
    border-radius:7px;
}
.vsCard.dark .card-header .title {
    color:#fff;
    background:#525c67;
}
.vsCard .card-body {
    padding:30px;
    display:flex;
    justify-content:center;
}
.vsCard.dark .card-body {color:#fff;}
.vsCard .card-body .list-pointer {
    display:inline-flex;
    flex-direction:column;
    position:relative;
}
.vsCard .card-body .list-pointer li {
    display:flex;
    position:relative;
    justify-content: space-between;
}
.vsCard .card-body .list-pointer li .text {width:calc(100% - 50px);}
.vsCard .card-body .list-pointer li .price {width:50px;}
.vsCard .card-footer {
    padding:20px;
}
.vsCard .card-footer .priceTotal {
    width:100%;
    min-height:50px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:35px;
    font-weight:800;
    color:#000;
    background:#d9dbde;
    border-radius:7px;
}
.vsCard.dark .card-footer .priceTotal {color:#000;background:#fff;}

.vsArea {
    width:100%;
    position:relative;
}

.vsTitle {
    width:100%;
    position:relative;
    text-align:center;
    margin-bottom:60px;
}

.vsTitle h2 {
    font-size: 30px;
    font-weight:400;
    font-family: 'Inter', sans-serif !important;
}

.vsTitle h2 strong {font-weight:700;}
.vsTitle h4 {
    font-size:20px;
    font-weight:400;
    font-family: 'Inter', sans-serif !important;
}

.vsTitle2 {
    width:100%;
    position:relative;
    text-align:center;
    margin:80px 0px 20px;
}
.vsTitle2 h4 {
    font-size:17px;
    font-weight:500;
    line-height:1;
    font-family: 'Inter', sans-serif !important;
}

.mainTitle {
    width:100%;
    position:relative;
    text-align:center;
    margin-bottom:20px;
}

.mainTitle h1 {
    font-size: 40px;
    font-weight:500;
    font-family: 'Inter', sans-serif !important;
}

.mainTitle h2 {
    font-size: 35px;
    font-weight:500;
    font-family: 'Inter', sans-serif !important;
}

@media (max-width:550px) {
    .mainTitle h1 {
        font-size: 25px;
    }
    .mainTitle h2 {
        font-size: 25px;
    }
}

.testedArea {
    width:100%;
    position:relative;
    background:#eaf1fe;
    padding:60px 0px;
}

.testedItem {
    display:block;
    width:100%;
    position:relative;
}

.testedItem img {width:100%;}

.mainTitle2 {
    width:100%;
    position:relative;
    text-align:center;
    margin-bottom:30px;
}

.mainTitle2 h2 {
    font-size: 30px;
    font-weight:700;
    font-family: 'Inter', sans-serif !important;
}
.mainTitle2 h4 {
    font-size:20px;
    font-weight:600;
    font-family: 'Inter', sans-serif !important;
}

.titleArea {
    width: 100%;
    position: relative;
    padding: 50px 0px 20px 0;
    background: #f7faff;
}

.pricingArea {
    width:100%;
    position:relative;
    background: #f7faff;
    padding:50px 0px;
}

.pricingCounter {
    width:100%;
    display:flex;
    justify-content:flex-end;
}

@media (max-width:750px) {
    .pricingCounter {
        justify-content:center;
    }
}

.countNum {
    display:inline-block;
    font-family: 'Inter', sans-serif !important;
    font-size:25px;
    font-weight:500;
    background:#172446;
    color:#d1fb51;
    padding:10px 20px;
    border-radius:10px;
    margin-bottom:10px;
}
.countInfo {
    font-family: 'Inter', sans-serif !important;
    font-size:18x;
    font-weight:500;
    color:#172446;
    text-align:center;
}

.countdown-offer {
    font-family: 'Inter', sans-serif !important;
    font-size:25px;
    font-weight:500;
    color:#172446;
    margin-top:10px;
}

@media (max-width:750px) {
    .countdown-offer {
        text-align:center;
    }
    .pricingBoxes {padding:0px 90px;}
}

@media (max-width:550px) {
    .pricingBoxes {padding:0px 40px;}
}

@media (max-width:550px) {
    .pricingBoxes {padding:0px 20px;}
}

.pricingCheck label {
    font-family: 'Inter', sans-serif !important;
    font-size:18px;
    font-weight:600;
    color:#172446;
}

.pricingCard {
    height:100%;
}
.pricingCard .card-header {
    padding:40px 0px 20px;
    text-align:center;
}
.pricingCard .card-header .title {
    width:100%;
    font-family: 'Inter', sans-serif !important;
    font-size:25px;
    font-weight:500;
    color:#fff;
    line-height:1;
    text-align:center;
    padding:10px 15px;
    margin-bottom:20px;
}
.pricingCard .card-footer {
    padding:20px;
}
.pricingCard .card-footer .btn {width:100%;}
.pricingCard .card-body li {color:#000;}


.pricingRow .pricingCol:nth-of-type(1) .pricingCard .title {background:#5ac5a8;color:#fff;}
.pricingRow .pricingCol:nth-of-type(1) .pricingCard .pricingButton {background:#5ac5a8;color:#fff;}
.pricingRow .pricingCol:nth-of-type(1) .pricingCard .pricingButton:hover {background:#49aa90;color:#fff;}

.pricingRow .pricingCol:nth-of-type(2) .pricingCard .title {background:#459bd9;color:#fff;}
.pricingRow .pricingCol:nth-of-type(2) .pricingCard .pricingButton {background:#459bd9;color:#fff;}
.pricingRow .pricingCol:nth-of-type(2) .pricingCard .pricingButton:hover {background:#3c86bc;color:#fff;}

.pricingRow .pricingCol:nth-of-type(3) .pricingCard .title {background:#d96745;color:#fff;}
.pricingRow .pricingCol:nth-of-type(3) .pricingCard .pricingButton {background:#d96745;color:#fff;}
.pricingRow .pricingCol:nth-of-type(3) .pricingCard .pricingButton:hover {background:#b24926;color:#fff;}


.navbar-brand-logo {
    width:auto;
    max-width:100%;
    height:60px;
}

@media (max-width:399px) {
    .navbar-brand-logo {
        height:50px;
    }
}

@media (max-width:354px) {
    .navbar-brand-logo {
        height:40px;
    }
}

.mainNavbar {
    position:relative;
}

.leftContentSideBar {
    position: sticky;
    top:0px;
    left:0px;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.leftContentSideBar .card-header {
    padding:0px;
    border-bottom:none;
}
.leftContentSideBar .card-header h4 {
    padding:15px 20px 15px 20px;
    background:#fafafa;
    color:#4680f6;
    border-left:2px solid #4680f6;
}
.leftContentSideBar .card-body {
    padding:10px;
}

.contentInner {
    border:none !important;
    box-shadow:0 0.375rem 1.5rem 0 rgb(140,152,164, 0.3) !important;
    margin-bottom:30px;
}

.contentInner.threeD:before {
    content:"";
    width:20px;
    height:calc(100% - 10px);
    position:absolute;
    top:17px;
    left:-20px;
    transform:skewY(-50deg);
    background:#eaeaea;
    z-index:0;

}

.contentInner.threeD:after {
    content:"";
    width:100%;
    height:20px;
    position:absolute;
    bottom:-20px;
    left:-11px;
    transform:skewX(-40deg);
    background: #d5d3d3;
    z-index:0;

}

.navbar-dark.bg-dark.breadcrumb {
    background-position:center !important;
}

.circular-progress-bar {
    position: relative;
    margin: 0 auto;
    transform: rotate(-90deg);
}

.progress-percentage, .progress-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    text-align: center;
    padding: 0px 60px;
}

.progress-percentage {
    font-size: 60px;
    left: 60%;
    color:#1ABC9C;
}

.progress-text {
    width:80%;
    left: 35%;
    color: #000;
    font-size: 21px;
}

.no-border {border:none !important;}

@media(max-width:1109px) {
    .mobilBuyLiSize {font-size:13px;}

    .mobilBuyNav {display:flex;}

    .mobilNavUserButton {display:flex; flex-direction: column;align-items: center;}

    .navbar-toggler.navbarToggler {display:flex !important;padding-top:0;flex-direction: column;align-items: center;}
    .navbar-toggler .navbarTogglerIcon {height:50px;}
    .navbar-toggler .mobilNavUserText {margin-top:18px;}

    .navbar-collapse.navTop {
        display:flex !important;
        flex-direction:column !important;
        justify-content: flex-start;
        position:absolute;
        width:100% !important;
        max-height:calc(100vh - 50px);
        overflow-y: scroll;
        top:100%;
        left:0px;
        background:#39c6e9 !important;
    }

    .navbar-collapse.navTop.collapse:not(.show) {
        display: none !important;
    }

    .navbar-collapse.navTop .navbar-nav {
        width:100%;
        flex-direction: column;
        align-items:flex-start !important;
        padding:10px 20px;
    }

    .navTop .navbar-nav .nav-item {
        width:100%;
        border-bottom:1px solid #2caccc;
    }
    .navTop .navbar-nav .nav-item:last-child {border:none;}

    .navTop .navbar-nav .nav-item .nav-link {
        color:#fff;
        font-weight:500;
    }

    .navTop .navbar-nav .nav-item .nav-link:focus {
        color:#037794;
    }

    .navTop .navbar-nav .nav-item .nav-link.dropdown-toggle:after {
        background-size:1.5rem 1.5rem;
        background-image:url('../img/nav-after-mobil.svg');
    }

    .navTop .navbar-nav .nav-item .dropdown-menu {
        display:flex;
        background:#2caccc;
        padding-left:0px;
        border: none;
        position: relative;
        border-radius:0;
    }

    .navTop .navbar-nav .nav-item .dropdown-menu:not(.show) {
        display: none !important;
    }

    .navTop .navbar-nav .nav-item .dropdown-menu .mobilSpace{margin-bottom:1rem;}
    .navTop .navbar-nav .nav-item .dropdown-menu .mobilSpace:nth-of-type(3) {margin-bottom:0;}

    .navTop .navbar-nav .nav-item .dropdown-menu:before{
        display:none;
    }

    .navTop .navbar-nav .nav-item .dropdown-menu .dropdown-header{
        color:#0a5568;
        position:relative;
        border-bottom:2px dotted #13768f;
    }

    .navTop .navbar-nav .nav-item .dropdown-menu .dropdown-item{
        color:#fff;
        border-radius:0px;
        margin-bottom:0px;
        border-bottom:1px solid #13768f;
    }
    .navTop .navbar-nav .nav-item .dropdown-menu .dropdown-item.borderTop{
        border-top:1px solid #13768f;
    }
    .navTop .navbar-nav .nav-item .dropdown-menu .dropdown-item:last-child {
        border-bottom:none;
    }

    .mobilNavHideItem {display:none;}

    .copyButton {
        width:44px;
        height:46px;
        border-radius:0  0.5rem 0.5rem 0;
        background:#387dff;
        color:#fff;
        display:inline-block;
        text-align:center;
        margin-right:-15px;
    }

    .copyButton:hover {
        background:#1d60db;
        color:#fff;
    }
}

.magicFeatured-pagination .swiper-pagination-bullet::before {
    width:15px;
    height:15px;
    background:#1ABC9C;
}
.magicFeatured-pagination .swiper-pagination-bullet:nth-of-type(2)::before {background:#f5c143;}
.magicFeatured-pagination .swiper-pagination-bullet:nth-of-type(3)::before {background:#dd4437;}
.magicFeatured-pagination .swiper-pagination-bullet:nth-of-type(4)::before {background:#377df6;}

.blogList {width:100%;position:relative;}
.blogList .title {
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
    padding:10px 20px;
    background:#dee0e5;
    border-radius:5px;
}
.blogList .title img {width:30px;}
.blogList .title h3 {
    font-family: 'Inter', sans-serif !important;
    font-size:20px;
    font-weight:600;
    color:#243358;
    margin:0px;
    padding:0px 0px 0px 15px;
}
.blogList .desc {
    width:100%;
    position:relative;
    font-family: 'Inter', sans-serif !important;
    font-size:18px;
    font-weight:700;
    color:#000;
    padding:30px 20px;
}
.blogList .detail {
    width:100%;
    position:relative;
    font-family: 'Inter', sans-serif !important;
    font-size:16px;
    color:#000;
}
.blogList .videoPlayer {
    width:100%;
    position:relative;
    border-radius:10px;
    overflow:hidden;
}
.blogList .videoPlayer .image {
    width:100%;
    position:relative;
    z-index:1;
}
.blogList .videoPlayer .videoButton {
    width:80px;
    height:80px;
    position:absolute;
    top:calc(50% - 40px);
    left:calc(50% - 40px);
    border-radius:50%;
    background:#eb3330;
    color:#fff;
    font-size:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0px 4px 5px 0px rgba(0,0,0,0.2);
    z-index:2;
    transition:all 0.2s ease-in-out 0s;
}

.blogList .videoPlayer .videoButton:hover {
    transform:scale(1.2);
    transition:all 0.2s ease-in-out 0s;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.4);
}

.contactFAQ .accordion-button::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-right-fill' viewBox='0 0 16 16'%3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E");
}
.contactFAQ .accordion-button:not(.collapsed)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

.contactFAQ .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.contactFAQ .accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom:none;
}

.contactFAQ .accordion-item {
    border:none;
    border-bottom:0.0625rem solid rgba(33, 50, 91, .1);
}

.siteTitle {
    width:100%;
    position:relative;
    padding:15px 20px;
    margin-top:50px;
    margin-bottom:30px;
}

.siteTitle h2 {
    font-family: 'Inter', sans-serif !important;
    font-size:30px;
    font-weight:700;
    text-align:center;
}

.loginLogo {max-width:90%; }

.loginImage {
    background: url(../img/magicbox-login.jpg) no-repeat center center transparent;
    background-size:cover;
}

.loginHeight {min-height:100vh !important;}

.rowClean .row {
    margin-left:0px;
    margin-right:0px;
}
.rowClean .row .tom-select-custom {
    padding-left:0px;
    padding-right:0px;
}

.copyButton {
    width:44px;
    height:46px;
    border-radius:0  0.5rem 0.5rem 0;
    background:#387dff;
    color:#fff;
    display:inline-block;
    text-align:center;
}

.copyButton:hover {
    background:#1d60db;
    color:#fff;
}
.copyButton i {line-height:46px;}

.copyArea {
    display:flex;
    width:100%;
    position:relative;
    justify-content:space-between;
    align-items:center;
    padding:0px;
    margin:0px;
}

.copyArea span {
    padding:0px 15px;
}

.table-magic thead tr th {font-weight:600;border-bottom:2px solid #ddd !important;}
.table-magic tr td {vertical-align: baseline;}

.isBookmark {
    width:250px;
    height:250px;
    position:absolute;
    bottom:-10px;
    top:auto;
    left:-10px;
    overflow:hidden;
    z-index:9;
    transform:rotate(-90deg);
}

.isBookmark:before {
    content:"";
    width:40px;
    height:10px;
    background:#046574;
    position:absolute;
    top:0px;
    left:128px;
    z-index:1;
}

.isBookmark:after {
    content:"";
    width:10px;
    height:40px;
    background:#046574;
    position:absolute;
    top:128px;
    left:0px;
    z-index:1;
}

.isBookmark .band {
    width:100%;
    position:absolute;
    left:-55px;
    top:50px;
    background:#222c38;
    font-weight:600;
    font-size:18px;
    color:#fec107;
    text-align:center;
    padding:0px 0px 0px 5px;
    line-height:40px;
    box-shadow:0px 3px 5px 0px rgba(0,0,0,0.2);
    transform:rotate(135deg);
    z-index:2;
}

.isBookmark .band:before {
    content:"";
    width:calc(100% - 6px);
    height:calc(100% - 6px);
    position:absolute;
    top:3px;
    left:3px;
    border:1px solid #fec107;
}

.isBookmark.winner .band {
    background:#fec107;
    color:#222c38;
}

.isBookmark.winner .band:before {
    border:1px solid #222c38;
}

.isBookmark .light {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}

.isBookmark .light:before {
    content:"";
    width:50px;
    height:15px;
    background:linear-gradient(to bottom, rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    position:absolute;
    top:0px;
    left:106px;
    z-index:3;
    transform:skewX(-50deg);
}

.isBookmark .light:after {
    content:"";
    width:15px;
    height:50px;
    background:linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    position:absolute;
    top:106px;
    left:0px;
    z-index:3;
    transform:skewY(-50deg);
}

.avatar-magic {width:40px;height:40px;}

.logosArea .swiper-slide {opacity:0.4;}
.logosArea .swiper-slide:hover {opacity:1;}

.videoArea {width:100%;position:relative;}

.videoAutoHeight {width:100%;min-height: 446.062px;position:relative;}

.videoArea .playButton {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:60px;
}

.videoArea .playButton:before {
    content:"";
    width:100px;
    height:100px;
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
    background:rgba(255,255,255,0.3);
    border-radius:50%;
    transition:all 0.3s ease-in-out 0s;
}
.videoArea .playButton:hover:before {
    transform:scale(1.5);
    transition:all 0.3s ease-in-out 0s;
}

.videoArea .playButton i {
    position:relative;
    text-shadow:3px 3px 6px rgba(0,0,0,0.4);
    margin-left:10px;
}