/*********************************
    IMPORT MAIN STYLE SHEET
**********************************/
@import "./main.css"; 


/*********************************
            DEFAULT
**********************************/
body{
    background-color:var(--dark);
    color:var(--white);
}


/*********************************
             MAIN
**********************************/
main{
    overflow:hidden !important;
}


/*********************************
            HEADER
**********************************/
header{
    position:relative;
    overflow:hidden;
}

header section{
    height:100%;
    position:relative;
    z-index:1;
}

header .flex_content:first-child{
    padding-right:0 !important;
}

header .flex_content:last-child{
    padding-left:0 !important;
}

header section article .tag{
    display:flex;
    align-items:center;
    gap:10px;
}

header section article{
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-between;
}

header section article .title{
    line-height:75px;
}

header section figure{
    overflow:hidden;
    pointer-events:none;
    position:relative;
    top:1rem;
}

header section figure img{
    height:100%;
    width:75%;
    object-fit:cover;
    object-position:top;
    margin:auto;
    display:block;
}

header section article p{
    color:var(--lite);
}

header aside{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-between;
}

header aside .sub_title{
    opacity:0.1 !important;
    text-align:left;
    font-weight:900;
    pointer-events:none;
}

header aside .lists{
    width:100%;
}

header aside .notice{
    width:100%;
    border:2px solid var(--white);
    border-radius:10px;
    background-color:rgba(255,255,255,0.4);
    color:var(--black);
}

@media (max-width:1020px){
    header section{
        flex-wrap:wrap;
    }
    
    header .flex_content:first-child{
        padding-right:1rem !important;
        align-items:center;
        justify-content:center;
        gap:1rem;
        order:1;
    }

    header .flex_content:last-child{
        padding-left:1rem !important;
        order:2
    }
    
    header .flex_content:nth-child(2){
        order:3;
    }
    
    header section article .title{
        text-align:center;
    }
    
    header section figure{
        max-height:50vh;
        min-height:50vh;
    }
    
    header section figure img{
        width:100%;
        object-fit:contain;
    }
    
    header .flex_content:last-child .sub_title{
        display:none;
    }
}

@media (max-width:720px){
    header section article .title{
        line-height:45px;
    }
}


/*********************************
            DIVISIONS
**********************************/

/*DIVISION_1*/
.division_1{
    background-color:var(--white);
    color:var(--gray);
}

.division_1 .title, .division_1 .sub_title{
    color:var(--dark);
}

.division_1 section hgroup{
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-between;
}

@media (max-width:720px){
    .division_1 section hgroup{
        gap:1rem;
    }
}


/*DIVISION_2*/
.division_2{
    background-color:#f1f1f1;
    color:var(--gray);
    align-items:center;
}

.division_2 .title, .division_2 .sub_title{
    color:var(--dark);
}

.division_2 figure{
    width:100%;
    position:relative;
    display:block;
    margin:auto;
    pointer-events:none;
}

.division_2 figure:after, .division_2 figure:before{
    content:"";
    display: inline-block;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='meteoconsStarFill0' x1='187.9' x2='324.1' y1='138.1' y2='373.9' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fcd966'/%3E%3Cstop offset='.5' stop-color='%23fcd966'/%3E%3Cstop offset='1' stop-color='%23fccd34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23meteoconsStarFill0)' stroke='%23fcd34d' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m105.7 263.5l107.5 29.9a7.9 7.9 0 0 1 5.4 5.4l29.9 107.5a7.8 7.8 0 0 0 15 0l29.9-107.5a7.9 7.9 0 0 1 5.4-5.4l107.5-29.9a7.8 7.8 0 0 0 0-15l-107.5-29.9a7.9 7.9 0 0 1-5.4-5.4l-29.9-107.5a7.8 7.8 0 0 0-15 0l-29.9 107.5a7.9 7.9 0 0 1-5.4 5.4l-107.5 29.9a7.8 7.8 0 0 0 0 15Z'%3E%3CanimateTransform additive='sum' attributeName='transform' calcMode='spline' dur='6s' keySplines='.42, 0, .58, 1; .42, 0, .58, 1' repeatCount='indefinite' type='rotate' values='-15 256 256; 15 256 256; -15 256 256'/%3E%3Canimate attributeName='opacity' dur='6s' values='1; .75; 1; .75; 1; .75; 1'/%3E%3C/path%3E%3C/svg%3E");
    position:absolute;
    z-index:1;
}

.division_2 figure:after{
    bottom:0;
    right:0;
}

.division_2 figure:before{
    bottom:-0.5rem;
    right:-0.5rem;
    width:40px;
    height:40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='meteoconsStarFill0' x1='187.9' x2='324.1' y1='138.1' y2='373.9' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fcd966'/%3E%3Cstop offset='.5' stop-color='%23fcd966'/%3E%3Cstop offset='1' stop-color='%23fccd34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23meteoconsStarFill0)' stroke='%23fcd34d' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m105.7 263.5l107.5 29.9a7.9 7.9 0 0 1 5.4 5.4l29.9 107.5a7.8 7.8 0 0 0 15 0l29.9-107.5a7.9 7.9 0 0 1 5.4-5.4l107.5-29.9a7.8 7.8 0 0 0 0-15l-107.5-29.9a7.9 7.9 0 0 1-5.4-5.4l-29.9-107.5a7.8 7.8 0 0 0-15 0l-29.9 107.5a7.9 7.9 0 0 1-5.4 5.4l-107.5 29.9a7.8 7.8 0 0 0 0 15Z'%3E%3CanimateTransform additive='sum' attributeName='transform' calcMode='spline' dur='6s' keySplines='.42, 0, .58, 1; .42, 0, .58, 1' repeatCount='indefinite' type='rotate' values='-15 256 256; 15 256 256; -15 256 256'/%3E%3Canimate attributeName='opacity' dur='2s' values='1; .75; 1; .75; 1; .75; 1'/%3E%3C/path%3E%3C/svg%3E");
}

.division_2 .cards{
    gap:1rem;
}

.division_2 .cards .card{
    background-color:var(--dark);
    color:var(--white);
    border-radius:10px;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    gap:5px;
    font-weight:200;
}

.division_2 .cards .card em{
    display:block;
    font-weight:400;
}

.division_2 .bulletins{
    color:var(--dark);
}

.division_2 .bulletin:before{
    color:var(--primary);
}