@charset "utf-8";

@font-face {
    font-family: 'reg';
	font-display: swap;
    src: url('/font/AvenirLTStd-Roman.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bold';
	font-display: swap;
    src: url('/font/AvenirLTPro-Heavy.otf');
    font-weight: normal;
    font-style: normal;
}

.brandLandingPage h1, .brandLandingPage h2, .brandLandingPage h3, .brandLandingPage h4, .brandLandingPage h5, .brandLandingPage h6, .brandLandingPage .bannerTitle, .brandLandingPage h2 > span {font-family: bold;}
.brandLandingPage .bannerDesc, .brandLandingPage p, .brandLandingPage p > span, .brandLandingPage a {font-family: reg;font-size: 14px;line-height: 2em;position: relative;}

div.brandRow1 > div > a:first-child .photo div:after {padding-bottom: calc(100vh - 75px);}
div.brandRow1 .bannerTitle {text-transform: uppercase; font-size: calc(3rem + (34 - 26) * ((100vw - 300px) / (1920 - 300))) !important;}

div.imgCtrStatic > div {padding: 0;}

div.brandRow4 {padding: 4em;}
div.brandRow4 > div {grid-gap: 4em;padding: 0; max-width: 90vw; margin: 0 auto;}
div.brandRow4 .bannerView {display: none;}

/* Large Mobile Phones --------------------------------------------------------------- */
@media screen and (max-width:767.9px)
{
    div.brandRow4 {padding: 2em;}
    div.brandRow4 > div {grid-gap: 2em;}
    
    .brandRowTopPick .Banner {border-left: none; border-bottom: 1px solid #DFDFDF;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1023.9px)
{
    div.brandRow4 {padding: 2em;}
    div.brandRow4 > div {grid-gap: 2em;}
    .brandRowTopPick .Banner {border-left: none; border-bottom: 1px solid #DFDFDF;}
}

/* laptops Large ------------------------------------------------------------------------------------- */
@media screen and (min-width:1024px) and (max-width:1439.9px)
{

    div.brandRow4 {padding: 2em;}
    div.brandRow4 > div {grid-gap: 2em;}
}

/* Desktops ------------------------------------------------------------------------------------ */
@media screen and (min-width:1440px) and (max-width:1913.9px)
{
    
}

/* 4K ------------------------------------------------------------------------------------------ */
@media screen and (min-width:1914px)
{
    
}