/*-------------------------------------------------------------- ======DanzerPress Layouts====== Version: 3.0 Author: https://danzerpress.com Documentation: https://layouts.danzerpress.com ======Table of Contents====== ##Fonts ##Styles *Contact form 7* ##Section Wraps ##Override Colors ##Override Display ##Aspect Ratios *Force 16:9 aspect ratio* *Force 4:3 aspect ratio* *Content inside* ##Flex Directions ##Flex Alignments ##Flex Layouts ##Base Column Settings ##Flex Orders ##Position Overrides ##Fixes ##Queries *Desktop Plus* *Desktop* *Tablet Landscape* *Phone Portrait* --------------------------------------------------------------*/ html { box-sizing: border-box; -ms-overflow-style: scrollbar; } *, *::before, *::after { box-sizing: inherit; } /*-------------------------------------------------------------- ##Fonts --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: 600; color: #333333; } p, li, a, ul, input, textarea { font-family: 'Open Sans', sans-serif; } p { margin: 0 0 20px; font-size: 16px; line-height: 26px; color: grey; } .danzerpress-title { font-size: 40px; letter-spacing: 3.5px; font-weight: 800; text-transform: uppercase; text-align: center; padding: 0px; margin: inherit; margin-top: 0px; margin-bottom: 15px; } h2.danzerpress-title { font-size: 32px; line-height: 35px; margin-bottom: 5px; margin-top: 20px; } h4, h3.widget-title { margin-top: 0px; text-transform: uppercase; font-size: 15px; margin-bottom: 0; } h3.widget-title { font-size: 20px; } h5, .danzerpress-small-title { margin-top: 0px; text-transform: uppercase; margin-bottom: 5px; font-size: 22px; } /*-------------------------------------------------------------- ##Styles --------------------------------------------------------------*/ ::-moz-selection { background: #05C4EB; color: white; } ::selection { background: #05C4EB; color: white; } .danzerpress-page-look { background: white; border: 2px solid rgba(128, 128, 128, 0.33); } .danzerpress-shadow-1 { box-shadow: 0 4px 12px 0px rgba(0, 0, 0, 0.25); } .danzerpress-shadow-2 { box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.09019607843137255); } .danzerpress-shadow-3 { box-shadow: 0 1px 1px rgba(0,0,0,.08); } .danzerpress-button-modern, .form-row input.woocommerce-Button.button, input[type="button"], input[type="reset"], input[type="submit"] { z-index: 7; white-space: nowrap; font-size: 15px; line-height: 15px; font-weight: 600; font-family: Raleway; border: 2px solid #05C4EB; border-radius: 4px; letter-spacing: 1px; padding: 14px 35px 15px; opacity: 1; background: #05C4EB; color: white; text-transform: uppercase; display: inline-block; text-align: center; } .danzerpress-button-modern:hover { background: #242a2f; opacity: 1; transition: .5s; color: white; border-color: #242a2f; } .danzerpress-button-modern-transparent { background: transparent; color: #333333; margin-top: 8px; display: inline-block; font-weight: bold; } .danzerpress-button-left { margin-right: 15px; } .danzerpress-button-off { background: #494949; border-color: #494949; } /*Contact form 7*/ span.wpcf7-not-valid-tip { text-transform: uppercase; font-size: 12px; color: red; } div.wpcf7-mail-sent-ok { border: 2px solid #31ba57; background: #31ba57; color: white; text-align: center; text-transform: uppercase; font-size: 14px; } div.wpcf7-validation-errors { border: 2px solid red; background: red; color: white; text-transform: uppercase; font-size: 14px; text-align: center; } /*-------------------------------------------------------------- ##Section Wraps --------------------------------------------------------------*/ .danzerpress-container-fw { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #f8f9f9; } .danzerpress-section { background: white; padding: 140px 0; overflow: hidden; } .danzerpress-wrap { width: 80%; margin: auto; max-width: 1500px; overflow: hidden; overflow: visible; } .danzerpress-box { padding: 20px; flex: 1 0 auto; min-height: 1px; } .danzerpress-box p:last-child { margin: 0; } /*-------------------------------------------------------------- ##Override Colors --------------------------------------------------------------*/ .danzerpress-color-white { color: white; } .danzerpress-white { background: white; } .danzerpress-grey { background: rgb(248, 249, 249); } .danzerpress-odd { background: #f8f9f9; } /*-------------------------------------------------------------- ##Override Display --------------------------------------------------------------*/ .danzerpress-display { display: block; } .danzerpress-no-display { display: none; } /*-------------------------------------------------------------- ##Aspect Ratios --------------------------------------------------------------*/ /*Force 16:9 aspect ratio*/ .danzerpress-rectangle { width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ position: relative; } /*Force 4:3 aspect ratio*/ .danzerpress-square { width: 100%; padding-top: 100%; /*4:3 Aspect Ratio*/ position: relative; } /*Content inside*/ .danzerpress-ab-items { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; } /*-------------------------------------------------------------- ##Flex Directions --------------------------------------------------------------*/ .danzerpress-flex-row { display: flex; flex-direction: row; flex-wrap: wrap; } .danzerpress-flex-column { display: flex; flex-direction: column; flex-wrap: wrap; } /*-------------------------------------------------------------- ##Flex Alignments --------------------------------------------------------------*/ .danzerpress-justify-start { justify-content: flex-start; } .danzerpress-justify-end { justify-content: flex-end; } .danzerpress-justify-center { justify-content: center; } .danzerpress-justify-around { justify-content: space-around; } .danzerpress-justify-between { justify-content: space-between; } .danzerpress-align-self { align-self: center; } .danzerpress-align-content { align-content: center; } /*-------------------------------------------------------------- ##Flex Layouts --------------------------------------------------------------*/ .danzerpress-col-1 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .danzerpress-col-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-col-3 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .danzerpress-col-4 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-col-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .danzerpress-col-6 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .danzerpress-one-third { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .danzerpress-two-thirds { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .danzerpress-one-fourth { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-one-half { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-three-fourths { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .danzerpress-four-fifths { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } /*-------------------------------------------------------------- ##Base Column Settings --------------------------------------------------------------*/ .danzerpress-col-1, .danzerpress-col-2, .danzerpress-col-3, .danzerpress-col-4, .danzerpress-col-5, .danzerpress-col-6, .danzerpress-one-third, .danzerpress-two-thirds, .danzerpress-one-fourth, .danzerpress-one-half, .danzerpress-three-fourths, .danzerpress-four-fifths, .danzerpress-xl-1, .danzerpress-xl-2, .danzerpress-xl-3, .danzerpress-xl-4, .danzerpress-xl-5, .danzerpress-xl-6, .danzerpress-lg-1, .danzerpress-lg-2, .danzerpress-lg-3, .danzerpress-lg-4, .danzerpress-lg-5, .danzerpress-lg-6, .danzerpress-sm-1, .danzerpress-sm-2, .danzerpress-sm-3, .danzerpress-sm-4, .danzerpress-sm-5, .danzerpress-sm-6, .danzerpress-xs-1, .danzerpress-xs-2, .danzerpress-xs-3, .danzerpress-xs-4, .danzerpress-xs-5, .danzerpress-xs-6 { width: 100%; position: relative; margin-bottom: 20px; padding: 0 15px; } /*-------------------------------------------------------------- ##Flex Orders --------------------------------------------------------------*/ .danzerpress-order-1 { order: 1; } @media screen and (max-width: 767px) { .danzerpress-order-1 { order: 0; } } /*-------------------------------------------------------------- ##Position Overrides --------------------------------------------------------------*/ .danzerpress-row-fix { margin: 0 -15px 0; } .danzerpress-col-center { margin: 0 auto 20px; padding: 0px; } .danzerpress-col-center-zero { margin: 0 auto; padding: 0px; } .danzerpress-zero { margin: 0; } .danzerpress-fix { padding: 0px; margin: 0px; } /*-------------------------------------------------------------- ##Fixes --------------------------------------------------------------*/ .danzerpress-wrap:before, .danzerpress-wrap:after { content: ""; clear: both; display: table; } .danzerpress-lineheight-fix { line-height: 0; } /*-------------------------------------------------------------- ##Queries --------------------------------------------------------------*/ /*Desktop Plus*/ @media screen and (min-width: 1450px) { /*Override display xl*/ .danzerpress-display-xl { display: block; } .danzerpress-no-display-xl { display: none; } /*layout override*/ .danzerpress-xl-1 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .danzerpress-xl-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-xl-3 { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } .danzerpress-xl-4 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-xl-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .danzerpress-xl-6 { -ms-flex: 0 0 16.6667%; flex: 0 0 16.6667%; max-width: 16.6667%; } } /*Desktop*/ @media screen and (max-width: 1450px) { /*Default wrap*/ .danzerpress-wrap { width: 90%; } /*Override display lg*/ .danzerpress-display-lg { display: block; } .danzerpress-no-display-lg { display: none; } /*layout override*/ .danzerpress-lg-1 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .danzerpress-lg-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-lg-3 { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } .danzerpress-lg-4 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-lg-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .danzerpress-lg-6 { -ms-flex: 0 0 16.6667%; flex: 0 0 16.6667%; max-width: 16.6667%; } } @media screen and (max-width: 1150px) { .danzerpress-col-5, .danzerpress-col-6 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } } /*Tablet Landscape*/ @media screen and (max-width: 1024px) { /*Default Layout*/ .danzerpress-col-3, .danzerpress-col-4, .danzerpress-col-5, .danzerpress-col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-one-third, .danzerpress-two-thirds, .danzerpress-one-fourth, .danzerpress-three-fourths, .danzerpress-one-half, .danzerpress-four-fifths { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } /*Override display md*/ .danzerpress-display-md { display: block; } .danzerpress-no-display-md { display: none; } /*Force 16:9 aspect ratio*/ .danzerpress-rectangle-md { padding-top: 56.25%; /* 16:9 Aspect Ratio */ } /*Force 4:3 aspect ratio*/ .danzerpress-square-md { padding-top: 100%; /*4:3 Aspect Ratio*/ } /*Layout Override*/ .danzerpress-md-1 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .danzerpress-md-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-md-3 { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } .danzerpress-md-4 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-md-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .danzerpress-md-6 { -ms-flex: 0 0 16.6667%; flex: 0 0 16.6667%; max-width: 16.6667%; } } /*Phone Landscape*/ @media screen and (max-width: 767px) { /*Fonts*/ p { font-size: 14px !important; } h5, .danzerpress-small-title { font-size: 20px; } .danzerpress-title { font-size: 30px; letter-spacing: 2px; } h2.danzerpress-title { font-size: 22px; line-height: 29px; } /*Section-wraps*/ .danzerpress-wrap { width: calc(100% - 60px); } .danzerpress-section { padding: 40px 0; } /*Styles*/ .danzerpress-page-look { border: none; } .danzerpress-button, .form-row input.woocommerce-Button.button, button, input[type="button"], input[type="reset"], input[type="submit"] { display: block; margin-bottom: 20px; width: 100%; } /*Percentages*/ .danzerpress-col-1, .danzerpress-col-2, .danzerpress-col-3, .danzerpress-col-4, .danzerpress-col-5, .danzerpress-one-third, .danzerpress-two-thirds, .danzerpress-one-fourth, .danzerpress-three-fourths, .danzerpress-one-half { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } /*Fixes*/ .danzerpress-col-center { margin: inherit; } /*Override display sm*/ .danzerpress-display-sm { display: block; } .danzerpress-no-display-sm { display: none; } /*Force 16:9 aspect ratio*/ .danzerpress-rectangle-sm{ padding-top: 56.25%; /* 16:9 Aspect Ratio */ } /*Force 4:3 aspect ratio*/ .danzerpress-square-sm { padding-top: 100%; /*4:3 Aspect Ratio*/ } /*Layout Override*/ .danzerpress-sm-1 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .danzerpress-sm-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-sm-3 { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } .danzerpress-sm-4 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-sm-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .danzerpress-sm-6 { -ms-flex: 0 0 16.6667%; flex: 0 0 16.6667%; max-width: 16.6667%; } } /*Phone Portrait*/ @media screen and (max-width: 500px) { /*Styles*/ .danzerpress-button-modern { display: block; width: 100%; } .danzerpress-button-modern-transparent { text-align: center; display: block; } .danzerpress-button-left { margin-right: 0px; } /*Override display xs*/ .danzerpress-display-xs { display: block; } .danzerpress-no-display-xs { display: none; } /*Force 16:9 aspect ratio*/ .danzerpress-rectangle-xs { padding-top: 56.25%; } /*Force 4:3 aspect ratio*/ .danzerpress-square-xs { padding-top: 100%; } /*Layout Override*/ .danzerpress-xs-1 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .danzerpress-xs-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .danzerpress-xs-3 { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } .danzerpress-xs-4 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .danzerpress-xs-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .danzerpress-xs-6 { -ms-flex: 0 0 16.6667%; flex: 0 0 16.6667%; max-width: 16.6667%; } }