* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; &:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } &:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .gridContainer { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; margin-right: auto !important; margin-left: auto !important; } .header-homepage { background-image: url(/img/bannerHome.webp); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; color: #fff; z-index: 0; padding-top: 160px; padding-bottom: 160px; &:before { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; display: inline-block; background-color: #fff; padding-bottom: 230px; } .header-description-row { padding-top: 8%; padding-bottom: 8%; } } .header-separator-bottom { position: absolute; bottom: -1px; left: 0; width: 100%; svg { display: block; width: calc(100% + 1.3px); } .header-separator { position: absolute; width: 100%; max-width: 100%; bottom: -1px; overflow: hidden; } } .svg-white-bg { fill: #1a2332; } .header-description { min-height: 100px; text-align: center; } p.header-subtitle { color: #fff; font-weight: 300; font-size: 1.4em; text-align: inherit; } .color-overlay { &:before { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; display: inline-block; content: ""; -webkit-transform: translate3d(0, 0, -1px); } } .header-wrapper { background-color: #ebebeb; position: relative; } h1 { font-weight: 600; font-size: 2.2em; margin-bottom: 25px; } .header-description-row { padding: 0 15px 0 15px; display: block; } .align-holder { width: 100%; } .header-buttons-wrapper { margin: 0; } p { margin: 0 0 20px 0; } .homepage-template { .svg-white-bg { fill: #fff; } } .header-homepage.color-overlay { &:before { background-color: #000; opacity: .4; } } .header-homepage.header-separator { svg { height: 90px !important; } } .header-separator { svg { height: 90px !important; } } @media only screen and (min-width:768px) { h1 { font-size: 3.4em; } p { line-height: 130%; } h1.heading8 { font-size: 3.3em; } .gridContainer { width: 90%; max-width: 1232px; .row { margin-left: -15px; margin-right: -15px; clear: both; } } .header-description-row { &:before { content: normal; } &:after { content: normal; } } .header-content-centered { margin-left: auto; margin-right: auto; } .header-buttons-wrapper { margin: 0 -9px 0 -9px; clear: both; } .header-content { width: 100% !important; .align-holder { text-align: center !important; } } } @media only screen and (min-width: 1024px) { .gridContainer { width: 80%; } h1 { font-size: 3.8em; } p { line-height: 150%; } .header-homepage { min-height: auto; } }