/* 
 Theme Name:     LoveDivi | Go Designs
 Author:         Graeme Wright
 Author URI:     http://lovedivi.com/
 Template:       Divi
 Version:        Contractors Version1
 Description:   A Divi Child Theme built by LoveDivi

 Wordpress Version: 4.5.3
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/******************************************SOCIAL MEDIA ICONS **********************************************/

ul.et_pb_social_media_follow { 
width:100%; 
text-align:center; 
margin: 0 0 0 0 ; 
} .et_pb_social_media_follow li { 
float:none; 
display:inline-block; 
}

.et_pb_social_media_follow li a.icon::before {
    display: block;
    width: 32px;
    height: 32px;
    color: #000;
    font-size: 16px;
    line-height: 32px;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.et_pb_social_media_follow li a.icon.rounded_rectangle {
    border-radius: 0px;
}

/********--CHANGES THE HOVER ON SOCIAL MEDIA TO ORANGE---********/
.et_pb_social_media_follow li a.icon.rounded_rectangle:hover {
    background: #80c340!important;
transition: 0.7s ease!important;
}

/************************************SOCIAL MEDIA EDITS END *************************************/


blockquote {
    margin: 20px 0 30px;
    padding-left: 20px;
    border-left: 8px solid #80c340 ;
}



.quote-box {
margin-top: -160px!important ;

background-repeat:no-repeat;
z-index:999;
 padding: 40px 15px 40px ;}


.et_pb_contact_form_0.et_pb_contact_form_container h1 {
    font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
    font-size: 25px;
    text-align: center ;
}


    


/*******************FREE QUOTE BUTTON SKEW************************/
/****** Create a custom CSS for the free quote menu, I used 'free-quote'*****************/

#top-header .container {
    padding-top: 0em;
    font-weight: 600;
padding-bottom: 0em!important;
}

.free-quote {
  transform: skew(-10deg) ;
  -webkit-transform: skew(-10deg);
  -moz-transform: skew(-10deg);
}

/*****This brings the text back to normal*******/
.free-quote a {
  transform: skew(10deg) ;
  -webkit-transform: skew(10deg) ;
  -moz-transform: skew(10deg) ;
  
}

/* style the free quote cta button */
            .free-quote {border-radius: 0px;}
            .free-quote a {color: #fff!important;}
            li.free-quote {
                background-color:#80c340; 
                font-weight: 600; 
                text-transform: uppercase; 
                text-align: center; 
                padding-top:22px!important;
padding-bottom: 10px!important ;
padding-right: 20px!important;
padding-left:20px!important;
border-right: 10px solid #fff;
            border-radius: 0px;
                -moz-transition: all 0.5s; 
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.free-quote:hover {background-color:#000;}
 
/* fixed header button text color */
                 .et-fixed-header #top-menu .free-quote a {
                        color: #fff!important;}
        .free-quote li.current-menu-ancestor > a, .free-quote li.current-menu-item > a {
                    color: #fff !important;}
 
 @media only screen and ( min-width: 468px ) and ( max-width: 980px ) {
li.free-quote {
    background-color: #80c340;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding-top: 8px!important;
    padding-bottom: 10px!important;
    padding-right: 20px!important;
    padding-left: 20px!important;
    border-right: 10px solid #fff;
    border-radius: 0px;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
}



/********Drop down menu top border *************/
.nav li ul {
    border-top: 1px solid #fff;
}


.work-button { padding-left: 2em!important ;
padding-right: 2em!important ; }

/******************SLIDER CSS*******************************/
/******Gives a white transparent background on mobile*********/
/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
.slide_description .et_pb_slide_content {
background-color: rgba(250, 250, 250, 0.7)!important ;
padding: 30px ;
}
}

/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
.slide_description .et_pb_slide_content {
background-color: rgba(250, 250, 250, 0.7)!important ;
padding: 30px ;
}
}

/* Tablets in portrait mode (768-980px) */
.slide_description .et_pb_slide_content {
background-color: rgba(250, 250, 250, 0.7)!important ;
padding: 30px ;
}
}

/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { 
.slide_description .et_pb_slide_content {
background-color: rgba(250, 250, 250, 0.7)!important ;
padding: 30px ;
}
}

/*****************SLIDER END***************************/

/*********************** Line pattern for the top header *****************************/
#top-header {
  background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-image: -o-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  -webkit-background-size: 4px 4px;
  -moz-background-size: 4px 4px;
  background-size: 4px 4px;
}

/*---Ads the white bottom border on fixed Nav when scrolling ---*/
.et-fixed-header#main-header {
    box-shadow: none !important;
border-bottom: 1px solid #fff!important ;
}

/*************ARROW LEFT OF QUOTE BOX Pg 1*****************/
/*--Arrow on left of Quote contact box ---*/
.arrow_box:after, .arrow_box:before {
	right: 28%;
	top: 40%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(213, 28, 15, 0);
	border-right-color: #2d2d2d;
	border-width: 30px;
	margin-top: -30px;
}
.arrow_box:before {
	border-color: rgba(245, 47, 24, 0);
	border-right-color: #2d2d2d;
	border-width: 36px;
	margin-top: -36px;
}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
    .arrow_box { display:none ;}
}

/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
    .arrow_box { display:none ;}
}

/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
   .arrow_box { display:none ;}
}




/************************************ OFFSET IMAGE BORDER ON HOVER  ********************************/

.border_hover img:hover {
outline: 1px solid #fff!important;
outline-offset: -10px!important ;
transition: all 0.2s ease-in-out;
transition-duration: 0.2s;
transition-timing-function: ease-out;

}

/*---This reduces the style image back after hover---*/
.border_hover img {
transform: scale (1.0);
outline: 0px solid #fff!important;
outline-offset: 0px!important ;
-webkit-transition-duration: 200ms;
    -moz-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    transition-duration: 200ms; }

/**********************************************************************************************/

/**************TOGGLE ICON EDITS ****************************/

.et_pb_toggle_title:before {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -0.5em;
    font-size: 16px;
    content: "\e035"; /* This is the tool icon */
background-color: #fff ;
padding: 5px 5px 5px 5px ;
border: solid 1px #000 ;
}

.other_skills .et_pb_toggle_title:before {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -0.5em;
    font-size: 16px;
    content: "\e037"; /* This is the round gear icon */
}

/*****Home Page 2 top toggle makes background trasparent*****/
.toggle_two .et_pb_toggle_title:before {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -0.5em;
    font-size: 16px;
    content: "\e035"; /* This is the tool icon for toggle pg2 */
background-color: transparent!important ;
padding: 5px 5px 5px 5px ;
border: solid 1px #000 ;
}


/******************SCROLL TO TOP BUTTON **************************/
.et_pb_scroll_top.et-pb-icon {
    background: #80c340 !important ;
margin-right: -4px ;
border-top-left-radius: 0px!important ;
border-bottom-left-radius: 0px!important ;
 }
/*****************************************************************/


/************************************* [Equalise the Tabs] **************************************/
.equal-tabs .et_pb_tabs_controls li {
    width: 20%; /*change width of tabs here depending on the number of tabs you have*/
    text-align: center;
border-right: 1px solid #fff!important ;
}

@media screen and (max-width: 768px){ /*change device breakpoint here depending on the number of tabs you have*/
.equal-tabs .et_pb_tabs_controls li {
    width: 100%; 
	text-align: center;
}
}

ul.et_pb_tabs_controls {
    border-bottom: 1px solid #fff;
}


/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.et_pb_tabs_0.et_pb_tabs .et_pb_tabs_controls li {
    font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px!important;
}}

/*-----------END OF TABS EDITS--------------------------*/


/****************************POST HEADER WITH ORANGE BACKGROUND *************************/
.et_pb_post h2 a, .et_pb_portfolio_item h3 a {
text-align: center ;
    background-color: #80c340 ;
padding: 15px 30px 15px ;
}

.et_pb_post h2 , .et_pb_portfolio_item h3  {
float: left ;
margin-top: -20px ;
margin-right: 40px ;
position: relative ;
z-index: 999 ;
 }

.et_pb_blog_0 .et_pb_post .post-meta {
    margin-top: 40px ;
}

/*********************CHANGE HAMBURGER MENU TO 'MENU'*************************/
/* -- Changing the hamburger menu on mobile ---*/
.mobile_menu_bar:before {
            display:none}
    .mobile_menu_bar::after {
            font-family: "Open Sans", Arial, sans-serif;
            content: "MENU";
            position: relative;
            padding: 10px 20px 10px 20px;
            background-color: #80c340;
            color: #FFFFFF!important;
        cursor: pointer;}
    .mobile_nav.opened .mobile_menu_bar:after {
        content: "X";}


/*****************WHY CHOOSE BOX UP ***************************/


/* Large screens (1405px upwards) */
@media only screen and ( min-width: 1405px ) { 
   .why-choose {
margin-top: -180px;
 z-index: 10;
 position: relative;
 padding: 5%; }
}

/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) { 
   .why-choose {
margin-top: -180px;
 z-index: 10;
 position: relative;
 padding: 5%; }
}

/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { 
    .why-choose {
margin-top: -180px;
 z-index: 10;
 position: relative;
 padding: 5%; }
}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
   .why-choose {
margin-top: 0px;
 z-index: 10;
 position: relative;
 padding: 5%; }
}

/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
       .why-choose {
margin-top: 0px;
 z-index: 10;
 position: relative;
 padding: 5%; }
}

/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
     .why-choose {
margin-top: 0px;
 z-index: 10;
 position: relative;
 padding: 5%; }
}

/*-----------Removes white border lines contact info -------------*
/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
.contact_orange .phone-right-border {
border-right: 1px solid rgba(255, 255, 255, 0.0 ) ; }
}

/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
.contact_orange .email-left-border {
border-left: 0px solid #fff!important }}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.contact_orange .email-left-border {
border-left: 0px solid #fff!important }}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.contact_orange .phone-right-border {
border-right: 0px solid #fff!important }}

/************************** END **********************************/
/*****************www.lovedivi.com********************************/