/* Logo Banner */
.logoBannerContainer {
    width: 100%;
    overflow: hidden;
    position: relative; /* Center div vertically */
    top: 50%; /* Center div vertically */
    transform: translateY(-50%); /* Center div vertically */
}

/* Scrolling Images Footer */
.logoBanner {
    height: 100px;
    width: 3550px;
    }

.logoBanner img {
    margin-right: 5px;
    height: 100px;
    width: 159px; /* Width to use to calculate keyframes margin-left animation */
    border-radius: 10px;
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.logoBanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

/* Logo Banner Keyframe Animations */
.first {
    -webkit-animation: bannermove 60s linear infinite; /* Seconds are how long it takes for the images to scroll */
    -moz-animation: bannermove 60s linear infinite;
    -ms-animation: bannermove 60s linear infinite;
    -o-animation: bannermove 60s linear infinite;
    animation: bannermove 60s linear infinite;
}
 
@keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -1685px;} /* Calculate margin left by taking width of image and adding margin both sides, times how many images there are. E.g., width of 238px + 10px margin (5px both sides) =  248 * 9 images = 2,232. THEN, minus 5px off again. */
}
 
@-moz-keyframes bannermove {
 0% {margin-left: 0px;}
 100% {margin-left: -1685px;}
}
 
@-webkit-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -1685px;}
}
 
@-ms-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -1685px;}
}
 
@-o-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -1685px;} 
}



/* Media Queries */
/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */

/*@media (min-width: 1281px) {
     //CSS 
}
*/

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
 @media (min-width: 1025px) and (max-width: 1280px) {
     /* Scrolling Images Footer */
    .logoBanner {
        height: 100px;
        width: 3550px;
        }

    .logoBanner img {
        margin-right: 5px;
        height: 100px;
        width: 159px; /* Width to use to calculate keyframes margin-left animation */
        border-radius: 10px;
    }

    /* Logo Banner Keyframe Animations */
    .first {
        -webkit-animation: bannermove 60s linear infinite; /* Seconds are how long it takes for the images to scroll */
        -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
        -o-animation: bannermove 60s linear infinite;
        animation: bannermove 60s linear infinite;
    }

    @keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1685px;} /* Calculate margin left by taking width of image and adding margin both sides, times how many images there are. E.g., width of 238px + 10px margin (5px both sides) =  248 * 9 images = 2,232. THEN, minus 5px off again. */
    }

    @-moz-keyframes bannermove {
     0% {margin-left: 0px;}
     100% {margin-left: -1685px;}
    }

    @-webkit-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1685px;}
    }

    @-ms-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1685px;}
    }

    @-o-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1685px;} 
    }
}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */

 @media (min-width: 768px) and (max-width: 1024px) {
     /* Scrolling Images Footer */
    .logoBanner {
        height: 80px;
        width: 3550px;
        }

    .logoBanner img {
        margin-right: 5px;
        height: 80px;
        width: 127px; /* Width to use to calculate keyframes margin-left animation */
        border-radius: 10px;
    }

    /* Logo Banner Keyframe Animations */
    .first {
        -webkit-animation: bannermove 60s linear infinite; /* Seconds are how long it takes for the images to scroll */
        -moz-animation: bannermove 35 linear infinite;
        -ms-animation: bannermove 35 linear infinite;
        -o-animation: bannermove 35s linear infinite;
        animation: bannermove 35s linear infinite;
    }

    @keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;} /* Calculate margin left by taking width of image and adding margin both sides, times how many images there are. E.g., width of 238px + 10px margin (5px both sides) =  248 * 9 images = 2,232. THEN, minus 5px off again. */
    }

    @-moz-keyframes bannermove {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;}
    }

    @-webkit-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;}
    }

    @-ms-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;}
    }

    @-o-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;} 
    }
}


/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */
 @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
     /* Scrolling Images Footer */
    .logoBanner {
        height: 80px;
        width: 3550px;
        }

    .logoBanner img {
        margin-right: 5px;
        height: 80px;
        width: 127px; /* Width to use to calculate keyframes margin-left animation */
        border-radius: 10px;
    }

    /* Logo Banner Keyframe Animations */
    .first {
        -webkit-animation: bannermove 60s linear infinite; /* Seconds are how long it takes for the images to scroll */
        -moz-animation: bannermove 35 linear infinite;
        -ms-animation: bannermove 35 linear infinite;
        -o-animation: bannermove 35s linear infinite;
        animation: bannermove 35s linear infinite;
    }

    @keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;} /* Calculate margin left by taking width of image and adding margin both sides, times how many images there are. E.g., width of 238px + 10px margin (5px both sides) =  248 * 9 images = 2,232. THEN, minus 5px off again. */
    }

    @-moz-keyframes bannermove {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;}
    }

    @-webkit-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;}
    }

    @-ms-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;}
    }

    @-o-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1365px;} 
    }
}


/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */
 @media (min-width: 481px) and (max-width: 767px) {
     /* Scrolling Images Footer */
    .logoBanner {
        height: 60px;
        width: 3550px;
        }

    .logoBanner img {
        margin-right: 5px;
        height: 60px;
        width: 95px; /* Width to use to calculate keyframes margin-left animation */
        border-radius: 10px;
    }

    /* Logo Banner Keyframe Animations */
    .first {
        -webkit-animation: bannermove 60s linear infinite; /* Seconds are how long it takes for the images to scroll */
        -moz-animation: bannermove 35 linear infinite;
        -ms-animation: bannermove 35 linear infinite;
        -o-animation: bannermove 35s linear infinite;
        animation: bannermove 35s linear infinite;
    }

    @keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;} /* Calculate margin left by taking width of image and adding margin both sides, times how many images there are. E.g., width of 238px + 10px margin (5px both sides) =  248 * 9 images = 2,232. THEN, minus 5px off again. */
    }

    @-moz-keyframes bannermove {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;}
    }

    @-webkit-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;}
    }

    @-ms-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;}
    }

    @-o-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;} 
    }
}


/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
 @media (min-width: 320px) and (max-width: 480px) {
    /* Scrolling Images Footer */
    .logoBanner {
        height: 60px;
        width: 3550px;
        }

    .logoBanner img {
        margin-right: 5px;
        height: 60px;
        width: 95px; /* Width to use to calculate keyframes margin-left animation */
        border-radius: 10px;
    }

    /* Logo Banner Keyframe Animations */
    .first {
        -webkit-animation: bannermove 60s linear infinite; /* Seconds are how long it takes for the images to scroll */
        -moz-animation: bannermove 35 linear infinite;
        -ms-animation: bannermove 35 linear infinite;
        -o-animation: bannermove 35s linear infinite;
        animation: bannermove 35s linear infinite;
    }

    @keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;} /* Calculate margin left by taking width of image and adding margin both sides, times how many images there are. E.g., width of 238px + 10px margin (5px both sides) =  248 * 9 images = 2,232. THEN, minus 5px off again. */
    }

    @-moz-keyframes bannermove {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;}
    }

    @-webkit-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;}
    }

    @-ms-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;}
    }

    @-o-keyframes "bannermove" {
     0% {margin-left: 0px;}
     100% {margin-left: -1045px;} 
    }
}