#navbar, #footer{ color: #b3101d; background-color:transparent; position: fixed; font-size: 16px; }
#navbar{
  z-index: 3;
  left: 0;
  width: 0px;
  height: 100vh;
  opacity: 0;
  -webkit-box-shadow: 0px 2px 4px darkgrey;
     -moz-box-shadow: 0px 2px 4px darkgrey;
          box-shadow: 0px 2px 4px darkgrey;
  -webkit-transition: width 0.5s ease;
          transition: width 0.5s ease;
}
.p-list span{
  display: block;
  border-bottom: 1px solid black;
  min-height: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.p-list span::before{
  white-space: pre;
  content: "\003E  ";
}
#footer{
  z-index: 1;
  left: auto;
  right: 0;
  bottom: 0;
  border-left: 0;
  -webkit-box-shadow: 3px -1px 4px darkgrey;
     -moz-box-shadow: 3px -1px 4px darkgrey;
          box-shadow: 3px -1px 4px darkgrey;
}

#navbar.show{ width: 33.3%; opacity: 1; }
#navbar.show + #content{ margin-left: 33.3%; width: 66.7%; }
#footer .row{ background-color: #b3101d; color: #f2f2f2; }
#footer .label-container{ max-width:50%; width: auto; padding: 0; }
#content{ background: #f2f2f2; width: 100%; min-height: 92.8vh; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 5px 0px 10px lightgrey; }
.img-container{
  -webkit-box-shadow: -2px 0px 4px 0px darkgrey;
     -moz-box-shadow: -2px 0px 4px 0px darkgrey;
          box-shadow: -2px 0px 4px 0px darkgrey;
}
.indicator{ border-left: 2px solid #b3101d; padding-left: 5px; }
.copyright{
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 0px;
  font-size: 16px;
  white-space: normal;
  text-align: center;
}
.content-container{ height:100%; }
.close-menu{
  opacity: 0.5;
  color: #273187;
  max-width: 52px;
  background-color: #f2f2f2;
  -webkit-box-shadow: 0px 0px 4px black;
     -moz-box-shadow: 0px 0px 4px black;
          box-shadow: 0px 0px 4px black;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
}
.close-menu:hover .hamburger-inner, .close-menu:hover .hamburger-inner::before, .close-menu:hover .hamburger-inner::after{
  background-color: #f2f2f2;
}
.label-container, .img-container{ z-index: 2; }
.label-container.active, .label-container:hover{
  z-index: 1;
  border-left: 5px solid #273187;
  -webkit-box-shadow: 0 0px 7px -2px darkgrey;
     -moz-box-shadow: 0 0px 7px -2px darkgrey;
          box-shadow: 0 0px 7px -2px darkgrey;
}
.label-container>label{ padding:10px; }
#footer .label-container>label{ padding-left: 25px; padding-right: 25px; }
#navbar .label-container>label{ text-transform: uppercase; }
.index + .content{ height: 0px; position: absolute; opacity: 0; z-index: -1; overflow: hidden; transition: opacity 0.75s ease; }
.index:checked + .content{ height: 100%; position: relative; opacity: 1; z-index: 0; overflow: visible; }
.mx-container>*{padding-top: 10px; padding-bottom: 10px;}

/** HOVER BLOCK | START **/

a:hover{ color: #151b48; text-decoration: none; }
.close-menu:hover, .close-menu.active{ opacity: 0.8; color: #f2f2f2; -webkit-box-shadow: inset 0 0px 20px 1.2rem #273187; -moz-box-shadow: inset 0 0px 20px 1.2rem #273187; box-shadow: inset 0 0px 20px 1.2rem #273187; }
#footer .label-container.active, #footer .label-container:hover{
  border-left: 0;
  border-right: 0;
  color: #b3101d;
  -webkit-box-shadow: inset 0 0px 20px 3.1rem #f2f2f2;
     -moz-box-shadow: inset 0 0px 20px 3.1rem #f2f2f2;
          box-shadow: inset 0 0px 20px 3.1rem #f2f2f2;
}
#footer.finish::after{
	transform:translateX(-100%);
  width: 100vh;
	height: 220px;
  animation-duration: 1s;
}
/** HOVER BLOCK | END **/

@media (max-width: 767px){ #navbar.show + #content #footer{ width: 66.7%; } .content.container{ max-width: 100%; } }

/** BREAKPOINT: md | START **/
@media (min-width: 768px){
  .text-md-nowrap{ white-space: nowrap; }
  #navbar, #footer{ color: #b3101d; background-color: #f2f2f2; font-size: inherit; }
  #navbar{ height: auto; width: 100%; opacity: 1; }
  #footer{ left: 0; font-size: inherit; }
  #content{
    margin-left: auto !important;
    margin-right: auto;
    max-width: 1200px;
    min-height: 86.9vh;
    margin-top: 100px;
    padding-bottom:47px;
  }
  #navbar.show{ width: 100%; }
  #navbar .row{ border: 0; }
  #navbar .row>div:first-child{ border-left: 1px solid darkgrey; }
  #navbar .row>div:last-child{ border-right: 1px solid darkgrey; }
  #footer .label-container{ max-width:none; width:100%; margin-left: 15px; }
  .indicator{
    border: 0;
    -webkit-box-shadow: 0 4px 2px -2px #b3101d,  0 -4px 2px -2px #b3101d;
       -moz-box-shadow: 0 4px 2px -2px #b3101d,  0 -4px 2px -2px #b3101d;
            box-shadow: 0 4px 2px -2px #b3101d,  0 -4px 2px -2px #b3101d;
    border-radius: 15px;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .img-container{
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }
  .copyright{ bottom: 10px; right: 15px; left: auto; font-size: inherit; }
  /** HOVER BLOCK | START **/
  #navbar .label-container.active, #navbar .label-container:hover{
    border-left: 0;
    border-right: 0;
    color: #f2f2f2;
    -webkit-box-shadow: inset 0 0px 20px 3.1rem #b3101d;
       -moz-box-shadow: inset 0 0px 20px 3.1rem #b3101d;
            box-shadow: inset 0 0px 20px 3.1rem #b3101d;
  }
  #navbar .label-container.active.finish::after{
    transform:translateX(-100%);
    width: 16.67vh;
    height: 100px;
  }
  .img-container.finish::after{
    transform:translateX(-150%);
    width: 16.67vh;
    height: 100px;
  }
  /** HOVER BLOCK | END **/
}
/** BREAKPOINT: md | END **/

/** BG-IMAGES | START **/
.prog1{background-image: url("../img/programming/prog1.jpg");}
.office1{background-image: url("../img/office/office1.jpg");}
.hr1{background-image: url("../img/services/hr1.jpg");}
.sup1{background-image: url("../img/services/sup1.jpeg");}
.pro1{background-image: url("../img/services/pro1.jpg");}

/** BG-IMAGES | END **/