@media only screen and  (max-width:420px)  { 
    .carousel-caption h1 {
        font-size: 140%;
     }

 

     #resim{
        min-width: 773px;
        min-height: 270px;
    }

   .carousel-caption h4 {
       font-size: 80%;
    }
    .carousel-caption ul {
       font-size: 80%;
    }

    .carousel-caption  a{
       font-size: 70%;
    }
    
    .card{
        width: 20rem;
        display: block;
        width: auto;
    
    }
    .card-title {
        font-size: 90%;
    }
    p.card-text {
        font-size: 70%;
    }

    .card a {
        font-size: 70%;
    }

    .carousel-caption {
        transform: translateY(-50%);
        bottom:0;
        top:31%;
        text-align: left;
      }    


 }






@media only screen and (min-width:421px)  {  
    .carousel-caption h1 {
        font-size: 160%;
     }
     

     #resim{
        min-width: 773px;
        min-height: 270px;
    }

   .carousel-caption h4 {
       font-size: 90%;
    }
    .carousel-caption ul {
       font-size: 90%;
    }

    .carousel-caption  a{
       font-size: 70%;
    }
    
    .card{
        width: 12rem;
    }
    .card-title {
        font-size: 90%;
    }
    p.card-text {
        font-size: 70%;
    }

    .card a {
        font-size: 70%;
    }

    .carousel-caption {
        transform: translateY(-50%);
        bottom:0;
        top:31%;
        text-align: left;
      }    

 }

@media  only screen and (min-width:520px)  {  
    
    .carousel-caption h1 {
        font-size: 165%;
     }
     

     #resim{
        min-width: 773px;
        min-height: 270px;
    }

   .carousel-caption h4 {
       font-size: 90%;
    }
    .carousel-caption ul {
       font-size: 90%;
    }

    .carousel-caption  a{
       font-size: 80%;
    }
    
    .card{
        width: 14rem;
    }
    .card-title {
        font-size: 100%;
    }
    p.card-text {
        font-size: 80%;
    }

    .card a {
        font-size: 80%;
    }

    .carousel-caption {
        transform: translateY(-50%);
        bottom:0;
        top:31%;
        text-align: left;
      }    }



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

    .carousel-caption h1 {
        font-size: 165%;
     }
     

     #resim{
        min-width: 773px;
        min-height: 270px;
    }

   .carousel-caption h4 {
       font-size: 120%;
    }
    .carousel-caption ul {
       font-size: 100%;
    }

    .carousel-caption  a{
       font-size: 80%;
    }
    
    .card{
        width: 14rem;
    }
    .card-title {
        font-size: 100%;
    }
    p.card-text {
        font-size: 80%;
    }

    .card a {
        font-size: 80%;
    }

    .carousel-caption {
        transform: translateY(-50%);
        bottom:0;
        top:31%;
        text-align: left;
      } 

 }



@media only screen and  (min-width:890px) { 
    .carousel-caption h1 {
        font-size: 165%;
     }
     

     #resim{
        min-width: 773px;
        min-height: 270px;
    }

   .carousel-caption h4 {
       font-size: 130%;
    }
    .carousel-caption ul {
       font-size: 120%;
    }

    .carousel-caption  a{
       font-size: 80%;
    }
    
    .card{
        width: 14rem;
    }
    .card-title {
        font-size: 100%;
    }
    p.card-text {
        font-size: 80%;
    }

    .card a {
        font-size: 80%;
    }

    .carousel-caption {
        transform: translateY(-50%);
        bottom:0;
        top:35%;
        text-align: left;
      } 

 }


@media  only screen and  (min-width:1200px) { 
    .carousel-caption h1 {
        font-size: 165%;
     }
     

     #resim{
        min-width: 773px;
        min-height: 270px;
    }

   .carousel-caption h4 {
       font-size: 130%;
    }
    .carousel-caption ul {
       font-size: 120%;
    }

    .carousel-caption  a{
       font-size: 80%;
    }
    
    .card{
        width: 16rem;
    }
    .card-title {
        font-size: 130%;
    }
    p.card-text {
        font-size: 100%;
    }

    .card a {
        font-size: 100%;
    }

    .carousel-caption {
        transform: translateY(-50%);
        bottom:0;
        top:50%;
        text-align: left;
      } 




 }