﻿@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) var(--spacing-1S); color:var(--color-white); font-size:var(--font-size-1S); cursor:pointer; background-color:var(--color-blue); 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 { background-color:var(--color-red); background-repeat:no-repeat; background-size:contain; background-image: url(https://eu2allwebext.blob.core.windows.net/kentlands/www/resources/images/common/other/i_k_graphic.png); }
    #whats_new .container_row_content { padding-top:var(--spacing-2L); }

    #whats_new .title { margin-bottom:var(--spacing-2L); text-align:center; }
    #whats_new .title h2 { color:var(--color-white); font-size:var(--font-size-2L); }
    #whats_new .title h2 span { display:block; margin-top:var(--spacing-2S); font-size:var(--font-size-3L);}

    #whats_new .whats_new_group { margin:0px auto; gap:var(--spacing-0); grid-template-columns:1fr 1fr 1fr; }
    #whats_new .whats_new_group.two_boxes { grid-template-columns:1fr 1fr; gap:var(--spacing-0); }
    #whats_new .whats_new_group.one_box { max-width:800px; grid-template-columns:1fr; }
    #whats_new .whats_new_group.one_box > .box { display:grid; grid-template-columns:1fr 1fr; align-items:center; background-color:var(--color-white); }

    #whats_new .whats_new_group .box { position:relative; text-align:center; }
    #whats_new .whats_new_group .box .photo { background-color:var(--color-dark-green);  background-repeat:no-repeat; background-position:center center; background-size:50%; background-image:url(https://eu2allwebext.blob.core.windows.net/kentlands/www/resources/images/common/logos/i_kentlands_logo_white.png);}
    #whats_new .whats_new_group .box .photo img { display:block; margin:0px; width:100%; aspect-ratio:1/1; object-fit:cover;  }
    #whats_new .whats_new_group .box .body { position:relative; padding:var(--spacing-2L) var(--spacing-0) var(--spacing-0) var(--spacing-0); background-color:var(--color-white); }
    #whats_new .whats_new_group .box .body h3 { margin-top:0px; margin-bottom:var(--spacing-2S); }
    #whats_new .whats_new_group .box .body a { font-size:var(--font-size-1S); }
    #whats_new .whats_new_group .box .label_is { position:absolute; padding:var(--spacing-1S) var(--spacing-2L); top:calc(calc(var(--font-size-2S) * -1) + calc(var(--spacing-1S) * -1)); left:50%; transform:translateX(-50%); font-size:var(--font-size-2S); font-weight:var(--font-weight-bold); text-transform:uppercase; text-align:center; }

    #whats_new .whats_new_group.one_box .box .label_is { padding:var(--spacing-1S) var(--spacing-0);}

    /* shop */
    .directory_group .brand_style_1:not(:last-of-type) { margin-bottom:var(--spacing-3L); }
    .directory_group .brand_style_1.image_left_side { padding-right:var(--spacing-4L); }
    .directory_group .brand_style_1 a.link_as_button { margin-top:var(--spacing-1L); }

    .directory_group .brand_style_1 .body { max-width:500px; }

    #directory_options_1 .container_row_content { padding-bottom:var(--spacing-3L); }
    
    #directory_options_2 { background-color:var(--color-green); }
    #directory_options_2 .container_row_content { padding-top:var(--spacing-3L); padding-bottom:var(--spacing-3L); }

    #directory_options_3 .container_row_content { padding-top:var(--spacing-3L); }

    /* social*/
    #social_feed { color:var(--color-white); text-align:center; background-color:var(--color-red); }
    #social_feed h2 { margin:0px 0px var(--spacing-1S) 0px; color:var(--color-white); }

    #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%;}
    #social_feed ul.social_group .social_icon { position:absolute; top:var(--spacing-2S); right:var(--spacing-2S); color:var(--color-white); z-index:1; }

    #social_feed img.circle_image { position:absolute; height:20vw; z-index:1; }
    #social_feed img.circle_image.top { top:-10vw; right:0px; }
    #social_feed img.circle_image.bottom { bottom:-10vw; left:0px; }
}

@media (max-width:1400px) {

}

@media (max-width:1200px) {

}

@media (max-width:1000px) {
    #whats_new .whats_new_group { grid-template-columns:1fr 1fr; }
    #whats_new .whats_new_group > div:nth-child(3) { display:none; }

    #whats_new .whats_new_group .box .body a { font-size:var(--font-size-0); }

    #directory_options .brand_style_1:not(:last-of-type) { margin-bottom:var(--spacing-1L); }
    #directory_options .brand_style_1.image_left_side { padding-right:0px; }
}

@media (max-width:900px) {
    #directory_options .brand_style_1:not(:last-of-type) { margin-bottom:0px; }
}

@media (max-width:760px) {
    #directory_options .brand_style_1 { grid-template-columns:6fr 4fr; }
    #directory_options .brand_style_1.image_left_side > div:nth-child(1) { order: 1; }
    #directory_options .brand_style_1.image_left_side > div:nth-child(2) { order: 2; }

    #social_feed ul.social_group { grid-template-columns:1fr 1fr 1fr; gap:var(--spacing-2L); }
    #social_feed ul.social_group > li:nth-child(4) { display:none; }
}

@media (max-width:650px) {
    #whats_new .whats_new_group .box .label_is { width:40%; }
}

@media (max-width:600px) {
    #social_feed ul.social_group { grid-template-columns:1fr 1fr; }
    #social_feed ul.social_group > li:nth-child(4) { display:block; }
}