@import url('../main.css');

div#top 
{

    padding          :                          10px;
    background-color :           var(--s-background);
    border-bottom    : 1px solid var(--q-background);
    display          :                          flex;
    justify-content  :                           end;
    gap              :                          30px;

}

div#top a
{

    font-size : 8.7pt;
    opacity   :   0.3;

}

div#top a:first-child { border-bottom: 1px solid var(--main-color); }

section#featured 
{

    padding          :                          25px;
    background-color :           var(--s-background);
    border-top       : 1px solid var(--q-background);
    display          :                          flex;
    justify-content  :                 space-between;
    align-items      :                        center;
    gap              :                          80px;
    flex-wrap        :                          wrap;

}

div#featured_top_t p 
{

    display     :   flex;
    align-items : center;
    gap         :   10px;
    font-size   :  9.5pt;
    opacity     :    0.4;

}

div#featured_top_t p i 
{

    display     :   flex;
    align-items : center;

}

div#featured_top_productions { margin-top: 40px; }

div.featured_top_productions_production 
{

    display     :     flex;
    align-items :   center;
    gap         :     20px;
    margin      : 20px 0px;

}

div.featured_top_productions_production_poster { position: relative; }

div.featured_top_productions_production_poster img 
{

    width  : 35px;
    height : 45px;

}

div.featured_top_productions_production_poster_absolute 
{

    position         :             absolute;
    z-index          :                    1;
    top              :                  0px;
    left             :                  0px;
    width            :                 35px;
    height           :                 45px;
    background-color : rgba(2, 2, 2, 0.3);

}

div.featured_top_productions_production_title a 
{

    padding          :            8px 20px;
    width            :               200px;
    background-color : var(--f-background);
    display          :               block;
    font-size        :               8.7pt;
    opacity          :                 0.4;
    text-align       :              center;

}

div.featured_top_productions_production_views p 
{

    font-size : 8.7pt;
    opacity   :   0.3;

}

div#featured_exibition { position: relative; }

div#featured_exibition img 
{

    width  : 650px;
    height : 350px;

}

div#featured_exibition_absolute 
{

    position         :             absolute;
    z-index          :                    1;
    top              :                  0px;
    left             :                  0px;
    padding          :                 25px;
    width            :                650px;
    height           :                350px;
    background-color : rgba(2, 2, 2, 0.7);
    display          :                 flex;
    justify-content  :               center;
    align-items      :               center;

}

div#featured_exibition_absolute_center_title p 
{

    font-size : 13pt;
    opacity   :  0.8;

}

div#featured_exibition_absolute_center_play 
{

    display         :  flex;
    justify-content : start;
    margin-top      :  30px;

}

div#featured_exibition_absolute_center_play a 
{

    padding          :                15px 25px;
    background-color :        var(--main-color);
    border-radius    :                     15px;
    display          :                     flex;
    align-items      :                   center;
    gap              :                     10px;
    color            : var(--second-text-color);
    font-size        :                     10pt;
    transition       :                     0.4s;

}

div#featured_exibition_absolute_center_play a i 
{

    display     :   flex;
    align-items : center;

}

div#featured_exibition_absolute_center_play a:hover { background-color: var(--dark-main-color); }

div#productions { margin: 100px 0px; }

section.productions_carousel 
{

    padding          :                    25px;
    width            :                    100%;
    background-color : rgba(21, 21, 21, 0.2);
    margin           :                50px 0px;
    
}

div.productions_carousel_t 
{

    padding     :            2px 0px 2px 15px;
    border-left : 3px solid var(--main-color);

}

div.productions_carousel_t p 
{

    font-size : 10pt;
    opacity   :  0.4;

}

div.productions_carousel_list 
{

    padding-bottom : 25px;
    display        : flex;
    gap            : 20px;
    margin-top     : 30px;

}

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

    section#featured { justify-content: center; }

    div#featured_exibition img, div#featured_exibition_absolute { width: 100%; }

}