﻿@media all {
    /* video */
    #video { overflow:hidden; }
    #video video { display:block; position:relative; width: 100vw; height:100vh; object-fit:cover; background-color:var(--color-green); }

    #video_options { display:none; position:absolute; bottom:var(--spacing-1L); right:0px; left:0px; text-align:center; z-index:200; }
    
    #video_options button { padding:var(--spacing-2S); color:var(--color-white); font-size:var(--font-size-1S); cursor:pointer; background-color:var(--color-green); border:1px var(--color-green) solid; }
    #video_options button:hover,
    #video_options button:focus { color:var(--color-blue); background-color:var(--color-white); background-image:none; border:1px var(--color-blue) solid;  border-radius:initial;}

    /* whats new */
    #whats_new { position:relative; padding:var(--spacing-5L) 0px; overflow:hidden; }
    #whats_new .container_row_content { padding-top:var(--spacing-2L); padding-bottom:var(--spacing-2L);}

    #whats_new .title_row { position:relative; max-width:initial; margin-bottom:var(--spacing-2L);text-align:center; }
    #whats_new .title_row h2 { margin:0px auto; font-size:var(--font-size-3L); font-weight:var(--font-weight-light); text-transform:uppercase; letter-spacing:var(--spacing-3S); }

    #whats_new .slide_row .slide_box { position:relative;}
    #whats_new .slide_row .slide_box .body { padding:var(--spacing-0) var(--spacing-0) 0px var(--spacing-0); text-align:center; }

    #whats_new .slide_row .slide_box .type_is { position:absolute; top:calc(-1 * calc(var(--spacing-1S) + calc(var(--font-size-1S) / 2))); left:0px; padding:var(--spacing-1S) var(--spacing-2L); text-align:center; font-family:var(--font-1); color:var(--color-white); font-size:var(--font-size-1S); font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:1px; line-height:1; z-index:1; }
    #whats_new .slide_row .slide_box img.photo { display:block; margin:0px; width:100%; height:50vh; max-height:500px; object-fit:cover; }

    #whats_new .slide_row .slide_box p.title { margin:0px 0px var(--spacing-1S) 0px; font-size:var(--font-size-3L); text-transform:uppercase; line-height:1; }

    #whats_new .slide_row .slide_box a { color:var(--color-white); }
   
    #whats_new .slide_row .ms-layout-partialview .ms-container { overflow:visible; }
    #whats_new .slide_row .ms-inner-controls-cont { max-width:initial !important; }
    #whats_new .slide_row .ms-skin-metro .ms-nav-next, 
    #whats_new .slide_row .ms-skin-metro .ms-nav-prev { border-radius:50%; }

    /* shop_options */
    #options .content_box { position:absolute; top:50%; left:50%; width:90%; max-width:500px; transform:translateY(-50%); color:var(--color-white); z-index:1; }
    #options .content_box p { margin:0px; }
    #options .content_box p.title { margin-bottom:var(--spacing-0); font-size:var(--font-size-3L); font-weight:var(--font-weight-bolder); line-height:1.2; }
    #options .content_box p.sub_title { margin-bottom:var(--spacing-1L); font-size:var(--font-size-1L); line-height:1; }

    #options .brand_slider_controls { bottom:var(--spacing-2L); }
    #options .brand_slider_controls button:hover,
    #options .brand_slider_controls button:focus { color:var(--color-black); background-color:var(--color-white); }

    /* social*/
    #social_feed { text-align:center; }
    #social_feed:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat:no-repeat, no-repeat, no-repeat; }
    #social_feed:before { 
        background-image:
            url(https://eu2allwebext.blob.core.windows.net/waterfordlakes/www/resources/images/common/other/i_circle_beige.png),
            url(https://eu2allwebext.blob.core.windows.net/waterfordlakes/www/resources/images/common/other/i_oval_green.png),
            url(https://eu2allwebext.blob.core.windows.net/waterfordlakes/www/resources/images/common/other/i_oval_light_green.png);

        background-position: 
            top -35% left 5%, 
            bottom -24% left -30%, 
            bottom -30% right -30%;

        background-size: 
                30% 35%, 
                40% 30%, 
                40% 30%;
    }

    #social_feed .container_row_content { position:relative; z-index:2; }

    #social_feed h2 { margin:0px 0px var(--spacing-1S) 0px; color:var(--color-green); text-transform:uppercase; }
    #social_feed p.sub_title { margin:0px auto; width:90%; max-width:800px; font-size:var(--font-size-0); line-height:1.4; }

    #social_feed ul.social_group { grid-template-columns:repeat(4, 1fr); gap:var(--spacing-1S); margin:var(--spacing-2L) 0px; }
    #social_feed ul.social_group li { position:relative; }

    #social_feed ul.social_group a { display:inline-block; }
    #social_feed ul.social_group a:hover img,
    #social_feed ul.social_group a:focus img { opacity:.8; }

    #social_feed ul.social_group img { display:block; margin:0px; width:100%; border:2px var(--color-yellow) solid;}
    #social_feed ul.social_group .social_icon { position:absolute; top:var(--spacing-2S); right:var(--spacing-2S); color:var(--color-white); font-size:var(--font-size-3L); z-index:1; }
}

@media (max-width:1400px) {
    #whats_new { padding:var(--spacing-4L) 0px; }
    #whats_new .slide_row .slide_box .body { padding:var(--spacing-0) var(--spacing-0) 0px var(--spacing-0); }
}

@media (max-width:1200px) {
    #options .content_box { left:initial; right:10%; }
}

@media (max-width:1000px) {
    #whats_new .slide_row .slide_box img.photo { height:40vh; min-height:400px; }
}

@media (max-width:800px) {
    #whats_new .title_row .brand_icon_row.pattern_half_black_white { display:none; }
    #whats_new .slide_row .slide_box p.title { font-size:var(--font-size-2L); }
}

@media (max-width:760px) {
    #whats_new .slide_row .slide_box img.photo { height:30vh; min-height:300px;  }

    #social_feed ul.social_group { grid-template-columns:1fr 1fr; gap:var(--spacing-2L); }
}

@media (max-width:700px) {
    #options .content_box { left:var(--spacing-2L); right:var(--spacing-2L); text-align:center; }
    #options .content_box p.sub_title { display:none; }

    #social_feed .container_row_content { padding-top:var(--spacing-5L); }
}

@media (max-width:600px) {
    #whats_new { padding: var(--spacing-5L) 0px; }

    #social_feed p { line-height:initial; }
}

@media (max-width:500px) {
    #whats_new h2 {  font-size:var(--font-size-2L); }
    #whats_new .slide_row .slide_box p.title { font-size:var(--font-size-1L); }
    #whats_new .slide_row .slide_box img.photo { min-height:250px;  }
}