/* Everything ##################### */

body { font-family: 'Montserrat', sans-serif; }
      
@keyframes move-fade {
  from { opacity: 0; top:30px; }
  to   { opacity: 1; top:0px; }
}


/* Header and Menu ##################### */

.navbar { background:#003163; padding-top:20px; padding-bottom:20px; }
.navbar-dark .navbar-toggler-icon { background-image: url(../images/hamburger-icon.svg); }
.navbar-dark .navbar-toggler { border-color:#003163; font-size:1.7rem; padding-right:0; padding-left:0; }
.navbar-dark .navbar-nav .nav-link { text-transform:uppercase; color:rgba(255,255,255,1); }
.navbar.a:hover {color:pink;}

.dropdown-menu { border-radius:0; background-color:#003163;}
a.dropdown-item { color: #fff; }

.temp-note { background:yellow; color:black !important; display:inline-block; padding:10px; font-family:Arial, sans-serif;}


/* Main Section ##################### */

.main .jumbotron { background: url(../images/spenga-interior-hero.jpg) #003163 no-repeat top; color:white; text-shadow: 0 0 15px black; text-align: center; }
.main .jumbotron h1, .main .jumbotron p { animation: move-fade 1s; }


.main .btn-dark { background:#003163; border-radius:0; border:3px solid #003163; }
.main .btn-dark:hover { background:#ff6600; border:3px solid #ff6600; }

.main .wrapper-dark { background: url(../images/spenga-interior-hero.jpg) #003163 fixed no-repeat center top; background-size:cover; padding:60px 0; margin:60px 0 0 0; color:#fff; }
.main .wrapper-dark h4 a, .main .wrapper-dark h4 a:visited { color:#fff; border-bottom:2px solid #0058b2; }
.main .wrapper-dark h4 a:hover { color:#fff; border-bottom:2px solid #ff6600; }
.main .wrapper-dark .btn-dark { background:none; border-radius:0; border:3px solid #fff !important; }
.main .wrapper-dark .btn-dark:hover { background:#ff6600; border:3px solid #ff6600 !important; }

.main .card { border:none; border-radius:0; }
.main .card-img, .card-img-top { border-top-left-radius:0; border-top-right-radius:0; }
.main .card-body { background:#003163; }
.main .card-body a, .main .card-body a:hover {color:#fff; text-decoration:none !important; }
.main .card-body a:hover { border-bottom: 2px solid #ff6600; }

.main h1 { font-size:2.5rem;  }
.main h2, .main h3, .main h4, .main h5 { color:#003163; }
.main .wrapper-dark h2 { color:#fff; }
.main h3 { line-height:2.4rem; }
.main h4 { line-height:2rem;}
.main hr { border-top:2px solid #eee; }
.main h3 a, .main h3 a:visited, .main h4 a, .main h4 a:visited,
.main p a, .main p a:visited { color:#0058b2; border-bottom: 2px solid #ff6600; text-decoration:none !important; }
.main h3 a:hover, .main h4 a:hover,
.main p a:hover { color:#ff6600; border-bottom: 2px solid #0058b2; }
.main a img:hover { filter: contrast(130%); }




/* Page-Specific Styles #####################  */

.homepage .jumbotron { background: url(../images/construction-workers-sm.jpg) black no-repeat top; }
.homepage h1 { text-transform:uppercase; font-size:2rem;}
.homepage .jumbotron .lead { font-size:1.4rem; }

.project-gallery-bottom { padding:30px 60px 60px 60px; margin:80px 0 0 0; background:#f4f4f4; }


/* Footer #####################  */

footer { text-align: center; padding:50px 10px; background:#003163; color:#ccc; }
footer a, footer a:visited { color:#fff; text-decoration:none !important; border-bottom: 2px solid #0058b2; }
footer a:hover { color:#fff; border-bottom: 2px solid #ff6600; }






/* Project Lightbox by W3Schools ##################### */

.row > .column { padding: 0 8px; }
.row:after { content: ""; display: table; clear: both; }
.column {  float: left;   width: 25%; } /* Create four equal columns that floats next to eachother */
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* The Modal (background) */
.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width:1024px; }
.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }/* The Close Button */
.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }
.mySlides { display: none; } /* Hide the slides by default */
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white !important; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; background-color:#003163; opacity: .8}
.next { right: 0; border-radius: 3px 0 0 3px; } /* Position the "next button" to the right */
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* On hover, add a black background color with a little bit see-through */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Number text (1/3 etc) */
.caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }
img.demo { opacity: 0.6; }
.active, .demo:hover { opacity: 1; }
img.hover-shadow { transition: 0.3s; }
.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }











@media (min-width: 576px) { /* Small devices (landscape phones, 576px and up) */

}











@media (min-width: 768px) { /* Medium devices (tablets, 768px and up) */

  .main h1 { font-size:3.5rem; }
  .main h2 { font-size:2.7rem; }
  .main .jumbotron { background-size:cover; }

  .homepage .jumbotron { background: url(../images/construction-workers.jpg) black no-repeat top; padding:160px 0; background-size:cover; }
}











@media (min-width: 992px) { /* Large devices (desktops, 992px and up) */

  .navbar-dark .navbar-nav .nav-link { margin-top:0; margin-left:15px;}
  .navbar-dark .navbar-nav .active>.nav-link { border-bottom:3px solid #ff6600; }

}











@media (min-width: 1200px) { /* Extra large devices (large desktops, 1200px and up) */

  .main .jumbotron { background: url(../images/spenga-interior-hero.jpg) #003163 fixed no-repeat top;  background-size:cover; }

  .homepage .jumbotron { background: url(../images/construction-workers.jpg) black fixed no-repeat top; background-size:cover; }
  .homepage h1 { font-size:4rem; }
  .homepage .jumbotron .lead { font-size:2rem; }

}