:root {
    --mainbg:#000;
    --green:#019247;
    --yellow:#F4C718;
    --red:#E3372D;
}

* {
  box-sizing: border-box;
}

body { background-color: var(--mainbg); margin: 0px; padding: 0px; font-family: "Exo 2", sans-serif; font-weight:400; font-size: 20px;}
.container { max-width: 1000px; width:90%; margin: 0px auto; padding:0px; }
.row { width:100%; display:flex; min-height: 100px; align-content: stretch; flex-wrap: wrap; flex-direction: row; gap: 5%; }
a { color:#fff; }

h1, h2, h3, h4, h5, h6 {margin:0px;}

.green-bg { background-color: var(--green); }
.yellow-bg { background-color: var(--yellow); }
.red-bg { background-color: var(--red); }

.white-txt {color:#fff;}

.w15 { width:15%; }
.w25 { width:25%; }
.w30 { width:30%; }
.w35 { width:35%; }
.w45 { width:45%; }
.w55 { width:55%; }
.w65 { width:65%; }
.w75 { width:75%; }
.w85 { width:85%; }
.w95 { width:95%; }
.w100 { width:100%; }

.p10 {padding:10px;}
.p20 {padding:20px;}
.p50 {padding:50px;}

.content { position: relative; margin-bottom:30px; }
.thebg { position:absolute; width:100%; height:100%; left:0px; top:0px; z-index:-1; }

.rotate-2 { rotate:2deg; }
.rotate--2 { rotate:-2deg; }
.rotate-4 { rotate:4deg; }
.rotate--4 { rotate:-4deg; }
.rotate-6 { rotate:6deg; }
.rotate--6 { rotate:-6deg; }

.skew-5 { transform: skewX(5deg); }
.skew--5 { transform: skewX(-5deg); }

.skew-10 { transform: skewX(10deg); }
.skew--10 { transform: skewX(-10deg); }

header { display: flex; gap: 10px; color: #fff; font-size: 13px; padding:20px 0px 100px 0px; }
header svg, .prefooter svg { fill:#fff; display: inline-block; width:12px;  margin-right:5px; margin-left:10px;}

h1.logo { font-size: 40px; font-weight: 700; margin: 0px; color: #fff; margin-bottom: 10px;}
h1.logo span { display: block; }
.logo span.phone { color:#fff; font-size:18px; padding-top:10px;}
.logo span.phone svg { width:16px; fill:#fff; display: inline-block; }

.scooter_bg { 
    background-image: url(images/scooter2.png);
    background-size: cover;
    background-position: 0% -10%;
    background-repeat: no-repeat; 
}

.scooter_bg .thebg { max-height:90%; }

.small-labels .content { margin-bottom: 10px; font-size: 20px; text-align: center; font-weight: 700;}
.small-labels .content.h2like {font-size: 30px; }
.befree {font-size: 26px; min-height: 150px; }
.befree h2 { text-transform: uppercase;}

ul { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; list-style: none; text-align: center; }
ul li { text-transform: uppercase; font-weight: bold; font-size: 18px; }
ul li:not(:first-child)::before { content: " • "; }

.lion { background-image: url(images/lion.png); background-size: cover; background-position: 10% 10%; background-repeat: no-repeat;}
.palm_tree { background-image: url(images/palm_tree.png); background-size: cover; background-position: 10% 10%;}

.special_offers h2 { font-size:30px; }
.special_offers h2 .small_h2 { font-size:25px; display:block; }
.aslow { text-align: center; }
.money { font-size: 60px; display: block;}

footer { text-align: center; color:#fff; font-size: 13px; padding-top:100px; }

@media only screen and (max-width: 900px) {
  .p50 { padding:30px; }
}

@media only screen and (max-width: 680px) {
    .scooter_bg {  background-size: contain; }
    .lion { min-height: 250px; margin-top:30px; }
    .row { flex-direction: column;}
    .row>* { width:100% !important; }
    .scooter_bg { min-height: 230px; }
    header, .prefooter { display: flex; flex-direction: column; }
    .prefooter span { margin-bottom:10px; }
    .befree { margin-top:30px; }
    .three_last .p50 { padding:50px; }
    .special_offers { min-height: 220px; }
}