body
{
    font-family: 'Exo', sans-serif;
    overflow-x:hidden;
    margin:0px;
    padding:0px;
}

.bg-primary
{  
    background-color: #3b4e78 !important;
}

.bg-secondary
{
    background-color: #DDDDDD !important;
}

.ag_img
{
    margin:10px;
    padding:0px;
    display:inline-block;

}

.ag_sec
{
    margin:0px;
    padding: 0px;
    padding-top:60px;
}

.bg-gallery
{
    background-color:#232323;
}

#ag_nav a
{
    text-decoration: none;
    color:black;
}

.ag_folder
{
    background: darkgray;
    color: black;
    text-align:center;

    width:150px;
    height: 100px;

    font-size:1.5rem;
    font-weight: 600;

    margin:10px;
    padding:5px;
    padding-top:30px;
    display:inline-block;

    transition: all 0.5s;
}

.ag_folder:hover
{
    box-shadow: inset 0 0 0 13px white;
    color: white;
}

.ag_back
{
    background: lightgray;
    color:black;
    width:100%;
}

.gallerytitle
{
    text-align: center;
    padding: 0px;
    margin: 0px;
}

#gallerytop
{
    background-color:lightgray;
    margin:0px;
    padding-bottom:10px;
}

/* ~Navigation */
@media (max-width: 992px) {
    .navbar_logo
     {
         display:none;
     } 
 }
 
 @media (min-width: 992px) {
     .navbar
     {
         height: 60px;
     }
 
     #mainNav .ml-auto > li
     {
         margin-right: 2rem;
     }
 
     #mainNav .mr-auto > li
     {
         margin-left: 2rem;
     }
 }
 
 #mainNav
 {
     z-index: 2;
     font-size:25px;
 }
 
 #mainNav .navbar-nav > li.nav-item > a.nav-link.active
 {
     font-weight: 600;
 }


 /* ~Carousel */
#container_carousel
{
    margin:0px;
    padding:0px;
    z-index: -1;
}

.carousel-indicators
{
    z-index:1;
}
  

.row
{
    font-size:1.3rem;
}

.text-dark
{
    font-weight:600;
}

.img_selection
{
    padding-right:16px;
    padding-bottom:16px;
}
 

.multi-item-carousel {
    overflow: hidden;
  }
  .multi-item-carousel img {
    height: auto;
    width: 100%;
  }
  .multi-item-carousel .carousel-control.left, 
  .multi-item-carousel .carousel-control.right {
      background: rgba(255, 255, 255, 0.3);
      width: 25%;
  }
  .multi-item-carousel .carousel-inner {
    width: 150%;
    left: -25%;
  }
  .carousel-inner > .item.next, 
  .carousel-inner > .item.active.right {
      -webkit-transform: translate3d(33%, 0, 0);
      transform: translate3d(33%, 0, 0);
  }
  .carousel-inner > .item.prev, 
  .carousel-inner > .item.active.left {
      -webkit-transform: translate3d(-33%, 0, 0);
      transform: translate3d(-33%, 0, 0);
  }
  .item__third {
    float: left;
    width: 33.33333333%;
  }