/*

Theme Name: Siteci

Text Domain: Siteci

Version: 1.0.7

Description: My first theme work.

Tags: portfolio

Author: Emirhan Tetik

Author URI: https://emirhantetik.com

*/







:root {

    --bs-link-color: none;

    --bs-link-hover-color: none;

}

a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }

p { margin-bottom: 0; }

body {font-family: "Abel";}









@media (min-width: 768px) {

    .container {

        width: 750px;

    }

}





@media (min-width: 1000px) {

    .container {

        width: 975px;

    }

}





@media (min-width: 1280px) {

    .container {

        width: 1170px;

    }

}



.container {

    clear: both;

}





/* Header */





header.main-header {

    display: block;

    user-select: none;

}





header .logo-column {

    float: left;

}




@media (max-width: 768px) {
    
    header .logo-column {

        float: left;

        margin-top: 15px;
    }
}




header .logo-column img {

    max-height: 100px;

    max-width: 200px;

}





@media (min-width: 768px) {

    header .logo-column img {

        max-height: 170px;

        max-width: 340px;

        margin-top: 0px;

    }

}



        

.menu-icon {

    height: 30px;

    width: 30px;

    position: relative;

    z-index: 2;

    top: 50px;

    right: 10px;

    cursor: pointer;

    float: right;

}





.menu-icon__line {

    height: 2px;

    width: 30px;

    display: block;

    background-color: #222;

    margin-bottom: 4px;

    transition: transform 0.2s ease, background-color 0.5s ease;

}





.menu-icon__line-left {

    width: 15px;

}





.menu-icon__line-right {

    width: 15px;

    float: right;

}





.full-screen-menu {

    position: fixed;

    z-index: 1;

    visibility: hidden;

    transition-duration:0.8s;

}





.full-screen-menu:before, .full-screen-menu:after {

    content: "";

    position: fixed;

    top: -10vw;

    left: -10vh;

    width: 120vw;

    height: 130vh;

    background: rgba(234, 234, 234, 0.2);

    z-index: -1;

    transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;

    transform: translateX(0%) translateY(-100%);

}





.full-screen-menu:after {

    background: #222;

    transition-delay: 0s;

    opacity: 0.9;

}





.full-screen-menu:before {

    transition-delay: 0.1s;

}





.menu-container {

    position: fixed;

    top: 50%;

    transform: translate(0%, -50%);

    text-align: center;

    color: #fff;

    font-size: calc(2vw + 10px);

    font-weight: 200;

    cursor: pointer;

}





ul.menu {

    display: table-cell;

    width: 50%;

    margin: auto;

}





header .menu-item {

    position: relative;

    display: inline-block;

    transition-delay: 0.8s;

    opacity: 0;

    transform: translate(0%, 100%);

    transition: opacity 0.2s ease, transform 0.3s ease;

    margin-right: 25px;

}





header .menu-item:before {

    content: "";

    position: absolute;

    background: #fff;

    width: 20px;

    height: 1px;

    top: 100%;

    transform: translate(0%, 0%);

    transition: all 0.3s ease;

    z-index: -1;

}





header .menu-item:hover:before {

    width: 100%;

}



header .menu-item a {

    text-transform: uppercase;

}





body.nav-active .menu-icon__line {

    background-color: #fff;

    transform: translateX(0px) rotate(-45deg);

}





body.nav-active .menu-icon__line-left {

    transform: translateX(1px) rotate(45deg);

}





body.nav-active .menu-icon__line-right {

    transform: translateX(-2px) rotate(45deg);

}





body.nav-active .full-screen-menu {

    visibility: visible;

}





body.nav-active .full-screen-menu:before, body.nav-active .full-screen-menu:after {

    transform: translateX(0%) translateY(0%);

}





body.nav-active .full-screen-menu:after {

    transition-delay: 0.1s;

}





body.nav-active .full-screen-menu:before {

    transition-delay: 0s;

}





body.nav-active .menu-item {

    opacity: 1;

    transform: translateX(0%);

    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;

}





body.nav-active .menu-item:nth-child(0) {

    transition-delay: 0.5s;

}





body.nav-active .menu-item:nth-child(1) {

    transition-delay: 0.6s;

}





body.nav-active .menu-item:nth-child(2) {

    transition-delay: 0.7s;

}





body.nav-active .menu-item:nth-child(3) {

    transition-delay: 0.8s;

}





body.nav-active .menu-item:nth-child(4) {

    transition-delay: 0.9s;

}





/* Second Header */





.second-header {

    margin-top: 20px;

    margin-bottom: 50px;

    padding-left: 15px;

    padding-right: 15px;

    text-align: center;

}





.second-header h1 {

    text-transform: uppercase;

    font-size: 100px;

}





/* Content */





.page-title h1 {

    text-align: center;

    text-transform: uppercase;

}





.post-title h1 {

    text-align: center;

    text-transform: uppercase;

}





article.container {

    padding-bottom: 40px;

    padding-top: 20px;

}





/* About Page */





.about-heading {

    padding-top: 100px;

    margin-bottom: 10px;

    padding-left: 15px;

    padding-right: 15px;

    text-align: center;

}





.about-id {

    text-transform: uppercase;

    font-size: 40px;

}





.about-id-title h1 {

    text-transform: uppercase;

    font-size: 13px;

    letter-spacing: 8px;

}





.about-content {

    text-align: center;

}





@media (min-width: 768px) {

    .about-content {

        width: 500px;

    }

}





@media (min-width: 1000px) {

    .about-content {

        width: 666px;

    }

}





@media (min-width: 1280px) {

    .about-content {

        width: 800px;

    }

}





/* Contact Page */





.heading-map {

    position: relative;

    width: 1908px;

    left: 0px;

    max-width: 1908px;

    height: 500px;

    background-color: #e7e7e7;

    z-index: -10;

}





/* Footer */





footer.site-footer {

    position: sticky;

    top: 100vh;

    display: block;

}





.site-footer .footer-main-content {

    padding-top: 30px;

    padding-bottom: 30px;

    display: table;

    width: 100%;

    table-layout: auto;

}





.site-footer .footer-main-content .footer-right {

    display: table-cell;

    vertical-align: middle;

    float: right;

    text-align: center;

}





@media (max-width: 768px) {

    .site-footer .footer-main-content .footer-right {

        display: flex;

        vertical-align: middle;

        float: right;

        text-align: center;

        justify-content: center;

        width: 100%;

    }
}





.site-footer .footer-main-content .footer-right ul {
    
    margin-bottom: 0;

    padding-left: 0;

}





.site-footer .footer-main-content .footer-right li {

    list-style: none;

    padding-right: 10px;

    display: inline-block;
    
    text-align: center;

}





.site-footer .footer-main-content .footer-left {

    display: table-cell;

    vertical-align: middle;

    float: left;

    text-align: center;

}





@media (max-width: 768px) {

    .site-footer .footer-main-content .footer-left {

        display: flex;

        vertical-align: middle;

        float: left;

        text-align: center;

        justify-content: center;

        width: 100%;

        margin-top: 10px;

    }
}





/* 404 */





body.error404 ::selection {

    background-color: #F6A4BB;

    color: none;

}





body.error404 {

    background-image: url(assets/images/404wallpaper.jpg);

    background-size: cover;

    background-position-x: center;

}





body.error404 .title-404 {

    text-align: center;

    color: #222;

    font-size: 20vh;

    font-weight: bold;

    text-shadow: 10px 10px 10px #00000070;

}





body.error404 .message-404 {

    color: #222;

    text-align: center;

    font-size: 4vh;

    padding-top: 25vh;

    padding-bottom: 3vh;

    text-shadow: 10px 10px 10px #00000070;

    clear: both;

}





footer.site-footer.footer-404 {

    background-color: #222;

    opacity: 0.5;

    color: #e7e7e7;

}





/* Audiology Page */





.audiology-heading {

    padding-top: 100px;

    margin-bottom: 10px;

    padding-left: 15px;

    padding-right: 15px;

    text-align: center;

}





.audiology-id {

    text-transform: uppercase;

    font-size: 40px;

}





.audiology-id-title h1 {

    text-transform: uppercase;

    font-size: 13px;

    letter-spacing: 8px;

}





.audiology-content {

    text-align: center;

}





@media (min-width: 768px) {

    .audiology-content {

        width: 500px;

    }

}





@media (min-width: 1000px) {

    .audiology-content {

        width: 666px;

    }

}





@media (min-width: 1280px) {

    .audiology-content {

        width: 800px;

    }

}