#slider:not(.ready) {background-color: black!important;}

#slider .btn-slider{padding: 30px 54px 30px 55px;background: #77cc6d;font-size: 26px;color: #fff;text-transform: uppercase;display: inline-block;transition: all 0.3s ease;}
#slider .btn-slider:hover,
#slider .btn-slider:focus,
#slider .btn-slider:active{color:#444;}
#slider .mouse{position: absolute;bottom: -110px;left: calc(50% - 22px);cursor: pointer;z-index: 10;}
#slider .mouse.type1 {text-align: center;color: #fff;}
#slider .mouse.type2 {width: 26px;height: 40px;border: 2px solid white;border-radius: 13px;}
#slider .mouse.type2:before {-webkit-animation-name: sliderButon;animation-name: sliderButon;animation-iteration-count: 1000;animation-timing-function: ease-out;animation-duration: 1s;-webkit-animation-duration: 1s;cursor: pointer;content:  '';position: absolute;left: calc(50% - 2px);width: 4px;height: 7px;background: white;border-radius: 50%;}
@keyframes sliderButon{0%{bottom:25px}100%{bottom:15px}}

.arrows {
    width: 60px;
    height: 72px;
}

.arrows path {
    stroke: #27aae1;
    fill: transparent;
    stroke-width: 1px;
    animation: arrowS 2s infinite;
    -webkit-animation: arrowS 2s infinite;
}

@keyframes arrowS
{
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}

@-webkit-keyframes arrowS /*Safari and Chrome*/
{
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}
.arrows path.a1 {animation-delay:-1s;-webkit-animation-delay:-1s;}
.arrows path.a2 {animation-delay:-0.5s;-webkit-animation-delay:-0.5s;}
.arrows path.a3 {animation-delay:0s;-webkit-animation-delay:0s;}


.ms-skin-default .ms-timerbar{top:1px;bottom:auto}
.ms-skin-default .ms-time-bar{height:3px;background:#fff;background:rgba(255,255,255,0.6);border-top:none}
.ms-layer{margin:0;padding:0;line-height:100%;letter-spacing:0}

.ms-anim-layers {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);text-align: left !important;width: 100vw;max-width: var(--container-width);}
.ms-layer-baslik {width: 100%;max-width: 850px;color: white !important;white-space: pre-wrap !important;position: relative !important;left: auto !important;right: auto !important;top: auto !important;bottom: auto !important;line-height: 1 !important;font-weight: 700 !important;font-size: 40px !important;letter-spacing: 0 !important;text-transform: initial !important;margin: 0 auto 10px auto !important;text-align: center !important;text-transform: uppercase !important;}
.ms-layer-ackl {left: auto !important;width: 100% !important;white-space: pre-wrap !important;bottom: auto !important;top: auto !important;color: white !important;position: relative !important;right: auto !important;transition: all .5s ease;text-transform: initial !important;line-height: 1.3 !important;letter-spacing: 0 !important;font-weight: 400 !important;font-size: 16px !important;max-width: 600px;margin: 0 auto !important;text-align: center !important;}
.ms-btn.btn-slider {text-decoration: none;display: block;width: 160px;cursor: pointer;position: static !important;white-space: nowrap;top: auto !important;margin: 30px auto 0 auto !important;border-radius: 5px;padding: 17px 0 !important;background: transparent !important;color: white !important;transition: all .3s ease !important;font-size: 16px !important;border: 2px solid white;text-align: center !important;}
.ms-btn:hover {background: white !important;color: #000 !important;}

@media (max-width: 992px) {
    .ms-layer-baslik {font-size: 22px !important;}
    .ms-layer-ackl   {font-size: 14px !important;}
}
@media(max-width:768px){
    .ms-anim-layers{ width: calc(100% - 30px); }
}