@import "compass/css3";

html{
    background-color: white;
    min-height: 100%!important;
    height: auto!important;
}

body{
  background-color: white;
  box-shadow: none;
  top: 0!important;
}

body {
  /* #74BDAB, #4AB5C5*/
    background-image: linear-gradient(0deg, #74BDAB, #4AB5C5)!important; 
}

html,main,body{
  background-color: #74BDAB;
  min-height: 100vh!important;
  overflow-x: hidden;
}

.mhlogo{
  max-width: 7rem;
  position: absolute;
  bottom: -6vh;
  right: 0;
  opacity: .7;
}

.goog-te-banner-frame,
#google_translate_element{
  display: none!important;
}

.goog-logo-link {
    display:none !important;
}

.trans-section {
  position: absolute;
  bottom: -6vh;
  left: 0;
  opacity: .7;
}

.trans-section:hover,
.trans-section:focus,
.trans-section:active,
.trans-section:focus-within,
.trans-section:target{
  opacity: 1;
}

.trans-section li a:hover{
  background-color: #74BDAB;
}

.trans-section .bootstrap-select button.btn{
  padding: .5rem 1.6rem;
  font-size: .64rem;
}
    
.trans-section .badge{
  display: none;
  background-color: transparent!important;
  border: none;
  box-shadow: none;
  color: #74BDAB!important;
  font-size: 80%;
  vertical-align: middle;
  margin: 0;
  padding: 1em;
}

.trans-section .badge i{
  cursor: pointer;
}

.trans-section .badge i:active,
.trans-section .badge i:hover{
  color: #4AB5C5;
}

.cover-container{
  background-color: transparent;
  min-width: 100%;
  max-width: unset;
}

.my-auto, .mb-auto{
  margin-bottom: 2em;
}

.masthead{
  margin-bottom: 5rem!important;
}

.masthead h1{
  padding: 1rem;
}

main{
  margin-bottom: 2rem;
  background-color: transparent;
}

main > .container{
  margin: 0 auto;
  padding: 0;
}

.circles .row{
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.5rem;
}

/*CIRCLE SIZE*/
.rounded-circle{
    max-height: 30vh!important;
    max-width: 30vh!important;
    margin: 0 auto;
    padding: 1%;
    min-height: 10vh;
    min-width: 10vh;
    height:30vh;
    width:30vh;
}

.circle-wrapper{
  padding: 0.1rem;
}

.no-border{
  border: none!important;
}

.bottom-border-only{
  border-top: none!important;
  border-left: none!important;
  border-right: none!important;
  border-bottom: 1px solid green;

}


.rounded-circle{
  border: 1px solid green;
  cursor: pointer;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
}

.rounded-circle .card ul{
  border: none!important;
  background-color: transparent!important;
  display: block!important;
  box-shadow: none!important;
}

.rounded-circle .card ul li,
.rounded-circle span{
  background-color: transparent!important;
  display: block!important;
  box-shadow: none!important;
  font-size: 1rem;
  color: green;
}

.rounded-circle .card{
  background-color: transparent!important;
  display: block!important;
  box-shadow: none!important;
  min-width: 100%;
  pointer-events: none;
}

.rounded-circle:hover{
  background-color: #4AB5C5;
}


/*GLOW*/
@-webkit-keyframes pulse {
  0% { box-shadow:0 0 4px darkgreen, inset 0 0 4px darkgreen; }
  50% { box-shadow:0 0 20px darkgreen, inset 0 0 20px darkgreen; }
  100% { box-shadow:0 0 4px darkgreen, inset 0 0 4px darkgreen; }
}

.circle-wrapper.active .circle {
  -webkit-animation: pulse 1s linear 1s infinite;
}

.circle-wrapper.active .circle {
  background-color: #4AB5C5;
}

.circle-wrapper .circle{
  z-index: 2;
}

.circle-wrapper .circle:hover{
  background-color: #4AB5C5;®
}

.p-3,
.cover{
  padding: 0px!important;
}

.jumbotron{
    padding: 0!important;
    margin: 0!important;
    background-color: #74BDAB;
  } 

header{
  position: relative;
  width: 100%;
  min-width: 100%;
  z-index: 3;
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

header .jumbotron .header-text{
  font-size: 2.5rem;
  color: darkgreen;
}

header .jumbotron{

}

header .jumbotron .row{
    -ms-flex-wrap: initial;
    flex-wrap: initial;
}

header .jumbotron .row .header-element-1{
    margin-right: 0;
    padding-right: 0;
}

header .jumbotron .row .header-element-2{
    padding: 0;
}

header .jumbotron .row .header-element-3{
    margin-left: 0;
    padding-left: 0;
}

.textReveal {
    overflow: hidden;
    animation: textRevealAnim 2s ease 0.5s forwards;
}

header .jumbotron img{
  
}

header .jumbotron h3{
  color: darkgreen;
}

header .jumbotron .list-group,
header .jumbotron .list-group *{
    background-color: transparent;
    border: none;
    color: green;
}

header .jumbotron .list-group .list-group-item{
  padding: .25rem;
}

footer{
    bottom: 0;
    margin: 0 auto;
    min-width: 100%;
    background-color: #4AB5C5;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

footer .jumbotron .row{
  padding: .5rem;
  color: green;
  background-color: #4AB5C5;
}



footer img{
  max-height: 3rem;
  margin: 0 auto;
}



.accordions{
  z-index: 5;
  margin-top: 1.5rem;
  background-color: transparent;
}

.accordion{
  display: none;
}

.accordion .card{
  border: 2px solid transparent;
  background-color: transparent;
}

.accordion .card-header{
  border: none;
  background-color: #74BDAB;
  cursor: pointer;
  color: green;
  margin: 0;
  padding: 1rem;
  border: 2px solid transparent;
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.accordion .card.disabled *{
  color: lightgreen;
  text-shadow: none;
}

.accordion .card-header:hover{
  background-color: #4AB5C5;
  border: 2px solid transparent;
}

.accordion .card.open .card-header{
  background-color: #4AB5C5;
}

.accordion .card-header:active{
  text-shadow: none;
}

.accordion .card-header *{
  cursor: pointer;
}


.accordion .card-header h5{
  font-variant: small-caps;
  box-shadow: none;
  color: #FCE699;
  font-weight: bold;
}

.accordion .card.open{
  border: 2px solid darkgreen;
  margin-bottom: 1rem;
}

.accordion .card .card-body{
  display: none;
  background-color: white;
}

.accordion .card.open .card-body{
  display: block;
}

.accordion .card.open .card-header .fa:before {   
  content: "\f078";
}

.accordion .card-header .fa:before {
  content: "\f077";
}

.accordion .accordion-button .flag-icon{
  position: absolute;
  top: 10%;
  right: 2%;
}

.accordion .accordion-button a .flag-icon{
  opacity: .8;
}

.accordion .accordion-button [lang="english"] .flag-icon{
  opacity: .4;
}

.accordion .accordion-button .flag-icon:hover{
  opacity: 1;
}

.accordion .accordion-button [lang="english"]{

}

.accordion .accordion-button [lang="spanish"],
.accordion .accordion-button .notEnglish{
  display: none;
}

.accordion .accordion-button .btn a,
.accordion .accordion-button .btn a:visited{
  color: #FCE699!important;
}



[data-toggle="collapse"] .fa:before {   
  content: "\f078";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f077";
}



.btn{
  border-radius: 0.25rem;
  white-space: nowrap!important;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
}

.btn-success,
.btn-success.dropdown-toggle,
.btn-success.dropdown-toggle:hover, 
.btn-success.dropdown-toggle:focus{
  /*background-color: #74BDAB!important;*/
  background-color:  #4AB5C5!important;
  font-weight: bold;
}



.btn-success:active,
.btn-success:not([disabled]):not(.disabled):active, 
.btn-success:not([disabled]):not(.disabled).active,
.show>.btn-success.dropdown-toggle{
  background-color: #4AB5C5!important;
  color: darkgreen!important;
}


.dropright .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .8em solid transparent;
    border-bottom: .8em solid transparent;
    border-left: 1em solid;
    position: absolute;
    right: 2%;
    top: 30%;
    color: #FCE699;
}

.card-header [aria-expanded='true']{
  border: 1px solid darkgreen;

  /*border when open*/
}

.accordions .btn{
  text-shadow: none!important;
}

.accordions .btn *{
  color: inherit;
}

.accordions .btn:hover{
  color: #FCE699!important;
}


.accordions .btn-group .dropdown-menu .btn{
  background-color: #4AB5C5;
  margin: 0.2rem;
}

.accordions .btn-group .dropdown-menu{
  background-color: #74BDAB;
  padding: 6%;
  -webkit-box-shadow: rgb(0, 0, 0) 0px 10px 13px -7px, -50px -50px 0px -30px rgba(0,0,0,0); 
box-shadow: rgb(0, 0, 0) 0px 10px 13px -7px, -50px -50px 0px -30px rgba(0,0,0,0);
}

.accordions .btn-group{
  background-color: transparent;
}

a.btn i.fas{
  
}


/* TEXT REVEAL ANIMATION */

.textRevealContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*font-family: "Comic Sans MS", cursive, sans-serif;*/
  font-size: 2.5em; /*adjust according to your need*/
  text-align: center; /*in case you write multiline text*/
  min-width: 100%;
}

.textReveal {
  overflow: hidden;
  animation: textRevealAnim 3s ease 0.5s forwards;
}

.textReveal > div {
  padding: 8px 16px;
  transform: translateX(100%);
  border-left: 2px solid #FCE699;
  overflow: hidden;
  animation: textRevealAnim 3s ease 0.5s forwards,
    borderOpacityAnim 3s ease 0.5s forwards;
}

.textReveal > div > div {
  transform: translateX(-100%);
  animation: textRevealAnim 3s ease 0.5s forwards;
}

@keyframes textRevealAnim {
  to {
    transform: translateX(0);
  }
}

@keyframes borderOpacityAnim {
  50% {
    border-left: 2px solid #FCE699;
  }
  100% {
    border-left: 2px solid transparent;
  }
}

.textReveal.x50 {
  transform: translateX(-50%);
}

.textReveal.x100 {
  transform: translateX(-100%);
}

.textReveal.zoom > div {
  transform: translateX(100%) scale(0.5, 0.5);
}

.textReveal.rotateY {
  perspective: 100px; /*adjust according to your need*/
}

.textReveal.rotateY > div {
  transform: translateX(100%) rotateY(20deg);
}

.textReveal.color > div > div {
  background: linear-gradient(
    to right,
    red,
    red 45%,
    orange 45%,
    orange 55%,
    red 55%,
    red
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 300%;
  animation: textRevealAnim 3s ease 0.5s forwards,
    bgShiftAnim 4s ease 0.5s forwards;
}

@keyframes bgShiftAnim {
  to {
    background-position: 100%;
  }
}


.noselect,
svg text {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}






/* MODAL */
.modal-dialog {
      max-width: 80vw;

      margin: 4vh auto;
  }

.modal-header h1.modal-title{
  margin: 0 1rem;
}

.modal-body {
  position:relative;
  padding:0px;
  background-color: black;
}
.close {
  position:absolute;
  right:1rem;
  top:1rem;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}

.modal-header{
    background-color: black;
    border-bottom: none;
    margin-bottom: 0;
  }

.modal-title{
    color: #4AB5C5;
    margin: 0 auto;
    font-weight: bolder;
}

.modal-footer{
  margin: -0.1rem 0 0 0;
  padding:0;
}

#download-button{
  border-radius: 0px;
}

.modal-footer .waves-input-wrapper{
  width: 100%;
  border-radius: 0px;
}



/*
////////VIEWPORT ADJUSTMENTS///////////
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap


/////////// BIGGER THAN///////////////*/
/*/ Small devices (landscape phones, 360px and up)*/
@media (min-width: 360px) { 
 
}

/*/ Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
 
}

/*/ Medium devices (tablets, 768px and up)*/
@media (min-width: 768px){ 

}

/*/ Large devices (desktops, 992px and up)*/
@media (min-width: 992px){ 
 
}

/*/ Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px){ 
 
}

/*/ Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1500px){ 

}




/*///////////// SMALLER THAN /////////////////*/







/*/ Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {   

    /*CIRCLE SIZE*/
  .rounded-circle{
    width: 22vw; 
    height: 22vw;
  }

  .rounded-circle .card ul li.list-group-item,
  .rounded-circle span {
    font-size: 1.4rem;
    padding: 0.4rem;
  }

  header .jumbotron .header-text{
    font-size: 2.3rem;
    padding-right: 1%;
    padding-left: 1%;
  }

  header .header-element img{
    max-height: 12rem;
  }

  header .jumbotron .row .header-element-1{
    margin-right: 0;
  }

  header .jumbotron .row .header-element-2{
      
  }

  header .jumbotron .row .header-element-3{
      margin-left: 0;
  }

/*
  .accordion .card-body{
    padding: 1%;
    text-align: left;
  }

  .accordion .card-body [type="button"]{
    margin: 0.3%;
    padding: 4% 12% 4% 4%;
    font-size: small;
    display: block;
    white-space: normal!important;
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .accordion .card-body .btn-group{
    display: block;
  }

  .accordion .card-body .btn a{
    
  }


  .modal-header .modal-title{
    font-size: 0.8rem;
  }

*/

}



/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {   


    /*CIRCLE SIZE*/
  .rounded-circle{
    width: 28vw; 
    height: 28vw;
  }

  .rounded-circle .card ul li.list-group-item,
  .rounded-circle span {
    font-size: 1.2rem;
    padding: 0.4rem;
  }

  header .jumbotron .header-text{
    font-size: 1.7rem;
    padding-right: 1%;
    padding-left: 1%;
  }

  header .header-element img{
    max-height: 9rem;
  }

  header .jumbotron .row .header-element-1{
    margin-right: 0;
  }

  header .jumbotron .row .header-element-2{
      
  }

  header .jumbotron .row .header-element-3{
      margin-left: 0;
  }

/*
  .accordion .card-body{
    padding: 1%;
    text-align: left;
  }

  .accordion .card-body [type="button"]{
    margin: 0.3%;
    padding: 4% 12% 4% 4%;
    font-size: small;
    display: block;
    white-space: normal!important;
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .accordion .card-body .btn-group{
    display: block;
  }

  .accordion .card-body .btn a{
    
  }


  .modal-header .modal-title{
    font-size: 0.8rem;
  }
*/

}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {   
  
    /*CIRCLE SIZE*/
  .rounded-circle{
    width: 28vw; 
    height: 28vw;
  }

  .rounded-circle .card ul li.list-group-item,
  .rounded-circle span {
    font-size: 1rem;
    padding: 0.4rem;
  }

  header .jumbotron .header-text{
    font-size: 1.4rem;
    padding-right: 1%;
    padding-left: 1%;
  }

  header .header-element img{
    max-height: 8rem;
  }

  header .jumbotron .row .header-element-1{
    margin-right: -24%;
  }

  header .jumbotron .row .header-element-2{
      
  }

  header .jumbotron .row .header-element-3{
      margin-left: -24%;
  }

  .accordion .card-body{
    padding: 1%;
    text-align: left;
  }

  .accordion .card-body [type="button"]{
    margin: 0.3%;
    padding: 4% 12% 4% 4%;
    font-size: small;
    display: block;
    white-space: normal!important;
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .accordion .card-body .btn-group{
    display: block;
  }

  .accordion .card-body .btn a{
    
  }


  .modal-header .modal-title{
    font-size: 0.8rem;
  }


}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {   
    /*CIRCLE SIZE*/
  .rounded-circle{
    width: 28vw; 
    height: 28vw;
  }

  .rounded-circle .card ul li.list-group-item,
  .rounded-circle span {
    font-size: 0.8rem;
    padding: 0.4rem;
  }

  header .jumbotron .header-text{
    font-size: 1.1rem;
    padding-right: 1%;
    padding-left: 1%;
  }

  header .header-element img{
    max-height: 5rem;
  }

  header .jumbotron .row .header-element-1{
    margin-right: -24%;
  }

  header .jumbotron .row .header-element-2{
      
  }

  header .jumbotron .row .header-element-3{
      margin-left: -24%;
  }

  .accordion .card-body{
    padding: 1%;
    text-align: left;
  }

  .accordion .card-body [type="button"]{
    margin: 0.3%;
    padding: 4% 12% 4% 4%;
    font-size: small;
    display: block;
    white-space: normal!important;
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .accordion .card-body .btn-group{
    display: block;
  }

  .accordion .card-body .btn a{
    
  }


  .modal-header .modal-title{
    font-size: 0.8rem;
  }

}

/* Extra small devices (portrait phones, less than 360px)*/
@media (max-width: 360px) {

    /*CIRCLE SIZE*/
  .rounded-circle{
    width: 28vw; 
    height: 28vw;
  }

  .rounded-circle .card ul li.list-group-item,
  .rounded-circle span {
    font-size: 0.6rem;
    padding: 0.4rem;
  }

  header .jumbotron .header-text{
    font-size: 0.7rem;
    padding-right: 1%;
    padding-left: 1%;
  }

  header .header-element img{
    max-height: 4rem;
  }

  header .jumbotron .row .header-element-1{
    margin-right: -24%;
  }

  header .jumbotron .row .header-element-2{
      
  }

  header .jumbotron .row .header-element-3{
      margin-left: -24%;
  }

  .accordion .card-body{
    padding: 1%;
    text-align: left;
  }

  .accordion .card-body [type="button"]{
    margin: 0.3%;
    padding: 4% 12% 4% 4%;
    font-size: small;
    display: block;
    white-space: normal!important;
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .accordion .card-body .btn-group{
    display: block;
  }

  .accordion .card-body .btn a{
    
  }


  .modal-header .modal-title{
    font-size: 0.8rem;
  }



}