/* 
Theme Name: thecampbellkev
Theme URI: www.thecampbellkev.co.uk
Description: A child theme template for Divi
Author: Kevin Campbell
Author URI: www.thecampbellkev.co.uk
Template: Divi
Version: 1.0.0
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 
h1 {
	font-size: 2rem;
	text-transform: uppercase;
}

h2 {
	font-size: 1.5rem;
	text-transform: uppercase;

}

h3 {
	font-size: 1.25rem;
	text-transform: uppercase;
}

h4 {
	font-size: 1.125rem;
	text-transform: uppercase;

}

/* -- Modifying colour --- */ 
a {
	color: #1A7DD7;
}



.woocommerce .woocommerce-message {
	background: #1A7DD7;
}
#et_search_icon:hover,
#top-menu li.current-menu-ancestor>a,
#top-menu li.current-menu-item>a,
.bottom-nav li.current-menu-item>a,
.comment-reply-link,
.entry-summary p.price ins,
.et-social-icon a:hover,
.et_password_protected_form .et_submit_button,
.footer-widget h4,
.form-submit .et_pb_button,
.mobile_menu_bar:after,
.mobile_menu_bar:before,
.nav-single a,
.posted_in a,
.woocommerce #content div.product p.price,
.woocommerce #content div.product span.price,
.woocommerce #content input.button,
.woocommerce #content input.button.alt,
.woocommerce #content input.button.alt:hover,
.woocommerce #content input.button:hover,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .star-rating span:before,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce a.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce button.button.alt:hover,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce input.button.alt:hover,
.woocommerce input.button:hover,
.woocommerce-page #content div.product p.price,
.woocommerce-page #content div.product span.price,
.woocommerce-page #content input.button,
.woocommerce-page #content input.button.alt,
.woocommerce-page #content input.button.alt:hover,
.woocommerce-page #respond input#submit,
.woocommerce-page #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce-page .star-rating span:before,
.woocommerce-page a.button,
.woocommerce-page a.button.alt,
.woocommerce-page a.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button,
.woocommerce-page button.button.alt,
.woocommerce-page button.button.alt:hover,
.woocommerce-page button.button:hover,
.woocommerce-page div.product p.price,
.woocommerce-page div.product span.price,
.woocommerce-page input.button,
.woocommerce-page input.button.alt,
.woocommerce-page input.button.alt:hover,
.woocommerce-page input.button:hover,
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
	color: #1A7DD7;
}

.et-search-form,
.et_mobile_menu,
.footer-widget li:before,
.nav li ul,
blockquote {
	border-color: #1A7DD7;
}

#et-secondary-nav li ul,
#top-header {
	background-color: #1A7DD7;
}

.et_slide_in_menu_container {
	background: #1A7DD7;
}

.et_overlay:before,
.et_pb_bg_layout_light .et_pb_more_button,
.et_pb_bg_layout_light .et_pb_newsletter_button,
.et_pb_bg_layout_light .et_pb_promo_button,
.et_pb_bg_layout_light.et_pb_module.et_pb_button,
.et_pb_contact_submit,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active,
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active,
.et_pb_gallery .et_pb_gallery_pagination ul li a.active,
.et_pb_member_social_links a:hover,
.et_pb_pricing li a,
.et_pb_pricing_table_button,
.et_pb_sum,
.woocommerce-page #content input.button:hover .et_pb_widget li a:hover {
	color: 1A7DD7;
}

.et_pb_pricing li span:before {
	border-color: 1A7DD7;
}

.et_audio_content,
.et_link_content,
.et_pb_counter_amount,
.et_pb_featured_table .et_pb_pricing_heading,
.et_quote_content {
	background-color: 1A7DD7;
}

.et_pb_contact p input[type=checkbox]:checked+label i:before {
	color: 1A7DD7;
}

.et_pb_contact p input[type=radio]:checked+label i:before {
	background: 1A7DD7;
}

.et_pb_fullwidth_menu .fullwidth-menu-nav>ul.upwards li ul {
	border-bottom-color: 1A7DD7;
}

.nav li ul {
	border-top: 1A7DD7;
}

.et_mobile_menu {
	border-top: 1A7DD7;
}

.et_pb_post_slider.et_pb_bg_layout_dark {
	background-color: 1A7DD7;
}

.header-content h1 {
	font-size: 3rem;
	color: #fff;
}
.et_pb_fullwidth_header_subhead {
	font-size: 1.25rem;
	color: #fff;
	line-height: 1.8rem;
}

/*** Main Menu ***/
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 30%;
 background: #fff; /*** COLOR OF THE LINE ***/
 height: 2px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

/*** contact form ***/
.et_pb_contact_field *{
background: #eee;
padding: 4px;
font-size: 14px;
}

.et_pb_contact p input[type="checkbox"] + label i, .et_pb_contact p input[type="radio"] + label i {
    background-color: #fff;
}

.et_contact_bottom_container {
	color: #fff;
}
#light_box .et_contact_bottom_container {
	color: #03275A;
}

.light_box {
	color: #fff;
}
.big_statement h2 {
	font-size: 1.75rem;
	line-height: 1em;
}

.portfolionumber {
	font-weight: 700;
	font-size: 80px;
	line-height: 1em;
	color: #1A7DD7;
	border-bottom: 5px solid #f2b809;
}
.portfoliotext {
	font-size: 18px;
	line-height: 1.8em;
	color: #03275A;
}

/*------------------------------------------------*/
/*---------[GQ - CUSTOM PORTFOLIO GRID]-----------*/
/*------------------------------------------------*/
 
/* Change columns from 4-3 */
 
    @media (min-width: 981px){ 
        .gq-portfolio-section .et_pb_gutters2.et_pb_row .et_pb_column_4_4 .et_pb_grid_item  {width: 31.33% !important;}
        .gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {clear: inherit;}
        .gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n) {margin-right: 3%!important;}
        .gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(3n) {margin-right: 0%!important;}}
 
/* special hover effect for desktop only */
 
    @media (min-width: 981px){ 
    .gq-portfolio-section .et_portfolio_image {
        min-height: 200px;}
 
    .gq-portfolio-section .et_pb_portfolio_item {
            position: relative;
            overflow: hidden;
            max-height: 320px;}
 
    .gq-portfolio-section .et_pb_portfolio_item img {
            webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: scale(1.15);
            transform: scale(1.15);}
 
    .gq-portfolio-section .et_pb_portfolio_item:hover img {
            -webkit-transform: scale(1);
            transform: scale(1);}
 
    .gq-portfolio-section .et_pb_portfolio_item h2 {
        background-color: #03275A;
        color: #fff;
        font-size: 16px;
        position:absolute;
        text-align:center;
        width:100%;
        top:100%;
        transition:.5s;
        webkit-transition:.5s;}
 
    .gq-portfolio-section .et_pb_portfolio_item:hover h2 {
            top: 78%;
            padding: 15px 0;}
 
    .gq-portfolio-section .et_overlay {z-index: 0;}
 
    }
 
        @media only screen and (min-width : 1061px) and (max-width : 1200px) {
            .gq-portfolio-section  .et_pb_portfolio_item h2 {font-size: 15px!important;}
            .gq-portfolio-section  .et_pb_portfolio_item:hover h2 {top: 73%!important;}}
 
        @media only screen and (min-width : 981px) and (max-width : 1060px) {
            .gq-portfolio-section  .et_pb_portfolio_item h2 {font-size: 14px!important;}
            .gq-portfolio-section  .et_pb_portfolio_item:hover h2 {top: 72%!important;}}
 
        @media only screen and (max-width : 980px) {
            .gq-portfolio-section .et_pb_portfolio_item h2 {font-size: 14px!important;}
            .gq-portfolio-section .et_overlay {display:none;}}