/*
Theme Name: Sanford's Auto Body Theme
Description: Custom designed theme specially for Sanford's Auto Body
Version: 0.9
Author: Rob Williams, Results Marketing & Advertising <web@resultsinc.ca>
Tags: custom template
*/

/* Default Styles */

html, body {
    width:                  100%;
    height:                 100%;
    font-family:            'Lato', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             black;
}
body { overflow-x: hidden; }

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: #37a2d3; font-weight: 800; }
a:hover { color: blue; }

h1 {}
h2 { background: #b81e2c; color: white; font-size: 2em; font-weight: 800; line-height: 1.4em; position: relative; z-index: 5; padding: 1rem 0; width: 20%; min-width: 300px; margin: 5rem 0 2rem; }
h2:after { content: ''; position: absolute; z-index: 4; top: 0; right: 100%; background: #b81e2c; height: 100%; width: 50rem; }
h3 { font-size: 1.3em; font-weight: bold; line-height: 1.4em; margin-bottom: 1rem; }
h4 {}

header { background: url(/wp-content/uploads/2023/10/header_black.jpg) bottom center no-repeat; padding-bottom: 70px; }
main { background: url(/wp-content/uploads/2023/10/RobertSanfords_UpperBlackFooter.jpg) repeat-x bottom center; padding-bottom: 10rem; }
main > div:not(.fullwidth):not(.red_leather_area):not(.wp-block-cover), .fullwidth > div { width: 95%; max-width: 1600px !important; margin: 0 auto; }

.red_leather_area { background: url(/wp-content/uploads/2023/10/header_red.jpg) top center no-repeat; width: 100% !important; max-width: 100% !important; padding: 7rem 0 2rem; }
body:not(.home) main { background: url(/wp-content/uploads/2023/10/header_red_fade.jpg) top center no-repeat; }

.pre_header { height: 50px; line-height: 50px; background: #bf1e2d; color: white; }
.pre_header ul { list-style: none outside; width: 95%; max-width: 1600px; margin: 0 auto; font-size: 1.6rem; }
.pre_header a { color: white; }
.everything_right > * { float: right; margin-left: 1rem; font-size: 1rem; }
.everything_right p { line-height: 15px; text-align: left; position: relative; top: 10px; }
.everything_right p:first-child { line-height: 50px; font-size: 2rem; margin-left: 3rem; top: 0; }
.pre_header img { height: 40px !important; width: auto !important; position: relative; top: 5px; }

.preheader_bar .wp-block-columns .wp-block-columns .wp-block-column { text-align: right; }
.preheader_bar .wp-block-columns .wp-block-columns .wp-block-column p { font-size: 1rem; line-height: 1em; float: right; padding-top: 0.5rem; margin-right: 1rem; }
.preheader_bar .wp-block-columns .wp-block-columns .wp-block-column p:last-child { margin-right: 0; padding-top: 0; }
.preheader_bar .wp-block-columns .wp-block-columns .wp-block-column p a { font-size: 2em; line-height: 44px; position: relative; top: -0.25rem; }
.preheader_bar .wp-block-columns .wp-block-columns .wp-block-column figure { display: inline-block; margin-right: 1rem; }

.header { height: 200px; }
.header_bar { list-style: none outside; width: 95%; max-width: 1600px; margin: 0 auto; }
.header_bar figure { height: 150px; margin: 2rem 0; }
.header_bar img { height: 150px !important; width: auto !important; }

footer { background: url(/wp-content/uploads/2023/10/RobertSanfords_LowerRedFooter.jpg) black repeat-x top center; }
.prefooter_bar { margin: 0 auto; width: 95%; max-width: 1600px; padding: 5rem 0; list-style: none outside; }
.prefooter_bar .wp-block-columns { align-items: center !important; }
.prefooter_bar .wp-block-column { color: white; font-size: 1.25rem; line-height: 1.4em; }
.prefooter_bar table { width: fit-content !important; }
.prefooter_bar table td { padding: 0.5rem 2rem; }
.prefooter_bar a { color: white; }

.footer_bar { margin: 0 auto; width: 95%; max-width: 1600px; list-style: none outside; }
.footer_bar .wp-block-columns { align-items: flex-start !important; }
.footer_bar .wp-block-column { color: white; font-size: 1.25rem; line-height: 1.4em; }
#menu-footer-menu { list-style: none outside; text-align: right; }
#menu-footer-menu li { display: inline-block; margin-left: 2rem; vertical-align: middle; }
#menu-footer-menu li a { color: white; }
#menu-footer-menu li.facebook { background: #bf1e2d; width: 36px; height: 36px; position: relative; border-radius: 50px; }
#menu-footer-menu li.facebook i { position: absolute; top: 50%; left: 50%; transform: translate(-54%,-50%); }
.footer_bar .footer_logo img { width: auto !important; height: 150px !important; }
.footer_bar .uhaul_logo p { float: right; margin-left: 1rem; font-size: 0.8em; line-height: 1em; padding-top: 1.25rem; }
.footer_bar .uhaul_logo img { width: auto !important; height: 50px !important; }

.footer_bar .wp-block-columns.subfooter_bar { align-items: flex-end !important; margin-top: -6rem; }
.footer_bar .wp-block-columns.subfooter_bar p { font-size: 0.8em; }
.footer_bar .wp-block-columns.subfooter_bar figure { }

.widget_nav_menu { margin: 2rem 0; height: 12rem; }
.menu-nav-menu-container { height: 12rem; line-height: 12rem; }
#menu-nav-menu { list-style: none outside; text-align: right; }
#menu-nav-menu li { display: inline-block; line-height: 12rem; margin-left: 3rem; }
#menu-nav-menu li a { color: white; font-size: 1.6rem; font-weight: normal; }
#menu-nav-menu li:first-child { margin-left: 0; }

blockquote { width: 90%; max-width: 1280px; margin: 0 auto 2rem; padding: 2rem 4rem; background: rgba(0,0,0,0.4); border-radius: 2rem; }
blockquote h2 { background: none; font-size: 3rem; font-weight: 800; margin: 0 0 1rem; text-shadow: black 0 3px 3px; padding-right: 0; width: 100%; }
blockquote h2:after { display: none; }
blockquote p { font-size: 1.3rem; font-weight: 800; line-height: 1.4em; color: white; text-shadow: black 0 3px 3px; }
blockquote p:last-child { padding: 0; }

.black_area { padding: 3rem 0 0; }

.fp_feature { margin-bottom: 2rem; }
.fp_feature .wp-block-cover { align-items: flex-end; padding: 2rem 0; }
.fp_feature .wp-block-cover p { font-size: 3em !important; font-weight: 800; background: rgba(0,0,0,0.5); line-height: 1.4em; padding: 0.5rem 0; text-shadow: black 3px 3px 0; }
.fp_feature p { line-height: 2rem; font-size: 1.5em; color: white; padding: 1rem 2rem; }
.fp_feature .button_link { padding: 1rem 0; margin-bottom: 1rem; }
.fp_feature .button_link a { background: white; color: #bf1e2d; padding: 0.5rem 2rem; }
.fp_feature .bg_grey { background: #333; }
.fp_feature .bg_dkred { background: #bf1f2e; }
.fp_feature.bg_red { background: #e11e25; align-items: center !important; }
.fp_feature.bg_red { background: #e11e25; align-items: center !important; }

#mapp0 { border: 3px #bf1f2e solid; }

.gform_button { background: #bf1f2e; color: white; font-size: 1.5em; font-weight: 800; text-transform: uppercase; padding: 1rem 0; border: none; cursor: pointer; }

.strong-content { gap: 2rem; }
.strong-content > div { box-sizing: border-box; padding: 2rem; border-radius: 2rem; color: white; font-size: 1.25em; font-style: italic; position: relative; /*box-shadow: rgba(0,0,0,0.7) 0 5px 9px;*/ }
/*.strong-content > div:after { box-shadow: rgba(0,0,0,0.7) 0 5px 9px; }*/
.strong-content > div:nth-child(1) { background: #bf1f2e; }
.strong-content > div:nth-child(1):after {
    position: absolute;
    top: -50px;
    left: 75%;
    content:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 50,20 30,50' fill='%23bf1f2e' /%3E%3C%2Fsvg%3E");
}
.strong-content > div:nth-child(2) { background: #595959; }
.strong-content > div:nth-child(2):after {
    position: absolute;
    top: 100%;
    left: 35%;
    content:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='10,0 40,0 25,40' fill='%23595959' /%3E%3C%2Fsvg%3E");
}
.strong-content > div:nth-child(3) { background: #ffffff; color: black; }
.strong-content > div:nth-child(3):after {
    position: absolute;
    top: -50px;
    left: 75%;
    content:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='10,50 40,50 0,10' fill='%23ffffff' /%3E%3C%2Fsvg%3E");
}
.strong-content > div:nth-child(4) { background: #a6a6a6; color: black; }
.strong-content > div:nth-child(4):after {
    position: absolute;
    top: 100%;
    left: 50%;
    content:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='20,0 60,0 0,40' fill='%23a6a6a6' /%3E%3C%2Fsvg%3E");
}
.strong-content > div:nth-child(5) { background: #bf1f2e; }
.strong-content > div:nth-child(5):after {
    position: absolute;
    top: 100%;
    left: 20%;
    content:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 30,0 40,40' fill='%23bf1f2e' /%3E%3C%2Fsvg%3E");
}
.strong-content .testimonial-name { text-align: right; }

main > div.page_cover_image { width: 100% !important; max-width: 100% !important; position: relative; margin-bottom: -3rem; }
main > div.page_cover_image p { position: absolute; top: 5rem; left: 50%; transform: translate(-50%,0); font-weight: 800; font-size: 4em !important; line-height: 1.25em; color: white !important; text-shadow: rgba(0,0,0,0.4) 3px 3px 0; }

main > div.col_2_indented { width: 100% !important; max-width: 100% !important; color: white; font-size: 1.5em; line-height: 1.3em; padding: 2rem 0; }
main > div.col_2_indented > div:first-child { float: right; }
main > div.col_2_indented .wp-block-group { float: right; }
main > div.col_2_indented .wp-block-group:after { display: table; clear: both; content: ''; }
main > div.col_2_indented .wp-block-group, main > div.col_2_indented h3, main > div.col_2_indented p { max-width: 522px; /* this is the width of the image */ }
.red_gradient { background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(189,30,45,1) 20%, rgba(189,30,45,1) 80%, rgba(0,0,0,1) 100%);  }

main > div.content_block { max-width: 1024px !important; margin: 8rem auto 3rem !important; }
.content_block p { color: white; font-size: 1.5em; line-height: 1.3em; text-shadow: black 0 0 3px; }

form { background: rgba(0,0,0,0.5); color: white; padding: 2rem; }
form p { font-size: 1.5em; font-weight: bold; }

@media screen and ( max-width: 1550px ) {
    #menu-nav-menu li { margin-left: 2rem; }
    #menu-nav-menu li a { font-size: 1.4em; }
}

@media screen and ( max-width: 1270px ) {
    #menu-nav-menu li a { font-size: 1.25em; }
}

@media screen and ( max-width: 1240px ) {
    #menu-nav-menu li { line-height: 6rem; }
    .menu-nav-menu-container { line-height: 6rem;}

    blockquote { width: 90%; padding: 2rem; }
    blockquote h2 { margin-bottom: 1rem; font-size: 2em; padding: 0; }
    blockquote p { font-size: 1.25em; font-weight: normal; }

    .header_bar { width: 100%; }
    .header_bar li .wp-block-columns { display: block; }
    .header_bar figure { height: 8rem; text-align: center; }
    .header_bar img { height: 8rem !important; }
    .menu-nav-menu-container { line-height: 3rem; }
    #menu-nav-menu { background: rgba(0,0,0,0.7); text-align: center; width: 100%; }
    #menu-nav-menu li { line-height: 1.5em; }
    #menu-nav-menu li a { font-size: 1.25em; }
    .pre_header ul { font-size: 1.3rem; }

}

@media screen and ( max-width: 1120px ) {
    .everything_right p:first-child { font-size: 1.3rem; }
}

@media screen and ( max-width: 1000px ) {
    .pre_header ul { font-size: 1rem; }
    .everything_right p:first-child { font-size: 1.15rem; }
    .pre_header ul .wp-block-columns > .wp-block-column:first-child { flex-basis: 45%; }
    .pre_header ul .wp-block-columns > .wp-block-column:last-child { flex-basis: 55%; }
    .everything_right p:first-child { margin-left: 1.5rem; }
    body:not(.home) main { background: none; }
}



@media screen and ( max-width: 825px ) {
    h2 { margin-top: 2rem; }

    .pre_header ul .wp-block-columns > .wp-block-column:first-child { display: none; }
    .pre_header ul .wp-block-columns > .wp-block-column:last-child { flex-basis: 100%; }
    .pre_header ul .wp-block-columns .wp-block-columns > div:first-child { display: none; }
    .pre_header ul .wp-block-columns figure { display: none; }
    .pre_header ul .wp-block-columns .wp-block-columns > div:last-of-type { flex-basis: 100%; }
    .everything_right { position: relative; width: 100%; display: block; }
    .everything_right > * { float: none; position: absolute !important; top: 1rem; }
    .everything_right > p:first-child { right: 1rem; font-size: 1.5em; }
    .everything_right > p:nth-child(2) { left: calc( 1rem + 135px ); }
    .everything_right > figure { left: 0; top: 0; }

    main > div.col_2_indented { margin-bottom: 2rem; }
    main > div.col_2_indented > div { float: none !important; }
    main > div.col_2_indented figure, main > div.col_2_indented img { width: 100% !important; height: auto !important; }

    main > div.col_2_indented h3 { margin-top: -2rem !important; }

    main > div.col_2_indented .wp-block-group { max-width: 100%; width: 80%; margin: 0 auto; }
    main > div.col_2_indented h3, main > div.col_2_indented p { margin: 0 auto; }

    main > div.col_2_indented .wp-block-group { float: none; }

    .reverse_on_mobile > div:first-child { order: 2; }
    .reverse_on_mobile > div:last-child { order: 1; }

    .strong-content.strong-grid.columns-3 .wpmtst-testimonial { width: 100% !important; }
    .strong-view .strong-content.strong-grid .wpmtst-testimonial { margin-bottom: 3rem !important; }

    .prefooter_bar .wp-block-columns > .wp-block-column:first-child { text-align: center; background: rgba(0,0,0,0.4); padding: 2rem 0; }
    .prefooter_bar table { margin: 0 auto; }

    .footer_bar .wp-block-column { text-align: center; font-size: 1em; }
    #menu-footer-menu { text-align: center; }
    #menu-footer-menu li { display: inline; line-height: 3rem; }
    #menu-footer-menu li:last-child { display: inline-block; }
    #menu-footer-menu li:nth-child(3):after { content: "\A"; white-space: pre; }
    #menu-footer-menu li:nth-child(4) { margin-left: 0; }
    .footer_bar .uhaul_logo { display: flex; justify-content: center; }
    .footer_bar .uhaul_logo figure { float: none; order: 1; }
    .footer_bar .uhaul_logo p { float: none; order: 2; }
}

@media screen and ( max-width: 700px ) {
    #menu-nav-menu li { display: inline; }
    #menu-nav-menu li:nth-child(3):after { content: "\A"; white-space: pre; }
    #menu-nav-menu li:nth-child(4) { margin-left: 0; }
    .everything_right > p:first-child { font-size: 1.2em; }
    .everything_right > p:nth-child(2) { font-size: 0.8em; left: calc( 1rem + 100px ); }
    .everything_right > figure { top: 5px; }
    .pre_header img { height: 30px !important; }
}