#cf {
    position:relative;    
    margin:0 auto;
}

@media (min-width: 1700px) {
    #cf {
        width:1077px;
        height:661px;      
    }
}

@media (min-width: 1000px) and (max-width: 1699px) {
    #cf {
        width:900px;
        height:552px;      
      }
}

@media (min-width: 768px) and (max-width: 999px) {
    #cf {
        width:800px;
        height:490px;      
      }
}

@media (min-width: 480px) and (max-width: 767px) {
    #cf {
        width:480px;
        height:293px;      
      }
}

@media (max-width: 479px) {
    #cf {
        width:300px;
        height:184px;      
      }
}
  
  #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;


  }

  #cf img {
    -webkit-animation-name: cfFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -moz-animation-name: cfFadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 12s;
    -o-animation-name: cfFadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 12s;
    animation-name: cfFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;

    }

    @-webkit-keyframes cfFadeInOut {
        0% {
          opacity:1;
        }
        17% {
          opacity:1;
        }
        25% {
          opacity:0;
        }
        92% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
       }
       
       @-moz-keyframes cfFadeInOut {
        0% {
          opacity:1;
        }
        17% {
          opacity:1;
        }
        25% {
          opacity:0;
        }
        92% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
       }
       
       @-o-keyframes cfFadeInOut {
        0% {
          opacity:1;
        }
        17% {
          opacity:1;
        }
        25% {
          opacity:0;
        }
        92% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
       }
       
       @keyframes cfFadeInOut {
        0% {
          opacity:1;
        }
        17% {
          opacity:1;
        }
        25% {
          opacity:0;
        }
        92% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
       }
  
  #cf img:nth-of-type(1) {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    animation-delay: 9s;
  }
  #cf img:nth-of-type(2) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
  }
  #cf img:nth-of-type(3) {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
  }
  #cf img:nth-of-type(4) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
  }

   /* ------------------------------------------------------------------------- */

#cfd {
    position:relative;    
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (min-width: 1700px) {
    #cfd {
        width:1077px;
        height:673px;      
    }
}

@media (min-width: 1000px) and (max-width: 1699px) {
    #cfd {
        width:900px;
        height:562px;      
      }
}

@media (min-width: 768px) and (max-width: 999px) {
    #cfd {
        width:800px;
        height:500px;      
      }
}

@media (min-width: 480px) and (max-width: 767px) {
    #cfd {
        width:480px;
        height:300px;      
      }
}

@media (max-width: 479px) {
    #cfd {
        width:300px;
        height:184px;      
      }
}
  
  #cfd img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;

    -webkit-filter: drop-shadow(5px 5px 5px rgba(87, 87, 87, 0.2));
    filter: drop-shadow(5px 5px 5px rgba(87, 87, 87, 0.2));
  }

  #cfd img {
    -webkit-animation-name: cfFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;
    -moz-animation-name: cfFadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 18s;
    -o-animation-name: cfFadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 18s;
    animation-name: cfFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 18s;

    }
  
  #cfd img:nth-of-type(1) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    animation-delay: 15s;
  }
  #cfd img:nth-of-type(2) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    animation-delay: 12s;
  }
  #cfd img:nth-of-type(3) {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    animation-delay: 9s;
  }
  #cfd img:nth-of-type(4) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
  }
  #cfd img:nth-of-type(5) {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
  }
  #cfd img:nth-of-type(6) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
  }