* {

   box-sizing: border-box;

   /* border:1px solid black; */

   font-family: Roboto,Arial;

   

}



body {

   /* padding: 50px;

    font-family: sans-serif;

    background: linear-gradient(to right, #F93D66, #6D47D9); */

   margin: 0;

}



h1,

h2,

h3,

h4,

h5,

h6 {

   margin: 0 0 5px 0;

}



p {

   margin: 0 0 20px 0;

}



a {

   text-decoration: none;

   color: black;

}



.close {

   background: none;

   color: white;

   border: 0;

}



.slide img {

   grid-column: 1/ -1;



   width: 100%;

}



.container {

   /*     padding: 10px;*/

   display: grid;

}



.slide p {

   font-family: Roboto,Arial;

   font-size: 0.8em;

   letter-spacing: .025em;

   /* font-weight: bold; 

   text-transform: uppercase;*/

   padding: 0 .875em;

   height: 100%;

   display: flex;

   align-items: center;

   justify-content: space-between;

   background: rgb(180, 210, 52);

}



.menu {

   background-color: rgb(220, 220, 220);

   display: grid;

   grid-template-columns: 3fr 1fr;

   /* border: 2px solid; */

   position: fixed;

   z-index: 100;

   width: 100%;

   font-family: Roboto,Arial;

   text-align-last: center;

   



   

}



.links {

   

   display: grid;

   grid-template-columns: repeat(4, auto);

   font-size: 20px;

   font-weight: 400;

   padding: 10px;

   padding-top: 120px;

   background-color: rgb(180, 210, 52);

   /* align-content: center; */

   /* height: 100% */

   /* align-items: center; */

}

.links a {

   font-family: Quicksand;

}



.menu-text {

   font-family: Quicksand;

   font-size: 0.9rem;

}



.border {

   width: 60px;

   height: 60px;

   border: solid 2px;

   border-radius: 50%;

   display: grid;

   justify-items: center;

   align-items: center;

   background-color: white;

}

 



.menu-item {

   /* border: 2px solid; */

   margin-bottom: 0;

   display: grid;

   justify-items: center;

  

}



#social {

   display: grid;

   grid-template-columns: 30px 30px 30px 30px;

   align-content: center;

   grid-gap: 1em;

   justify-content: end;

   padding-right: 20px;

}



#kaset {

   display: grid;

   grid-template-columns: 1fr;

   background: white;

}

#kaset iframe {

   height: 100vh;

   border: 0px;

}



.slide__overlay button {

   background: none;

   border: 2px solid white;

   color: white;

}



.slide:hover .slide__overlay {

   transform: translateY(0);

}

.overlay {

   position: fixed;

   background: rgba(100, 100, 100, 0.7);

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   display: none;

   z-index: 2;

}



.overlay.open {

   display: grid;

   align-items: center;

   justify-items: center;

}



.overlay figure {

   background: black;

   width: 700px;

   padding: 20px;

}



.overlay iframe {

   width: 100%;

   height: 100%;

   border: 0px;

}



.overlay-inner {

   background: black;

   width: 700px;

   padding: 20px;

   height: 500px;

}



#poi-info-window {

   width: 200px;

   color: #333;

   font-family: Roboto,Arial;

   font-size: 13px;

   background-color: white;

}



#poi-info-window a{

   color: #427fed;

} 



#poi-info-window h3{

   color: rgb(180, 210, 52);

}



.address-contact-methods a{

   display: table;

   padding: .5rem 1rem;

   background: rgb(180, 210, 52);

   font-size: 1.4rem;

   font-weight: 700;

}



.address-contact-methods {



   display: grid;

   justify-items: right;

   text-align: right;

}



.address-company-name {

   font-weight: 700;

}

.site-footer {

   background: #333;

    color: #fff;

    padding: 3rem 2rem;

    position: relative;

}



.social-logo {

   width: 30px;

}



.menu-logo {

 width: 30px;

}



#logo img{

   height: 100px;

}







#workssection {

   background-color: rgb(220, 220, 220);

   padding: 30px;

   padding-top: 80px;

}

#workssection h2{

   font-size: 1.5rem;

}

  

   #works {

      

      

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(450px, 450px));

      /* grid-template-columns: 320px 320px 320px; */

      grid-gap: 20px;

      align-items: center;

      justify-items: center;

      justify-content: center;



   }

   #map {

      width: 100%;

      height: 300px;

      padding: 30px;

   }



   



    #rtuk{

      padding: 30px;

      display: grid;

      grid-template-columns: 200px 1fr;

      grid-gap: 20px;

      align-items: center;

      justify-items: center;

   }



   #aboutus{

      padding: 30px;

      background: rgb(220, 220, 220);



   }



   #aboutus h2{

      font-size: 1.5rem;

      font-weight: 800;



   }



   #meettheteam{

      background-color: rgb(220, 220, 220);

      padding: 30px;

      font-weight: 800;

   }



   #meettheteam h2{

      font-size: 1.5rem;

      font-weight: 800;

      padding-bottom: 20px;

      text-transform: uppercase;

   }

   #contact{

      padding: 20px;

      background: rgb(220, 220, 220);

      display: grid;

      grid-template-columns: 1fr;

      grid-gap: 20px;

      align-items: center;

      justify-items: center;

   }

.team img {

   width: 100%;

   cursor: pointer;

}



 /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

 .team {

   background-color: transparent;

   width: 400px;

   height: 540px;

   /* border: 1px solid #f1f1f1; */

   perspective: 1000px; /* Remove this if you don't want the 3D effect */

   

 }



/* .team {

   

      position: relative;

      text-align: center;

      color: white;

    

} */



 /* This container is needed to position the front and back side */

 .team-inner {

   position: relative;

   /* width: 100%; */

   /* height: 100%; */

   text-align: center;

   transition: transform 0.8s;

   transform-style: preserve-3d;

 }



.team.flipped .team-inner {

   transform: rotateY(180deg);

 }



 .team-front, .team-back {

   position: absolute;

   width: 100%;

   height: 100%;

   backface-visibility: hidden;

  

 }



 

 /* Style the front side (fallback if image is missing) */

 .team-front {

   background-color: #bbb;

   color: black;

   cursor: pointer;

 }

 

 /* Style the back side */

 .team-back {

   background-color: dodgerblue;

   color: white;

   transform: rotateY(180deg);

   cursor: pointer;

 }



 .team-banner {

    position: absolute;

    top:0px; 

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    justify-content: center;

    width: 100%;

    padding: 20px;

 }



 .team-button {

   font-size: 1.5rem;

   font-weight: 800;

   border: solid 1px;

   text-transform: uppercase;

 }



 .team-button:hover {

   background: rgb(180, 210, 52);

 }







.name {

   position: absolute;

   top: 370px;

   left: 16px;

   color: white;

   font-size: 3rem;

   font-weight: 800;

   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

  

 }



 .position {

   position: absolute;

   top: 350px;

   left: 16px;

   color: white;

   font-size: 1.2rem;

   font-weight: 800;

   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

   text-transform: uppercase;

   border-bottom-style: solid;



 }



 .flag {

    width: 30px;

 }



 #aboutus {

    font-weight: 400;

    font-size: 1.2rem;

    padding: 40px;

    padding-top: 100px;



 }



 .is-stat {

    display: grid;

    grid-template-columns: 1fr 1fr;

    height: 30px;

    

 }



 .kisisel-stat {

   display: grid;

   grid-template-columns: 1fr 1fr;

   height: 30px;

   

}



.kahraman-stat {

   display: grid;

   grid-template-columns: 1fr 1fr;

   height: 30px;

   

}



 .ozellik {

   text-align : right;

   padding-right: 20px;

   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

 }



 .bar {

   background-color: rgb(180, 210, 52);

   text-align : left;

   padding-left: 5px;



 }



 .is {

    position: absolute;

    top: 250px;

    width: 100%;

 }



 .kisisel {

   position: absolute;

   top: 250px;

   width: 100%;

   display: none;

}



.kahraman {

   position: absolute;

   top: 250px;

   width: 100%;

   display: none;

}



 



.teamlist {

   

   display: grid;

   grid-template-columns: repeat(auto-fit, minmax(400px, 400px));

   row-gap: 30px;

   grid-gap: 20px;

   justify-content: center;

}

   .type {

      font-size: 2em;

      font-family: "Norito Sans";

      font-weight: 900;



      writing-mode: vertical-lr;

   }

   .slide {

      /* grid-template-columns: 1fr; */

      width: 400px;

      object-fit: cover;

      display: grid;

      /* overflow: hidden; */

   }

   .item {

    display: grid;

    grid-template-rows: 1fr 40px;

   overflow: hidden;

   box-shadow: 2px 2px 5px rgba(0,0,0,0.45);



}

.imagewithoverlay {

  overflow: hidden;

  display: grid;

  grid-template-columns: 1fr;

  grid-template-rows: 1fr;

  box-shadow: 2px 2px 5px rgba(0,0,0,0.45)

}







   /* .image {

      width: 100%;

      display: grid;

      grid-template-columns: 1fr;

      overflow: hidden;

   } */



   .slide__overlay2 {

    background: #b4d23452;

    grid-column: 1 / -1;

    grid-row: 1 / -1;

    position: relative;

    display: grid;

    justify-items: center;

    align-items: center;

    transition: 0.2s;

    transform: translateY(100%);

   }



   .slide__overlay2 button {

    background: none;

    border: 2px solid white;

    color: white;

    text-transform: uppercase;

    background: rgba(0, 0, 0, 0.7);

    padding: 5px;

  }



  .imagewithoverlay:hover .slide__overlay2 {

    transform: translateY(0);

  }

  .imagewithoverlay img {

    grid-column: 1 / -1;

    grid-row: 1 / -1;

    width: 400px;

    height: 250px;

    object-fit: cover;

  }

  #logo {

     display: grid;

     grid-template-columns: 1fr;

     justify-items: left;

     font-size: 35px;

     font-weight: bold;

  }





.address {

   display: grid;

   grid-template-columns: 1fr 1fr;

   height: 150px;

}

/* Wide screen */

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



   .menu-text {

      font-size: 1.2rem;

   }





 





}