/*
 * Theme Name: Northern Aspect
 * Theme URI: http://www.websitesbylucy.co.uk
 * Description: Divi child theme for Northern Aspect
 * Version: 1.0
 * Author: Lucy Davies
 * Author URI: http://www.websitesbylucy.co.uk
 * Template: Divi
 * License: GPL2
*/

/*-----Colour Palette-----*/

/*Orange: HEX #E68E68*/


.et_pb_bg_layout_light .et_pb_button:hover, 
.et_pb_bg_layout_light.et_pb_button:hover {
	background-color: #E68E68;
}

/* Spectrum layout based on tabs module*/

/*Remove the border*/

.ds-tab-steps .et_pb_tabs {
 border: none;
}


/*Evenly space tab controls*/

.ds-tab-steps ul.et_pb_tabs_controls {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}


/*Set tab control background to transparent*/

.ds-tab-steps .et_pb_tabs_controls {
 background-color: transparent;
}

.et_pb_all_tabs {
 background-color: transparent;
}

/*Center the tabs controls text*/

.ds-tab-steps .et_pb_tabs_controls li {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 width: 100%;
 border: none;
 padding: 0 10px;
}


/*Number circle styling*/

.ds-tab-steps .et_pb_tabs_controls li a {
 padding: 5px;
 background: #ffffff;
 border: 3px solid #7AA17C;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 text-align: center;
 opacity: 1;
 -webkit-transition: all .5s ease;
 transition: all .5s ease;
}


/*Number circle styling on active and hover*/

.ds-tab-steps .et_pb_tabs_controls li.et_pb_tab_active a,
.ds-tab-steps .et_pb_tabs_controls li:hover a {
 background: #6E434D;
 border-color: #6E434D;
 color: #fff;
}


/*Position the tab control subtitle text (edit text in advanced settings of each tab)*/

.ds-tab-steps .et_pb_tabs_controls li:after {
 position: absolute;
 top: 60px;
 left: 0;
 width: 80%;
 padding: 0 10%;
 text-align: center;
 line-height: 1.2em;
 color: #7AA17C;
 font-weight: 500;
 -webkit-transition: all .5s ease;
 transition: all .5s ease;
}


/*Change subtitle text colour on hover and active*/

.ds-tab-steps .et_pb_tabs_controls li.et_pb_tab_active:after,
.ds-tab-steps .et_pb_tabs_controls li:hover:after {
 color: #6E434D;
}


/*Add the line between steps*/

.ds-tab-steps .et_pb_tabs_controls li:before {
 content: '';
 position: absolute;
 top: calc(50% - 1.5px);
 left: calc(50% + 25px);
 background: #dfdfdf;
 height: 3px;
 width: 100%;
 z-index: 0;
}


/*Remove line on last tab*/

.ds-tab-steps .et_pb_tabs_controls li:last-child:before {
 display: none;
}


/*Tab content padding*/

.ds-tab-steps .et_pb_tab {
 padding: 100px 40px 0;
}


/*Smaller screens*/

@media all and (max-width: 767px) {
 /*Change tab control direction*/
 .ds-tab-steps ul.et_pb_tabs_controls {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 }
 /*Remove border*/
 .ds-tab-steps ul.et_pb_tabs_controls::after {
 border-top: none;
 }
 /*Change tab control alignment and add spacing*/
 .ds-tab-steps .et_pb_tabs_controls li {
 margin-bottom: 10px;
 -webkit-box-pack: start;
 -ms-flex-pack: start;
 justify-content: flex-start;
 }
 /*Hide line between tabs*/
 .ds-tab-steps .et_pb_tabs_controls li:before {
 display: none;
 }
 /*Reposition subtitle text*/
 .ds-tab-steps .et_pb_tabs_controls li:after {
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 left: 15px;
 padding: 0 0 0 55px;
 text-align: left;
 }
 /*Resize number circles*/
 .ds-tab-steps .et_pb_tabs_controls li a {
 padding: 3px 8px;
 width: 30px;
 height: 30px;
 line-height: 1em;
 }
 /*Adjust content padding*/
 .ds-tab-steps .et_pb_tab {
 padding: 40px 0;
 }
}

@media all and (max-width: 479px) {
 /*Adjust subtitle position*/
 .ds-tab-steps .et_pb_tabs_controls li:after {
 left: 15px;
 padding: 0 0 0 30px;
 }
}