@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');

:root
{
  --blue:rgb(26, 26, 79);
  --black:#000;
  --white:#fff;
}


body
{
  margin: 0;
  padding: 0;
}
  

h1
{
  text-transform: uppercase;
  font-family: 'Braah One';
  font-weight:700;
}
  

h2 
{
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'Braah One';

}


h3
{
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Braah One';

}


h4 
{
  font-size: 2rem;
  line-height: 1.5;
  color: var(--black);
  padding: 10px;
  margin-bottom: 7px;
  font-weight: 700;
  text-transform: capitalize;
  text-align: justify;
  font-family:Arial, Helvetica, sans-serif;
}  


p
{
  font-size: 2rem;
  line-height: 1.5;
  margin-top: 10px;
  font-weight: 500;
  font-family: 'Calistoga';
}

  
.jumbotron 
{
  background-color: var(--blue);
  color: #fff;
  padding: 60px 30px;
  font-family: 'Braah One';
  width: 100%;
}


.container-fluid 
{
  padding: 10px 20px;
}


.bg-grey 
{
  background-color: var(--white);
}

.logo-small 
{
  color: var(--blue);
  font-size: 50px;
  text-align: center;
  display: block;
}


.thumbnail 
{
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}


.thumbnail img 
{
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

.thumbnail img:hover{
  scale: 1.1;
}

  
.panel 
{
  border: 3px solid rgb(26, 26, 79); 
  transition: box-shadow 0.5s;
}


.panel:hover 
{
    
  box-shadow: 7px 10px 4px gray;
  
}


.panel-heading 
{
  color: #fff !important;
  background-color: rgb(26, 26, 79) !important;
  padding: 10px;
  border-bottom: 1px solid transparent;

}

.panel-footer 
{
  background-color: whitesmoke !important;
}

.panel-footer h3 
{
  font-size: 32px;
}

.panel-footer h4 
{  
  color: white;
  font-size: 14px;
}

.panel-footer .btn
{
  margin: 15px 0;
  background-color: rgb(26, 26, 79);
  color: white;
}

.panel-footer .btn:hover{
  color: #000;
  background-color: transparent;
  scale: 1.2;
  border: 2px solid #ffffff;
}

.navbar 
{
  margin-bottom: 0;
  background-color: rgb(26, 26, 79);
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: 'Calistoga';
}

.navbar li a, .navbar .navbar-brand 
{
  color: #fff !important;
  font-family: 'Calistoga';
}

.navbar-nav li a:hover, .navbar-nav li.active a 
{
  color: #f4511e !important;
  background-color: #fff !important;
}

.navbar-default .navbar-toggle 
{
  border-color: transparent;
  color: #fff !important;
}

footer .glyphicon 
{
  font-size: 20px;
  margin-bottom: 3px;
  color: midnightblue;
}

.slideanim 
{
  visibility:hidden;
}

.slide 
{
  -webkit-animation-name: slide;
  animation-name: slide;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  visibility: visible;
}



@keyframes slide 
{
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
}


@-webkit-keyframes slide 
{
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
}


@media screen and (max-width: 768px) 
{
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
      width: 100%;
      margin-bottom: 35px;
    }

    .panel-heading {
      font-size: 3rem;
    }


}


@media screen and (max-width: 480px) 
{
    .logo {
      font-size: 150px;
    }

    .panel-heading {
      font-size: 2rem;
    }

    h1{
      font-size: 3rem;
    }
    .jumbotron
    {
      width: auto;
    }

}