body {
    font-family: 'Nunito', sans-serif;
    background-color: #F5F5F5; 
}

#main {
    min-height: 100vh;
    z-index: 10;
    /*min-height: 360px;*/ 
    /*height: 100%;*/
}

#footer {
/*    padding-bottom: 2.5rem;
    padding-top: 2.5rem;*/
    height: 100%
}

a {
    /*color: #FFFFFF;*/
    text-decoration: none;
}

 #wrapper {
    overflow-x: hidden;
    /*z-index: 1;*/
 }
  
/*#sidebar-wrapper {
    position: static;
    z-index: 9;
    min-height: 100vh;
    height: 100%; 
    margin-left: -8rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
    background-color: #2F2F2F;
    width: 280px;
}*/

/*#sidebar-wrapper .list-group-item-action {
  background-color: #2F2F2F; 
  border-style: hidden;  
}

#sidebar-wrapper .list-group-item-action:hover {
  background-color: #424546; 
  border-style: hidden;  
}

#sidebar-wrapper .sidebar-heading {
    background-color: #2F2F2F;
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}*/

/*#sidebar-wrapper .list-group {
    width: 100%;
  width: 10rem;
}

#page-content-wrapper {
  min-width: 80vw;
  width: 100%;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

#img_login div {
    display: none !important; 
}*/

/* Center text */

/*#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000 ;
  background-color: #D3D3D3 ;
  filter: opacity(1);
  filter: alpha(opacity=50);
  -moz-opacity: 0.8;
  opacity: 0.3;   
  z-index: 1;

}

#overlay span {
    font-size: xx-large;
    filter: opacity(1);
    padding: 25px;
    border-radius: 5px;
    color: #000;
    background-color: white;
    position:relative;
    top:50%;
    z-index: 2;
    display: block; 
    opacity: 1;
}*/

/* Videos */

/*.zoom {
    overflow: hidden;  
}

.zoom:hover {
    overflow: hidden; 
    z-index: -2;
    width: 800px;
    height: 1200px;
    object-fit: cover;
}*/

/*
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;  Animation 
  width: 200px;
  height: 200px;
  margin: 0 auto;
}*/
/*
.zoom {
    overflow: hidden; 
    z-index: -1;
    position: relative ; 
    z-index: 1;
    display: block;
    transition: transform .4s;    smoother zoom 
}
.zoom:hover {
    zoom: 75%;
}
*/
/*.zoom:hover {
    overflow: hidden;
    z-index: -1;
    transform: scale(1.2);
    transform-origin: 50% 50%;
}*/
/*.zoom:hover:after {
    overflow: hidden;
    z-index: -1;
    position: absolute;
    transform: scale(1.2);
    transform-origin: 50% 50%;
}*/

/*.zoom:hover {
    overflow: hidden; 
  transform: scale(1.5);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) 
}*/



/* Then style the iframe to fit in the container div with full height and width */
/*.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 560px;
}*/

@media (max-width: 768px) {
/*    #peggy {
        display: block; 
    }
    
    #peggy_2 {
        display: none; 
    }*/
}

@media (min-width: 768px) {
    
/*    #peggy {
        display: none; 
    }
    
    #peggy_2 {
        display: block; 
    }
    
    #sidebar-wrapper {
      margin-left: 0;
    }

    #page-content-wrapper {
      min-width: 0;
      width: 100%;
      margin-left: 0.1rem; 
    }*/

/*    #wrapper.toggled #sidebar-wrapper {
      margin-left: -8rem;
    }
  
    #img_login div {
        display: block !important; 
    }*/
  
}