.boxed {
    background-color: #fff;
}
/*# sourceMappingURL=width-full.css.map */

/* Styling modal */
        .modal:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
          
.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}
          
        .modal .modal-content {
            padding: 20px 20px 20px 20px;
            -webkit-animation-name: modal-animation;
            -webkit-animation-duration: 0.5s;
            animation-name: modal-animation;
            animation-duration: 0.5s;
        }
.modal-content p {
    color: #666666;
    font-size: 14px;
}
          
        @-webkit-keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
          
        @keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
.imgNone {max-width:40vw;}
.imgLeft{max-width:25vw; float:right; padding:10px; clear: both;}
.imgRight {max-width:25vw; float:right; padding:10px; clear: both;}
/* ----- Ken Burns Effect Styles ----- */

/* slideshow - adapted from http://cssmojo.com/ken-burns-effect/ */
/*  Code is from this website: http://fofwebdesign.co.uk/template/_testing/ken-burns-slideshow-captions.htm */

#slideshow { position:relative; overflow:hidden; max-width:100%; padding-bottom:52% } /* (img px height / img px width x 100) = padding-bottom % */

#slideshow div { position:absolute; z-index:2; width:105%; height:105%; top:-5%; left:-5%; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0;
	-webkit-transition:opacity 3s, -webkit-transform 12s; -ms-transition:opacity 3s, -ms-transform 12s; transition:opacity 3s, transform 12s 
	}

#slideshow div { -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left }
#slideshow div:nth-of-type(2n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow div:nth-of-type(3n+1) { -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left }
#slideshow div:nth-of-type(4n+1) { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom right }
#slideshow div:nth-of-type(5n+1) { -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left }
#slideshow .fx:first-child + span + div ~ div, #slideshow .fx1 { z-index:1 }
#slideshow .fx, #slideshow .fx1 { -webkit-transform:scale(1.1) translate(1.5%); -ms-transform:scale(1.1) translate(1.5%); transform:scale(1.1) translate(1.5%); opacity:1 }
#slideshow div:nth-of-type(1) { background-image:url("../img/fpo-images/OI-1.jpg") }
#slideshow div:nth-of-type(2) { background-image:url("../img/fpo-images/image1-2024.png") }
#slideshow div:nth-of-type(3) { background-image:url("../img/fpo-images/image2-2024.png") }
#slideshow div:nth-of-type(4) { background-image:url("../img/fpo-images/OI-Print-03.jpg") }
#slideshow div:nth-of-type(5) { background-image:url("../img/fpo-images/image4-2024.png") }
#slideshow div:nth-of-type(6) { background-image:url("../img/fpo-images/image3-2024.png") }

/* captions */

#slideshow span { position:absolute; z-index:2; bottom:0; right:0; display:inline-block; padding:2% 3%; margin:5%; font-family: 'Dancing Script', cursive; font-size:2.5vw; color:transparent }
#slideshow .fx:first-child + span + div ~ div + span, #slideshow .fx1 + span { z-index:1 }
#slideshow .fx + span, #slideshow .fx1 + span { background:rgba(90,90,90,0.75); color:#fff; -webkit-animation:caption 7s 1s both; animation:caption 7s 1s both }

@-webkit-keyframes caption {
  0% { opacity:0; -webkit-transform:translate3d(100%,0,0) }
  20% { opacity:1; -webkit-transform:none }
  70% { opacity:1; -webkit-transform:none }
  100% { opacity:0; -webkit-transform:translate3d(-500%,0,0) }
}

@keyframes caption {

  0% { opacity:0; transform:translate3d(100%,0,0) }
  20% { opacity:1; transform:none }
  70% { opacity:1; transform:none }
  100% { opacity:0; transform:translate3d(-500%,0,0) }
}

@media(min-width:42em) { /* bigger than 672px */
	#slideshow span { padding:0.65em 0.75em; margin:0.5em; font-size:2em }
}

/* -------- Compound List Styles ----------- */
.design ul {
  list-style-type: none;
  width: 100%;
}
 
.design h3 {
  font: bold 20px/1.5 Arial, sans-serif;
  color: #3DA7AA;
  margin: 0;
}
 
.design li img {
  float: left;
  margin: 0 15px 0 0;
}
 
.design li p {
  font: 200 16px/1.5 Arial, sans-serif;
}
 
.design li {
  padding: 0px;
    margin-left: -30px;
    margin-right: 30px;
  overflow: auto;
}
 
.design li:hover {
  background: #eee;
  cursor: pointer;
}
@media screen and (max-width: 800px)
{
.imgLeft{max-width:50vw; float:none; padding:10px;}
.imgRight {max-width:50vw; float:right; padding:10px;}}