a,p,input,select,textarea,table,td,th,span,li,body,button {
    font-family: 'Roboto',sans-serif
}

* {
    cursor: default!important
}

h1,h2 h3,h4,h5,h6 {
    font-family: 'Roboto',sans-serif
}

html {
    scroll-behavior: smooth
}

a:hover {
    text-decoration: none;
    cursor: pointer!important
}

input,select,button,textarea {
    outline: 0
}

.container,.container-lg,.container-md,.container-sm,.container-xl {
    width: 90%;
    max-width: 90%
}

h1 {
    font-size: 50px;
    line-height: 120%
}

h2 {
    font-size: 45px;
    line-height: 120%;
    font-weight: 300
}

h2 strong {
    font-weight: 700
}

h3 {
    font-size: 45px;
    line-height: 120%;
    font-weight: 900
}

h4 {
    font-size: 31px;
    line-height: 120%;
    font-weight: 300
}

h5 {
    font-size: 30px;
    line-height: 140%
}

h6 {
    font-size: 25px;
    line-height: 140%
}

p,li,a {
    font-size: 18px;
    line-height: 150%;
    font-weight: 300;
    color: #929292
}

.main-header {
    position: absolute;
    padding-top: 30px;
    padding-bottom: 30px;
    transition: 1s;
    width: 100%;
    background: 0 0;
    top: 0;
    left: 0;
    z-index: 22
}

.main-header .main-header-logo {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.main-header .main-header-logo img {
    width: 85%;
    transition: 1s;
    padding-top: 2%;
    padding-bottom: 2%
}

.main-header .main-header-menu {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.main-header .main-header-menu ul {
    padding-left: 0;
    margin-bottom: 0
}

.main-header .main-header-menu ul li {
    display: inline-block;
    margin: 0 0 0 10px
}

.main-header .main-header-menu ul li img {
    width: 70%;
    cursor: pointer;
    padding-top: 7%;
    padding-bottom: 0;
    float: right
}

.main-header .main-header-menu ul li input {
    border: 1px solid #1d5a69;
    height: 40px;
    width: 100%;
    border-radius: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #1d5a69
}

.main-header .main-header-menu ul li input::placeholder {
    color: #1d5a69
}

.move {
    animation: move 200s linear infinite
}

@keyframes move {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(5000deg)
    }
}

#backtotop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1;
    font-size: 18px;
    border: 0;
    outline: 0;
    cursor: pointer;
    background: #4ca0d8;
    padding: 1%;
    border-radius: 50%;
    transform: rotate(-90deg);
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    transition: .5s
}

#backtotop svg {
    width: 100%;
    width: 18px;
    height: 18px;
    transition: 1s
}

#backtotop:hover {
    width: 100px;
    height: 100px
}

.sidenav {
    height: 100vh;
    width: 0%;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    background-color: #11334a;
    overflow-y: hidden;
    transition: .5s
}

.sidenav .openmenu-kapat-logo {
    position: relative;
    height: 5vh;
    z-index: 5
}

.sidenav .openmenu-kapat {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.sidenav .openmenu-kapat .closebtn {
    color: #fff;
    font-size: 90px;
    font-weight: 100;
    margin-top: 3%
}

.sidenav .openmenu-logo {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.sidenav .openmenu-logo img {
    width: 20%
}

.sidenav .openmenurows {
    height: 100vh;
    opacity: 0
}

.sidenav .openmenurows .openmenu-left {
    width: 50%;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center
}

.sidenav .openmenurows .openmenu-left .openmenu-left-sosyalmedya {
    text-align: center
}

.sidenav .openmenurows .openmenu-left .openmenu-left-sosyalmedya h2 {
    font-weight: 700;
    font-size: 60px;
    line-height: 50px;
    text-align: center;
    color: #000
}

.sidenav .openmenurows .openmenu-left .openmenu-left-sosyalmedya a {
    font-weight: 300;
    font-size: 20px;
    line-height: 150.5%;
    text-align: center;
    color: #333;
    transition: .5s
}

.sidenav .openmenurows .openmenu-left .openmenu-left-sosyalmedya ul {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 7%
}

.sidenav .openmenurows .openmenu-left .openmenu-left-sosyalmedya ul li {
    display: inline-block;
    margin: 0 5px 0 5px
}

.sidenav .openmenurows .openmenu-right {
    width: 50%;
    position: relative;
    margin-top: auto;
    margin-bottom: auto
}

.sidenav .openmenurows .openmenu-right .openmenulinks {
    padding-left: 5%;
    margin-top: auto;
    margin-bottom: auto
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li {
    list-style: none
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li:hover:before {
    width: 100%
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li a {
    font-weight: 700;
    font-size: 55px;
    line-height: 90px;
    color: #a5a5a5;
    transition: .5s;
    position: relative
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li a:before {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 3px;
    bottom: 0;
    background: #4ca0d8;
    transition: 1s
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li a:hover:before {
    width: 100%;
    transition: 1s
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li a:hover {
    transition: .5s;
    color: #4ca0d8
}

.sidenav .openmenurows .openmenu-right .openmenulinks ul li a span {
    font-size: 15px;
    line-height: 92px;
    vertical-align: bottom;
    margin-right: 30px
}

.sidenav .openmenumotorimage {
    position: absolute;
    bottom: 5%;
    right: 0;
    z-index: -1;
    width: 47%
}

.sidenav .openmenumotorimage img {
    width: 100%;
    height: 100%
}

.navbar-takip {
    position: fixed;
    background: 0 0;
    z-index: 11;
    transition: 1s;
    padding-top: 0;
    padding-bottom: 0;
    background: #11334a
}

.main-header.beyazmenu {
    background: #11334a
}

.scrolldown {
    animation: mymove 6s infinite
}

@keyframes mymove {
    0% {
        bottom: 9%
    }

    50% {
        bottom: 15%
    }

    to {
        bottom: 9%
    }
}

.mainpage {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh
}

.mainpage .backgroundvideoimage {
    width: 100%
}

.mainpage .videoplay {
    position: absolute;
    right: 5%;
    bottom: 10%;
    width: 10%;
    text-align: center
}

.mainpage .videoplay .play {
    text-align: center
}

.mainpage .videoplay .move {
    position: absolute;
    top: -83%;
    left: 5px
}

.mainpage .backgroundvideoimage .film {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 1
}

.mainpage .backgroundvideoimage .film2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(91deg,#020c18 68.62%,transparent 149.94%);
    opacity: .15
}

.mainpage .backgroundvideoimage img {
    width: 100%;
    height: 150vh;
    object-fit: cover;
    transition: 10s
}

.mainpage .backgroundvideoimage video {
    width: 100%;
    object-fit: cover;
    object-position: bottom
}

.mainpage .description {
    position: absolute;
    left: 5%;
    bottom: 30%;
    width: 100%
}

.mainpage .description span {
    opacity: 0;
    transition: .5s
}

.mainpage .description .butonspan {
    opacity: 0;
    transition: .5s
}

.mainpage .description h2 {
    color: #fff;
    line-height: 180%;
    width: 60%
}

.mainpage .description h2 strong {
    color: #fff;
    font-weight: 400
}

.mainpage .description h2 u {
    text-decoration: none;
    position: relative
}

.mainpage .description h2 u::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #fff
}

.nexartbtn.iletisimegec {
    margin: auto;
    text-align: center;
    width: 100%
}

.nexartbtn.iletisimegec a {
    color: #000;
    border: 1px solid #000;
    margin: auto
}

.nexartbtn.iletisimegec a:hover {
    color: #000!important;
    border: 1px solid #fff;
    margin: auto;
    background: #fff!important
}

.uretmekistermisin:hover .nexartbtn.iletisimegec a {
    border: 1px solid #fff;
    color: #fff
}

.btn:focus {
    outline: 0!important;
    box-shadow: none
}

.nexartbtn .btn {
    position: relative;
    display: inline-block;
    margin: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    background: 0 0;
    border: 1px solid #4ca0d8;
    cursor: pointer;
    transition: ease-out .5s;
    -webkit-transition: ease-out .5s;
    -moz-transition: ease-out .5s;
    display: flex;
    align-items: center;
    line-height: 300%;
    width: 100%;
    border-radius: 0;
    font-weight: 300;
    cursor: pointer!important
}

.hizmetlerr.krem .nexartbtn .btn {
    color: #000;
    border: 1px solid #4ca0d8
}

.hizmetwidth .nexartbtn .btn img {
    width: 10%
}

.nexartbtn .btn.btn-border-4::after,.nexartbtn .btn.btn-border-4::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s
}

.nexartbtn .btn.btn-border-4::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 6px
}

.nexartbtn .btn.btn-border-4::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
    border-radius: 6px
}

.nexartbtn .btn.btn-border-4:hover {
    color: #fff;
    background: #000
}

.hizmetlerr.krem .nexartbtn .btn.btn-border-4:hover {
    color: #000;
    background: #e4e4e4
}

.nexartbtn .btn.btn-border-4:hover img {
    transform: translate(15px,-10px)
}

.nexartbtn .btn.btn-border-4:hover::after,.nexartbtn .btn.btn-border-4:hover::before {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    border-color: #fff
}

.hizmetlerr.krem .nexartbtn .btn.btn-border-4:hover::after,.hizmetlerr.krem .nexartbtn .btn.btn-border-4:hover::before {
    border-color: #000
}

.play-btn-box {
    border: 2px #000 solid;
    border-radius: 50%;
    width: 287px;
    height: 287px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.play-btn-line1 {
    border: 2px #000 solid;
    border-radius: 50%;
    width: 230px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right-color: transparent
}

.play-btn-line2 {
    border: 2px #000 solid;
    border-radius: 50%;
    width: 172px;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right-color: transparent
}

.mainpagetwovideo:hover .wrapper {
    transition: 1s;
    -webkit-animation: scalever 2s infinite linear
}

#line1 {
    -webkit-animation: rotation 4s infinite linear
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg)
    }
}

#line2 {
    -webkit-animation: rotation1 3s infinite linear
}

@-webkit-keyframes rotation1 {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg)
    }
}

.mainpagetwovideo {
    position: relative;
    padding-top: 5%;
    padding-bottom: 5%
}

.mainpagetwovideo .absoluteicin {
    position: absolute;
    top: 45%;
    left: 0;
    margin: auto;
    text-align: center;
    width: 100%
}

.mainpagetwovideo .videoimage {
    position: relative;
    transition: .5s
}

.mainpagetwovideo:hover .play-button {
    transform: scale(1.1);
    transition: .5s
}

.mainpagetwovideo .videoimage img {
    width: 100%;
    object-fit: cover
}

.mainpagetwovideo .videoimage video {
    width: 100%;
    object-fit: cover;
    max-height: 90vh
}

.mainpagetwovideo .videoimage .film3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(89.83deg,#000 7.01%,rgba(38,38,38,0) 40.53%);
    mix-blend-mode: multiply;
    opacity: .5
}

.portfolyo {
    padding-bottom: 5%;
    padding-top: 5%;
    background: #4d4d4e20
}

.portfolyo .portdesc {
    padding-bottom: 5%
}

.portfolyo .portdesc p {
    line-height: 174%;
    text-align: justify;
    letter-spacing: 1px;
    color: #313131
}

.portfolyo .portdesc span {
    letter-spacing: .24em;
    color: #000;
    display: block;
    margin-bottom: 1%;
    font-weight: 300
}

.portfolyo .portdesc h2 {
    margin-bottom: 2%;
    color: #000
}

.portfolyo .portdesc h2 strong {
    display: block
}

.portfolyo .portrow {
    margin: 0
}

.portfolyo .portrow .porfolyowidth {
    width: 33%;
    margin: auto;
    position: relative;
    padding-bottom: 5%;
    cursor: pointer;
    margin-bottom: 5%
}

.portfolyo .portrow .porfolyowidth .imganimation {
    text-align: center;
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 65vh;
    width: 85%
}

.portfolyo .portrow .porfolyowidth .imganimation img {
    width: 100%;
    transform: scale(1);
    top: 0;
    right: 30px;
    transition: 1s;
    height: 100%
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop {
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    z-index: 2
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop img {
    width: 60%;
    padding-top: 25%;
    transform: scale(1)!important
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description {
    padding-top: 35%
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description p {
    color: #fff;
    width: 90%;
    margin: auto;
    font-size: 15px;
    height: 7vh
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5%
}

.portfolyo .portrow .porfolyowidth:hover .imganimation .hovertop .description .nexartbtn.portfolyobtn a {
    background: #000
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn a.btn {
    width: 40%;
    line-height: 250%;
    font-size: 20px;
    padding-left: 0;
    opacity: 1;
    font-weight: 300;
    border: 1px solid #4ca0d8;
    background: 0 0;
    color: #fff;
    transition-delay: 1s
}

.portfolyo .portrow .porfolyowidth:hover .imganimation .hovertop .description .nexartbtn.portfolyobtn a.btn {
    border: 1px solid #4ca0d8;
    background: #4ca0d8;
    color: #fff;
    transition-delay: 1s
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn a.btn img {
    width: 15px;
    padding: 0
}

.portfolyo .portrow .porfolyowidth .imganimation .film4 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(89.83deg,#11334a90 100%,#11334a 100.53%);
    width: 100%;
    margin: auto;
    text-align: center;
    transition: .8s;
    opacity: .5;
    z-index: 1
}

.portfolyo .portrow .porfolyowidth:hover .film4 {
    left: 0;
    transition: .8s;
    opacity: 1
}

.portfolyo .portrow .porfolyowidth:hover .hovertop {
    transition-delay: .8s;
    transition: .8s;
    top: 0;
    opacity: 1
}

.portfolyo .portrow .porfolyowidth::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 80%;
    width: 1px;
    background: #2c2c2c
}

.portfolyo .portrow .porfolyowidth::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: 2%;
    height: 1px;
    width: 30%;
    background: #000
}

.porfolyowidth .firma {
    position: absolute;
    bottom: 0%;
    left: 7%;
    width: 58%
}

.porfolyowidth .firma h4 {
    letter-spacing: .02em;
    color: #000;
    font-weight: 700;
    margin: 0;
    width: 95%;
}

.porfolyowidth .firma h4 span {
    font-size: 50%;
    display: block;
    margin: 0;
    line-height: 90%;
    color: #000
}

.porfolyowidth .tarih {
    position: absolute;
    left: -3%;
    bottom: 12%;
    transform: rotate(270deg)
}

.porfolyowidth .tarih span {
    color: #000;
    font-size: 13px
}

.nexartbtn.tumisler .btn {
    position: relative;
    display: inline-block;
    margin: 15px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000;
    background: 0 0;
    border: 1px solid #4ca0d8;
    cursor: pointer;
    transition: ease-out .5s;
    -webkit-transition: ease-out .5s;
    -moz-transition: ease-out .5s;
    display: flex;
    justify-content: left;
    align-items: center;
    line-height: 300%;
    width: 13%;
    outline: 0;
    padding-left: 20px;
    opacity: 1;
    font-weight: 300
}

.nexartbtn.tumisler .btn:hover {
    background: #4ca0d8;
    color: #fff
}

.nexartbtn.tumisler .btn.btn-border-4::after,.nexartbtn.tumisler .btn.btn-border-4::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s
}

.nexartbtn.tumisler .btn.btn-border-4::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 6px
}

.nexartbtn.tumisler .btn.btn-border-4::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
    border-radius: 6px
}

.nexartbtn.tumisler .btn.btn-border-4:hover {
    color: #000;
    background: #fff
}

.nexartbtn.tumisler {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center
}

.nexartbtn.tumisler .btn.btn-border-4:hover::after,.nexartbtn.tumisler .btn.btn-border-4:hover::before {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    border-color: #000
}

.portfolyo .portrow h3 {
    display: block;
    width: 100%;
    text-align: center
}

.mainakordion {
    background: #11334a;
    padding-top: 2%;
    padding-bottom: 6%
}

.mainakordion .row .leftakord {
    width: 40%;
    margin-top: auto;
    margin-bottom: auto
}

.mainakordion .row .leftakord span {
    color: #858585;
    padding-bottom: 5%;
    position: absolute;
    left: 5%;
    top: 100px;
    width: 40%;
    letter-spacing: .24em;
    display: block;
    margin-bottom: 1%;
    font-weight: 300
}

.mainakordion .row .leftakord h1 {
    color: #fff;
    font-weight: 400;
    font-size: 70px;
    line-height: 106px;
    letter-spacing: -.02em;
    text-transform: capitalize;
    color: #fff;
    position: absolute;
    left: 5%;
    top: 130px;
    width: 40%
}

.mainakordion .row .leftakord h1 span {
    color: #4ca0d8;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    font-weight: 600;
    position: initial;
    display: inline
}

.mainakordion .row .rightakord {
    width: 60%;
    padding-left: 7%;
    margin-top: 3%
}

.mainakordion .row .rightakord button {
    outline: 0;
    border: 0;
    background: 0 0;
    font-weight: 700;
    font-size: 35px;
    line-height: 200%;
    letter-spacing: .065em;
    color: #fff;
    border-bottom: 1px solid #fff;
    width: 100%;
    text-align: left;
    position: relative;
    transition: .5s
}

.mainakordion .row .rightakord button:hover {
    transition: .5s;
    opacity: .5
}

.mainakordion .row .rightakord .colakor .cardakor .row {
    margin: 0
}

.mainakordion .row .rightakord .colakor .cardakor .row .akordleft {
    width: 15%
}

.mainakordion .row .rightakord .colakor .cardakor .row .akordleft p {
    font-weight: 700;
    font-size: 80px;
    letter-spacing: .035em;
    color: #ffffff40;
    transform: rotate(-90deg);
    margin: 0
}

.mainakordion .row .rightakord .colakor .cardakor .row .akordright {
    width: 85%
}

.mainakordion .row .rightakord .colakor .cardakor .row .akordright ul {
    padding: 0;
    margin: 0;
    padding-top: 2%
}

.mainakordion .row .rightakord .colakor .cardakor .row .akordright ul li {
    display: inline-flex;
    width: auto;
    margin: auto;
    color: #fff;
    line-height: 300%;
    margin-right: 8%
}

.nexartbtn.akordbtn {
    display: flex;
    justify-content: flex-end
}

.hizmetlerr.syh1 .nexartbtn.akordbtn {
    justify-content: flex-start
}

.nexartbtn.akordbtn a {
    width: 23%;
    padding-left: 4%;
    opacity: 1;
    line-height: 370%
}

.mainakordion .row .rightakord button img {
    position: absolute;
    right: 5%;
    bottom: 40%
}

.mainakordion .row .rightakord button::before {
    content: "01";
    position: absolute;
    bottom: -20%;
    transform: rotate(-90deg);
    font-size: 50%;
    left: -5%;
    color: #4ca0d8
}

.mainakordion .row .rightakord button.onea:before {
    content: "01"
}

.mainakordion .row .rightakord button.oneb:before {
    content: "03"
}

.mainakordion .row .rightakord button.oneth:before {
    content: "04"
}

.mainakordion .row .rightakord button.onec:before {
    content: "05"
}

.mainakordion .row .rightakord button.oned:before {
    content: "06"
}

.mainakordion .row .rightakord button.oneg:before {
    content: "07"
}

.mainakordion .row .rightakord button.oneafwfg:before {
    content: "08"
}

.mainakordion .row .rightakord button.onee:before {
    content: "02"
}

.nasilyapiyoruz.iceri {
    margin-top: -15%;
    padding-bottom: 0
}

.nasilyapiyoruz {
    position: relative;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden
}

.nasilyapiyoruz span {
    line-height: 133%;
    color: #454545;
    letter-spacing: .24em;
    display: block;
    margin-bottom: 1%;
    font-weight: 300;
    .portfolyo .portrow .porfolyowidth {
        width: 100%;
        margin-bottom: 11%;
    }

    ;}

.nasilyapiyoruz h2 {
    margin-bottom: 2%;
    font-weight: 300;
    letter-spacing: -.02em;
    text-transform: capitalize;
    font-feature-settings: 'case' on,'ss02' on,'ss04' on,'ss05' on,'ss06' on;
    color: #000;
    position: relative
}

.nasilyapiyoruz h2 strong {
    display: block;
    font-weight: 500
}

.nasilyapiyoruz h4 {
    width: 50%
}

.nasilyapiyoruz .desc {
    position: relative
}

.nasilyapiyoruz .desc .absolkreatif {
    position: absolute;
    left: 50%;
    top: 60%
}

.nasilyapiyoruz .desc .absolnexart {
    position: absolute;
    left: 60%;
    top: 0
}

.nasilyapiyoruz .desc .absolnexart span {
    font-weight: 700;
    font-size: 200px;
    line-height: 103.5%;
    color: transparent;
    -webkit-text-stroke: 1px #e1e1e1ad;
    letter-spacing: normal;
    font-family: sans-serif
}

.nasilyapiyoruz .desc .absolkreatif span {
    font-weight: 700;
    font-size: 200px;
    line-height: 103.5%;
    color: #e9e9e9b8;
    letter-spacing: normal
}

.nasilyapiyoruz .rowkreatif {
    padding-top: 5%;
    margin: 0
}

.nasilyapiyoruz .rowkreatif .kreatifwidth {
    width: 45%;
    margin: auto;
    background: #fff;
    margin-bottom: 5%;
    padding-bottom: 5%;
    transition: 1s;
    height: 60vh;
    transition-delay: 0s!important
}

.nasilyapiyoruz .rowkreatif .kreatifwidth:hover {
    background: #4ca0d8;
    transition: 1s;
    transition-delay: 0!important
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .hoverkapa {
    display: block
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .hovergel {
    display: none;
    color: #2556f1
}

.nasilyapiyoruz .rowkreatif .kreatifwidth:hover .hoverkapa {
    display: none
}

.nasilyapiyoruz .rowkreatif .kreatifwidth:hover .hovergel {
    display: block;
    filter: brightness(0) invert(1)
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .padver {
    border-top: 1px solid #d8d8d8;
    width: 90%;
    margin: auto;
    margin-top: 5%;
    padding-top: 5%
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .padver .rakam {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    padding-left: 5%
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .padver .rakam span {
    font-weight: 700;
    font-size: 100px;
    line-height: 133%;
    letter-spacing: .02em;
    -webkit-text-stroke: 1px #000;
    color: transparent;
    font-family: sans-serif
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .padver .ikon {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative
}

.nasilyapiyoruz .rowkreatif .kreatifwidth .padver .ikon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    position: absolute;
    right: 0;
    filter: drop-shadow(2px 4px 6px #2556f1)
}

.nasilyapiyoruz .rowkreatif .kreatifwidth h4 {
    width: 100%;
    padding-top: 10%;
    padding-left: 5%
}

.nasilyapiyoruz .rowkreatif .kreatifwidth p {
    padding-top: 5%;
    margin: 0;
    padding-left: 5%;
    width: 100%;
    text-align: justify
}

.nasilyapiyoruz .rowkreatif .kreatifwidth:hover .padver .rakam span {
    color: #fff;
    -webkit-text-stroke: transparent
}

.nasilyapiyoruz .rowkreatif .kreatifwidth:hover .padver h4 {
    color: #fff
}

.nasilyapiyoruz .rowkreatif .kreatifwidth:hover .padver p {
    color: #fff
}

.musteriler {
    background: #282828;
    padding-top: 5%;
    padding-bottom: 5%
}

.musteriler .bilgiAciklamaBuyuk {
    color: #fff;
    font-size: 140%
}

.musteriler .bilgiAciklamaKucuk {
    color: #fff
}

.musteriler .row {
    margin: 0;
    padding-top: 5%
}

.musteriler span {
    color: #fff;
    letter-spacing: .24em;
    display: block;
    margin-bottom: 1%;
    font-weight: 300
}

.musteriler h2 {
    font-weight: 300;
    letter-spacing: .02em;
    opacity: 1;
    color: #fff
}

.musteriler h2 strong {
    color: #7d7d7d;
    display: block
}

.musteriler .musteriikon {
    width: 15%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%
}

.musteriler .musteriikon img {
    width: 180px;
    object-fit: contain;
    height: 120px
}

.markalar {
    position: relative
}

.markalar .bgimage {
    width: 100%
}

.markalar .bgimage img {
    width: 100%;
    height: 100vh;
    object-fit: cover
}

.markalar .imageabsol {
    position: absolute;
    left: 0;
    top: 25%
}

.markalar .imageabsol h2 {
    color: #fff;
    width: 80%;
    letter-spacing: -.85px;
    line-height: 140%;
    font-weight: 100;
    text-align: center;
    margin: auto
}

.markalar .imageabsol h2 strong {
    font-weight: 700
}

.markalar .bgimage:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #08151d;
    opacity: .7
}

.iletisimformu {
    padding: 5%;
    background: #e9e9e9;
    background: rgba(37,86,241,.05)
}

.iletisimformu span {
    text-align: center;
    display: block;
    width: 100%;
    color: #454545;
    letter-spacing: .34em;
    padding-bottom: 2%
}

.iletisimformu h2 {
    text-align: center;
    display: block;
    width: 100%
}

.iletisimformu h2 strong {
    border-bottom: 5px solid #449ad5
}

.iletisimformu .row {
    padding-top: 5%
}

.iletisimformu .row .inputwidth {
    width: 40%;
    margin: auto
}

.iletisimformu .row p {
    font-weight: 700;
    font-size: 30px;
    line-height: 174%;
    color: #000;
    margin-bottom: 10px
}

.iletisimformu .row .inputwidth input {
    width: 100%;
    line-height: 250%;
    font-size: 140%;
    background: 0 0;
    border: 1px solid #2556f160;
    padding-left: 30px
}

.iletisimformu .row .inputmesaj {
    width: 90%;
    margin: auto;
    padding-top: 4%
}

.iletisimformu .row .inputmesaj input {
    width: 90%;
    margin: auto;
    width: 100%;
    line-height: 250%;
    font-size: 140%;
    background: 0 0;
    border: 1px solid #2556f160;
    padding-left: 30px
}

.iletisimformu .row .inputmesaj textarea {
    width: 100%;
    height: 20vh;
    background: 0 0;
    font-size: 150%;
    padding-left: 30px;
    padding-top: 10px;
    border: 1px solid #2556f160
}

.footer {
    background: #11334a;
    position: relative;
    height: auto;
    padding-top: 5%;
    overflow: hidden;
    padding-bottom: 5%
}

.footer::after {
    content: "";
    width: 40%;
    height: 80%;
    position: absolute;
    background: url(https://www.idemania.net/themes/idemania/assets/img/ide-desen.png);
    bottom: 10px;
    right: -8%;
    background-repeat: no-repeat;
    background-size: contain
}

.footer .footerbgfilm {
    position: absolute;
    bottom: 0;
    z-index: 0;
    right: 0
}

.footer .footerbgfilm img {
    width: 100%;
    display: none
}

.footer .row .widthsol {
    width: 50%;
    z-index: 5
}

.footer .row .widthsol h4 {
    color: #fff;
    width: 60%;
    padding-bottom: 5%
}

.footer .row .widthsol .logo {
    padding-bottom: 5%
}

.footer .row .widthsol .logo img {
    width: 30%
}

.sosyalmedya ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    padding: 0
}

.footer .row .widthsol ul li {
    margin-right: 5%
}

.footer .row .widthorta {
    width: 20%;
    z-index: 5
}

.footer .row .widthsag {
    width: 30%;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 5
}

.footer .footeralt {
    position: absolute;
    left: 5%;
    bottom: 5%
}

.footer .footeralt p {
    color: #fff;
    font-size: 100%
}

.footer .row .widthsag p {
    display: block;
    font-weight: 400;
    font-size: 20px;
    line-height: 200%;
    color: #fff;
    margin: 0;
    margin-bottom: 12%
}

.footer .widthsag h6 {
    color: #fff;
    position: relative;
    margin-bottom: 5%
}

.footer .row .widthorta h6 {
    color: #fff;
    position: relative;
    margin-bottom: 5%
}

.portfolyo .portrow .porfolyowidth:hover .imganimation img {
    transition: .4s
}

.portfolyo .portrow .porfolyowidth:hover .imganimation img {
    transition: 1s;
    width: 100%
}

.portfolyo .portrow .porfolyowidth:hover .imganimation img.portfolyoss {
    transform: scale(1.2)
}

.portfolyo .portrow .porfolyowidth .imganimation img.logos {
    width: 60%;
    height: 250px;
    object-fit: contain
}

.iletisim h5 {
    color: #4ca0d8;
    position: relative;
    margin-bottom: 1%
}

.iletisim p {
    color: #fff;
    width: 60%
}

.iletisim a {
    color: #fff;
    display: block
}

.iletisim h5::after {
    content: "";
    width: 0;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 60%;
    left: 250px
}

.footer .row .widthorta h6::after {
    content: "";
    width: 33px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 60%;
    left: 120px
}

.footer .row .widthsag h6::after {
    content: "";
    width: 33px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 180px;
    top: 60%
}

.iletisim .bannerleft h6 {
    color: #fff;
    position: relative;
    margin-bottom: 5%
}

.sosyalmedya ul li a img {
    width: 110%
}

.footer .row .widthorta a {
    display: block;
    font-weight: 400;
    font-size: 20px;
    line-height: 200%;
    color: #fff;
    position: relative;
    transition: 1s;
    width: max-content
}

.footer .row .widthorta a:after {
    content: "";
    width: 0%;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 1s
}

.footer .row .widthorta a:hover:after {
    width: 100%;
    transition: 1s
}

.openmenu-left a {
    width: 100%;
    display: block;
    font-weight: 400;
    font-size: 20px;
    line-height: 200%;
    color: #fff
}

.openmenu-left p {
    font-weight: 400;
    font-size: 20px;
    line-height: 200%;
    color: #fff;
    width: 60%;
    margin: auto;
    margin-top: 4%
}

.openmenu-left .sosyalmedya {
    margin-top: 5%
}

.openmenu-left .sosyalmedya ul {
    width: 100%;
    display: inline
}

.openmenu-left .sosyalmedya ul li {
    text-align: center;
    display: inline-block;
    margin-left: 5%;
    transition: .5s
}

.openmenu-left .sosyalmedya ul li:hover img {
    transform: scale(1.2);
    transition: .5s
}

.openmenu-left .sosyalmedya ul li a {
    display: inline-block
}

.openmenu-left .sosyalmedya ul li a img {
    width: 100%
}

.openmenu-logo a {
    display: block;
    width: 100%
}

.hakbanner {
    height: 100vh;
    background: #282828;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.hakbanner.iletisim {
    background: 0 0
}

.hakbanner .izlence {
    position: absolute;
    top: 130px;
    left: 6%;
    width: auto;
    z-index: 9999
}

.hakbanner .izlence ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.hakbanner .izlence ul li:last-child a {
    color: #fff
}

.hakbanner .izlence ul li a {
    color: #7d7d7d;
    font-size: 80%
}

.hakbanner .row .bannerleft {
    width: 50%
}

.hakbanner.iletisim .row .bannerleft {
    padding-left: 1%
}

.hakbanner .row .bannerleft span {
    color: #cecece;
    letter-spacing: .24em;
    display: block;
    margin-bottom: 1%;
    font-weight: 300
}

.hakbanner .row .bannerleft h2 {
    color: #4ca0d8;
    font-weight: 600
}

.hakbanner .row .bannerleft h2 strong {
    display: inline;
    font-weight: 400;
    color: #fff
}

.hakbanner .row .bannerleft .reklamajansi02 {
    display: block;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0
}

.hakbanner .row .bannerright {
    width: 50%
}

.hakbanner .row .bannerright p {
    font-weight: 300;
    color: #fff;
    line-height: 174%;
    text-align: justify;
    letter-spacing: 1px
}

.hakbanner .hakbgfilm {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%
}

.hakbanner .hakbgfilm img {
    width: 100%;
    z-index: 0;
    position: relative;
    height: 70vh;
    opacity: .4;
    display: none
}

.hakbanner .altimage {
    position: absolute;
    bottom: -25%;
    width: 80%;
    margin: auto;
    text-align: center
}

.hakbanner .altimage img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    clip-path: polygon(0 0,0 0,0 100%,0% 100%);
    transition: 1s
}

.calismasekil span {
    letter-spacing: .35em;
    color: #888
}

.calismasekil h2 strong {
    display: block
}

.calismasekil .sekilrow {
    padding-top: 5%;
    margin: 0
}

.calismasekil .sekilrow .cartwidth {
    width: 30%;
    margin: auto;
    position: relative;
    transition: 1s
}

.calismasekil .sekilrow .cartwidth:hover .ikonn img {
    transform: scale(1.1)
}

.calismasekil .sekilrow .cartwidth .ikonn img {
    transition: 1s
}

.calismasekil .sekilrow .cartwidth .ikonn {
    width: 30%;
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    transition: 1s
}

.calismasekil .sekilrow .cartwidth span {
    display: inline-block;
    width: 70%;
    -webkit-text-stroke: 1px #33333342;
    color: transparent;
    letter-spacing: 0;
    height: 20vh;
    position: absolute;
    left: 20%;
    top: 0;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 1000;
    font-size: 250px;
    line-height: 72px;
    font-feature-settings: 'case' on,'ss02' on,'ss04' on,'ss05' on,'ss06' on;
    opacity: .9
}

.calismasekil .sekilrow .cartwidth h4 {
    font-weight: 600;
    margin-top: 5%
}

.calismasekil .sekilrow .cartwidth p {
    letter-spacing: .105em;
    text-align: justify;
    width: 100%;
    font-weight: 300;
    color: #000
}

.part2slider .hak-owl .item {
    position: relative;
    overflow: hidden
}

.part2slider .hak-owl .item .slidercard {
    width: 100%
}

.part2slider .hak-owl .item .slidercard .imagebg {
    position: relative
}

.part2slider .hak-owl .item .slidercard .imagebg::after {
    content: "";
    width: 100%;
    height: 100%;
    background: #2a363e80;
    position: absolute;
    left: 0;
    top: 0
}

.part2slider .hak-owl .item .slidercard .imagebg img {
    width: 100%;
    height: 100vh;
    object-fit: cover
}

.part2slider .hak-owl .owl-item .item .slidercard .sliderdesc {
    position: absolute;
    left: 5%;
    transition: 1s;
    width: 100%;
    opacity: 0
}

.part2slider .hak-owl .owl-item.active .item .slidercard .sliderdesc {
    position: absolute;
    left: 5%;
    bottom: 30%;
    transition: 1s;
    opacity: 1
}

.part2slider .hak-owl .item .slidercard .sliderdesc span {
    line-height: 133%;
    letter-spacing: .35em;
    color: #fff;
    font-weight: 700
}

.part2slider .hak-owl .item .slidercard .sliderdesc h2 {
    color: #fff;
    width: 60%;
    position: relative;
    font-weight: 700;
    font-size: 60px;
    line-height: 73px;
    letter-spacing: -.01em;
    font-feature-settings: 'case' on,'ss02' on,'ss04' on,'ss05' on,'ss06' on;
    color: #fff
}

.part2slider .hak-owl .owl-item .item .slidercard .sliderdesc h2:before {
    position: absolute;
    left: -50px;
    font-size: 60%;
    color: #b7b7b7;
    transform: rotate(-90deg);
    font-weight: 100
}

.part2slider .hak-owl .item .slidercard .sliderdesc p {
    height: 20vh
}

.part2slider .hak-owl .item .slidercard .sliderdesc p {
    text-align: justify;
    color: #fff;
    width: 40%
}

.part2slider .hak-owl .item .rightnextitem {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #171717cf;
    padding-top: 14%;
    width: 20%;
    padding-left: 4%;
    padding-right: 2%
}

.part2slider .hak-owl .item .rightnextitem span {
    color: #696969;
    font-size: 180%;
    font-weight: 100
}

.part2slider .hak-owl .item .rightnextitem p {
    font-weight: 400;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: -.02em;
    text-transform: capitalize;
    color: #696969
}

.part2slider .hak-owl .item .rightnextitem img {
    width: 80%;
    height: 180px;
    object-fit: contain
}

.part2slider .hak-owl .item .rightnextitem button {
    outline: 0;
    background: 0 0;
    border: 0;
    text-align: center;
    width: 49%;
    display: inline;
    margin-top: 10%;
    justify-content: center
}

.part2slider .hak-owl .item .rightnextitem button.prev {
    transform: rotate(180deg)
}

.part2slider .hak-owl .item .rightnextitem button img {
    width: 50%;
    text-align: center;
    display: inline
}

.part2slider .hak-owl .owl-nav {
    display: block!important;
    opacity: 0;
    position: absolute
}

.portfolyohak {
    background: #e9e9e9;
    padding-bottom: 5%;
    padding-top: 5%
}

.portfolyohak .portdesc {
    padding-bottom: 5%
}

.portfolyohak .portdesc span {
    letter-spacing: .24em;
    color: #6f6f6f;
    display: block;
    margin-bottom: 1%
}

.portfolyohak .portdesc h2 {
    margin-bottom: 2%
}

.portfolyohak .portdesc h2 strong {
    display: block;
    color: #4ca0d8
}

.portfolyohak .portrow {
    margin: 0
}

.portfolyohak .portrow .porfolyowidth {
    width: 33%;
    margin: auto;
    position: relative;
    padding-bottom: 5%;
    margin-bottom: 5%
}

.portfolyohak .portrow .porfolyowidth .imganimation {
    text-align: center;
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 52vh;
    width: 83%
}

.portfolyohak .portrow .porfolyowidth .imganimation img {
    width: 100%;
    height: 100%
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop {
    position: absolute;
    width: 100%;
    top: 150%;
    z-index: 2
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop img {
    width: 60%;
    padding-top: 20%
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop .description {
    height: auto;
    padding-top: 25%;
    padding-bottom: 15%
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop span.altgel {
    font-weight: 500;
    font-size: 20px;
    line-height: 128%;
    letter-spacing: .125em;
    width: 90%;
    color: #ffff
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop .description p {
    color: #fff;
    font-size: 140%
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop .description h5 {
    color: #fff;
    letter-spacing: 6px
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn {
    display: flex;
    justify-content: center;
    align-items: center
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn a.btn {
    width: 40%;
    line-height: 400%
}

.portfolyohak .portrow .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn a img {
    width: 20px;
    padding: 0
}

.portfolyohak .portrow .porfolyowidth .imganimation .film4 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    margin: auto;
    text-align: center;
    transition: .8s;
    background: #10101099;
    opacity: 1;
    z-index: 1
}

.portfolyohak .portrow .porfolyowidth:hover .film4 {
    left: 0;
    transition: .8s;
    opacity: 1
}

.portfolyohak .portrow .porfolyowidth:hover .hovertop {
    top: 10%;
    transition-delay: .8s;
    transition: .8s
}

.portfolyohak .portrow .porfolyowidth::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 55%;
    width: 1px;
    background: #696969
}

.portfolyohak .portrow .porfolyowidth::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: 5%;
    height: 1px;
    width: 30%;
    background: #000
}

.portfolyohak .porfolyowidth .firma {
    position: absolute;
    bottom: 2%;
    left: 7%
}

.portfolyohak .porfolyowidth .firma h4 {
    letter-spacing: .02em;
    color: #000;
    font-weight: 300;
    margin: 0
}

.portfolyohak .porfolyowidth .firma h4 span {
    font-size: 50%;
    display: block;
    margin: 0;
    line-height: 90%;
    color: #000000b3
}

.portfolyohak .porfolyowidth .tarih {
    position: absolute;
    left: -83px;
    bottom: 19%;
    transform: rotate(270deg)
}

.portfolyohak .porfolyowidth .tarih span {
    color: #939393;
    font-weight: 500;
    font-size: 15px;
    display: inline-flex;
    width: 206px;
    height: 69px;
    justify-content: center
}

.portfolyohak .portdesc .leftport {
    width: 44%
}

.portfolyohak .portdesc .rightport {
    width: 55%;
    padding-left: 5%;
    margin-top: 2%
}

.portfolyohak .portdesc .rightport h3 {
    font-weight: 200;
    font-size: 35px;
    line-height: 56px;
    letter-spacing: -.02em;
    text-transform: capitalize;
    font-feature-settings: 'case' on,'ss02' on,'ss04' on,'ss05' on,'ss06' on;
    color: #000
}

.portfolyohak .portdesc .rightport h3 strong {
    font-weight: 800
}

.uretmekistermisin {
    background: #e2e2e2;
    padding-top: 3%;
    padding-bottom: 2%;
    transition: 1s;
    padding-top: 5%
}

.uretmekistermisin .text {
    text-align: center
}

.uretmekistermisin .text h3 {
    font-weight: 300
}

.uretmekistermisin .text h3 span {
    color: #7d7d7d
}

.uretmekistermisin:hover .text h3 span {
    color: #4ca0d8
}

.uretmekistermisin .text .nexartbtn.tumisler a {
    padding-left: 50px
}

.uretmekistermisin .text .nexartbtn.tumisler a img {
    transition: 1s;
    right: 40px
}

.nasilyap {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.nasilyap .izlence {
    position: absolute;
    top: 130px;
    left: 6%;
    width: 13%
}

.nasilyap .izlence ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 120%
}

.nasilyap .izlence ul li a {
    color: #7d7d7d;
    font-size: 80%
}

.nasilyap .row {
    margin: 0
}

.nasilyap .row .soldesc {
    width: 50%
}

.nasilyap .row .soldesc span {
    letter-spacing: .24em;
    color: #6f6f6f;
    display: block;
    margin-bottom: 1%;
    font-weight: 700
}

.nasilyap .row .soldesc h2 strong {
    display: block
}

.nasilyap .row .soldesc p {
    margin-top: 5%
}

.nasilyap .row .rightdesc {
    width: 50%;
    position: relative
}

.nasilyap .row .rightdesc .nexart {
    display: block;
    width: 100%;
    font-size: 200px;
    color: transparent;
    position: absolute;
    left: -8%;
    top: -30%;
    -webkit-text-stroke: 1px #d9d9d9
}

.nasilyap .row .rightdesc .kreatif {
    display: block;
    width: 100%;
    font-size: 200px;
    bottom: -10%;
    position: absolute;
    right: 0;
    text-align: right;
    color: #e9e9e9
}

.beyazmenu.main-header .row .main-header-logo .beyaz {
    display: block
}

.main-header .row .main-header-logo .siyah {
    display: block
}

.main-header .row .main-header-logo .beyaz {
    display: none
}

.beyazmenu.main-header.navbar-takip .row .main-header-logo .siyah {
    display: block;
    width: 100%
}

.beyazmenu.main-header.navbar-takip .row .main-header-logo .beyaz {
    display: none
}

.beyazmenu.main-header .row .main-header-menu .siyah {
    display: none
}

.beyazmenu.main-header .row .main-header-menu .beyaz {
    display: block
}

.main-header .row .main-header-menu .siyah {
    display: block
}

.main-header .row .main-header-menu .beyaz {
    display: none
}

.beyazmenu.main-header.navbar-takip .row .main-header-menu .siyah {
    display: block
}

.beyazmenu.main-header.navbar-takip .row .main-header-menu .beyaz {
    display: none
}

.imagepager h2 {
    padding-bottom: 5%
}

.imagepager img {
    width: 100%;
    max-height: 70vh;
    padding-bottom: 5%;
    object-fit: contain
}

.image2 {
    padding-bottom: 5%;
    padding-top: 5%
}

.image2 .row .imagepartleft {
    width: 50%
}

.image2 .row .imagepartleft h2 strong {
    display: block
}

.image2 .row .imagepartleft p {
    width: 80%;
    text-align: justify;
    padding-top: 5%
}

.image2 .row .imagepartleft ul {
    padding: 0;
    list-style: none;
    width: 100%;
    padding-top: 5%
}

.image2 .row .imagepartleft ul li {
    width: 35%;
    display: inline-block
}

.image2 .row .imagepartright {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.image2 .row .imagepartright img {
    width: 80%
}

.hakbanner.neleryapiyoruz {
    position: relative
}

.hakbanner.neleryapiyoruz .postale {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.hakbanner.neleryapiyoruz .postale img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hakbanner.neleryapiyoruz .row {
    margin: 0;
    width: 100%;
    margin: auto;
    margin-top: 8%;
    z-index: 9;
    position: relative
}

.hakbanner.neleryapiyoruz .row span {
    line-height: 133%;
    letter-spacing: .35em;
    color: #898989;
    display: block;
    width: 100%
}

.hakbanner.neleryapiyoruz .row h2 {
    color: #fff
}

.hakbanner.neleryapiyoruz .row h2 span {
    letter-spacing: initial
}

.hakbanner.neleryapiyoruz .row ul {
    padding: 0;
    list-style: none;
    width: 100%;
    z-index: 1
}

.hakbanner.neleryapiyoruz .row ul li {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    width: 30%;
    margin-left: 3%;
    line-height: 200%;
    margin-top: 5%;
    position: relative;
    transition: 1s
}

.hakbanner.neleryapiyoruz .row ul li a {
    letter-spacing: .065em;
    color: #fff;
    border-bottom: 1px solid #ffffff4f;
    line-height: inherit;
    position: relative;
    font-size: 22px;
    transition: .3s
}

.hakbanner.neleryapiyoruz .row ul li a img {
    width: 26px;
    position: absolute;
    right: -44px;
    bottom: 5px
}

.hakbanner.neleryapiyoruz .row ul li:before {
    position: absolute;
    left: -10%;
    top: 0;
    color: #4ca0d8;
    transform: rotate(-90deg);
    font-size: 25px;
    font-weight: 800
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(1):before {
    content: "01"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(2):before {
    content: "02"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(3):before {
    content: "03"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(4):before {
    content: "04"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(5):before {
    content: "05"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(6):before {
    content: "06"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(7):before {
    content: "07"
}

.hakbanner.neleryapiyoruz .row ul li:nth-child(8):before {
    content: "08"
}

.rightleft {
    padding-top: 5%;
    padding-bottom: 2%;
    position: relative;
    overflow: hidden
}

.rightleft .row {
    margin: 0;
    width: 100%
}

.rightleft .row h2 {
    width: 100%;
    margin: auto
}

.rightleft .row h2 span {
    color: #666
}

.rightleft .row .leftwitgh {
    width: 50%;
    margin-top: 5%
}

.rightleft .row .leftwitgh p {
    width: 90%;
    text-align: justify
}

.rightleft .absolimage {
    position: absolute;
    right: 0;
    bottom: 0
}

.rightleft .absolimage img {
    width: 100%
}

.hizmetlerr {
    padding-top: 5%;
    padding-bottom: 5%
}

.hizmetlerr.one {
    background: #d9d9d9b8
}

.hizmetlerr.two {
    background: #282828
}

.hizmetlerr .hizmetwidth {
    width: 50%
}

.hizmetlerr.syh1 .hizmetwidth {
    color: #fff;
    width: 50%
}

.hizmetlerr .hizmetwidth h4 {
    padding-left: 6%;
    display: flex;
    position: relative
}

.hizmetlerr .hizmetwidth h4::before {
    content: "01";
    position: absolute;
    left: 0;
    bottom: 0;
    color: #4ca0d8;
    font-size: 80%;
    transform: rotate(-90deg);
    opacity: 1;
    font-weight: 600
}

.hizmetlerr .hizmetwidth.secsaf h4::before {
    content: "04"
}

.hizmetlerr .hizmetwidth.secyedi h4::before {
    content: "07"
}

.hizmetlerr .hizmetwidth.secsaf h4::before {
    content: "04"
}

.hizmetlerr.krem .hizmetwidth.produksion h4::before {
    content: "08"
}

.hizmetlerr.two .hizmetwidth.secyedi h4::before {
    content: "07"
}

.hizmetlerr.syh1 .hizmetwidth h4::before {
    content: "02";
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 80%;
    transform: rotate(-90deg);
    opacity: .3;
    font-weight: 600
}

.musteriler .nexartbtn.tumisler a {
    color: #fff
}

.hizmetlerr.krem .hizmetwidth h4::before {
    content: "06";
    position: absolute;
    left: 10px;
    bottom: 0;
    color: #2c2c2c;
    font-size: 80%;
    transform: rotate(-90deg);
    opacity: .3;
    font-weight: 600
}

.hizmetlerr.beyz .hizmetwidth h4::before {
    content: "05";
    position: absolute;
    left: 0;
    bottom: 0;
    color: #2c2c2c;
    font-size: 80%;
    transform: rotate(-90deg);
    opacity: .3;
    font-weight: 600
}

.hizmetlerr .hizmetwidth h6 {
    padding-left: 6%;
    margin-top: 5%;
    width: 90%;
    color: #7d7d7d
}

.hizmetlerr .hizmetwidth h6 span {
    display: block;
    color: #000
}

.hizmetlerr.syh1 .hizmetwidth h6 span {
    display: block;
    color: #fff
}

.hizmetlerr .hizmetwidth ul {
    padding-left: 6%;
    list-style: none;
    margin-top: 5%
}

.hizmetlerr .hizmetwidth ul li {
    display: inline-block;
    width: 49%;
    padding-bottom: 3%
}

.hizmetlerr .hizmetwidth .nexartbtn.tumisler {
    justify-content: flex-start;
    padding-left: 5%
}

.hizmetlerr.krem .hizmetwidth .nexartbtn.tumisler {
    justify-content: flex-end
}

.hizmetlerr .hizmetwidth .nexartbtn.tumisler a {
    width: 24%
}

.hizmetlerr.two .hizmetwidth h4 {
    color: #fff
}

.hizmetlerr.two .hizmetwidth h4::before {
    content: "03";
    position: absolute;
    left: 10px;
    bottom: 0;
    color: #fff;
    font-size: 80%;
    transform: rotate(-90deg);
    opacity: .3;
    font-weight: 600
}

.hizmetlerr.two .hizmetwidth h6 {
    color: #fff
}

.hizmetlerr.two .hizmetwidth h6 span {
    color: #fff
}

.hizmetlerr.two .hizmetwidth ul li {
    color: #fff
}

.hizmetlerr.two .hizmetwidth .nexartbtn.tumisler a {
    width: 24%
}

.portfolyo.ic {
    padding-top: 5%;
    background: #fff
}

.neleryapiyoruzdetay .izlence {
    position: absolute;
    top: 130px;
    left: 6%;
    width: 80%
}

.neleryapiyoruzdetay .izlence ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 90%
}

.neleryapiyoruzdetay .izlence ul li {
    margin-right: 5px
}

.neleryapiyoruzdetay .izlence ul li:last-child a {
    color: #000;
    font-weight: 600;
    letter-spacing: .31em
}

.neleryapiyoruzdetay .izlence ul li a {
    font-size: 80%;
    color: #7d7d7d;
    letter-spacing: .31em
}

.neleryapiyoruzdetay {
    padding-top: 10%;
    overflow: hidden
}

.neleryapiyoruzdetay .ortawidth {
    padding-bottom: 5%;
    width: 90%;
    margin: auto
}

.neleryapiyoruzdetay .ortawidth .row {
    margin: 0;
    padding-top: 2%
}

.neleryapiyoruzdetay .ortawidth .row .partwidth {
    width: 50%;
    margin-top: auto;
    margin-bottom: auto
}

.neleryapiyoruzdetay .ortawidth .row .partwidth h1 {
    font-weight: 500;
    padding-top: 2%;
    padding-bottom: 3%
}

.neleryapiyoruzdetay .ortawidth .row .partwidth p {
    width: 80%;
    text-align: justify
}

.neleryapiyoruzdetay .ortawidth .row .partwidth img {
    width: 100%
}

.siyahbg {
    background: #11334a;
    display: flex;
    justify-content: center;
    align-items: center
}

.siyahbg .ortawidth {
    padding-top: 5%;
    padding-bottom: 5%;
    width: 90%;
    margin: auto
}

.siyahbg .ortawidth h3 {
    color: #fff
}

.siyahbg .ortawidth h3 span {
    color: #ffffff59;
    display: block
}

.siyahbg .ortawidth ul {
    color: #fff;
    list-style: none;
    padding: 0;
    margin-top: 5%
}

.siyahbg .ortawidth ul li {
    display: inline-flex;
    margin-right: 5%;
    margin-bottom: 2rem
}

.ikonlarpart {
    padding-top: 5%
}

.ikonlarpart .ortawidth {
    width: 90%;
    margin: auto
}

.ikonlarpart .ortawidth .row {
    margin: 0
}

.ikonlarpart .ortawidth .row .ikonwidth {
    width: 50%;
    margin-bottom: 5%
}

.ikonlarpart .ortawidth .row .ikonwidth .widthleft:nth-child(1) {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.ikonlarpart .ortawidth .row .ikonwidth .widthleft:nth-child(2) {
    text-align: end;
    width: 21%
}

.ikonlarpart .ortawidth .row .ikonwidth .widthleft h4 {
    color: #4ca0d8
}

.ikonlarpart .ortawidth .row .ikonwidth .widthleft img {
    width: 50%
}

.ikonlarpart .ortawidth .row .ikonwidth .widthleft img.filt {
    filter: brightness(2.1)
}

.ikonlarpart .ortawidth .row .ikonwidth p {
    width: 80%;
    margin-top: 5%;
    line-height: 180%
}

.resimvarsa {
    padding-top: 5%;
    padding-bottom: 5%
}

.resimvarsa h2 {
    text-align: center
}

.resimvarsa img {
    width: 100%;
    margin-top: 9%;
    padding-bottom: 2%
}

.izlenceiletisim {
    position: absolute;
    top: 130px;
    left: 6%;
    width: auto
}

.izlenceiletisim .izlence ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.izlenceiletisim .izlence ul li {
    margin-right: 5px
}

.izlenceiletisim .izlence ul li:last-child a {
    color: #000;
    opacity: 1
}

.izlenceiletisim .izlence ul li a {
    color: #000;
    font-size: 80%;
    opacity: .6
}

.models-ic-rows .porfolyowidth {
    width: 33%;
    margin: auto;
    position: relative;
    padding-bottom: 5%;
    margin-bottom: 5%
}

.models-ic-rows .porfolyowidth .imganimation {
    text-align: center;
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 65vh;
    width: 85%
}

.models-ic-rows .porfolyowidth .imganimation img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.models-ic-rows .porfolyowidth .imganimation .hovertop {
    position: absolute;
    width: 100%;
    top: 10%;
    opacity: 0
}

.models-ic-rows .porfolyowidth .imganimation .hovertop img {
    width: 210px;
    padding-top: 0;
    object-fit: contain;
    height: 130px
}

.models-ic-rows .porfolyowidth .imganimation .hovertop .description {
    padding-top: 13%;
    width: 90%;
    margin: auto
}

.models-ic-rows .porfolyowidth .imganimation .hovertop .description p {
    color: #fff;
    width: 90%;
    margin: auto;
    font-size: 15px;
    height: 13vh
}

.models-ic-rows .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn {
    display: flex;
    justify-content: center;
    align-items: center
}

.models-ic-rows .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn a.btn {
    background: #fff;
    color: #000;
    width: 40%;
    line-height: 250%;
    font-size: 20px
}

.models-ic-rows .porfolyowidth .imganimation .hovertop .description .nexartbtn.portfolyobtn a img {
    width: 16px;
    padding: 0;
    right: 30px;
    top: 29px;
    height: 16px
}

.models-ic-rows .porfolyowidth .imganimation .film4 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(89.83deg,#000 100%,rgba(38,38,38,0) 40.53%);
    mix-blend-mode: multiply;
    opacity: .4;
    width: 100%;
    margin: auto;
    text-align: center;
    transition: .8s
}

.models-ic-rows .porfolyowidth:hover .film4 {
    left: 0;
    transition: .8s;
    opacity: .7
}

.models-ic-rows .porfolyowidth:hover .hovertop {
    top: 0;
    transition-delay: .8s;
    transition: .8s;
    opacity: 1;
    padding-top: 25%
}

.models-ic-rows .porfolyowidth::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 89%;
    width: 1px;
    background: #000
}

.models-ic-rows .porfolyowidth::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: 5%;
    height: 1px;
    width: 40%;
    background: #000
}

.models-ic-rows .porfolyowidth .firma {
    position: absolute;
    bottom: 3%;
    left: 7%;
    width: 50%
}

.models-ic-rows .porfolyowidth .firma h4 {
    letter-spacing: .02em;
    color: #000;
    font-weight: 700;
    margin: 0;
    height: 47px
}

.models-ic-rows .porfolyowidth .firma h4 span {
    font-size: 50%;
    display: block;
    margin: 0;
    line-height: 90%;
    color: #000
}

.models-ic-rows .porfolyowidth .tarih {
    position: absolute;
    left: -3%;
    bottom: 14%;
    transform: rotate(270deg);
    display: none
}

.neleryaptikban .izlence {
    position: absolute;
    top: 130px;
    left: 6%;
    width: auto
}

.neleryaptikban .izlence ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.neleryaptikban .izlence ul li {
    margin-right: 5px
}

.neleryaptikban .izlence ul li:last-child a {
    color: #000;
    font-weight: 500
}

.neleryaptikban .izlence ul li a {
    color: #7d7d7d;
    font-size: 80%
}

.neleryaptikban .ust {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    line-height: 133%;
    letter-spacing: -.005em;
    color: #000
}

.neleryaptikban {
    padding-top: 15%;
    position: relative;
    background: #f7f7f7
}

.neleryaptikban .ust span {
    letter-spacing: .24em;
    color: #6f6f6f;
    display: block;
    margin-bottom: 1%
}

.neleryaptikban .ust h3 {
    width: 100%;
    padding-bottom: 5%;
    font-weight: 400;
    font-family:sans-serif;
}

.neleryaptikban .ust h3 strong {
    font-weight: 600;
    display: block
}

.neleryaptikban .ust h4 {
    width: 60%;
    padding-bottom: 5%
}

.neleryaptikban .models-list {
    padding-bottom: 0%;
    padding-left: 2%
}

.hizmetwidth img {
    width: 100%
}

.hizmetlerr .hizmetwidth .nexartbtn.tumisler a img {
    width: 10%
}

.neleryaptikban .models-list ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none
}

.neleryaptikban .models-list ul li {
    margin-right: 5%;
    color: #8f8f8f;
    font-weight: 500;
    border-bottom: 1px solid;
    cursor: pointer
}

.neleryaptikban .models-list ul li a {
    margin-right: 5%;
    color: #8f8f8f;
    font-weight: 500;
    width: 100%;
    display: block
}

.neleryaptikban .models-list ul li.active-model-tab {
    color: #000
}

.neleryaptikban .models-list ul li.active-model-tab a {
    color: #11334a;
    font-weight: 700
}

.porfolyobanner {
    position: relative
}

.porfolyobanner .izlence {
    position: absolute;
    top: 130px;
    left: 6%;
    width: auto;
    z-index: 1
}

.porfolyobanner .izlence ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.porfolyobanner .izlence ul li {
    margin-right: 5px
}

.porfolyobanner .izlence ul li:last-child a {
    color: #fff;
    font-weight: 500
}

.porfolyobanner .izlence ul li a {
    color: #d0d0d0;
    font-size: 80%
}

.porfolyobanner .image {
    width: 100%
}

.porfolyobanner .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0
}

.porfolyobanner .image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0
}

.porfolyobanner .bannerdesc {
    position: absolute;
    bottom: 26%;
    left: 5%
}

.porfolyobanner .bannerdesc h1 {
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 0 6px 4px rgba(0,0,0,.25);
    font-weight: 700
}

.porfolyobanner .bannerdesc h3 {
    letter-spacing: .02em;
    color: #fff
}

.porfolyobanner .bannerdesc p {
    letter-spacing: .08em;
    width: 70%;
    color: #fff
}

.porfolyobanner .film {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #101010;
    mix-blend-mode: multiply;
    z-index: -1;
    opacity: .15
}

.porfolyobanner .film2 {
    position: absolute;
    left: 5%;
    bottom: 5%
}

.textpart {
    padding-top: 5%
}

.textpart span {
    letter-spacing: .15em;
    color: #7d7d7d;
    padding-left: 0%;
    margin-bottom: 1%;
    display: block;
    font-weight: 700
}

.textpart h2 {
    padding-left: 5%;
    font-weight: 700;
    color: #000!important;
    padding-bottom: 1%;
    font-weight: 700;
    font-size: 60px;
    line-height: 66px;
    color: #fff;
    padding-left: 8%
}

.textpart h6 {
    padding-left: 8%;
    font-weight: 500
}

.textpart ul {
    padding-left: 8%;
    list-style: none;
    padding-bottom: 5%;
    font-weight: 200;
    font-size: 18px
}

.textpart ul li {
    font-weight: 200;
    font-size: 18px;
    color: #919191
}

.textpart p {
    padding-left: 8%;
    padding-bottom: 2%;
    color: #919191
}

.textpart img {
    width: 100%
}

.videopart {
    background: #e6e6e6;
    padding-top: 3%
}

.videopart.bg {
    background: #fff;
    padding-top: 3%
}

.videopart h6 {
    margin-left: 5%
}

.videopart video {
    width: 100%;
    height: 100vh
}

.challengeleft {
    padding-top: 8%;
    padding-bottom: 5%
}

.challengeleft .row {
    margin: 0
}

.challengeleft .row .left {
    width: 50%;
    padding-top: 5%
}

.challengeleft .row .left h3 {
    font-weight: 700;
    padding-top: 3%;
    padding-bottom: 3%
}

.challengeleft .row .left ul {
    width: 90%;
    list-style: none;
    padding: 0;
    padding-left: 4%
}

.challengeleft .row .left ul li {
    position: relative;
    margin-top: 5%
}

.challengeleft .row .left ul li strong {
    font-weight: 600
}

.challengeleft .row .left ul li::before {
    content: "";
    position: absolute;
    left: -5%;
    top: 10%;
    background-image: url(../neleryaptik/libefore.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 50px
}

.challengeleft .row .right {
    width: 50%
}

.challengeleft .row .right img {
    width: 100%;
    height: 80vh;
    object-fit: contain
}

.girisveslider {
    position: relative;
    padding-top: 5%
}

.girisveslider .text-owl .item img {
    width: 100%;
    height: 60vh;
    object-fit: contain
}
.girisveslider h3{
    padding-bottom:3%;
}

.girisveslider .owl-nav {
    display: block!important
}

.girisveslider .owl-nav .owl-next {
    position: absolute;
    right: 2%;
    top: 40%
}

.girisveslider .owl-nav .owl-prev {
    position: absolute;
    left: 2%;
    top: 40%
}

.solsagyapi {
    padding-bottom: 5%
}

.solsagyapi .row {
    margin: 0
}

.solsagyapi .row h3 {
    width: 100%;
    margin-bottom: 2%;
    margin-top: 5%
}

.solsagyapi .row .left {
    width: 50%
}

.solsagyapi .row .left h5 {
    margin-bottom: 3%
}

.solsagyapi .row .left ul {
    padding: 0;
    padding-left: 3%;
    width: 90%;
    text-align: justify
}

.solsagyapi .row .left ul li {
    margin-bottom: 3%
}

.solsagyapi .row .right {
    width: 50%
}

.solsagyapi .row .right h5 {
    margin-bottom: 3%
}

.solsagyapi .row .right ul {
    padding: 0;
    padding-left: 3%;
    width: 95%
}

.solsagyapi .row .right ul li {
    margin-bottom: 3%
}

.gribgimage {
    background: #cecece
}

.gribgimage img {
    width: 100%;
    object-fit: contain
}

.beyazimage {
    background: #fff;
    text-align: center;
    overflow: hidden
}

.beyazimage img {
    width: 100%;
    object-fit: contain
}

.youtubeplay {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.youtubeplay a h6 {
    color: #000
}

.sosyalmedya {
    padding-top: 0;
    margin-bottom: 4%
}

.sosyalmedya img {
    width: 100%
}

.youtubeplay a img {
    text-align: center
}

.challengeright {
    padding-top: 8%;
    padding-bottom: 5%
}

.challengeright .row {
    margin: 0
}

.challengeright .row .right {
    width: 50%;
    padding-top: 5%
}

.challengeright .row .right h3 {
    font-weight: 700;
    padding-top: 3%;
    padding-bottom: 3%
}

.challengeright .row .right ul {
    width: 90%;
    list-style: none;
    padding: 0;
    padding-left: 4%
}

.challengeright .row .right ul li {
    position: relative;
    margin-top: 5%
}

.challengeright .row .right ul li strong {
    font-weight: 600
}

.challengeright .row .right ul li::before {
    content: "";
    position: absolute;
    left: -5%;
    top: 10%;
    background-image: url(../neleryaptik/libefore.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 50px
}

.challengeright .row .left {
    width: 50%
}

.challengeright .row .left img {
    width: 90%
}

.results {
    padding-top: 10%
}

.results .row {
    margin: 0;
    height: 80vh
}

.results .leftresult {
    width: 50%;
    padding-left: 5%;
    padding-right: 6%;
    margin-top: auto;
    margin-bottom: auto
}

.results .leftresult img {
    margin-bottom: 3%
}

.results .leftresult h3 {
    font-weight: 400;
    margin-bottom: 4%
}

.results .leftresult p {
    font-weight: 700
}

.results .leftresult ul {
    padding: 0;
    padding-left: 4%;
    list-style: none
}

.results .leftresult ul li {
    color: #000;
    font-weight: 400;
    position: relative;
    margin-bottom: 3%
}

.results .leftresult ul li::before {
    content: "";
    position: absolute;
    left: -5%;
    top: 10%;
    background-image: url(../neleryaptik/libefore.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 50px
}

.results .rightresult {
    width: 50%;
    margin: 0
}

.results .rightresult .widthresult {
    width: 50%;
    height: 40vh
}

.results .rightresult .widthresult:nth-child(1) {
    background: #e9e9e9
}

.results .rightresult .widthresult:nth-child(2) {
    background: #b3b3b3
}

.results .rightresult .widthresult:nth-child(3) {
    background: #ccc
}

.results .rightresult .widthresult:nth-child(4) {
    background: #e7e7e7;
    ;}

.results .rightresult .widthresult img {
    padding-top: 10%;
    padding-left: 5%
}

.results .rightresult .widthresult h3 {
    padding-left: 5%;
    padding-top: 8%;
    font-weight: 700
}

.results .rightresult .widthresult h4 {
    padding-left: 5%;
    font-weight: 600;
    width: 65%
}

.girisveslider h6 {
    padding-left: 5%;
    padding-bottom: 5%
}

.textpart.siyah {
    background: #565656;
    padding-bottom: 5%
}

.textpart.siyah span {
    letter-spacing: .15em;
    color: #7d7d7d;
    padding-left: 8%;
    font-weight: 700
}

.textpart.siyah h2 {
    padding-left: 8%;
    font-weight: 600;
    color: #fff!important;
    padding-bottom: 1%
}

.textpart.siyah h6 {
    padding-left: 8%;
    color: #fff;
    font-size: 20px;
    letter-spacing: .15em
}

.textpart.siyah ul {
    padding-left: 8%;
    color: #fff;
    list-style: none;
    padding-bottom: 5%
}

.textpart.siyah ul li {
    color: #fff
}

.textpart.siyah p {
    padding-left: 8%;
    padding-bottom: 2%;
    font-weight: 200;
    font-size: 18px;
    line-height: 141%;
    letter-spacing: .07em;
    color: #fff
}

.challengeleft.containersiz {
    padding-top: 8%;
    padding-bottom: 8%
}

.challengeleft.containersiz .row {
    margin: 0
}

.challengeleft.containersiz .row .left {
    width: 50%;
    padding-top: 5%;
    padding-left: 5%
}

.challengeleft.containersiz .row .left h3 {
    font-weight: 700;
    padding-top: 3%;
    padding-bottom: 3%
}

.challengeleft.containersiz .row .left ul {
    width: 90%;
    list-style: none;
    padding: 0;
    padding-left: 4%
}

.challengeleft.containersiz .row .left ul li {
    position: relative;
    margin-top: 5%
}

.challengeleft.containersiz .row .left ul li strong {
    font-weight: 600
}

.challengeleft.containersiz .row .left ul li::before {
    content: "";
    position: absolute;
    left: -5%;
    top: 10%;
    background-image: url(../neleryaptik/libefore.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 50px
}

.challengeleft.containersiz .row .right {
    width: 50%;
    display: flex;
    justify-content: flex-end
}

.challengeleft.containersiz .row .right img {
    object-fit: contain;
    width: initial;
    height: initial;
    width: 80%
}

.challengeright.containersiz {
    padding-top: 8%;
    padding-bottom: 5%
}

.challengeright.containersiz .row {
    margin: 0
}

.challengeright.containersiz .row .right {
    width: 40%;
    padding-top: 5%;
    padding-right: 5%
}

.challengeright.containersiz .row .right h3 {
    font-weight: 700;
    padding-top: 3%;
    padding-bottom: 3%
}

.challengeright.containersiz .row .right ul {
    width: 90%;
    list-style: none;
    padding: 0;
    padding-left: 4%
}

.challengeright.containersiz .row .right ul li {
    position: relative;
    margin-top: 5%
}

.challengeright.containersiz .row .right ul li strong {
    font-weight: 600
}

.challengeright.containersiz .row .right ul li::before {
    content: "";
    position: absolute;
    left: -5%;
    top: 10%;
    background-image: url(../neleryaptik/libefore.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 50px
}

.challengeright.containersiz .row .left {
    width: 50%
}

.challengeright.containersiz .row .left img {
    width: 100%
}

.solsagyapi.laci {
    padding-bottom: 5%;
    background: #021d2a
}

.solsagyapi .row {
    margin: 0
}

.solsagyapi.laci .row h6 {
    width: 100%;
    margin-bottom: 5%;
    margin-top: 5%;
    color: #fff
}

.solsagyapi.laci .row h3 {
    width: 100%;
    margin-bottom: 2%;
    margin-top: 5%;
    color: #fff
}

.solsagyapi.laci .row .left {
    width: 50%
}

.solsagyapi.laci .row .left h5 {
    margin-bottom: 3%;
    color: #fff
}

.solsagyapi.laci .row .left ul {
    padding: 0;
    padding-left: 3%;
    width: 90%;
    color: #fff;
    text-align: justify
}

.solsagyapi.laci .row .left ul li {
    margin-bottom: 3%
}

.solsagyapi.laci .row .right {
    width: 50%
}

.solsagyapi.laci .row .right h5 {
    margin-bottom: 3%;
    color: #fff
}

.solsagyapi.laci .row .right ul {
    padding: 0;
    padding-left: 3%;
    width: 95%
}

.solsagyapi.laci .row .right ul li {
    margin-bottom: 3%;
    color: #fff
}

.reklamfilmi {
    padding-top: 5%;
    padding-bottom: 5%;
    position: relative
}

.reklamfilmi h6 {
    margin-bottom: 2%
}

.reklamfilmi img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    object-position: top
}

.reklamfilmi .playikon {
    position: absolute;
    top: 37%;
    width: 100%;
    margin: auto;
    text-align: center;
    left: 0
}

.reklamfilmi .playikon img {
    height: initial;
    width: 10%;
    object-fit: contain
}

.beyazimage.containerli img {
    width: 100%
}

.mainakordion .row .rightakord button .acik {
    display: block
}

.mainakordion .row .rightakord button .kapali {
    display: none
}

.mainakordion .row .rightakord button.collapsed .acik {
    display: none
}

.mainakordion .row .rightakord button.collapsed .kapali {
    display: block
}

.hizmetlerr.beyz {
    background: #fff
}

.hizmetlerr.krem {
    background: #d9d9d9b8
}

.hizmetlerr.syh1 {
    background: #11334a
}

.btn img {
    margin-left: 10%;
    position: absolute;
    right: 20px;
    top: 43%;
    width: 12px
}

.btn img.normal {
    display: block
}

.btn img.hover {
    display: none
}

.btn:hover img.normal {
    display: none
}

.btn:hover img.hover {
    display: inline-block
}

.btn {
    opacity: .8
}

.btn:hover {
    background: #fff;
    color: #4ca0d8;
    opacity: 1
}

.wrapper {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.video-main {
    position: relative;
    display: inline-block
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .btn img.normal {
    display: block
}

.portfolyo .portrow .porfolyowidth:hover .imganimation .hovertop .btn img.normal {
    display: none
}

.portfolyo .portrow .porfolyowidth:hover .imganimation .hovertop .btn img.hover {
    display: block
}

.video {
    position: relative;
    height: 100px;
    width: 100px;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    background: 0 0;
    color: #fff;
    display: inline-flex;
    background: #000;
    z-index: 999;
    align-items: center;
    justify-content: center;
    transition: 1s
}

@keyframes waves {
    0% {
        -webkit-transform: scale(.4,.4);
        transform: scale(.4,.4);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
    }

    50% {
        opacity: .9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"
    }

    to {
        -webkit-transform: scale(1.5,1.5);
        transform: scale(1.5,1.5);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
    }
}

.fa-play:before {
    content: "\f04b"
}

.waves {
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(0,0,0,.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    border-radius: 100%;
    right: -25px;
    bottom: -25px;
    z-index: -1;
    -webkit-animation: waves 3s ease-in-out infinite;
    animation: waves 4s ease-in-out infinite
}

.wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.main-header.navbar-takip .main-header-logo img {
    width: 84%;
    padding-top: 2%;
    padding-bottom: 5%
}

.transformvarsa {
    transform: translate(0,10px)
}

.mainakordion {
    position: relative
}

.mainakordion .absolbgimage {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 30%
}

.mainakordion .absolbgimage img {
    width: 100%;
    height: auto
}

.main-header-logo a {
    width: 30%
}

.text-marka {
    padding-top: 5%;
    background: #f7f7f7;
    padding-bottom: 5%
}

.text-marka h3 {
    line-height: 133%;
    text-align: justify;
    font-weight: 700;
    height: 10vh
}

.text-marka h3 span {
    font-weight: 400
}

.text-marka p {
    width: 69%
}

.marka-yazi {
    margin-top: 5%
}

.marka-yazi h4 {
    font-weight: 700;
    height: 6vh
}

.marka-yazi p {
    width: 71%
}

.sag-metin-marka {
    margin-top: 5%;
    margin-left: 2%
}

.sag-metin-marka h3 {
    font-weight: 500;
    line-height: 133%;
    height: 10vh
}

.sag-metin-marka p {
    width: 50%
}

.sosyalmedya p {
    font-weight: 500;
    font-size: 150%
}

.orta-metin-marka {
    margin-top: 5%;
    position: relative
}

.orta-metin-marka p {
    font-weight: 200;
    padding: 0 28% 0 28%
}

.porfolyovith007 .imganimatstiyonion .nexartbtn.portfolyobtn a img {
    width: 15px
}

.porfolyovith007 {
    position: relative;
    width: 32%;
    margin: auto;
    margin-bottom: 3%
}

.imganimatstiyonion {
    position: relative
}

.imganimatstiyonion img {
    width: 100%
}

.hoverkesfetbtn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .3s ease
}

.porfolyovith007:hover .hoverkesfetbtn {
    opacity: .5
}

.deskripsion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff
}

.nexartbtn {
    display: inline-block
}

.portfolyobtn a.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    transition: background-color .3s ease;
    padding-left: 0
}

.portfolyobtn a.btn:hover {
    background-color: #000;
    color: #fff
}

.normal {
    display: none
}

.portfolyobtn a.btn:hover .normal {
    display: inline-block;
    width: 10%
}

.hover {
    display: inline-block
}

.portfolyobtn a.btn:hover .hover {
    display: none
}

.firmaa {
    text-align: center;
    margin-top: 5%
}

.transformvarsakoy {
    font-weight: 300;
    font-size: 15px;
    line-height: 133%;
    letter-spacing: -.005em;
    color: #000;
    height: 60px
}

.transformvarsakoy span {
    display: block;
    font-weight: 600;
    text-align: left;
    font-size: 20px
}

.imganimatstiyonion:hover img {
    transform: scale(1.1);
    transition: transform .7s ease
}

.imganimatstiyonion {
    position: relative;
    overflow: hidden
}

.imganimatstiyonion img {
    width: 100%;
    transition: transform .7s ease
}

.foto-veideoiklisi img {
    width: 100%
}

.foto-veideoiklisi video {
    width: 100%
}

.nexartbtn.stratejibtn {
    width: 100%
}

.nexartbtn.stratejibtn a {
    width: 20%;
    color: #000;
    margin-left: 6%
}

.nexartbtn.stratejibtn a:hover {
    border-color: #4ca0d8;
    color: #fff;
    background: #4ca0d8
}

.nexartbtn.uiux {
    width: 100%
}

.nexartbtn.uiux a {
    width: 20%;
    border-color: #303030;
    color: #fff;
    float: right;
    margin-right: 10%
}

.nexartbtn.uiux a:hover {
    border-color: #4ca0d8;
    color: #4ca0d8;
    background: #fff
}

.nexartbtn.dijital {
    width: 100%
}

.nexartbtn.dijital a {
    width: 20%;
    border-color: #000;
    color: #000;
    float: right;
    margin-right: 10%
}

.nexartbtn.dijital a.btn:hover {
    border-color: #4ca0d8;
    color: #fff;
    background: #4ca0d8
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description p .gricolor {
    color: #c3c3c3;
    margin-left: 1%;
    margin-right: 1%
}

.nexartbtn.markalasma {
    width: 100%
}

.nexartbtn.markalasma a {
    width: 20%;
    color: #fff;
    margin-left: 6%
}

.nexartbtn.markalasma a.btn:hover {
    border-color: #fff;
    color: #000;
    background: #fff
}

.portfolyo .portrow .porfolyowidth .imganimation .hovertop .description {
    padding-top: 25%
}

@media all {
    :focus {
        outline: 0
    }

    svg:not(:root) {
        overflow: hidden
    }

    * {
        box-sizing: border-box
    }

    .cursor {
        position: fixed;
        pointer-events: none;
        background-color: #ffffffb3;
        top: -10px;
        left: -20px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: 100000;
        margin-top: -5px;
        margin-left: 6px
    }

    .cursor,.cursor__icon,.cursor__tag-text {
        display: none
    }

    .cursor--show {
        display: block;
        z-index: 999999999999999999
    }

    .cursor--atag-style {
        width: 120px!important;
        height: 120px!important;
        background-color: #000;
        top: -40px;
        left: -40px
    }

    .cursor--atag-style .cursor__pointer {
        width: 80px;
        height: 80px;
        background-color: #4ca0d8;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }

    .cursor--atag-style .cursor__tag-text {
        font-size: 16px;
        color: #4ca0d8;
        font-weight: 500
    }

    .cursor--atag-style .cursor__tag-text--tag {
        display: block
    }

    .cursor--link-style .cursor__pointer {
        background: #11334a;
        width: 10px;
        height: 10px
    }

    .cursor--link-style {
        width: 30px;
        height: 30px;
        background: #ffffffb3
    }

    .cursor__pointer {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 10px;
        height: 10px;
        background-color: #4ca0d8;
        border-radius: 50%;
        transition: background-color .1s ease-in-out
    }

    .modal.fade.show {
        z-index: 99999999
    }

    .musteriikon img {
        transition: .7s
    }

    .musteriikon:hover img {
        transform: scale(1.2);
        transition: 1s
    }

    .footer .row .widthsol ul li img {
        transition: 1s;
        width: 32px
    }

    .footer .row .widthsol ul li:hover img {
        transition: 1s;
        transform: scale(1.4)
    }

    .porfolyovith007 .portfolyobtn a.btn {
        background: #fff;
        padding: 10px 40px;
        color: #4ca0d8
    }

    .hakbanner.neleryapiyoruz .row ul li:hover a {
        font-weight: 700
    }

    .porfolyovith007 a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .play-button {
        color: #fff;
        position: absolute;
        pointer-events: none;
        border-radius: 50%;
        z-index: 1;
        display: none;
        cursor: none!important;
        width: 150px;
        height: 150px;
        background-color: #11334a;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size: 24px;
        letter-spacing: -.47px;
        transition: all .2s ease-in-out
    }

    .play-button img {
        width: 20px;
        height: 20px
    }

    .video-link--full-width:hover .play-button {
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    @media (max-width: 1020px) {
        .play-button {
            width:150px;
            height: 150px;
            font-size: 25px
        }
    }

    @media (max-width: 500px) {
        .play-button {
            width:100px;
            height: 100px;
            font-size: 17px
        }
    }

    .yazi-uzun-nexart {
        width: 100%
    }

    .yazi-uzun-nexart .nexart-yazi-new h4 {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        line-height: 133%;
        color: #000;
        padding-top: 5%
    }

    .yazi-uzun-nexart .nexart-yazi-new p {
        font-weight: 300;
        font-size: 22px;
        line-height: 130.5%;
        text-align: justify;
        color: #000;
        padding-bottom: 5%
    }

    .yazi-uzun-nexart img {
        width: 100%
    }

    .yazi-uzun-nexart-gri {
        width: 100%
    }

    .yazi-uzun-nexart-gri .nexart-yazi-new h4 {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        line-height: 133%;
        color: #000;
        padding-top: 5%
    }

    .yazi-uzun-nexart-gri .nexart-yazi-new p {
        font-weight: 300;
        font-size: 22px;
        line-height: 130.5%;
        text-align: justify;
        color: #000;
        padding-bottom: 5%
    }

    .yazi-uzun-nexart-gri img {
        background: #ececec;
        width: 100%
    }

    .porfolyobanner .musterilogopart {
        position: absolute;
        right: 50px;
        bottom: 50px
    }

    .porfolyobanner .musterilogopart img {
        width: 170px;
        object-fit: contain
    }

    .neleryaptik-neler {
        color: #c21e1e
    }

    .neleryaptik-neler {
        background: #f7f7f7
    }

    .video-new-gif .foto-veideoiklisi {
        margin-top: 5%
    }

    .video-new-gif .foto-veideoiklisi img {
        width: 100%
    }

    .foto-veideoiklisii {
        width: 100%
    }

    .foto-veideoiklisii img {
        object-fit: contain;
        height: 100vh;
        margin-left: 20%
    }

    .porfolyowidth .hoverr-image {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .5s ease
    }

    .porfolyowidth:hover .hoverr-image {
        opacity: 1
    }

    .porfolyobanner .bannerdesc a {
        color: #fff
    }

    .iletisimbtnfixedwhatsap {
        position: fixed;
        right: 40px;
        bottom: 20%;
        z-index: 9
    }

    .iletisimbtnfixedwhatsap img {
        width: 80px;
        transition: .5s;
        height: 80px;
        display: block
    }

    .iletisimbtnfixed {
        position: fixed;
        right: 40px;
        bottom: 20%;
        z-index: 9
    }

    .iletisimbtnfixed svg {
        width: 80px;
        transition: .5s;
        height: 80px;
        display: block
    }

    .iletisimbtnfixed:hover svg {
        width: 100px;
        height: 100px
    }

    .iletisimlastfix {
        cursor: pointer;
        position: fixed;
        right: 0;
        top: 30%;
        z-index: 9999;
        width: 70px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #4ca0d8;
        box-shadow: -5px 4px 4px 0 rgba(0,0,0,.25)
    }

    .iletisimlastfix2 {
        cursor: pointer;
        position: fixed;
        top: 46%;
        z-index: 9999;
        width: 85px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #4ca0d8;
        box-shadow: -5px 4px 4px 0 rgba(0,0,0,.25);
        right: 25px;
        border-radius: 50px 50px 0 50px
    }

    .iletisimlastfix::after {
        background: #fff;
        content: "Iletisim Formu";
        position: absolute;
        transform: rotate(-90deg);
        top: 110%;
        height: 70px;
        width: 100px;
        color: #011026;
        text-align: center;
        font-weight: 700;
        letter-spacing: .6px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 1s
    }

    .hakbanner.iletisim .hakbgfilm {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        display: block
    }

    .hakbanner.iletisim .hakbgfilm img {
        width: 100%;
        z-index: 0;
        position: relative;
        height: 100%;
        display: block;
        opacity: 1;
        z-index: -1
    }

    .hakbanner.iletisim .row .bannerright .btnnexart a {
        height: 70px;
        width: 60%;
        margin-bottom: 2rem;
        display: block;
        border: 1px solid #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 5%;
        position: relative;
        color: #fff
    }

    .hakbanner.iletisim .row .bannerright .btnnexart a img {
        position: absolute;
        right: 40px;
        transition: 1s
    }

    .hakbanner.iletisim .row .bannerright .btnnexart a:hover img {
        transform: translate(10px,-10px)
    }

    label {
        color: #000;
        font-weight: 500;
        background: #fff;
        margin-bottom: 5px;
        padding: 4px;
        border-radius: 4px
    }

    input {
        margin-bottom: 10px
    }

    .sub-bg {
        background: url(https://the-french.co.uk/wp-content/uploads/2018/02/111-400x600.jpg)no-repeat;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover
    }

    .subs-header {
        padding-top: 0;
        border-bottom: 0
    }

    .heading-text h4 {
        color: #fff;
        padding: 20px;
        border: 2px solid #d3d3d3;
        display: inline-block;
        border-radius: 20px;
        box-shadow: inset 10px 12px 13px -7px rgba(0,0,0,.7);
        -moz-box-shadow: inset 10px 12px 13px -7px rgba(0,0,0,.7);
        -webkit-box-shadow: inset 10px 12px 13px -7px rgba(0,0,0,.7);
        -o-box-shadow: inset 10px 12px 13px -7px rgba(0,0,0,.7)
    }

    .heading-text {
        margin-top: 10px
    }

    .close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover {
        outline: 0
    }

    .sub-bg h4 {
        width: 100%;
        color: #4ca0d8;
        font-weight: 600;
        margin-top: 2rem
    }

    #subs-form .form-group input {
        margin-bottom: 2rem;
        border: 1px solid #4ca0d8;
        width: 100%;
        height: 50px;
        border-radius: 0
    }

    #subs-form .form-group textarea {
        height: 150px;
        border: 1px solid #4ca0d8;
        width: 100%
    }

    .modal-content {
        border: 1px solid transparent!important
    }

    .calismasekil2 .slideowl .owl-item .item .row {
        margin: 0
    }

    .calismasekil2 .slideowl .owl-item .item .w50 {
        width: 50%
    }

    .calismasekil2 .slideowl .owl-item .item .w50:first-child {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column
    }

    .calismasekil2 .slideowl .owl-item .item .w50:last-child {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column
    }

    .calismasekil2 .slideowl .owl-item .item .w50 span {
        opacity: 0;
        transition: 1s;
        transition-delay: .4s
    }

    .calismasekil2 .slideowl .owl-item.active .item .w50 span {
        opacity: 1
    }

    .calismasekil2 .slideowl .owl-item .item .w50 h2 {
        margin-bottom: 3rem;
        opacity: 0;
        transition: 1s;
        transition-delay: .6s
    }

    .calismasekil2 .slideowl .owl-item.active .item .w50 h2 {
        opacity: 1
    }

    .calismasekil2 .slideowl .owl-item .item .w50 h2 strong {
        color: #11334a;
        display: block
    }

    .calismasekil2 .slideowl .owl-item .item .w50 img {
        width: 70%;
        opacity: 0;
        transition: 1s
    }

    .calismasekil2 .slideowl .owl-item.active .item .w50 img {
        opacity: 1
    }

    .calismasekil2 .slideowl .owl-item .item .w50 p {
        opacity: 0;
        transition: 1s;
        transition-delay: 1s
    }

    .calismasekil2 .slideowl .owl-item.active .item .w50 p {
        opacity: 1
    }

    .calismasekil2 .slideowl .owl-item .item .w50 h6 {
        font-weight: 700;
        opacity: 0;
        transition: 1s;
        transition-delay: .6s
    }

    .calismasekil2 .slideowl .owl-item.active .item .w50 h6 {
        opacity: 1
    }

    .calismasekil2 .slideowl .owl-nav {
        display: block;
        position: absolute;
        left: 45%;
        bottom: 0
    }

    .calismasekil2 .slideowl .owl-nav button {
        position: relative;
        width: 50px;
        height: 50px;
        background: #4ca0d8!important;
        z-index: 9;
        border-radius: 50%;
        transition: 1s
    }

    .calismasekil2 .slideowl .owl-nav button:hover {
        background: #11334a!important
    }

    .calismasekil2 .slideowl .owl-nav button .slider-ok {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .calismasekil2 .slideowl .owl-nav button .slider-ok img {
        position: absolute;
        width: 60%;
        height: 100%
    }

    .calismasekil2 {
        padding-top: 5%;
        padding-bottom: 5%
    }

    .calismasekil2 .slideowl .owl-nav button.owl-prev {
        transform: rotate(180deg)
    }

    .nav-idemania {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 555555;
        background: #28282890;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 1s
    }

    .nav-idemania.nav-takip {
        height: 60px
    }

    .nav-idemania .container .row .logo {
        width: 20%
    }

    .nav-idemania .container .row .logo img {
        width: 50%
    }

    .nav-idemania .container .row .links {
        width: 80%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end
    }

    .nav-idemania .container .row .links ul {
        display: flex;
        list-style: none;
        justify-content: flex-end;
        align-items: center;
        margin: 0
    }

    .nav-idemania .container .row .links ul li {
        margin-right: 5px;
        line-height: 100%
    }

    .nav-idemania .container .row .links ul li a {
        color: #fff;
        line-height: 100%;
        cursor: pointer!important;
        !importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;font-weight: 400;
        font-size: 80%;
        text-transform: uppercase;
        height: 50px;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 10px;
        transform: translate(0,10px)
    }

    .nav-idemania .container .row .links ul li a img {
        transform: translate(0,-5px);
        width: 32px
    }

    .porfolyowidth .flcardurl {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9
    }

    #nasilYapiyoruzKutular li {
        color: #000;
        line-height: 20px;
        font-weight: 400;
        margin: auto;
        list-style: none;
        text-align: center;
        margin: 0!important;
        width: 100%!important
    }

    #nasilYapiyoruzKutular {
        padding-top: 5%;
        padding-bottom: 5%
    }

    .overflow-hidden.iceri {
        padding-top: 5%
    }

    #nasilYapiyoruzKutular h2 {
        padding-bottom: 2rem
    }

    #nasilYapiyoruzKutular.iceri {
        padding-top: 0;
        padding-bottom: 5%
    }

    .acikllamaliste,.acikllamaliste2 {
        margin: auto
    }

    .kesfetListe {
        margin-left: -140px
    }

    .tasarlaListe {
        margin-left: -10px
    }

    .kesfetListe::before {
        left: 32%!important
    }

    .tasarlaListe::before {
        left: 58%!important
    }

    .iletmekListe {
        margin-left: -80px
    }

    .iletmekListe::before {
        left: 40%!important
    }

    .analizListe::before {
        left: 68%!important
    }

    .analizListe {
        padding-left: 80px
    }

    .uretmekListe {
        margin-left: -40px
    }

    @media (max-width: 900px) {
        #nasilYapiyoruzKutular {
            display:none
        }
    }

    @media (max-width: 1030px) and (min-width:1020px) {
        .uretmekListe::before {
            left:78px!important
        }

        .tasarlaListe::before {
            top: 44px!important
        }

        .tasarlaListe {
            margin-left: -30px!important
        }
    }

    .tasarlaListe::before {
        display: block;
        height: 81px;
        width: 1px;
        background: #0000003b;
        content: " ";
        position: absolute;
        top: 111px;
        left: 50%;
        transition: all .5s
    }

    .iletmekListe::before {
        display: block;
        height: 81px;
        width: 1px;
        background: #0000003b;
        content: " ";
        position: absolute;
        top: 111px;
        left: 50%;
        transition: all .5s
    }

    .kesfetListe::before {
        display: block;
        height: 81px;
        width: 1px;
        background: #0000003b;
        content: " ";
        position: absolute;
        top: -149px;
        z-index: -1;
        transition: all .5s
    }

    .uretmekListe::before {
        display: block;
        height: 81px;
        width: 1px;
        background: #0000003b;
        content: " ";
        position: absolute;
        top: -152px;
        z-index: -1;
        transition: all .5s;
        left: 123px
    }

    .analizListe::before {
        display: block;
        height: 81px;
        width: 1px;
        background: #0000003b;
        content: " ";
        position: absolute;
        top: -139px;
        z-index: -1;
        transition: all .5s
    }

    .ikonhovericin img:hover {
        opacity: .7;
        transition: .7s
    }

    .ikonhovericin2 img:hover {
        opacity: .7;
        transition: .7s
    }
}

.mobile-menu-links ul li .panel-mm-acc ul li a {
    font-size: 17px
}

.opens .mobile-menu-links ul li {
    transform: translate(0,0)
}

.opens .mobile-menu-links ul li {
    opacity: 1
}

.opens .mobile-menu-kapat-logo .mm-kapat::before {
    -webkit-transform: translateY(-50%) rotate(225deg);
    -ms-transform: translateY(-50%) rotate(225deg);
    transform: translateY(-50%) rotate(225deg);
    -webkit-transition: .9s cubic-bezier(.767,.01,.18,1.01);
    -o-transition: .9s cubic-bezier(.767,.01,.18,1.01);
    transition: .9s cubic-bezier(.767,.01,.18,1.01);
    -webkit-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.opens .mobile-menu-kapat-logo .mm-kapat::after {
    -webkit-transform: translateY(-50%) rotate(135deg);
    -ms-transform: translateY(-50%) rotate(135deg);
    transform: translateY(-50%) rotate(135deg);
    -webkit-transition: .9s cubic-bezier(.767,.01,.18,1.01);
    -o-transition: .9s cubic-bezier(.767,.01,.18,1.01);
    transition: .9s cubic-bezier(.767,.01,.18,1.01);
    -webkit-transition-delay: .9s;
    -o-transition-delay: .9s;
    transition-delay: .9s
}

@media (max-width: 1200px) {
    .mm-acc {
        background-color:transparent;
        cursor: pointer;
        padding: 8px 0 8px 0;
        width: 100%;
        border: 0;
        text-align: left;
        outline: 0;
        transition: .4s;
        color: #fff;
        font-weight: 400;
        font-size: 25px
    }

    .mm-acc:hover {
        background-color: transparent
    }

    .mm-acc:after {
        content: "\002B";
        color: #fff;
        font-weight: 300;
        float: right;
        margin-left: 5px
    }

    .panel-mm-acc {
        padding: 0 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease-out
    }

    .panel-mm-acc ul li a {
        font-size: 20px
    }

    .panel-mm-acc ul li:last-child {
        border-bottom: 0
    }
}

@media (max-width: 500px) {
    .mm-acc {
        font-size:20px
    }

    .panel-mm-acc ul li a {
        font-size: 20px
    }
}

.mobile-menu-links ul li .panel-mm-acc ul li a {
    font-size: 17px
}

.header-mobile .header-mobile-logo img {
    transition: .5s
}

@media (min-width: 1200px) {
    .header-mobile {
        display:none
    }
}

@media (max-width: 1200px) {
    .nav-idemania {
        display:none
    }

    .header-mobile .header-mobile-logo {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0
    }

    .header-mobile .header-mobile-logo a {
        margin: 0
    }

    .header-mobile .header-mobile-logo img {
        width: 100%
    }

    .header-mobile .header-mobile-hamburger {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 30%;
        flex-direction: column
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 99999999999;
        top: 0;
        left: 0;
        background-color: #11334a;
        overflow-x: hidden;
        transition: .5s;
        padding-top: 60px;
        transition-delay: .5s
    }

    .mobile-menu-kapat-logo {
        border-bottom: 2px solid #fff;
        position: relative;
        padding-bottom: 20px;
        padding-left: 2%;
        padding-right: 2%
    }

    .mobile-menu-kapat-logo .mm-logo {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .mobile-menu-kapat-logo .mm-kapat {
        width: 50%;
        position: relative
    }

    .mobile-menu-links {
        margin-top: 5%
    }

    .mobile-menu-links ul {
        padding-left: 0;
        margin-bottom: 0
    }

    .mobile-menu-links ul li {
        list-style: none;
        border-bottom: 1px solid #fff;
        margin-bottom: 20px;
        overflow: hidden;
        opacity: 0;
        transition: 1s
    }

    .mobile-menu-links ul li a {
        font-size: 25px;
        color: #fff;
        transition: 1s
    }
}

@media (max-width: 500px) {
    .mobile-menu-kapat-logo {
        padding-bottom:10px;
        padding-left: 0;
        padding-right: 0
    }

    .mobile-menu-kapat-logo .mm-logo img {
        width: 90%
    }

    .mobile-menu-links ul li a {
        font-size: 30px
    }

    .header-mobile .header-mobile-logo img {
        width: 60%;
        margin-bottom: 20px;
        margin-top: 0;
        transition: .5s
    }
}

@media (max-width: 1200px) {
    .header-mobile {
        position:fixed;
        top: 0;
        left: 0;
        z-index: 99999999;
        transition: .5s;
        width: 100%;
        background: #11334a;
        padding-top: 1%;
        padding-bottom: 1%
    }
}

@media (max-width: 900px) {
    .mobile-menu-links ul li a {
        font-size:25px
    }
}

@media (max-width: 600px) {
    .mobile-menu-links ul li a {
        font-size:20px
    }
}

.header-mobile-hamburger span {
    width: 50px;
    height: 5px;
    background: #fff;
    display: inline-block;
    margin-bottom: 6px;
    border-radius: 10px
}

.mobile-menu-links ul li:nth-child(1) {
    transition-delay: 1s
}

.mobile-menu-links ul li:nth-child(2) {
    transition-delay: 1.1s
}

.mobile-menu-links ul li:nth-child(3) {
    transition-delay: 1.2s
}

.mobile-menu-links ul li:nth-child(4) {
    transition-delay: 1.3s
}

.mobile-menu-links ul li:nth-child(5) {
    transition-delay: 1.4s
}

.mobile-menu-links ul li:nth-child(6) {
    transition-delay: 1.5s
}

.mobile-menu-links ul li:nth-child(7) {
    transition-delay: 1.6s
}

.mobile-menu-links ul li a {
    display: block;
    margin-bottom: .5rem
}

.mobile-menu-kapat-logo .mm-kapat::before,.mobile-menu-kapat-logo .mm-kapat::after {
    content: '';
    width: 41px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 18px;
    right: 0;
    -webkit-transform: translateY(-50%) rotate(0deg);
    -ms-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
    -webkit-transition: .9s cubic-bezier(.767,.01,.18,1.01);
    -o-transition: .9s cubic-bezier(.767,.01,.18,1.01);
    transition: .9s cubic-bezier(.767,.01,.18,1.01)
}

@media (max-width: 900px) {
    .mobile-menu-links ul li a {
        font-size:25px
    }
}

@media (max-width: 600px) {
    .mobile-menu-links ul li a {
        font-size:20px
    }
}

.accordion-mm:after {
    content: '\002B';
    color: #fff;
    font-weight: 100;
    float: right;
    margin-left: 5px
}

.accordion-mm.active-mm:after {
    content: '-';
    color: #fff;
    font-weight: 100;
    float: right;
    margin-left: 5px
}

@media (max-width: 1200px) {
    .mm-acc {
        background-color:transparent;
        cursor: pointer;
        padding: 8px 0 8px 0;
        width: 100%;
        border: 0;
        text-align: left;
        outline: 0;
        transition: .4s;
        color: #fff;
        font-weight: 400;
        font-size: 25px
    }

    .mm-acc:hover {
        background-color: transparent
    }

    .mm-acc:after {
        content: "\002B";
        color: #fff;
        font-weight: 300;
        float: right;
        margin-left: 5px
    }

    .panel-mm-acc {
        padding: 0 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease-out
    }

    .panel-mm-acc ul li a {
        font-size: 20px
    }

    .panel-mm-acc ul li:last-child {
        border-bottom: 0
    }
}

@media (max-width: 500px) {
    .mm-acc {
        font-size:20px
    }

    .panel-mm-acc ul li a {
        font-size: 20px
    }
}

.nav-idemania.nav-takip {
    height: 70px;
    padding-bottom: 10px
}

#bizKimizSayi {
    padding-top: 20%;
    padding-bottom: 0;
    background: #c9c9c917 0 0 no-repeat padding-box;
    position: relative
}

.kayanYazilar {
    margin-top: 40px;
    padding: 0;
    position: absolute;
    top: 80%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 110px;
    letter-spacing: -8.27px;
    color: #313131;
    left: 800px;
    font-weight: 300
}

.maviKucukUstYazi:after {
    letter-spacing: 0;
    color: #3692d2;
    font-style: italic;
    font-size: 20px;
    position: absolute;
    top: 15%;
    content: "Ekip"
}

.ustmaviyazilarimiz {
    letter-spacing: 0;
    color: #3692d2;
    font-style: italic;
    font-size: 20px;
    position: absolute;
    top: 15%
}

.maviKucukUstYazi2:after {
    content: "Proje";
    letter-spacing: 0;
    color: #3692d2;
    font-style: italic;
    font-size: 20px;
    position: absolute;
    top: 15%
}

#hizmetlerimizSyt {
    padding-top: 5%;
    padding-bottom: 5%
}

#hizmetlerimizSyt p {
    margin-bottom: 3%
}

#hizmetlerimizSyt .row p {
    width: 100%
}

#hizmetlerimizSyt .row p.bilgiAciklamaBuyuk {
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0
}

.padTopSifir {
    padding-top: 0!important
}

@media (max-width: 500px) {
    .masaustuanasayfaslidergorun {
        display:none
    }
}

.bilgiAciklamaKucuk {
    letter-spacing: 0;
    color: #929292;
    padding-top: 15px;
    font-weight: 300
}

.circle,.circle ul {
    text-align: center
}

.circle {
    -webkit-box-pack: center
}

.circle span:after,.circle:before {
    content: '';
    left: 0
}

.circles {
    min-height: 300px
}

.circles .container {
    position: relative;
    padding-left: 10%;
    padding-right: 10%
}

.circle {
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
    color: #fff;
    width: 100%;
    height: 0;
    padding: 50% 0;
    position: relative
}

.circle ul,.circle ul li {
    padding: 0;
    margin: 0;
    color: #424242
}

.circle ul {
    list-style-type: none;
    position: relative;
    z-index: 1
}

.circle:before {
    position: absolute;
    top: 0;
    width: 90%;
    height: 90%;
    border-radius: 100%;
    z-index: 0;
    opacity: .5;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0,0,0,.2);
    box-shadow: 0 5px 40px 0 rgba(0,0,0,.2);
    -webkit-transition: all .2s;
    transition: all .2s
}

.circle--left {
    -webkit-animation: moving 15s ease-in-out infinite alternate;
    animation: moving 15s ease-in-out infinite alternate
}

.circle--left:before {
    -webkit-animation: squishingOne 10s ease-in-out infinite alternate;
    animation: squishingOne 10s ease-in-out infinite alternate;
    background: #91d2ff
}

.circle--right {
    -webkit-animation: moving 10s ease-in-out infinite alternate;
    animation: moving 10s ease-in-out infinite alternate;
    top: -50px
}

.circle--right:before {
    -webkit-animation: squishingTwo 10s ease-in-out infinite alternate;
    animation: squishingTwo 10s ease-in-out infinite alternate;
    background: #d9d9d9
}

.circle span {
    display: block;
    position: absolute;
    -webkit-transition: all .4s;
    transition: all .4s;
    font-size: 12px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.circle span:after {
    position: absolute;
    bottom: -25px;
    width: 100%;
    height: 20px;
    -webkit-transition: all .2s;
    transition: all .2s
}

.circle--left span {
    top: 50px;
    left: -70px;
    color: #424242
}

.circle--left span:after {
    border-top: 1px solid #8f9696;
    border-left: 1px solid #8f9696
}

.circle--right span {
    top: 200px;
    left: -70px;
    color: #424242
}

.circle--right span:after {
    border-top: 1px solid #8f9696;
    border-right: 1px solid #8f9696
}

@media only screen and (min-width: 400px) {
    .circle ul li {
        font-size:1.5em
    }

    .circle--left span {
        top: 100px;
        left: -50px
    }

    .circle--right span {
        top: 250px;
        left: -50px
    }
}

@media only screen and (min-width: 500px) {
    .circles .container {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 15px;
        padding-right: 15px
    }

    .circle {
        width: 43%;
        padding: 22% 0;
        margin: auto
    }

    .circle ul li {
        font-size: 1.2em
    }

    .circle--left {
        right: -20px
    }

    .circle--right {
        top: 0;
        left: -20px
    }

    .circle span {
        font-size: 12px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .circle span:after {
        content: '';
        bottom: -25px;
        left: 0
    }

    .circle--left span {
        top: -10px;
        left: 10px;
        right: auto;
        color: #424242
    }

    .circle--left span:after {
        border-left: none;
        border-right: 1px solid #8f9696
    }

    .circle--right span {
        top: -10px;
        left: auto;
        right: 20px;
        color: #424242
    }

    .circle--right span:after {
        border-top: 1px solid #8f9696;
        border-left: 1px solid #8f9696;
        border-right: none
    }
}

@media only screen and (min-width: 730px) {
    .circle ul li {
        font-size:1rem;
        padding-bottom: .5em;
        color: #424242
    }

    .circles {
        padding-top: 1em;
        padding-bottom: 3em
    }

    .circle--left {
        right: -40px
    }

    .circle--right {
        left: -40px
    }
}

@media only screen and (min-width: 1020px) {
    .circle ul li {
        font-size:17px;
        color: #575757;
        font-weight: 300;
        line-height: 150%
    }

    .circle span {
        font-size: 16px
    }

    .circle span:after {
        bottom: -25px;
        height: 20px
    }

    .circle--left {
        right: -105px
    }

    .circle--left span {
        top: 120px;
        right: 50%;
        left: auto;
        color: #575757
    }

    .circle--right {
        left: -50px
    }

    .circle--right span {
        top: 120px;
        left: 50%;
        right: auto;
        color: #575757
    }

    .circle:hover:before {
        width: 95%;
        height: 95%;
        margin-left: -2.5%;
        margin-top: -2.5%
    }

    .circle:hover span {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

#idemaniaReklamAjansi {
    background: #fff;
    padding-bottom: 5%
}

.idemaniaBilgiBaslik {
    font-style: normal
}

.bilgiAciklamaKucuk {
    color: #929292;
    padding-top: 5px
}

#bizKimizSayi p.bilgiAciklamaBuyuk {
    margin-top: 4rem;
    margin-bottom: 0;
    font-weight: 500;
    color: #4ca0d8;
    font-size: 130%;
    font-weight: 400
}

#bizKimizSayi p {
    margin-top: 0;
    margin-bottom: 0
}

.masaustuanasayfaslidergorun {
    padding-top: 5%;
    padding-bottom: 5%
}

#hizmetlerimizSyt .col-lg-4 img {
    height: 100px;
    width: 100px;
    object-fit: contain
}

#hizmetlerimizAltili .hizmetaltilidivinaltindakilisteler p.bilgiAciklamaBuyuk {
    font-weight: 700;
    color: #282828;
    font-size: 130%
}

#hizmetlerimizAltili .hizmetaltilidivinaltindakilisteler p.hizmetMaviRakam {
    color: #449ad5;
    font-weight: 700;
    font-size: 130%
}

#hizmetlerimizAltili .hizmetaltilidivinaltindakilisteler p {
    margin-bottom: .5rem;
    font-size: 90%
}

#hizmetlerimizAltili .hizmetaltilidivinaltindakilisteler ul {
    list-style: none;
    padding: 0
}

#hizmetlerimizYuvarlak {
    padding-top: 5%
}

#idemaniaReklamAjansi .col-lg-8 h5 {
    color: #449ad5;
    font-weight: 700
}

#idemaniaReklamAjansi .col-lg-5 p:first-child {
    color: #449ad5;
    font-weight: 700
}

#idemaniaReklamAjansi .col-lg-1 {
    color: #1d2024
}

h2 strong {
    color: #449ad5;
    font-weight: 400
}

#yenisolresimsagslider {
    overflow: hidden
}

#yenisolresimsagslider .slideryenibg {
    background: #273c4a;
    overflow: hidden
}

.yenibizkimsliderbasliklar {
    margin-top: 120px
}

.yenibizkimsliderbasliklar h4 {
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -.85px;
    margin-bottom: 80px!important;
    margin-left: 5px!important
}

.yenibizkimsliderbasliklar {
    margin-top: 120px
}

.yenibizkimsliderbasliklar h2 {
    color: #fff;
    font-size: 45px;
    font-weight: 300;
    letter-spacing: -.85px;
    margin-bottom: 30px!important;
    width: 80%;
    margin-left: 0!important
}

.yenibizkimsliderbasliklar h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -.85px;
    width: 50%;
    margin-left: 0!important
}

#yenisolresimsagslider .col-lg-4 img {
    width: 100%
}

#yenisolresimsagslider .col-lg-8.slideryenibg .yenisolresimsagslider .owl-dots {
    margin-right: auto;
    text-align: left;
    margin-top: 4rem
}

#yenisolresimsagslider .col-lg-8.slideryenibg .yenisolresimsagslider .owl-dots .owl-dot span {
    width: 20px;
    height: 20px;
    background: 0 0;
    border-color: #fff
}

#yenisolresimsagslider .col-lg-8.slideryenibg .yenisolresimsagslider .owl-dots .owl-dot.active span {
    background: #4ca0d8
}

.markalar {
    background-image: url(https://www.idemania.net/themes/idemania/assets/img/dijitalcag.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 60vh
}

.markalar .imageabsol {
    text-align: center
}

.markalar .imageabsol img {
    margin-top: 1rem
}

.bizeulasinStickyyy {
    position: fixed;
    top: 55%;
    z-index: 999999999999999;
    right: 25px
}

.bizeulasinStickyyy>a {
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    float: right;
    clear: both
}

.bizeulasinStickyyy>a:hover {
    margin-right: -4px
}

.bizeulasinStickyyy>button {
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    float: right;
    clear: both;
    border: 0;
    background: 0 0;
    padding: 0
}

.bizeulasinStickyyy>button:hover {
    margin-right: -4px
}

.bizeulasinStickyyy img {
    width: 40px;
    margin-top: 5px;
    margin-left: 10px
}

.bizeulasinStickyyy:hover .yapiskanyuvarlakdiv {
    padding: 30px 50px 30px 85px;
    transition: .5s
}

.yapiskanyuvarlakdiv {
    background: #3692d2;
    padding: 20px;
    border-radius: 50px 50px 0 50px
}

.bizeulasinStickyyy:hover .yapiskanyuvarlakdiv img {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 25px;
    top: 45px
}

.yapiskanyuvarlakdiv span {
    display: none
}

.bizeulasinStickyyy:hover .yapiskanyuvarlakdiv span {
    display: block;
    color: #fff;
    font-size: 22px
}

@media (max-width: 500px) {
    .yapiskanyuvarlakdiv {
        padding:10px
    }

    .yapiskanyuvarlakdiv img {
        width: 25px
    }

    .bizeulasinStickyyy:hover .yapiskanyuvarlakdiv span {
        font-size: 12px
    }

    .bizeulasinStickyyy:hover .yapiskanyuvarlakdiv img {
        width: 20px;
        height: 20px;
        left: 2px;
        top: 35px
    }

    .bizeulasinStickyyy:hover .yapiskanyuvarlakdiv {
        padding: 20px 20px 20px 40px
    }

    .bizeulasinStickyyy {
        top: 87%;
        z-index: 1
    }
}

@media (max-width: 320px) {
    .bizeulasinStickyyy {
        top:84%;
        z-index: 1
    }
}

@media (max-width: 1030px) and (min-width:1020px) {
    .bizeulasinStickyyy {
        top:62%
    }
}

@media (max-width: 770px) and (min-width:760px) {
    .bizeulasinStickyyy {
        top:78%;
        right: 20px
    }
}