2023-11-08 09:52:56 +00:00
|
|
|
///// HOMEPAGE
|
2023-10-20 09:18:59 +00:00
|
|
|
|
2023-11-08 13:32:14 +00:00
|
|
|
/// Chill brand colors
|
2023-11-08 09:52:56 +00:00
|
|
|
$chill-blue: #334d5c;
|
2024-01-18 18:17:44 +00:00
|
|
|
$chill-green: rgba(67, 178, 157, 0.61);
|
2023-11-08 09:52:56 +00:00
|
|
|
$chill-beige: #d3c7b1;
|
|
|
|
$chill-red: #dc516d;
|
|
|
|
$chill-pink: #e57469;
|
|
|
|
$chill-orange: #e89463;
|
|
|
|
$chill-lightgray: #efefef;
|
|
|
|
$chill-yellow: #f1d275;
|
|
|
|
|
2023-11-08 13:32:14 +00:00
|
|
|
/// Other custom colors
|
|
|
|
$bg-dark-blue: #0d242e;
|
|
|
|
$bg-light-blue: #a0dcff;
|
2024-01-18 18:17:44 +00:00
|
|
|
$orange: #f46839;
|
2023-11-08 13:32:14 +00:00
|
|
|
$text-green: #56c4aa;
|
2024-01-18 18:17:44 +00:00
|
|
|
$red: #f0384d;
|
|
|
|
$yellow: #fcc958;
|
2023-11-08 13:32:14 +00:00
|
|
|
|
2024-02-07 15:56:02 +00:00
|
|
|
@font-face {
|
|
|
|
font-family: 'Lato', Arial;
|
|
|
|
src: url('assets/fonts/Lato/Lato-Regular.ttf') format('truetype');
|
|
|
|
font-display: optional;
|
|
|
|
font-weight: normal;
|
|
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
|
2023-11-08 13:32:14 +00:00
|
|
|
// Pattern
|
2023-11-09 10:38:03 +00:00
|
|
|
@mixin add-bg-pattern($id) {
|
2023-11-08 13:32:14 +00:00
|
|
|
background-repeat: repeat;
|
2023-11-08 17:01:29 +00:00
|
|
|
background-position: top center;
|
2023-12-20 15:18:25 +00:00
|
|
|
background-image: url('/images/bg/pattern-#{$id}.png');
|
2023-11-08 13:32:14 +00:00
|
|
|
}
|
|
|
|
|
2023-11-08 17:01:29 +00:00
|
|
|
// Sections bg transitions
|
2023-11-09 10:38:03 +00:00
|
|
|
@mixin add-horizontal-curve($id, $pos) {
|
2023-11-08 17:01:29 +00:00
|
|
|
position: relative;
|
|
|
|
&:before {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
2023-12-20 15:18:25 +00:00
|
|
|
width: 100%;
|
2023-11-08 17:01:29 +00:00
|
|
|
height: 100%;
|
2023-11-17 12:27:06 +00:00
|
|
|
background-image: url('/images/svg/curve-#{$id}.svg');
|
2023-11-08 17:01:29 +00:00
|
|
|
background-size: contain;
|
2023-11-09 10:38:03 +00:00
|
|
|
background-position: $pos center;
|
2023-11-08 17:01:29 +00:00
|
|
|
background-repeat: no-repeat;
|
2023-11-09 11:00:39 +00:00
|
|
|
pointer-events: none;
|
2023-11-08 17:01:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-09 10:38:03 +00:00
|
|
|
// Colored design element: square or circle
|
2024-01-18 19:40:16 +00:00
|
|
|
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -60%, $pos-left: 44%) {
|
2023-11-08 17:01:29 +00:00
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
&:before {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
2023-12-20 15:18:25 +00:00
|
|
|
width: 100px * $scale;
|
|
|
|
height: 100px * $scale;
|
|
|
|
left: $pos-left;
|
|
|
|
top: $pos-top;
|
|
|
|
margin-left: -35px;
|
2023-11-08 17:01:29 +00:00
|
|
|
background-color: $color;
|
2024-01-18 18:17:44 +00:00
|
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
2023-11-08 17:01:29 +00:00
|
|
|
z-index: 0;
|
2024-01-18 18:17:44 +00:00
|
|
|
@if $shape == 'circle' {
|
2024-01-18 19:40:16 +00:00
|
|
|
border-radius: 50px;
|
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
@else {
|
2024-01-18 19:40:16 +00:00
|
|
|
border-radius: 0;
|
2023-11-09 10:38:03 +00:00
|
|
|
}
|
2023-11-08 17:01:29 +00:00
|
|
|
}
|
|
|
|
}
|
2023-11-08 09:52:56 +00:00
|
|
|
|
2024-01-18 18:17:44 +00:00
|
|
|
body{
|
2024-02-07 15:56:02 +00:00
|
|
|
font-family: 'Lato', sans-serif;
|
2024-01-18 18:17:44 +00:00
|
|
|
.highlight {
|
2024-02-07 14:44:51 +00:00
|
|
|
padding: .25rem;
|
2024-01-18 18:17:44 +00:00
|
|
|
}
|
|
|
|
.highlight-1 {
|
|
|
|
background-color: $chill-green;
|
|
|
|
}
|
|
|
|
.highlight-2 {
|
|
|
|
background-color: $chill-pink;
|
|
|
|
}
|
|
|
|
.highlight-3 {
|
|
|
|
background-color: $chill-yellow;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-08 17:01:29 +00:00
|
|
|
// Theme custom sections
|
2023-11-08 09:52:56 +00:00
|
|
|
header.header {
|
2023-11-08 13:32:14 +00:00
|
|
|
background-color: $bg-dark-blue;
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
|
|
|
|
.chill-pres {
|
|
|
|
padding-top: 0rem;
|
|
|
|
}
|
|
|
|
|
2024-01-24 18:15:13 +00:00
|
|
|
.navbar {
|
|
|
|
.btn-primary {
|
|
|
|
background-color: $orange;
|
|
|
|
border: 1px solid $orange;
|
|
|
|
color: white;
|
|
|
|
&:hover {
|
|
|
|
background-color: $chill-orange;
|
|
|
|
border: 1px solid $chill-orange;
|
|
|
|
}
|
|
|
|
}
|
2024-01-29 11:13:42 +00:00
|
|
|
.lang-select {
|
|
|
|
color: white;
|
|
|
|
}
|
2024-01-24 18:15:13 +00:00
|
|
|
}
|
|
|
|
|
2023-11-08 09:52:56 +00:00
|
|
|
main > section {
|
2023-11-08 13:32:14 +00:00
|
|
|
&.hero {
|
2024-01-18 18:17:44 +00:00
|
|
|
height: 100vh;
|
2024-01-17 07:58:19 +00:00
|
|
|
background-color: $bg-dark-blue;
|
2024-01-18 18:17:44 +00:00
|
|
|
h1 { color: $chill-green; }
|
2024-01-17 07:58:19 +00:00
|
|
|
.hero-img {
|
|
|
|
padding-top: 3rem;
|
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
.btn-primary {
|
|
|
|
background-color: $orange;
|
|
|
|
color: white;
|
|
|
|
border-color: $orange;
|
2024-01-24 18:15:13 +00:00
|
|
|
&:hover {
|
|
|
|
background-color: $chill-orange;
|
|
|
|
border: 1px solid $chill-orange;
|
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
}
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-1 {
|
2024-01-18 18:17:44 +00:00
|
|
|
background-color: white;
|
|
|
|
padding-top: 10rem;
|
2023-11-09 12:02:06 +00:00
|
|
|
li { font-weight: 600; }
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-2 {
|
2024-01-17 07:58:19 +00:00
|
|
|
.container {
|
|
|
|
color: $bg-dark-blue;
|
|
|
|
text-align: center;
|
2024-01-18 18:17:44 +00:00
|
|
|
margin-top: 4rem;
|
|
|
|
h2 {
|
|
|
|
line-height: 3.5rem;
|
|
|
|
}
|
2024-01-17 07:58:19 +00:00
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
background: rgb(233,227,216);
|
|
|
|
background: linear-gradient(180deg, rgba(233,227,216,1) 0%, rgba(239,239,239,1) 100%);
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-3 {
|
2024-01-18 18:17:44 +00:00
|
|
|
background: rgb(239,239,239);
|
|
|
|
background: linear-gradient(180deg, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 100%);
|
2023-11-08 17:01:29 +00:00
|
|
|
h2 {
|
2024-01-18 18:17:44 +00:00
|
|
|
@include add-decorative-shape($orange, 'circle', .7, -30%, -10%);
|
2023-11-08 17:01:29 +00:00
|
|
|
}
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-4 {
|
2024-01-18 18:17:44 +00:00
|
|
|
position: relative;
|
|
|
|
background-color: white;
|
|
|
|
.row {
|
|
|
|
padding-bottom: 5rem;
|
|
|
|
}
|
|
|
|
h4 {
|
|
|
|
font-weight: bold;
|
2024-01-18 19:40:16 +00:00
|
|
|
height: 175px;
|
2024-01-18 18:17:44 +00:00
|
|
|
color: $bg-dark-blue;
|
|
|
|
border: 1px dashed $bg-dark-blue;
|
|
|
|
border-radius: 15px;
|
|
|
|
padding: 3rem;
|
|
|
|
}
|
|
|
|
.btn-primary {
|
|
|
|
position: absolute;
|
|
|
|
top: 52%;
|
|
|
|
left: 28%;
|
|
|
|
}
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-5 {
|
2024-01-18 18:17:44 +00:00
|
|
|
background-color: transparentize($color: $chill-green, $amount: 0.5)
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-6 {
|
2024-01-18 18:17:44 +00:00
|
|
|
background-color: $bg-dark-blue !important;
|
2023-12-20 15:18:25 +00:00
|
|
|
@include add-bg-pattern(1);
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
&.section-7 {
|
2023-11-08 17:01:29 +00:00
|
|
|
h2 {
|
2024-01-18 18:17:44 +00:00
|
|
|
@include add-decorative-shape($yellow, 'square', .7, -30%, -15%);
|
2023-11-08 17:01:29 +00:00
|
|
|
}
|
2023-11-08 09:52:56 +00:00
|
|
|
}
|
|
|
|
}
|
2024-01-17 07:58:19 +00:00
|
|
|
|
2023-11-09 12:02:06 +00:00
|
|
|
section {
|
2023-12-20 15:18:25 +00:00
|
|
|
h2.title {
|
2024-01-18 18:17:44 +00:00
|
|
|
color: $bg-dark-blue;
|
2023-12-20 15:18:25 +00:00
|
|
|
}
|
2023-11-17 12:29:57 +00:00
|
|
|
// Centered text
|
|
|
|
&.big-text,
|
2023-11-09 12:02:06 +00:00
|
|
|
&.li-block {
|
2023-11-17 12:29:57 +00:00
|
|
|
h2, p {
|
|
|
|
width: fit-content;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2023-12-20 15:18:25 +00:00
|
|
|
}
|
2023-11-17 12:29:57 +00:00
|
|
|
}
|
|
|
|
&.big-text {
|
2023-11-09 12:02:06 +00:00
|
|
|
.container .row {
|
|
|
|
& > div {
|
|
|
|
&:last-child {
|
2023-11-17 12:29:57 +00:00
|
|
|
width: 80%;
|
|
|
|
margin-left: 10%;
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
2023-11-17 12:29:57 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Change bulletlists rendering in flex bloc }
|
|
|
|
&.li-block {
|
|
|
|
.container .row {
|
|
|
|
& > div {
|
|
|
|
&:last-child {
|
|
|
|
width: 100%;
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
|
|
|
ul {
|
|
|
|
display: flex;
|
|
|
|
li {
|
|
|
|
i:first-child {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
flex: 1 0 0;
|
2024-01-17 07:58:19 +00:00
|
|
|
margin: 0.5em 2rem 0.5em 2rem;
|
2024-01-18 18:17:44 +00:00
|
|
|
padding: 2em 1em 1em 1em;
|
2023-11-09 12:02:06 +00:00
|
|
|
text-align: center;
|
2024-01-17 07:58:19 +00:00
|
|
|
border-radius: 20px;
|
2023-10-20 09:18:59 +00:00
|
|
|
}
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
2023-12-20 15:18:25 +00:00
|
|
|
}
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
2023-12-20 15:18:25 +00:00
|
|
|
// Add custom colored icons on each item
|
2023-11-09 12:02:06 +00:00
|
|
|
&.section-1 {
|
|
|
|
ul li {
|
2023-11-13 14:02:34 +00:00
|
|
|
font-weight: 500;
|
|
|
|
font-size: large;
|
2024-01-18 18:17:44 +00:00
|
|
|
position: relative;
|
|
|
|
&:nth-child(1) {
|
2024-01-17 07:58:19 +00:00
|
|
|
@include add-decorative-shape($text-green, 'square', 1);
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
|
|
|
&:nth-child(2) {
|
2024-01-18 18:17:44 +00:00
|
|
|
@include add-decorative-shape($red, 'circle', 1);
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
|
|
|
&:nth-child(3) {
|
2024-01-18 19:40:16 +00:00
|
|
|
@include add-decorative-shape($chill-orange, 'triangle', 1);
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
|
|
|
&:nth-child(4) {
|
2024-01-18 18:17:44 +00:00
|
|
|
@include add-decorative-shape($yellow, 'circle', 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
p {
|
|
|
|
margin-bottom: 5rem;
|
|
|
|
}
|
|
|
|
ul li {
|
|
|
|
border-radius: 1em;
|
|
|
|
background: transparentize(white, 0.8);
|
|
|
|
backdrop-filter: blur(20px);
|
|
|
|
width: 400px;
|
|
|
|
height: 180px;
|
|
|
|
padding: .85rem;
|
|
|
|
position: relative;
|
|
|
|
z-index: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
transition: 0.6s ease-in;
|
|
|
|
&::before {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
z-index: -1;
|
|
|
|
top: -15px;
|
|
|
|
right: -15px;
|
|
|
|
height:220px;
|
|
|
|
width: 25px;
|
|
|
|
border-radius: 32px;
|
|
|
|
transform: scale(1);
|
|
|
|
transform-origin: 50% 50%;
|
|
|
|
transition: transform 0.25s ease-out;
|
|
|
|
}
|
|
|
|
&:nth-child(1)::before {
|
|
|
|
background-color: rgba(240, 56, 77, 0.85);
|
|
|
|
}
|
|
|
|
&:nth-child(2)::before {
|
|
|
|
background-color: rgba(232, 148, 99, 0.85);
|
|
|
|
}
|
|
|
|
&:nth-child(3)::before {
|
|
|
|
background-color: rgba(67, 178, 157, 0.85);
|
|
|
|
}
|
|
|
|
&:nth-child(4)::before {
|
|
|
|
background-color: rgb(241, 210, 117);
|
|
|
|
}
|
|
|
|
&:hover::before {
|
|
|
|
transition-delay:0.2s ;
|
|
|
|
transform: scale(40);
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
color: #ffffff;
|
|
|
|
h5 {
|
|
|
|
color: $chill-lightgray;
|
2023-10-20 09:18:59 +00:00
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
}
|
|
|
|
h5 {
|
|
|
|
color: $bg-dark-blue;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2023-10-20 09:18:59 +00:00
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
}
|
2023-12-20 15:18:25 +00:00
|
|
|
}
|
|
|
|
// button styling
|
|
|
|
a.btn-chill {
|
|
|
|
background-color: #fc3636;
|
|
|
|
}
|
2023-10-20 09:18:59 +00:00
|
|
|
}
|
2023-11-08 13:32:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Dark context (homepage header, hero, footer)
|
2024-01-22 17:18:01 +00:00
|
|
|
// Overwrite primary button design
|
2024-01-18 18:17:44 +00:00
|
|
|
.btn-primary {
|
|
|
|
background-color: $orange;
|
|
|
|
color: white;
|
|
|
|
border: 1px solid $orange;
|
|
|
|
border-radius: 2em;
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
2023-11-09 10:38:03 +00:00
|
|
|
|
2023-11-09 12:02:06 +00:00
|
|
|
// Dark but only in sections
|
|
|
|
section.dark {
|
2023-11-09 10:38:03 +00:00
|
|
|
p {
|
|
|
|
color: white;
|
|
|
|
font-weight: bolder;
|
|
|
|
}
|
2023-11-09 12:02:06 +00:00
|
|
|
}
|
|
|
|
|
2023-11-13 14:02:34 +00:00
|
|
|
.hop {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
///// PAGES
|
|
|
|
|
|
|
|
main > section {
|
|
|
|
&.page-hero {
|
2024-01-18 18:17:44 +00:00
|
|
|
height: 40vh;
|
2023-11-13 14:02:34 +00:00
|
|
|
background-color: $bg-dark-blue;
|
2024-01-18 18:17:44 +00:00
|
|
|
@include add-bg-pattern(1);
|
2023-11-13 14:02:34 +00:00
|
|
|
h1 { color: $text-green; }
|
2024-01-18 19:40:16 +00:00
|
|
|
i {
|
|
|
|
color: $chill-lightgray;
|
|
|
|
}
|
2023-11-13 14:02:34 +00:00
|
|
|
}
|
2024-01-18 18:17:44 +00:00
|
|
|
.content-subtitle {
|
|
|
|
text-transform: uppercase;
|
|
|
|
padding-left: 2rem;
|
|
|
|
}
|
|
|
|
.bord-1 {
|
|
|
|
border-left: 4px solid $chill-orange;
|
|
|
|
}
|
|
|
|
.bord-2 {
|
|
|
|
border-left: 4px solid $chill-beige;
|
|
|
|
}
|
|
|
|
.bord-3 {
|
|
|
|
border-left: 4px solid $chill-yellow;
|
|
|
|
}
|
|
|
|
.bord-4 {
|
|
|
|
border-left: 4px solid $chill-green;
|
|
|
|
}
|
2023-11-13 14:02:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.chapo {
|
|
|
|
font-size: large;
|
|
|
|
font-weight: 600;
|
2024-01-18 18:17:44 +00:00
|
|
|
text-align: center;
|
|
|
|
padding-bottom: 2rem;
|
|
|
|
font-style: italic;
|
|
|
|
position: relative;
|
|
|
|
margin-bottom: 5rem;
|
|
|
|
&::after {
|
|
|
|
content:'';
|
|
|
|
position:absolute;
|
|
|
|
left:0; right:0;
|
|
|
|
top:100%;
|
|
|
|
margin:10px auto;
|
|
|
|
width:15%;
|
|
|
|
height:6px;
|
|
|
|
background: $chill-red;
|
|
|
|
}
|
2023-11-13 14:02:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
figure.image {
|
|
|
|
//background-color: $chill-lightgray;
|
|
|
|
//padding: 1em;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
&.left {
|
|
|
|
float: left;
|
|
|
|
margin-right: 1.5em;
|
|
|
|
}
|
|
|
|
&.right {
|
|
|
|
float: right;
|
|
|
|
margin-left: 1.5em;
|
|
|
|
}
|
|
|
|
&.center {
|
2023-12-20 15:18:25 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2023-11-13 14:02:34 +00:00
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
img {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
figcaption {}
|
2023-12-20 15:18:25 +00:00
|
|
|
}
|
2024-01-22 17:05:10 +00:00
|
|
|
|
2024-01-22 17:18:01 +00:00
|
|
|
// RESPONSIVENESS
|
|
|
|
|
2024-01-22 17:05:10 +00:00
|
|
|
@media screen and (max-width: 1279px) {
|
|
|
|
section {
|
|
|
|
&.li-block {
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
ul {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
ul li {
|
|
|
|
flex: 30%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 1023px) {
|
|
|
|
main > section {
|
|
|
|
&.section-4 {
|
|
|
|
h4 {
|
|
|
|
height: 224px;
|
|
|
|
}
|
|
|
|
.btn-primary {
|
|
|
|
top: 56%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
section {
|
|
|
|
&.li-block {
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
ul {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
ul li {
|
|
|
|
flex: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
|
main > section {
|
|
|
|
&.hero {
|
|
|
|
height: 110vh;
|
|
|
|
}
|
|
|
|
&.section-3 {
|
|
|
|
h2:before {
|
|
|
|
top: -70%;
|
|
|
|
left: 5%;
|
|
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.section-4 {
|
|
|
|
h4 {
|
|
|
|
height: 280px;
|
|
|
|
}
|
|
|
|
.btn-primary {
|
|
|
|
top: 64%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
section {
|
|
|
|
&.li-block {
|
|
|
|
.container .row {
|
|
|
|
& > div {
|
|
|
|
ul {
|
|
|
|
flex-direction: column;
|
|
|
|
li {
|
|
|
|
margin-bottom: 4rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Add custom colored icons on each item
|
|
|
|
&.section-1 {
|
|
|
|
ul li {
|
|
|
|
&:nth-child(1) {
|
|
|
|
top: -66%;
|
|
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
|
|
top: -66%;
|
|
|
|
}
|
|
|
|
&:nth-child(3):before {
|
|
|
|
top: -85%;
|
|
|
|
}
|
|
|
|
&:nth-child(4):before {
|
|
|
|
top: -85%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
ul {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
ul li {
|
|
|
|
flex: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 513px) {
|
|
|
|
main > section {
|
|
|
|
&.hero {
|
|
|
|
height: 120vh;
|
|
|
|
}
|
|
|
|
&.section-4 {
|
|
|
|
h4 {
|
|
|
|
font-size: 1.1rem;
|
|
|
|
}
|
|
|
|
.btn-primary {
|
|
|
|
top: 64%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
ul li {
|
|
|
|
width: 350px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 470px) {
|
|
|
|
main > section {
|
|
|
|
&.section-4 {
|
|
|
|
h4 {
|
|
|
|
height: 280px;
|
|
|
|
}
|
|
|
|
.btn-primary {
|
|
|
|
top: 64%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
section {
|
|
|
|
&.li-block {
|
|
|
|
&.section-1 {
|
|
|
|
ul li {
|
|
|
|
&:nth-child(3):before {
|
|
|
|
top: -70%;
|
|
|
|
}
|
|
|
|
&:nth-child(4):before {
|
|
|
|
top: -70%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
ul {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
ul li {
|
|
|
|
width: 350px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 420px) {
|
|
|
|
section {
|
|
|
|
&.li-block {
|
|
|
|
&.section-5 {
|
|
|
|
.container .row {
|
|
|
|
ul li {
|
|
|
|
width: 300px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|