* {
    box-sizing: border-box;
  }
  
 /* body {
   
  }
  */
  /* Style the header */
  header {
    background-color: #666;
    padding: 30px;
    text-align: center;
    font-size: 35px;
    color: white;
  }
  .flex-container {
    display: flex;
    flex-wrap: nowrap;
   
  }
  /* Container for flexboxes */
  section {
    display: -webkit-flex;
    display: flex;
    height: auto;
  }
  
  /* Style the navigation menu */
  nav {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: white;
    padding-top: 5px;
    height: auto;
  }
  
  /* Style the list inside the menu */
  nav ul {
    list-style-type: none;
    padding: 0;
  }
  
  /* Style the content */
  article {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: white;
    padding: 10px;
    padding-top: 5px;
  }
  
  /* Style the footer */
  footer {
    background-color: #777;
    padding: 0px;
    color: white;
  }
  .centered {
    position: absolute;
    top: 41%;
    left: 14%;
    transform: translate(-50%, -50%);
    background-color: black;
    border: none;
    color: whitesmoke;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    font-family: aharoni;
    font-weight: bold;
    display: none;
    height: auto;
    width: auto;
    flex-wrap: nowrap;
    opacity: 0.4;
  }
  .centered1 {
    opacity: 0.4;
    position: absolute;
    top: 41%;
    left: 82%;
    transform: translate(-50%, -50%);
    background-color: black;
    border: none;
    color: whitesmoke;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    font-family:aharoni;
    font-weight: bold;
    font-display: flex;
    display: none;
    height: auto;
    width: auto;
    flex-wrap: nowrap;
  }
   /*gif kisni*/
  .container{
    position: relative;
    height:relative;
  }
  .container img {
    width: 100%;
    height: auto;
  }
  /*gif kismi*/
  /*Bu kısım anasayfali yer*/
  .navbar-dark {
    color:goldenrod !important;
    background-color: white !important;
    font-family: 'Quattrocento Sans', sans-serif!important;
    border: 0px;
    font-size: 18px !important;
   
   
    
   
    
  
   }
   .navbar-dark>.a {
     color: #CF2400!important;
     color:rgb(209, 190, 83)!important;
   }
   .dropdown-submenu {
     position: relative;
     background-color:  white;
     font-family: 'Quattrocento Sans', sans-serif!important;
     background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
   
 }
 
 .nav-item:hover{
  background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%)!important;
 
}
 .dropdown-menu{
   background-color:  white;
   font-family: 'Quattrocento Sans', sans-serif!important;
  
 }
 
 .dropdown-submenu>.dropdown-menu {
     top: 0;
     left: 100%;
     margin-top: -6px;
     margin-left: -1px;
     -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px;
     border-radius: 0 6px 6px 6px;
     background-color:  white;
     background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
     
 }
  .module-title2:after {
      background: goldenrod;
      width: 11px;
      content: "";
      right: 15px;
      margin-top: 24px;
      height: 11px;
      position: absolute;
      -moz-border-radius: 11px;
      -webkit-border-radius: 11px;
      border-radius: 11px;
     
  }
  .module-title2 {
      line-height: 29px;
      margin: 0 0 15px 0;
      font-family: 'Quattrocento Sans', sans-serif!important;
      border-bottom: 1px dotted #69767f;
      background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%)!important;
     
  }
  
  .dropdown-submenu:hover>.dropdown-menu {
      display: flex;
    
  }
  
/*.nav-item:hover {
  background-color: yellow !important;
  border: 1px solid;
  /*overflow: hidden;
  position: relative;
  z-index: 20;
  background: #fff;
   /* content: "";
    height: 155px;
    left: -75px;
    opacity: .5;
    position: absolute;
    top: -5px;
    transform: rotate(10deg);
    /*transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}*/
/*///////////////////SARI AKIŞKAN//////////////////////////////*/
@media (min-width: 768px) and (max-width: 991px) {
  /* Show 4th slide on md if col-md-4*/
  .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
      position: absolute;
      top: 0;
      right: -33.3333%;  /*change this with javascript in the future*/
      z-index: -1;
      display: block;
      visibility: visible;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  /* Show 3rd slide on sm if col-sm-6*/
  .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
      position: absolute;
      top: 0;
      right: -50%;  /*change this with javascript in the future*/
      z-index: -1;
      display: block;
      visibility: visible;
  }
}
@media (min-width: 576px) {
  .carousel-item {
      margin-right: 0;
  }
  /* show 2 items */
  .carousel-inner .active + .carousel-item {
      display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
      transition: none;
  }
  .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
  }
  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
  }
  /* farthest right hidden item must be also positioned for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      visibility: visible;
  }
  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
      display: block;
      visibility: visible;
  }
}
/* MD */
@media (min-width: 768px) {
  /* show 3rd of 3 item slide */
  .carousel-inner .active + .carousel-item + .carousel-item {
      display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
      transition: none;
  }
  .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
  }
  /* left or forward direction */
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
  }
  /* right or prev direction */
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
      display: block;
      visibility: visible;
  }
}
/* LG */
@media (min-width: 991px) {
  /* show 4th item */
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
      display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
      transition: none;
  }
  /* Show 5th slide on lg if col-lg-3 */
  .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      position: absolute;
      top: 0;
      right: -25%;  /*change this with javascript in the future*/
      z-index: -1;
      display: block;
      visibility: visible;
  }
  /* left or forward direction */
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
  }
  /* right or prev direction //t - previous slide direction last item animation fix */
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
      display: block;
      visibility: visible;
  }
}
/*/////////////////////SARI AKIŞKAN//////////////////////////////*/

/*buraaşağı*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
.nav-item a:hover {
  color: black !important;
  cursor: pointer;

  background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%)!important;
  /*text-shadow: 1px 1px 2px black !important;*/
 
}


 

.nav-item:hover{
  
  border-bottom:3px solid #CF2400 !important;
 
 /* background :linear-gradient(yellow,green,blue);*/
  background: repeat-y !important;
  background-color: white !important;
 
  background-position-y: unset;
  background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%)!important;
}
.container a:hover{
  color: #CF2400!important;
  cursor: pointer;
 
}


.page-header:hover {
  color: #CF2400 !important;
  cursor: pointer;
  
}
/*.fa-check-circle:hover{
  color: #CF2400 !important;
}*/


.zoom2{
  border-radius: 50%;
}
.zoom3:hover{
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  color: #666;
  transition: transform .5s ease;
  
  transform-origin: 50% 65%;
  /*transition: transform 5s, filter 3s ease-in-out;*/
 filter: brightness(115%);
  overflow: hidden;
  border-radius: 0;
}
.zoom{
  border-radius: 50%;
}
.zoom:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  color: #666;
  transition: transform .5s ease;
  
  transform-origin: 50% 65%;
  /*transition: transform 5s, filter 3s ease-in-out;*/
 filter: brightness(115%);
  overflow: hidden;
  border-radius: 0;
  
 /* filter: grayscale(100%);*/
}
.zoom4:hover{
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  color: #666;
  transition: transform .5s ease;
  
  transform-origin: 50% 65%;
  /*transition: transform 5s, filter 3s ease-in-out;*/
 filter: brightness(115%);
  overflow: hidden;
  border-radius: 0;
}
.zoom1:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  color: yellow;
  /*transition: transform .5s ease;*/
  
  transform-origin: 50% 65%;
  /*transition: transform 5s, filter 3s ease-in-out;*/
  filter: brightness(115%);
  overflow: hidden;;
  border-radius: 50%;
  border-color: yellow;
  align-content: center;
  padding-left: 50px;
  
 /* filter: grayscale(100%);*/
}

/*burayukarı*/
  .dropdown-submenu>a:after {
      display: flex;
      content: " ";
      float: right;
      
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color:  rgb(209, 190, 83);
      margin-top: 5px;
      margin-right: -10px;
  }
  
  .dropdown-submenu:hover>a:after {
      border-left-color: rgb(231, 99, 99);
  }
  
  .dropdown-submenu.pull-left {
      float: none;
  }
  
  .dropdown-submenu.pull-left>.dropdown-menu {
      left: -100%;
      margin-left: 5px;
      -webkit-border-radius: 6px 0 6px 6px;
      -moz-border-radius: 6px 0 6px 6px;
      border-radius: 6px 0 6px 6px;
  }
    /*Bu kısım anasayfali yer - top*/
    /*grid*/
   
      
    
    
    .row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
    }
    
    /* Create four equal columns that sits next to each other */
    .column {
      flex: 25%;
      max-width: 25%;
      padding: 0 4px;
    }
    
    .column img {
      margin-top: 8px;
      vertical-align: middle;
    
    }
    /*//////////////ARI KOVANI //////////////////////*/
    .gallery{
      position:relative;
      height:100%;
      width:100%;
    }
    
    .gallery:after{
      content:'';
    }
    
    .shadow{
      position: absolute;
      top: 500px;
      left: 100px;
      width: 500px;
      height: 40px;
      border-radius: 50%;
      background: radial-gradient(#805d78,rgba(0,0,0,0) 70%);
    }
    
    img{
      width:var(--width);
      height:var(--height);
    }
    
    .clipped-border{
      -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
       clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
       padding:5px;
       background:linear-gradient(rgba(255, 255, 255, 0),rgb(209, 190, 83));
       width:var(--border-width);
       height:var(--border-height);
       max-height:250px;
       max-width:250px;
       height: var(--height);
       width:var(--width);
       transition:transform 0.2s;
       position:absolute;
       cursor:pointer;
    }
    
    
    
    .clipped-border:before{
      content:'';
      position:absolute;
      opacity:0.5;
      width:350px;
      height:70px;
      background:white;
      top:0;
      left:0;
      z-index:1;
      transform:rotate(45deg);
      transition:transform 0.5s;
    }
    
    .clipped-border:hover:before{
      transform: translate(-100px,400%) rotate(45deg);
      transition:transform 0.5s;
    }
    
    
    
    #clipped {
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    
    }
    
    .clipped-border:hover{
      transform:scale(1.2);
      transition:transform 0.2s;
      z-index:10;
      background:linear-gradient(rgba(255, 255, 255, 0),#CF2400);
    }
    
    
    @media screen and (max-width:500px){
      .clipped-border{
        width:100px;
        height:100px;
      }
      
      
    }
    
/*////////////ARI KOVANI SONU*/
/*SOCİAL*/
  /*social media aşağısı*/
  @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
  .container1{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
display:flex;
margin:0;
padding:0;
flex-wrap:wrap;
}
.sc{
display:flex;
flex-wrap: wrap;
}

.container1> .sc {
list-style:none;
margin:0 5px;

}

.container1> .sc a .fa {
font-size: 40px;
color: #262626;
line-height:80px;
transition: .5s;
padding-right: 14px;
}

.container1> .sc a span {
padding:0;
margin:0;
position:absolute;
top: 30px;
color: #262626;
letter-spacing: 4px;
transition: .5s;
}

.container1>.sc a {
text-decoration: none;
display:absolute;
display:block;
width:210px;
height:80px;
background: #fff;
text-align:left;
padding-left: 20px;
transform: rotate(-30deg) skew(25deg) translate(0,0);
transition:.5s;
box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
.container1> .sc a:before {
content: '';
position: absolute;
top:10px;
left:-20px;
height:100%;
width:20px;
background: #b1b1b1;
transform: .5s;
transform: rotate(0deg) skewY(-45deg);
}
.container1> .sc a:after {
content: '';
position: absolute;
bottom:-20px;
left:-10px;
height:20px;
width:100%;
background: #b1b1b1;
transform: .5s;
transform: rotate(0deg) skewX(-45deg);
}

.container1> .sc a:hover {
transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

.container1> .sc:hover .fa {
color:#fff;
}

.container1> .sc:hover span {
color:#fff;
}

.container1> .sc:hover:nth-child(1) a{
background: #3b5998;
}
.container1> .sc:hover:nth-child(1) a:before{
background: #365492;
}
.container1> .sc:hover:nth-child(1) a:after{
background: #4a69ad;
}

.container1> .sc:hover:nth-child(2) a{
background: #00aced;
}
.container1> .sc:hover:nth-child(2) a:before{
background: #097aa5;
}
.container1> .sc:hover:nth-child(2) a:after{
background: #53b9e0;
}

.container1> .sc:hover:nth-child(3) a{
background: #dd4b39;
}
.container1> .sc:hover:nth-child(3) a:before{
background: #b33a2b;
}
.container1> .sc:hover:nth-child(3) a:after{
background: #e66a5a;
}

.container1> .sc:hover:nth-child(4) a{
background: #e4405f;
}
.container1> .sc:hover:nth-child(4) a:before{
background: #d81c3f;
}
.container1> .sc:hover:nth-child(4) a:after{
background: #e46880;
}

  /* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
  @media (max-width: 600px) {
    section {
      -webkit-flex-direction: column;
      flex-direction: column;
    }
  }