body { 
color:#3c3c3e!important ;
  
 }
@media (min-width: 768px) {
  .order-md-2 {
    
        align-self: center; 
    }
}


.map {position: relative; width: 100%; height: 100%;}
.map ul {list-style: none}
.map li {position: absolute; /*! background: #107FDB; */ ; border: 1px solid transparent;}
.map .about {display: none; margin: -30px 0 0 20px;background-color: #444;padding: 0 4px!important;}
.map li > a {text-decoration: none; color: #ededed; font-weight: normal; position: relative;width: 8px; height: 8px;z-index:0; background-color: #d32f2f; display: block; padding: 3px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; /*! background: #107FDB */}
.map li > a span {position: absolute; top: 50%; margin-top: -5px; right: 2px; background: #fff; }
.map .right > a {padding: 0 2px 0 20px}
.map .right > a span {left: 2px;}
.map li:hover .about {display: block; padding: .1em; background: #fff; border: 1px solid #ccc;}
.map li:hover > a {background:#81dd13}
.map li:hover {border-bottom:2px solid #81dd13;z-index:1000;}
.map li p {font-size:1rem!important}

 @keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  from { box-shadow: 0 0 0 0px rgba(211, 47, 47); }
  to { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}
/*-------------*/

@keyframes showTopText {
  0% { transform: translate3d(0, 100%, 0); }
  40%, 60% { transform: translate3d(0, 50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes showBottomText {
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.animated-title {
  color: #eee;
  height: 45vmin;
  left: 0;
  position: relative;top: 0;/* transform: translate(-50%, -50%);*/width: 100%;
}

i{
  color:#96da02;font-style: normal; 
}

.animated-title > div { 
  overflow: hidden;
  position: absolute;
  width: 100%; 
}

.animated-title .text-top { 
  height:50%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 55%;   
}

.animated-title > div div {
 font-size: 2rem;line-height:1.4;
  padding: 0.1rem 0;letter-spacing: 0.01em; 
  position: absolute;   font-weight:normal; 
}


.animated-title > div div span {
  display: block;
}
.animated-title > div.text-top {
  border-bottom: 0.2vmin solid rgb(149 218 0 / 68%);
  top: 0;
}
.animated-title > div.text-top div {
  animation: showTopText 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  bottom: 0;
  transform: translate(0, 100%);
}
.animated-title > div.text-top div span:first-child {
  /*color: #8b8b8b;   font-size: 2.3rem;   */
}
.animated-title > div.text-bottom {
}
.animated-title > div.text-bottom h1 {
  animation: showBottomText 0.5s;
  animation-delay: 1.75s;
  animation-fill-mode: forwards;
  top: 0; color:#fff; font-size: 2rem;
  transform: translate(0, -100%);
}
.text-bottom p{display:none;
}

/*---media---*/

@media (max-width: 1110px) {
       .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.5rem;   
  
}
.animated-title {
height: 38vmin;

}
    .animated-title .text-top { 
  height:57%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 57%;   

}
    
.animated-title > div.text-bottom h1 {
 font-size: 1.7rem;
 
  }
}


@media (max-width: 820px) {

   /* .main__top.home {
    background-image: none!important;
  
}*/
.img-fluid {
  max-width: 90% !important;
  height: auto;text-align:center;
}

     .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.20rem; text-align:center;width:100%
}
   
.animated-title {
height: 30vmin;

}
    .animated-title .text-top { 
  height:57%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 57%;   

}
    .animated-title > div.text-bottom h1 {
 font-size: 1.2rem;text-align:center;
 
  }
}


@media (max-width: 560px) {

   /* .main__top.home {
    background-image: none!important;
  
}*/
.img-fluid {
  max-width: 90% !important;
  height: auto;text-align:center;
}

     .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.20rem; text-align:center;width:100%
}
   
.animated-title {
height: 32vmin;

}
    .animated-title .text-top { 
  height:48%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 50%;   

}
    .animated-title > div.text-bottom h1 {
 font-size: 1.2rem;text-align:center;
 
  }
 }
 
 @media (max-width: 400px) {
  
   .animated-title {
    height: 50vmin;

  }
      .animated-title .text-top { 
  height:63%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 65%;   

}
    .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.10rem; 
 }
}



/*---media---*/

@media (max-width: 1050px) {
       .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.5rem;   
  
}
.animated-title {height: 30vmin;}
    .animated-title .text-top { 
  height:57%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 58%;   

}
    
.animated-title > div.text-bottom h1 {
 font-size: 1.7rem;
 
  }
}
@media (max-width: 767.98px) {
    .main__top {
        border-bottom-right-radius: 6.25rem !important;
    }
}


@media (max-width: 820px) {

   /* .main__top.home {
    background-image: none!important;
  
}*/
.img-fluid {
  max-width: 90% !important;
  height: auto;text-align:center;
}

     .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.20rem; text-align:center;width:100%
}
   
.animated-title {
height: 30vmin;

}
    .animated-title .text-top { 
  height:57%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 57%;   

}
    .animated-title > div.text-bottom h1 {
 font-size: 1.2rem;text-align:center;
 
  }
}


@media (max-width: 560px) {

   /* .main__top.home {
    background-image: none!important;
  
}*/
p, ul {
    font-size: 1rem!important;
}
:where(.wp-block-columns.has-background) {
    padding: 0.25em 0.375em!important;
}
.img-fluid {
  max-width: 90% !important;
  height: auto;text-align:center;
}

     .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.20rem; text-align:center;width:100%
}
   
.animated-title {
height: 32vmin;

}
    .animated-title .text-top { 
  height:48%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 50%;   

}
    .animated-title > div.text-bottom h1 {
 font-size: 1.2rem;text-align:center;
 
  }
 }
 
 @media (max-width: 400px) {
  
   .animated-title {
    height: 50vmin;

  }
      .animated-title .text-top { 
  height:63%;
}
.animated-title .text-bottom { 
  height:30%;
  top: 65%;   

}
    .animated-title > div div,
    .animated-title > div.text-top div span:first-child{
     font-size: 1.10rem; 
 }
}





.attribution { 
    font-size: 11px; text-align: center; 
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

h1:first-of-type {
    font-weight: var(--weight1);
    color: var(--varyDarkBlue);

}

h1:last-of-type {
    color: var(--varyDarkBlue);
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.5rem!important;
    }
}

.header {
    text-align: center;
    line-height: 0.8;
    margin-bottom: 50px;
    margin-top: 100px;
}

.header p {
    margin: 0 auto;
    line-height: 2;
    color: var(--grayishBlue);
}


.box p {
    color: #7f8088;
}

.box {
    border-radius: 5px;
    box-shadow: 0px 10px 30px -12px var(--grayishBlue);
    padding: 30px;
    margin: 20px;  
}



@media (max-width: 450px) {
    .box {
        height: 200px;
    }
}

@media (max-width: 950px) and (min-width: 450px) {
    .box {
        text-align: center;
        min-height: 180px;
    }
}

.cyan {
    border-top: 3px solid var(--cyan);
}
.red {
    border-top: 3px solid var(--red);
}
.blue {
    border-top: 3px solid var(--blue);
}
.orange {
    border-top: 3px solid var(--orange);
}

h2 {
    color: var(--varyDarkBlue);
    font-weight: var(--weight3);
}


@media (min-width: 950px) {
    .row1-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .row2-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-down {
        position: relative;
        top: 150px;
    }
    .box {
        width: 30%;
     
    }
    .header p {
        width: 30%;
    }
    
}