/*

Theme Name: Pro – Child Theme
Theme URI: http://theme.co/pro/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

/* ------------- FONTS ------------ */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'pragmatica', sans-serif !important;
    margin-top: 4px !important;
    font-weight: 300 !important;
    letter-spacing: .02em !important;
}

h2 strong {
    font-weight: 800 !important;
}

body {
    font-family: 'pragmatica', sans-serif !important;
    font-weight: 300 !important;
}

/* ------------ BUTTON ------------ */

.x-btn, .button, [type="submit"] {
    border: none !important;
    padding: 4px 2em 4px 0 !important;
    font-size: 105% !important;
    letter-spacing: .03em !important;
    font-weight: 500 !important;
    font-weight: 600 !important;
    color: #272727 !important;
    background-image: url('/wp-content/uploads/2017/08/redTick.png');
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

.x-btn:hover, .button:hover, [type="submit"]:hover {
    color: #bf2e1a !important;
    padding: 4px 3em 4px 0 !important;
}

.white-btn {
    border: white 3px solid !important;
    padding: .8em 2em !important;
    color: white !important;
    font-weight: 500 !important;
    background-image: none !important;
}

.white-btn:hover {
    color: #231f20 !important;
    border-color: white !important;
    background-color: white !important;
    padding: .8em 2em !important;
}

/* ------------ BANNER ------------ */

.banner {
    color: white !important;
}

.banner .white-txt, .interiorbanner .white-txt {
    font-size: 125% !important;
    font-weight: 100 !important;
    letter-spacing: .02em !important;
}

.banner .red-recycling {
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-left: 20px solid white;
    border-top: 20px solid white;
    width: 40.5% !important;
}

.banner .red-recycling h2 a {
    color: white !important;
}

.banner .red-recycling:hover {
    background-color: #272727 !important;
}

.banner .bannertitle {
    font-size: 430% !important;
}

/* ----------- INTERIOR ----------- */

h2.servicelinks {
    margin: 0px !important;
    padding: 15px 20px !important;
    background-color: #E0E0E0 !important;
}

.side-menu .widget ul, .side-menu .widget ol {
    border: none !important;
    border-radius: 0px !important;
    list-style: none !important;
    box-shadow: none !important;
}

.side-menu .widget ul li, .side-menu .widget ol li, .side-menu .widget_nav_menu ul li a, .side-menu .widget_meta ul li a, .side-menu .widget_pages ul li a {
    border-bottom: 0px !important;
    padding: 3px 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.side-menu .widget_nav_menu ul li a:before, .side-menu .widget_meta ul li a:before, .side-menu .widget_pages ul li a:before {
    content: none !important;
}

.side-menu #nav_menu-2, .side-menu #nav_menu-3, .x-main .side-menu #nav_menu-4 {
    padding: 20px !important;
    background-color: #F7F7F7 !important;
}

.side-menu .widget_nav_menu ul li a:hover, .side-menu .widget_meta ul li a:hover, .side-menu .widget_pages ul li a:hover, .side-menu .widget_nav_menu .current-menu-item>a {
    background-color: transparent !important;
}

.x-main .side-menu .widget {
    margin-top: 20px !important;
}

.x-main .side-menu #nav_menu-2, .x-main .side-menu #nav_menu-3, .x-main .side-menu #nav_menu-4 {
    margin-top: 0px !important;
}

.side-menu #text-2 {
    padding: 20px 20px 30px;
    background-color: #BF2E1A;
    text-shadow: none !important;
    color: white !important;
}

.side-menu #text-2 h2 {
    color: white !important;
    margin-bottom: 0px !important;
}

.side-menu .widget {
    text-shadow: none !important;
}

.x-sidebar .widget ul li:hover, .x-sidebar .widget ol li:hover {
    background-color: #F7F7F7 !important;
}

/* ------------ GENERAL ----------- */

.greytitle {
    position: relative;
    top: 38px !important;
    font-size: 500% !important;
}

.white-txt {
    color: white !important;
}

.text-block.red {
    color: white !important;
}

.text-block.red a {
    color: white !important;
}

.text-block {
    padding: 5% !important;
}

.image-block {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.link img {
    width: 35px !important;
    padding-top: 20px !important;
}

.client1 {
    padding-top: 43px !important;
    max-width: 250px !important;
    width: 100% !important;
}

.client2 {
    padding-top: 27px !important;
    max-width: 300px !important;
    width: 100% !important;
}

.client3 {
    max-width: 200px !important;
    width: 100% !important;
}

/* ---------- TEMPLATES ----------- */

.gen-banner {
    margin: 0 20px !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center !important;
}

.error404 .gen-banner, .archive .gen-banner, .search .gen-banner {
    background-image: url('/wp-content/uploads/2017/09/Recycling.jpg');
}

.single .gen-banner {
    background-image: url('/wp-content/uploads/2017/09/concrete.jpg');
}

.gen-banner .overlay {
    background-color: rgba(0,0,0,.5);
    padding: 80px 4% 100px !important;
}

.gen-banner .overlay h2 {
    color: white !important;
}

.single .entry-featured, .single .entry-header {
    display: none !important;
}

.single .entry-wrap {
    padding: 0px !important;
    box-shadow: none !important;
    border-radius: 0px !important;
}

.single .entry-content {
    margin-top: 0px !important;
}

.single .x-container.max, .archive .x-container.max, .search .x-container.max {
    max-width: none !important;
}

.single .x-container.width, .archive .x-container.width, .search .x-container.width {
    width: 90% !important;
}

.single .x-comments-area {
    margin-top: 1em !important;
}

.single #x-section-1 {
    padding: 0px !important;
}

.x-sidebar #categories-2 h4 {
    text-transform: lowercase !important;
    font-weight: 800 !important;
    background-color: #E0E0E0 !important;
    border-radius: 0px !important;
    padding: 20px !important;
    margin: 0px !important;
    line-height: 1.1em !important;
}

.x-sidebar #categories-2 ul {
    padding: 20px !important;
    background-color: #F7F7F7 !important;
}

.x-sidebar .widget ul, .x-sidebar .widget ol {
    border: none !important;
    border-radius: 0px !important;
    list-style: none !important;
    box-shadow: none !important;
}

.x-sidebar .widget ul li, .x-sidebar .widget ol li, .x-sidebar .widget_nav_menu ul li a, .x-sidebar .widget_meta ul li a, .x-sidebar .widget_pages ul li a {
    border-bottom: 0px !important;
    padding: 3px 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.x-sidebar .widget ul li a, .x-sidebar .widget ol li a {
    border-bottom: 0px !important;
}

.x-sidebar #text-3 {
    padding: 20px 20px 30px;
    background-color: #BF2E1A;
    text-shadow: none !important;
    color: white !important;
}

.x-sidebar #text-3 h2 {
    color: white !important;
    line-height: 1.1em !important;
}

.x-sidebar #text-3 .x-btn {
    color: white !important;
    background-image: url(/wp-content/uploads/2017/08/whiteTick.jpg) !important;
}

.x-sidebar #text-3 .x-btn:hover {
    color: #272727 !important;
}

.search article .tg-item-media-holder.tg-light {
    display: none !important;
}

.search article.tg-item .tg-dark h2.tg-item-title, .archive article.tg-item .tg-dark h2.tg-item-title {
    font-size: 26px !important;
    line-height: 28px !important;
    text-transform: lowercase !important;
    font-weight: 600 !important;
}

.search article.tg-item .tg-dark h2.tg-item-title:after {
    content: url('/wp-content/uploads/2017/08/redLine.png');
    display: -webkit-box;
}

.search article.tg-archive .tg-element-1:after {
    content: none !important;
}

.search article.tg-item .tg-item-date {
    font-size: 14px !important;
    text-transform: uppercase !important;
}

.search article.tg-item .tg-item-footer {
    display: none !important;
}

.search article.tg-archive .tg-element-3, .archive article.tg-archive .tg-element-3, .search article.tg-archive .tg-element-2, .archive article.tg-archive .tg-element-2 {
    font-size: 15px !important;
    color: #272727 !important;
}

/* ------------- GRID ------------- */

#grid-118 article:hover .tg-item-overlay, #grid-168 article:hover .tg-item-overlay, #grid-438 article:hover .tg-item-overlay {
    background-color: hsl(7, 76%, 43%) !important;
    transition: all 0.15s ease-in; 
}

/* ------------- FORM ------------- */

body .gform_wrapper .top_label .gfield_label, body .gform_wrapper .ginput_complex label {
    display: none !important;
}

body .gform_wrapper input[type=text], body .gform_wrapper .top_label textarea.textarea {
    font-weight: 300 !important;
    font-size: 16px !important;
    border-radius: 0px !important;
    border: none !important;
}

.gform_wrapper {
    margin: 0px !important;
}

.contact [type="submit"], .contact .x-btn, .side-menu #text-2 .x-btn {
    color: white !important;
    background-image: url('/wp-content/uploads/2017/08/whiteTick.jpg') !important;
}

.contact [type="submit"]:hover, .contact .x-btn:hover, .side-menu #text-2 .x-btn:hover {
    color: #272727 !important;
}

.validation_error {
    color: white !important;
    border-color: white !important;
}

/* ---------- CALCULATOR ---------- */

.h-display-calc {
    width: 100% !important;
    border-radius: 20px;
    background-color: #F2F2F2;
    margin-bottom: 20px !important;
}

.h-add-display {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #BFBEBE;
}

button.h-add-input {
    border: 4px solid #BFBEBE;
    background-color: transparent;
    border-radius: 100px;
    padding: 0px 20px;
    display: -webkit-box;
    margin: auto;
    color: #BFBEBE;
    font-size: 201%;
}

button.h-add-input:hover {
    color: #272727 !important;
    border-color: #272727 !important;
}

.h-add-display span {
    color: #BFBEBE;
    font-weight: 600;
}

.h-totals, .h-display-foot {
    padding: 10px 20px !important;
}

#h-totals-text, .h-display-foot-total {
    text-align: right !important;
    width: 70% !important;
    padding-right: 2% !important;
    display: inline-block;
    text-shadow: none !important;
}

#h-total-container, .h-display-foot-price {
    width: 25% !important;
    display: inline-block;
    text-align: right !important;
    color: #67B51A !important;
}

.h-display-materials {
    border-radius: 20px;
    width: 100% !important;
    background-color: #F2F2F2 !important;
}

.h-display-head, h4.recycling-title {
    padding: 17px 20px 15px;
    background-color: #D4D4D4 !important;
    border-radius: 20px 20px 0 0 !important;
    text-align: center !important;
    text-transform: lowercase !important;
    font-size: 150% !important;
    text-shadow: none !important;
}

.h-display-calc .h-display {
    padding: 17px 20px 15px;
    background-color: #D4D4D4 !important;
    border-radius: 20px 20px 0 0 !important;
    text-align: center !important;
    text-transform: lowercase !important;
    font-size: 150% !important;
    text-shadow: none !important;
    margin-top: 20px;
}

.h-display-col-1 {
    width: 47% !important;
    padding-right: 3% !important;
    display: inline-block !important;
}

.h-display-row, .h-inputs {
    padding: 8px 20px;
    text-shadow: none !important;
}

.h-display-row:nth-child(even), .h-inputs:nth-child(even) {
    background-color: #E5E5E5;
}

.h-display-col-3 {
    padding-right: 2% !important;
    font-weight: 900;
}

.h-display-col-3 img {
    position: relative !important;
    left: 5px;
}

.h-display-col-3, .h-display-col-4 {
    width: 24% !important;
    display: inline-block !important;
    text-align: right !important;
}

.h-display-body {
    padding-bottom: 10px !important;
}

.h-display-foot {
    display: none !important;
}

h4.recycling-title {
    margin-bottom: 0px !important;
    text-shadow: none !important;
}

#text-4 p {
    display: none;
    text-shadow: none !important;
}

.h-remove {
    display: inline-block !important;
    margin-right: 2px !important;
}

button.h-remove {
    border: none !important;
    background-color: #BF2E1A !important;
    border-radius: 100px !important;
    color: white !important;
    text-transform: lowercase;
    padding: 0 9px 1px !important;
    font-size: 80% !important;
}

button.h-remove:hover {
    background-color: #272727 !important;
}

.h-dropdown {
    display: inline-block !important;
    width: 40%;
    margin-right: 2%;
}

.h-metal-dropdown, input.h-metal-quant {
    margin-bottom: 0px !important;
    width: 100% !important;
}

.h-quantity {
    display: inline-block !important;
    width: 30%;
    padding-right: 2%;
}

.h-price {
    display: inline-block !important;
    text-align: right !important;
    width: 18% !important;
    color: #67B51A !important;
}

.h-display-last-updated {
    text-align: center !important;
}

/* ------------ FOOTER ------------ */

.fm9.x-bar-container, .fm5.x-bar-container {
    display: inherit !important;
    display: inherit !important;
    position: relative;
    z-index: 1;
    width: 100% !important;
}

.fm5 img {
    width: 360px !important;
    padding-top: 3px !important
}

.recycled .fm5 img {
    width: 250px !important;
}

#x-site {
    max-width: 1280px !important;
    margin: auto !important;
}

/* ---------- RESPONSIVE --------- */

@media only screen and (max-width: 875px) {
    
    .banner .red-recycling {
        position: inherit !important;
        width: 100% !important;
        margin-right: 0px !important;
        border-left: 0px !important;
        padding-bottom: 45px !important;
    }
    
}

@media only screen and (max-width: 767px) {
    
    .x-section {
        margin: 0 10px 15px !important;
    }
    
    .banner {
        padding: 95px 0 0px !important;
    }
    
    .banner .bannertitle {
        font-size: 360% !important;
    }
    
    .text-block {
        padding: 10% 5% !important;
    }
    
    .greytitle {
        top: 30px !important;
    }
    
    .contact .x-map-inner {
        padding-bottom: 400px !important;
    }
    
    .gen-banner h2.h2 {
        font-size: 220% !important;
        line-height: 1.2em !important;
    }
    
    .interiorbanner h2 {
        font-size: 220% !important;
    }
    
    .client1, .client2, .client3 {
        width: 200px !important;
    }
    
    button.h-add-input {
        padding: 0px 16px !important;
    }
    
    button.h-remove {
        padding: 0 7px 1px !important;
    }
    
    .h-dropdown {
        width: calc(100% - 30px) !important;
        margin-bottom: 2% !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    .h-quantity {
        width: 50% !important;
        padding-left: 26px !important;
    }
    
    .h-price {
        width: 36% !important;
    }
    
}

@media only screen and (max-width: 500px) {
    
    .banner .bannertitle {
        font-size: 280% !important;
    }
    
}