/* 

    FILE SETUP SECTION

*/
body {
    font-family: Arial, Helvetica, sans-serif;
}


/*

    GENERAL STYLES

*/
.bg-color {
    display: inline-block !important;
    padding-bottom: 2%;
}

.bg-color .yellow-color {
    display: inline !important;
    background: #fff200 !important;
    color: black !important;
    padding: 1% 1%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.bg-color .black-color {
    display: inline !important;
    background: black !important;
    color: white !important;
    padding: 1% 1%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ben's styles */
.white-bg-color {
    display: inline !important;
    background-color: white !important;
    color: black !important;
    padding: 1% 1% !important;
    white-space: normal !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.black-bg-color {
    display: inline !important;
    background-color: black !important;
    color: white !important;
    padding: 1% 1% !important;
    white-space: normal !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.yellow-bg-color {
    display: inline !important;
    background-color: #fff200 !important;
    color: black !important;
    padding: 1% 1% !important;
    white-space: normal !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}



/*
    Quick mosquito facts
*/


.hero-mosquito-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}


.jumbo-img {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
}

#mosquito-facts-jumbo {
    background-image: url('../images/biting-insects/mosquito-facts-img.jpg');
    background-size: 100% 100vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000;
}

.scroll-text-img {
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 5%;
}

.hero-mosquito-section .text-container {
    color: white;
    font-size: 20px;
}

.bg-color-right {
    display: inline-block;
}

.bg-color .yellow-color {
    display: inline;
    background: #fff200;
    color: black;
}

.bg-color .black-color {
    display: inline;
    background: black;
    color: white;
}

.text-container {
    top: 0;
    position: relative;
}

@media (max-width: 768px) {
    .hero-mosquito-section .text-container {
        background: #000;
    }
 
}



/* 
    Biting flias section 
*/
.biting-flies-section {
    height: 45vw;
    width: 100%;
}

.biting-flies-container {
    height: 100%;
    width: 100%;
}

#biting-flies-img {
    background-image: url('../images/biting-insects/biting-flies-img.jpg');
    position: relative;
    background-size: 100% 100% !important;
}

.biting-flies-section .biting-flies-header {
    text-align: center;
    background-color: #fff200;
    height: 10vh;
    font-size: 1vw;
}

.biting-flies-text {
    position: absolute;
    bottom: 1vw;
    right: 1.5vw;
    width: 32%;
}

.biting-flies-text p {
    font-size: 20px;
}


@media (max-width: 1135px) {
    .biting-flies-text {
        width: 50%;
    }
    .biting-flies-text p {
        font-size: 1.7vw;
    }
}

@media(max-width: 768px) {
    .hero-mosquito-section {
        height: auto;
    }

    .hero-mosquito-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    #mosquito-facts-jumbo {
        background-attachment: scroll;
    }

    #mosquito-facts-mob-alt {
        height: auto;
        width: 100%;
    }

    .text-container {
        padding: 1vw;
    }

    .bg-color {
        font-size: 20px;
        width: 100%;
    }
}


/* 
    Biting flies facts section (part 2)
*/

.biting-flies-facts {
    height: auto;
    width: 100%;
    padding: 5% 0;
}

.biting-flies-facts-container {
    padding-top: 1.5%;
}

.biting-flies-facts-container p {
    font-size: 18px;
}

#sand-flies-art {
    height: 17vw;
    width: auto;
}

#sandflies-bites-circle {
    height: 20vw;
    width: auto;
}

.biting-flies-facts .appearance-list {
    font-size: 1.2vw;
    list-style-type: square;
}

@media (max-width: 768px) {
    .biting-flies-section {
        height: auto !important;
    }

    .biting-flies-facts {
        height: auto;
    }

    #sand-flies-art {
        height: 40vw;
        width: auto;
    }

    #sandflies-bites-circle {
        height: 45vw;
        width: auto;
    }

    #sand-fly-mob-img {
        height: auto;
        width: 100%;
    }

    .biting-flies-text-container {
        padding: 1vw;
    }

    .biting-flies-text-container {
        font-size: 19px;
    }

    .biting-flies-facts .appearance-list {
        font-size: 19px;
    }
}

/*
    Leaches suck section
*/


.leaches-img-container {
    height: 100%;
    width: 100%;
}


#leaches-background-img {
    background-image: url("../images/biting-insects/leach-background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;   
}

.leaches-img-container .container {
    padding-top: 5%;
} 

/*.leaches-img-container {

}*/

.text-contianer {
    font-size: 1.3vw;
}

.leaches-img-section .leech-facts-header {
    text-align: center;
    background-color: #fff200;
    height: 10vh;
    font-size: 1vw;
}




/*
    Leech facts danger section
*/

.leech-facts-danger-section {
    height: auto;
    width: 100%;
    padding-top: 3%;
    padding-bottom: 6%;
}

.leech-facts-danger-container {
    height: 100%;
    width: 100%;
}

#leech-up-close {
    height: 25vw;
}


/*@media (max-width: 992px) {
    .leech-facts-danger-section {
        height: auto;
        text-align: center;
    }
}*/

@media (max-width: 768px) {
    .leech-facts-danger-section {
        height: auto !important;
    }
    
    .leech-facts-danger-container .resize, .leech-facts-danger-container .resize-lg {
        font-size: 19px;
    }

    #leech-up-close {
        height: 250px;
    }

    #leech-img-mob {
        height: auto;
        width: 100%;
    }

    .leech-text-container-mob {
        padding: 1vw;
    }
}

/*

    MOSQUITO HISTORY

*/
.mos-history-section {
    height: 87vh;
    background: #FFF200;
}

.mos-history-section .mos-his-header {
    text-align: center;
    background-color: #fff200;
    height: 5vh;
    font-size: 1vw;
}

.mos-history-section .mos-history-container {
    background-image: url('../images/biting-insects/dino.png');
    background-size: 100% 100%;
    height: 82vh;
    position: relative;
}

.mos-history-section .mos-history-container .row .col-md-8 .col-container {
    text-align: right;
    position: absolute;
    bottom: 0;
}

.mos-history-section .mos-history-container .row .col-md-8 .col-container span {
    font-size: 1.3vw;
}
/* MOSQUITO HISTORY MOBILE */
.mos-history-section .mos-history-sec-mob {
    display: none;
}
@media (max-width: 768px) {
    .mos-history-section .mos-history-sec-mob {
        display: block;
    }

    .mos-history-section {
        height: auto;
        background: none;
    }

    .mos-history-section .mos-history-holder {
        display: none;
    }

    .mos-history-section .mos-history-sec-mob .mos-his-header-mob {
        text-align: center;
        background-color: #fff200;
    }

    .mos-history-section .mos-history-sec-mob .mos-his-header-mob h2 {
        margin: 0;
    }

    .mos-history-section .mos-history-sec-mob img {
        max-width: 100%;
    }
    
    .col-container {
        padding-left: 1%;
        background: #000;
    }
}



/*

    MOSQUITO IMPACT PART 1

*/
.mos-impact-p1-section {
    height: auto;
    padding-top: 5%;
}

.mos-impact-p1-section .mos-impact-p1-header {
    font-size: 1vw;
    text-align: center;
}

.mos-impact-p1-section .mos-impact-p1-container .row .col-md-4 {
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 0;
    text-align: center;
    font-size: 1.2vw;
}

.mos-impact-p1-section .mos-impact-p1-container .row .col-md-4 img {
    margin: 0 auto;
    display: block;
    width: 60%;
    padding-bottom: 1vw;
}
/* MOSQUITO IMPACT PART 1 */
@media (max-width: 768px) {
    .mos-impact-p1-section {
        height: auto;
    }

    .mos-impact-p1-section .mos-impact-p1-container .row .col-md-4 p {
        font-size: 4vw;
    }

    .mos-impact-p1-section .mos-impact-p1-container .row .col-md-4 img {
        width: 50%;
    }
}




/*

    MOSQUITO IMPACT PART 2

*/
.mos-impact-p2-section {
    height: auto;
    padding-top: 3%;
    padding-bottom: 5%;
}

.mos-impact-p2-container .row .col-md-5 {
    padding-left: 3vw;
    padding-right: 3vw;
    font-size: 1.2vw;
    text-align: center;
}

.mos-impact-p2-container .row .col-md-5 img {
    padding-bottom: 1vw;
    width: 50%;
}

.mos-impact-p2-container .row .col-md-7 {
    padding-left: 3vw;
    padding-right: 3vw;
    font-size: 1.1vw;
    text-align: center;
}

.mos-impact-p2-container .row .col-md-7 img {
    padding-bottom: 1vw;
    width: 35%;
}

.mos-impact-p2-container .row .col-md-7 .row .col-md-6 {
    font-size: 1.2vw;
}
/* MOSQUITO IMPACT PART 2 MOBILE */
@media (max-width: 768px) {
    .mos-impact-p2-section {
        height: auto;
    }

    .mos-impact-p2-container .row .col-md-7 img {
        width: 50%;
    }

    .mos-impact-p2-container .row .col-md-5 p {
        font-size: 4vw;
    }

    .mos-impact-p2-container .row .col-md-7 .row .col-md-6 {
        font-size: 4vw;
    }
}




/*

    MOSQUITO IMPACT PART 3

*/
.mos-impact-p3-section {
    height: 46vw;
    background-image: url('../images/biting-insects/army-dead-mos.png');
    background-size: 100% 100%;
    text-align: center;
    /*background-attachment: fixed;*/
}

.mos-impact-p3-section .mos-impact-p3-header {
    padding: 1%;
}

.mos-impact-p3-section .row .col-md-4 .p3-container-text p {
    font-size: 1.5vw;
}


/*@media (max-width: 500px) {
    .p3-container-text, .p4-container-text {
        top: 50% !important;
    }
}*/

/* MOSQUITO IMPACT PART 3 MOBILE */
@media (max-width: 768px) {
    /*.mos-impact-p3-section {
        height: 100%;
        background-attachment: scroll;
    }

    .mos-impact-p3-section {
        background-size: 350% 350%;
    }*/

    .mos-impact-p3-section {
        height: 60vw;
    }

    .mos-impact-p3-section .row .col-md-4 .p3-container-text p {
        font-size: 4vw;
    }
}



/*

    MOSQUITO IMPACT PART 3

*/
.mos-impact-p4-section {
    height: 45vw;
    background-image: url('../images/biting-insects/caveman.png');
    background-size: 100% 100%;
    text-align: center;
    /*background-attachment: fixed;*/
}

.mos-impact-p4-section .mos-impact-p4-header {
    color: white;
    padding: 1%;
}

.mos-impact-p4-section .row .col-md-4 .p4-container-text p {
    font-size: 1.5vw;
}
/* MOSQUITO IMPACT PART 4 MOBILE */
@media (max-width: 768px) {
    /*.mos-impact-p4-section {
        height: 100%;
        background-attachment: scroll;
    }

    .mos-impact-p4-section {
        background-size: 500% 350%;
    }*/

    .mos-impact-p4-section {
        height: 60vw;
    }

    .mos-impact-p4-section .row .col-md-4 .p4-container-text p {
        font-size: 4vw;
    }
}





/*

    MOSQUITO LIFE CYCLE SECTION

*/
.mos-cycle-section-p1 {
    height: auto;
}

.mos-cycle-section-p1 .mos-cycle-p1-header {
    text-align: center;
    background-color: #fff200;
    height: 10vh;
    font-size: 1vw;
}

.mos-cycle-section-p1 .mos-cycle-p1-container {
    background-image: url('../images/biting-insects/life-cycle.png');
    background-size: 100% 100%;
    height: 45vw;
    background-repeat: no-repeat;
}

.mos-cycle-section-p1 .mos-cycle-p1-container .row .col-md-5 .col-container {
    padding-top: 26vw;
}

.mos-cycle-section-p1 .mos-cycle-p1-container .row .col-md-5 .col-container > span {
    text-align: center;
    font-size: 1.2vw;
}



/*

    MOSQUITO PREVENTION

*/
.mos-prevention-section {
    height: auto;
}

.mos-prevention-section .mos-prevention-header {
    text-align: center;
    background-color: #fff200;
    height: 10vh;
    font-size: 1vw;
}

.mos-prevention-section .mos-prevention-container {
    background-image: url('../images/biting-insects/deck-swamp-bg.png');
    background-size: 100% 110%;
    height: auto;
    padding: 5% 0;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
}

.mos-prevention-section .mos-prevention-container .mos-prevention-container-2 {
    background-color: white;
    width: 80vw;
    height: auto;
    margin: 0 auto;
    padding: 0 1%;
}

.mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .mos-prevention-header-2 h4 {
    text-align: center;
    font-size: 1.3vw;
    padding: 1vw;
}

.mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md img {
    max-width: 12vw;
    margin: 0 auto;
    display: block;
    padding-bottom: 1vw;
}



.mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md .p-header {
    text-align: center;
    font-size: 1.2vw;
    font-weight: 400;
}

.mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md ul {
    font-size: 1vw;
    padding-left: .5vw;
    list-style-type: square;
}
@media (max-width: 768px){
    .mos-prevention-section::before {
        filter: blur(20px);
    }

    .mos-prevention-section {
        height: auto;
    }

    .mos-prevention-section .mos-prevention-container {
        background-image: none;
        background-color: #f3ea41;
    }

    .mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .mos-prevention-header-2 h4 {
        font-size: 4vw;
    }

    .mos-prevention-section .mos-prevention-header {
        height: auto;
    }

    .mos-prevention-section .mos-prevention-header h3 {
        margin: 0;
    }

    .mos-prevention-section .mos-prevention-container {
        height: auto;
    }   

    .mos-prevention-section .mos-prevention-container .mos-prevention-container-2 {
        position: static;
        top: 0;
        transform: translateY(0);
        height: auto;
        margin-top: 3vw; margin-bottom: 3vw;
    }

    .mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md img {
        max-width: 100%;
        width: 90%;
    }

    .mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md .gutters {
        padding-bottom: 0;
    }

    .mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md .p-header {
        font-size: 5vw;
    }

    .mos-prevention-section .mos-prevention-container .mos-prevention-container-2 .row .col-md ul {
        font-size: 4vw;
        padding-left: 1vw;
    }
}

.mid-align {
    height: 100%;
    display: grid;
    align-content: center;
}