@media(max-width:1023px) {

.slider .hero {

    position: absolute;

    top: 200px;

    left:45%;

    z-index: 3;

    color: #fff;

    text-align: center;

     transform: translate3d(-50%,-50%,0);

 }



 .slider .hero h1 {

    font-size: 30px;

    font-weight:600;

    margin: 0;

    color:#fff;

    padding: 0;

    text-align:left;

    width: 100%;

   font-family: 'Poppins', sans-serif;

}



.slider .hero h1 span{

    color:#e20714;

    font-size: 21px;

    font-weight:700;

    margin: 0;

    padding: 0;

    float: left;

    text-align:left;

    width: 100%;

}



.slider .hero h2{

    float: left;

    font-size: 30px;

    font-weight:600;

    margin-top:25px;

    color:#fff;

    padding: 0;

    text-align:left;

    width: 100%;

    line-height: 22px;

    font-family: 'Poppins', sans-serif;

    display: none;

}



.slider .hero h3{

    font-size: 17px;

    line-height: 23px;

    font-weight:300;

    margin-top:30px;

    color:#fff;

    padding: 0;

    text-align:left;

    width: 100%;

    font-family: 'Poppins', sans-serif;

    display: none;

}



.slider .hero a{

    float: left;

    width: 170px;

    height:45px;

    color:#fff;

    background: #727171;

    font-size: 15px;

    line-height: 45px;

    text-align: center;

    font-family: 'Poppins', sans-serif;

    display: none;



}



}





@media(min-width:1024px) {


.slider .hero {
    position: absolute;
    width: 1170px;
    top: 400px;

    left:50%;

    z-index: 3;

    color: #fff;

    text-align: left;

     transform: translate3d(-50%,-50%,0);

 }



 .slider .hero h1 {

    font-size: 60px;

    font-weight:600;

    margin: 0;

    color:#fff;

    padding: 0;

    text-align:left;

    width: 100%;

   font-family: 'Poppins', sans-serif;

}



.slider .hero h1 span{

    color:#e20714;

    font-size: 51px;

    font-weight:700;

    margin: 0;

    padding: 0;

    float: left;

    text-align:left;

    width: 100%;

}



.slider .hero h2{

    float: left;

    font-size: 30px;

    font-weight:600;

    margin-top:25px;

    color:#fff;

    padding: 0;

    text-align:left;

    width: 100%;

    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;

}



.slider .hero h3{

    font-size: 17px;


    font-weight:300;

    margin-top:0px;

    color:#fff;

    padding: 0;

    text-align:left;

    width: 100%;
    float: left;

    font-family: 'Poppins', sans-serif;

}



.slider .hero a{

    float: left;

    width: 170px;

    height:45px;

    color:#fff;

    background: #727171;

    font-size: 15px;

    line-height: 45px;

    text-align: center;

    font-family: 'Poppins', sans-serif;



}



}



.slider{

    font-family: 'Exo 2', sans-serif;

}



.slider .carousel-indicators {

    position: absolute;

    bottom: 10px;

    left: 50%;

    z-index: 999;

    width: 60%;

    padding-left: 0;

    margin-left: -30%;

    text-align: center;

    list-style: none;

}



.slider .fade-carousel .carousel-indicators > li {

    margin: 0 2px;

    background-color: #e74c3c;

    border-color: #e74c3c;

    opacity: 0.4;

}

.slider .fade-carousel .carousel-indicators > li.active {

    width: 10px;

    height: 10px;

    opacity: 1;

}









.slider .fade-carousel .carousel-inner .item .hero {

    opacity: 0;

    -webkit-transition: 2s all ease-in-out .1s;

    -moz-transition: 2s all ease-in-out .1s;

    -ms-transition: 2s all ease-in-out .1s;

    -o-transition: 2s all ease-in-out .1s;

    transition: 2s all ease-in-out .1s;

}



.slider .fade-carousel .carousel-inner .item.active .hero {

    opacity: 1;

    -webkit-transition: 2s all ease-in-out .1s;

    -moz-transition: 2s all ease-in-out .1s;

    -ms-transition: 2s all ease-in-out .1s;

    -o-transition: 2s all ease-in-out .1s;

    transition: 2s all ease-in-out .1s;

}



.slider .btn.btn-lg {padding: 10px 40px;}

.slider .btn.btn-hero,

.slider .btn.btn-hero:hover,

.slider .btn.btn-hero:focus {

    color: #f5f5f5;

    background-color: #e74c3c;

    border-color: rgba(231, 76, 60, 0.76);

    outline: none;

    margin: 20px auto;

}



.slider .fade-carousel .slides .slide-1,

.slider .fade-carousel .slides .slide-2,

.slider .fade-carousel .slides .slide-3 {

    height: 100vh;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}





@media(max-width:900px) {

.slider {
    float: left;
    width: 100%;
    height: 290px;
    position: relative;
}
.bayram {

    height:290px!important;

}



.slider .carousel-inner{

    height:290px !important;

}

.slider .fade-carousel {

    position: relative;

    height:290px !important;

}

.slider .fade-carousel .carousel-inner .item {

    height:290px !important;

}


.bulut {
    position: absolute;
    bottom:0px;
    right:0px;
    z-index: 9;
    display: none;
}




}







@media(min-width:901px) and  (max-width:1366px){

.slider .hero {
    position: absolute;
    width: 1170px!important;
    top: 350px;

    left:50%;

    z-index: 3;

    color: #fff;

    text-align: left;

     transform: translate3d(-50%,-50%,0);

 }

.slider {
    float: left;
    width: 100%;
    height: 650px;
    position: relative;
}
.bayram {

    height:650px;

}



.slider .carousel-inner{

    height:650px !important;

}

.slider .fade-carousel {

    position: relative;

    height:650px !important;

}

.slider .fade-carousel .carousel-inner .item {

    height:650px !important;

}


.bulut {
    position: absolute;
    bottom:0px;
    right:0px;
    z-index: 9;
}


}




@media(min-width:1367px){

.slider {
    float: left;
    width: 100%;
    height: 800px;
    position: relative;
}
.bayram {

    height:800px;

}



.slider .carousel-inner{

    height:800px !important;

}

.slider .fade-carousel {

    position: relative;

    height:800px !important;

}

.slider .fade-carousel .carousel-inner .item {

    height:800px !important;

}

.bulut {
    position: absolute;
    bottom:0px;
    right:0px;
    z-index: 9;
}

}






