/* Style the Image Used to Trigger the Modal */
.myImg {

    cursor: pointer;
    transition: 0.3s;
}

/* The Modal (background) */
.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content2 {
    margin: auto;
    display: block;
    width: 55%;
    max-width: 700px;
}


/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content2, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close2 {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content2 {
        width: 100%;
    }
}


/* ---------------------Overlay ---------------------- */

.overlay-desc {
  background: rgba(0,0,0, 0.4);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  text-align:center;
}

.intro-img .overlay-desc img {
  max-width: 70% !important;
  min-width: 70%;
  max-height: 40%;
  margin-top: 20%;

}

.overlay-desc h1 {
  margin-top: 25%;
  color: white;
  font-weight: bold;
  font-size: 7vw;
  text-align: center;
  display: block;
}

.overlay-desc h4 {
  color: white;
  font-weight: bold;
  font-size: 3vw;
  text-align: center;
  margin: none !important;
    display: block;
}



/* ----------------------------- Circumvent the Wrap, Remove the Breadcrumbs, change the font size ----------------------------- */
.maincontent {
   padding-bottom: 0px;
}

.breadcrumb {
   display:none;
   margin-bottom: 0px;
}

.content .container {
   padding: 0px;
   margin: 0px;
   width: 100%;
   max-width: 100%;
   overflow: hidden !important;
}

p {
   padding-top: 15px;
   font-size: 18px;
}

h2 {
   font-size: 36px;
}

h3 {
   font-size: 30px;
}


/* ---------------------------------- By Line --------------------------------- */
.byline {
   float:right;
   border: 1px solid black;
   font-size:smaller;
   font-style: italic;
   padding: 20px;
   margin: 20px 20px 0 0;
}


@media only screen and (max-width: 767px) {
   .byline {
       float: none;
       padding: 10px;
       margin: 20px 0 20px 0;
   }
}



/* ----------------------------- Full width Top Picture ----------------------------- */


/*** Header image ***/
.intro-img {
   position: relative;

}
.intro-img img {
  margin: 0px;
  min-width: 100%;
  width: 100%;
  max-width: 100%;

}


.row .fullvid {
   background-color: black;
   padding: 20px 0px;
   margin: 40px 0px;
   width:100%;
}

.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.full-width img {
   min-width: 100% !important;
   background-color:black;
   padding-bottom:5px;
   margin-top: 20px;
}

p {
   text-align: left;
}

/* ----------------------------- Partial Width for Main Text ----------------------------- */
.part-width {
   display:block;
}

.part-width * {
   max-width: 60%;
   margin-left: auto;
   margin-right: auto;
}

.part-width p {
   text-align: left;
}

/* ----------------------------- Dashed Outline Box - Black with Gold Dashes ----------------------------- */
.row .row-black {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   border: 5px dashed #a3792c;
   
   margin-right: auto;
   margin-left: auto;
   background-color: black;
   margin-top: 20px;
   max-width: 100%;

   padding: 20px 0 20px 0;
   text-align: center;
   color: white;
  
}
.row .row-black p {

   text-align: left;
   color: white;
}

.row {
   margin-left:auto;
   margin-right:auto;
}

@media only screen and (max-width: 767px) {
   .row-black .video img{
       padding-top: 25px;
   }
}


/* ----------------------------- SPECIAL Two images in One row video ----------------------------- */
.video {
   max-width: 100%;
   margin: 0px;
      margin-left: auto;
   margin-right: auto;
   text-align:center;
}

.video img {
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer; 
   cursor: hand;
}

.twoinone .video img {
   max-width: 70%;
}
@media only screen and (max-width: 767px) {
   .video img {
       width: 90% !important;
   }
}


/* ----------------------------- Pop Up Video Modal ----------------------------- */
.modal-dialog {
   text-align: center; 
   margin-left: auto; 
   margin-right: auto; 
   min-width: 100%;
}

.modal-content {
   background-color:black;
}

.modal-body {
   width: 100%; 
   height: 0px; 
   padding-bottom: 60%;
}

.modal-body span {
   color: white; 
   font-size: 50px; 
   position: absolute; 
   right: 30px; 
   top: 0px;
}

.modal-body iframe {
   position: absolute; 
   left: 0px; 
   top: 40px; 
   width: 100%; 
   height: 70%;
}

.modal-body img {
max-width: 100%;
max-height: 100%;

}


.close {
opacity: .6;
color:white;
}

.close:hover {
color:white;
}

/* ----------------------------- Below 767px Screen Edits ----------------------------- */



@media only screen and (max-width: 767px) {
  .maincontent {
     padding-top: 0px;
  } 
  .part-width * {
     width: 90%;
     max-width: 90%;
  }
  .part-width p {
   font-size: 14px;
   padding: 0 5px;
}
 }