html, body{font-family: 'Archivo Narrow', sans-serif;color:white;font-weight:500;}

html {
  scroll-behavior: smooth;
}
a{cursor:pointer;text-decoration: none;color:none!important}
h1{font-weight:700;font-size:48px;margin-bottom:1em !important}
h2{font-size:70px}
h3{font-size:1.5em;color:#8fd5b9;font-weight:600;}
h4{font-size:40px}
h5{font-size:30px}
h6{margin-top:10px!important}
hr{background:white;height:3px;width:30%;margin:auto}
footer{background-color:white;padding:50px 0;color:#333333}
a:hover{text-decoration: none;color:white}

.green-hr{height:50px;width:50%;background-color:#8fd5b9;margin-left:0;margin-bottom:100px}

.green-h3{color:#8fd5b9;}
p{font-size:20px}
header{position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    background:white;
    color:#333333}
.img-trans{transform: rotate(180deg);}
.bottom-cloud{postion:relative;bottom:0;width:100%;height:100px;margin-top:150px}
.green-title{color:#8fd5b9;font-size:90px}

.img-logo{height:50px;margin-right:15px}
.text-logo{font-size:40px;color:#0c5978;font-weight:600;line-height:100px}
.navbar-dark .navbar-nav .nav-link:hover {color:#8fd5b9 !important;text-decoration:underline;}

.background-dark{background:#ddf3f1;color:#333333;}
.background-light{background:white;color:#000726;}
.color-blue{color:#8fd5b9;}
.color-green{color:#8fd5b9}
.color-red{color: lightcoral}

.navbar-dark .navbar-nav .nav-link{color:#0c5978 !important;}
.navbar{padding:0 1rem !important;}
.navbar-brand{padding:0 !important}

#popbg{width:100%;height:100%;background:rgba(60, 60, 60, 80%);z-index:90;display:none;position:fixed;top:0;left:0}
 #monPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 40px 20px;
            background-color: #fff;
            text-align:center;
            color:#333333;
            z-index:99;
        }
.closepop{position:absolute;top:15px;right:15px;font-size:25px;cursor: pointer;}



.first{padding: 150px 0 30px 0;}
.second{padding:100px 0 150px 0}
.third{padding:150px 0 150px 0;}
.fourth{padding:150px 0 0 0;}
.fifth{padding:50px 0 0px 0;}
.sixth{padding:0px 0 0px 0;}
.seventh{padding:100px 0 50px 0}

.tomorrow{border-top:5px solid #0c5978;border-bottom:5px solid #0c5978;padding:30px 0;}




.button-cta{background-color:#8fd5b9;color:white;border:none;padding: 15px 45px;font-weight: 700;font-size: 24px;margin-top: 2em;margin-left:35%;}
.button-cta:hover{background-color: #71ad95;color:none}

.square{border:1px solid #0c5978;border-radius:0px 15px 0px 15px;padding:3%}
.square2{padding:3%}
.square-form{border:1px solid #0c5978;border-radius:0px 15px 0px 15px;padding:6%}
.square-rate{background:rgba(151, 204, 231,0.2);border-radius:0px 15px 0px 15px;padding:3%;width:100%;margin-bottom:15px;color:#333333;}

.icon{width:100%;height:70px;margin-bottom:1rem}

.video{width:1000px;height:580px}
.player{z-index:2;position:relative;}
.video-back{width:400px;height:500px;background-color:#8fd5b9;text-align:bottom;position:absolute;top:130px;right:100px;z-index:1;}
.vid-back{display:none}
.stars{position:absolute;bottom:10px;left:10px;color:white;font-size:20px}

.username{font-weight:600;font-size:20px;margin-bottom:15px}
.title-form{font-size:27px;width:100%;text-align:center;color:#0c5978;font-weight:600;margin-top:40px;margin-bottom:20px}
.over-circle{color:#8fd5b9;font-weight:600;font-size:25px;text-align:right;position:absolute;top:35%;left:0%}
.over-circle2{font-weight:700;font-size:100px}








/*SPECIAL ANIMATION*/
.content {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapper {
  font-size: 40px;
  color:#0c5978;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 50px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
  line-height:46px;
}
.slider-text1 {
  background: #8fd5b9;
  animation: slide 5s linear infinite;
}
.slider-text2 {
  background: #5084bb;
}
.slider-text3 {
  background: lightcoral;
}
@keyframes slide {
  0% {margin-top:-300px;}
  5% {margin-top:-200px;}
  33% {margin-top:-200px;}
  38% {margin-top:-100px;}
  66% {margin-top:-100px;}
  71% {margin-top:0px;}
  100% {margin-top:0px;}
}



/*ACCORDEON FAQ*/

.accordion{width: 70%;margin: auto;margin-top: 50px;}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #03b5d2;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}

/*SLIDER TOP*/

.slider2{
  height: 50px;
  padding-left:0px;
  overflow: hidden;
  font-size:20px;
}
.slider2 div {
  color:#0c5978;
  height: 50px;
  margin-bottom: 50px;
  padding: 0px;
  box-sizing: border-box;
  line-height:46px;
}
.slider2-text1 {
  animation: slider 10s linear infinite;
}
.slider2-text2 {
}
.slider2-text3 {
}
@keyframes slider {
  0% {margin-top:-300px;}
  5% {margin-top:-200px;}
  33% {margin-top:-200px;}
  38% {margin-top:-100px;}
  66% {margin-top:-100px;}
  71% {margin-top:0px;}
  100% {margin-top:0px;}
}


@media all and (max-width: 700px) {

h1{font-size:35px;}
h2{font-size:38px}
h4{font-size:30px}
p{font-size:18px}
.video{width:100%;height:250px;position:absolute;top:0;right:0}
.video-back{width:100%;height:290px;top:10px;right:0px}
.vid-back{z-index:2;position:absolute;top:10px;right:0;width:100%;height:240px;background-image: url("/images/vid-back.png");background-size:cover;display:block;}
.first{padding:100px 0 30px 0}
.third{padding:260px 0 100px 0}
.second{padding:50px 0 100px 0}
.fourth{padding:100px 0 0 0;}
.button-cta{margin-left:0;margin-bottom:2em;}
.square{margin-bottom:10%;}
.slider-wrapper{font-size:26px;display:block}
.slider{margin-top:5%}
.img-logo{height:40px;margin-right:10px}
.text-logo{font-size:30px;line-height:70px}
.square-form{margin-bottom:15%}
.bottom-cloud{margin-top:100px;height:100%}
.green-title{font-size:45px}
.accordion{width:90%;}
.circle-text{margin-right:40px}
#monPopup {position: fixed;left: 10%;top: 10%;transform: translate(-5%, -5%);}
.closepop{position:absolute;top:0px;right:10px;}

}