/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." 
   Potential colors:
   Brown background 
   
    E4BAA3
   
   Turquoise text 
    Dark 007079
    Light 94D2CD
    2A9992
    03818F
    
    
   Peach text 
    Dark FC8F84
    F0838D
   FBDEBE
   F7C4B3
   
   
   */


html,
body {
  margin:0;
  padding:0;
  height:100%;
  
}

body {
  /*94D2CD
  F7C4B3
  Pink #1  255,185,185 FFB9B9
  0 119 119 007777
  
  255 217 179 FFD9B3 Peach
  122 188 188 7ABCBC Turquoise
 
  196 194 207 #C4C2CF Gray
  255 234 213 #FFEAD5 Peach 2
  */ 
  background-color: #FFB9B9;
  
  background-color:#FFD9B3;
  background-image:
  radial-gradient(circle at 100% 150%, #D9D8E0 24%, #FFEAD5 24%, #FFEAD5 28%, #D9D8E0 28%, #D9D8E0 36%, #FFEAD5 36%, #FFEAD5 40%, transparent 40%, transparent),
  radial-gradient(circle at 0    150%, #D9D8E0 24%, #FFEAD5 24%, #FFEAD5 28%, #D9D8E0 28%, #D9D8E0 36%, #FFEAD5 36%, #FFEAD5 40%, transparent 40%, transparent),
  radial-gradient(circle at 50%  100%, #FFEAD5 10%, #D9D8E0 10%, #D9D8E0 23%, #FFEAD5 23%, #FFEAD5 30%, #D9D8E0 30%, #D9D8E0 43%, #FFEAD5 43%, #FFEAD5 50%, #D9D8E0 50%, #D9D8E0 63%, #FFEAD5 63%, #FFEAD5 71%, transparent 71%, transparent),
  radial-gradient(circle at 100% 50%, #FFEAD5 5%, #D9D8E0 5%, #D9D8E0 15%, #FFEAD5 15%, #FFEAD5 20%, #D9D8E0 20%, #D9D8E0 29%, #FFEAD5 29%, #FFEAD5 34%, #D9D8E0 34%, #D9D8E0 44%, #FFEAD5 44%, #FFEAD5 49%, transparent 49%, transparent),
  radial-gradient(circle at 0    50%, #FFEAD5 5%, #D9D8E0 5%, #D9D8E0 15%, #FFEAD5 15%, #FFEAD5 20%, #D9D8E0 20%, #D9D8E0 29%, #FFEAD5 29%, #FFEAD5 34%, #D9D8E0 34%, #D9D8E0 44%, #FFEAD5 44%, #FFEAD5 49%, transparent 49%, transparent);
  background-size: 100px 50px;


  /* background-image: url('./images/TiledBG2.jpg'); font-family: Helvetica, sans-serif;*/
}
   
@keyframes downAndStop {
  0% {
    background-position: top;
  }
  100% {
    background-position: bottom;
  }
}

#cover{
  height: 400px;
  position: relative;
  text-align: center;
  background-image: url('./images/loop/1.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  animation-duration: 8s; /* the duration of the animation */
  animation-timing-function: ease-in-out; /* how the animation will behave */
  animation-delay: 0s; /* how long to delay the animation from starting */
  animation-iteration-count: 1; /* how many times the animation will play */
  animation-name: downAndStop; /* the name of the animation we defined above */
  /* background-position: 10% 10%; */

}

#map-container{
  height: 20%;
  width: 500px;
}
#map{
  position: relative;
  background-image: url('./images/tip.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 454px;
  width: 500px;
  border: 1px solid #ddd;
  background-color: #C0E7F1;
}

#map span{
  font-size: 25px;
}

.pin{
  position: absolute;
  top: 1%;
  left: 1%;
  color: #333;
  
}

.map-img{
  border: 1px solid black;
}


#map span.pin-tag{
  background-color: #C3CACC;
  background-color: rgba(0,0,0,0.5);
  border: 3px solid #333;
  color: #eee;
  padding: 2px;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.8em;
  border-top-left-radius: 5px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  user-select: none;
}


#map span.pin-tag-left{
  position: absolute;
  text-align: center;
  width: 100px;
  left: -105px;
  border-top-right-radius: 5px;
  border-top-left-radius: 25px;

}

#map span.pin-active{
  background-color: red;
}

#pin-tijuana{
  top: 59%;
  left: 68%;
}

#pin-portland{
  top: 4%;
  left: 59%;
}

#pin-sanfrancisco{
  top: 29%;
  left: 53%;
}

#pin-slo{
  top: 45%;
  left: 58%;
}

#pin-maui{
  top: 78%;
  left: 14%;
}


#pin-cabo {
    top: 92%;
    left: 85%;
}


.clickable-div 
    {
         cursor: pointer;
    }
#cover-text{
  position: absolute;
  top: 30%;
  left: 1%;
}

h1{
  color: #eee;
  font: 800 40px/0.8  'Kaushan Script';
  text-shadow:2px 2px 10px #000;
  margin: 0.5em 0 0 0;
  line-height: 1.3em;

  /* color: #;
   
  03818F
  text-shadow: 2px 2px 4px #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
  background-color: #FC8F84;
  font: 400 70px/0.8  sans-serif;
      color: #FC8F84;
  background-color: #007079;
  */
}

#content{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 60em;
  padding-bottom:1em;
  z-index: 1; 
  text-align: center;
}

.content-section {
  padding: 1.5rem 1.5rem 0 1.5rem ;
  border-radius: 0.3em;
}

.section-title{
  color: #F0838D;
}
  
.container {
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#override .bg-dark{
  background-color:#03818F !important;
}
#override .navbar-brand{
  font-weight: bold;
  font-size: 1.5em;
}

#override span.nav-link{
  padding: 0;
  cursor: pointer;
}


#override span.active{
  color: red;
}

#override .blockquote{
  color: #333;
  border: 2px solid #000;
  margin: 10px;
  background-color: white;
  
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  transition: 0.5s;
}


#override .pad-bot{
  margin-bottom: 20px;
}

.no-padding{
  padding: 0;
  height: 400px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}



.carrousel-quote{
  min-height: 200px;

}


.spacer{
  padding-top: 2em;
}

.spacer-sm{
  padding-top: 3em;
}
.qr-img{
  border: 1px solid #ddd;
  border-radius: 5px;
}

.justify{
  text-align: justify;
}


.announcement{
  font-size: 1.5em;
  height: 300px;
}

hr.fading-line { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #ccc, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #ccc, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #ccc, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #ccc, #f0f0f0); 
  margin-top: 2em;
  margin-bottom: 2em;
  width: 50%;
}

.story-janessa{
  background-color: #EBFFEA; 
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px; 
}

.story-joseluis{
  background-color: #E0D5E8; 
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px; 
}