.box7:after, .box7:before {
    content: ""
}
.box7 {
    overflow: hidden
}

.box7 {
    position: relative
}

    .box7:after, .box7:before {
        width: 100%;
        height: 100%;
        background: rgba(42,73,151,.7);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all .5s ease 0s
    }

    .box7:after {
        background: rgba(255,255,255,.3);
        border: 2px solid #193671;
        top: 0;
        left: 170%;
        opacity: 1;
        z-index: 1;
        transform: skewX(45deg);
        transition: all 1s ease 0s
    }

    .box7:hover:before {
        opacity: 1
    }

    .box7:hover:after {
        left: -170%
    }

    .box7 img {
        width: 100%;
        height: auto
    }


    .box8:after, .box8:before {
        content: ""
    }

.box8 {
    overflow: hidden
}

.box8 {
    position: relative
}

    .box8:after, .box8:before {
        width: 100%;
        height: 100%;
        background: rgba(42,73,151,.7);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all .5s ease 0s;
        -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topright: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .box8:after {
        background: rgba(255,255,255,.3);
        border: 2px solid #ff6300;
        top: 0;
        left: 170%;
        opacity: 1;
        z-index: 1;
        transform: skewX(45deg);
        transition: all 1s ease 0s;

    }

    .box8:hover:before {
        opacity: 1
    }

    .box8:hover:after {
        left: -170%
    }

    .box8 img {
        width: 100%;
        height: auto
    }

/*********************** Demo - 10 *******************/

.box10:after, .box10:before {
    content: ""
}

.box10 .title {
    letter-spacing: 1px
}

.box10 .title {
    text-transform: uppercase
}

.box10 {
    box-shadow: 0 0 3px rgba(0,0,0,.3)
}

    .box10 .icon li a {
        text-align: center
    }

    .box10 .icon li a {
        line-height: 35px;
        border-radius: 50%
    }


.box10 {
    /*background: #000;*/
    overflow: hidden;
    position: relative
}

    .box10:after, .box10:before {
        border-width: 0 180px 140px;
        border-style: solid;
        border-color: transparent transparent #5c5d5c;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 1;
        transform: translate(-55%,100%);
        transition: all .5s 0s cubic-bezier(.6,-.28,.735,.045)
    }

    .box10:after {
        border-width: 150px 250px;
        border-color: transparent #2a4997 #2a4997 #ff6300;
        top: 25%;
        transform: translate(-60%,100%)
    }

    .box10:hover:before {
        transition: all .4s 0s cubic-bezier(.175,.885,.32,1.275);
        transform: translate(-55%,0);
        transition-delay: .2s
    }

    .box10:hover:after {
        transition: all .4s 0s cubic-bezier(.175,.885,.32,1.275);
        transform: translate(-60%,0);
        transition-delay: 0s
    }

    .box10 img {
        width: 100%;
        height: auto;
        opacity: 1;
        transform: scale(1.1) translateY(3%);
        transition: all .5s ease 0s
    }

    .box10:hover img {
        transform: scale(1.1) translateY(-3%);
        opacity: .4
    }

    .box10 .box-content {
        padding: 20px 0 0 20px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
        transform: translateY(20%);
        transition: all .5s ease 0s
    }

    .box10:hover .box-content {
        opacity: 1;
        transform: translate(0);
        transition-delay: .1s
    }

    .box10 .title {
        font-size: 23px;
        font-weight: 800;
     
    }

    .box10 .icon {
        padding: 0;
        margin: 0;
        list-style: none
    }

        .box10 .icon li {
            display: inline-block
        }

            .box10 .icon li a {
                display: block;
                width: 35px;
                height: 35px;
                background: #18ab69;
                font-size: 18px;
                color: #fff;
                margin-right: 10px;
                transition: all .3s ease 0s
            }

.box11 .icon li, .box11 .icon li a, .box11 .title, .box12 .icon li, .box12 .title {
    display: inline-block
}

.box10 .icon li a:hover {
    transform: rotate(360deg)
}

@media only screen and (max-width:990px) {
    .box10 {
        margin-bottom: 20px
    }
}

@media only screen and (max-width:767px) and (min-width:600px) {
    .box10:before {
        border-width: 0 250px 240px
    }

    .box10:after {
        border-width: 260px 460px
    }
}

@media only screen and (max-width:599px) and (min-width:430px) {
    .box:before {
        border-width: 0 220px 120px
    }

    .box10:after {
        border-width: 260px 460px
    }
}

/*********************** Demo - 11 *******************/


.box11 {
    overflow: hidden
}

    .box11 .title {
        text-transform: uppercase
    }

.box11 {
    box-shadow: 0 0 3px rgba(0,0,0,.3)
}

.box11 {
    text-align: center
}

    .box11 .icon li, .box11 .icon li a, .box11 .title {
        display: inline-block
    }

.box11 {
    /*background: #000;*/
    color: #fff;
    position: relative
}

    .box11:after, .box11:before {
        position: absolute;
        content: ""
    }

    .box11:before {
        width: 100%;
        height: 100%;
        background: #2a4997;
        opacity: .5;
        top: 100%;
        left: 0;
        z-index: 1;
        transition: all .35s ease-in .3s
    }

    .box11:hover:before {
        top: 0;
        transition: all .35s ease-out 0s
    }

    .box11:after {
        bottom: 100%;
        left: 50%;
        border-width: 200px 200px 0;
        border-style: solid;
        border-color: #2a4997 transparent transparent;
        opacity: .9;
        transform: translateX(-50%);
        transition: all .35s ease-out 0s
    }

    .box11:hover .post, .box11:hover .title {
        transform: translate(0,-50%)
    }

    .box11:hover:after {
        bottom: 25%;
        transition: all .35s ease-in .2s
    }

    .box11 img {
        width: 100%;
        height: auto
    }

    .box11:hover img {
        opacity: .5
    }

    .box11 .icon, .box11 .post, .box11 .title {
        width: 100%;
        position: absolute;
        left: 0;
        opacity: 0;
        transition: all .35s ease .5s
    }

    .box11 .box-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .box11 .title {
        padding: 0 30px;
        margin: 0;
        font-weight: 300;
        top: 45%;
        color:#fff;
        font-size:20px;
    }

    .box11 .post {
        text-transform: capitalize
    }

    .box11 .post {
        font-size: 15px;
        top: 57%
    }

    .box11 .icon {
        padding: 0;
        margin: 0;
        list-style: none;
        bottom: 5px
    }

        .box11 .icon li a {
            width: 40px;
            height: 40px;
            line-height: 40px;
            padding: 0 5px;
            font-size: 20px;
            color: #fff;
            opacity: .7;
            transition: all .35s ease .5s
        }

            .box11 .icon li a:hover {
                opacity: 1;
                transition: all .35s ease
            }

    .box11:hover .icon, .box11:hover .post, .box11:hover .title {
        opacity: 1
    }

@media only screen and (max-width:990px) {
    .box11 {
        margin-bottom: 20px
    }
}

@media only screen and (max-width:767px) {
    .box11:after {
        border-width: 500px 500px 0
    }
}


/*********************** Demo - 12 *******************/


.box12 {
    overflow: hidden
}

    .box12 .title {
        text-transform: uppercase
    }

.box12 {
    box-shadow: 0 0 3px rgba(0,0,0,.3)
}

.box12 {
    text-align: center
}

    .box12 .icon li, .box12 .icon li a, .box1 .title {
        display: inline-block
    }

.box12 {
    /*background: #000;*/
    color: #fff;
    position: relative
}

    .box12:after, .box12:before {
        position: absolute;
        content: ""
    }

    .box12:before {
        width: 100%;
        height: 100%;
        background: #2a4997;
        opacity: .5;
        top: 100%;
        left: 0;
        z-index: 1;
        transition: all .35s ease-in .3s
    }

    .box12:hover:before {
        top: 0;
        transition: all .35s ease-out 0s
    }

    .box12:after {
        bottom: 100%;
        left: 50%;
        border-width: 200px 200px 0;
        border-style: solid;
        border-color: #2a4997 transparent transparent;
        opacity: .9;
        transform: translateX(-50%);
        transition: all .35s ease-out 0s
    }

    .box12:hover .post, .box12:hover .title {
        transform: translate(0,-50%)
    }

    .box12:hover:after {
        bottom: 48%;
        transition: all .35s ease-in .2s
    }

    .box12 img {
        width: 100%;
        height: auto
    }

    .box12:hover img {
        opacity: .5
    }

    .box12 .icon, .box12 .post, .box12 .title {
        width: 100%;
        position: absolute;
        left: 0;
        opacity: 0;
        transition: all .35s ease .5s
    }

    .box12 .box-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .box12 .title {
        padding: 0 30px;
        margin: 0;
        font-weight: 300;
        top: 20%;
        color: #fff;
        font-size: 20px;
    }

    .box12 .post {
        text-transform: capitalize
    }

    .box12 .post {
        font-size: 15px;
        top: 57%
    }

    .box12 .icon {
        padding: 0;
        margin: 0;
        list-style: none;
        bottom: 5px
    }

        .box12 .icon li a {
            width: 40px;
            height: 40px;
            line-height: 40px;
            padding: 0 5px;
            font-size: 20px;
            color: #fff;
            opacity: .7;
            transition: all .35s ease .5s
        }

            .box12 .icon li a:hover {
                opacity: 1;
                transition: all .35s ease
            }

    .box12:hover .icon, .box12:hover .post, .box12:hover .title {
        opacity: 1
    }

@media only screen and (max-width:990px) {
    .box12 {
        margin-bottom: 20px
    }
}

@media only screen and (max-width:767px) {
    .box12:after {
        border-width: 500px 500px 0
    }
}


/*********************** Demo - 15 *******************/
.box15 {
    box-shadow: 0 0 5px #7e7d7d;
    text-align: center
}

    .box15 .icon {
        padding: 0;
        list-style: none
    }

.box15 {
    position: relative
}

    .box15 img {
        width: 100%;
        height: auto
    }

    .box15 .box-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .5s ease 0s
    }

    .box15 .box-content {
        background-color: rgba(42,73,151,.8)
    }

    .box15 .box-content:after, .box15 .box-content:before {
        content: "";
        width: 50px;
        height: 50px;
        position: absolute;
        opacity: 0;
        transform: scale(1.5);
        transition: all .6s ease .3s
    }

    .box15 .box-content:before {
        border-left: 1px solid #ff6300;
        border-top: 1px solid #ff6300;
        top: 19px;
        left: 19px
    }

    .box15 .box-content:after {
        border-bottom: 1px solid #ff6300;
        border-right: 1px solid #ff6300;
        bottom: 19px;
        right: 19px
    }

    .box15 .box-content:after, .box15 .box-content:before {
        opacity: 1;
        transform: scale(1)
    }

    .box15 .title {
        font-size: 22px;
        color: #fff;
        margin: 0;
        position: relative;
        top: 0;
        opacity: 0;
        transition: all 1s ease 10ms
    }

    .box15 .title {
        top: 39%;
        opacity: 1;
        transition: all .5s cubic-bezier(1,-.53,.405,1.425) 10ms
    }

    .box15 .title:after {
        content: "";
        width: 0;
        height: 1px;
        background: #fff;
        position: absolute;
        bottom: -8px;
        left: 0;
        right: 0;
        margin: 0 auto;
        transition: all 1s ease 0s
    }

    .box15 .title:after {
        width: 80%;
        transition: all 1s ease .8s
    }

    .box15 .icon {
        width: 100%;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        opacity: 0;
        transition-duration: .6s;
        transition-timing-function: cubic-bezier(1,-.53,.405,1.425);
        transition-delay: .1s
    }

    .box15:hover .icon {
        bottom: 39%;
        opacity: 1
    }

    .box15 .icon li {
        display: inline-block
    }

        .box15 .icon li a {
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            font-size: 18px;
            color: #000;
            border: 1px solid #000;
            margin-right: 5px;
            transition: all .3s ease-in-out 0s
        }

            .box15 .icon li a:hover {
                background: #000;
                color: #fff
            }

@media only screen and (max-width:990px) {
    .box15 {
        margin-bottom: 30px
    }
}


.card__head {
    margin-top: 190px;
    padding: 7px;
}

.snip1543 {
    background-color: #fff;
    color: #ffffff;
    min-height: 226px;
    font-size: 16px;
    margin: 10px 10px 20px 10px;
    padding: 0;
    max-width: 360px;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .snip1543 *,
    .snip1543 *:before,
    .snip1543 *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    .snip1543 img {
        backface-visibility: hidden;
        max-width: 100%;
        vertical-align: top;
    }

    .snip1543:before,
    .snip1543:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: '';
        background-color: #2f4997;
        opacity: 0.5;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    .snip1543:before {
        -webkit-transform: skew(30deg) translateX(-80%);
        transform: skew(30deg) translateX(-80%);
    }

    .snip1543:after {
        -webkit-transform: skew(-30deg) translateX(-70%);
        transform: skew(-30deg) translateX(-70%);
    }

    .snip1543 figcaption {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 1;
        bottom: 0;
        /*padding: 25px 40% 25px 20px;*/
    }

        .snip1543 figcaption:before,
        .snip1543 figcaption:after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #2f4997;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
            content: '';
            opacity: 0.5;
            z-index: -1;
        }

        .snip1543 figcaption:before {
            -webkit-transform: skew(30deg) translateX(-100%);
            transform: skew(30deg) translateX(-100%);
        }

        .snip1543 figcaption:after {
            -webkit-transform: skew(-30deg) translateX(-90%);
            transform: skew(-30deg) translateX(-90%);
        }

    .snip1543 h3,
    .snip1543 p {
        margin: 0;
        opacity: 0;
        letter-spacing: 1px;
    }

    .snip1543 h3 {


        font-weight: 700;
        line-height: 1em;
        text-transform: uppercase;
    }

    .snip1543 p {
        font-size: 0.9em;
    }

    .snip1543 a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }


.deneme figcaption:after {
    background: /*url(/img/haber.png)*/ center no-repeat;
    background-size: 100px;
    /*transform:none;*/
    opacity: 1
}

.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.9;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.snip1543:hover:before,
.snip1543.hover:before {
    -webkit-transform: skew(30deg) translateX(-20%);
    transform: skew(30deg) translateX(-20%);
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.snip1543:hover:after,
.snip1543.hover:after {
    -webkit-transform: skew(-30deg) translateX(-10%);
    transform: skew(-30deg) translateX(-10%);
}

.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
    -webkit-transform: skew(30deg) translateX(-40%);
    transform: skew(30deg) translateX(-40%);
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
    -webkit-transform: skew(-30deg) translateX(-30%);
    transform: skew(-30deg) translateX(-30%);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}