.caprazslayt {
    position: relative;
    min-height: 70vw;
    overflow: hidden;
}
.panel {
    position: absolute;
    width: 100vw;
    min-height: 70vw;
    overflow: hidden;
}

    .panel .content {
        position: absolute;
        width: 100vw;
        min-height: 45vw;
        color: #FFF;
    }

    .panel-istanbul .description {
        width: 25%;
        position: absolute;
        top: 50vh;
        transform: translate(-20%, -50%);
        text-align: center;
    }
    .panel-istanbul .description h1{
        font-size: 35px;
        line-height: 1.31818182em;
    }

    .panel-cide .description {
        width: 25%;
        position: absolute;
        top: 50vh;
        transform: translate(-15%, -50%);
        text-align: center;
    }
    .panel-cide .description h1{
        font-size: 35px;
        line-height: 1.31818182em;
    }

    .panel-istanbul .istanbulresim img {
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
        width: 35%;
        position: absolute;
        top: 50vh;
        left: 50%;
        transform: translate(-71%, -48%);
    }

    .panel-cide .cideresim img {
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
        width: 35%;
        position: absolute;
        top: 50vh;
        left: 50%;
        transform: translate(-50%, -48%);
    }


.bottom {
    
    z-index: 1;
}

    .bottom .description {
        right: 0%;
    }

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
}

    .top .description {
        left: 9%;
    }

.ayrac {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(0, 136, 192);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
}

.keskin .ayrac {
    top: 50%;
    transform: rotate(30deg) translateY(-50%);
    height: 200%;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
}

.keskin .top {
    transform: skew(-30deg);
    margin-left: -1000px;
    width: calc(50vw + 1000px);
}

.keskin .top .content {
    transform: skew(30deg);
    margin-left: 1000px;
}
































.caprazslayt-mobil {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

.panel-mobil {
    position: absolute;
    width: 100vw;
    min-height: 100%;
    overflow: hidden;
}

    .panel-mobil .content-mobil {
        position: absolute;
        width: 100vw;
        min-height: 100%;
        color: #FFF;
    }

    .panel-istanbul-mobil .description-mobil {
        
        position: absolute;
        top: 15vh;
        transform: translate(-20%, -50%);
        text-align: center;
    }
    .panel-istanbul-mobil .description-mobil h1{
        font-size: 35px;
        line-height: 1.31818182em;
    }

    .panel-cide-mobil .description-mobil {
        
        position: absolute;
        top: 80vh;
        transform: translate(-15%, -50%);
        text-align: center;
    }
    .panel-cide-mobil .description-mobil h1{
        font-size: 35px;
        line-height: 1.31818182em;
    }

    .panel-istanbul-mobil .istanbulresim-mobil img {
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
        width: 55%;
        position: absolute;
        top: 45%;
        left: 60%;
        transform: translate(-71%, -48%);
    }

    .panel-cide-mobil .cideresim-mobil img {
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
        width: 55%;
        position: absolute;
        top: 45%;
        left: 49%;
        transform: translate(-50%, -48%);
    }


.bottom-mobil {
    
   
}

    .bottom-mobil .description-mobil {
        left: 30%;
        margin-top: -32px;
    }

.top-mobil {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
}

    .top-mobil .description-mobil {
        left: 30%;
    }

.ayrac-mobil {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(0, 136, 192);
    width: 5px;
    top: 0;
    left: 50%;
    
}

.keskin-mobil .ayrac-mobil {
    top: 50%;
    transform: rotate(30deg) translateY(-50%);
    height: 200%;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
}

.keskin-mobil .top-mobil {
    transform: skew(-30deg);
    margin-left: -1000px;
    width: calc(50vw + 1000px);
}

.keskin-mobil .top-mobil .content-mobil {
    transform: skew(30deg);
    margin-left: 1000px;
}