/* front page specific styles/overrides */

#top-callouts {padding: 0; margin-top: -4.5vw; position: relative; z-index: 2000;}
#top-callouts .element.callout {width: 23%; margin: 0 2.66% 25px 0; display: inline-block;}
#top-callouts .element.callout:nth-last-child(1) {margin-right: 0;}
#top-callouts .tc-pic-wrapper {overflow: hidden; line-height: 0px;}
#top-callouts .tc-pic-wrapper img {transition: all 0.3s;}
#top-callouts a:hover .tc-pic-wrapper img {transform: scale3d(1.1,1.1,1); -webkit-transform: scale3d(1.2,1.2,1);}
#top-callouts .tc-text-wrapper {color: #ffffff; background: #103777; font-family: "Oswald"; font-size: calc(14pt + .7vw); padding: 2.6vw 0; border-top: 2px solid #ffffff; text-align: center; text-transform: uppercase; display: block; transition: all 0.3s;}
#top-callouts a:hover .tc-text-wrapper {background-color: #575757}

#content {padding-top: 0;}

#grey-bar {background-color: #404040; color: #bfbfbf; background-image: url(../img/grey-metal-rolls-paralax-min.jpg); padding: 70px 0; background-attachment: fixed; background-repeat: no-repeat; background-size: cover;}
#grey-bar .inner {display: flex; align-items: center; flex-wrap: wrap;}
#grey-bar .left {width: 40%; margin-right: 3%; display: inline-block;}
#grey-bar .left a {width: 100%; height: 100%; display: block; overflow: hidden;}
#grey-bar .left a img {transition: all 0.3s;}
#grey-bar .left a img:hover {transform: scale3d(1.1,1.1,1); -webkit-transform: scale3d(1.2,1.2,1);}
#grey-bar .right {width: 57%; display: inline-block; text-align: left;}
#grey-bar h3 {color: #ffffff;font-size: calc(14pt + 0.55vw); text-transform: uppercase; margin:0 0 6px 0;}
#grey-bar .left p:nth-of-type(1) {margin-top:0;}
#grey-bar a.button.more-link {background: transparent; border-color: #ffffff; color: #ffffff; font-family: "Open Sans"; font-weight: bold;}
#grey-bar a.button.more-link:hover {background-color: #575757; border-color: #575757;}

#fp-gallery {padding:0;}
#fp-gallery .bfm-gallery .element.image {width: 25%; margin:0; line-height: 0px; overflow: hidden; margin-top: -1px;}
#fp-gallery .bfm-gallery .element.image img {transition: all 0.3s}
#fp-gallery .bfm-gallery .element.image:hover img {transform: scale3d(1.1,1.1,1); -webkit-transform: scale3d(1.2,1.2,1);}




@media only screen and (max-width: 1024px) {
	#top-callouts {margin-top: 20px;}
	#top-callouts .element.callout {width: 48%; margin: 0 2.66% 25px 0; display: inline-block;}
	#top-callouts .element.callout:nth-last-child(1) {margin-right: 0; }
	#top-callouts .element.callout:nth-child(2n+2) {margin-right: 0; }

}

@media only screen and (max-width: 900px) {
	#grey-bar .left {width: 100%; margin-bottom: 30px; margin-right: 0;}
	#grey-bar .left img {max-width: 480px; width: 100%; height: auto; }
	#grey-bar .right {width: 100%;}


}

@media only screen and (max-width:768px) {
	#blue-bar .left {width: 100%; order: 2; margin-right: 0; display: inline-block;}
	#blue-bar .right {width: 100%; order: 1; display: inline-block; text-align: center; margin-bottom: 20px;}	

	#fp-gallery .bfm-gallery .element.image {width: 50%;}
}

@media only screen and (max-width:480px) {
	#top-callouts .element.callout {width: 96%; display: block; margin: 0 auto 35px;}
	#top-callouts .element.callout:nth-last-child(1) {margin: 0 auto 35px;}
	#top-callouts .tc-text-wrapper {font-size: calc(14pt + 1.4vw); padding: 8vw 0;}
}