/* MOBILE FIRST STYLE SHEET */

/* Important - this stylesheet is used to extend and override bootstrap styles. */
/* The link to this style sheeet MUST COME AFTER THE LINK TO bootstrap.css */

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


.img {
  height: 300px; width: 300px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.imgab {
  
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

nav {
  margin-top: -40px;
}


#logo {
  width: 50px; height: 90px; 
}

@keyframes breath {
  0%    { background-size: 100% auto; }
  
  100%  { background-size: 120% auto; }
}


h1 {        
          
            font-family: 'Allura', cursive;
            font-size: 65px;
            text-align: center;
            animation-duration: 1.5s;
            animation-name: slidein;
            color: #343a40; 
            background-color:ghostwhite;  
            margin-bottom: 0;
            background-repeat: no-repeat;
            padding-bottom: 50px;
            
}
  


@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}


body        {

            font-family: 'Zilla Slab', serif;
            color: #343a40;
            background-color: ghostwhite;
            background-image:  url(unmarkedimages/coast/cc5.jpg);
            animation: breath 10s linear 1;
            transform: translateZ(0);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100%;
            background-attachment:fixed;
  
           
           
}


main {
  
  background-color: ghostwhite; 
  color: #343a40; margin-bottom: -18px; 
  padding: 50px; 
}

.mainp
 
{
  font-family: 'Zilla Slab', serif;
  text-align: center;
  font-size: 18pt;
  text-shadow: 1.5px 1px #D3D3D3;
}

.small {
  font-size: 8pt;
}

a { 

  color:#343a40; text-decoration: none; }

a:hover {
  font-size: 12pt; color:darkgray; background-color: lightgray; text-decoration: none; 
}

a:active { color: lightgray; background-color: darkgray; }

nav a, nav a:hover {
  
font-size: 14pt; 
}


p {
  
  margin-left: auto;
  margin-right: auto;
  font-size: 14pt; 
  color: #343a40;
  padding-bottom: 10px;
}
  

footer    {
          padding: 5px;
          font-size: 12px;
          text-align: center;
          background-color: ghostwhite;
          color: #343a40;
}


								
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  
.disable-css-transitions {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

  
  header    { font-size: 16pt;}
  
  
  body   { background-size: cover; animation-delay: 1s;transform: translateZ(0); }
  }




/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
 body     {
            font-size: 100%;
      
  }



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

}



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