/*
Theme Name:  Safex LLC 
Theme URI:   http://safexllc.com
Description: Safexgas and Energy Services
Author:      Qweser Infolabs
Author URI:  http://qweserinfolabs.com
Template:    Divi
*/

@import url("../Divi/style.css");

/* comments fix */
#comment-wrap {
	max-width: 1170px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}
.container {
	position: relative;
	max-width: 1170px;
	margin: auto;
	width:85.6515375%;
}
.et_pb_row{
	width:85.6515375%;
}
a{
	text-decoration: none;
}

/*Header styles*/
#logo {
    display: inline-block;
    float: none;
    max-height: 120%;
    margin-bottom: 0;
    vertical-align: middle;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    margin-top: -36px;
}
#et-info-phone:before {
    position: relative;
    top: 2px;
    margin-right: 2px;
    content: "\e072"; /*Changing Phone icon here*/
}

#top-header .container {
    padding-top: 1em;
    font-weight: 600;
}
.et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
    padding-top: 15px;
    padding-bottom: 25px;
}
.et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
    padding-top: 0px;
    padding-bottom: 15px;
}
#et-info {
    float: right;
}
.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {
    padding-bottom: 0px;
}
#top-menu > li:last-child{
    padding-right: 0;
    background: #ec1c24;
    padding: 10px 20px;
    color: #fff !important;
    opacity: 1;
    font-weight: 700;
    border-radius: 4px;
}
#top-menu > li:last-child:hover {
    background: #ff0000;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 .number a:hover{
 	color: #fff !important;
    opacity: 1;
    font-weight: 700;
}
.number a{
	color: #ffffff !important;
	border-radius: 4px !important;
}
#top-menu-nav > ul > li > a:last-child:hover{
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/*Slider Styles*/
.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
    font-size: 48px !important;
    line-height: 1.5;
    text-shadow: 2px 1px 7px rgba(0, 0, 0, 0.6);
}
.et_pb_slide_description, .et_pb_slider_fullwidth_off .et_pb_slide_description {
    width: auto;
    margin: auto;
    padding: 12% 8%;
}
.home-title, .home-subtitle{
	text-transform: uppercase;
}


/*Image Overlay effects styles*/
.border-hover .et_pb_column {
	overflow: hidden;
	position: relative;
}

.border-hover .et_pb_column img {
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
}

.border-hover .et_pb_column:hover img {
	transform: scale(1.5);
}

.border-hover .et_pb_column .et_pb_image:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	content: '';
}
.border-hover .et_pb_column:hover .et_pb_image:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	content: '';
}

.border-hover .et_pb_column .et_pb_promo_description:before {
	top: 50px;
	right: 30px;
	bottom: 50px;
	left: 30px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	position: absolute;
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.65s,
	-webkit-transform 0.65s;
	transition: opacity 0.65s, transform 0.65s;
}

.border-hover .et_pb_column .et_pb_promo_description:after {
	top: 30px;
	right: 50px;
	bottom: 30px;
	left: 50px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
	position: absolute;
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.65s,
	-webkit-transform 0.65s;
	transition: opacity 0.65s, transform 0.65s;
}

.border-hover .et_pb_column:hover .et_pb_promo_description:before, .border-hover .et_pb_column:hover .et_pb_promo_description:after {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	opacity: 0;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.border-hover .et_pb_column .et_pb_promo_description h2 {
	opacity: 1;
	color: #fff;
	position: absolute;
	top: 42%;
	width: 100%;
	text-align: center;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin: 0;
	padding: 10px 0;
}


.border-hover .et_pb_column:hover .et_pb_promo_description h2 {
	opacity: 0;
	position: absolute;
	top: 40%;
	width: 100%;
	text-align: center;
	color: #fff;
}

.border-hover .et_pb_promo {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.border-hover .et_pb_promo_button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cta-desc{
    font-size: 16px;
    line-height: 1.8em;
    padding-right: 70px ;
    padding-left: 70px;
}
/*Services Page Styles*/

.service-icon{
	margin-top: 60px;
}




/*-------------------[1170px]------------------*/
@media only screen and ( max-width: 1170px ) {
	#comment-wrap {
		max-width: 934px;
	}
	#logo {
    max-height: 100%;
}
	#top-menu li a {
    font-size: 14px !important;
}
#top-menu li {
    padding-right: 14px;
}
}

/*-------------------[1080px]------------------*/
@media only screen and ( max-width: 1080px ) {
	#comment-wrap {
		max-width: 934px;
	}
    #logo {
    	max-height: 95%;
}
	#top-menu li a {
    	font-size: 13px !important;
}
}


/*-------------------[1024px]------------------*/
@media only screen and ( max-width: 1024px ) {
	#comment-wrap {
		max-width: 934px;
	}
	#top-menu > li:last-child {
        padding: 10px 10px;
    }
    #logo {
    	max-height: 80%;    	
    	margin-top: -20px;
}

}

/*-------------------[980px]------------------*/
@media only screen and (max-width: 980px) {
	#comment-wrap {
		max-width: 690px;
	}
	#logo{
		margin-top: -36px;
		max-height: 100%;
	}
	.mobile_menu_bar:before {
    	position: relative;
    	top: 5px;
    	left: 0;
    	font-size: 46px;
    	content: "\61";
    	cursor: pointer;
    	font-weight: 600;
}
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
    padding-bottom: 0px;
}
.et_mobile_menu li a {
    display: block;
    padding: 10px 5%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    color: #666;
    text-align: center;
}
.et_mobile_menu li:last-child {
    background:#ec1c24;
}
.et_mobile_menu li:last-child:hover {
    background:red;
}

}

/*-------------------[570px]------------------*/
@media only screen and ( max-width: 570px ) {
#logo {
    max-height: 80%;
    margin-top: -20px;
}
.et_pb_slider .et_pb_slide_8.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
    font-size: 20px !important;
    line-height: 1.2em !important;
}
.home-title{
	font-size: 26px !important;
    line-height: 1.2;
	margin-bottom: 10px !important;

}
.home-subtitle{
	font-size: 15px !important;
}
.et_pb_row_3.et_pb_row {
    padding-bottom: 0px !important;
}
.et_pb_row_4.et_pb_row {
    padding-top: 0px !important;
}
.services-block{
	padding: 0px 0px !important;
}
.service-title{
	font-size: 16px !important;
}
.service-text{
	font-size: 14px !important;
}
.cta-desc{
    font-size: 14px;
    line-height: 1.8em;
    padding-right: 10px !important;
    padding-left: 10px !important;
}
.cta-home .home-subtitle{
	margin-bottom: 10px !important;
	text-align: center !important;
}
.cta-home .home-title{
	text-align: center !important;
}

.et_pb_row, .et_pb_column .et_pb_row_inner {
    padding: 0px !important;
}

}
/*-------------------[370px]------------------*/
@media only screen and ( max-width: 370px ) {
	#et-info-phone {
	    margin-right: 13px;
	    line-height: 2;
}
#logo {
	margin-top: -36px;
		}
		.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
    padding-bottom: 20px;
}
}

/*-------------------[320px]------------------*/
@media only screen and ( max-width: 320px ) {
	#comment-wrap {
		max-width: 274px;
	}
	#et-info-phone {
    margin-right: 13px;
    line-height: 2;
}
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 {
    width: 100% !important;
    margin: 30px 0 30px 0;
}




.ds-hover-1 {
    display: inline-block;
	position: relative;
	margin: 0px;
	overflow: hidden;
	background: #000;
}

.ds-hover-1 img {
	display: block;
	max-width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.ds-hover-1:hover img {
	opacity: 0.5;
}

.ds-hover-1::after {
	content: attr(ds-title);
	position: absolute;
	height: 12%;
	color: #fff;
    z-index: 1;
	top: 0;
	width: 90%;
	background: rgba(0,0,0,0.5);
	font-weight: 300;
	font-size: 40px;
	text-transform: uppercase;
	padding: 5%;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.ds-hover-1::before {
	content: attr(ds-desc);
	position: absolute;
	height: 100%;
	color: #fff;
	z-index: 1;
	top: 27%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	padding: 2% 5% 5% 5%;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.ds-hover-1:hover::after,
.ds-hover-1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

/*-----Push Right-----*/

.ds-hover-2 {
   	display: inline-block;
	position: relative;
	overflow: hidden;
	background: rgba(0,0,0,0.2);
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}

.ds-hover-2:hover {
	background: rgba(0,0,0,0);
}

.ds-hover-2 img {
	display: block;
	max-width: 100%;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-2:hover img {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.ds-hover-2::before,
.ds-hover-2::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	-webkit-transform: translateX(-30%);
	-moz-transform: translateX(-30%);
	transform: translateX(-30%);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-2::before {
	content: attr(ds-title);
	height: 30%;
	background-color: #000;
	color: #ffffff;
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
	padding: 7% 5%;
}

.ds-hover-2::after {
	content: attr(ds-desc);
	top: 30%;
	height: 70%;
	width: initial;
	background-color: #ff6600;
	color: #fff;
	font-size: 16px;
	padding: 5%;
}

.ds-hover-2:hover::before,
.ds-hover-2:hover::after  {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

/*-----Fade Effect-----*/

.ds-hover-3 {
	display: inline-block;
	position: relative;
	
}

.ds-hover-3 img {
	display: block;
	max-width: 100%;
}

.ds-hover-3::before,
.ds-hover-3::after {
	opacity: 0;
	position: absolute;
	width: 90%;
	color: #fff;
	padding: 5%;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.ds-hover-3::before {
	content: attr(ds-title);
	top: 0;
	height: 10%;
	background: rgba(0,0,0,0.5);
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
}

.ds-hover-3::after {
	content: attr(ds-desc);
	top: 25%;
	height: 60%;
	width: initial;
	background: rgba(255,102,0,0.5);
	font-size: 16px;
	text-align: right;
}

.ds-hover-3:hover::before,
.ds-hover-3:hover::after {
	opacity: 1;
}

/*-----Push Left-----*/

.ds-hover-4 {
   	display: inline-block;
	position: relative;
	overflow: hidden;
	background: rgba(0,0,0,0.2);
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}

.ds-hover-4:hover {
	background: rgba(0,0,0,0);
}

.ds-hover-4 img {
	display: block;
	max-width: 100%;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-4:hover img {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
}

.ds-hover-4::before,
.ds-hover-4::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	-webkit-transform: translateX(70%);
	-moz-transform: translateX(70%);
	transform: translateX(70%);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.ds-hover-4::before {
	content: attr(ds-title);
	height: 30%;
	background-color: #000;
	color: #ffffff;
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
	padding: 7% 5%;
}

.ds-hover-4::after {
	content: attr(ds-desc);
	top: 30%;
	height: 70%;
	width: initial;
	background-color: #ff6600;
	color: #fff;
	font-size: 16px;
	text-align: right;
	padding: 5%;
}

.ds-hover-4:hover::before,
.ds-hover-4:hover::after  {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}