@font-face {
    font-family: 'Outfit-VariableFont_wght';
    src: url('../fonts/Outfit-VariableFont_wght.ttf'); /* IE9 Compat Modes */
    src: url('../fonts/Outfit-VariableFont_wght.ttf') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Outfit-VariableFont_wght.ttf') format('woff'), /* Modern Browsers */
         url('../fonts/Outfit-VariableFont_wght.ttf')  format('truetype'), /* Safari, Android, iOS */
  }
  body {
    font-family: 'Outfit-VariableFont_wght', Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
  }
  .menuHome {
    height: 70px;
    display: flex;
    align-items: center;
  }
  .menuHome a {
    font-size: 12pt;
    color: #000;
    letter-spacing: 1;
    font-weight: normal;
    text-decoration: none;
  }
  .menuHome i {
    padding-right: 6px;
  }
  .menuButtonHome {
    background-color: #999;
    height: 100%;
    display: flex;
    align-items: center;
    transition: 1s;
  }
  .menuButtonHome a {
    font-size: 12pt;
    color:#FFF;
    letter-spacing: 1;
    font-weight: normal;
    text-decoration: none;
  }
  .menuButtonHome:hover{
    background-color:#555;
    transition: 1s;
  }
  .menuMobilLink {
    padding: 2em;
    display: flex;
    flex-direction: column;
  }
  .menuMobilLink a{
    text-decoration: none;
    padding: 10px 0 !important ;
  }
  .homeSilderCover {
    background-color: #FFF800;
    min-height: 500px;
    overflow: hidden;
    position: relative;
  }
  .homeSilderCover img {
    width: 100%;
    height: 500px;
    object-fit: cover;
  }
  .fligran {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4D4D4D50;
    width: 100%;
    height: 100%;
    transition: 1s;
  }
  .fotoGaleryCover {
    position: relative; 
    border: 3px solid #FFF;
    width: 100%;
    height: auto;
    overflow: hidden;
    cursor: pointer;
  }
  .fligranFoto {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4D4D4D50;
    width: 100%;
    height: 100%;
    transition: 1s;
    cursor: pointer;
  }
  .fotoGaleryCover:hover .fligranFoto {
    background-color: #4D4D4D00;
    transition: 1s;
  }
  .fotoGaleryCover img {
    width: 100%;
    height: auto;
    transition: 1s;
  }
  .fotoGaleryCover:hover img {
    width: 110%;
    height: auto;
    transition: 1s;
  }
  
  .baslik {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#000;
    font-size: 30pt;
    line-height: 1;
    letter-spacing: -0.3pt;
  }
  .kartOzellikleri {
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none;
  }
  .kartOzellikleri li{
    color: #FF8344;
    text-decoration: none;
    font-weight: bold;
  }
  .kartOzellikleri li:hover{
    color: #FF0000;
  }
  .kartOzellikleri .card-body{
    z-index:999;
  }
  .kartOzellikleri .card-title{
    color:#4D4D4D;
    height: 51px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    text-overflow: ellipsis;
    font-size: 15pt;
  }
  .kartOzellikleri .card-text{
    color:#808080;
    height: 93px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; 
    text-overflow: ellipsis;
  }
  .footer {
    background-color: #4D4D4D;
    color: #FFF;
    font-size: 12pt;
  }  
  .fotoAlani {
    width: 100%; 
    height: auto; 
    position:relative;
  }
  .detayBaslik {
    font-size: 40pt;
    color:#4D4D4D;
    line-height: 1;
    font-weight: bold;
  }
  .detaySpot {
    font-size: 22pt;
    font-weight:500;
    color:#4D4D4D;
    line-height: 1.3;
  }
  .detayYazi {
    font-size: 14pt;
    color:#4D4D4D;
    line-height: 1.4;
    font-weight: normal !important;
  }
  .bosluk {
    width: 100%;
    height: 100px;
  }
  .yuvarlak {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .yuvarlak img{
    width: 330px;
    height: 330px;
  }
  
  .kartOzellikleri ul, 
  .kartOzellikleri li,
  .kartOzellikleri .card-body,
  .kartOzellikleri .card-title {
    background-color: #EEE !important;
  }
  .seritRenk {
    background-color: #EEE !important;
  }
  .yuvarlakYazi {
    font-size: 12pt;
    color: #4D4D4D;
    text-align: center;
    line-height: 1.2;
  }
   .yatayBosluk {
    padding: 0 5%;
  }
  .yuvarlakSpot {
    padding: 20px 10px 0 10px;
    font-size: 12pt;
    font-weight: bold;
    color: #4D4D4D;
    text-align: center;
    line-height: 1.5;
  }
  .fotogaleryBaslik {
    font-size: 30pt;
    color:#FF8344;
    font-weight: bold;
    padding-bottom: 20px;
    text-align: center;
  }
  .fotogaleryicerik {
    font-size: 20pt;
    color: #4D4D4D;
    padding-bottom: 20px;
    text-align: center;
    line-height: 1.2;
  } 
  .t-modal {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000DD;
  }
  .modalKapat {
    position: absolute;
    top:20px;
    right:20px;
    color: #FFF;
    font-weight: bold;
    font-size: 30pt;
    cursor: pointer;
  }
  .modalSonraki {
    position: absolute;
    top:45%;
    right:20px;
    color: #FFF;
    font-weight: bold;
    font-size: 30pt;
    cursor: pointer;
  }
  .modalOnceki {
    position: absolute;
    top:45%;
    left:20px;
    color: #FFF;
    font-weight: bold;
    font-size: 30pt;
    cursor: pointer;
  }
  .modalResim {
    width: 80%;
    height: 80%;
    object-fit: contain;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  }
  .contentCover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }