/*
Theme Name: McLean's Overhead Garage Doors Theme
Description: Custom designed theme specially for McLean's Overhead Garage Doors
Version: 0.9
Author: Rob Williams, DevUp Inc <hello@devup.ca>
Tags: custom template
*/

/* Default Styles */

:root {
    --mclean-blue: #1b75bc;
    --mclean-ltblue: #0090eb;
    --mclean-dkblue: #004c97;
    --mclean-orange: #e85417;
    --container-width: 1280px;
}

html, body {
    width:                  100%;
    height:                 100%;
    font-family:            'Open Sans', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             #fff;
}

p { padding: 0 0 1em 0; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }

img.centered {
	display: block;
	margin: 0 auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 1em 1em;
	display: inline;
}

img.alignleft {
	display: inline;
}

img.aligncenter {
    display: block;
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { margin: 0 auto; }


/* Basic styles */

a { text-decoration: none; color: var(--mclean-blue); font-weight: 800; transition: 0.5s all; }
a:hover { color: var(--mclean-orange); }

h1 {
}

h2 { font-weight: 800; font-size: 1.5em; color: black; line-height: 1.5em; }
h2 span { color: var(--mclean-blue); }

h3 {
}

h4 {
}

main > *:not(.fullwidth):not(.metaslider) { width: 95%; max-width: var(--container-width); margin: 0 auto; }

body > header { border-top: 15px var(--mclean-blue) solid; position: relative; z-index: 5000; background: var(--mclean-blue); }
.header_bar { width: 95%; max-width: var(--container-width); margin: 0 auto; list-style: none outside; }
.header_bar img { height: 100px !important; margin: 1rem 0; display: block; }
.button_link a { display: inline-block; padding: 0.5rem 1rem; border: 2px var(--mclean-blue) solid; background: var(--mclean-blue); color: white; font-weight: 900; border-radius: 10px; transition: 0.5s all; }
.button_link a:hover { background: white; color: var(--mclean-blue); }
.header_button { padding-top: 1rem; }
.header_button a { background: white; padding: 0.5rem 1rem; border-radius: 10px; }
.header_button a:hover { color: white; background: var(--mclean-orange); border-color: var(--mclean-orange); }

.gform_button { background-color: var(--mclean-blue) !important; transition: 0.5s all !important; }
.gform_button:hover { background-color: var(--mclean-orange) !important; }

.nav_menu { list-style: none outside; background: var(--mclean-blue); padding: 0 1.5em; /*box-shadow: rgba(0,0,0,0.5) 0 3px 5px;*/ text-align: center; }
.nav_menu > li { display: inline-block; background-color: transparent; padding: 0.5em 1.5em; transition: 0.5s all ease-in-out; position: relative; }
.nav_menu > li:hover { background-color: var(--mclean-ltblue); }
.nav_menu a { font-weight: 300; color: white; font-size: 0.9em; text-transform: uppercase;  }
.nav_menu .sub-menu { background: var(--mclean-dkblue); position: absolute; top: 100%; left: 0; width: 100%; list-style: none outside; padding: 0.5em 0; display: none; }
.nav_menu .sub-menu li { white-space: nowrap; padding: 0.25em 1.5em; transition: 0.5s all ease-in-out; }
.nav_menu .sub-menu li:hover { background: var(--mclean-blue); }
.nav_menu > li:hover > .sub-menu { display: block; }

.subpage_heading { background: linear-gradient(180deg, rgba(0,76,151,1) 10%, rgba(0,35,69,1) 90%); }
.subpage_heading h2 { color: white; text-shadow: rgba(0,0,0,0.5) 3px 3px 5px; width: 95%; max-width: var(--container-width); margin: 0 auto; font-size: 3em; padding: 1rem 0; }

.margin_top { padding-top: 3rem; }
.margin_bottom { padding-bottom: 3rem; }
.extra_padding { padding: 1rem 0 2rem;}

p > a > i { margin-right: 1rem; }

.front_page_features { margin: -5rem auto 5rem !important; position: relative; z-index: 5; }
.front_page_features .wp-block-column { padding: 1rem; box-shadow: rgba(0,76,151,0.5) 0 5px 9px; }
.front_page_features .button_link a:hover { background: white; color: var(--mclean-dkblue); }
.front_page_features h2 { padding-bottom: 1rem; }

.grey_background { background: #ddd; }
.fp_section { padding: 3em 0; width: 95%; max-width: var(--container-width); margin: 0 auto; }
.fp_section h2 { margin-bottom: 1rem; }
.fp_section p { line-height: 1.4em; }

.fp_section figure { position: relative; }
.fp_section figure img { position: relative; z-index: 5; border: 1px var(--mclean-ltblue) solid; }
.fp_section_left figure:after { position: absolute; top: -1rem; left: -1rem; width: 100%; height: 100%; background: var(--mclean-blue); content: ''; }
.fp_section_right figure:after { position: absolute; bottom: -1rem; right: -1rem; width: 100%; height: 100%; background: var(--mclean-dkblue); content: ''; }


.featured_image { width: 40%; height: auto; border: 2px var(--mclean-ltblue) solid; margin: 0 2em; position: relative; }
.featured_image img { width: 100%; height: 100%; position: relative; z-index: 5; }
.featured_image_left { float: left; }
.featured_image_right { float: right; margin-bottom: 1em; }
.featured_image_bg { position: absolute; z-index: 4; width: 70%; height: 95%; }
.featured_image_left .featured_image_bg { top: -1.5em; left: -1.5em; }
.featured_image_right .featured_image_bg { bottom: -1.5em; right: -1.5em; }
.front_page_sections li.bg_Light .featured_image_bg { background: var(--mclean-ltblue); }
.front_page_sections li.bg_Dark .featured_image_bg { background: var(--mclean-dkblue); }

body > footer {
    background: var(--mclean-dkblue);
    background: linear-gradient(to bottom, var(--mclean-ltblue) 0%, var(--mclean-dkblue) 100%);
}
body > footer > footer { font-size: 0.8em; color: white; width: 95%; max-width: var(--container-width); margin: 0 auto; }
body > footer > footer p { padding: 1em 0; }
body > footer > footer p br { display: none; }
body > footer > footer a { color: white; transition: 0.5s all; }
body > footer > footer a:hover { color: #e5e500; }

main .wp-block-columns + .wp-block-columns { margin-top: 3rem !important; }
.wp-block-columns + h2 { margin-top: 3rem !important; }

.gform_wrapper { margin-bottom: 3rem !important; }

.door {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: none;
}
.logged-in .door { top: 30px; height: calc( 100vh - 30px); }
.door_segment_container {
    position: relative;
    width: 100%;
    height: 25vh;
    background: var(--mclean-blue);
    overflow: hidden;
    animation: heightChange 1s ease-in-out 0.25s;
    animation-fill-mode: forwards;
}
.door_segment_container:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25vh;
    background: linear-gradient(0deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.8) 90%);
    z-index: 5;
    display: block;
    opacity: 0;
    animation: topShading 1s ease-in-out 0.25s;
    animation-fill-mode: forwards;
}

.door_texture { display: none; width: 80%; gap: 1rem; margin: 0 auto; }
.door_segment_r .door_texture { margin-left: 10%; }
.door_texture > span { flex-basis: 33%; height: 20vh; border-width: 5px; border-style: groove; border-color: var(--mclean-dkblue); }

.door_segment_l {
    position: absolute;
    top: 0;
    left: 0;
    animation: slideUpLeft 1s ease-in-out 0.25s;
    animation-fill-mode: forwards;
    width: 55%;
}
.door_segment_r {
    position: absolute;
    top: 0;
    right: 0;
    animation: slideUpRight 1s ease-in-out 0.25s;
    animation-fill-mode: forwards;
    width: 55%;
}


@keyframes slideUpLeft {
    0% { /*transform: skew(0);*/ height: 25vh; }
    100% { /*transform: skew(-45deg);*/ height: 0; }
}
@keyframes slideUpRight {
    0% { /*transform: skew(0);*/ height: 25vh; }
    100% { /*transform: skew(45deg);*/ height: 0; }
}
@keyframes topShading {
    0% { opacity: 0; height: 25vh; }
    60% { opacity: 1; }
    100% { opacity: 0; height: 0; }
}
@keyframes heightChange{
    from { height: 25vh; }
    to { height: 0; }
}

.door_segment_2_container { animation-delay: 1s; }
.door_segment_3_container { animation-delay: 1.75s; }
.door_segment_4_container { animation-delay: 2.5s; }

.door_segment_2.door_segment_l { animation-delay: 1s; }
.door_segment_2.door_segment_r { animation-delay: 1s; }
.door_segment_3.door_segment_l { animation-delay: 1.75s; }
.door_segment_3.door_segment_r { animation-delay: 1.75s; }
.door_segment_4.door_segment_l { animation-delay: 2.5s; }
.door_segment_4.door_segment_r { animation-delay: 2.5s; }

.door_segment_2_container:after { animation-delay: 1s; }
.door_segment_3_container:after { animation-delay: 1.75s; }
.door_segment_4_container:after { animation-delay: 2.5s; }

.wp-block-gallery.has-nested-images figure.wp-block-image:last-child { flex-grow: unset; }

@media screen and (max-width: 600px) {
    .header_bar .wp-block-columns { gap: 0 !important; }
    .header_bar figure { text-align: center; margin-bottom: 0; }
    .header_button p { text-align: center !important; }
    body > footer p { text-align: center; display: table; width: 100%; padding-bottom: 5rem !important; }
    body > footer > footer p br { display: block; }
    body > footer p span { display: table-footer-group; float: none !important;  }


}