@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* Header */
header {height: 400px;}

.business .business-vedio .vedio .play-btn {width: 94px; height: 94px; background: radial-gradient(#D3B372 50%, rgba(211, 179, 114, 0.4) 52%);
    border-radius: 50%; display: block; position: absolute; left: calc(45% - 47px); top: calc(40% - 47px); overflow: hidden;}
.business .business-vedio .vedio .play-btn::after {content: ''; position: absolute; left: 50%; top: 50%;
    transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;  z-index: 100; transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.business .business-vedio .vedio .play-btn::before { content: ''; position: absolute; width: 120px; height: 120px;
    -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulsate-btn 2s; animation: pulsate-btn 2s;
    -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; -webkit-animation-timing-function: steps; animation-timing-function: steps;
    opacity: 1; border-radius: 50%; border: 5px solid rgba(211, 179, 114, 0.7); top: -15%; left: -15%; background: rgba(198, 16, 0, 0);}
.business .business-vedio .vedio .play-btn:hover::after { border-left: 15px solid #D3B372; transform: scale(20); }
.business .business-vedio .vedio .play-btn:hover::before { content: ''; position: absolute; left: 50%; top: 50%;
    transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border: none; border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 200; -webkit-animation: none;
    animation: none; border-radius: 0;}

@media only screen and (max-width: 1200px) 
{
    .business .business-vedio .vedio .play-btn {left: calc(50% - 47px); top: calc(35% - 47px);}
}
@media only screen and (max-width: 990px) 
{
    .business .business-vedio .vedio .play-btn {left: calc(50% - 47px); top: calc(20% - 47px);}
}
@media only screen and (max-width: 770px) 
{
    .business .business-vedio .vedio .play-btn {left: calc(50% - 47px); top: calc(13% - 47px);}
}
@media only screen and (width: 768px) 
{
    .business .business-vedio .vedio .play-btn {left: calc(50% - 47px); top: calc(20% - 47px);}
}
@media only screen and (max-width: 575px) 
{
    .business .business-vedio .vedio .play-btn {left: calc(48% - 47px); top: calc(50% - 47px);}
}

    
:root { --marquee-width: 150vw; --marquee-height: 100vh; /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee-elements-displayed: 5; --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);}

.scroll {overflow: hidden; margin-top: 150px;}
.marquee {overflow: hidden; position: relative;}
.marquee:before, .marquee:after { position: absolute; top: 0; width: 10rem; height: 100%; content: ""; z-index: 1;}
.marquee:before { left: 0; background: linear-gradient(to right, #fff 0%, transparent 100%);}
.marquee:after { right: 0; background: linear-gradient(to left, #fff 0%, transparent 100%);}
.marquee-content { height: 100%; display: flex; animation: scrolling var(--marquee-animation-duration) linear infinite;}
.marquee-content:hover { animation-play-state: paused;}
@keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }}
.marquee-content li { display: flex; justify-content: center; align-items: center; text-align: center; flex-shrink: 0;
    width: var(--marquee-element-width); max-height: 100%; font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
    white-space: nowrap;}

.marquee-content li img {width: 100%; height: 100%; padding: 10px; border-radius: 10%;}

@media (max-width: 600px) {
    html { font-size: 12px; }
    :root { --marquee-width: 100vw; --marquee-height: 30vh; --marquee-elements-displayed: 3;}
    .marquee:before, .marquee:after { width: 5rem; }
}

footer {margin-top: 200px;}