/* BASE STYLES */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  /* 62.5% so REM measurements are based on 10px sizing. Example...1.5rem = 15px :) */
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body, .main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--bodycolor);
}

.main {position: relative;}

:root {
  /* COLORS */
  --bodycolor: #FFF3D5;
  --bodycolor-dark: #FFC499;
  --alertbarcolor: #FFE588;
  --red: #C01F24;
  --maroon: #7B1F4B;
  
  /* MODAL */
  --white: #FFF;
  --black: #000;

  /* LINKS */
  --link-color: pink;
  --link-hover-color: yellow;

  /* BORDER RADIUS */
  --borderradius-small: 16px;
  --borderradius-bottom-small: 0 0 16px 16px;
  --borderradius-large: 24px;
  --borderradius-top-large: 24px 24px 0 0;
}

/* GRADIENTS */
.gradient-locations     {background: linear-gradient(170deg, #B3F6FF 18.51%, #FCE670 92.75%);}
.gradient-services      {background: linear-gradient(170deg, #FFEDAA 18.51%, #FFAAAE 92.75%);}
.gradient-newsandevents {background: linear-gradient(170deg, #FFBBF0 18.51%, #EDE7FC 92.75%);}
/* GRADIENTS */

/* IFRAME / VIDEO */
iframe {width: 100%;}

video {
  width: 100%;
  height: auto;
  max-height: 100%;
}

.video figure {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  margin: 0;
}

.video figure img {margin-top: -56.25%;}

.video figure iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}