/*
Template Name: SIVC
Version:1.0


CSS LIST =>

1/========================
WELCOME AREA CSS
2/========================
COUNTER AREA CSS
3/========================
ABOUT AREA CSS
4/========================
MAPS AREA CSS
5/========================
SYMPTOMS AREA CSS
6/========================
BLOG AREA CSS
7/========================
CONTAGION AREA CSS
8/========================
PREVENTION AREA CSS
9/========================
CTA AREA CSS
10/========================
COMMONS AREA CSS

11/========================
PRELAODER CSS

*/





/*========================
WELCOME AREA CSS
*/

.welcome {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 40px;
    height: 60%;
    position: relative;
    z-index: 2;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
}

img.shape {
    position: absolute;
    z-index: -1;
}
.welcome2 img.shape {
    opacity: .1
}

img.shape.shape1 {
    position: absolute;
    top: 12%;
    height: 220px;
    left: -120px;
     -webkit-animation: prespin 15s infinite linear;
             animation: prespin 15s infinite linear;
}

img.shape.shape2 {
    top: 13%;
    right: -15px;
    height: 70px;
}

.welcome_shapes {
    position: absolute;
    right: 5%;
    height: 500px;
    width: 500px;
}

.welcome_shapes__wrap {
    position: relative;
    z-index: 2;
}

img.welcome_shape {
    position: absolute;
}

img.welcome_shape.welcome_shapes1 {
    left: 0;
    bottom: -18px;
   -webkit-animation: updown infinite linear 3s alternate  ;
           animation: updown infinite linear 3s alternate  ;
}

img.welcome_shape.welcome_shapes2 {
    left: 0;
    top: 40%;
    height: 40px;
    
  -webkit-animation: prespin 15s infinite linear;
    
          animation: prespin 15s infinite linear;
}

img.welcome_shape.welcome_shapes3 {
    left: 9%;
    height: 20px;
    top: 30%;
   
  -webkit-animation: prespin 15s infinite linear;
   
          animation: prespin 15s infinite linear;
}
img.welcome_shape.welcome_shapes4 {
    left: 18%;
    top: 21%;
    height: 25px;
   -webkit-animation: prespin 15s infinite linear;
           animation: prespin 15s infinite linear;
}

@-webkit-keyframes updown{
    0%{
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100%{
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
}

@keyframes updown{
    0%{
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100%{
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
}


img.welcome__shape__bg2{
  -webkit-animation: prespin 25s infinite linear;
          animation: prespin 25s infinite linear;
}

img.welcome_shape.welcome_shapes22 {
    left: 20%;
    top: 20%;
}

.welcome_shapes__wrap.wlc__bg2 {
    background: #0B043B;
    border-radius: 50%;
}

.inner__hero img.shape{
    opacity: .1;
}

/*========================
COUNTER AREA CSS
*/

.counters {
    -webkit-box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
    box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
    border-radius: 5px;
}

.single__counter:after {
    position: absolute;
    content: "";
    height: 20px;
    width: 1px;
    background: #E0E0E0;
    right: 0;
    top: 50%;
    margin-top: -10px;
}

.single__counter.no__border:after{
    display: none;
}
.counters__wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 40px 20px;
}

img.counter__bg {
    position: absolute;
    z-index: -1;
    height: 60px;
}

img.counter__bg.counter__bg1 {
    bottom: -20px;
    right: -25px;
}

img.counter__bg.counter__bg2 {
    left: -20px;
    bottom: -20px;
}

.single__counter h2 {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    color: #EB4559;
    margin-bottom: 10px;
}

.single__counter.ctype1 h2 {
    color: #717171;
}

.single__counter.ctype2 h2 {
    color: #55C882;
}

h6.emergency {
    font-size: 11px;
}

h6.emergency a, 
.copyright a:hover {
    color: #EB4559;
    text-decoration: underline;
}
.counter2 .counters{
    background: #2B2A99;
}
.counter2 h2.counter, .counter2 p {
    color: #fff;
}


.counter2 h6.emergency, .counter2 h6.emergency a{
    color: #fff;
}

.counter2 img.counter__bg{
    opacity: .1;
}

/*========================
ABOUT AREA CSS
*/
.about2 img.about__shape{
    opacity: .1
}


.about__area {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

img.about__shape {
    position: absolute;
    z-index: -1;
}

img.about__shape.about__shape1 {
    top: 50%;
    left: -26px;
}

img.about__shape.about__shape2 {
    top: 26%;
    left: 31%;
    height: 30px;
}

img.about__shape.about__shape3 {
    right: -30px;
    top: 34%;
    height: 80px;
}

img.about__shape.about__shape4 {
    right: 4%;
    top: 46%;
    height: 30px;
}



/*========================
MAP AREA CSS
*/

#chartdiv {
  max-width: 100%;
  height: 800px;
  background-color:#090522;
}

.mapimg {
    text-align: center;
    cursor: pointer;
}

.map__area{
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.live__update iframe{
    min-height: 600px;
    width: 100%;
}

/*========================
SYMPTOMS AREA CSS
*/
img.symptom__bg {
    width: 585px;
    position: absolute;
    top: 15%;
    right: 6%;
}
.symptoms__area {
    position: relative;
    z-index: 2;
    overflow: hidden;
}
img.symptom__shape {
    position: absolute;
    z-index: -1;
}

img.symptom__shape.symptom_1 {
    top: 50%;
    left: -30px;
}

img.symptom__shape.symptom_2 {
    top: 36%;
    right: -17px;
    height: 50px;
}

.points ul li {
    position: relative;
    z-index: 2;
    font-size: 18px;
    line-height: 26px;
    color: #6C7083;
    margin-bottom: 20px;
    padding-left: 30px;
}

.points ul li:last-child {
    margin-bottom: 0;
}

.points li i {
    position: absolute;
    left: 0;
    top: 5px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #40CD79;
    -webkit-box-shadow: 0px 5px 24px rgba(54, 207, 118, 0.15);
            box-shadow: 0px 5px 24px rgba(54, 207, 118, 0.15);
}


.symptoms2  img.symptom__shape{
    opacity: .1;
}

/*========================
BLOG AREA CSS
*/

.single__blog {
    position: relative;
    z-index: 2;
    padding-left: 185px;
    margin-bottom: 30px;
}

.single__blog__img {
    position: absolute;
    left: 0;
    max-width: 160px;
    max-height: 130px;
    border-radius: 5px;
    overflow: hidden;
}

.single__blog:last-child {
    margin-bottom: 0;
}

.single__blog a {
    font-family: space_groteskbold;
    font-size: 22px;
    line-height: 30px;
    color: #000000;
    margin-bottom: 10px;
}

.single__blog p.title__top {
    margin-bottom: 15px;
}

a.readmore {
    font-size: 16px;
    line-height: 16px;
    color: #EB4559;
    text-transform: capitalize;
    display: inline-block;
    margin: 0;
    font-family: 'space_groteskbold';
}

a.readmore i {
    padding-left: 4px;
    font-size: 15px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

a.readmore:hover i {
    padding-left: 7px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
.blog__area {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

img.blog__img {
    position: absolute;
    z-index: -1;
}

img.blog__img.blog__img1 {
    top: 50%;
    height: 150px;
    left: -70px;
}

img.blog__img.blog__img2 {
    height: 60px;
    right: -25px;
    top: 50%;
}


.single__blog {
    padding-bottom: 30px;
    position: relative;
    z-index: 2;
}

.single__blog:after {
    position: absolute;
    content: "";
    height: 1px;
    width: 90%;
    background: #E4E4E4;
    bottom: 0;
    left: 5%;
}

.single__blog:last-child:after {
    display: none;
}

.single__blog:hover a {
    color: #EB4559;
}


.blog2 .single__blog a {
    color: #fff;
}
.blog2 .single__blog:hover a {
    color: #E77AEA;
}

.blog2 img.blog__img {
    opacity: .1;
}

a.readmore.readmore2 {
    color: #E77AEA;
}

/*========================
CONTAGION AREA CSS
*/

.single__contagion {
    text-align: center;
    background: #484E68;
    -webkit-box-shadow: 10px 20px 100px rgba(2, 2, 3, 0.05);
            box-shadow: 10px 20px 100px rgba(2, 2, 3, 0.05);
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 35px 30px;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.single__contagion:hover{
    text-align: center;
    background: #606579;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

.single__contagion h3 {
    font-size: 18px;
    line-height: 22px;
    font-family: space_groteskbold;
    color: #fff;
}

.contagion__icon {
    max-width: 100px;
    margin: 0 auto;
    margin-bottom: 23px;
    max-height: 60px;
}

.contagion__icon p {
    color: #fff;
}

.single__contagion p {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #F5F5F5;
}

.contagion__icon img {
    max-width: 100% !important;
    height: 60px;
}

.title.white__title h4, .title.white__title h2 {
    color: #fff;
}

.title.white__title p.title__top {
    background: #2A2143;
}

.title.white__title .points li {
    color: #fff;
}


.contagion {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

img.contagion__img {
    position: absolute;
    z-index: -1;
    opacity: .1;
}

img.contagion__img.contagion__img1 {
    top: 36%;
    left: -68px;
    height: 150px;
}

img.contagion__img.contagion__img2 {
    right: -34px;
    height: 80px;
    top: 40%;
}

img.contagion__img.contagion__img3 {
    right: 3%;
    top: 50%;
    height: 30px;
}

.contagion2 .single__contagion {
    background: #161231;
}
.contagion2 .single__contagion:hover{
    background: #2B2A99;
}


/*========================
PREVENTION AREA CSS
*/

.single__list h3 {
    font-size: 20px;
    line-height: 28px;
    color: #151D41;
    font-family: space_groteskbold;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.single__list:hover h3 {
    color: #EB4559;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.single__list {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
    -webkit-box-shadow: 0px 10px 20px rgba(198, 198, 198, 0.1);
            box-shadow: 0px 10px 20px rgba(198, 198, 198, 0.1);
    background: #fff;
    padding: 30px 30px 30px 140px;
    border-radius: 5px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.single__list:hover{
    -webkit-box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.05);
            box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.05);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}



.single__list__icon {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 30px;
    text-align: center;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.07);
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.07);
    border-radius: 25px;
    top: 20px;
}

.single__list__icon img {
    height: 70px;
    margin-top: 7px;
}

.single__list:last-child {
    margin-bottom: 0;
}

.do__lists h2 {
    margin-bottom: 30px;
    font-size: 20px;
}

h2.should__do span {
    color: #70D37A;
}

h2.should__dont span {
    color: #EB4559;
}
.preventions__area {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

img.prevention__img {
    position: absolute;
    z-index: -1;
}

img.prevention__img.prevention__img1 {
    top: 50%;
    height: 130px;
    left: -60px;
}

img.prevention__img.prevention__img2 {
    right: -73px;
    top: 50%;
    height: 150px;
}

img.prevention__img.prevention__img3 {
    top: 68%;
    height: 40px;
    left: 2%;
}
.preventions2 img.prevention__img{
    opacity: .1
}



.prevention__list2 {
    text-align: center;
    background: #1B163A;
    padding: 30px 14px;
    border-radius: 5px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.prevention__list2 a {
    font-size: 18px;
    font-family: space_groteskbold;
    color: #fff;
}

.prevention__list2__icon {
    height: 90px;
    width: 80px;
    margin: 0 auto;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.prevention__list2__icon img {
    max-height: 75px;
    margin-top: 16px;
}

.prevention__list2:hover {
    background: #2B2A99;
    -webkit-box-shadow: 0px 20px 50px rgba(43, 42, 153, 0.25);
            box-shadow: 0px 20px 50px rgba(43, 42, 153, 0.25);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}
/*========================
CATA AREA CSS
*/

.cta_wrap {
    background: #FFFFFF;
    -webkit-box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
            box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
    border-radius: 7px;
    padding: 50px;
}
.cta_wrap{
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.cta2 .cta_wrap {
    background: #2B2A99;
    -webkit-box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
            box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
}

img.cta__img {
    position: absolute;
    z-index: -1;
}
.cta2 img.cta__img {
    opacity: .1
}
img.cta__img.cta__img1 {
    left: -19px;
    height: 60px;
}

img.cta__img.cta__img2 {
    right: -18px;
    height: 70px;
    bottom: -28px;
}
/*========================
COMMON AREA
*/



p.title__top {
    background: #FDECEE;
    padding: 2px 15px;
    font-size: 13px;
    border-radius: 30px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #EB4559;
    margin-bottom: 30px;
    text-transform: capitalize;
}

p.title__top img {
    padding-right: 5px;
}


.title h1 {
    font-weight: bold;
    font-size: 70px;
    line-height: 80px;

    margin-bottom: 20px;
}

.title h4 {
    font-weight: 500;
    font-size: 20px;
    line-height: 34px;
}

.title h2 {
    font-size: 40px;
    line-height: 40px;
    color: #151D41;
    margin-bottom: 15px;

}

.title2 h1, .title2 h2, .title2 h4, .title2 .points li{
    color: #fff
}


p.title__top.title__top2 {
    background: #351C4A;
    color: #E77AEA;
}img.welcome_shape.welcome_shapes22 {
    left: 20%;
    top: 20%;
}

.welcome_shapes__wrap.wlc__bg2 {
    background: #0B043B;
    border-radius: 50%;
}

.black,
.black a,
.black h1,
.black h2,
.black h3,
.black h4,
.black h5,
.black h6,
.black small,
.red,
.red a,
.red h1,
.red h2,
.red h3,
.red h4,
.red h5,
.red h6,
.red small,
.white,
.white a,
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white small {
    color: #ffffff;
}



/*========================
PRELOADER AREA
*/




.preloader__container {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 30px;
    width: 140px;
    height: 140px;
}



.preloader {
    background: #F4AAAF;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 99999;
    text-align: center;
    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;
}


.preloader.v2{
    background: #0B043B;
}


.preloader img{
  -webkit-animation: prespin 5s infinite linear;
          animation: prespin 5s infinite linear;
}

@-webkit-keyframes prespin { 
  100% { 
    -webkit-transform: rotate(360deg); 
            transform: rotate(360deg); 
  } 
}


@keyframes prespin { 
  100% { 
    -webkit-transform: rotate(360deg); 
            transform: rotate(360deg); 
  } 
}