body{margin: 0;font-size:62.5%;}
h1, h2, h3, h4, h5, h6{font-family: 'Lato', sans-serif;}
p, span, #content ul li, .btn, .homeRight ul li{font-family: 'Comfortaa', sans-serif;font-size: 1.75em; line-height: 25px;color:#444545;}
h2 + p{margin-top:0;}
h3 + p{margin-top:0;}
a{text-decoration: none;}
header{margin:20px 0;padding:0 6%;display: -webkit-box;display: -ms-flexbox;display: flex;}
.logo{display: -webkit-box;display: -ms-flexbox;display: flex;}
#logo{width:400px;max-width: 100%;}
.displayNone{display: none;}
#navWrap{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex:1;-ms-flex:1;flex:1;position: relative;flex-direction: column;flex-basis: 100%;}

.socialWrap{align-self: flex-end;margin-right:40px;margin-bottom: 30px;}
.socialWrap a i{color:#444545;font-size: 3em;margin-left:15px;-webkit-transition: all 0.5s ease-out;
    -webkit-transition:  0.5s ease-out;
    transition:  0.5s ease-out;}
.socialWrap a:first-child i{margin-left: 0;}
.socialWrap a:hover i{color:#d55455;}
.socialWrap a span, #link span, #myBtn span, #handler span{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.socialWrap #link2{display: inline-block;width: 33px;
vertical-align: bottom;border-right: 1px solid #454545;
padding-right: 10px;-webkit-transition: all 0.5s ease-out;-webkit-transition:  0.5s ease-out;transition:  0.5s ease-out;}
.socialWrap #link2:hover{opacity: 0.5;}
nav{position: relative;}

nav ul{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align: center;align-self: center;justify-content:flex-end;}
nav li{list-style-type: none;margin:0 1.75vw;}
nav li a{text-decoration: none;color:#444545;font-family: 'Comfortaa', sans-serif;font-size: 1.65em; font-weight:700;-webkit-transition: all 0.5s ease-out;
    -webkit-transition:  0.5s ease-out;
    transition:  0.5s ease-out;}
nav li a:hover{color:#88B1BA;}
#handler{display: none;}
a.donate{background-color:#d55455;padding:10px 20px;color:#FFF;text-transform: uppercase;    -webkit-transition: all 0.5s ease-out;
    -webkit-transition:  0.5s ease-out;
    transition:  0.5s ease-out;font-size:1.5em;}
a.donate:hover{background-color: #fcb215;color:#d55455;}
button{background-color: transparent;}

.alert{text-align: center;background-color:#D45354;padding:15px 20px;}
.alert p{color:#FFF !important;}
.alert p a{color:#FFF !important;text-decoration: underline;}
.alert p a:hover{text-decoration: none;color:#fcb215 !important;}

.heroWrap{}
.hero{/*height:620px;*/height:750px;width:100%;background-image: url(./images/hero-bck-covid19.jpg);background-position: top;background-size: cover;}
.heroTextWrap{
    width:100%;
    height:100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.heroText{color:#FFF;text-align: center;width:50%;margin: 0 auto;}
.heroText h1{font-size: 7em;text-shadow:1px 1px 30px rgba(0,0,0,.8);color:#FFF;}
.heroText span{display: block; font-size:5em;font-weight: 700;text-shadow:1px 1px 30px rgba(0,0,0,.8);color:#FFF;line-height: 52px;}
.heroText p{font-size:3em;text-shadow:1px 1px 25px rgba(0,0,0,.8);color:#FFF;line-height: 43px;}

.homeWrap{display:-webkit-box;display:-ms-flexbox;display:flex;}
.homeLeft{background-color: #88B1BA;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-preferred-size: 60%;flex-basis: 60%;padding:5% 10%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.homeLeft h2{font-size: 3.4em;color:#FFF;}
.homeLeft p{color:#FFF;}
.homeLeft .btn, .homeRight .btn{text-align:center;}
.homeRight{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-preferred-size: 40%;flex-basis: 40%;padding:5% 10%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.homeRight h2{font-size: 3.4em;}
.homeRight h3{font-size: 2.5em;}

.homeContentRight{display:flex;align-items:center;}
.homeContentRight div:nth-of-type(2){padding-left:10px;}

.spacer{background-color: #F8F3E2;height:80px;content:"";}


.titleWrap{display:-webkit-box;display:-ms-flexbox;display:flex;height:230px;}
.titleLeft{background-color: #88B1BA;padding-right:5%;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-preferred-size: 40%;flex-basis: 40%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;text-align: right;}
.titleLeft h1{color:#FFF;text-transform: uppercase;font-size: 5em;border-bottom: 8px solid #F8F3E2;}
.titleRight{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-preferred-size: 60%;flex-basis: 60%;}
.services{background-image: url(./images/services-bck.jpg);background-position: top;background-size:cover;}
.responder{background-image: url(./images/responder-support.jpg);background-position: center;background-size:cover;}

#content{margin:40px 0;padding:0 6%;}
#content h2{font-size: 4em;color: #444545;margin-bottom: 5px;}
#content h3{font-size: 3em;margin-bottom: 5px;color: #444545;}
#content h4{font-size: 2em;margin-bottom: 5px;color: #444545;}
#content a{color:#D45354;-webkit-transition: all 0.3s ease-out;
    -webkit-transition:  0.3s ease-out;
    transition:  0.3s ease-out;}
#content a:hover{color:#88B1BA;}
#content ul.count2{
    -webkit-column-count: 2;
    column-count: 2;
}
#content a.btn{color:#FFF;}
#content a.btn:hover{color:#D45354;}
.contentFlex{display: flex;justify-content: space-between;}
.mainContent{flex-basis: 80%;}
.col50percent{flex-basis: 45%;}

.btn{color:#FFF;text-transform: uppercase;padding:20px 40px;background-color:#d45455;display: inline-block;-webkit-transition: all 0.5s ease-out;
    -webkit-transition:  0.5s ease-out;
    transition:  0.5s ease-out;}
.btn:hover{background-color: #fcb215;}
.heroText a[href^="tel:"], .homeLeft a[href^="tel:"] {color: #FFF;}
.mxflag{width:30px;height: auto;vertical-align: bottom;}
#link a{color:#88B1BA;}
#link a:hover{color:#d45455;}

.servicesWrap{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.service{-ms-flex-preferred-size: 45%;flex-basis: 45%;}

.faqWrapper{padding:0 10%;}

.faqWrapper h2{font-size: 2em !important;margin:0;color:#FFF !important;text-transform: none !important;font-weight: 400 !important;margin-bottom: 10px !important;}


.accordion-controls div div{display: none;}
.accordion-controls div h3{border:0;padding:20px 30px;cursor: pointer;color:#FFF !important;}
.accordion-controls div:nth-child(4n+1) h3{background-color: #1c505b;}

.accordion-controls div:nth-child(4n+2) h3{background-color: #388f63;}
.accordion-controls div:nth-child(4n+3) h3{background-color: #a24500;}
.accordion-controls div:nth-child(4n+4) h3{background-color: #1f0b70;}
.accordion-controls div h3 i{float:right;}

.faqs div h3{font-size: 2em !important;}

.acordWrap{display: table;table-layout: fixed; width:100%;background-color: #88B1BA;}

.accordion {
  
  color: #FFF;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
    display: table-cell;
}

.faqActive, .accordion:hover {background-color: #ccc;}

.plus {
  content: '\f067';
  font-family: "Font Awesome 5 Free";  
  color: #FFF;
  font-weight: bold;
  display: table-cell;
  margin-left: 5px;
}


.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
}

.middleTxt{
    padding:40px 10%;
    text-align: center;
}
.faqSection{background-color:#eaeaea;padding:2% 6%;}
.faqSection h2{font-size: 4em;color: #444545;margin-bottom: 5px;}
.faqSection h3{font-size: 2em;}

select{padding:10px;font-family: 'Lato', sans-serif;color: #444545;border:2px solid #d45455}

footer{margin:40px 0;text-align: center;font-weight: 600;}
footer .copyright{font-size: 1.5em;}
footer #link{font-size:2.5em;}

/***CORONAVIRUS***/

.coronaLeft{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-preferred-size: 60%;flex-basis: 60%;padding:5% 10%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.coronaLeft h2{font-size: 3.4em;color:#FFF;}
.coronaLeft p{color:#FFF;}
.coronaLeft .btn, .homeRight .btn{text-align:center;}

.coronaRight{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-ms-flex-preferred-size: 40%;flex-basis: 40%;padding:5% 10%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.coronaRight h2{font-size: 3.4em;}
.coronaRight h3{font-size: 2.5em;}


.coronaBox{padding: 40px 40px 0px;flex-basis: 50%;}
.coronaBox h2{color:#FFF;font-size: 4em;}
.coronaBox p{color:#FFF;}
.coronaBox .box{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.coronaBox .box .boxImg{flex:1;text-align: center}
.coronaBox .boxContent{flex-basis: 75%;}
.boxContent .boxTop{padding:20px;}
.boxContent .boxBtm{padding:20px;}
.coronaBox .moreBtn{margin: 40px 0px;text-align: right;}
.coronaBox .moreBtn a{background-color: #db9d2f; padding: 10px 30px; color: #ffffff;font-size: 1.75em;font-family: 'Comfortaa', sans-serif;}
.coronaBox .moreBtn a:hover{background-color:#bf8728;}
.checker{margin-left:10px !important;}

.coronaBlue{background-color:#02697c;}
.coronaGreen{background-color: #51a97c;}
.coronaOrange{background-color: #cd5802;}
.coronaPurple{background-color: #2a128d;}
.coronaYellow{background-color: #db9d2f;}
.coronaDarkBlue{background-color: #1c505b;}
.coronaDarkGreen{background-color: #388f63;}
.coronaDarkOrange{background-color: #a24500;}
.coronaDarkPurple{background-color: #1f0b70;}

.flexWrap{flex-wrap: wrap;}
.fullWidthLink{background-color:#d55455;padding:20px;text-align:center;width:100%;}
.fullWidthLink a{color:#FFF !important;font-size: 1.75em;}

.redBoxLink{background-color:#d55455;padding:20px;text-align:center;}
.redBoxLink a{color:#FFF !important;font-size: 1.75em;}

.heroBtns{justify-content: space-around;margin-top:10px;}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #444545; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

#myBtn:hover {
    background-color: #d55455; /* Add a dark-grey background on hover */
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
#content h3 [name]{color:#444545;}
.sideBar{width: 25%; margin-left: 40px;}
.greenBoxed{background-color:#cce5ea;padding:20px;}
.testing{display: flex;flex-wrap: wrap;justify-content: space-around;}
.testing div{flex-basis: 30%;margin-bottom: 60px;}
.testing img{max-width: 400px;width:100%;height:auto;}



.numbersWrap{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-bottom: 1px solid #000;padding:40px 0;font-family: 'Lato', sans-serif;}
.numbersWrap > div{-webkit-box-flex:1;-ms-flex:1;flex:1;}
.numbers{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; padding:0 40px;border-right: 1px solid #000;}
.pos{text-align: center;}
.bigNo{font-size: 8em;display: block;color:#1C505B;}
.medNo{font-size: 4em;padding-right: 10px;color:#388f63;}
.desc{display: block;text-transform: uppercase;font-size: 2em;color:#444545;margin-top: -10px;}
.descSm{font-size: 1em;color:#444545;}
.by{font-size: 1.5em;color:#444545;}
.testedWrap{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding:0 20px 0 30px;}
.tested{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.tested:nth-child(1){padding-bottom: 10px;}
.dataStacked{padding:0 40px;text-align: center;}
.pos .bigNo{color:#d55455;}


/***MEDIA QUERIES***/
@media only screen and (min-width: 600px) {
    #casesMap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
} 
    #casesMap iframe{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 1490px) {
    nav li{margin:0 1vw;}
}

@media only screen and (max-width: 1274px) {
    #logo{max-width: 400px;}
    ul{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
    li{margin: 0;}
    #handler::before{font-family: "Font Awesome 5 Free";content: "\f0c9"; font-weight: 900;}
    #handler.active::before{font-family: "Font Awesome 5 Free";content: "\f00d"; font-weight: 900;position: absolute;z-index: 9999;}
    #handler{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: right;
        content:"";
        width:40px;
        height:40px;
        -ms-flex-item-align: center;
        align-self: flex-end;
        z-index: 9999;
        display: block;
        padding: 2vw;
        font-size: 3vh;
        border: none;
        outline: none;
        cursor: pointer;
        margin-right: 40px;
  }
    header nav{display: none;}
    header nav.responsive{display: block;position: fixed;width: 100%;background-color:#88B1BA;top:0;left: 0;height: 100vh;width:100vw;z-index: 9998;}
    header nav.responsive ul{    
    display: -webkit-box;    
    display: -ms-flexbox;    
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    list-style-type: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 10px 0;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    }
    header nav.responsive ul li{padding:10px 0;}
}

@media only screen and (max-width: 924px) {
    .homeWrap{flex-direction: column;}
    .coronaBox .boxContent{flex-basis: auto;}
    #content ul.count2{
        -webkit-column-count: auto;
        column-count: auto;
    }
    .titleRight{-ms-flex-preferred-size: 5%;flex-basis: 5%;}
    .service{-ms-flex-preferred-size: 100%;flex-basis: 100%;}
	.hero{height:100%;}
	.heroTextWrap{padding:50px 0;}
	.homeContentRight{flex-direction:column;}
    .contentFlex{flex-direction: column;}
    .order1{order:-1;}
    .heroText .btn{margin-bottom: 20px;} 
    .sideBar{width:100%;margin: 0;}
}

@media only screen and (max-width: 790px) {
    header{flex-direction: column;align-items: center;}
    .socialWrap{margin-right: 0;}
    #handler{width:100%;margin-right: 0;text-align: center;}
    .testing{flex-direction: column;text-align: center;}
}

@media only screen and (max-width: 600px) {
    #content{text-align: center;}
    #content ul li {text-align: left;}
    header a{-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size: 60%;flex-basis: 60%;}
    #logo{max-width: 100%;height: auto;}
    .hero{height: 100%;}
    .heroText{width: 90%;}
    .heroText h1{font-size:5em;}
    .homeWrap{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;text-align: center;}
    .titleLeft h1{font-size: 11vw;}
    .homeLeft, .homeRight{-webkit-box-flex:0;-ms-flex:none;flex:none;-ms-flex-item-align: stretch;align-self: stretch;text-align: center;}
    .faqWrapper{padding:0;}
    .checker{display: inline-block;margin-left:0;}
    .numbersWrap{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
    .dataStacked{padding:0 10px;}
    .numbers{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;border-right: 0;padding:40px 0;}
}