/* NAVBAR */

.navbar-brand{
    width: 70%;
}
.main {
    position: relative;
    min-height: 100vh;
    
  }
.pink{
    color: #f859b3;
    font-family: cursive;
    font-weight: bold;
  }
#nav-id{
    background-color: #f859b3;
    border-bottom: 3px solid #26a0ca;
    
}
.show{
    display: block;
}

.message-picture{
    padding-top: 80px;
    margin: auto;
    width: 50%; 
}
.rounded-corners{
    border-radius: 1.5em;
}



#opaque {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    background-color: rgba(0,0,0,0.7);
 
}
* html #opaque {
    position: absolute;
}
#modal{
    
   width: 30%;
   height: 30rem;
   border-radius: 5px;
   text-align: center;
   position: relative;

    
}
.close{
    color: #26a0ca;
    position: absolute;
    top: 11%;
    right: 32%;
    font-size: 42px;
    transform: rotate(45deg);
    cursor: pointer;
    font-family: cursive;
}

.navbar-nav .nav-item .nav-link{
    color:white;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

.active{
    color:#26a0ca;
}

.navbar-nav .nav-item .nav-link:hover{
    color: #26a0ca;
}

.navbar-toggler {
    color: white;
}
.navbar-toggler-icon {
    background-image: url(
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* CAROUSEL */

.carousel-item {
    height: 40rem;
    overflow: hidden;
} 
#small-sub{
    display: block;
}


/* FOOTER */

.footer{
    background-color: #f859b3;
    color:white;
    border-top: 3px solid #26a0ca;
    border-bottom: 10px solid #26a0ca;
}

#foot{
    background-color: #26a0ca;
}

/* LAYOUT */
.flex-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
  }
  #heading-img{
    width: 100%;
}
  #heading-img-container{
    position: relative;
    width: 100%;
  }
  #heading-img-container a {
    position: absolute;
    top: 65%;
    left: 26.5%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }

  
 
.btn{
    color: #FFFFFF;
    background-color: #d63384; 
}

#btn-link2{
    color: #FFFFFF;
    background-color: #d63384; 
    margin-top: 5%;
}

.subscribe{
    background-color: #f859b3;
    padding: 2em;
    border-top: 3px solid #26a0ca;
}
#nav-logo{
     position: absolute;
     overflow: visible;
     left: 27.5%;
     z-index: 100;
     width:40%;
}

#contact-us{
    background-color: none;
}

#btn-link2:hover{
    color:#fff;
    background-color: #b224a3;
    border-color:#d63384;
}
.btn:hover{
    color:#fff;
    background-color: #b224a3;
    border-color:#d63384;
}

a.hov{
    color: white;
    text-decoration: none;
}

a.hov:hover{
    color: #26a0ca;

}


.text-muted{
    font-family: cursive, 'Lato';
    line-height: 1.8em;
}

.pink{
    color: #f859b3; 
}

#carouselExampleIndicators{
    width: 100%;
}

.timer-text{
    font-family: cursive;
    font-size: 32px;
}


  @media screen and (max-width: 768px) {
    #nav-logo{
        display: none;
    }
    .timer-text{
        font-family: 'Lato', sans-serif;
        font-size: 18px;
    }
    
    #opaque {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: none;
        background-color: rgba(0,0,0,0.7);
     
    }
    * html #opaque {
        position: absolute;
    }
    #modal{
      
       width: 70%;
       height: 25rem;
       border-radius: 5px;
       text-align: center;
       position: relative;
       position: fixed;
       top: 20%;
        
    }
    .close{
        color: #26a0ca;
        position: absolute;
        top: 15%;
        right: 10%;
        font-size: 42px;
        transform: rotate(45deg);
        cursor: pointer;
        font-family: cursive;
    }


   }
   @media screen and (max-width: 500px) {

    .close{
        color: #26a0ca;
        position: absolute;
        top: 15%;
        right: 7%;
        font-size: 42px;
        transform: rotate(45deg);
        cursor: pointer;
        font-family: cursive;
    }

    #opaque {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: none;
        background-color: rgba(0,0,0,0.7);
     
    }
    * html #opaque {
        position: absolute;
        width: 100%;
        display: none;
    }
  

   #modal{
      
       width: 80%;
       height: 25rem;
       border-radius: 5px;
       text-align: center;
       position: relative;
       position: fixed;
       top: 20%;
        
    }


   #nav-logo{
       display: none;
   }
  #btn-link{
    font-size: 9px;
   }
   #btn-link2{
    font-size: 9px;
    margin-top: 10%;
   }
  #word-logo{
    width: 30%;
  }
  .text-muted{
    font-family: 'Lato', sans-serif;
    line-height: 1.8em;
}
.timer-text{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.carousel-item {
    width: 100%;
    height: 25rem;
    overflow: hidden;
} 

  }