html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

.sidenav > a:hover {
	background-color: #333;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: rgb(255, 255, 255);
  }
  
  .topnav {
    display: inline-block;
    width: 100%;
    background-color: #333;
    box-shadow: 0px 5px 10px 6px rgb(26, 26, 26);
    font-family: 'Poppins', sans-serif;
  }
  
  .topnav a {
    float: right;
    display: block;
    color: #cca712 !important;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 22px;
    padding: 1%;
    font-family: 'Poppins', sans-serif;
    padding-right: 1.5%;
    margin-top: 0.5%;
  }
  
.oklar {
background-color: rgb(204, 167, 18, 0.5) !important;
}

  .arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {
      display: block;
      text-align: left;
      float:none;
      width:50%;
    }
    .topnav.responsive .dropbtn {
      display: block;
      text-align: left;
      float:none;
      padding: 0;
      margin: 0 0 0 4px;
    }
    .topnav.responsive .logo {
      width: 100%;
    }
  }
  .topnav>.logo{
    padding: none !important;
    margin-left: 5rem;
    margin-top: 0% !important;
    text-align: left;
  }
  @media screen and (max-width:600px){
    .top-nav{
    display: none;

  }
  .topnav>.logo{
    margin-left: 0rem !important;
    width: 345px !important;
  }
  }
  /**/
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 5;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

  .sidenav > a {
	  width:100%;
}
  
  .sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 22px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #cca712;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    font-size: 36px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

  /**/
  .text-about>h2{
      color: #cca712;
      text-align: center;
      margin-top: 8%;
      font-family: 'Poppins', sans-serif;
      margin-bottom: 3%;
      font-size: 28px;
      font-weight: 500;

  }
  .text-about>p{
      color: rgb(0, 0, 0);
      font-family: 'Poppins', sans-serif;
      font-size: 17px;
      
  }
  .contact>a{
      color: rgb(0, 0, 0);
      display: block;
      text-decoration: none;
      padding-left: 5px;
      padding: 1%;
      font-family: 'Poppins', sans-serif;
  }
  .contact{
      padding-left: 5px;
      margin:3% 30% 3% 30%;
      border: 1px solid #cca712;
      border-radius: 6px;
      padding: 2%;
      width:40%;
      font-size: 18px;
      font-family: 'Poppins', sans-serif;
      box-shadow: 0px 0px 25px 5px #888888;
      
  }
  .contact>a>i{
      padding-right: 5px;
      color: #cca712;
  }
  .maps{
      width: auto;
      box-shadow: 0px 0px 25px 5px #888888;
  }

.mapsFrame{
  width:100%;
}

  @media screen and (max-width:600px){
    .maps{
      position: relative;
      display: block;
      width: 100%;

    }
    .contact{
      position: relative;
      display: block;
      width: auto;
      margin: 5% 5%;
      box-shadow: none;
    }
  }
  .contact-text{
      color: #cca712;
      font-size: 25px;
      text-align: center;
      margin: 2%;
      padding: 2%;
      width: auto;
  }

.logo{
    float: left !important;
}
.top-nav{
    background-color: #cca712;
    height: 2.2rem;
    font-family: 'Poppins', sans-serif;
}
.top-nav>.mail{
    text-decoration: none;
    color:rgb(255, 255, 255);
    font-size: small;
    border-right:1px solid rgb(255, 255, 255);
    padding-right: 8px;
    margin-left: 5%;
    margin-top: 6px;
    font-family: 'Poppins', sans-serif;
}
.top-nav>.phone{
    text-decoration: none;
    color:rgb(255, 255, 255);
    font-size: small;
    margin-left: 1%;
    margin-top: 6px;
    font-family: 'Poppins', sans-serif;
}
.top-nav>.wp{
    text-decoration: none;
    color:rgb(255, 255, 255);
    font-size: small;
    margin-left: 1%;
    margin-right: 4%;
    float: right;
    padding-right: 8px;
    margin-top: 6px;
    font-family: 'Poppins', sans-serif;
}

.index-text>h2{
  text-align: center;
  font-size: 26px;
  color: #cca712;
  font-family: 'Poppins', sans-serif;
  margin-top: 3%;
  padding: 1%;
  margin-bottom: 1.5%;
}
.index-text>p{
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  margin-top: 0.5%;
}
.index-text{
  margin-left: 26%;
  
}
@media screen and (max-width:600px){
  .index-text{
    margin-left: 2% !important;
  }
}

/*-------------footer---------------*/
.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 30px 30px 20px 30px;
  color: #fff;
  background-color: #333;
  border-top: 1px solid rgba(51, 51, 51, 0.741);
  bottom: 0 !important;
  width:100%;
}

.footer > * {
  flex:  1 100%;
  width: 100% !important;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer__logo {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.5rem;
  width: 30%;
  
}

.footer__addr h2 {
  margin-top: 1.3em;
  font-size: 15px;
  font-weight: 400;
}

.nav__title {
  font-weight: 400;
  font-size: 18px;
  color: #cca712;

}

.footer address {
  font-style: normal;
  color: #fff;
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  max-width: max-content;
  background-color: rgb(33, 33, 33, 0.07);
  border-radius: 100px;
  color: #fff;
  line-height: 0;
  margin: 0.6em 0;
  font-size: 1rem;
  padding: 0 1.3em;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
  color: #fff;
}

.footer a {
  text-decoration: none;
}

.footer__nav {
  display: flex;
	flex-flow: row wrap;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 5%;
  color: #fff;
  font-size: small;
}

.nav__ul a {
  color: #fff;
  opacity: 0.9;
}

.nav__ul--extra {
  column-count: 2;
  column-gap: 1.25em;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  color: #999;
}
  
.legal__links {
  display: flex;
  align-items: center;
}

.heart {
  color: #2f2f2f;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 40.375em) {
  .footer__nav > * {
    flex: 1;
  }
  
  .nav__item--extra {
    flex-grow: 2;
  }
  
  .footer__addr {
    flex: 1 0px;
  }
  
  .footer__nav {
    flex: 2 0px;
  }
}
.project-text>h2{
  color: #cca712;
  font-size: 22px;
  text-align: center;
  font-family:'Poppins', sans-serif; 
  margin-top: 5%;
  margin-bottom: 3%;
}
.project-text>p{
  color: #333;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 5%;
}
.banner{
  background-color: #333;
  margin-top: 5%;
  margin-bottom: 4%;
}
.banner-png{
  width: 100%;
  margin: auto;
  padding: auto;
}
.banner-text{
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin: auto;
  font-family: 'Poppins', sans-serif;
  margin-top: 2%;
}
.slider-brand{
  background-color: #333;
  width: 100%;
  padding: 20px 0;
  margin-left: auto;
  margin-right: auto;
  height: 8rem;
}
.desktop{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-right: 1rem;
  padding-left:1rem;
}
.flip-card-inner {
    cursor:pointer;
}


.mobile{
  display: none;
  margin-left: auto;
  margin-right: auto;
}
.glider-prev{
  left:0 !important;
}
.glider-next{
  right: 0 !important;
}

@media screen and (max-width:600px){
  .mySlides{
    height: 25% !important;
    margin-top: 3%;
  }
  .slider-brand{
    height: 9rem !important;
    padding: 13px 0 !important;

  }
  .mobile{
    display:block;
  }
  .desktop{
    display: none;
  }
.flip-card{
width: 350px !important;
}
}
.flip-card{
  background-color: #333 !important;
  margin-bottom: 5px;
  }
.mySlides{
  width:100%;
  height:590px
}

.w3-display-container {
  background-color: #333;
  height: auto;
  width: 90%;
  margin-left: auto;
  margin-right: auto;

}

.container {
  margin-top: 3%;
}

  
  .modal-header {
    padding: 0 16px 20px 16px;
    background-color: #333;
    color: #cca712;
    font-weight:900 !important;
    margin-right: auto;
    margin-left: auto;
    width: 60%;
    margin-bottom: -1px;
	
  }
    .modalIcerik {
    position:relative; 
    width: 60%; 
    background-color: white;
    margin-right: auto;
    margin-left: auto;
  }
  @media screen and (max-width:600px){
	  .modal-header{
	  width: 100%;
	  }
	  .modalIcerik{
	  width: 100% !important;
	  padding: 0.01em 0 !important;
	  }
  }
  
  .projemodal {
    padding:25px !important;
  
  }
  
  .projeResim {
    cursor: pointer;
    margin-top: 5px;
    border:solid 1px grey;
    max-width:300px;
    max-height: 200px;
    width:auto;
    height:auto;
  }
    .mainImg {
      max-width:900px;
      max-height:671px;
      width:auto;
      height:auto;
      margin-bottom:25px;
  }
  

@media  screen and (max-width: 1920px) {
.mainImg {
    max-width:1000px;
    max-height: 771px;
    width:auto;
    height:auto;
    }
}  

@media  screen and (max-width: 1600px) {
.mainImg {
    max-width:  900px;
    max-height: 771px;
    width:auto;
    height:auto;
    }
        .modal-header{
	    width: 65%;
	  }
	  .modalIcerik{
	  width: 65% !important;
	  padding: 0.01em 0 !important;
	  }
}

@media  screen and (max-width: 1440px) {
.mainImg {
    max-width:  800px;
    max-height: 571px;
    width:auto;
    height:auto;
    }
        .modal-header{
	    width: 65%;
	  }
	  .modalIcerik{
	  width: 65% !important;
	  padding: 0.01em 0 !important;
	  }
}
  
@media  screen and (max-width: 1366px) {
       .mainImg {
    max-width:  800px;
    max-height: 571px;
    width:auto;
    height:auto;
    }
}
  
@media  screen and (max-width: 1280px) {
       .mainImg {
    max-width:700px;
    max-height:471px;
    width:auto;
    height:auto;
    }
        .projeResim {
    max-width:  310px;
    max-height: 155px;
    width:auto;
    height:auto;
    }
}

@media  screen and (max-width: 1080px) {
       .mainImg {
    max-width:650px;
    max-height:421px;
    width:auto;
    height:auto;
    }
}

@media  screen and (max-width: 900px) {
       .mainImg {
    max-width:550px;
    max-height:321px;
    width:auto;
    height:auto;
    }
            .modal-header{
	    width: 80%;
	  }
	  .modalIcerik{
	  width: 80% !important;
	  padding: 0.01em 0 !important;
	  }
	          .projeResim {
    max-width:  200px;
    max-height: 100px;
    width:auto;
    height:auto;
    }
    
}
 
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
       .mainImg {
    max-width:900px;
    max-height:671px;
    width:auto;
    height:auto;
    }    
}  
  @media screen and (max-width:600px){
    .projeResim {
    cursor: pointer;
    margin-top: 5px;
    border:solid 1px grey;
    max-width:140px;
    max-height: 70px;
    width:auto;
    height:auto;
    }
    .mainImg {
    max-width:347px;
    max-height: 250px;
    width:auto;
    height:auto;
    }
  }
  @media only screen and (min-device-width: 414px) and (max-device-width: 750px) {
    .mainImg {
    max-width:  426px;
    max-height: 303px;
    width:auto;
    height:auto;
    }
        .modal-header{
	    width: 100%;
	  }
	  .modalIcerik{
	  width: 100% !important;
	  padding: 0.01em 0 !important;
	  }
	  .container {
	      padding-left:0;
	      padding-right:0;
	  }
	  .projeModal {
	      padding: 14% 5px 5% 5px !important;
	  }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
    .mainImg {
    max-width:  387px;
    max-height: 274px;
    width:auto;
    height:auto;
    }
        .modal-header{
	    width: 100%;
	  }
	  .modalIcerik{
	  width: 100% !important;
	  padding: 0.01em 0 !important;
	  }
	  .container {
	      padding-left:0;
	      padding-right:0;
	  }
	  .projeModal {
	      padding:5px !important;
	  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
        .mainImg {
    max-width:  332px;
    max-height: 232px;
    width:auto;
    height:auto;
    }
        .modal-header{
	    width: 100%;
	  }
	  .modalIcerik{
	  width: 100% !important;
	  padding: 0.01em 0 !important;
	  }
	  .container {
	      padding-left:0;
	      padding-right:0;
	  }
	  .flip-card {
	      width:320px !important;
	  }
	  .projeModal {
	      padding:5px !important;
	  }
} 
  
  
  
  .ortala {
  margin-right:auto !important;
  margin-left: auto !important;
  text-align: center;
  }
  
  
  .projeResim:hover {
    opacity: 0.5;
  }

  

  .flip-card-front>p{
      color: #CCA712 !important;
      font-weight:bold;
  }
  .flip-card-front{
      background-color: #333 !important;
  }
  
  .flip-card-index {
      width:300px !important;
      height:320px !important;
  }
  @media  screen and (max-width: 600px) {
    .flip-card-index {
        width:160px !important;
        height:272px !important;
    }   
  }