*{
    margin: o;
    padding: o;
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: black;
  }
  
  /* app css */
  
  .App {
    text-align: center;
  }
  
  .App-logo {
    height: 40vmin;
    pointer-events: none;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .App-logo {
      animation: App-logo-spin infinite 20s linear;
    }
  }
  
  .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }
  
  .App-link {
    color: #61dafb;
  }
  
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  /* end of app css */
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }
  
  .contactLine{
    position: inherit;
    border-radius: 25px;
    background-color: #1074BC;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 4px auto 5px;
    max-width:100%;
    font-size: 0.9rem;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 5px;
  }
  
  
  
  .corners1 {
    border-radius: 25px;
    background-color: #1074BC;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    max-width:50%;
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  .carousel .item {
    height: 450px;
  }
  .carousel-item img{
  height: 450px;
  }
  .navbar{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #2c9ced;
  }
  
  /* backgrounds */
  .rupek-bg-red-light{
  background-color: #E34554;
  }
  .rupek-bg-light{
  background-color: #FFFFFF;
  }
  
  .rupek-bg-blue-light{
  background-color: #2C9CED;
  }
  .card{
  border: none;
  }
  
  hr{
  border: 1px solid #BE1D2C;;
  }
  #rupek-carousel-pic img{
  height: 500px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  }
  
  .rupek-top-pic img{
  height: 400px;
  width: inherit;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  }
  .rupek-bg-black-dark{
  background-color: #525252;
  }
  footer a{
    color: white;
  }
  footer a:hover{
    color: wheat;
    text-decoration: none;
    text-shadow: #333333;
  }
  a:hover{
    text-decoration: none;
  }
  
  /* blue color scheme */
  .rupek-blue-light{
  color: #2C9CED;
  }
  .rupek-blue-light1{
  color: #1491EB;
  }
  .rupek-blue-light2{
  color: #1283D4;
  }
  .rupek-blue-standard{
  color: #1074BC;
  }
  .rupek-blue-dark{
  color: #0E66A5;
  }
  .rupek-blue-dark1{
  color: #0C578D;
  }
  .rupek-blue-dark2{
  color: #0A4976;
  }
  
  /* red color scheme */
  .rupek-red-light{
  color: #E34554;
  }
  .rupek-red-light1{
  color: #DF2F3F;
  }
  .rupek-red-light2{
  color: #D42031;
  }
  .rupek-red-standard{
  color: #BE1D2C;
  }
  .rupek-red-dark{
  color: #A81A27;
  }
  .rupek-red-dark1{
  color: #921622;
  }
  .rupek-red-dark2{
  color: #7C131D;
  }
  
  /* black color scheme */
  .rupek-black-dark{
  color: #333333;
  }
  .rupek-black-dark1{
  color: #3D3D3D;
  }
  .rupek-black-dark2{
  color: #525252;
  }
  .rupek-black-standard{
  color: #666666;
  }
  .rupek-black-light{
  color: #7A7A7A;
  }
  .rupek-black-light1{
  color: #858585;
  }
  .rupek-black-light2{
  color: #999999;
  }
  .PageNotFound{
    margin: 5rem;
  }
  
  ol{
    text-align: left;
  }
  
  .success{
    background-color: inherit;
    color: white;
    font-size: 1.2rem;
    animation: blinker 1s linear infinite;
  }
  
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
  
  @media only screen and (max-width: 600px){
    .col-7{
      margin-bottom: 10px;
    }
    .col-7, .col-5{
      flex: 0 0 auto;
      max-width: 100%;
    }
    .contactLine{
      position: inherit;
      border-radius: 10px;
      background-color: #1074BC;
      background-repeat: no-repeat;
      background-size: cover;
      margin: 4px auto 5px;
      max-width:80%;
      font-size: 12px;
      color: white;
      text-align: center;
    }
    
  }

  #top-content {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
   }
   .hidden {
    transform: translateY(-100%);
    opacity: 0;
   }