/* cmsms stylesheet: default_smalltablet modified: 07/07/25 10:52:38 */
body {
  font-family: "europa", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 105%;
  font-variation-settings:
    "wdth" 100;
  line-height: 165%;
  color: #55555a;
  margin:  0px;
  padding:  0px;
  border-top: 4px solid #858585;
  background-color: #f4f4f6;
}

p {
    margin: 0px 0px 15px 0px;
}

h1 {
    font-weight: 400;
    font-size: 150%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
    color: #ba9b95;
    text-transform:  uppercase;
    font-family: "classico-urw", sans-serif;
}

.narrowColumn h1 {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    font-weight: 500;
    font-size: 170%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
}

h3 {
    text-transform:  uppercase;
    font-family: "classico-urw", sans-serif;  
  font-weight: 400;
    font-size: 120%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
    color:  #f8c039;
}

h4 {
    font-weight: 500;
    font-size: 120%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
}

h5 {
    font-size: 130%;
    line-height: 120%;
    font-weight: 500;
    margin: 0px 0px 30px 0px;
}

h6 {
    font-size: 110%;
    line-height: 120%;
    font-weight: 500;
     margin: 0px 0px 30px 0px;
}

a:link,
a:visited {
    color: #55555a;
    text-decoration: underline;
    transition: color 0.4s, background-color 0.4s;
}

a:hover {
    color: #426b69;
    text-decoration: none;
}

a img {
    border: 0px;
}

/* IDs */

#sideNavBack {display:none;position:  fixed;right:  0px;top:  0px;height:  100%;width: 100%;background-color: #ffffff75;z-index: 9999;text-align:  center;}

#sideNav {transition: right 0.4s; position:  absolute;right: -340px;width: 340px;background-color: #9999a1;height:  100%;box-sizing:  border-box;padding: 80px 30px 0px 30px;}

#sideNavClose {
    font-size: 70%;
    position:  absolute;
    top:  20px;
    right:  20px;
    color:  #ffffff;
    transition: color 0.4s;
    cursor:  pointer;
}

#sideNavClose:hover {
    color: #605d5e;
}

.sideNavOn {
    right: 0px !important;
}

#outerHeader {

}

#heroImage {position:  absolute;top: 28px;left:  0px;right:  0px;text-align:  center;z-index: 1;width:  100%;overflow:  hidden;}

#otherHeroImage {position:  absolute;top: 28px;left:  0px;right:  0px;text-align:  center;z-index: 1;max-width:  100%;overflow: hidden;}

#imageHolder {
    display: table;
    margin: 0px auto;
    width: 200%;
   margin-left: -50%;
    height: 263px;
    overflow: hidden;
    position:  relative;
}

#imageHolder img {
    position: absolute;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
;
    width:  1200px;
    height:  auto;
}

#iframeHolder {
    display: table;
    margin: 0px auto;
    width: 200%;
    margin-left: -50%;
    height: 503px;
    overflow: hidden;
    position:  relative;
}

#iframeHolder img {
    width: 1000px;
    height: auto;
    position:  absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index:  1;
    top: -60px;
}

#iframeHolder iframe {
    width: 1000px;
    height: 563px;
    position:  absolute;
    left: 50% !important;
    transform: translate(-50%, 0%);
    top: -60px;
    z-index:  2;
}


#top {

}

#innerHeader {position:  relative;z-index: 2;}

#innerHeaderTop {

}

#innerHeaderTop  > *{
flex:1;
}

#socials {position: relative;top: 40px;display:  flex;gap:  10px;}

#socials a:link, #socials a:visited {
  position:relative;
top: 0px;
transition: top 0.4s;}

#socials a:hover {
  top: -3px;
}

#logo {

}

#logo a {display: table;position: relative;top: -4px;margin: 0px auto;}

#logoBack {
  position: relative;
  z-index:1;
  width: 180px;
  height:  auto;
}

#logoShield {
  position: absolute;
  z-index:2;
  left: 70px;
  top: 13px;
  width: 40px;
  height:  auto;
}

#menuHolder {}

#menuShow {
  position:  relative;
  top: 40px;
  color: #ffffff;
  gap:  10px;
  cursor: pointer;
  margin-left: auto;
  float:  right;
  transition: top 0.4s;
}

#menuShow:hover {
  top: 37px;
}

#menuText {
    font-family: "classico-urw", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 140%;
    text-transform:uppercase;
    line-height: 100%;
    position:  relative;
    top: -3px;
  transition: color 0.4s;
}

#menuShow:hover #menuText {
  color: #1d1d20;
}

.bar {
background-color:  #ffffff;
display:  block;
margin-bottom: 7px;
height: 3px;
width: 30px;
margin-left:  auto;
  transition: background-color 0.4s;
}

.wideBar {
  width: 35px !important;
}

#menuShow:hover .bar {
  background-color: #1d1d20;
}

#innerHeaderMiddle {text-align:  center;color: #ffffff;height: 150px;}

#otherInnerHeaderMiddle {text-align:  center;color: #ffffff;height: 90px;}

#bramptonText {
              font-family: "classico-urw", sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 300%;
              line-height: 100%;
              text-transform: uppercase;
              text-align: center;
              text-shadow: 2px 2px 3px rgba(0,0,0,0.77);
              padding-top: 10px;
              }

#bramptonText span {
  display: block;
}

#smallBramptonText {
              font-family: "classico-urw", sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 200%;
              line-height: 100%;
              text-transform: uppercase;
              text-align: center;
              text-shadow: 2px 2px 3px rgba(0,0,0,0.77);
              padding-top: 1px;
}

#smallBramptonText span {
  display: block;
}

#innerHeaderBottom {height: 280px;/* flex-direction:  column; */display:  block;}

#otherInnerHeaderBottom {height: 102px;}

#strapline {

width: 666px;

text-align:  center;

font-size: 200%;

color: #ffffff;

text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.77);

line-height:  150%;
}

#strapline strong {
  font-family: "blithe", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 165%;
  color:  #ffe1eb;
}

#moreJumper {display:  table;margin:  0px auto;position:  relative;top: -30px;width:  118px;cursor:  pointer;}

#moreJumper img {
    position:  absolute;
    z-index: 1;
}

#moreJumper span {
    position:  relative;
    z-index: 2;
    text-align:  center;
    display:  block;
    color: #ffffff;
    font-size: 110%;
    padding-top: 5px;
}

#mainContent {

}

#innerMainContent {

}

#videoLaunch {

}

#footerGallery {
    display: table;
    margin: 0px auto;
}

#innerFooterGallery {display: grid;gap: 20px;width: 680px;height: 681px;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;overfl,list-style: korean-hangul-formal;}

#outerFooter {
text-align:  center;
padding-top:  80px;
font-size:  85%;
color: #a7a7ae;
}

#outerFooter img {
    display: inline-block;
    margin-bottom: 40px;
}

#outerFooter a:link, #outerFooter a:visited{ color: #a7a7ae; transition: color 0.4s;}

#outerFooter a:hover {
    color: #55555a;
}

/* end IDs */

:root {
    --column-unit: 86px; /* Base width of a single column */
    --gap: 20px;         /* Space between columns */
    --bigGap: 40px;
}

.columnContainer {
    display: flex;
    gap: var(--gap); /* Space between columns */
    box-sizing: border-box;
}

.columnContainer > * {
    box-sizing: border-box;
}

.narrowColumn {
    width: 600px;
    margin: 0px auto;
}

/* Hardcoded column widths */
.oneColumn {
    flex: 0 0 calc(var(--column-unit));
}

.twoColumn {
    flex: 0 0 calc((var(--column-unit) * 2) + var(--gap));
}

.threeColumn {
    flex: 0 0 calc((var(--column-unit) * 3) + (var(--gap) * 2));
}

.fourColumn {
    flex: 0 0 calc((var(--column-unit) * 4) + (var(--gap) * 3));
}

.fiveColumn {
    flex: 0 0 calc((var(--column-unit) * 5) + (var(--gap) * 4));
}

.sixColumn {
    flex: 0 0 calc((var(--column-unit) * 6) + (var(--gap) * 5));
}

.sevenColumn {
    flex: 0 0 calc((var(--column-unit) * 7) + (var(--gap) * 6));
}

.eightColumn {
    flex: 0 0 calc((var(--column-unit) * 8) + (var(--gap) * 7));
}

.nineColumn {
    flex: 0 0 calc((var(--column-unit) * 9) + (var(--gap) * 8));
}

.tenColumn {
    flex: 0 0 calc((var(--column-unit) * 10) + (var(--gap) * 9));
}

.elevenColumn {
    flex: 0 0 calc((var(--column-unit) * 11) + (var(--gap) * 10));
}

.twelveColumn {
    flex: 0 0 calc((var(--column-unit) * 12) + (var(--gap) * 11));
}

.thirteenColumn {
    flex: 0 0 calc((var(--column-unit) * 13) + (var(--gap) * 12));
}

.fourteenColumn {
    flex: 0 0 calc((var(--column-unit) * 14) + (var(--gap) * 13));
}

.allSpaceColumn {
    justify-content: space-between !important;
    gap: 0 !important;
}

/* links and buttons  */

a.blockButton:link, a.blockButton:visited, span.blockButton {
  display:  block;
  height: 40px;
  min-width:  100px;
  background-color:  #ffffff;
  color: #426b69;
  box-sizing:  border-box;
  text-decoration:  none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  line-height:  100%;
  padding: 9px 10px 0px 10px;
  font-size: 115%;
  font-weight: 300;
  position: relative;
  top: 0px;
  transition: padding-top 0.4s, background-color 0.4s, top 0.4s, color 0.4s;
  cursor: pointer;
}


a.blockButton:hover, span.blockButton:hover  {
  padding-top: 8px;
  background-color: #b1bac3;
  color: #ffffff;
  top: -4px;
}

.borderButton {
border: 1px solid #545454;
}

.buttonBank {display:  flex;gap: 20px;margin:  auto;width: 330px;height: 70px;}

.capsButton {
text-transform:  uppercase;
    font-family: "classico-urw", sans-serif;
    font-weight: 400;
}

/* links and buttons  */

/*  misc classes */



.justified {
    text-align:  justify;
}

.standardVerticalPadder {
    padding: var(--bigGap) 0px; 
}

.smallLogo {

+margin-bottom:  50px;+margin-bottom:  50px;+margin-bottom:  50p;+margin-bottom:  50;+margin-bottom:  5;+margin-bottom: ;margin-bottom: 30px;}

.bottomPadder {

}

.bramptonFeature {
    display:  flex;
    flex-direction:  column;
    gap: 0px;
    margin-bottom: 30px !important;
}

.inverted {/* flex-direction: row-reverse; */}

.bramptonFeatureImage {
line-height:  0px;
    flex:2;
}

.bramptonFeatureImage img {
    width: 100%;
    height: auto;
}

.bramptonFeatureText {padding: 40px;text-align:  justify; flex:1;}

.bramptonFeatureText h3 {
  display: table;
  margin: 0px auto 30px auto;
}

.centreButton {
               display:  table!important;
               margin: 10px auto 0px auto;
               }

.columnContainer {

}

.featureSection {

}

.footerGalleryGrid {display:  flex;gap: 20px;height: 330px;width: 330px;position:  relative;overflow:  hidden;}


.gallerydouble {position: absolute;bottom: 0px;overflow: hidden;height: 155px;width: 341px;}

.gallerySingle {
    position: relative;
    overflow: hidden;
    width: 155px;
    height: 155px;
}

.gallerydouble img, .gallerySingle img  {
    position: absolute;
      top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallerySingle img.landscape  {
    height: 100%;
    width: auto;
} 

.gallerySingle img.portrait, .gallerySingle img.square, .gallerydouble img.square, .gallerydouble img.landscape, .gallerydouble img.portrait {
    height: auto;
    width: 100%;
} 

.invertedGrid {
align-items: flex-end;     
}

.invertedGrid .gallerydouble {
    top: 0px;
    bottom: auto;
}

.inner {width: 680px;margin:  0px auto;}

.outer {

}

.outerSpaceColumns {

}

.testimonial {
padding: 80px 0px;
}

.testimonial blockquote {width: 600px;margin: 0px auto;text-align: center;font-family: "blithe", sans-serif;font-weight: 400;font-style: normal;font-size: 175%;color:  #9999a1;line-height: 180%;}

.testimonial cite {
    text-align: center;
    display:  block;
    color: #9999a1;
    text-decoration:  none;
    font-style:  normal;
    font-size: 80%;
    padding-top: 20px;
}


 .testimonial cite a:link, .testimonial citea:visited {
      color: #9999a1;
 }

/* end misc classes */

.cadetGreyBack {
background-color: #8d969f ;
color: #ffffff;
}

.cadetGreyFront {
color: #8d969f ;
}

.taupeGreyBack {
  background-color: #909092;
  color: #ffffff;
}

.taupeGreyFront {
  color: #909092;
}

.rosyBrownBack {
  background-color: #bc9b96;
  color: #ffffff;
}

.rosyBrownBack h3 {
  color: #ffffff; 
}

.rosyBrownFront {
  color: #bc9b96;
}

.sunsetBack {
  background-color: #f0cea0;
  color: #55555a;
}

.sunsetBack h3 {
  color: #55555a;
}

.sunsetFront {
  color: #f0cea0;
}

.myrtleGreenBack {
  background-color: #436d6b;
  color: #ffffff;
}

.myrtleGreenBack h3 {
  color: #ffffff;
}

.myrtleGreenFront {
  color: #436d6b;
}

.taupeBack {
  background-color: #4b3e35;
  color: #ffffff;
}

.taupeFront {
  color: #4b3e35;
}

.antiflashWhiteBack {
  background-color: #f4f4f6;
  color: #000000;
}

.antiflashWhiteFront {
  color: #f4f4f6;
}

.mimiPinkBack {
  background-color: #f8d7de;
  color: #000000;
}

.mimiPinkFront {
  color: #f8d7de;
}

#videoWindow {position:  fixed;top:  0px;left:  0px;width:  100%;height: 100%;background-color: #ffffffb5;z-index: 99999999;display:  none;}

#closeVideoWindow {width: 720px;margin: 0px auto;text-align:  right;padding-top: 50px;font-size:  200%;font-weight:  800;}

#innerVideoWindow {
                   width: 720px;
                   margin: 0px auto;
                   padding-top: 50px;
}

#bramptonVideoAdvert {width: 720px;height: 410px;}

/*
cadetGrey 8d969f
taupeGrey 909092
rosyBrown bc9b96
sunset f0cea0
myrtleGreen 436d6b
taupe 4b3e35
antiflashWhite f4f4f6 
mimiPink f8d7de

Europa-Light Light
font-family: "europa", sans-serif;
font-weight: 300;
font-style: normal;

Europa-Regular Regular
font-family: "europa", sans-serif;
font-weight: 400;
font-style: normal;


Europa-Bold Bold
font-family: "europa", sans-serif;
font-weight: 700;
font-style: normal;

Classico URW Regular
font-family: "classico-urw", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "blithe", sans-serif;
font-weight: 400;
font-style: normal;

*/