*{
   margin: 0px;
   padding: 0px;
}
.kapsayici{
   width:100%;
   height: 100px;
   background-color:#1C2833;
   display: flex;
   justify-content: space-between;
   border-bottom: 7px solid #CC4444;
   top: 0px;
   left: 0px;
   position: sticky;
   align-items: center;
   
}
.kapsayici img{
   width: 100px;
   border-radius: 50%;
   opacity: 100%;
  
   
}
.kapsayici ol{
display: flex;
width: 80%;
list-style-type: none;
}
.kapsayici ol li{
   flex-grow: 1;
}
.kapsayici ol li a{
   text-align: center;
   text-decoration: none;
  display: block;
   font-size: 22px;
   color: #F0F3F4;
   padding:34px 100px;
   
   
}
.kapsayici ol li a:hover{
   text-align: center;
   text-decoration: none;
   font-size: 22px;
   color:#F0F3F4;
   background-color: #34495E;
   transition: 0.07s;
   
}
.kapsayici img:hover{
   opacity: 80%;
}









.anasayfa{
   width: 100%;
   background-color: #2C3E50;
   
   
}
.ustkapsayici{
   display: flex;
   border-bottom: 5px solid #CC4444;
}
.solresim{
   width: 250px;
   border-radius: 15px;
   margin: 10px;

}
.yazi p{
   color: #ECF0F1;
   margin: 40px 550px;
   font-size: 22px;
   font-weight: bold;
}
.baslik{
   color: #CC4444;
   margin: 10px 650px ;
   
}
.baslik2{
   color: #CC4444;
   margin: 10px 915px;
}








.ortakapsayici{
   border-bottom:5px solid #CC4444;
  
}
.odev {
   
   text-align: center;
}
.odev a{
   font-size: 22px;
   text-decoration:none;
   color: #ECF0F1;
}
.odev a:hover{
   color: red;
   transition:0.07s ;
   
}
.footer{
   color: white;
   background-color:#CC4444 ;
   margin-top: 10px;
   height: 70px;
}
@media screen and (max-width:700px) {
   .kapsayici{
      height: 250px;
   }
   .kapsayici img{
      display: none;
   }
   .kapsayici ol{
      flex-direction: column;
      margin: 0px 80px;
      position: sticky;
   }
   .kapsayici ol li{
      font-size: 22px ;
      margin: 0px 20px;
   }
   .kapsayici ol li a{
      font-size: 22px;
      margin: 0px 10px;
      padding: 28px 100px 28px 100px;
     
   }
   .solresim{
      display: none;
   }
   .baslik{
      flex-direction: column;
      margin: 0px;
      text-align: center;
      
   }
   .yazi p{
      flex-direction: column;
      margin: 0px;
      text-align: center;
   }
   .gonder{
      text-align: center;
   }
   .gonderi{
      text-align: center;
   }
   .baslik2{
      margin: 0px;
      text-align: center;
   }
   
}