/**
* Big comments.
*
* I am a long-form comment. I describe, in detail, the CS that follows. I am
* such a long comment that I easily break the 80 character limit, so I am
* broken acroS several lines.
*/



/*-------------------------------------------------------------------------------*\
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
|S| SETTINGS
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
\*-------------------------------------------------------------------------------*/

/* SETTINGS
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || GENERAL SETTINGS 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100dvw; /* or 100vw */
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    font-size: 100%;
}

a {text-decoration: none;}

/* SETTINGS
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || TYPOGRAPHY
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

@font-face {
    font-family: Roboto;
    src: url('res/font/');
              /* für IE9 */
    src: url('res/font/?#iefix')
              format('truetype'),
              /* für IE6-IE8 */
         url('res/font/')
              format('truetype'),
             /* für moderne Browser */
         url('res/font/')
              format('truetype');
            /* für Safari, Android, iOS */
}

@font-face {
    font-family: MuseoModerno;
    src: url('res/font/MuseoModerno-VariableFont_wght.ttf');
              /* für IE9 */
    src: url('res/font/MuseoModerno-VariableFont_wght.ttf?#iefix')
              format('truetype'),
              /* für IE6-IE8 */
         url('res/font/MuseoModerno-VariableFont_wght.ttf')
              format('truetype'),
             /* für moderne Browser */
         url('res/font/MuseoModerno-VariableFont_wght.ttf')
              format('truetype');
            /* für Safari, Android, iOS */
}


/* SETTINGS
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || VARIABLES
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

:root {

    /* COLORS */
    
    --white-1: white;
    --white-2: rgb(230, 230, 230);
    --white-3: white;
    --white-4: white;

    --gray-1: #a6a6a6;
    --gray-2: gray;
    --gray-3: gray;
    --gray-4: gray;

    --black-1: black;
    --black-2: #323232;
    --black-3: black;
    --black-4: black;

    --color-1: yellow;
    --color-1: yellow;
    --color-1: yellow;
    --color-1: yellow;

}


/*-------------------------------------------------------------------------------*\
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
|S| MAIN
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
\*-------------------------------------------------------------------------------*/

/* MAIN
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || GENERAL
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

body {
    background-color: var(--black-2);
    font-family: Roboto;
    padding-bottom: 1rem;
} 

h1, h2, p {
    text-align: center;
}

.p {
    font-family: Roboto;
}

.se-dark {
    color: var(--black-2);
}

.se-bright {
    color: var(--white-2);
}

.se-s {
    font-size: 1.4rem;
}

.xx-logo-gray {
    position: static;
    display: inline-block;
    /*
    width: 4em;
    height: 1em;
    */
    margin: 0 auto 0 auto;
    background-image: url("res/image/xaxx-logo-gray.png");
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: 50% 50%;
    background-size: 90%;
}




/* MAIN
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || P2
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

.c-2 {
    position: static;
    display: block;
    width: 100%;
    height: 22rem;
    margin-top: 15rem;
    padding-top: 2rem;
    background-color: var(--white-2);
}

.pic-product {
    position: static;
    display: block;
    max-width: 53rem;
    width: 100%;
    height: 11rem;
    margin: 1rem auto 0 auto;
    background-image: url("res/image/Parfum_HD-size_800-1.png");
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: 50% 50%;
    background-size: 100%;
}

.c-se-1 {
    margin-top: 1rem;
}

.xx-logo-1 {
    width: 6em;
    height: 2em;
}

.xx-logo-2 {
    width: 4em;
    height: 1em;
    background-position: 50% 100%;
}

/* MAIN
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || P3
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

.c-3 {
    position: sticky;
    top: 4.7rem;
    height: 18rem;
    background-color: var(--black-2);
    z-index: 10;
}

.eduard-pic {
    position: static;
    display: block;
    width: 11rem;
    height: 11rem;
    margin: 3.2rem auto 1rem auto;
    background-image: url("res/image/Tatiana.png");
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: 50% 50%;
    background-size: 100%;
    border-radius: 100%;
    background-color: var(--white-2);
}

.se-2 {
    margin: 0rem 0 3rem 0;
}

/* MAIN
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || P4: SOCIAL MEDIA LINKS
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/


.c-links-1 {
    position: relative;
    display: block;
    max-width: 18rem;
    width: 100%;
    margin: 3rem auto 0 auto;
    padding: 0.4rem 0 4rem 0;
    z-index: 1;
}

.c-link {
    position: relative;
    display: block;
    width: 100%;
    height: 5rem;
    margin: 0 0 0 0;
    transition: 300ms;
}

.c-link:hover .sm-icon {
    width: 5.2rem;
    height: 5.2rem;
    margin-top: -0.9rem;
}

.c-link:hover .sm-button {
    background-image: linear-gradient(92.83deg, #e25394 0, #e25394 100%);
}

.sm-icon {
    position: absolute;
    display: block;
    width: 3rem;
    height: 3rem;
    margin-top: 0.5rem;
    left: -0.4rem;
    border-radius: 100%;
    padding: 0rem;

    cursor: pointer;
    transition: 200ms;
}

.sm-button {
    position: absolute;
    display: block;
    left: 50%;
    margin-left: -10rem;
    width: 20rem;
    line-height: 4rem;
    padding-left: 3rem;
    text-align: center;
    border-radius: 6rem;
    background-color: var(--gray-1);
    background-image: linear-gradient(25deg, #ff7426 0, #c74b03 50%, #ff7426 100%);
    background-image: linear-gradient(25deg, #F597C2 0, #e25394 50%, #F597C2 100%);
    box-shadow: 0.1rem 0.1rem 0.2rem #2c2c2c;
    color: var(--black-2);
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 300ms;
}

/* MAIN
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || P5: TEXT
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

.c-4 {
    background-color: var(--white-2);
    padding: 2rem;
}

.se-3 {
    text-align: center;
    max-width: 37rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
}

.se-3-pic {
    display: block;
    width: 16rem;
    margin: 0rem auto;
}

/* MAIN
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || P6
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

.c-5 {
    padding: 6rem 0;
}

.logo-2 {
    margin-top: 0;
}





/*-------------------------------------------------------------------------------*\
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
|S| FIXED
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
\*-------------------------------------------------------------------------------*/

/* FIXED
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> || P1
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/

.c-1 {
    position: fixed;
    display: block;
    width: 100%;
    height: 17rem;
    top: 0;
    padding-top: 1rem;
    background-color: var(--black-2);
    z-index: 100;
}

.c-logo {
    position: static;
    display: block;
    margin: -1.3rem auto 0 auto;
    width: 16rem;
    text-align: center;
    transition: 300ms;
    font-size: 1.6rem;
}

.logo-part-1 {
    position: absolute;
    display: block;
    width: 10em;
    height: 8em;
    left: 50%;
    margin-left: -5em;
    background-image: url("res/image/logo.png");
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: 50% 90%;
    background-size: 100%;
}

.logo-part-2 {
    position: absolute;
    display: none;
    width: 10.4em;
    height: 8em;
    left: 50%;
    margin-left: -5.2em;
    background-image: url("res/image/logo-part-2.png");
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: 50% 50%;
    background-size: 100%;
}



/*-------------------------------------------------------------------------------*\
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
|S| IMPRESSUM
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
\*-------------------------------------------------------------------------------*/

article-impressum {
    position: relative;
    display: block;
    width: 100%;
} 

article-impressum h3,
article-impressum h2,
article-impressum a {
    text-align: center;
    color: var(--gray-1);
    width: 100%;
}

article-impressum p {
    text-align: center;
    color: var(--gray-3);
    margin: 1rem 0;
}

.impressum-hidden {
    display: none;
    padding: 1rem;
} 




/*-------------------------------------------------------------------------------*\
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
|S| MEDIA SCREENS
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
\*-------------------------------------------------------------------------------*/


@media (min-width: 600px) {
    
    .c-2 {
        height: 24rem;
    }
    
    .pic-product {
        height: 13rem;
        margin: 2rem auto 0 auto;
        background-image: url("res/image/Parfum_HD-size_800-1.png");
    }

    .c-3 {
        height: 21rem;
        top: 1rem;
    }

    .eduard-pic {
        width: 15rem;
        height: 15rem;
        margin-top: 7rem;
    }
    


    .c-4 {
        padding: 3rem;
    }
    
    
    
    /* CSS */
    .button-link {
        margin: 3rem auto;
    }
}

@media (min-width: 800px) {

   
    
    .c-2 {
        height: 28rem;
        padding-top: 3.6rem;
    }
    
    .pic-product {
        height: 15rem;
        background-image: url("res/image/Parfum_HD.png");
    }

}