﻿@media {
    /* ------------------------------ */
    /* BRAND SPECIFIC STYLES */
    /* ------------------------------ */
    .brand_title { font-size:var(--font-size-0); font-weight:var(--font-weight-bold); }

    /* -- */
    .brand_slider_controls { position:absolute; bottom:var(--spacing-1L); left:50%; transform:translateX(-50%); z-index:10; }
    .brand_slider_controls button { margin:0px var(--spacing-4S); padding:var(--spacing-2S); border-radius:var(--spacing-4S); }

    /* -- */
    .brand_no_announcement { background-position:left center; background-repeat:no-repeat; background-size:contain; background-image:url(https://eu2allwebext.blob.core.windows.net/providencemarketsquare/www/resources/images/common/other/i_pattern_single_purple.png); }
    .brand_no_announcement .container_row_content img { display:block; margin:0px; width:100%; }

    /* -- */
    .brand_split_group { display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-4L); align-items:center; }

    /* -- */
    .brand_fancy_link { display:inline-block; padding-right:var(--font-size-2L); background-position:right center; background-size:var(--font-size-0); background-repeat:no-repeat; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23a32035" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>');}

    /* -- */
    .brand_background_triangle { overflow:hidden; }
    .brand_background_triangle .container_row { z-index:2; }

    .brand_background_triangle:after { content: ""; position: absolute; width: 0px; height: 0px; bottom:0px; left: 0px; border-right: calc(100vh / tan(55deg)) solid transparent; border-bottom: 100vh var(--color-red) solid; }
    .brand_background_triangle:not(.for_hero).right_side:after { left:initial; right:-15vw; border-left:calc(100vh / tan(55deg)) solid transparent; border-right:0px; }

    .brand_background_triangle.for_hero .container_row:after { content: ""; position: absolute; width: 0px; height: 0px; top: 0px; left: 0px; border-right: calc(100vh / tan(55deg)) solid transparent; border-bottom: 100vh var(--color-red) solid; }
    
    .brand_background_triangle.for_hero.right_side:after { display:none; }
    .brand_background_triangle.for_hero.right_side .container_row:after { left:initial; right:-15vw; border-left:calc(100vh / tan(55deg)) solid transparent; border-right:0px; }
    .brand_background_triangle.for_hero.right_side .container_row h1 { right:0px; left:initial !important; }

    .brand_background_triangle.for_hero:after { content: ""; position: absolute; width:22%; height: 0px; top: 0px; left: -10vw;  border-right:0px; z-index:1; }
    .brand_background_triangle.for_hero .container_row:after { width:14%;  } 

    .brand_background_triangle.salmon_triangle:after,
    .brand_background_triangle.for_hero.salmon_triangle .container_row:after { border-bottom: 100vh var(--color-salmon) solid; }

    .brand_background_triangle.purple_triangle:after,
    .brand_background_triangle.for_hero.purple_triangle .container_row:after { border-bottom: 100vh var(--color-purple) solid; }

    /* -- */
    .brand_background_purple,
    .brand_background_purple .ms-view { color:var(--color-white); background-color:var(--color-purple); }

    .brand_background_purple h1,
    .brand_background_purple h2,
    .brand_background_purple h3,
    .brand_background_purple h4, 
    .brand_background_purple h5 { color:var(--color-white); }

    .brand_background_purple a:hover,
    .brand_background_purple a:focus { color:var(--color-white); }
    .brand_background_purple a.brand_fancy_link:hover,
    .brand_background_purple a.brand_fancy_link:focus { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>');}

    .brand_background_purple .input_button:hover,
    .brand_background_purple .input_button:focus,
    .brand_background_purple .link_as_button:hover,
    .brand_background_purple .link_as_button:focus { color:var(--color-white); background-color:transparent; border:1px var(--color-white) solid;  }

    /* -- */
    .brand_background_salmon { color:var(--color-white); background-color:var(--color-salmon); }
    .brand_background_salmon h1,
    .brand_background_salmon h2,
    .brand_background_salmon h3,
    .brand_background_salmon h4, 
    .brand_background_salmon h5 { color:var(--color-white); }

    .brand_background_salmon .input_button:hover,
    .brand_background_salmon .input_button:focus,
    .brand_background_salmon .link_as_button:hover,
    .brand_background_salmon .link_as_button:focus { color:var(--color-white); background-color:transparent; border:1px var(--color-white) solid;  }

    /* -- */
    .brand_background_brown { color:var(--color-white); background-color:var(--color-brown); }
    .brand_background_brown h1,
    .brand_background_brown h2,
    .brand_background_brown h3,
    .brand_background_brown h4, 
    .brand_background_brown h5 { color:var(--color-white); }

    .brand_background_brown .input_button:hover,
    .brand_background_brown .input_button:focus,
    .brand_background_brown .link_as_button:hover,
    .brand_background_brown .link_as_button:focus { color:var(--color-white); background-color:var(--color-dark-brown); border:1px var(--color-white) solid;  }

   /* -- */
   .brand_background_beige { color:var(--color-white); background-color:var(--color-beige); }
   .brand_background_beige h1,
   .brand_background_beige h2,
   .brand_background_beige h3,
   .brand_background_beige h4, 
   .brand_background_beige h5 { color:var(--color-white); }

   .brand_background_beige .input_button:hover,
   .brand_background_beige .input_button:focus,
   .brand_background_beige .link_as_button:hover,
   .brand_background_beige .link_as_button:focus { color:var(--color-white); background-color:var(--color-dark-beige); border:1px var(--color-white) solid;  }
}

@media (max-width:1600px) {

}

@media (max-width:1400px) {
    .brand_background_triangle:not(.for_hero):after { top:-10%; }
    .brand_background_triangle.for_hero:after { top:25%; }

    .brand_background_triangle.for_hero.right_side .container_row h1 { right:var(--spacing-2L); }
}

@media (max-width:1200px) {

}

@media (max-width:1000px) {
    .brand_background_triangle.for_hero:after { top:50%; }
}

@media (max-width:760px) {
    .brand_background_triangle:not(.for_hero):after { top:20%; }

    .brand_announcement_group { grid-template-columns:1fr; }
    .brand_announcement_group > div:nth-child(2) { display:none; }
}

@media (max-width:600px) {

}