.tf-logo{
    width: 200px;
    margin: 30px 0;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

body {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    background-color: #414141;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#31e2fe+0,699df3+31,c859d1+64,fa2cc5+100 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cf0404+0,ff3019+100 */
    background-color: #e21313; /* Old browsers */

    min-height: 100vh;
    background-image: url(images/bkg-loop1.svg);
}

p {
    color: #fff;
}


h1, h2, h3, h4, h5 {
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}


/* Nav */

.body {
    margin-left:0px;
    transition: ease-out .5s;
}

.navtoggled body {
    margin-left: -240px;
    transition: ease-in .5s;
}

.navtoggled body::before {
    opacity: 1;
    z-index: 8;
    animation-name: fadeInOpacity;
    animation-duration: 1s;
    left: 100%;
    right: 0;
    content: '';
    position: fixed;
}

.navtoggled body::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #111;
    opacity: .8;
    transition: all 2s;
    display: block;
    background-image: url(images/bkg-loop.svg);
    z-index: 4;
    animation-name: fadeInOpacity;
    animation-duration: 1s;
    
}

body::before {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #111;
    opacity: .8;
    transition: all 1s;
    display: none;
}

.menubtn {
    position: fixed;
    top: 40px;
    right: 40px;
    color: #fff;
    height: 40px;
    width: 40px;
    border: 1px solid #fff;
    text-decoration: none;
    text-indent: -9999%;
    cursor: pointer;
    display: block; 
    z-index: 99;
    background-image: url(images/menu.svg);
}

.navtoggled .menubtn {
    right: 440px;
    transition: ease-in 1s;
    background-color: #414141;
    border: 1px solid #414141;
}

nav {
    position: fixed;
    right: -440px;
    width: 440px;
    top: 0;
    bottom: 0;
    background-color: #414141;
    color: #fff;
    z-index: 10;
    transition: ease-in .5s;
    opacity: 0;
}


.navtoggled nav {
    right: 0px;
    transition: ease-in .7s;
    opacity: 1;
}

nav ul {
    padding: 60px 5%;
}

nav ul li {
    padding-bottom: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4em;
}

nav h4 {
    font-size: 1.6em;
    color: #888;
    font-weight: 300;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    line-height: 1.2em;
}

.sideform {
    padding: 20px 5%;
    
}

.sideform input {
    height: 40px;
    width: 90%;
    margin-bottom: 20px;
    border-radius: 6px;
    padding-left: 10px;
    border: none;
    font-size: 1.2em;
}

.sideform button {
    height: 40px;
    width: 80%;
    margin-bottom: 20px;
    border-radius: 6px;
    padding-left: 10px;
    border: none;
    font-size: 1.2em;
}

/* Nav */

.slider1, .slider2, .slider3, .bx-viewport, .bx-wrapper {
    width: 100%;
    height: auto !important;
    min-height: 95vh !important;
}

.galleryslider div {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
}

.galleryslider div {
    background-size: cover;
    display: flex;
    align-items: center;
}

.firstslide {
    position: absolute;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.logo-top {
    width: 380px;
    display: none;
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 3;
    margin-left: -180px;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 10s;
    color: #fff;
}

.logo-top #pharmacylogo .st0 {
    fill: #fff;
}

#header-anim {
       

}

.anim-contain {
    display: flex;
    align-items: center;
    min-height: 95vh;
    flex: 2;
    padding-top:60px;
    width: 100% !important;
    flex-direction: column;
}

.flexrow {
    flex-direction: row;
}

.flexrow div {
    flex: 1;
}

.reverse {
    flex-direction: row-reverse;
}
        
.col-img img {
}   

.col-align h3 {
    text-align: left;
}
        
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}





@keyframes animateAsideIn {
    0% { transform: translateX(-100%); opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; transform: translateX(0); }
}


@keyframes buttonUp {
    0% { transform: translatey(100%); opacity: 0; }
    86% { transform: translatey(100%); opacity: 0; }
    92% {transform: translatey(-8%); }
    98% {transform: translatey(6%); }
    100% { opacity: 1; transform: translatey(0); }
}

@keyframes shiphover {
    0% { transform: translatey(0%);}
    50% { transform: translatey(-2%);}
}

@keyframes shiphover2 {
    0% { transform: translatey(0%);}
    50% { transform: translatey(2%);}
}

@keyframes animateAsideIn2 {
    0% { transform: translateX(100%); opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes animateAsideIn3 {
    0% { transform: translateX(4%); opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes animateAsideIn3a {
    0% { transform: translateX(4%); opacity: 0; }
    80% { opacity: 0;  }
    100% { opacity: 1; transform: translateX(0); }
}

#header-anim h1 {
    font-size: 1.4em;
    line-height: 1.1em;
    margin: 0 70px 0 60px;
    z-index: 5;
    animation-name: animateAsideIn3a;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 3s;
    color: #fff;
    text-align: center;
}

#header-anim p {
        margin: 0 60px 0 60px;

}

#header-anim h3 {
    font-size: 5em;
    margin: 0 60px 0 60px;
    line-height: 1.1em;
    z-index: 5;
    animation-name: animateAsideIn3a;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 3s;
    color: #fff;
    text-align: center;
}


#header-anim .anim1 {
    height: 37vw;
    width: 21vw;
    position: absolute;
    left: 14vw;
    z-index: 4;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

.anim1 img {
    width: auto;
    height: 100%;
    margin: 0 auto;
    display: block
}

#header-anim .butttonUp2 {
    position: absolute;
    bottom: 30px;
    z-index: 999;
    animation: buttonUp 6s ease-out;
    width: 60px;
    background-color: #fff;
    left: 50%;
    margin-left: -30px;
    border-radius: 30px;
    background-image: url("images/downarrow.svg");
    background-size: 50px;
    background-position: center 8px;
    background-repeat: no-repeat;
}

#header-anim .butttonUp {
    transition: ease-out .3s;
    margin: 0 auto;
}

#header-anim .butttonUp:hover {
    transform: scale(1.2);
    transition: ease-out .3s;
    box-shadow: 0px 2px 14px #2224;
}

#header-anim .anim-hover {
    transition: ease-out .3s;
}

#header-anim .anim-hover:hover {
    transform: scale(1.2);
    transition: ease-out .3s;
}


.mobileshow {
    display: none;
}

.mobilehide {
    display: block;
}
        
@media screen and (max-width: 780px) {

.mobileshow {
    display: block;
}    
    
.mobilehide {
    display: none;
}    
    


.anim-contain {
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    flex-flow: column-reverse;
}
    
.center-contain {
    flex-direction: row;
}

#header-anim .anim1, #header-anim .anim2, #header-anim .anim3, #header-anim .anim4 {
    height: 75vw;
    width: 40vw;
    box-shadow: none;
}
    
    #header-anim .anim2, #header-anim .anim3, #header-anim .anim4 { 
        padding-top: 20px;
    }
    
    
    #header-anim .anim1 {
        left: initial;
        right: 0;
    }
    
    #header-anim .anim2 {
        z-index: 3;
        left: -1vw;
        animation: animateAsideIn2 4s ease-out;
    }
    
    #header-anim .anim3 {
        z-index: 3;
        left: 20vw;
        animation: animateAsideIn2 3s ease-out;
    }
    
    #header-anim .anim4 {
        left: 40vw;
        z-index: 3;
        animation: animateAsideIn2 2s ease-out;
    }
    
    #header-anim h1, #header-anim h3 {
        margin: 0 30px 60px;
    }
    
    #header-anim h3 {
        padding-top: 60px;
    }
    
    .slider, .bx-viewport, #header-anim {
        padding-bottom: 20px;
    }
    
    .slider > div {
        padding-bottom: 60px
    }
    
    #header-anim .anim5 {
        width: 90vw;
        left: 12vw;
    }

}
.bx-nav {
    margin: 40px 80px 0 80px;
}
.bx-prev-arrows1,
.bx-next-arrows1,
.bx-prev-arrows2,
.bx-next-arrows2,
.bx-prev-arrows3,
.bx-next-arrows3, 
.bx-nav > a {
    width: 300px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 300;
    color: #111;
    text-align: center;
    text-decoration: none;
    margin-bottom: 20px;
}

.bx-wrapper .bx-next {
    background-image: none !important;
}
.fa {
  color: rgba(255, 255, 255, .3);
  font: 400 36px/36px;
}

.bx-next-arrows1 {
    
    
}

.arranim1 {
    animation: animateAsideIn 3s ease-out;
}

.arranim2 {
    animation: animateAsideIn2 3s ease-out;
}

.arranim3 {
    animation: animateAsideIn3 3s ease-out;
}

.arranim4 {
    animation: animateAsideIn3a 3s ease-out;
}

.bx-next-arrows1 span {
    display: block;
}

.bx-next-arrows1 a {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right; 0;
    bottom: 0;
}










.entry {
    margin: 60px 10%;
}

.entry h2 {
    font-size: 6vh;
    line-height: 1.1em;
    z-index: 5;
    animation-name: animateAsideIn3a;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .6s;
    color: #fff; 
    margin-bottom: 20px;
}

.entry p {
    font-size: 1.4em;
    padding-bottom: 1.2em;
    line-height: 1.4em;
}

.entry blockquote {
    
}






/* DFISWC Stye */

.hero-logo {
    height: 50vw;
    display: block;
    position: relative;
    margin-left: -20%;
    width: 120%;

    
}

.hero-logo img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    display: block;
}

.logoL1 {
    z-index: 1;
    animation-name: animateAsideIn;
    animation-duration: 1s;
}

.logoL2 {
    z-index: 1;
    animation-name: shiphover2;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in;
    animation-duration: 5s;
}

.logoL3 {
    z-index: 2;
    animation-name: shiphover;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-duration: 6s;
}

.logoL4 {
    z-index: 3;
    animation-name: fadeInOpacity;
    animation-duration: 1s;
}

.homelogo {
    margin: 0 0 0 60px;
    animation-name: animateAsideIn2;
    animation-duration: 2s;
}

.hero-logo {

}

#header-anim .butttonUp.homebutton {
    margin-bottom: 30px;
    width: 100%;
    padding: 8px 20px;
    font-weight: bold;
    display: block;
}

#header-anim .butttonUp.yellowbtn {
    background-color: #fdef63;
}

#footerside {
    position: fixed;
    bottom: 20px;
    right: 40px;
}

#footerside img {
    height: 60px;
    display: block;
}

@media screen and (max-width: 780px) {
    .hero-logo {
    display: block;
    width: 95vw;
    position: relative;
    margin: 0;
    margin-top: -40px;
    z-index: -1;
    margin-bottom: -90px;
    }
    
    .col-align {
    }
    
    .logoL4 {
        display: none !important;
    }
    
    .homelogo {
        margin: 0 0 0 30px;
    }
    
    .bx-nav {
    margin: 40px 30px 0 30px;
    }
    
    #footerside img {
        height: 40px;
        display: block;
        margin: 0 auto
    }
    
    #footerside {
        width: 100%;
        position: initial;
        display: table;
        padding: 30px;
    }
}