/*FONTS*/
@font-face {
    font-family: Izmir-Bold;
    src: url('../fonts/Ahmet Altun - Izmir-Bold.otf');
}

@font-face {
    font-family: Izmir-BoldItalic;
    src: url('../fonts/Ahmet Altun - Izmir-BoldItalic.otf');
}

@font-face {
    font-family: Izmir-Light;
    src: url('../fonts/Ahmet Altun - Izmir-Light.otf');
}

@font-face {
    font-family: Izmir-LightItalic;
    src: url('../fonts/Ahmet Altun - Izmir-LightItalic.otf');
}

@font-face {
    font-family: Izmir-Medium;
    src: url('../fonts/Ahmet Altun - Izmir-Medium.otf');
}

@font-face {
    font-family: Izmir-RegularItalic;
    src: url('../fonts/Ahmet Altun - Izmir-RegularItalic.otf');
}

@font-face {
    font-family: Izmir-Semibold;
    src: url('../fonts/Ahmet Altun - Izmir-Semibold.otf');
}

* {
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
  }

/**/
#cache-attention {
    display: none;
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 15;
    bottom: 75px;
    background-color: rgb(3, 25, 43);
}

#cache-attention p {
    color: white;
}

#cache-attention button p {
    color: black;
}

/**/

.map-point-icon{
    position: relative;
    display: flex;
    height: 80px;
    width: 80px;
    /*background-color: red;
    background-image: url(/src/images/genel/animinium-ikon-light-arrow.gif);
    background-size: 80px, 80px;
    background-repeat: no-repeat;
    background-position: center;*/
    cursor: pointer;
    z-index: 80;
    transition: 0.5s;
    align-items: center;
    justify-content: center;
}
/*DİL AYARLARI*/
.english {
    display: none;
}

.turkce {
    display: block;
}

/*DİL AYARLARI*/

/*RENKLER*/
.bg-color-1 {
    background-color: rgb(230, 231, 232);
}

.bg-color-2 {
    background-color: rgb(199, 200, 202);
}

.bg-color-3 {
    background-color: rgb(188, 190, 192);
}

.bg-color-4 {
    background-color: rgba(220, 221, 222, 0.5);
}

.bg-color-5 {
    background-color: rgb(209, 211, 212);
}

.bg-color-6 {
    background-color: rgb(241, 242, 242);
}

.bg-color-7 {
    background-color: rgba(3, 25, 43, 0.75);
}

.font-color-1 {
    color: rgb(3, 25, 43);
}

.font-color-2 {
    color: rgb(230, 231, 232);
}

.font-color-2-with-shadow {
    color: rgb(230, 231, 232);
    text-shadow: 2px 2px black;
}

/*YAZI ETİKETLERİ*/
a,
h1,
h1,
h2,
h3,
h4,
h5{
    font-family: 'Izmir-Bold';
}

a,
p,
h1,
h2,
h3,
h4,
h5{
    color: rgb(3, 25, 43);
}

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

p {
    font-family: 'Izmir-Light';
}

section {
    width: 100%;
    /*min-height: 100vh;*/
    display: block;
}

hr {
    color: white;
    border: solid 1px white;
    margin-bottom: 50px;
}

/*NAVBAR ETİKETLERİ*/
#navbar {
    position: fixed;
    width: 100%;
    z-index: 90;
    
}

.navbar-container {
    width: 100%;
    height: 75px;
    border-bottom: solid 1px white;
}

.navbar-content {
    width: 90%;
    height: 50px;
    margin: auto;
    padding-top: 20px;
    display: flex;
}

.navbar-content li {
    list-style: none;
    display: inline-block;
}

.navbar-content-logo {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.navbar-content-logo h1 {
    cursor: pointer;
}

.navbar-content-menu {
    width: auto;
    height: auto;
    display: flex;
    margin-left: auto;
    margin-right: 5%;
    align-items: center;
}

.navbar-content-menu a {
    font-size: 1rem;
    margin: 10px;
    position: relative;
}

.navbar-content-menu a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: rgb(3, 25, 43);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.navbar-content-menu a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

#drop-down-main-menu ul {
    display: none;
    position: absolute;
    background-color: rgb(188, 190, 192);
    width: 220px;
    padding-top: -20px;
}

#drop-down-main-menu li {
    cursor: pointer;
}

#drop-down-main-menu:hover ul {
    display: block;
}

#drop-down-main-menu ul a {
    display: block;
    padding: 10px 0px;
}

.navbar-content-search {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.navbar-content-search img {
    width: 25px;
    height: 25px;
    margin: 10px;
}

#navbar-search-button {
    display: none;
}

#navbar-menu-button {
    display: none;
}

/**/

#navbar-language-button {
    display: inline-block;
}

#navbar-language-button ul {
    display: none;
    position: absolute;
    background-color: rgb(188, 190, 192);
    width: 100px;
    padding-top: -20px;
}

#navbar-language-button:hover ul {
    display: block;
    text-align: center;
    margin-left: -25px;
}

#navbar-language-button li {
    margin: auto;
    margin: 10px;
    cursor: pointer;
}

#navbar-language-button ul a {
    font-size: 1rem;
    padding: 10px;
    position: relative;
}

#navbar-language-button ul a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: rgb(3, 25, 43);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

#navbar-language-button ul a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/**/

#navbar-manu-button {
    display: none;
}


#navbar-mobil-cerceve {
    display: none;
    padding-top: 50px;
    width: 100%;
    min-height: calc(100vh - 75px);
    height: auto;
    margin: auto;
    z-index: 15;
}

.navbar-mobile-menu {
    width: 100%;
    height: 100%;
    display: block;
}

.navbar-mobile-menu ul {
    padding-bottom: 100px;
}

.navbar-mobile-menu-alt {
    display: block;
    text-align: center;
    background-color: rgb(230, 231, 232);
    padding: 20px;
    font-size: 1.2rem;
    border-bottom: solid 1px white;

}

.navbar-mobile-menu-alt a {
    display: block;
    text-align: center;
    font-size: 4rem;
}

.navbar-mobile-menu-alt:hover {
    background-color: rgb(188, 190, 192);
}

#zaman-yolculugu-alt-menu {
    display: none;
}

.navbar-mobile-menu-alt-ic {
    display: block;
    text-align: center;
    background-color: rgb(209, 211, 212);
    padding: 20px;
    font-size: 1rem;
}

.navbar-mobile-menu-alt-ic:hover {
    background-color: rgb(188, 190, 192);
}

.alt-menuler {
    display: none;
}

.alt-menuler li {
    font-size: 0.8rem;
    font-family: 'Izmir-Light';
    padding: 10px;
}

#right-navigation {
    /*width: 55px;*/
    /*height: 150px;*/
    position: fixed;
    bottom: 90px;
    right: 2%;
    display: flex;
    flex-direction: column;
    z-index: 15;
    visibility: hidden;
    opacity: 0%;
    transition: 0.5s;
}
#right-navigation img{
    opacity: 50%;
    transition: 0.5s;
}

#right-navigation img:hover{
    opacity: 100%;
}

/*NAVBAR ETİKETLERİ*/
/*BREADCRUMB ETİKETLERİ*/
.breadcrumb-container {
    width: 100%;
    height: auto;
    display: flex;
}

.breadcrumb-content {
    width: 90%;
    height: auto;
    margin: auto;
    line-height: 2rem;
}

.breadcrumb-content li {
    list-style: none;
    display: inline-block;
}

.breadcrumb-content li p {
    display: inline-block;
    font-family: 'Izmir-Bold';
}

.breadcrumb-content li p a {
    font-family: 'Izmir-LightItalic';
    font-size: 0.8rem;
}

/*BREADCRUMB ETİKETLERİ*/

/*SECTION COVER ETIKETLERI*/
#cover h1 {
    font-size: 3rem;
}

#cover p {
    font-size: 1rem;
    font-family: 'Izmir-LightItalic';
}


#cover {
    display: flex;
    width: 100%;
    min-height: calc(100svh - 75px);
}

.cover-container {
    width: 100%;
    min-height: calc(100svh - 75px);
    display: block;
    position: relative;
}

.cover-image {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0%;
    object-fit: cover;
    object-position: 50%;
    /*transform: translateY(-75px);*/
}

.cover-sub-container {
    position: relative;
    margin: auto;
    top: 18%;
    width: 90%;
    height: auto;
    display: flex;
}

.cover-title {
    width: 70%;
    height: 100%;
}

.cover-buttons {
    width: 30%;
    display: flex;
}

.cover-buttons ul {
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.cover-buttons li {
    display: inline-block;
    list-style: none;
    padding: 20px 20px;
    border: solid 1px rgb(3, 25, 43);
    cursor: pointer;
}

.cover-button {
    background-color: transparent;
    display: flex;
    margin: auto;
    padding: 20px 20px;
    border: solid 1px rgb(3, 25, 43);
}

/*SECTION COVER ETIKETLERI*/


/*SECTION UNREAL ETIKETLERİ*/
#unreal {
    height: 100vh;
    display: flex;
}

.unreal-container {
    width: 80%;
    min-height: 100vh;
    display: flex;
    margin: auto;
}

.unreal-content {
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.unreal-title-and-button {
    width: 50%;
    height: auto;
    margin: auto;
}

.unreal-warning-container {
    width: 65%;
    height: auto;
    margin: auto;
}

.unreal-warning-container h2 {
    margin-bottom: 10px;
}

.unreal-engine-control-button {
    display: none;
    width: 50%;
    height: auto;
    margin: auto;
    margin-top: 25px;
}

.unreal-engine-control-button ul {
    padding-top: 5px;
    padding-bottom: 50px;
}

.unreal-engine-control-button li {
    background-color: rgb(230, 231, 232);
    list-style: none;
    display: inline-block;
    margin: auto;
    padding: 15px;
    cursor: pointer;
    min-width: 250px;
}

.unreal-engine-control-button li p {
    font-family: 'Izmir-Bold';
    font-size: 1.3rem;
}

.unreal-content h1 {
    font-size: 6rem;
}

.unreal-container-mobile {
    display: none;
    width: 80%;
    margin: auto;
    height: auto;
}

#unreal-canvas {
    width: auto;
    height: 100%;
    display: none;
    margin: auto;
}

#unreal-start-button {
    background-image: url(/src/images/genel/play-button-dark.png);
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100px;
    cursor: pointer;
    margin: 50px;
    margin: auto;
}

/*SECTION UNREAL*/


/*ABOUT BUILD*/
#about-build {
    height: auto;
}

.about-build-container {
    width: 70%;
    height: auto;
    display: flex;
    margin: auto;
}

.about-build-content {
    padding-top: 50px;
    padding-bottom: 125px;
    width: 100%;
}

.about-build-container h1 {
    font-size: 3rem;
}

.about-build-image-container {
    width: 100%;
    height: auto;
    display: block;
}

.about-build-image-container img {
    display: flex;
    margin: auto;
    width: 49%;

}

.about-build-texts {
    width: 100%;
    height: auto;
}
.about-build-texts p{
    margin-top: 50px;
    margin-bottom: 50px;
}

.about-build-image-content {
    display: flex;
    margin: auto;
    height: auto;
    padding-bottom: 25px;
}

/*ABOUT BUILD*/

/*LOCATION INFO CARD*/

#location-info-card {
    display: none;
    z-index: 51;
    position: relative;
}

.location-info-container {
    width: 100%;
    height: 100vh;
    background-color: rgb(230, 231, 232);
    margin: auto;
    position: relative;
}

#location-info-mobile {
    display: none;
}

.location-info-title {
    width: 100%;
    height: auto;
    padding-top: 50px;
    display: flex;
    align-items: center;
}

.location-mobile-label-button{
    width: auto; height: 75px; display: flex; justify-content: flex-end; border: none;
}

.location-mobile-label-text{
    width: 100%; height: auto;
}

.location-info-sub-container {
    width: 90%;
    height: 60%;
    display: block;
    margin: auto;
    padding-top: 13%;
}

.location-info-content {
    width: 100%;
    height: 100%;
    display: flex;
    margin: auto;
}

.location-info-title h1 {
    font-family: 'Izmir-Bold';
    font-size: 3rem;
    color: rgb(3, 25, 43);
}

.location-info-title p {
    font-size: 1rem;
    font-family: 'Izmir-LightItalic';
}

.location-info-card-container {
    width: 80%;
    height: 100%;
    display: inline-block;
    background-color: rgb(230, 231, 232);
}

.location-info-card-content {
    width: 95%;
    height: 90%;
    display: flex;
    margin: auto;
}

.location-info-card-text {
    width: 60%;
    height: 90%;
    margin: auto;
    display: flex;
    color: white;
}

.location-info-card-image-container {
    width: 40%;
    height: 100%;
    display: block;
}

.location-info-card-image {
    width: 75%;
    height: 50%;
    display: flex;
    margin: auto;
}

.arrow-buttons {
    width: 10%;
    height: 100%;
    display: flex;
}

#button-left-arrow-location {
    width: 50%;
    height: 50%;
    display: flex;
    margin: auto;
}

#button-left-arrow-location:hover {
    width: 40%;
    height: 40%;
    display: flex;
    margin: auto;
    cursor: pointer;
}

#button-right-arrow-location {
    width: 50%;
    height: 50%;
    display: flex;
    margin: auto;
}

#button-right-arrow-location:hover {
    width: 40%;
    height: 40%;
    display: flex;
    margin: auto;
    cursor: pointer;
}

.location-info-page-count {
    width: 80%;
    height: auto;
    display: flex;
    margin: auto;
    color: rgb(3, 25, 43);
}

/*LOCATION INFO CARD*/
/*LOCATION INFO MOBILE*/

/*LOCATION INFO MOBILE*/


/*LOCATION 3D MODELS CARD*/
#models {
    display: none;
    z-index: 51;
    position: relative;
}

#models-container {
    width: 100%;
    height: 100vh;
    display: flex;
    margin: auto;
    position: relative;
    background-color: rgb(230, 231, 232);
}

.models-sub-container {
    width: 90%;
    height: 60%;
    display: flex;
    margin: auto;
}

.models-title {
    position: absolute;
    left: 5%;
    top: 15%;
}

.models-title h1 {
    font-family: 'Izmir-Bold';
    font-size: 3rem;
    color: rgb(3, 25, 43);
}

.models-title p {
    font-size: 1rem;
    font-family: 'Izmir-LightItalic';
}

#button-left-arrow-models {
    width: 50%;
    height: 50%;
    display: flex;
    margin: auto;
}

#button-left-arrow-models:hover {
    width: 40%;
    height: 40%;
    display: flex;
    margin: auto;
    cursor: pointer;
}

#button-right-arrow-models {
    width: 50%;
    height: 50%;
    display: flex;
    margin: auto;
}

#button-right-arrow-models:hover {
    width: 40%;
    height: 40%;
    display: flex;
    margin: auto;
    cursor: pointer;
}

.slide-container {
    max-width: 1520px;
    width: 100%;
    padding: 40px 0;
    position: absolute;
    display: none;
}

.slide-content {
    margin: 0 40px;
    overflow: hidden;
    height: 75%;
    width: 80%;
    display: flex;
    margin: auto;
}

.card {
    background-color: rgb(209, 211, 212);
    border-radius: 10px;
    display: flex;
    background: rgb(209, 211, 212);
}

.card-inside {
    width: 100%;
    height: auto;
    margin: auto;

}

.card-inside-image-container {
    width: 100%;
    height: auto;
    display: flex;

}

.card-inside-image-content {
    width: 100%;
    height: 100%;
    display: flex;
}

.card-inside-image-content img {
    width: 90%;
    height: 90%;
    display: flex;
    margin: auto;
    background: rgb(209, 211, 212);
    background: linear-gradient(180deg, rgba(209, 211, 212, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.card-inside-button {
    width: 100%;
    height: 20%;
    padding-top: 10%;
    display: flex;
}

.card-inside-button button {
    border: none;
    margin: auto;
    width: 90%;
    background-color: rgb(230, 231, 232);
    padding: 10px 0px;
}

.card-inside-button p {
    font-family: 'Izmir-Bold';
    color: rgb(3, 25, 43);
    cursor: pointer;
    font-size: 1rem;
    padding: 10px;
    position: relative;
}

.card-inside-button p:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 5px;
    bottom: 0;
    left: 0;
    background-color: rgb(3, 25, 43);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.card-inside-button p:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


.image-content,
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
}

.image-content {
    position: relative;
    row-gap: 5px;
    padding: 25px 0;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
}

.card-image {
    position: relative;
    height: 250px;
    width: 250px;
    background: #FFF;
    padding: 1px;
}

.card-image .card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border: 4px solid #4070F4;
}

.name {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.description {
    font-size: 14px;
    color: #707070;
    text-align: center;
    margin-bottom: 50px;
}

.button {
    border: none;
    font-size: 16px;
    color: #FFF;
    padding: 8px 16px;
    background-color: #4070F4;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    background: #265DF2;
}

.swiper-navBtn {
    color: white;
    transition: color 0.3s ease;
}

.swiper-navBtn:hover {
    color: rgb(87, 102, 114);
}

.swiper-navBtn::before,
.swiper-navBtn::after {
    font-size: 35px;
}

.swiper-button-next {
    right: 5%;
}

.swiper-button-prev {
    left: 5%;
}

.swiper-pagination-bullet {
    background-color: rgb(87, 102, 114);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: white;
}

#kapat-button-container {
    width: 55px;
    height: auto;
    position: fixed;
    right: 3%;
    top: 150px;
    z-index: 15;
    display: none;
}

#kapat-button {
    width: 50px;
    height: 50px;
}

#info-side {
    display: flex;
    flex-direction: row;
    width: calc(20vw + 50px);
    height: calc(100vh - 150px);
    margin-top: 75px;
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    z-index: 15;
    background-color: transparent;
    transform: translateX(calc(20vw + 50px));
    transition: 0.2s;
}

#info-side-close{
    width: 40px; 
    height: 40px; 
    border-radius: 25px; 
    cursor: pointer; 
    /*border: solid 1px rgb(3,25,43); */
    background-color: rgba(241, 242, 242, 0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
#info-side-close:hover img{
    width: 40%;
}
.info-side-left{
    display: flex; 
    width: 50px; 
    height: 100%; 
    align-items: center; 
    justify-content: center;
}
#info-side-right{
    display: flex; 
    width: 20vw; 
    height: 100%; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(241, 242, 242, 0.85); 
    overflow-x: hidden;
    
}

#ayrintili-bilgi {
    color: rgb(3, 25, 43);
    font-size: 1rem;
    font-family: 'Izmir-Bold';
    width: 70%;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 250px;
    cursor: pointer;
    background-color: rgb(230, 231, 232);
    border: none;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 100px;
}

#info-side-image{
    display: flex; 
    width: 90%; 
    height: 25vh;
    justify-content: center;
}

#info-side-image img {
    width: 100%; height: 100%; object-fit: contain;
}

#info-side-label{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5vh;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Izmir-Bold';
    font-size: 1.5rem;
    text-align: center;
    overflow-x: hidden;
}

#info-side-desc {
    padding-top: 25px;
    width: 90%;
    height: 25vh;
    overflow-x: hidden;
    text-align: center;
    font-family: 'Izmir-Light';
    margin-left: auto;
    margin-right: auto;
}

#info-side-button{
    padding-left: 5px;
    padding-right: 5px;
    height: 100%;
    width: 100%;
    margin: auto;
    background-color: rgb(230, 231, 232); 
    border: solid 1px rgb(3,25,43); 
    cursor: pointer;
    transition: 0.2s;
}
#info-side-button:hover{
    font-size: medium;
}

#info-side-btn-container{
    width: 90%; height: 4vh; display: flex; justify-content: center;
}


/*LOCATION 3D MODELS CARD*/

/*FOOTER BUILDS*/


/*FOOTER BUILDS*/


/*FOOTER*/
#footer {
    display: block;
}

#footer-ust {
    width: 100%;
    height: auto;
    background-color: rgb(199, 200, 202);
    display: flex;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer-ust-cerceve {
    width: 90%;
    height: auto;
    display: flex;
    margin: auto;
}

.footer-ust-kolon-1 {
    height: 100%;
    width: 30%;
    display: inline-block;
}

.footer-ust-kolon-1 a {
    font-family: 'Izmir-LightItalic';
}

.footer-ust-kolon-2 {
    height: 100%;
    width: 20%;
    display: inline-block;
    margin-left: auto;
}

.footer-ust-kolon-3 {
    height: 100%;
    width: 20%;
    display: inline-block;
    margin-left: auto;
    background-color: rgb(188, 190, 192);
    padding-top: 75px;
    padding-bottom: 75px;
    max-width: 300px;
}

#footer-alt {
    width: 100%;
    height: 75px;
    background-color: rgb(3, 25, 43);
    margin: auto;
    display: flex;
}

.footer-alt-cerceve {
    width: 90%;
    height: auto;
    display: flex;
    margin: auto;
}

.footer-alt-kolon {
    width: 50%;
    height: 100%;
    display: flex;
    color: white;
    margin: auto;
}

.footer-alt-kolon-2 {
    display: flex;
    flex-direction: row-reverse;
}

.footer-logo-1 {
    width: 92px;
    height: 35px;
}

.footer-logo-2 {
    width: 113px;
    height: 35px;
}

.p-footer-alt {
    font-size: 0.8rem;
    margin-top: auto;
    margin-bottom: auto;
}

.a-img-footer {
    display: inline-block;
    margin-left: 5%;
    margin-top: auto;
    margin-bottom: auto;
}

.alt-nav-button:hover {
    background-color: rgb(230, 231, 232);
    cursor: pointer;
}

.alt-nav-button p {
    cursor: pointer;
}

.footer-kolon-2 {
    height: 100%;
    width: 50%;
    display: flex;
    background-color: rgb(188, 190, 192);
}

.alt-nav-button-container {
    height: 100%;
    width: 50%;
    display: flex;
    padding-left: 5px;
}

.footer-column-2 {
    display: flex;
    width: 50%;
}

.footer-izmir-genel-harita {
    display: inline-block;
    width: 50px;
    height: 50px;
}

.footer-right-c2-logo {
    height: 100%;
    width: auto;
    display: flex;
    padding-left: 100px;
    padding-right: 10px;
}

/**/
/**/
/**/
/*ANA SAYFA*/
#intro {
    background-color: rgb(230, 231, 232); min-height: 100vh;
}

.intro-container {
    width: 100%;
    height: auto;
    display: flex;
}

.intro-background-image {
    width: 100%;
    height: auto;
}

.intro-background-image img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
}

.intro-text {
    position: absolute;
    width: 50%;
    height: auto;
    left: 5%;
    top: 15%;
    z-index: 1;
}

.intro-text h1 {
    font-size: 2.5rem;
}

.intro-text p {
    padding-top: 25px;
}

/*2. BÖLÜM*/

.second-area-container {
    width: 100%;
    min-height: 100vh;
    margin: auto;
    background-image: url(/src/images/genel/izmir-merkez-harita.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.second-area-white-filter {
    width: 100%;
    min-height: 100vh;
    margin: auto;
    display: flex;
    background-color: rgba(230, 231, 232, 0.5);
}

.second-area-content {
    width: 50%;
    height: auto;
    margin: auto;
    text-align: center;
}

.second-area-content h1 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.second-area-content p {
    margin-bottom: 25px;
}

.second-area-image-content {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}

.second-area-image-content img {
    width: auto;
    max-height: 70px;
    padding: 20px;
    margin: auto;
}

/*--------*/

#map {
    width: 100%;
    height: 100vh;
    margin-top: 0px;
    position: absolute;
    display: flex;
}

.map-area-container {
    position: relative;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    background-color: rgb(230, 231, 232);
    overflow-x: hidden;
}

.map-label{
    position: absolute; width: auto; height: auto; left: 5%; top: 75vh; display: flex; flex-direction: row;
}
.map-label h1{
    font-size: 6rem; color: rgb(230, 231, 232);  text-shadow: 2px 2px black;
}
.map-label h3{
    color: rgb(230, 231, 232); font-family: 'Izmir-LightItalic';
}



#map-touch-deactive {
    display: none;
}

#map-touch-active {
    display: none;
}

.map-area-left {
    display: none;
    min-width: 350px;
    height: auto;
    position: absolute;
    margin-top: 8%;
    left: 5%;
    z-index: 10;
    
}

.map-area-left-top {
    width: 100%;
    display: flex;
}

.map-area-left-top img {
    width: 25px;
    height: 25px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px
}

.map-area-left-top p {
    margin-top: auto;
    margin-bottom: auto;
}

.map-area-left-button {
    width: auto;
    height: auto;
    display: flex;
    padding: 10px;
    border: solid 1px rgb(3, 25, 43);
    margin-top: 10px;
    cursor: pointer;
}

.map-area-left-button-2 {
    width: auto;
    height: auto;
    display: flex;
    padding: 10px;
    background-color: rgb(188, 190, 192);
    border: solid 1px rgb(3, 25, 43);
    margin-top: 10px;
    cursor: pointer;
}

.map-area-left-button-2 p {
    margin: auto;
    cursor: pointer;
}

.map-area-left-button p {
    margin: auto;
    cursor: pointer;
}

.map-area-right {
    position: absolute;
    width: 30%;
    height: auto;
    margin-top: 15%;
    right: 5%;
}

.map-area-right h1 {
    font-size: 2.5rem;
}

#map-area-blocker {
    width: 100%;
    min-height: 100vh;
    display: none;
    z-index: 10;
}

.map-point {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    margin: auto;
    color: white;
    margin-top: 0;
    background-image: url('/src/images/genel/pointer-icon-light.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.5rem;
    cursor: pointer;
}

.map-point-label {
    font-family: 'Izmir-Medium';
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: 0s;
}


.footer-top {
    width: 100%;
    height: auto;
    background-color: rgb(199, 200, 202);
    display: block;
    padding-top: 25px;
    padding-bottom: 25px;
}

#footer-hide {
    display: none;
    
}

.footer-top-hide {
    width: 100%;
    height: auto;
    background-color: rgb(199, 200, 202);
    display: block;
    padding-top: 25px;
    padding-bottom: 25px;
    position: fixed;
    bottom: 0%;
    padding-bottom: 125px;
    z-index: 89;
}

.footer-top-container {
    width: 90%;
    display: flex;
    margin: auto;
}

.footer-top-container h2 {
    margin-bottom: 20px;
}

.footer-top-column-izka {
    width: 30%;
    height: auto;
}

.footer-top-column-zaman-yolculugu {
    width: 20%;
    height: auto;
}

.footer-top-column-diger-linkler {
    width: 20%;
    height: auto;
}

.footer-top-column-mail-box {
    width: 20%;
    display: flex;
    height: auto;
    margin-left: auto;
}

.footer-top-column-mail-box-container {
    width: 90%;
    height: 90%;
    margin: auto;
    display: flex;
    background-color: rgb(188, 190, 192);
}

.footer-top-column-mail-box-content {
    width: 80%;
    height: auto;
    margin: auto;
}

.footer-top-column-mail-box-content p {
    margin-bottom: 5%;
}

.footer-top-list * {
    list-style: none;
    font-family: 'Izmir-Light';
}






.footer-bottom {
    width: 100%;
    height: 100px;
    background-color: rgb(188, 190, 192);
}

.footer-bottom p {
    font-size: 0.8rem;
}

.footer-bottom-container {
    width: 90%;
    height: 100px;
    display: flex;
    margin: auto;
}

.footer-bottom-column {
    width: 50%;
    display: flex;
}

.footer-bottom-column-left {
    display: flex;
}

.footer-bottom-column-left img {
    height: 40px;
    cursor: pointer;
}

.footer-bottom-column-left * {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 25px;
}

.footer-bottom-column-left a {
    margin-right: 0px;
}

.footer-bottom-column-right {
    display: flex;
    margin-left: auto;
}

.footer-bottom-column-right img {
    height: 40px;
    margin-left: 25px;
    cursor: pointer;
}

.footer-bottom-column-right * {
    margin-top: auto;
    margin-bottom: auto;


}



#parallax{
    position: absolute;
        width: 100%;
        height: 100vh;
        background-image: url("/src/images/genel/izmir-merkez-harita.png");
        background-repeat: no-repeat;
        background-size: cover;
        /*background-position: center;*/
        background-position: 45%;
}
.points {
    position: absolute;
    width: 100%;
    height: 100vh;
    opacity: 1;
}

.map-point-izmir-cerceve {
    position: absolute;
    display: flex;
}

.map-point-izmir{
    background-image: url("/src/images/genel/pointer-icon-dark.gif");
    background-repeat: no-repeat;
    background-size: 35px 35px;
    width: 50px;
    height: 50px;
    background-position: center;
    position: relative;
    cursor: pointer;
}

#kordon{
    top: 55%;
    left: 39.5%;
}
#kemer-alti{
    top: 62%;
    left: 31%;
}
#smyrna{
    top: 67%;
    left: 42%;
}
#eski-smyrna{
    top: 31%;
    left: 50%;
}
#yesilova{
    top: 43%;
    left: 56.5%;
}

.other-page-label-container{
    width: 100%; height: auto; min-height: 50vh; display: flex;
}
.other-page-label-content{
    display: flex; width: 100%; justify-content: center; align-items: flex-end;
}
.other-page-label-content h1{
    color: rgb(3,25,43); padding: 5vh; font-size: 8rem;
}
.other-page-intro-text-container{
    width: 100%; height: auto; min-height: 50vh; background-color: rgb(241, 242, 243); display: flex; padding-top: 25px; padding-bottom: 25px;
}
.other-page-intro-text-content{
    display: flex; margin:auto; flex-direction: column; width: 50%; text-align: center;
}
.other-page-about-project-row{
    display: flex; width: 100%; min-height: auto; height: auto;
}
.other-page-about-project-row-content{
    display: flex; flex-direction: column; width: 50%; height: auto; justify-content: flex-start; align-items: center;
}
.other-page-about-project-row-content img{
    width: 25%;
}
.other-page-about-project-row-content div{
    height: auto; width: 75%;
}
.other-page-about-project-outro-text{
    display: flex; width: 80%; height: auto; margin:auto ; margin-top: 100px; text-align: center;
}



.progressbarCityPlan{
    position: absolute;
    width: 100%;
    height: 50vh;
    background-color: rgb(230, 231, 232);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 50;
}
#progressbarValueCityPlan{
    width: 30%;
    margin-top: 0.5%;
    height: 2px;
}

.progress-bar-container{
    position: absolute;
    width: 100%;
    height: calc(100vh - 150px);
    margin-top: 75px;
    background-color: rgb(230, 231, 232);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 50;
}
.progress-bar-container p{
    font-family: 'Izmir-Bold';
}
#progress-bar{
    width: 30%;
    margin-top: 0.5%;
    height: 2px;
}

/*PROGRESS COLOR*/
progress::-moz-progress-bar { background: white; }
progress::-webkit-progress-value { background: white; }
progress { color: white; }
progress{
    -webkit-appearance: none;
    appearance: none;
 
 }
 progress::-webkit-progress-value{
     background:white;
 }
  

/*--------*/
/*2. BÖLÜM*/

/*--------------------------------------------------BUTONLAR*/


.btn-close{
    margin: auto;
    margin-right: 10px; 
    outline:1px solid rgb(3, 25, 43); outline-offset:5px; 
    border-radius: 50%; 
    background-color: rgb(220, 221, 222);
    align-items: center; 
    justify-content:center; 
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 30px; 
    height: 30px; 
    color: rgb(3,25,43); 
    font-size: 0.8rem;
    transition: 0.5s;
    cursor: pointer;
    font-family: 'Izmir-Bold';
}

.btn-close:hover{
    outline:1px solid rgb(3, 25, 43); outline-offset: 1px;
    background-color: rgb(220, 221, 222); 
    color: rgb(3,25,43); 
}


/*--------------------------------------------------BUTONLAR*/


/**/
/**/
/**/
/*ANA SAYFA*/


/**/

.izmir-central-container{
    width: 40%; height: auto; position: absolute; background-color: rgba(220,221,222,0.5); top: 25%; left: 5%; display: block;
}


@media only screen and (min-device-width : 1920px){


    #kapat {
        
        background-color: rgb(230, 231, 232);
        left: calc(100% - 660px);
        
    }
    .navbar-content-logo h1 {
        font-size: 1.5rem;
    }

    #navbar-menu-button {
        display: none;
    }

    .navbar-mobil-menu {
        padding-top: 50px;
    }

    #cover h1 {
        font-size: 2.2rem;
    }

    #cover p {
        font-size: 1rem;
    }

    .cover-buttons {
        min-width: 150px;
        width: 50%;
        height: auto;
    }

    .cover-buttons ul {
        margin-left: auto;
    }

    .cover-buttons li {
        padding: 10px 10px;
        min-width: 150px;
        text-align: center;
        margin-bottom: 5px;
    }

    #unreal-mobile {
        display: none;
    }

    #unreal-desk {
        display: flex;
    }

    .unreal-content {
        padding-top: 0px;
    }

    #unreal-start-button {
        margin-top: 20px;
        margin-bottom: 50px;
    }

    #unreal {
        height: 100vh;
    }


    .footer-column-2 {
        width: auto;
        margin: auto;
    }

    .footer-right-c2-logo {
        padding-left: 0px;
    }

    .alt-nav-button-container {
        width: auto;
    }

    .alt-nav-button p {
        font-size: 0.8rem;
    }


}

@media only screen and (min-device-width : 580px) and (max-device-width : 1000px) {
    .izmir-central-container{
        display: none;
    }
    #kordon{
        top: 57%;
        left: 24%;
    }
    #kemer-alti{
        top: 62%;
        left: 18%;
    }
    #smyrna{
        top: 67%;
        left: 40%;
    }
    #eski-smyrna{
        top: 32%;
        left: 62%;
    }
    #yesilova{
        top: 45%;
        left: 78%;
    }
    .map-point-izmir-cerceve h2{
        font-size: 2rem;
    }

    .navbar-content-logo {
        margin-left: 0px;
        width: 90%;
    }

    .navbar-content-logo h1 {
        font-size: 1rem;
    }

    .navbar-content-menu {
        display: none;
    }

    .navbar-content-search {
        margin: auto;
        margin-right: 0px;
    }

    #navbar-search-button {
        display: none;
    }

    #navbar-language-button {
        display: none;
    }

    #navbar-menu-button {
        display: flex;
        margin: auto;
    }

    .navbar-mobil-menu {
        padding-top: 50px;
    }

    #cover h1 {
        font-size: 2rem;
    }

    #cover p {
        font-size: 1rem;
    }

    .cover-buttons li {
        padding: 10px 10px;
        min-width: 150px;
        text-align: center;
        margin-bottom: 5px;
    }

    .unreal-title-and-button {
        width: 100%;
    }

    .unreal-content h1 {
        font-size: 5rem;
    }

    .unreal-warning-container h2 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #unreal {
        height: auto;
        padding-bottom: 50px;
    }

    .about-build-container {
        width: 90%;
    }

    .footer-column-2 {
        display: none;
    }

    .alt-nav-button-container {
        width: auto;
        margin: auto;
    }

    .footer-izmir-genel-harita {
        width: 40px;
        height: 40px;
        margin-top: auto;
        margin-bottom: auto;
    }

}


@media only screen and (min-device-width : 320px) and (max-device-width : 580px) {

    .izmir-central-container{
        display: none;
    }

    #kordon{
        top: 57%;
        left: 24%;
    }
    #kemer-alti{
        top: 62%;
        left: 18%;
    }
    #smyrna{
        top: 67%;
        left: 40%;
    }
    #eski-smyrna{
        top: 32%;
        left: 62%;
    }
    #yesilova{
        top: 45%;
        left: 78%;
    }
    .map-point-izmir-cerceve h2{
        font-size: 1rem;
    }
    .map-point-izmir-cerceve h4{
        font-size: 0.5rem;
    }

    .progress-bar-container{
        margin-top: 50px;
        min-height: calc(100vh - 125px);
    }

    .navbar-container {
        height: 50px;
    }

    .navbar-content {
        padding-top: 0px;
    }

    .navbar-content-menu {
        display: none;
    }

    #navbar-search-button {
        display: none;
    }

    #navbar-language-button {
        display: none;
    }

    #navbar-menu-button {
        display: block;
    }

    .navbar-content-logo h1 {
        font-size: 1.3rem;
    }

    .location-info-title h1 {
        font-size: 1.5rem;
    }

    .location-info-title {
        top: 10%;
    }

    .navbar-content-search {
        margin-left: auto;
    }

    .breadcrumb-container {
        display: none;
    }

    #cover h1 {
        font-size: 1.5rem;
    }

    #cover p {
        font-size: 0.8rem;
    }

    .cover-title {
        width: 100%;
    }

    .cover-buttons {
        display: none;
    }

    .cover-image {
        width: 100%;
        height: 40%;
        object-position: center;
    }

    #right-navigation {
        right: 5%;
        /*top: 65%;*/
        height: auto;
    }
    #right-navigation img{
        opacity: 100%;
        transition: 0.5s;
    }
    
    #right-navigation img:hover{
        opacity: 100%;
    }
    

    #right-navigation img {
        width: 40px;
        height: 40px;
    }

    #unreal-desk {
        display: none;
    }

    #unreal-mobile {
        display: flex;
    }

    .unreal-title-and-button {
        width: 100%;
    }

    #unreal {
        height: auto;
        padding-bottom: 50px;
    }

    .unreal-content h1 {
        font-size: 2rem;
    }

    .unreal-content h2 {
        font-size: 1rem;
        margin-top: 10px;
    }

    #about-build {
        padding-bottom: 50px;
    }

    .about-build-container {
        width: 90%;
    }

    .about-build-container h1 {
        font-size: 1.5rem;
        text-align: left;
        padding-bottom: 10px;
    }

    .about-build-container p {
        font-size: 0.8rem;
        text-align: justify;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .about-build-container hr {
        background-color: white;
        margin-bottom: 15px;
    }

    .about-build-image-container img {
        display: flex;
        margin: auto;
        padding-top: 15px;
        width: 100%;
    }

    .about-build-image-content {
        display: block;
        margin: auto;
        width: 100%;
        padding-bottom: 15px;
    }

    .footer-column-2 {
        display: none;
    }

    .alt-nav-button p {
        font-size: 0.5rem;
    }

    .alt-nav-button {
        width: auto;
    }

    .alt-nav-button img {
        width: 25px;
        height: 25px;
        margin: auto;
    }

    .alt-nav-button p {
        text-align: center;
    }

    .alt-nav-button-container {
        width: auto;
        margin: auto;
    }

    #kapat-button {
        width: 30px;
        height: 30px;
        margin: auto;
    }

    #kapat-button-container {
        right: 5%;
        top: 15%;
    }

    .arrow-buttons {
        width: 5%;
        height: 50%;
        margin: auto;
    }

    .models-sub-container {
        padding-top: 15%;
    }

    .models-title h1 {
        font-size: 2rem;
    }

    .models-title p {
        font-size: 0.8rem;
    }

    .card {
        background-color: rgb(209, 211, 212);
        border-radius: 10px;
        display: flex;
        background: rgb(209, 211, 212);
    }

    .card-inside {
        width: 100%;
        height: auto;
        margin: auto;

    }

    .card-inside-image-container {
        width: 100%;
        height: auto;
        display: flex;

    }

    .card-inside-image-content {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .card-inside-image-content img {
        width: 90%;
        height: 90%;
        display: flex;
        margin: auto;
        background: rgb(209, 211, 212);
        background: linear-gradient(180deg, rgba(209, 211, 212, 1) 0%, rgba(255, 255, 255, 1) 100%);
    }

    .card-inside-button {
        width: 100%;
        height: 20%;
        display: flex;
    }

    .card-inside-button button {
        border: none;
        margin: auto;
        width: 90%;
        background-color: rgb(230, 231, 232);

    }

    .card-inside-button p {
        font-family: 'Izmir-Bold';
        color: rgb(3, 25, 43);
        cursor: pointer;
        font-size: 1rem;
        padding: 10px;
        position: relative;
    }

    .slide-content {
        height: 90%;
    }

    .card-inside {
        height: auto;
    }

    .card-inside-button {
        height: 100%;
        margin: auto;
    }

    .card-inside-button p {
        font-size: 0.5rem;
        padding: 5px;
    }

    /*FOOTER MOBILE*/
    .footer-top-container {
        display: block;
    }

    .footer-top-column-izka {
        width: 90%;
    }

    .footer-top-column-zaman-yolculugu {
        margin-top: 25px;
        width: 90%;
    }

    .footer-top-column-diger-linkler {
        margin-top: 25px;
        width: 90%;
    }

    .footer-top-column-mail-box {
        margin-top: 25px;
        width: 100%;
    }

    .footer-top-column-mail-box-container {
        padding: 25px;
    }

    .footer-bottom-container {
        display: block;
    }

    .footer-bottom-column {
        display: block;
        width: 100%;
    }

    .footer-bottom {
        height: auto;
    }

    .footer-bottom-container {
        height: auto;
        display: block;
    }

    .footer-bottom-column p {
        font-size: 0.5rem;
    }

    .footer-bottom-column img {
        height: 30px;
        margin-left: 0px;
    }

    .footer-bottom-column-left {
        margin: auto;
        padding-top: 10px;
    }

    .footer-bottom-column-left * {
        margin: auto;
    }

    .footer-bottom-column-left a {
        margin-left: 0px;
        margin: auto;
    }

    .footer-bottom-column-right {
        padding-top: 10px;
        width: auto;
        margin: auto;
    }

    .footer-bottom-column-right * {
        margin: auto;
    }

    .footer-bottom-column-right img {
        margin-left: 0px;
    }

    /*FOOTER MOBILE*/

    /*HARITA MOBILE*/

    #info-side-right{
        width: 100%;
        padding-top: 0px;
    }

    .map-area-right {
        display: none;
    }

    .map-area-left {
        min-width: 0px;
        width: 90%;
        margin-top: 15%;
        margin-left: auto;
        margin-right: auto;
    }

    #map-touch-active {
        display: flex;
    }
    #map-touch-deactive {
        display: none;
    }

    .other-page-label-content h1{
        font-size: 5vh; 
    }
    .other-page-intro-text-content{
        width: 90%;
    }
    .other-page-about-project-row{
        flex-direction: column; align-items: center;
    }
    .other-page-about-project-row-content{
        width: 90%;
    }
    .other-page-about-project-row-content img{
        width: 50%;
    }
    .other-page-about-project-row-content div{
         width: 90%;
    }
    .other-page-about-project-outro-text{
        width: 90%; margin-top: 150px; 
    }

    #info-side{
        margin-top: 50px;
        width: 100vw;
        background-color: rgba(241, 242, 242, 0.8);
        transform: translateX(100vw);
        height: calc(100vh - 125px);
    }
    #kapat{
        display: none;
    }

    #map {
        height: 100vh;
    }

    .map-label{
    }
    .map-label h1{
        font-size: 3rem; color: rgb(230, 231, 232);
    }
    .map-label h3{
        font-size: 1rem; color: rgb(230, 231, 232); font-family: 'Izmir-Light'; text-shadow: 2px 2px black;
    }

    /*HARITA MOBILE*/

    /*SECOND AREA MOBILE*/
    .second-area-content {
        width: 90%;
    }

    .second-area-content h1 {
        font-size: 1.5rem;
        padding-top: 25px;
        margin-bottom: 25px;
    }

    /*SECOND AREA MOBILE*/

    /*INTRO MOBILE*/
    .intro-text {
        width: 90%;
    }

    .intro-text h1 {
        font-size: 1.5rem;
    }

    /*INTRO MOBILE*/
}