@import url(https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext);
html,
    body {
        margin: 0;
        height: 100%;
        background-size: cover;
        background-position: center;
        font-family:  arial;
        font-weight:  900;
    }
    a {
        background-color: transparent
    }
    
    
    .pure-g {
        width: 100%;
        margin: 0 auto;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    img.Kurumsal {
    /* padding-top: calc(50% - 25px); */
    filter: drop-shadow(1px 1px 1px black);
}
    .pure-g:before,
    .pure-g:after {
        display: table;
        content: " ";
        clear: both;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    .bol {
        float: left;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    .bbox {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        text-align: center;
        text-decoration:  none;
        min-width: 30vh;
        min-height: 30vh;
        border-radius: 25px;
        padding: 15px;
        z-index: 5;
    }
    img {
        max-width: 100%;
        border: 0;
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }
    
    
    a:hover img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    h2 {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        font-size: 15px;
        text-decoration:none;
        color:  black;
        background: white;
        padding:  10px;
        border-radius: 5px;
        }
    a:hover h2 {
        opacity: 1;
        color: white !important;
        background: #4d5db4;
        /* -webkit-transform: scale(1); */
        -ms-transform: scale(1);
        /* transform: scale(1); */
    }
    
    
    @media screen and (max-width: 700px) {
        h2 {
    font-size: 14px !important;
    margin:  10px 30px !important;
}
.bol.left:before {transform:none !important;}
.bol.left .imgfrm {
    background: rgb(255, 255, 255);
    vertical-align: middle;
    border-radius: 100%;
    height: 150px !important;
    width: 150px !important;
    box-shadow: inset 3px 8px 2px rgba(0, 0, 0, 0.51);
    margin: 0 auto;
}
.bol.right .imgfrm {
    background: #a81734;
    vertical-align: middle;
    border-radius: 100%;
    height: 150px  !important;
    width: 150px  !important;
    box-shadow: inset 3px 8px 2px rgba(0, 0, 0, 0.51);
    margin: 0 auto;
}
.bol.left .imgfrm img {
    padding-top: 27%;
    width: 80%;
}
        .bol {
            float: left;
            height: 50%;
            position: relative;
            /* margin: 0 5%; */
            width: 100% !important;
            overflow: hidden;
        }
                .bol a {
            margin-top: -25vh;
        }
        .bol + .bol a {
            margin-top: 20vh;
        }
        a img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    
    a img + p {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    }

    @media only screen and (min-width: 769px) {
        .logoTicari {height:207px;}
    }
    .bol.left {
    width: 50%;
    z-index: 99;
}


.bol.right {
    width: 50%;
    z-index: 98;
}
.fullback {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0; */
    /* z-index:9; */
}
.bol.left .imgfrm {
    vertical-align: middle;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    background: white;
    border-radius: 100%;
}
.bol.right .imgfrm {
    vertical-align: middle;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    background: #00189e !important;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}
.bol.left .imgfrm img {
    padding-top: 4em;
    width: 80%;
}

.bol.left:before {
    position: absolute;
    content: "";
    top: -5em;
    left: -5em;
    right: 0;
    bottom: -25em;
    background: #00189e !important;
    transform: rotate(5deg);
    z-index: 1;
}.bbox a {
    text-decoration: none;
}
.bol.left .bbox {
}

.bol .bbox p {font-weight: 400 !important;}
.bol.right .bbox {
}
.bol.left .bbox h2 {
    border: 2px solid white;
    color: #4a5ab3;
    border-radius: 5px;
}
.bol.right h2 {
    border: 2px solid #00189e;
    color: #ffffff;
    background: #3e50b6;
}


.bol.left:after {
    content:"";
    position: absolute;
    top: -5em;
    left: -5em;
    right: 0;
    bottom: -25em;
    background: #e20000 !important;
    transform: rotate(5deg);
    opacity: .2;
    background-size: cover;
    background: url(pattrn.png) !important;
    z-index: 2;
}



.bol.right:after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e20000 !important;
    opacity: .2;
    background-size: cover;
    background: url(pattrn.png) !important;
}
.bol.right a:hover h2 {
    background: white;
    color: #4b5ab2 !important;
}
.bol.right .imgfrm:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(pattrn.png);
    background-size: cover !important;
    opacity: .25;
}
.imgfrm {
    box-shadow: inset -2px 7px 14px 3px #00000075;
}