@import url("queries/pages-default.css");
@import url("queries/midstream-queries.css");

.active-midstream {color:#ef1c26!important;}

main {padding:0px!important;}

.key-list-h3 {display:block;}
.hidekey {display:none;}
.active .hidekey {display: block;}
.active .key-list-h3 {color:#3083a7;}

/*HEADER BANNER - SLIDE*/

header {
	position:relative;
	overflow: hidden;
	background-image:url('../assets/images/banner4.jpg');
	background-position: center;
	background-attachment: scroll;
	background-size:cover;
	background-repeat: no-repeat;
	height:280px; 
	max-height:100%;
	width:100%;
}

/*MAIN*/

h1 {font-size:90px;color:#ef1c26;text-align:center; font-weight:300;margin:0;text-transform:uppercase;}

h3 {color:#3083a7;font-weight:500;margin-bottom:-5px;}

.intro p {font-family: 'Montserrat', sans-serif;color:#121212;font-weight:500;}

.intro a {color:#ef1c26; font-size:20px;}

.bold-p1, .bold-p0 {padding:1rem; margin:0 auto; text-align:center;max-width:55rem;font-size:23px;font-weight:700;text-transform: uppercase;}

.bold-p0 { color:#121212;}

article.intro {margin:0 auto;}

article p {line-height:2rem;font-family: 'Montserrat', sans-serif;}

.intro {padding:1rem;width:100%;}

.midsteam-icon {max-width:180px;height:auto;}

.bubble {
	position: relative;
	background: #222a30;
	border-radius: 0;
}

.bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #222a30;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
}

#info-container {
	margin:0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	grid-auto-rows: minmax(150px, auto);
	justify-items: center;
	padding-bottom:5rem;
	position:relative;
	max-width:100vw;
	color:white;
	background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
	margin-top:-5rem;
}

#info-container em {color:#3083a7;}

#grid-container {
	margin:0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	grid-auto-rows: minmax(150px, auto);
	justify-items: center;
	padding-bottom:5rem;
	position:relative;
	max-width:80rem;
	color:white;
	margin-top:-3rem;
}

#grid-container2 {
	background:#ef1c26;
	background-image:linear-gradient(to bottom ,  #eb1e28, #ef1c26, #e71823);
	color:white;
	text-align:center;
	padding:2rem;
	height:500px;
	font-size:18px;
}

#grid-container2 li {text-align:center;padding:.5rem;}

#grid-container2 h2 {margin:0 auto;font-weight:300;padding:3rem;max-width:80%;}

#three-list {
	margin:0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	grid-auto-rows: minmax(10px, auto);
	position:relative;
	max-width:60rem;
	text-align:left;
}

.last-list .center {text-align:center;color:#ef1c26;font-size:30px;}

.last-list .centerlist {text-align:center;}

.last-list {
	margin:0 auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 10px;
	grid-auto-rows: minmax(10px, auto);
	position:relative;
	text-align:left;
}

.grid-container3 {
	margin:0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr)!important;
	grid-gap: 0px;
	grid-auto-rows: minmax(10px, auto);
	position:relative;
	text-align:left;
	background:#222a30;
	color:white;
	font-size:18px;
}

.grid-2-img {
	position:relative;
	max-height:100%;
	width:100%;
	overflow: hidden;
	background-image: url("../assets/images/midstream-2.jpg");
	background-position: center;
	background-attachment: scroll;
	background-size:cover;
	background-repeat: no-repeat;
}

.grid-3-img {
	position:relative;
	max-height:100%;
	width:100%;
	overflow: hidden;
	background-image: url("../assets/images/midstream-1.jpg");
	background-position: center;
	background-attachment: scroll;
	background-size:cover;
	background-repeat: no-repeat;
}


.grid-container-info {padding:6rem 4.5rem;}

.grid-container3 p {margin:0 auto;padding-bottom:3rem;max-width:80rem;margin-top;-5rem;}

/* Containers */

.last-list li {padding:5px;text-align:left;}
.con-2, .con-3, .con-4, .con-5, .con-6, .con-7, .con-8, .con-9 {text-align:left;}

.con-2 p, .con-3 p, .con-4 p,.con-5 p, .con-6 p, .con-7 p, .con-8 p, .con-9 p {line-height:1.3rem; font-size:12px;font-weight:500; text-align:left;}

.con-1 {
	margin:0 auto;
	grid-column:1/4; 
	grid-row:1;
	text-align:center;
	max-width:100vw;
	padding:3rem;
	
}

.con-1 ul {margin:0 auto;text-align:left;max-width:60rem;}

.con-1 li {margin:0;text-align:left;padding:.5rem;}

.con-1 img {max-width:300px;height:auto;}

.con-1 p {margin:0 auto;max-width:65rem;padding:1.5rem 3rem;color:#f1f1f1;}

.con-2 {
	grid-column:1/4; 
	grid-row:2;
	text-align:center;
	max-width:75rem;
	padding-top:2rem;
	}

.con-2 h2 {font-size:60px;}

.con-2 p {padding:3rem;margin:0 auto;max-width:65rem;text-align:center;font-size:18px;line-height:2rem;}

/*MAIN GRID*/
.con-3 {
	margin:0 auto;
	grid-column:1/3; 
	padding:0;

}

.con-3 img {width:100vw;height:auto;}

.con-4 .btn3 {
	text-align:center;
	background:#ef1c26;
	background-image:linear-gradient(to bottom ,  #eb1e28, #ef1c26, #e71823);
	padding:15px 20px;
	color:#fafafa;
	font-size:25px;
	border-radius: 50px;
	border:1.5px solid #ef1c26;
	font-family: "CanlinFont-bold", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	box-shadow: 0px 2px 3px rgba(0, 0, 0, .5);transition:all 0.3s ease;}

iframe {width:100%; height:675px;}

.con-4 {
	margin:0 auto;
	text-align:left;
	grid-column:3;
	color:#121212;
	
}

.con-4 ul {margin:0;padding:0;}

.con-4 li:first-of-type {margin-top:10px;}

.con-4 li {font-size:14px;display:block;text-align:left;padding:5px 10px 0px 30px;margin:0;font-weight:300;}

.con-4 h3{color:#959596; font-size:25px;text-transform:uppercase;font-family: 'Rajdhani', sans-serif!important;font-weight:700;}

.con-4 h3:hover {cursor:pointer;color:#3083a7;}

.con-4 h3::before {content:"▶ ";color:#ef1c26;}
/*.con-4 h3:active::before {content:"▼ ";}*/
.con-4 h3:active {color:#3083a7;}

.con-4 a {font-size:inherit;}

.con-4 .lsd {margin-top:1rem;}

.header-two {font-size:65px;text-align:center; color:#ef1c26;font-weight:200; padding:0; margin:0;}

.more-button {
	position:relative;
	height:400px; 
	max-height:100%;
	max-width:100%;
	overflow: hidden;
	background-image:url('../assets/images/ops-footer-img.jpg');
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	text-align:center;
	padding-top:4rem;
	}

.more-button p {color:#121212;}

.more-button .footer-info-container1 {
	margin:0 auto;
	display:inline-block;
	margin:3rem;
	color:white;
	text-align:center;
}

.more-button .btn3:hover {background:transparent;border:1.5px solid #121212;transition:all 0.2s ease;color:#121212;}

/*FOOTER*/
#footer-banner{
	position:relative;
	height:350px; 
	max-height:100%;
	max-width:100vw;
	overflow: hidden;
	background-image:url('../assets/images/footer-banner.jpg');
	background-position: center;
	background-attachment: fixed;
	background-size:cover;
	background-repeat: no-repeat;
	text-align:center;
	border-radius:0px 0px 25px 25px;
	}

#footer-info-container p {font-size:20px;line-height:1.8rem;font-family: 'Montserrat', sans-serif;margin-bottom:2rem;}

#footer-banner .footer-info-container{
	margin:0 auto;
	padding-bottom:3rem;
	display:inline-block;
	color:white;
	margin:3rem;

}

#footer-banner .btn3 {border-radius:50px;}

.footer-info-container p {padding:2rem;}

/*INTERNET EXPLORER QUERIES*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
/* IE10+ CSS styles go here */
#grid-container{
	margin:0 auto;
	display: -ms-grid;
	display: -ms-flexbox;
	-ms-grid-columns: 1fr 1fr 1fr; 
    -ms-flex-pack: center;
}
	
#three-list{
	display:inline-block;
	margin:0 auto;
	text-align:justify;
	padding:.5rem;
	margin-top:-1.5rem;}	
	
#three-list li {
	margin:0 auto;
	margin:1rem;
	padding-bottom:.5rem;}

.grid-container-info {text-align:center!important;}		
	
.grid-container-info .center {text-align:center!important;}	
	
.grid-container3 .center {text-align:center!important;}	
	
.grid-container3{
	margin:0 auto;
	display: -ms-grid;
	display: -ms-flexbox;
	-ms-grid-columns: 1fr 1fr; 
    -ms-flex-pack: center;
}

.grid-3-img {
	position:relative;
	max-height:100%;
	width:160%!important;
}

.grid-2-img {
	position:relative;
	max-height:100%;
	width:575%!important;
}	
	
iframe {width:100%; height:625px;}	

#footer-banner .footer-info-container {margin-top:2.5rem;}		
	
#grid-container2 {
	background:#ef1c26;
	background-image:linear-gradient(to bottom ,  #eb1e28, #ef1c26, #e71823);
	color:white;
	text-align:center;
	padding:2rem;
	height:450px;
	font-size:18px;
	margin-bottom:8rem!important;
}	
	
}