@charset "utf-8";

@font-face {
    font-family: 'GalanoHeavy';
    font-style: normal;
    src: url('../fonts/Rene_Bieder_-_Galano_Grotesque_Heavy.otf');
    
}
@font-face {
    font-family: 'GalanoBold';
    font-style: normal;
    src: url('../fonts/Rene_Bieder_-_Galano_Grotesque_Bold.otf');
    
}
@font-face {    
    font-family: 'GalanoRegular';
    font-style: normal;
    src: url('../fonts/Rene_Bieder_-_Galano_Grotesque.otf');
    
}
@font-face {
    font-family: 'GalanoMedium';
    font-style: normal;
    src: url('../fonts/Rene_Bieder_-_Galano_Grotesque_Medium.otf');
    
} 



body {
   font-family: "GalanoMedium";
  
}
li {
   list-style: none;
}
.text-right {
   text-align: right;
}
#body-content {
   overflow: hidden;
}
/********* generals *******/

#flav1 img, #flav2 img, #flav3 img

{
-webkit-filter: drop-shadow(3px 8px 5px rgba(50,50,50,0.5));
filter: drop-shadow(3px 8px 5px rgba(50,50,50,0.5));
}

section {
    padding: 60px;
}

html, body{
height: 100%;
}

article {
overflow: hidden;
}



.white {
color: white;
}
.orange {
color: #f18700;
}



.margTop25 {
margin-top: 25px;
}

.margBot25 {
margin-bottom: 25px;
}

.margBot25Des {
margin-bottom: 25px;
}


.margTop250 {
margin-top: 250px;
}

.noPad {
padding-left: 0;
}



@media screen and (max-device-width: 749px) {

section {

    padding-left: 0;
    padding-right: 0;
}
.row {
    padding-left: 0;
    padding-right: 0;

}

.onlyDesktop {
display: none;
}

.onlyPad {
display: none;
}

.container {
padding: 0;
}

.row {
margin: 0;
}

h1 {
font-family: 'GalanoHeavy' !important;
font-size: 11vw;
line-height: 2.8rem;
margin-bottom: 0.3rem;
}

h2 {

font-size: 3.5rem;
line-height: 3.5rem;
}

h3 {
font-family: 'GalanoBold' !important;
font-size: 2rem;
line-height: 2rem;
}

/********* sections *******/

#header {
background: #ffffff
url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/220422_Landingpage_lila_Hoch.jpg")
no-repeat center center;
background-size: cover;
height: 90vh;
}

#header p {

font-size: 1rem;
line-height: 1.2rem;
}


#border {
padding: 30px 0;
}
/********* facts *******/

#facts {

background-color: #dd6cfe;
background-image: linear-gradient(38deg, #dd6cfe 0%, #500076 89%);
}

#facts li {
font-size: 1.2rem;
font-family: 'GalanoBold' !important;
}


#rtdCon {
position: relative;
height: 200px;
}

#rtdCon .rtds {
position: absolute;
width: 150px;
height: auto;
}

#rtd-nuke {
top: 55px;
left: 0px;
transform: rotate(10deg);

}
#rtd-galaxy {
top: 80px;
left: 75px;
transform: rotate(20deg);

}
#rtd-bubble {
top: 130px;
left: 100px;
transform: rotate(30deg);

}

#cube1 {
position: absolute;
width: 50px;
height: auto;
top: 230px;
left: 100px;


}
#cube2 {
position: absolute;
width: 50px;
height: auto;
top: 380px;
left: 100px;
}

#cube3 {
position: absolute;
width: 50px;
height: auto;
top: 400px;
left: 250px;
}

/******* flavours *********/

#flavours {
padding: 60px 0;
padding-bottom: 0;
}


#flav1 {
background-color: #ffffff;
background-image: linear-gradient(180deg, #ffffff 0%, #61c919 100%);
padding: 1.8rem 1rem;
}

#flav2 {
background-color: #e5dbfd;
background-image: linear-gradient(180deg, #e5dbfd 0%, #9846c1 100%);
padding: 1.8rem 1rem;
}
#flav3 {
background-color: #5dd9f5;
background-image: linear-gradient(0deg, #5dd9f5 0%, #ffffff 100%);


padding: 1.8rem 1rem;

}

#flav1 p:first-of-type {
color: #61c919;
}
#flav2 p:first-of-type {
color: #9846c1;
}
#flav3 p:first-of-type {
color: #00D9FF;
}



#flavours h2 {
margin-bottom: 0.5rem;
}

#flavours .flavs {
width: 220px;
height: auto;
}



#flavours h3 {
margin-bottom: 0;
}

#flavours h4 {
background: #222;
color: white;
padding: 0.5rem 1rem;
display: inline-block;
}

#flavEnd {
background: #5DD9F5;
padding-bottom: 60px;
}

#brandCon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#horizontal {
position: absolute;
transform: rotate(90deg);
top: 40%;
right: 20;
opacity: 0.05;
}

/******* hashtag *********/

#hashtag {
background: #ffffff url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/bg-hashtag.jpg")
no-repeat center top;
background-size: cover;
padding-bottom: 30px;
height: 40vh;
}


#hashtag h3 {
text-align: center;
font-size: 7vw !important;
margin-bottom: 0;
}



#hashtag h3:nth-of-type(6) {
opacity: 0.5;
font-size: 22vw !important;
line-height: 18vw !important;
}
#hashtag h3:nth-of-type(7) {
opacity: 0.5;
font-size: 25vw !important;
line-height: 20vw !important;
}
#hashtag h3:nth-of-type(8) {
opacity: 0.5;
font-size: 18vw !important;
line-height: 16vw !important;
}




/******* usp *********/

#usp .ring {
border: 4px solid white;
border-radius: 50%;
width: 40vw;
height: 40vw;
}

#usp .ringCon {
background: #666;
height: 50vw;
padding: 0;
}

#usp h3 {
font-size: 6vw !important;
line-height: 6vw;
margin-bottom: 0;
}


}

@media screen and (min-device-width: 750px) and (max-device-width: 1023px){

.onlyMobile {
display: none;
}



h1 {
font-size: 5rem;
line-height: 4.8rem;
}

h2 {
font-size: 4rem;
line-height: 3.5rem;
}

h3 {
font-family: 'GalanoBold' !important;
font-size: 2rem;
line-height: 2rem;
}

/********* sections *******/
#header {
background: #ffffff url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/newhead-hoch.jpg")
no-repeat center center;
background-size: cover;
height: 90vh;
}

#header h4 {
margin-top: 2rem;
font-size: 1.8rem;
}

/********* facts *******/

 #facts {

 background-color: #dd6cfe;
 background-image: linear-gradient(38deg, #dd6cfe 0%, #500076 89%);
 }

#facts li {
font-size: 1.5rem;
font-family: 'GalanoBold' !important;
}

#facts h2 {
padding-top: 4rem;
}


#rtdCon {
position: relative;
height: 100%;
}

#rtdCon .rtds {
position: absolute;
width: 250px;
height: auto;
}

#rtd-nuke {
top: 50px;
left: 0px;
transform: rotate(10deg);

}
#rtd-galaxy {
top: 0px;
left: 170px;
transform: rotate(20deg);

}
#rtd-bubble {
top: 0px;
left: 330px;
transform: rotate(30deg);

}

#cube1 {
position: absolute;
width: 100px;
height: auto;
top: 300px;
left: 0px;


}
#cube2 {
position: absolute;
width: 100px;
height: auto;
top: 550px;
left: 170px;
}

#cube3 {
position: absolute;
width: 100px;
height: auto;
top: 550px;
left: 170px;
}

/******* flavours *********/

#flavours {
background: #ffffff url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/bg-water2.jpg")
no-repeat center bottom;
background-size: contain;
position: relative;
}

#flavours h2 {
margin-bottom: 0.5rem;
}

#flavours h4 {
background: #222;
color: white;
padding: 0.5rem 1rem;
display: inline-block;
}

#flavours .flavs {
width: 250px;
height: auto;
}

#flavours .flavText {
margin-top: 3rem;
}

#brandCon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#horizontal {
position: absolute;
top: 40%;
right: -800;
opacity: 0.05;
}

/******* hashtag *********/

#hashtag {
background: #ffffff url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/bg-hashtag.jpg")
no-repeat center top;
background-size: cover;
padding-bottom: 30px;
}


#hashtag h3 {
text-align: center;
font-size: 7vw !important;
padding-top: 0.5rem;
}


#hashtag h3:first-of-type {
opacity: 0.2;
}
#hashtag h3:nth-of-type(2) {
opacity: 0.3;
}
#hashtag h3:nth-of-type(3) {
opacity: 0.4;
}
#hashtag h3:nth-of-type(4) {
opacity: 0.5;
}
#hashtag h3:nth-of-type(5) {
opacity: 0.6;
}
#hashtag h3:nth-of-type(6) {
opacity: 0.7;
}


}

@media screen and (min-device-width: 1024px) {

.onlyMobile {
display: none;
}
.onlyPad {
display: none;
}



h1 {
font-size: 5rem;
line-height: 4.7rem;
margin-bottom: 0.3rem;
}

h2 {
font-size: 4rem;
line-height: 3.5rem;
}

h3 {
font-family: 'GalanoBold' !important;
font-size: 2rem;
line-height: 2rem;

}
h4 {
font-family: 'GalanoBold' !important;
font-size: 1.7rem;
line-height: 2rem;

}




/********* sections *******/
header {    
    background: #ffffff url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/newhead-quer.jpg")
    no-repeat center top;
    background-size: cover;
    height: 90vh;
}


#header p {
font-size: 1.2rem;
}


#border {
padding: 45px 0;
}


/********* facts *******/

 #facts {

 background-color: #dd6cfe;
 background-image: linear-gradient(38deg, #dd6cfe 0%, #500076 89%);
 }

#facts li {
font-size: 1.5rem;
font-family: 'GalanoBold' !important;
}


#rtdCon {
position: relative;
height: 100%;
}

#rtdCon .rtds {
position: absolute;
width: 250px;
height: auto;
}

#rtd-nuke {
top: 50px;
left: 0px;
transform: rotate(10deg);

}
#rtd-galaxy {
top: 0px;
left: 170px;
transform: rotate(20deg);

}
#rtd-bubble {
top: 0px;
left: 330px;
transform: rotate(30deg);

}

#cube1 {
position: absolute;
width: 100px;
height: auto;
top: 220px;
left: 50px;
}
#cube2 {
position: absolute;
width: 100px;
height: auto;
top: 550px;
left: 120px;
}
#cube3 {
position: absolute;
width: 100px;
height: auto;
top: 350px;
left: 300px;
}

/******* flavours *********/

#flavours {
background: #ffffff url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/bg-water4.jpg")
no-repeat center bottom;
background-size: contain;
position: relative;
}

#flavours h2 {
margin-bottom: 0.5rem;
}

#flavours .flavs {
width: 220px;
height: auto;
}


#flavours h3 {
margin-bottom: 0;
}

#flavours h4 {
background: #222;
color: white;
padding: 0.5rem 1rem;
display: inline-block;
}

#brandCon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#horizontal {
position: absolute;
top: 43%;
right: -800;
opacity: 0.05;
}

/******* hashtag *********/

#hashtag {
background: #ffffff
url("https://levlup-content.s3.eu-central-1.amazonaws.com/landing-pages/rtd/Bg-splash3-2200.jpg") no-repeat center
top;
background-size: cover;
padding-bottom: 30px;

}


#hashtag h3 {
text-align: center;
font-size: 7vw !important;
padding-top: 0.6rem;
margin: 0.5em 0 !important;
}


#hashtag h3:first-of-type {
opacity: 0.2;
margin-top: 1rem;
}
#hashtag h3:nth-of-type(2) {
opacity: 0.3;
}
#hashtag h3:nth-of-type(3) {
opacity: 0.4;
}
#hashtag h3:nth-of-type(4) {
opacity: 0.5;
}
#hashtag h3:nth-of-type(5) {
opacity: 0.6;
}
#hashtag h3:nth-of-type(6) {
opacity: 0.7;
}






/******* usp *********/

#usp .ring {
border: 4px solid white;
border-radius: 50%;
width: 220px;
height: 220px;
}

#usp .ringCon {
background: #666;
height: 250px;
}

#usp h3 {
margin-bottom: 0;
}


/******* storefinder *********/

#storefinder {
background-color: #2b2b2b;
background-image: linear-gradient(286deg, #2b2b2b 0%, #545454 26%, #393939 61%, #2d2d2d 100%);
height: 70vh;

}

#storefinder img {
margin-top: -3rem;

}

}


/* animations *****************/

.fadescroll {
transition: all 1000ms;
opacity: 0;
}

.moveleft {
transform: translateX(-3vw);
opacity: 0;
transition: all 1000ms;
}

.moveright {
transform: translateX(3vw);
opacity: 0;
transition: all 1000ms;
}

.moveup {
transform: translateY(3vw);
opacity: 0;
transition: all 1000ms;
}


.go {
transform: translateX(0);
opacity: 1;
}

/* SOCIAL BAR */
#social-bar {
position: relative;
display: inline-block;
width: 100%;
/*margin-top: 4em; */
padding: 2em 0 1.5em;
border-top: 1px solid #444;
text-align: center;
background: #222;
color: white;
}

#social-bar .social-bar-inner .icon-container {
display: inline-block;
width: 3em;
height: 3em;
margin-right: 0.5em;
margin-bottom: 1em;
background-color: #f4f3f5;
float: left;
border-radius: 50px;
transition: all 0.4s ease-in-out;
}

@media (min-width: 1000px) {
#social-bar .social-bar-inner {
position: relative;
display: inline-block;
float: right;
}

#social-bar h2 {
display: inline-block;
float: left;
margin-right: 10px;
}

#social-bar .social-bar-inner .icon-container {
display: inline-block;
width: 2em;
height: 2em;
margin-right: 0.5em;
margin-bottom: 1em;
background-color: #f4f3f5;
float: left;
border-radius: 50px;
transition: all 0.4s ease-in-out;
}
}

#social-bar h2 {
/*margin-top: 12px; */
font-family: 'GalanoBold' !important;
font-size: 1.5rem !important;
}


#social-bar .social-bar-inner .icon-container:last-of-type {
margin-right: 0;
}

#social-bar .social-bar-inner .icon-container:hover {
background-color: #f4f3f5;
}

#social-bar .social-bar-inner .icon-container:hover .icon {
color: white;
}

#social-bar .social-bar-inner .icon-container .icon {
position: relative;
display: inline-block;
left: 52%;
top: 55%;
transform: translate(-50%, -50%);
color: #313131;
font-size: 1.3em;
transition: all 0.4s ease-in-out;
}
/* END SOCIAL BAR */