@charset "utf-8";
/* CSS Document */

:root{
    /*	----------------------------------------------------------  SIZES  */
    --full-width: 100%;
    --inner-width: 1360px;
    --innerst-width: 800px;


    /*	---------------------------------------------------------  COLORS  */
    --bg-color-test: rgba(255,0,0,0.1);

    --xrand-blue: rgba(179,237,255,1);

    --xrand-petrol-dark: rgba(45,100,121,1);

    --error-red: rgba(220,0,0,1);
    --confirmation-green: rgba(0,220,0,1);


    /*	----------------------------------------------------------  FONTS  */
    --montserrat: 'Montserrat', 'Arial';

    --thin: 		100;
    --extralight: 	200;
    --light: 	 	300;
    --regular: 	 	400;
    --medium: 	 	500;
    --semibold:  	600;
    --bold: 	 	700;
    --extrabold: 	800;
    --black: 	 	900;
}

* {
    box-sizing:border-box;
}

html, body {
    width:100%;
    height:auto;
    min-height:100vh;
    position:relative;

    padding:0;
    margin:0;

    font-family: var(--montserrat), sans-serif;
    font-style: normal;
    font-size: 93.75%;
    color: rgba(0,0,0,1);
}

html{
    /*	force scrollbars  */
    overflow-y:scroll;
    scroll-behavior: smooth;
}

body{
    background-color: var(--xrand-blue);
    overflow:hidden;
}

h1, h2, h3, h4, h5, h6, p, td, ul, li, figure, button {
    margin:0;
    padding:0;
    font-weight:normal;
    border:0;
    outline:0;
    background-color:transparent;
}




/*	-----------------------------------------------------------------------------------------------------  BASE CLASSES  */

.flxR{
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
}
.flxC{
    display:flex;
    flex-flow:column;
    flex-wrap:nowrap;
}
.flxi{
    display: inline-flex;
}
.flxJCA	{ justify-content:space-around; }
.flxJCB	{ justify-content:space-between; }
.flxJCC	{ justify-content:center; }
.flxJCE	{ justify-content:flex-end; }
.flxJCS	{ justify-content:flex-start; }

.flxAIC	{ align-items:center; }
.flxAIE	{ align-items:flex-end; }
.flxAIS	{ align-items:flex-start; }
.flxAIX	{ align-items:stretch; }

.flxWrp	{ flex-wrap:wrap; }


.grd{
    display: grid;
}


.fllW{
    width:100%;
    height:auto;
}
.fllH{
    height:100%;
    width:auto;
}
.fllWH{
    width:100%;
    height:100%;
    display: block;
}

.innerWidth{
    width:100%;
    max-width: var(--inner-width);
    margin:0 auto;
}

.innerstWidth{
    width:100%;
    max-width: var(--innerst-width);
    margin:0 auto;
}

.scrH{
    height: auto;
    min-height: 100vh;
}


p{
    padding: 0 0 0.4rem;
}




/*  -----------------------------------------------------------------------------------------------------  MAIN CONTENT  */

.xrand_mainWrp{
    width: 100%;
}

    .xrand_main{
        width: 800px;
        height: auto;

        grid-template-columns: 1fr 2fr 1fr;
        gap: 0;
    }
    @media screen and (min-width:666px){
        .xrand_main {
            width: 1100px;
        }
    }

        .xrand_sideTop{
            aspect-ratio: 300 / 653;

            background-size: 100%;
            background-repeat: no-repeat;

        /*    background-color: var(--bg-color-test);  */
        }
            .xrand_sideTopL{
                grid-area: 1 / 1 / 3 / 2;

                background-image: url("../../assets/media/images/xrand-surface-left-top_300x520.png");
                background-position: bottom right;
            }
            .xrand_sideTopR{
                grid-area: 1 / 3 / 3 / 4;

                background-image: url("../../assets/media/images/xrand-surface-right-top_300x420.png");
                background-position: bottom left;
            }

        .xrand_centerTop{
            aspect-ratio: 60 / 44;

            grid-area: 1 / 2 / 2 / 3;

            background-image: url('../../assets/media/images/xrand-surface-center-top_600x440.png');
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center bottom;
        }

        .xrand_sideBottom{
            aspect-ratio: 300 / 360;

            background-size: 100%;
            background-repeat: no-repeat;
        }
            .xrand_sideBottomL{
                grid-area: 3 / 1 / 4 / 2;

                background-image: url("../../assets/media/images/xrand-surface-left-bottom_300x240.png");
                background-position: top right;
            }
            .xrand_sideBottomR{
                grid-area: 3 / 3 / 4 / 4;

                background-image: url("../../assets/media/images/xrand-surface-right-bottom_300x240.png");
                background-position: top left;

            }

        .xrand_centerWishesWrp{
            aspect-ratio: 600 / 213;

            overflow: hidden;

            position: relative;

            grid-area: 2 / 2 / 3 / 3;

            background-color: rgba(217,217,217,1);
        }

        .xrand_wishesWrp{
            width: 100%;
            height: 100%;

            position: absolute;
            top:0;
            left: 0;

            opacity: 0.8;

            perspective: 500%;
        }

        .xrand_wishesInitial{
            display: block;
        }

            .xrand_wish{
                width: 100%;
                aspect-ratio: 600 / 213;

                position: absolute;
                left: 0;

                padding: 0 10%;

                font-size: 1.2rem;
                font-weight: var(--semibold);
                text-align: center;
                line-height: 1.1;

                transform-style: preserve-3d;

                top: -50%;                  /*  animated later  */
                transform: rotateX(270deg); /*  animated later  */
                opacity: 0.2;               /*  animated later  */
                filter: blur(0.5px);        /*  animated later  */
            }

            @media screen and (min-width: 666px){
                .xrand_wish {
                    font-size: 1.4rem;
                }
            }

            .xrand_wishesInitial .xrand_wish{
                top: 0;                     /*  animated later  */
                transform: rotateX(0deg);   /*  animated later  */
                opacity: 1;                 /*  animated later  */
                filter: blur(0px);          /*  animated later  */
            }

            .xrand_centerWishFrame{
            /*    display: none;  */

                width: 100%;
                height: 100%;

                position: absolute;
                left: 0;
                top: 0;

                background-image: url("../../assets/media/images/xrand-surface-center-wish_600x213.png");
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: center center;
            }



    /*  ------------------------------------------------------------------------------  WISH BUTTON  */
        .xrand_centerBtnsWrp{
            aspect-ratio: 60 / 36;

            position: relative;

            grid-area: 3 / 2 / 4 / 3;

            background-image: url("../../assets/media/images/xrand-surface-center-bottom_600x360.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center top;
        }

            .xrand_wishBtnWrp{
                width: 30%;
                aspect-ratio: 1 / 1;

                position: absolute;
                left: 34.9%;
                top: 28.3%;

                padding: 0;
                margin: 0;

                cursor: pointer;

            /*    background-color: var(--bg-color-test);  */
                background-image: url("../../assets/media/images/xrand-surface-center-button_sprite_540x180.png");
                background-size: cover;
                background-position: 0 center;
                background-repeat: no-repeat;
            }
                .xrand_wishBtn{
                    width: 100%;
                    height: 100%;

                    cursor: pointer;

                    background-image: url("../../assets/media/images/xrand-surface-center-button_sprite_540x180.png");
                    background-position: 50% center;
                    background-size: cover;
                    background-repeat: no-repeat;

                    transition: opacity 0.5s;
                }



    /*  -------------------------------------------------------------------------  CATEGORY BUTTONS  */
        .xrand_catBtnsWrp{
            width: 71%;
            height: 12.22222%;

            position:absolute;
            left: 14%;
            top: 11.5%;

        /*   background-color: var(--bg-color-test);  */
        }
            .xrand_catBtnWrp{
                width: 33%;
                aspect-ratio: 142 / 44;

                position: relative;

                background-image: url("../../assets/media/images/xrand-surface-category-button_passive_142x044.png");
                background-size: cover;
                background-repeat: no-repeat;
            }

                .xrand_catBtn{
                    width: 100%;
                    height: 100%;

                    padding: 0 0 1px;

                    position: relative;

                    cursor: pointer;
                }
                    .xrand_catBtnBg{
                        width: 100%;
                        height: 100%;

                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;

                        opacity: 0;

                        background-image: url("../../assets/media/images/xrand-surface-category-button-sprite_426x044.png");
                        background-size: cover;
                        background-position: 50% center;

                        transition: opacity 0.5s;
                    }

                    .xrand_catBtnTxt{
                        z-index: 2;

                        font-family: var(--montserrat), sans-serif;
                        font-weight: var(--semibold);
                        font-size: 0.9rem;
                        text-transform: uppercase;
                        color: rgba(0,0,0,1);

                        opacity: 0.4;

                        transition: opacity 0.5s;
                    }
                    @media screen and (min-width: 666px){
                        .xrand_catBtnTxt {
                            font-size: 1.1rem;
                        }
                    }

                    .xrand_catBtnReflect{
                        width: 100%;
                        height: 100%;

                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 3;

                        opacity: 0.8;

                        background-image: url("../../assets/media/images/xrand-surface-category-button-reflections_142x044.png");
                        background-size: cover;
                    }




/*  ---------------------------------------------------------------------------------------------------------  DOWNLOAD  */

.xrand_downloadWish{
    width: fit-content;
    max-width: calc( 100% - 50px );

    display: block;
    margin: 20px 25px;
    padding: 10px 20px;

    font-weight: var(--bold);
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--xrand-petrol-dark);

    border: 1px solid var(--xrand-petrol-dark);
    border-radius: 5px;

    transition: all 0.5s;
}
@media screen and (min-width: 666px){
    .xrand_downloadWish{
        margin: 50px 25px;
        padding: 10px 40px;

        font-size: 2rem;
    }
}

.xrand_downloadWish.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.xrand_downloadWish:link, .xrand_downloadWish:visited { color: var(--xrand-petrol-dark); background-color: transparent; }
.xrand_downloadWish:hover, .xrand_downloadWish:active, .xrand_downloadWish:focus { color: var(--xrand-blue); background-color: var(--xrand-petrol-dark); }




/*  -----------------------------------------------------------------------------------------------------------  FOOTER  */

.xrand_ftrWrp{
    width: 100%;
    min-height: 200px;

    padding: 50px 25px 80px;

    gap: 20px;
}
@media screen and (min-width: 768px){
    .xrand_ftrWrp{

        flex-flow: row;
        justify-content: center;
        padding: 120px 25px 0;
    }
}

    .xrand_ftr{
        width: fit-content;

        padding: 0 20px;
    }

        .xrand_ftrL,
        .xrand_ftrR{
            width: 100%;
            margin: 5px 0 0 0;

            font-size: 0.9rem;
            text-align: center;

            color: var(--xrand-petrol-dark);
        }
        @media screen and (min-width: 768px){
            .xrand_ftrL,
            .xrand_ftrR {
                width: fit-content;
                margin: -3px 0 0 0;
                text-align: left;
            }
        }

            .xrand_ftrAddress{
                width: 100%;
                min-width: 280px;
                padding: 0;
            }
            @media screen and (min-width: 768px) {
                .xrand_ftrL .xrand_ftrAddress {
                    width: fit-content;
                    min-width: unset;
                    padding: 0 0 50px 55px;
                }

                .xrand_ftrR .xrand_ftrAddress {
                    width: fit-content;
                    min-width: unset;
                    padding: 0 0 50px 55px;
                }
            }

        .xrand_ftrAddress a{
            text-decoration: none;
        }
        .xrand_ftrAddress a:link, .xrand_ftrAddress a:visited{ color: var(--xrand-petrol-dark); }
        .xrand_ftrAddress a:hover, .xrand_ftrAddress a:active, .xrand_ftrAddress a:focus{ color: black; }

        .xrand_ftrURI{
            font-weight: var(--semibold);
        }



/*  --------------------------------------------------------------------------------------------------------  COPYRIGHT  */
    .bdnet_copyrightWrp{
        width: 100%;
        height: auto;
        min-height: 35px;

        margin: 30px 0 0;
        padding: 0 25px;

        color: var(--xrand-blue);
        background-color: rgba(0,0,0,0.4);
    }
        .bdnet_copyright{
            width: fit-content;
            height: 100%;

            padding: 15px 50px 20px;

            font-size: 0.8rem;
            text-align: center;
        }
        @media screen and (min-width: 768px) {
            .bdnet_copyright{
                flex-flow: row;

                padding: 7px 50px 0;

                font-size: 0.8rem;
            }
        }

            .bdnet_copyright span{
                white-space: nowrap;
                padding: 0 2px;
            }

                .bdnet_copyright span:nth-of-type(2),
                .bdnet_copyright span:nth-of-type(5){
                    font-size: 0;
                    padding: 5px 0;
                }
                @media screen and (min-width: 768px){
                    .bdnet_copyright span:nth-of-type(2),
                    .bdnet_copyright span:nth-of-type(5){
                        font-size: inherit;
                        padding: 0 5px;
                    }
                }

            .bdnet_copyright a{
                color: var(--xrand-blue);
                text-decoration: none;
            }
            .bdnet_copyright a:hover, .bdnet_copyright a:active, .bdnet_copyright a:focus{ color: white; }