/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    header iframe {
        width: 100vw;
        height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
        min-height: 100vh;
        min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }    

    .feedbackSlider p {
        font-size: 1rem;

    }
    

    .feedbackSlider .slick-list.draggable {
        padding: 0 15% 0 15%;
    }

    .slickSlider .slick-list.draggable {
        padding: 0 15% 0 15% !important;
    }

    .logo_items img{
        margin: 5px 40px
    }

    .agenda-item-1 {
        border-right: 1px solid #000
    }
    
    
    
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .nav-link {
        font-size: .7rem;
    }

    h2.section-header {
        font-size: 2.2rem;
    }

    .speaker-img {
        max-width: 200px;
    }

    .feedbackSlider p {
        font-size: .9rem;

    }
      
      
    .logos:before {
        left: 0;
        background: linear-gradient(270deg,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
    }
    
    .logos:after {
        right: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
      }
      
      .logo_items {
        animation: 45s slides infinite linear;
      }

      .logos:before, .logos:after {
        width: 250px;
       
    }

    .agenda-quote h2 {
        font-size: 1.4rem;
        line-height: 2rem;
  
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    .nav-link {
        font-size: .8rem;
    }

    h1 {
        font-size: 2rem;
    }

    legend {
        font-size: 1.2rem;
    }

    .logos:before, .logos:after {
        width: 320px;
       
    }

    .agenda-header {
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: .3rem;
        font-size: 1.3rem
    }

    .agenda-table {
        font-size: 1rem;
    }

    .agenda-quote h2 {
        font-size: 1.5rem;
        line-height: 2.2rem;  
    }
    
 }


 /* XXL large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) { 

    .nav-link {
        font-size: .9rem;
    }


 }


 @media (min-width: 1800px) { 

    .logos:before {
        left: 0;
        background: linear-gradient(270deg,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%);
    }
    
    .logos:after {
        right: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%);
      }

    .logos:before, .logos:after {
        width: 450px;
       
    }

	
}

@media (min-width: 2200px) { 
.feedbackSlider .slick-list.draggable {
    padding: 0 0 0 0;
}


.feedbackSlider .slick-current p, .feedbackSlider .slick-current + .slick-slide p {
    transform: translateX(0px);
    opacity: 1;
    transition: all .6s ease .4s

}


.quote-left {
    position: absolute;
    top: -35px;
    left: 10px;
    font-size: 6rem;
    opacity: 0;
    transform: translateX(100px);
    transition: all .2s ease 0s

}


.quote-right {
    position: absolute;
    bottom: -35px;
    right: 10px;
    font-size: 6rem;
    opacity: 0;
    transform: translateX(100px);
    transition: all .2s ease 0s


}

.slick-current .quote-left, .slick-current .quote-right, .slick-current + .slick-slide .quote-left, .slick-current + .slick-slide .quote-right {
    transform: translateX(0px);
    opacity: .6;
    transition: all .6s ease .2s

}


}