@import url('https://fonts.googleapis.com/css?family=Palanquin:100,400');

/* articles */

.home {
  background: #edcd1f;
}

.pipepiling{
  background: #11338b;
  color: white;
  text-align: center;
  margin-top: 2em;
}

.ssteel{
  background: #919e9a;
  text-align: center;
  margin-top: 2em;
}

.arcsteel{
  background: #edcd1f;
  text-align: center;
}

.qcontrol{
  background: #11338b;
  color:white;
}

.contact{
  background: #919e9a;
}

/* typography */

.dropdown-item{
  display: block;
  margin: 1em 0 1em 2em;
  color:#777;
}

.dropdown-item:hover{
  color:#333;
  text-decoration: none;
}

.nav-item {
  margin-left:2em;
}

h1, h2 {
  font-family: Palanquin;
  font-size: 3.5em;
  color:white;
  text-align: center;
  margin:.5em 0;
}

p {
  font-family: Palanquin;
  margin: 2em;
  font-size: 1.5em;
  vertical-align: middle;
}

.lead, .ssteel-p, .arcsteel-p {
  color:black;
}

.lead{
  font-size: 2em;
}

.ssteel-p{
  width: 90%;
}

.ssteel-h, .arcsteel-h{
  color:black;
}


.qc-h{
  text-align: left;
  padding-left:.8em;
}

/* images */
.headerimg{
  margin-top:2em;
  width: 100%;
}

.hpic{
  display: none;
}

.pp-pic{
  transform: rotateZ(180deg);
  display: none;
}

.building-2{
  width: 100%;
}

.pp-long{
  width: 100%;
}

.arcsidepic{
  width: 50%;
  margin-right:-3em;
  overflow: hidden;
}

.ssteelpic {
  margin-right: 2em;
}


/* links and lists */

.list-group{
  padding-left: 50px;
  margin-bottom: 10px;
}

dd{
  padding-bottom:.7em;
}

dd a {
  color: #11338b;
}

dd a:hover{
  color: #ccc;
  list-style:none;
  text-decoration: none;
}

/* margin and setting for jump links */

#home{
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#home:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid white;
}

#ppipe {
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#ppipe:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid white;
}

#ssteel {
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#ssteel:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid white;
}

#arcsteel {
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#arcsteel:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid white;
}

#qcontrol {
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#qcontrol:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid white;
}

#contact {
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

#contact:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid white;
}

/* photo block */


.photo-box {
	position: relative;
	line-height: 0;
	margin: 3em 0;
	text-align: center;
	overflow: hidden;
}

.photo-box p {
	line-height:22px;
	padding:0px 15px;
	max-width:420px;
	text-align:center;
}

.blockimg{
  height: 300px;
  width: auto;
}

/* photo overlay */
.photo-overlay {
  color: #fff;
	position: absolute;
  margin: 0 auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-left: 20px;
	padding-right: 20px;
	display: flex; /* For centering text inside .photo-overlay */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0, .7);
}

/* transitions for photo-overlay */

.photo-overlay {
	opacity: 0;
	transition: opacity .4s;
}
.photo-overlay:hover {
	opacity: 1;
}

/* google maps */
.contact {
  padding: 0;
}

iframe{
  padding: 0 !important;
  height:620px;
  display: inline-block;
}


/* media queries */
@media (max-width:544px){

  html{
    margin:0;
  }

  .pp-pic{
    display: none;
  }

   .ssteelpic{
    display: none;
  }

  .arcsidepic{
    display: none;
  }

  .wob-logo {
    display: none;
  }

  .wob-logo-2{
    margin: 0 10px 20px 50px;
  }
  .dbe-logo{
    display: none;
  }

  .dbe-logo-2 {
    height: 120px;
    margin-bottom: 20px;
    margin-right: 50px;
    margin-left: 50px;
  }

}


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

  html{
    margin:0;
  }

  .building{
    width: 100%;
  }

  .pp-pic{
    display: none;
  }

   .ssteelpic{
    display: none;
  }

  .arcsidepic{
    display: none;
  }

  .wob-logo{
    display: none;
  }

  .wob-logo-2{
    float: right;
    margin-top:-140px;
    margin-left: 50px;
    margin-right: 50px;
  }

  .dbe-logo{
    display: none;
  }

  .dbe-logo-2{
    float: right;
    height: 120px;
    margin-bottom: 20px;
    margin-top: -275px;
    margin-right: 50px;
    margin-left: 50px;
  }

  .headertext{
  color: white;
  background: #11338B;
}

/*  typography  */

  .lead {
    font-size: 1.5em;
    margin-top: 1.5em;
  }

  dt, dd {
    font-size:1.2em;
  }

  .ssteel-p{
    padding-right:1em;
  }

  /* top buttom */

  .back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-block;
  padding: 1.2em;
  margin: 1.2em;
  border-radius: 150px;
  background: rgba(225,225,225, .5);
  z-index: 100;
  font-size:20px;
  color: black;
}

.back-to-top:hover {
  cursor: pointer;
  background: grey;
}

}

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

  html{
    margin: 0 5em;
  }


.lead {
font-size: 1.8em;
  }

  .back-to-top {
    display: none;
  }

  .back-to-top:hover{
    display: none
  }
/*  images  */

   .building{
    display: none;
  }

  .building-2{
    display: block;
    width: 100%;
    margin-top: 1em;
  }

  img {
    padding:0 !important;
  }

  .ssteelpic{
    display: none;
  }

  .arcsidepic{
    display: none;
  }

/* typography  */

  .home p{
    margin:
  }

  .p2 {
    width: 100%;
  }

  .contact h1 {
    text-align: left;
    padding-left: 1em;
  }

  .ssteel h1{
    text-align: center;
  }

  .pipepiling p {
    text-align: center;
  }

  .ssteel-p{
    padding-right:0;
  }
}

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

/*  articles  */

/* images */

  .pp-long{
    width: 100%;
  }

  .ssteelpic{
    display: inline-block;
  }

  .arcsidepic{
    display: inline-block;
  }

  .wob-logo-2{
    display:none;
   }

   .wob-logo {
     display: block;
     margin-left: 50px;
   }

   .dbe-logo-2{
     display: none;
   }

   .dbe-logo{
     display: block;
     height: 120px;
     margin-left: 50px;
   }

/*  typography  */

  h1, h2{
    font-size: em;
  }


}

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

    .pp-pic{
    width: 50%;
    padding: 0;
      display: inline-block;
  }

  .pp-long{
    display: none;
  }

  }

  @media (min-width: 1500px){

    h1, h2 {
      font-size: 5em;
    }

    p{
      font-size: 2em;
    }

  }

/* side margin problem fix */
  html,body {
    overflow-x: hidden;
}

  /* gallery*/

  .gallery-h1{
    text-align: left;
  }

  .headertext{
  color: white;
	background: #11338B;
}

.gallery-body{
 padding-top: 70px;
}

figcaption{
  font-size:1.1em;
  padding:0 5px;
}

.gallery-p{
  margin-left:0;
}