File: /home/demo/public_html/roofleak/assets/scss/theme-responsive/elements/_promo.scss
@media screen and ( min-width: $grid-breakpoint-md ) {
// Promo Styles
.lqd-promo-alt {
.lqd-promo-cat {
margin-left: -100%;
flex-direction: row-reverse;
&:before {
margin-left: 1em;
margin-right: 0;
}
}
.lqd-promo-content {
width: 25%;
text-align: right;
align-items: flex-end;
h2 {
margin-right: 0;
margin-left: -100%;
}
}
.lqd-promo-img {
width: 75%;
}
.lqd-promo-img-inner {
margin-left: -10%;
}
}
// Directions
.lqd-promo-reverse {
.lqd-promo-inner {
flex-direction: row-reverse;
}
&.lqd-promo-alt {
.lqd-promo-cat {
flex-direction: row;
margin-left: 0;
margin-right: -100%;
&:before {
margin-left: 0;
margin-right: 1em;
}
}
.lqd-promo-content {
text-align: left;
align-items: flex-start;
h2 {
margin-left: 0;
margin-right: -100%;
}
}
.lqd-promo-img-inner {
margin-left: 0;
margin-right: -10%;
}
}
}
}
@media screen and ( min-width: $grid-breakpoint-lg ) {
.lqd-promo-inner {
flex-flow: row wrap;
}
// Promo Styles
.lqd-promo-alt {
.lqd-promo-content {
h2 {
font-size: 72px;
}
}
}
// Directions
.lqd-promo-reverse {
.lqd-promo-cat {
margin-right: 0;
margin-left: 15px;
}
.lqd-promo-content {
padding-left: 0;
padding-right: 15px;
}
&:not(.lqd-promo-alt) {
.lqd-promo-content {
align-items: flex-end;
text-align: right;
}
}
}
}
@media screen and ( min-width: $grid-breakpoint-lg ) and ( max-width: 1580px ) {
.header-style-side {
&.lqd-stack-initiated {
.lqd-promo-alt {
.lqd-promo-content {
h2 {
font-size: 60px;
}
}
}
}
}
}
@media screen and ( max-width: $grid-breakpoint-lg - 1 ) {
.lqd-promo-img {
width: 58.75%;
}
.lqd-promo-content {
padding-top: 50px;
padding-bottom: 0;
h2 {
font-size: 100px;
}
}
.lqd-promo-alt {
.lqd-promo-content {
h2 {
font-size: 60px;
}
}
}
}
@media screen and ( max-width: $grid-breakpoint-md - 1 ) {
.lqd-promo-cat {
writing-mode: inherit;
ul {
transform: rotate(0);
margin: 0;
margin-bottom: 15px;
}
}
.lqd-promo-content,
.lqd-promo-cat,
.lqd-promo-img {
width: 100%;
}
.lqd-promo-cat {
margin-right: 0;
}
.lqd-promo-img-inner {
box-shadow: 0 15px 30px rgba(#000, 0.15);
}
.lqd-promo-inner {
flex-direction: column;
}
.lqd-promo-content {
padding-top: 30px;
padding-left: 0;
padding-right: 0;
h2 {
margin: 0 0 0.25em;
font-size: 62px;
}
}
}
@media screen and ( max-width: $grid-breakpoint-sm - 1 ) {
.lqd-promo-dynamic-shape {
display: none;
}
.lqd-promo-wrap {
margin-top: 0;
margin-bottom: 30px;
}
.lqd-promo-content {
text-align: center;
align-items: center;
h2 {
font-size: 10vw;
}
}
.lqd-promo-cat {
&::before {
content: none !important;
}
}
}