img { max-width: 100%; max-height: 100%; }
html { font-size: 16px; }
p { font-family: 'Montserrat', sans-serif; }
.vert-center { position: relative; top: 50%; transform: translateY(-50%); }
.clearfix { clear: both; }

@font-face {
    font-family: 'Gobold-Bold-Italic-Italic';
    src:url('fonts/Gobold-Bold-Italic-Italic.ttf.woff') format('woff'),
        url('fonts/Gobold-Bold-Italic-Italic.ttf.svg#Gobold-Bold-Italic-Italic') format('svg'),
        url('fonts/Gobold-Bold-Italic-Italic.ttf.eot'),
        url('fonts/Gobold-Bold-Italic-Italic.ttf.eot?#iefix') format('embedded-opentype'); 
        font-weight: normal;
        font-style: normal;
}

.white-section {
	padding: 3rem 0;
}

.white-section p {
	font-size: 24px;
	color: #121d28;
	text-transform: uppercase;
	margin-bottom: 0;
	line-height: 1.0;
}

.white-section h1 {
	color: #121d28;
	font-family: 'Gobold-Bold-Italic-Italic';
	text-transform: uppercase;
	letter-spacing: -0.5rem;
	font-size: 7rem;
	font-weight: bold;
	line-height: 1.25;
	margin: 1.25rem 0;
}

.yellow-bar {
	background-color: #f0a915;
	padding: 1.25rem;
}

.yellow-bar p {
	margin-bottom: 0;
	line-height: 1.0;
	color: #121d28;
	font-size: 24px;
	text-transform: uppercase;
}

.yellow-bar a i{
	color: #121d28;
	margin-left: 0.5rem;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.yellow-bar a i:hover {
	transform: rotate(90deg);
	color: white;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

#collapsecompanies {
    margin-left: auto;
    margin-right: auto;
    clear: both;
    width: 100%;	
}

.companies-list ul {
	margin-bottom: 0;
	padding-left: 0;
	list-style-type: none;
	padding: 1rem 0;
}

.companies-list ul li {
	margin: 0.5rem;
}

.companies-list ul li a {
	color: white;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.1875rem;
	font-weight: bold;
}

.companies-list ul li a:hover {
	text-decoration: none;
	color: #121d28;
}

.company-grid {
	width: 100%;
}

.company {
	float: left;
	width: 33.3333333333333333%;
	position: relative;
	overflow: hidden;
	text-align: center;
	background-color: dimgray;
	background-image: url('img/company-bg-01.jpg');
	background-size: 100% 100%;
	background-position: center center;
}

.company:nth-child(3n+2) {
	background-image: url('img/company-bg-02.jpg');
}

.company-height {
	height: 450px;
}

.company-rollover {
	width: 100%;
	background-color: #ffffffe6;
	position: absolute;
	top: 0;
	left: -100%;
	box-shadow: inset -2rem 2rem 4rem #121d28b3;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.company img {
	max-width: 50%;
}

.company:hover .company-rollover {
	left: 0;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.company:nth-child(1) {
	border-right: 1px solid white;
	border-top: 2px solid white;
	border-bottom: 1px solid white;
}

.company:nth-child(2) {
	border-top: 2px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
}

.company:nth-child(3) {
	border-top: 2px solid white;
	border-bottom: 1px solid white;
	border-left: 1px solid white;
}

.company:nth-child(4) {
	border-top: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 2px solid white;
}

.company:nth-child(5) {
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 2px solid white;
}

.company:nth-child(6) {
	border-left: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 2px solid white;
}

.company-rollover ul {
	position: absolute;
	width: 100%;
	padding-bottom: 2rem;
	bottom: 0;
	text-align: left;
	padding-left: 14%;
	padding-right: 10%;
	line-height: 1.25;
}

.company-rollover ul li {
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
	font-weight: bold;
	color: #121d28;
}

.yellow-bg {
	background-color: #f0a915;
	padding: 3rem;
}

.yellow-section {
	background-color: #f0a915;
}

.yellow-section img {
	margin-bottom: 2rem;
}

.yellow-section p {
	text-transform: none;
	font-size: 22px;
	line-height: 1.35;
}

.footer {
	background-color: #101f2f;
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.footer p {
	color: white;
	margin-bottom: 0;
	font-size: 24px;
}



/*==========  Boostrap 4 Non-Mobile First Method  ==========*/

@media only screen and (max-width: 1199px) {

html { font-size: 15px; }

}

@media only screen and (max-width: 991px) {

html { font-size: 14px; }

}

@media only screen and (max-width: 767px) {

html { font-size: 13px; }
.company img { max-width: 70%; }
.white-section h1 { letter-spacing: -0.4125rem; font-size: 6rem; }

}

@media only screen and (max-width: 575px) {

.white-section h1 { letter-spacing: -0.25rem; font-size: 4rem; }
.company { width: 100%; border-left: 0px !important; border-right: 0px !important; border-top: 1px solid white !important; border-bottom: 1px solid white !important; }
.company img { max-width: 40%; }
.company-height { height: 300px; }

}
