body {
    font-size: 15px;
    font-family: 'Humanst_Bt';
}

@font-face {
    font-family: 'Humanst_Bt';
    src: url('../fonts/Humanst_Bt.ttf') format('truetype');
}

@font-face {
    font-family: 'Humanst_Bt_Bold';
    src: url('fonts/Humanst_Bt_Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Humanst_Lt_Bt';
    src: url('../fonts/Humanst_Lt_Bt.ttf') format('truetype');
}
@font-face {
    font-family: 'Humanst_Bt_Bold_italic';
    src: url('fonts/Humanst_Bt_Bold_italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Humanst_Bt_italic';
    src: url('fonts/Humanst_Bt_italic.ttf') format('truetype');
}
.sty{   font-family: 'Humanst_Lt_Bt';}
.ortaresim {
    position: fixed;
    z-index: -5;
    top: 0px;
    height: 100%;
}
.imageup{margin-left:15%;width:100%;text-align:center;}
.creative {
    height: 305px;
    margin: 10px;
    border: #eeeeee solid 0.3mm;
    padding: 10px;
    text-align: center;
}
.Menubo{color:#000000;  font-size:15px; text-decoration:none;}
.Menubo:Hover{color:#000000;font-size:15px; text-decoration:none;}
.first{display:block;}
.Two{display:none;}
.creative:hover .Menubo{ color:white;}
.creative:hover .first{display:none;}
.creative:hover .Two{display:block;}

.sosyalmedya:hover .Menubo{ color:white;}
.sosyalmedya:hover .first{display:none;}
.sosyalmedya:hover .Two{display:block;}

.Webtasarim:hover .Menubo{ color:white;}
.Webtasarim:hover .first{display:none;}
.Webtasarim:hover .Two{display:block;}

.Fotograf:hover .Menubo{ color:white;}
.Fotograf:hover .first{display:none;}
.Fotograf:hover .Two{display:block;}
.menubac{background-color: white;position:fixed;z-index:9999;}
.Header {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}
.blogg{ border: 0.3mm #c3c3c3 solid; padding-top:5px; padding-bottom:5px; }
.blogg:hover{background-color:#0c5577; color:white}
.text {
    text-align: justify;
    margin-top: 10px;
    font-size: 14px;
}

.creative:hover {
    background-color: #3acfff;
    color: #ffffff;
}

.creHeader {
    color: #3acfff;
    font-weight: 600;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.creative:hover .creHeader {
    color: #ffffff;
}

.Fotograf:hover {
    background-color: #ff6600;
    color: #ffffff;
}

.Fotograf {
    height: 305px;
    margin: 10px;
    border: #eeeeee solid 0.3mm;
    padding: 10px;
    text-align: center;
}
.oklar{display:block;}
.fotoHeader {
    color: #ff6600;
    font-weight: 600;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.Fotograf:hover .fotoHeader {
    color: #ffffff;
}

.Webtasarim {
    height: 305px;
    margin: 10px;
    border: #eeeeee solid 0.3mm;
    padding: 10px;
    text-align: center;
}

    .Webtasarim:hover {
        background-color: #e00000;
        color: #ffffff;
    }

.webHeader {
    color: #e00000;
    font-weight: 600;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.Webtasarim:hover .webHeader {
    color: #ffffff;
}

.sosyalmedya {
    height: 305px;
    margin: 10px;
    border: #eeeeee solid 0.3mm;
    padding: 10px;
    text-align: center;
}

    .sosyalmedya:hover {
        background-color: #00ba00;
        color: #ffffff;
    }

.sosHeader {
    color: #00ba00;
    font-weight: 600;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.sosyalmedya:hover .sosHeader {
    color: #ffffff;
}

.Referance {
    padding: 2px;
}


.textt {
    text-align: center;
    opacity: 0;
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 7.5%;
    margin-top: 35%;
    width: 84%;
    position: absolute;
    color: #FFFFFF;
    z-index: 6;
    font-family: "trebuchet MS";
    transition: all .7s ease-in-out;
}

.back {
    padding: 2px;
    transition: all .3s ease-in-out;
    opacity: 0;

    position: absolute;
    z-index: 2;
}

.Referance:hover .back {
    height: 99%;
    width: 99%;
    background-color: #2d2c2c;
    top: 0.3%;
    position: absolute;
    left: 0.5%;
    z-index: 2;
    opacity: 0.8;
}

.resim {
    z-index: 1;
}

.top {
    transition: all .8s ease-in-out;
    opacity: 1;
    z-index: 5;
    top: 10%;
    position: absolute;
    margin-left: 6%;
    height: 90%;
    width: 0%;
    border-top: solid 0.5mm #ff6600;
}

.Referance:hover .top {
    margin-left: 6%;
    width: 87.5%;
}

.bottom {
    transition: all .8s ease-in-out;
    right: 0;
    opacity: 1;
    z-index: 5;
    position: absolute;
    height: 89%;
    margin-right: 6%;
    width: 0%;
    border-bottom: solid 0.5mm #ff6600;
}

.Referance:hover .bottom {
    margin-right: 6%;
    width: 87.5%;
}

.left {
    transition: all .8s ease-in-out;
    opacity: 1;
    left: 10%;
    top: 93%;
    z-index: 5;
    position: absolute;
    height: 0%;
    width: 80%;
    border-left: solid 0.5mm #ff6600;
}

.Referance:hover .left {
    top: 6.7%;
    opacity: 1;
    z-index: 5;
    position: absolute;
    height: 86.3%;
    width: 90%;
}

.right {
    transition: all .8s ease-in-out;
    opacity: 1;
    right: 9.5%;
    top: 6.7%;
    z-index: 5;
    position: absolute;
    height: 0;
    width: 90%;
    border-right: solid 0.5mm #ff6600;
}
.surecclas{margin-top: -14%; margin-left: 5%;}
.Referance:hover .right {
    top: 6.7%;
    opacity: 1;
    z-index: 5;
    position: absolute;
    height: 86.3%;
    width: 90%;
}
.blogname{font-size:16px; font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight:600; margin-bottom:10px; margin-top:10px;}
.AktifHeader{padding:7px; padding-left:21px; font-size:16px; background-color:#ff6600; color:white;}
.AktifHeaderw{padding:7px; padding-left:21px; font-size:16px; background-color:#069206; color:white;}
.linkdetay a{
	color:#ff6600;
	font-style: normal;
}
.linkdetay a:hover{color:#ff6600; text-decoration:none;}
.blogcontext{text-align:justify;}

.AktifHeaderf{padding:7px; padding-left:21px; font-size:16px; background-color:#0c5577; color:white;}

.ulmenu{ list-style-type:none; padding-left:0px; padding-top:0px; padding:15px;}
.ulmenu li a { padding:0px; font-size:12.7px;  width:100%; display:block; color:#3d3d3d; text-decoration:none;}
.ulmenu li a:Hover {  text-align:right; display:block; color:#ff6600; text-decoration:none;}
.Referance:hover .textt {
    opacity: 1;
    z-index: 7;
}

.desdialog{position:fixed; display:none; z-index:836; height:42%; width:100%; background-color:rgba(255, 255, 255, 0.982); padding:15px; padding-top:2%; font-family:Verdana, Geneva, Tahoma, sans-serif;}
.menubars:hover .desdialog{display:block; left:0px; z-index:5; top:50px;}

.menubars a {cursor:pointer; margin-top:20px; padding:7px; padding-left:15px; padding-right:15px; display:block; float:left; color:#5b5b5b; font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:13px; text-decoration:none}
.menubars a:Hover {text-decoration:none; color:#ff6600;}
.Headerr { background-color:white;
}
.msn{padding-top:33px;}
.desmen{padding-top:12px; padding-bottom:12px; padding-right:15px; padding-left:15px; background-color:#ff6600; opacity:0.9; border-radius:50%;}


.logo {
    padding-top: 15px;
    padding-bottom: 7px;
    display: block;
}

.navigation {
  
    padding-right: 2%;
}

.blog {
    border: #eeeeee solid 0.3mm;
}

    .blog:hover {
        background-color: #ff6600;
    }

        .blog:hover .blogHeader {
            color: #ffffff;
        }

        .blog:hover .blogtext {
            color: #ffffff;
        }

.blogHeader {
    font-size: 14px;
    color: #ff6600;
    font-weight: 600;
    padding: 10px;
    display: block;
    text-decoration: none;
}

    .blogHeader:hover {
        color: #ff6600;
        font-weight: 600;
        padding: 10px;
        display: block;
        text-decoration: none;
    }

.blogtext {
    font-size: 13px;
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 10px;
    text-align: justify;
}

    .blogtext:hover {
        color: #000000;
        text-decoration: none;
        display: block;
        padding: 10px;
        text-align: justify;
    }
.Musteri{ padding-top:0px; padding-left:0px; padding-bottom:15px; color:white;}
.Fotor {
    background-color:#323232;
    color: #ffffff;
    padding-top: 20px;
    font-size: 13px;

    font-family:Verdana, Geneva, Tahoma, sans-serif;
    padding-bottom: 50px;
}


.yenis {
    position: absolute;
    right: 0px;
    z-index: 58;
    top: 1270px;
     right: 10%;
}

.yenismobil {
     right: 0%;
    position: absolute;
    right: 0px;
    z-index: 58;
    top: 850px;
}

.rightContext {
    margin-left:5%;
    top: 45px;
    transform: translate(0px);
}

.leftContext {
    top: 38px;
    text-align:right;
    margin-bottom: 50px;
}

.columns {
    margin-bottom: 100px;
}

.hizmet{ transition: all .5s ease-in-out;font-size:13px; font-family:Verdana, Geneva, Tahoma, sans-serif;padding:10px; border:#000000 solid 0.3mm}
.madde {height:0px; opacity:0; transition: all .5s ease-in-out;}

.hizmet:hover{background-color:#ff6600; color:#ffffff;border:#ff6600 solid 0.3mm}

.Kreatif4:hover .madde{height:180px;  opacity:1; transition: all .5s ease-in-out;}


nav {
    text-align: right;
}

    nav a {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-align: left;
        text-decoration: none;
        color: #000000;
        display: block;
        font-size: 13px;
    }

    nav > ul > li > a {
        padding-top: 24px;
        padding-bottom: 22px;
        padding-right: 10px;
        padding-left: 10px;
        text-decoration: none;
    }

    nav > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: block;
        text-decoration: none;
    }

    nav ul li {
        list-style: none;
        display: inline-block;
        padding: 0;
        color: white;
        position: relative;
    }

        nav ul li:hover {
            color: #ffffff;
            text-decoration: none;
        }



        nav ul li a:hover {
            background-color: #e2dfdf;
            color: #000000;
            text-decoration: none;
        }

    nav > ul > li.dropdown > ul {
        text-decoration: none;
        position: absolute;
        width: 200px;
        padding: 0;
        height: 1px;
        overflow: hidden;
        margin-top: -10px;
        background-color: #eeeeee;
        opacity: 0;
        border: solid 0.3mm #e3e3e3;
    }

    nav ul li.dropdown > ul > li {
        display: block;
        text-decoration: none;
    }

    nav ul li.dropdown > ul > li {
        text-decoration: none;
        padding: 0 !important;
        position: relative !important;
    }

        nav ul li.dropdown > ul > li > a {
            text-decoration: none;
            padding-top: 7px;
            padding-bottom: 7px;
            padding-left: 20px;
            color: #000000;
            border-bottom: #dddddd solid 0.1mm;
        }

            nav ul li.dropdown > ul > li > a:hover {
                color: #000000;
                text-decoration: none;
                background-color: #e2dfdf;
            }
 .deslogoo{display:none;}
    nav ul li.dropdown:hover > ul {
        z-index: 999;
        opacity: 1;
        display: block;
        /*overflow:auto;*/
        overflow: initial;
        margin-top: 0px;
        height: auto !important;
        background-color: #eeeeee;
    }

#nav-toggle, #nav-toggle-alt {
    width: 100%;
    background: #0072A8;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
    display: none;
    color: white;
}

/* sub sub menu */
ul.sub-sub {
    position: absolute;
    z-index: -1;
    top: -10px;
    left: 0px;
    padding: 10px;
    list-style: none;
    width: 140px;
    margin: 0;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

nav ul li.dropdown > ul > li > ul > li {
    display: block;
    background-color: #0080C0;
}

    nav ul li.dropdown > ul > li > ul > li:hover {
        background-color: #0072A8;
    }

    nav ul li.dropdown > ul > li > ul > li > a {
        padding: 10px !important;
    }

nav ul li.dropdown > ul > li:hover > ul {
    opacity: 1;
    left: 102px;
}
.kapat{display:none;}
/********* sub sub menu bitti ************/
.dana{background-color: white; padding-top: 95px;}
#nav-toggle-alt {
    display: none;
}
/* responsive max-width 760px */
.menuacm{display:none;}
@media only screen and (max-width:1230px) and (min-width:990px){ 
    .imageup{ height:100%; width:100%;}
    
 }
.asd{margin-top: 178px;}
@media only screen and (max-width:1430px) and (min-width:1619px){ 
    .imageup{ height:100%; width:100%;}
        


 }
@media only screen and (max-width:1920px) and (min-width:900px){ 
    .imageup{ height:100%; width:100%;}
 }

@media only screen and (max-width:1000px) and (min-width:500px){ 
    .imageup{ height:100%; width:100%;}
 }
 .menumobil{display:none;}
@media (max-width: 1000px) {
    nav ul {
        display: none;
    }.asd{margin-top: 15px;}

     .icres{display:none;}
       .leftbutton{top:70px;}
       .rightbutton{top:70px;}
    .menuacm{ display:block;  text-align:center; padding:10px; padding-top:26px; padding-right:35px; }
      .colme {color:white; display:block; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:23px; background-color:#ff6600;}
      .dana{background-color: white; padding-top:15px;}
   .men{border-bottom:#e6e3e3 solid 0.3mm;}
   .menumobil{position:fixed; z-index:59; top:0px; padding-top:20px; background-color:rgba(255, 255, 255, 0.9); width:100%; height:100%; height:100%;}
    .menumobil a{ text-align:center; display:block; text-decoration:none;font-size:17px; font-family:Verdana, Geneva, Tahoma, sans-serif; padding:10px;color:#4c4c4c; border-bottom:#e6e3e3 solid 0.3mm;}
     .menumobil a:Hover{ display:block; text-decoration:none;font-size:15px; font-family:Verdana, Geneva, Tahoma, sans-serif; padding:10px;color:white; background-color:#ff6600; border-bottom:#e6e3e3 solid 0.3mm;}

    .deslogoo{display:block;  padding:10px; padding-top:15px; text-align:center;}
    .kapat{z-index:60; right:0px; padding-top:7px; margin-top:25px;  padding-bottom:7px; padding-left:12px; padding-right:12px; background-color:#ff6600; position:absolute; color:#000000; top:0px;}

    .imageup{ height:100%; width:100%; margin-left:0px;}
        .oklar{display:none;}
        .menubac{background-color: white;position:inherit;z-index:9999;}
        nav ul li {
            width: 100%;
            box-sizing: border-box;
            display: block;
            text-align: left;
        }
        .Headerr {display:none;}
    #nav-toggle {
        display: block;
    }

    nav ul li.dropdown:hover > ul {
        background-color: #0080C0 !important;
    }

    nav ul li.dropdown > ul {
        position: relative;
        overflow: auto;
        display: block;
        height: auto;
        width: 100%;
        opacity: 1;
        margin: 0;
        padding: 0;
        background-color: #0080C0;
    }

        nav ul li.dropdown > ul li a:hover {
            background-color: #006A9D !important;
        }

        nav ul li.dropdown > ul > li > a {
            padding-left: 30px;
        }

            nav ul li.dropdown > ul > li > a:hover {
                background-color: #0080C0;
            }
}

@media (min-width: 1000px) {
    #nav-toggle-alt {
        display: none !important;
    }

}