/* 

 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********************************/