/* 
 Theme Name:     All Star Roof Systems | WizardsWebs Design
 Author:         Graeme Wright
 Author URI:     http://lovedivi.com/
 Template:       Divi
 Version:        Contractors Version1
 Description:   A Divi Child Theme 

 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: #f45900!important;
transition: 0.7s ease!important;
}

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


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



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

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




    


/*******************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:#f45900; 
                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: #f45900;
    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) */
@media only screen and ( min-width: 768px ) and ( max-width: 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***************************/

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




/**************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: #f45900!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--------------------------*/




/*********************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: #f45900;
            color: #FFFFFF!important;
        cursor: pointer;}
    .mobile_nav.opened .mobile_menu_bar:after {
        content: "X";}



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

/* BOUNCING MORE ICON */
 
@-webkit-keyframes bounce {
0%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes bounce {
0%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
span.scroll-down.et-pb-icon { 
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}


/*-----increase bullet list spacing -----------------------------------*/

.et_pb_text ul, .et_pb_text ol { margin: 30px; }
.et_pb_text li { margin-top: 16px; }




/*-----------------------------------------------*/

.strong-view.modern .testimonial-content {

  color: #CDCDCD;

  margin: 0 56px;

  font-size: 1.5em;

  font-style: italic;

  text-align: center;

  position: relative;

}


.strong-view.modern .testimonial-name {

  color: #CDCDCD;

  font-size: 1.4em;

  font-weight: 700;

}







/*------------------------------------------------*/
/*-------------[TESTIMONIAL HOVER]----------------*/
/*--------------[BY GENO QUIROZ]------------------*/
/*------------------------------------------------*/
 
 
/* testimonials */
    .gq-module-hover {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        -webkit-transition: all 0.6s;
        transition: all 0.6s;}
    .gq-module-hover:hover {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
        z-index: 1;}
         
         
/*------------------------------------------------*/

#top-menu {
padding-right: 50px;
}




/*----------Sub Menu----------*/
 
#top-menu li li a {
    border: 1px solid #EA5700;
    margin-bottom: 15px;
    text-align: center;
}
 
#top-menu li li a:hover {
    color: white!important;
    background: #EA5700;
    opacity: 1!important;
}
 
.nav li ul {
    border-top: 0px solid #0a2b66;
    margin-top: -20px;
}
 
/*----------Sub Menu Mobile----------*/
 
.et_mobile_menu {
    border-top: 0px solid #2ea3f2;
}