body {
    margin: 0;
    padding: 0;

/*    background: #E6E6E4;*/
}
body.gri {
    background: #E6E6E4;
}

.np {
    padding: 0
}
.mt50{
    margin-top: 50px;
} 
.mb50{
    margin-bottom: 50px;
} 
.mt100{
    margin-top: 100px;
} 
.mt10vh {
    margin-top: 10vh;
}


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

.flex-center {
    display: flex;
    justify-content: center;
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}

/*  GRID  *********************************** */
.grid-wrapper{
    position: fixed;
    z-index: -10000;
    width: 100%;
    opacity: .1;
    top: 0;
}
.grid{
    border-right: 1px solid transparent;
    height: 100vh;
    min-height: 300px;
}
.grid:first-child {
    border-left: 1px solid transparent;    
}
.works .grid-wrapper .grid {
    border-color: #999;
}
.about .grid-wrapper .grid {
    border-color: #999;
}


/*  HEAD  *********************************** */

.menu-grip.hide {
    display: none;
}
.menu-close.hide {
    display: none;
}


a.scroll-btn-up {
    cursor: hand;
    position: absolute;
    top: -30px;
    left: 8.3%;
    margin-left: 60px;
    z-index: 9997;

    color: #fff;
    border: 1px solid #fff; 

    font-size: 14px;
    width: 40px;
    height: 70px;
    border-radius: 50px;

    transition: .2s ease-in-out;

    padding: 12px;
    padding-left: 16px;
    padding-top: 34px;

}
a.scroll-btn-up:hover{
    background-color: #fff;
    border: 1px solid #fff!important; 
    top: -20px;
}
a.scroll-btn-up {
    display: none;
}

.works a.scroll-btn-up:hover {
    color: #0938e6;
}
.about a.scroll-btn-up:hover {
    color: #ed1c93;
}




a.menu-close {
    display: block;
    width: 50px;
    height: 50px;
    font-size: 18px;
    padding: 19px;
    padding-top: 12px;
    color: #fff;
    border-radius: 50px;
    border: 1px solid #fff;
    transition: .2s ease-in-out;
}
a.menu-close:hover {
    margin-left: -10px;
}
.works a.menu-close {
    color: #fff;
}
.works a.menu-close:hover {
    color: #0938e6;
    background-color: #fff;
}
.about a.menu-close {
    color: #fff;
}
.about a.menu-close:hover {
    color: #ed1c93;
   background-color: #fff;
}


/*  MENU  *********************************** */

.contact-wrapper {

}
.flyover {
    position: absolute;
    z-index: 89;
    left: 70%;
    top: 50%;
}
.about a.contact-btn{
    background-color: #0938e6!important;
}
.about a.contact-btn:hover{
    color: #0938e6!important;
    color: #ed1c93!important;
    background-color: #fff!important;
}
a.contact-btn i{
    margin-left: 50px!important;
}


.about .chapter .footer-wrapper {
    margin-top: 5vh;
}

.menu-wrapper {
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.menu-wrapper.hide {
    display: none;
}
.menu {
    padding-top: 0%;
}
a.menu-item {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center; 
   transition: 0.2s ease-in-out;
}
a.menu-item:hover{
    background: #ffffff90;
    padding: 20px 40px;
    border-radius: 10px;
}
.menu-item .title {
    font-family: 'Oswald', serif;
    font-size: 55px;
    color: #fff;
    text-transform: uppercase;
}
.menu-item.small .title {
    font-size: 16px;
}
.menu-item .title i {
    display: inline-block;
    margin-left: 10px;
    font-size:12px;
    position: absolute;
}
.menu-item .subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    color: #999;
    margin-top: -6px;
    font-weight: bold;
}

a.menu-item .subtitle {
    color: #1d1d1d;
}
a.menu-item:hover .title {
    color: #ed1c93;
}
a.menu-item:hover .subtitle {
    color: #fff;
}


a.menu-item.works:hover .title {
    color: #0938e6!important;
}
a.menu-item.works:hover .subtitle {
    color: #ed1c93!important;
}


a.menu-item.about:hover .title {
    color: #ed1c93!important;
    color: #efea1d!important;
}
a.menu-item.about:hover .subtitle {
    color: #efea1d!important;
    color: #ed1c93!important;
}




.submenu {
    display: block;
    text-align: center;
    padding-bottom: 2vh;
}
.about .submenu {
    margin-top: 8vh;
}
a.submenu-item {
    display: inline-block;
    padding: 15px;    
    text-align: center;  
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
}

.submenu-item .submenu-title {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    color: #fff;
}

.submenu a.submenu-item{
    border-bottom: 1px solid transparent;
}

.works a.submenu-item .submenu-title{
    color: #999;
}
.works a.submenu-item:hover{
    border-bottom: 1px solid #0938e6;
}
.works a.submenu-item:hover .submenu-title{
    color: #0938e6;
}


.websites a.submenu-item.websites,
.branding a.submenu-item.branding,
.mobile a.submenu-item.mobile,
.marketing a.submenu-item.marketing,
.print a.submenu-item.print
{
    border-bottom: 1px solid #ed1c93;
}
.websites a.submenu-item.websites .submenu-title,
.branding a.submenu-item.branding .submenu-title,
.mobile a.submenu-item.mobile .submenu-title,
.marketing a.submenu-item.marketing .submenu-title,
.print a.submenu-item.print .submenu-title
{
    color: #ccc;
}


.about a.submenu-item .submenu-title{
    color: #0938e6;
    color: #ed1c93;
}
.about a.submenu-item:hover{
    border-bottom: 1px solid #0938e6;
    border-bottom: 1px solid #ed1c93;
}
.about a.submenu-item:hover .submenu-title{
    color: #fff;
}
.about a.submenu-item.on{
    border-bottom: 1px solid #fff;
}
.about a.submenu-item.on .submenu-title{
    color: #fff;
}


/*  CONTENT  *********************************** */
.content-wrapper {
    width: 100%;
}
.page-title {
    position: absolute;

    font-family: 'Playfair Display', serif;
    font-size: 90px;
    font-weight: 500;

    margin-top: -13vh;
    letter-spacing: -.02em;
}
.works .page-title {
    color: #ed1c93;
}
.about .page-title {
    color: #0938e6;
    color: #efea1d;
    color: #ed1c93;
}

/*  CHAPTER  *********************************** */
.chapter {
    height: 100vh;
    padding-top: 130px;
    padding-bottom: 5vh;
    width: 100%;
}
.chapter.intro {
    height: 100vh;
    padding-top: 170px;
    padding-bottom: 0;
}
.chapter.intro .intro {
    background-color: #efea1d;
    background: url('../gfx-n/about-intro-hue.jpg') center;
    height: 60vh;
    border-radius: 50px;
    border-radius: 10px;
    background-size: cover;
    margin-right:30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chapter.study .intro {
    background-color: #E6E6E4;
    background: url('../gfx-n/about-karina-crop.jpg') center;
    height: 60vh;
    border-radius: 50px;
    border-radius: 10px;
    background-size: cover;
    margin-top: -30vh;

    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 3vw;
}
.chapter.career .intro {
    background-color: #E6E6E4;
    background: url('../gfx-n/about-agencies.jpg') center;
    height: 60vh;
    border-radius: 50px;
    border-radius: 10px;
    background-size: cover;
    margin-top: -30vh;

    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 3vw;
}
.chapter.lecturing .intro {
    background-color: #E6E6E4;
    background: url('../gfx-n/about-lecturing.jpg') center;
    height: 60vh;
    border-radius: 50px;
    border-radius: 10px;
    background-size: cover;
    margin-top: -30vh;

    display: flex;
    align-items: center;
    padding-left: 3vw;
}
.chapter.intro {
}
.chapter.skillset {
    background-color: #ed1c93; /* pembe */
    background-color: #0938e6; /* mavi */
    background-color: #efea1d; /* sarı */
}
.chapter.study {
    background-color: #efea1d; /* sarı */
    background-color: #ed1c93; /* pembe */
    background-color: #0938e6; /* mavi */
    background-color: #fff; /* mavi */
}
.chapter.career {
    background-color: #efea1d;
    background-color: #0938e6;
    background-color: #ed1c93; /* pembe */
/*    background: url('../gfx-n/about-agencies.jpg') center;*/
}
.chapter.lecturing {
    background-color: #E6E6E4;
}

.chapter.resume {
    background-color: #1a1a1a;
    background-color: #E6E6E4;
    background-color: #666;
    padding-top: 0;
    background: url('../gfx-n/about-vapur.jpg') center;
}
.chapter.resume .title-bottom {
    position: relative;
    left: 0vw;
    bottom: 24vh;
}
.chapter.contact .title-bottom {
    position: relative;
    left: 0vw;
    bottom: 24vh;
}
.chapter .chapter-title {
    position: absolute;
    left: 8vw;
    top: 85vh;
}


.chapter .icon {
    color: #fff;
    font-size: 36px;
}

.chapter.study .icon {
    color: #ed1c93;
}
.chapter.career .icon {
    color: #efea1d;
}
.chapter.lecturing .icon {
    color: #0938e6;
}
.chapter.resume .icon {
    color: #0938e6;
}


.chapter .title {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    font-weight: 500;
    color: #efea1d;
    margin-top: -20px;
    letter-spacing: -.03em;    
}
.chapter.study .title {
    color: #0938e6;
}
.chapter.career .title {
    color: #fff;
}
.chapter.lecturing .title {
    color: #ed1c93;
}
.chapter.resume .title {
    opacity: .8;
    color: #fff;
}


.chapter .text {
    font-family: 'Playfair Display', serif;
    font-size: 31px;
    font-weight: 400;
/*    margin-top: 50px;*/
    line-height: 1.1em;
    letter-spacing: -.03em;
}
.chapter.intro .text {
    margin-top: 0;
    margin-bottom: 40px;
}
.chapter .subtext {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    color: #E6E6E4;
    margin-top: 10px;
    line-height: 1.1em;
    margin-bottom: 50px;
}
.chapter.career .text {
    color: #fff;
}
.chapter.study .subtext {
    color: #0938e6;
}
.chapter.lecturing .subtext {
    color: #0938e6;
}

a.chapter-btn {
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    color: #E6E6E4;
    padding: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius:50px;
    background: #efea1d;
    background: #ed1c93;
}
a.chapter-btn i {
    font-size: 18px;
    margin-left: 10px;
}
a.chapter-btn:hover {
    background: #E6E6E4;
    color: #ed1c93;
}

.intro a.chapter-btn {
    color: #fff!important;
    background: #ed1c93!important;
}
.intro a.chapter-btn:hover {
    background: #fff!important;
    color: #ed1c93!important;
}

.study a.chapter-btn {
    color: #fff;
    background: #0938e6;
}
.study a.chapter-btn:hover {
    color: #0938e6;
    background: #fff;
}
.career a.chapter-btn {
    color: #fff;
    background: #ed1c93;
    color: #111;
    background: #efea1d;
}
.career a.chapter-btn:hover {
    background: #fff;
    color: #ed1c93;
}
.lecturing a.chapter-btn {
    color: #fff;
    background: #0938e6;
    background: #ed1c93;
}
.lecturing a.chapter-btn:hover {
    color: #0938e6;
    color: #ed1c93;
    background: #fff;
}


.list-title {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    color: #E6E6E4;
    line-height: 1.1em;
}
.chapter.lecturing .list-title {
    color: #efea1d;
    color: #ed1c93;
}
.chapter.intro .list-title {
    color: #0938e6;
}

.list-title::after {
    content:'';
    position: absolute;
    background-color: #E6E6E4;
    opacity: .4;
    width: 6vh;
    height: 1px;
    top: 12px;
    left: -12vh;
}

ul.list {
    margin: 0; 
    margin-top: 10px;
    margin-bottom: 0px;
}
ul.list li {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    color: #111;
    margin-top: 2px;
    line-height: 1.1em;
}
.chapter.lecturing ul.list li {
    color: #0938e6;
}
.chapter.career ul.list li {
    color: #fff;
}

.chapter .funfact {

}


.draggable {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
}
a.dragmore {
    position: absolute;
    top: 50%;
    display: block;
    font-size: 18px;
    padding: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 50px;

    color: #fff;
    box-shadow: -3px -3px 12px rgba(0,0,0,.3);
    background-color: #0938e6;
    transition: 0.3s ease-in-out;
    left: 80vw;
}
a.dragmore .text {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    padding: 0 10px;
    padding-bottom: 5px;
}

a.dragmore:hover {
    color: #0938e6;
    background-color: #efea1d;
    background-color: #fff;
}


.c-dark li {
    color: #1a1a1a!important;
}
.c-pink li {
    color: #ed1c93!important;
}
.c-blue li {
    color: #0938e6!important;
}
.c-yellow li {
    color: #efea1d!important;
}


/*  BOX  *********************************** */
.box-wrapper{
    position: relative;
}
.flex-spacebetween {
    display: flex;
    justify-content: space-between;    
}


.box-wrapper .row:last-child .box{
}
a.box{
    display: block;
    width: 100%;
    min-height: 300px;
    max-height: 500px;
    height: 66vh;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    border-radius: 10px;
/*    box-shadow: inset 0 0 10px #c7c7c7;*/
    background-size: contain;
    background-color: #fafafa;
}

.tag-btn {
    position: absolute;
    right: 40px;
    bottom: 30px;

    border-radius: 50px;
    color: #fff;
    background-color: #ed1c93;

    font-size: 14px;
    width: 40px;
    height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding: 10px;
    border-radius: 50px;
    box-shadow: -3px -3px 12px rgba(0,0,0,.3);
    transition: 0.2s ease-in-out;
}
.tag-btn.invert {
    background-color: #fff;
    color: #ed1c93;    
}
a.box:hover .tag-btn {
    box-shadow: none;
    right: 30px;
    background-color: #fff;
    color: #ed1c93;
    padding-left: 15px;
}
a.box:hover .tag-btn.invert {
    color: #fff;
    background-color: #ed1c93;
}


.tag {
    padding: 20px;
    padding-left: 5vw;
    background: #2E364F;
    opacity: .9;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 17vh;

/*
    top: 0;  
    height: 100%;
    padding-top: 3vh;
*/

    color: #fff;
    font-family: 'Oswald', sans-serif;
    border-radius: 10px;
    opacity: 0;
    transition: 0.4s ease-in-out;
    background: linear-gradient(90deg, rgba(0,0,255,1) 0%, rgba(0,0,255,0) 100%);    

}
a.box:hover .tag {
    opacity: 1;
}

.tag .client{
    font-size: 11px;
}
.tag .industry{
    font-size: 9px;
}
.tag .title{
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.tag .type{
    font-size: 11px;
}


.tag{
    height: 100%;
    background: rgba(0,0,255,.8);
    background: rgba(45,49,66,.7);   
    background: rgba(0,0,255,.6);
    transition: 0.3s ease-in-out;
}


.tag .client{
    font-size: 30px;
    text-transform: uppercase;
}
.tag .industry{
    font-size: 18px;
    margin-top: 0px;
    line-height: 1em;
    text-transform: uppercase;
}
.tag .title{
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    /* padding-top: 90px; */
    /* padding-bottom: 10px; */
    line-height: 1em;
    letter-spacing: -.03em;
    font-weight: 500;
    position: absolute;
    bottom: 140px;
}
.tag .type{
    bottom: 0;
    font-size: 110px;
    position: absolute;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}



/*  FOOTER  *********************************** */
.footer-wrapper {
    width: 84%;
    margin-right: 8%;
    margin-left: 8%;
    position: relative;
    bottom: 0;
}
.work .footer-wrapper {
   position: absolute;
}
.ag {
    background: url(../gfx-n/ag-short.svg) no-repeat;
    background-position: 0 -60px;
    background-size: 36px;
    height: 30px;
    width: 36px;
    margin-top: 19px;
}
.work .ag {
    background-position-y: -60px;
}
.about .ag {
    background-position-y: -150px;
}

.foot-ag{
    margin-top: 8px;
}
.ag-long {
    background: url(../gfx-n/ag-long.svg) no-repeat;
    background-position: 0px -50px;
    background-size: 100%;
    margin-left: -9px;
    height: 32px;
    width: 180px;

}
.about .ag-long {
    background-position: 0 -140px;
}
.akingulseven{
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
}
.bb {
    border-bottom: 5px solid #1d1d1d;
}
.works .bb {
    border-color: #0938e6;
}
.about .bb {
    border-color: #ed1c93;
}
.social {
}
a.social-btn {
    font-size: 18px;
    text-decoration: none;
    min-width: 40px;
    border-radius: 5px;
    display: inline-block;
    margin-left: 10px;
    text-align: center;
    padding: 7px 12px 6px;
}
.works a.social-btn {
    color:#0938e6;
}
.works a.social-btn:hover {
    color: #0938e6;
    background-color: #70CEE4;
}

.work a.social-btn {
    color:#0938e6;
}
.work a.social-btn:hover {
    color: #fff;
    background-color: #0938e6;
}

.about a.social-btn {
    color:#ed1c93;
}
.about a.social-btn:hover {
    color: #fff;
    background-color: #ed1c93;
}


a.btn-v {
    width: 40px;
    padding: 10px;
    padding-top: 15px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    height: 70px;
    display: block;
    font-size: 16px;
    color: #fff;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,0,255,1) 100%);    
}

.absolut {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

a.scroll-btn.about {
    color: #111;    
    background-color: #efea1d;
}
a.scroll-btn.about:hover{
    background-color: #E6E6E4;
    color: #111;    
}




/*  OFF  *********************************** */
.discount {
    position: absolute;
    right: 13vw;
    top: 13vh;
    transform: rotate(7deg);
    transition: .5s ease-in-out;
}

#burst-12 {
    background: #0938e6;
    width: 90px;
    height: 90px;
    position: relative;
    text-align: center;
}
.works #burst-12 {
    background: #ff0;
}
#burst-12:before,
#burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 90px;
    width: 90px;
    background: #0938e6;
}
.works #burst-12:before,
.works #burst-12:after {
    background: #ff0;
}
#burst-12:before {
    transform: rotate(30deg);
}
#burst-12:after {
    transform: rotate(60deg);
}

.discount .number{
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 900;

    position: absolute;
    left: 21px;
    top: -5px;
    color: #fff;
}
.discount .percent {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 900;

    position: absolute;
    left: 70px;
    top: 6px;
    color: #fff;
}
.discount .off {
    font-family: 'Oswald', sans-serif;
    font-size: 29px;
    font-weight: 900;

    position: absolute;
    left: 25px;
    top: 47px;
    color: #fff;
}
.discount .star{

}
.works .number,
.works .off,
.works .percent
{
    color: #0938E6;
    color: #111;
}