/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* 
light blue: rgb(21, 103, 125)
orange: rgb(247, 148, 29)
dark blue: rgb(18, 65, 79)
text color: #3e3e3e
grey: rgb(227, 227, 227)
dark-grey footer: rgb(52, 52, 52)
*/

:root {
    --lightblue: rgb(21, 103, 125);
    --orange: rgb(247, 148, 29);
    --darkblue: rgb(18, 65, 79);
    --darkgrey: rgb(52, 52, 52);
}


/*-------------------- Buttons --------------------*/
.btn-outline-primary:hover {
  background-color:  var(--darkblue);
  color: white;
  border-color: var(--darkblue);
}

.btn-outline-primary {
    color: var(--darkblue);
    border-color: var(--darkblue);
}

.btn-primary{
    background-color: var(--darkblue);
    border-color: var(--darkblue);
}

.btn-primary:hover{
    background-color: var(--lightblue);
    border-color: var(--lightblue);
}



/*-------------------- Header --------------------*/

.main-navbar-wrapper {
    background-color: var(--lightblue);
      margin-bottom: 0;
      border: 0;
      min-height: 38px;
      color: white;
}

header.header .navbar-nav > li > a {
  font-size:15px;
  color: white;
  padding: 16px 20px;
  transition: all 0.1s ease-out;
  text-decoration:none;
}

header.header .navbar-nav > li > a:hover {
  text-decoration: none;
  background-color: var(--orange);
}

.main-navbar-wrapper .container {
    padding: 5px 0;
}

.master-breadcrumb, .breadcrumb {
    background: var(--orange);
}

.breadcrumb-item a{
    color: black;
}

.breadcrumb-item.active {
    color: white;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: white;
}

header.header .toolbar .nav-link {
  border: 1px solid #666; 
  color: #666;
}

header.header .toolbar .nav-link:hover {
  color: #666;
  border: 1px solid #666;
}

header.header .collapse_button {
    list-style: none;
    margin-bottom: 0px;
}

header.header .collapse_button .nav-link {
  color: white;
  border: 1px solid white;
}

header.header .collapse_button .nav-link:hover {
  color: black;
  border: 1px solid black;
}

@media (max-width: 1200px){
    header.header .navbar-nav > li > a {
        padding: 2px;
        margin:2px;
    }
}


/*-------------------- Homepage --------------------*/

#main-body{
    justify-content:center !important;
    padding: 0 !important;
    overflow: hidden;
}

#main-body .container{
    padding: 20px 0;
}

.primary-content{
    max-width: 100%;
    padding: 0;
    justify-content: center;
}

hr {
    width: 50%;
    border-top: 1px solid black;
}

@media (max-width: 750px){
    hr{
        width: 80%;
    }
}

.about {
    background-color: rgb(215,215,215);
    padding: 2rem;
    /*text-align: center;*/
}

@media (min-width: 500px){
    .about .info {
        min-width: 455px;
    }
}

.about .col h2{
    border-bottom: 1px solid black;
    padding: 10px;
}

.about .partner_images img{
    max-width: 200px;
    /*max-height: 72px;*/
    width: 100%;
    margin-right: 10px;
    margin-bottom: 10px;
}

/*.about .partner_images{*/
/*    text-align: center;*/
/*}*/
@media (max-width: 500px){
    .about .partner_images{
        min-width: 200px;
    }
}

.about .row{
    max-width: 2000px;
    margin: 0;
}

.card-columns.home {
    column-count: 1 !important;
    text-align: center;
  }
  
.card-columns.home .card{
    max-width: 365px;
}


/*-------------------- Tickertape on homepage --------------------*/
.ticker-tape-container {
    overflow: hidden;
    display: flex;
    margin: 30px 0;
    white-space: nowrap;
    width: 80%;
    padding: 0 200px;
  }
  
  .ticker-tape {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    animation: ticker-scroll infinite linear normal;
    /*animation-play-state: running;*/
    animation-delay: 0s;
    animation-duration: 50s;
  }
  
  .ticker-tape-item img {
    margin: 0 50px;
    max-width: 140px;
    max-height: 72px;
  }

  @media (max-width: 600px){
    .ticker-tape-item{
      margin: 0 30px;
    }
  }
  
  @keyframes ticker-scroll {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }



/*-------------------- Global elements --------------------*/
.list-group-item .active {
    background-color: var(--lightblue) !important;
}

div.sidebar .list-group-item-selected {
  background-color: var(--lightblue) !important;
  color: var(--lightblue);
}

a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
  border-top: 1px solid transparent !important;
  background-color: var(--lightblue) !important;
  border-bottom: 1px solid transparent !important;
}

@media (max-width: 630px){
    .row{
        margin: 5px !important;
    }
}



/*-------------------- Cart --------------------*/

#order-standard_cart .view-cart-items-header{
    background-color: var(--lightblue) !important;
}

#order-standard_cart .order-summary h2{
    background-color: var(--orange);
}

#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--lightblue);
}

#order-standard_cart .order-summary {
    background-color: var(--orange) !important;
    border-bottom: 3px solid var(--orange) !important;
}


/*-------------------- Footer --------------------*/
#footer{
    background-color: var(--darkgrey);
}

#footer.footer .col-md-3 li a {
    color: white;
}
#footer.footer .col-md-3 li a:hover {
    padding-left: 4px;
    color: var(--orange);
    transition: all .2s ease;
    text-decoration: none;
}
#footer.footer .col-md-3 li {
  font-size: 16px;
  list-style: none;
  margin-top: 12px;
}
    
#footer.footer .dropdown-item li a:hover{
    color: black;
}

#footer.footer .dropdown-item{
    color: #444 !important;
    font-size: 15 !important;
    margin-top: 0 !important;
}

#footer.footer img{
    max-width: 100px;
    margin-top: 1rem;
}