.loadmask {
    z-index: 100;
    position: absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=50);
    background-color: #ccc;
    width: 100%;
    height: 100%;
    zoom: 1;
}
.masked {
    overflow: hidden !important;
}
.masked-relative {
    position: relative !important;
}
.masked-hidden {
    visibility: hidden !important;
}

.loadmask::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
}


@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.loadmask::after {
  content: "";
  position: absolute;
  border-width: 4px;
  border-style: solid;
  border-color: transparent rgb(255, 255, 255) rgb(255, 255, 255);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  animation: 2s linear 0s normal none infinite running spin;
  filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33));
}@font-face {
  font-family: 'altisuite';
  src: url('/cache/web/auto_images/e58399d94a888cd903ddb5b0f59e14f1.eot');
  src: url('/cache/web/auto_images/e58399d94a888cd903ddb5b0f59e14f1.eot') format('embedded-opentype'),
       url('/cache/web/auto_images/a24050adac7160f4acffdb0d0655c8dd.woff2') format('woff2'),
       url('/cache/web/auto_images/e8a297aee26cc35d605d2ae300ffcc28.woff') format('woff'),
       url('/cache/web/auto_images/6f3e446bdcbaabe5c585f8c4430a549e.ttf') format('truetype'),
       url('/cache/web/auto_images/1a71aeee179c86b01ff690149cab04d0.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'altisuite';
    src: url('/cache/web/auto_images/1a71aeee179c86b01ff690149cab04d0.svg') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "altisuite";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}


.icon-droplet:before { content: '\e800'; } /* '' */
.icon-down-open:before { content: '\e801'; } /* '' */
.icon-socket:before { content: '\e802'; } /* '' */
.icon-tool:before { content: '\e803'; } /* '' */
.icon-tools-3:before { content: '\e804'; } /* '' */
.icon-worker:before { content: '\e805'; } /* '' */
.icon-workers:before { content: '\e806'; } /* '' */
.icon-idea:before { content: '\e807'; } /* '' */
.icon-left-open:before { content: '\e808'; } /* '' */
.icon-right-open:before { content: '\e809'; } /* '' */
.icon-up-open:before { content: '\e80a'; } /* '' */
.icon-resize-full-alt:before { content: '\e80b'; } /* '' */
.icon-resize-full:before { content: '\e80c'; } /* '' */
.icon-resize-small:before { content: '\e80d'; } /* '' */
.icon-cogs:before { content: '\e80e'; } /* '' */
.icon-warning:before { content: '\e80f'; } /* '' */
.icon-doc-new:before { content: '\e810'; } /* '' */
.icon-trash:before { content: '\e811'; } /* '' */
.icon-down:before { content: '\e812'; } /* '' */
.icon-left:before { content: '\e813'; } /* '' */
.icon-right:before { content: '\e814'; } /* '' */
.icon-up:before { content: '\e815'; } /* '' */
.icon-shuffle:before { content: '\e816'; } /* '' */
.icon-arrows-cw-1:before { content: '\e817'; } /* '' */
.icon-cw:before { content: '\e818'; } /* '' */
.icon-play:before { content: '\e819'; } /* '' */
.icon-folder-open:before { content: '\e81a'; } /* '' */
.icon-move:before { content: '\e81b'; } /* '' */
.icon-resize-horizontal:before { content: '\e81c'; } /* '' */
.icon-resize-vertical:before { content: '\e81d'; } /* '' */
.icon-wrench:before { content: '\e81e'; } /* '' */
.icon-edit:before { content: '\e81f'; } /* '' */
.icon-view-mode:before { content: '\e820'; } /* '' */
.icon-website:before { content: '\e821'; } /* '' */
.icon-location:before { content: '\e822'; } /* '' */
.icon-cancel:before { content: '\e823'; } /* '' */
.icon-plus:before { content: '\e824'; } /* '' */
.icon-minus:before { content: '\e825'; } /* '' */
.icon-picture:before { content: '\e826'; } /* '' */
.icon-camera:before { content: '\e827'; } /* '' */
.icon-stop:before { content: '\e828'; } /* '' */
.icon-twitter:before { content: '\e829'; } /* '' */
.icon-facebook:before { content: '\e82a'; } /* '' */
.icon-clipboard:before { content: '\e82b'; } /* '' */
.icon-linkedin:before { content: '\e82c'; } /* '' */
.icon-ebay:before { content: '\e82d'; } /* '' */
.icon-amazon:before { content: '\e82e'; } /* '' */
.icon-email:before { content: '\e82f'; } /* '' */
.icon-youtube:before { content: '\e830'; } /* '' */
.icon-gmail:before { content: '\e831'; } /* '' */
.icon-users:before { content: '\e832'; } /* '' */
.icon-user:before { content: '\e833'; } /* '' */
.icon-chart-bar:before { content: '\e834'; } /* '' */
.icon-chart-area:before { content: '\e835'; } /* '' */
.icon-chart-pie:before { content: '\e836'; } /* '' */
.icon-chart-line-1:before { content: '\e837'; } /* '' */
.icon-code:before { content: '\e838'; } /* '' */
.icon-link:before { content: '\e839'; } /* '' */
.icon-picture-1:before { content: '\e83a'; } /* '' */
.icon-align-left:before { content: '\e83b'; } /* '' */
.icon-align-center:before { content: '\e83c'; } /* '' */
.icon-align-right:before { content: '\e83d'; } /* '' */
.icon-sitemap:before { content: '\e83e'; } /* '' */
.icon-gauge:before { content: '\e83f'; } /* '' */
.icon-qrcode:before { content: '\e840'; } /* '' */
.icon-barcode:before { content: '\e841'; } /* '' */
.icon-cc-visa:before { content: '\e842'; } /* '' */
.icon-cc-mastercard:before { content: '\e843'; } /* '' */
.icon-cc-discover:before { content: '\e844'; } /* '' */
.icon-cc-amex:before { content: '\e845'; } /* '' */
.icon-cc-stripe:before { content: '\e846'; } /* '' */
.icon-cc-paypal:before { content: '\e847'; } /* '' */
.icon-login:before { content: '\e848'; } /* '' */
.icon-logout:before { content: '\e849'; } /* '' */
.icon-vimeo:before { content: '\e84a'; } /* '' */
.icon-ie:before { content: '\e84b'; } /* '' */
.icon-paypal:before { content: '\e84c'; } /* '' */
.icon-pinterest-1:before { content: '\e84d'; } /* '' */
.icon-cog:before { content: '\e84e'; } /* '' */
.icon-group:before { content: '\e84f'; } /* '' */
.icon-fire-light:before { content: '\e850'; } /* '' */
.icon-bold:before { content: '\e851'; } /* '' */
.icon-list-bullet:before { content: '\e852'; } /* '' */
.icon-tasks:before { content: '\e853'; } /* '' */
.icon-menu:before { content: '\e854'; } /* '' */
.icon-file-pdf:before { content: '\e855'; } /* '' */
.icon-vcard:before { content: '\e856'; } /* '' */
.icon-megaphone:before { content: '\e857'; } /* '' */
.icon-download-1:before { content: '\e858'; } /* '' */
.icon-upload-1:before { content: '\e859'; } /* '' */
.icon-calendar:before { content: '\e85a'; } /* '' */
.icon-dollar:before { content: '\e85b'; } /* '' */
.icon-chart-pie-1:before { content: '\e85c'; } /* '' */
.icon-chart-bar-1:before { content: '\e85d'; } /* '' */
.icon-chart:before { content: '\e85e'; } /* '' */
.icon-globe:before { content: '\e85f'; } /* '' */
.icon-clock:before { content: '\e860'; } /* '' */
.icon-ok:before { content: '\e861'; } /* '' */
.icon-search:before { content: '\e862'; } /* '' */
.icon-pencil:before { content: '\e863'; } /* '' */
.icon-comment-alt:before { content: '\e864'; } /* '' */
.icon-comment:before { content: '\e865'; } /* '' */
.icon-print-1:before { content: '\e866'; } /* '' */
.icon-phone-1:before { content: '\e867'; } /* '' */
.icon-road:before { content: '\e868'; } /* '' */
.icon-qrcode-1:before { content: '\e869'; } /* '' */
.icon-barcode-1:before { content: '\e86a'; } /* '' */
.icon-bank:before { content: '\e86b'; } /* '' */
.icon-desktop:before { content: '\e86c'; } /* '' */
.icon-laptop:before { content: '\e86d'; } /* '' */
.icon-tablet:before { content: '\e86e'; } /* '' */
.icon-mobile:before { content: '\e86f'; } /* '' */
.icon-globe-1:before { content: '\e870'; } /* '' */
.icon-list-numbered:before { content: '\e871'; } /* '' */
.icon-bold-1:before { content: '\e872'; } /* '' */
.icon-font:before { content: '\e873'; } /* '' */
.icon-italic:before { content: '\e874'; } /* '' */
.icon-truck:before { content: '\e875'; } /* '' */
.icon-eye:before { content: '\e876'; } /* '' */
.icon-eye-off:before { content: '\e877'; } /* '' */
.icon-roller:before { content: '\e878'; } /* '' */
.icon-thumbs-up-light:before { content: '\e879'; } /* '' */
.icon-cd-light:before { content: '\e914'; } /* '' */
.icon-contract:before { content: '\e9bb'; } /* '' */
.icon-new-big-loupe:before { content: '\ea13'; } /* '' */
.icon-wrench-new:before { content: '\ea14'; } /* '' */
.icon-new-worker:before { content: '\ea16'; } /* '' */
.icon-marker-1:before { content: '\ea17'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-money:before { content: '\f0d6'; } /* '' */
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-credit-card-alt:before { content: '\f283'; } /* '' */
.icon-address-card:before { content: '\f2bb'; } /* '' */
.icon-address-card-o:before { content: '\f2bc'; } /* '' */
.icon-id-card:before { content: '\f2c2'; } /* '' */
.icon-id-card-o:before { content: '\f2c3'; } /* '' */
 
 .tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .tooltip_contents {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .tooltip_contents {
    visibility:visible; opacity:1;
}

.tooltip .tooltip_contents i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .tooltip_contents i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.modal_box, .popup_modal_box {
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	min-width: 320px;
	height: auto;
max-height:100%;
	z-index: 10000;
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	overflow: auto;
-webkit-overflow-scrolling:touch;
-webkit-box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.51);-moz-box-shadow:0px -1px 10px rgba(0, 0, 0, 0.51);box-shadow:0px -1px 10px rgba(0, 0, 0, 0.51);

-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s easein;
-webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

.icon-cancel{background:#fff;}
/* popup modal */
.popup_modal_box input[type=text],.popup_modal_box input[type=email] {}
.popup_modal_box .col8{padding:20px;} 

.modal_right_bottom{
	top:initial;
	right:20px;
	bottom:20px;
	left:initial;
	-webkit-transform: translateX(0) translateY(0);
	-moz-transform: translateX(0) translateY(0);
	-ms-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0);
animation: slideInRight .3s;
border-radius: 5px;

}
.modal_left_bottom{
	top:initial;
	left:20px;
	bottom:20px;
	-webkit-transform: translateX(0) translateY(0);
	-moz-transform: translateX(0) translateY(0);
	-ms-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0);
animation: fadeInRight .3s;

}

.modal_top{
	top:0;
	right:0;
	bottom:0;
	left:0;
	-webkit-transform: translateX(0) translateY(0);
	-moz-transform: translateX(0) translateY(0);
	-ms-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0);

}
.modal_bottom{
	top:initial;
	right:0;
	bottom:0;
	left:0;
	-webkit-transform: translateX(0) translateY(0);
	-moz-transform: translateX(0) translateY(0);
	-ms-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0);

}



.modal_box .title, .popup_modal_box .title{margin:-10px 0 0 0;}
.modal_overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	top: 0;
	left: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.4);
	-webkit-overflow-scrolling:touch;
	-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;

}
/* Content styles */
.modal_box .login-modal input, .popup_modal_box .login-modal input{
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;

}
.modal_contents {
	color: #222;
	background: #fff;
	position: relative;
	margin: 0 auto;
	padding:10px;
	height:100%;
}
.modal_default_close {text-align:right;display:block;cursor:pointer;margin:-10px -10px 10px 0;font-size: 20px;position:relative;z-index: 2;}

@media screen and (max-width: 767px){

.popup_image {display:none;}
.modal_right_bottom{top:0;right:5px;left:5px;bottom:initial;}


}



@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes popin {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-ms-keyframes popin {
  0% {
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}






/* ---------- CSS Variables / Theme ---------- */
:root{
  /* Brand */
  --blue-900:#1f344a;   /* darker */
  --blue-800:#2b4662;
  --blue-700:#395473;   /* primary */
  --blue-600:#466786;
  --blue-500:#5b7a9a;
  --blue-200:#cfd8e2;   /* light */
  --blue-100:#e7edf3;   /* very light (almost gray) */
  --blue-050:#f3f6f9;   /* ultra light */

  /* Neutrals */
  --text:#101828;
  --muted:#475467;
  --border:#e4e7ec;
  --bg:#ffffff;
  --shadow: 0 10px 30px rgba(16, 24, 40, .10);

  /* Layout */
  --container: 1200px;
  --gutter: 18px;

  /* Header */
  --header-h: 78px; /* used for spacing & anchor offsets */

  /* Type */
  --font: Roboto;
  --radius: 14px;

  /* Buttons */
  --btn-h: 44px;
}

/* ---------- Minimal Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button,input,select,textarea{ font:inherit; }

/* Make in-page anchors land below the header */
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Reusable Layout Utilities ---------- */
.container{
  width:min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline:auto;
}

.grid{ display:grid; gap: 24px; }
.stack{ display:flex; flex-direction:column; gap: 16px; }

.row{
  display:flex;
  align-items:center;
  gap: 16px;
}

.wrap{ flex-wrap:wrap; }
.center{ justify-content:center; align-items:center; }
.space-between{ justify-content:space-between; }

.text-center{ text-align:center; }
.muted{ color:var(--muted); }


/* container + alignment (same idea as your offers section) */
.tiles--values{
  background:#f6f7f8;
  padding: 90px 20px 110px;
}

.tiles--values .tiles__inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.tiles--values .tiles__kicker{
  margin:0 0 12px;
  letter-spacing:.18em;
  font-weight:700;
  font-size:13px;
  color:#6b7280;
}

.tiles--values .tiles__title{
  font-family: "Bebas Neue", sans-serif;
  margin:0 0 70px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:56px;
  line-height:1.05;
  color:#111827;
}

.tiles--values .tiles__row{
  display:flex;
  justify-content:center;
  gap: 90px;
  flex-wrap:wrap;
}

/* tile */
.tiles--values .tile{
  width: 320px;
  text-align:center;
}

/* Fontello icon wrapper */
.tiles--values .tile__icon{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2b4662; /* icon stroke/color */
}

/* soft halo circle behind icon */
.tiles--values .tile__icon::after{
  content:"";
  position:absolute;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: rgba(203, 189, 169, 0.18);
  top: 18px;
  right: 18px;
  z-index: 0;
}

/* the <i> itself */
.tiles--values .tile__icon i{
  position: relative;
  z-index: 1;
  font-size: 92px;     /* scale the glyph */
  line-height: 1;
  display:block;
}

/* headings/text */
.tiles--values .tile__heading{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .06em;
  font-weight: 800;
  color:#111827;
}

.tiles--values .tile__text{
  margin: 0 auto 22px;
  max-width: 320px;
  color:#6b7280;
  font-size:18px;
  line-height:1.7;
}

/* plus mark */
.tiles--values .tile__mark{
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tiles--values .tile__mark::before{
  content:"+";
  font-size: 34px;
  font-weight: 300;
  color:#111827;
  line-height:1;
}

/* responsive */
@media (max-width: 900px){
  .tiles--values .tiles__title{ font-size:42px; }
  .tiles--values .tiles__row{ gap: 50px; }
  .tiles--values .tile{ width: min(340px, 100%); }
}



/* Section background + centered container */
.offers{
  background:#f6f7f8;
  padding: 90px 20px 110px;
}

.offers__inner{
  max-width: 1200px;  /* controls the “middle” */
  margin: 0 auto;
  text-align: center;
}

/* Header */
.offers .section-kicker{
  margin:0 0 12px;
  letter-spacing:.18em;
  font-weight:700;
  font-size:13px;
  color:#6b7280;
}

.offers .section-title{
font-family: 'Bebas Neue';
  margin:0 0 70px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:56px;
  line-height:1.05;
  color:#111827;
}

/* The 3-card row (this is the key) */
.offers__row{
  display:flex;
  justify-content:center; /* centers the whole trio */
  gap: 20px;              /* space between cards */
  flex-wrap:wrap;
}

/* Cards */
.offer-card{
  width: 360px;                 /* card width like screenshot */
  background:#eef0f2;
  padding: 60px 44px 46px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  text-align:center;
}

/* Icon */
.offer-icon{
  display:flex;
  justify-content:center;
  margin: 0 0 26px;
  color:#0b4a7a;
}

.offer-icon svg{
  width: 64px;
  height: 64px;
}

/* Card text */
.offer-title{
  margin:0 0 14px;
  font-size:16px;
  letter-spacing:.10em;
  font-weight:800;
  color:#111827;
}

.offer-text{
  margin:0 auto 26px;
  max-width: 280px;
  color:#6b7280;
  font-size:18px;
  line-height:1.65;
}

/* dots */
.offer-dots{
  width: 40px;
  height: 10px;
  margin: 0 auto;
  opacity:.55;
  background:
    radial-gradient(circle at 6px 5px, #9aa3af 2px, transparent 3px),
    radial-gradient(circle at 20px 5px, #9aa3af 2px, transparent 3px),
    radial-gradient(circle at 34px 5px, #9aa3af 2px, transparent 3px);
}
.bluebg{
  width:100%;

  background: #2b4662;
  font-family: <##>;
  color:#fff;
  padding:2%;
}
.bluebg h2{
  font-size:3em;
  font-family: "Bebas Neue", sans-serif;
color:#fff;
}

.bluebg p{
  font-size:1em;
color:#fff;
}

/* Icon wrapper works for SVG or font icons */
.offer-icon{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 0 0 26px;
  color:#0b4a7a; /* your blue */
}

/* The pale circle behind the icon */
.offer-icon .icon-bubble{
  position:absolute;
  width:92px;
  height:92px;
  border-radius:999px;
  background: rgba(0,0,0,.035);
  transform: translate(28px,-18px); /* nudge to top-right */
}

/* Fontello icons */
.offer-icon--font i{
  position:relative;
  font-size:72px;   /* match your screenshot size */
  line-height:1;
}

/* Inline SVG icons */
.offer-icon--svg svg{
  position:relative;
  width:72px;
  height:72px;
  fill: currentColor; /* forces SVG to inherit the blue */
}

/* Some of your SVGs have hard-coded fill="#000000".
   This still works because we set color on wrapper AND override fill. */
.offer-icon--svg svg *{
  fill: currentColor;
}


  /* Hide default details marker */
  .offer-expander summary { list-style: none; }
  .offer-expander summary::-webkit-details-marker { display: none; }

  /* Use your existing .offer-plus styling; just turn it into the clickable control */
  .offer-expander__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    margin: 0 auto;
    width: 44px;   /* tweak if your .offer-plus already sets sizing */
    height: 44px;
  }

  /* Default show + */
  .offer-expander__toggle .offer-minus{ display:none; }

  /* When open, show − instead of + */
  .offer-expander[open] .offer-expander__toggle .offer-plus{ display:none; }
  .offer-expander[open] .offer-expander__toggle .offer-minus{ display:inline; }

  /* Panel with list */
  .offer-expander__panel{
    margin: 14px auto 0;
    max-width: 340px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(17,24,39,.12);
    padding: 18px 18px 14px;
    text-align: center; /* matches the screenshot */
  }

  .offer-expander__heading{
    margin: 0 0 12px;
    font-size: 18px;
    color: #111827;
  }

  .offer-expander__content{
    margin: 0;
    color: #6b7280;
    font-size: 18px;
    line-height: 1.75;
  }
  
 /* =========================
   Tabs (match screenshot)
   ========================= */

/* wrapper */
.tabs, .tabss{
	margin:0;
	padding:0;
}

/* tab bar */
.tabs > ul,
.tabss > ul{
	/* layout */
	display:flex;
	gap:12px;                 /* white gaps between tabs like screenshot */
	align-items:stretch;

	/* reset */
	margin:0;
	padding:0;
	list-style:none;

	/* bar background is basically white in screenshot */
	background:transparent;
}

/* each tab */
.tabs > ul li,
.tabss > ul li{
	/* make them equal-width buttons */
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;

	/* sizing */
	padding:26px 18px;
	min-height:78px;

	/* typography */
	text-transform:uppercase;
	letter-spacing:0.5px;
	font-family:'helne-cb', sans-serif;
	font-size:18px;
	font-weight:700;

	/* colors */
	background:#bcd0dd;       /* inactive light blue */
	color:#ffffff;

	/* no default inline behavior */
	margin:0;
	border:0;
	border-radius:0;

	/* smooth */
	transition:background-color .15s linear, color .15s linear, transform .05s linear;
}

/* active tab */
.tabs > ul li.active,
.tabss > ul li.active{
	background:#0b4a78;       /* navy active */
	color:#ffffff;
}

/* hover tab (match style – goes navy) */
.tabs > ul li:hover,
.tabss > ul li:hover{
	cursor:pointer;
	background:#0b4a78;
	color:#ffffff;
}

/* icon support: <i> or inline <svg> */
.tabs > ul li i,
.tabss > ul li i{
	color:currentColor;
	font-size:22px;
	margin-right:14px;
	line-height:1;
}

/* if you use inline SVG icons */
.tabs > ul li svg,
.tabss > ul li svg{
	width:26px;
	height:26px;
	margin-right:14px;
	display:inline-block;
	vertical-align:middle;
	fill:currentColor;        /* makes svg white automatically */
}

/* optional: if you wrap text in a span */
.tabs > ul li span,
.tabss > ul li span{
	display:inline-block;
}

/* content panel */
.tab-content{
	/* border + panel look */
	background:#ffffff;
	border:1px solid #b7cfe3; /* light blue outline like screenshot */

	/* spacing */
	padding:50px 60px;

	/* your existing transitions */
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;
	-webkit-animation:fadein 0.2s;
	animation:fadein 0.2s;
}

/* content typography like screenshot */
.tab-content p,
.tab-content li{
	font-size:22px;
	line-height:1.75;
	color:#666;
}

.tab-content p{
	margin:0 0 34px 0;
}

.tab-content strong{
	color:#555;
	font-weight:800;
}

/* headings inside panels (if used) */
.tab-content h1,
.tab-content h2,
.tab-content h3{
	margin:0 0 20px 0;
	color:#014346;
	text-transform:uppercase;
	font-size:1em;
	font-weight:bold;
}
.inner-space{
margin:2%;
}
/* small screens: let tabs wrap */
@media (max-width: 900px){
	.tabs > ul,
	.tabss > ul{
		flex-wrap:wrap;
	}
	.tabs > ul li,
	.tabss > ul li{
		flex:1 1 240px;
	}
	.tab-content{
		padding:30px 20px;
	}
	.tab-content p,
	.tab-content li{
		font-size:18px;
	}
} 
/* Responsive */
@media (max-width: 900px){
  .offers .section-title{ font-size:42px; }
  .offers__row{ gap: 30px; }
  .offer-card{ width: min(360px, 100%); }
}
/* =========================================
   Photo Callout (image + overlapping box)
   ========================================= */

.photo-callout{
  position: relative;
  width: 100%;
  max-width: 540px;      /* keeps the image from getting too huge in its column */
  overflow: visible;
}

/* image */
.photo-callout > img{
  width: 100%;
  height: auto;
  display: block;
}

/* overlay box: smaller + tucked bottom-right */
.photo-callout__box{
  position: absolute;

  /* tuck it bottom-right with a slight “outside” overlap */
  right: -24px;
  bottom: -24px;

  background: var(--blue-200);
  padding: 28px 30px;

  /* KEY CHANGE: clamp keeps it from becoming gigantic in col6 */
  width: clamp(240px, 55%, 360px);

  box-shadow: var(--shadow);
}

/* text */
.photo-callout__title{
font-family: 'Bebas Neue';
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.12;
  /* slightly smaller so it stays balanced */
  font-size: clamp(20px, 2vw, 30px);
  color: rgba(16,24,40,.88);
}

/* =========================================
   Variant: image on RIGHT, box overlaps toward center
   (bottom-left-ish like your screenshot)
   ========================================= */
.photo-callout--inset-left .photo-callout__box{
  left: -24px;     /* overlap a bit outside image */
  bottom: -24px;   /* overlap downward */
}

/* Optional: if you prefer the box INSIDE the image, not outside */
.photo-callout--inside-left .photo-callout__box{
  left: 18px;
  bottom: 18px;
}

/* =========================================================
   Reusable Sections / Column Grid (AltiSuite editor output)
   Markup:
   <div class="grid">
     <div class="col6">...</div>
     <div class="col6">...</div>
   </div>
   ========================================================= */

/* A page-width constrained grid wrapper */
.page .grid{
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px; /* controls spacing between columns/rows */
}
.page.grid .grid{padding:5% 0;}

.page .col6{
  display: grid;
  align-content: center;
  gap: 16px;
}

.page .col12 h2, .page .col6 h2{
  font-family: "Bebas Neue", sans-serif;
}
/* Section background (apply to .grid.greybg) */
.page .grid.greybg{
  background: var(--blue-050);                 /* light grey/blue wash */
  padding: 64px var(--gutter);
  border-top: 1px solid rgba(16,24,40,.06);
  border-bottom: 1px solid rgba(16,24,40,.06);
  width:100%;
}

/* Section title */
.page .grid.greybg > h2{
  grid-column: 1 / -1;                         /* span full grid width */
  text-align: center;
  margin: 0 0 26px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: rgba(16,24,40,.88);
}

/* 3-column blocks */
.page .col4{ grid-column: span 3; }

/* Make each col3 look like an “icon card” */
.page .grid.greybg > .col4{
  background: transparent;
  text-align: center;
  padding: 22px 18px;
}

/* Optional icon circle (if you place an <img> or <svg> inside col3) */
.page .grid.greybg > .col4 .icon{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  box-shadow: 0 8px 20px rgba(16,24,40,.08);
}
.page .grid.greybg > .col4 .icon img,
.page .grid.greybg > .col4 .icon svg{
  width: 44px;
  height: 44px;
}

/* Card heading + text (if you add h3/p inside each col3) */
.page .grid.greybg > .col4 h3{
  margin: 10px 0 8px;
  font-size: 14px;
  letter-spacing: .06em;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(16,24,40,.88);
}
.page .grid.greybg > .col4 p{
  margin: 0 auto;
  max-width: 36ch;
  color: rgba(71,84,103,.95);
  line-height: 1.6;
}

/* =========================================
   Brands strip
   ========================================= */

.page .brands-section{
  padding: 70px var(--gutter);
  text-align: center;
}

/* If your .col12 is part of a 12-col system */
.page .col12{ grid-column: span 12; }

.page .brands-section .section-title{
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 3.3vw, 54px);
  color: rgba(16,24,40,.88);
}

.page .brands-section .section-subtitle{
  margin: 14px auto 0;
  max-width: 60ch;
  color: rgba(71,84,103,.95);
  font-size: 18px;
  line-height: 1.6;
}

/* Row of figures */
.page .brands-row{
  margin-top: 44px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 22px 56px;
}

/* Kill default figure spacing */
.page .brands-row figure{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The logos */
.page .brands-row img{
  display: block;
  width: clamp(110px, 14vw, 150px);
  max-width: 180px;
  height: auto;

  /* optional: match the muted/monochrome look */
  filter: grayscale(100%);
  opacity: .92;
}

/* optional hover */
.page .brands-row img:hover{
  filter: grayscale(0%);
  opacity: 1;
}

.service-icon {
	width:60px;
	margin:0 auto;
}

/* =========================================
   Contact / Map + Info Cards
   ========================================= */

.contact-block{
  padding: 0;
}

/* Map */
.contact-map{
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  overflow: hidden;
  background: #e9eef5;
}

.contact-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Cards row under map */
.page .contact-cards{
  padding: 38px var(--gutter) 56px;
  row-gap: 22px;
}

/* Card layout */
.info-card{
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 22px;
  align-items: start;
}

/* Icon tile (light gray square) */
.info-icon{
  width: 82px;
  height: 82px;
  background: rgba(0,0,0,.05);
  display: grid;
  place-items: center;
}

.info-icon svg{
  width: 28px;
  height: 28px;
  color: rgba(16,24,40,.8);
}

/* Text */
.info-body h3{
  margin: 2px 0 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(16,24,40,.85);
}

.info-body p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(71,84,103,.95);
}

/* Contact details styling */
.contact-email a{
  color: rgba(71,84,103,.95);
  text-decoration: none;
  border-bottom: 2px solid rgba(16,24,40,.25);
  padding-bottom: 2px;
}

.contact-email a:hover{
  border-bottom-color: rgba(16,24,40,.45);
}

.contact-phone{
  margin-top: 14px;
}

.contact-phone a{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .01em;
  color: rgba(16,24,40,.9);
  text-decoration: none;
}

/* Hours list */
.hours{
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(71,84,103,.95);
}

.hours > div{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
}

.hours dt{
  font-weight: 800;
}

.hours dd{
  margin: 0;
}


/* =========================================
   Contact page: two-column layout
   ========================================= */

.page .contact-layout{
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
  padding-block: 34px 64px;
}

/* Ensure the two col6 behave as halves */
.page .contact-layout > .col6{
  grid-column: span 6;
}

/* Stack columns on mobile */
@media (max-width: 900px){
  .page .contact-layout > .col6{ grid-column: 1 / -1; }
}

/* =========================================
   Left column: Map + info cards (refined)
   ========================================= */

/* Map: slightly taller + clean edges */
.contact-block .contact-map{
  aspect-ratio: 4 / 3;
  min-height: 360px;
  overflow: hidden;
  background: #e9eef5;
}

/* The nested grid inside contact-block should not re-constrain widths.
   Your outer col6 already constrains it, so make this nested grid full width. */
.contact-block .contact-cards{
  width: 100%;
  margin: 0;
  padding: 26px 0 0;   /* space between map and cards */
  gap: 22px;
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
  background:#0f172a; /* deep navy */
  color:#cbd5e1;
  padding-top:70px;
  font-size:15px;
}

/* replace your .footer-inner definition with this */

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 60px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr; /* brand wider */
  gap:60px;
}

/* Responsive */
@media (max-width: 1000px){
  .footer-inner{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
}

@media (max-width: 600px){
  .footer-inner{
    grid-template-columns:1fr;
  }
}
/* Column Titles */
.footer-col h4{
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:22px;
  color:#1f344a;
}

/* Brand */
.footer-logo{
  font-size:22px;
  font-weight:800;
  color:#1f344a;
  margin-bottom:16px;
}

.footer-tagline{
  margin-bottom:22px;
  line-height:1.6;
  color:#94a3b8;
}

/* Links */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:12px;
}

.footer-links a{
  color:#cbd5e1;
  text-decoration:none;
  transition:all .25s ease;
}

.footer-links a:hover{
  color:#1f344a;
  padding-left:6px;
}

/* Hours */
.footer-hours{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-hours li{
  margin-bottom:10px;
  color:#94a3b8;
}

/* Contact mini */
.footer-contact-mini p{
  margin-bottom:10px;
  color:#94a3b8;
}

.footer-contact-mini a{
  color:#cbd5e1;
  text-decoration:none;
}

.footer-contact-mini a:hover{
  color:#ffffff;
}

/* Bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0;
}

.footer-bottom-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}

.footer-bottom p{
  margin:0;
  font-size:14px;
  color:#94a3b8;
}

.footer-legal a{
  color:#94a3b8;
  margin-left:20px;
  text-decoration:none;
  font-size:14px;
}

.footer-legal a:hover{
  color:#ffffff;
}

/* =========================
   Responsive
   ========================= */

.col6 > figure{
  margin: 0;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.col6 > figure > iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#home .page .grid {padding:5% 0;}

.grid .col6 h3 {font-family: 'Bebas Neue';}

@media (max-width: 600px){
  .footer-inner{
    grid-template-columns:1fr;
  }

  .footer-bottom-inner{
    flex-direction:column;
    text-align:center;
  }

  .footer-legal a{
    margin-left:12px;
  }
}

/* Make the 3 items become: 2-up on medium, 1-up on small */
.contact-block .contact-cards .col4{ grid-column: span 4; }
@media (max-width: 1100px){
  .contact-block .contact-cards .col4{ grid-column: span 6; }
}

/* Tighten typography to match reference */
.contact-block .info-body h3{
  font-size: 20px;
  letter-spacing: .04em;
}

/* =========================================
   Right column: form styling (match reference)
   ========================================= */

.contact_form{
  padding-top: 6px;
}

/* Add the big "GET IN TOUCH" heading above the form without changing PHP */
.contact_form::before{
  content: "GET IN TOUCH";
  display: block;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(22px, 4vw, 36px);
  font-family: "Bebas Neue", sans-serif;
  line-height: 1;
  margin: 0 0 16px;
  color: rgba(16,24,40,.92);
}

/* Add the helper line ("* indicates required fields") */
/* 
.contact_form::after{
  content: "\"*\" indicates required fields";
  display: block;
  margin: 0 0 26px;
  font-size: 16px;
  color: rgba(71,84,103,.85);
}
 */

/* Remove the placeholder-hiding you had; keep placeholders subtle instead */
.contact_form ::placeholder{
  color: rgba(71,84,103,.45);
}

/* Your form builder uses .row-column.col6 + .row-column.col12 */
.contact_form form{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
}

/* Kill the builder's clear divs affecting layout */
.contact_form .clear{ display:none; }

/* Place the two half fields */
.contact_form .row-column.col6{ grid-column: span 6; }

/* Full width fields */
.contact_form .row-column.col12{ grid-column: 1 / -1; }

/* Stack on mobile */
@media (max-width: 700px){
  .contact_form .row-column.col6, .grid .col6{ grid-column: 1 / -1; }
}

/* Field wrapper spacing */
.contact_form .field-wrap{
  margin: 0;
}

/* Label style (like the reference) */
.contact_form label{
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  color: rgba(16,24,40,.9);
  margin: 0 0 10px;
}

/* Inputs */
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form textarea{
  width: 100%;
  border: 1px solid rgba(16,24,40,.35);
  border-radius: 3px;
  padding: 14px 14px;
  font-size: 18px;
  background: #fff;
  color: rgba(16,24,40,.92);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Taller textarea like the reference */
.contact_form textarea{
  min-height: 220px;
  resize: vertical;
}

/* Focus: brand tinted */
.contact_form input:focus,
.contact_form textarea:focus{
  border-color: rgba(57,84,115,.75);
  box-shadow: 0 0 0 4px rgba(57,84,115,.14);
}

/* Errors if your system fills .form_error */
.contact_form .form_error{
  margin: 0 0 10px;
  color: #b42318;
  font-weight: 700;
}

/* Submit button: match your site's button look */
.contact_form input[type="submit"].btn{
  grid-column: 1 / -1;
  justify-self: start;

  margin-top: 6px;
  padding: 14px 28px;
  height: auto;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid rgba(57,84,115,.35);
  background: var(--blue-800, #395473);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;

  transition: transform .15s ease, filter .15s ease;
}

.contact_form input[type="submit"].btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
/* Responsive */
@media (max-width: 900px){
  .contact-map{ aspect-ratio: 4 / 3; }
  .info-body p, .hours{ font-size: 18px; }
  .contact-phone a{ font-size: 26px; }
}

@media (max-width: 700px){
  /* if your col system doesn't already stack */
  .page .contact-cards .col4{ grid-column: 1 / -1; }
  .info-card{ grid-template-columns: 72px 1fr; gap: 18px; }
  .info-icon{ width: 72px; height: 72px; }
  .info-body h3{ font-size: 20px; }
  .hours > div{ grid-template-columns: 120px 1fr; }
}

@media (max-width: 650px){
  .page .brands-section{ padding: 46px var(--gutter); }
  .page .brands-row{ margin-top: 28px; gap: 18px 26px; }
  .page .brands-row img{ width: clamp(96px, 34vw, 160px); }
}
/* Columns (12-col system) */
.col6{ grid-column: span 6; }

/* Optional common columns if your editor outputs them later */
.col12{ grid-column: span 12; }
.col4{ grid-column: span 4; }
.col3{ grid-column: span 3; }
.col8{ grid-column: span 8; }

/* Simple spacing helpers (use as needed) */
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:8px !important; }
.mt-2{ margin-top:16px !important; }
.mt-3{ margin-top:24px !important; }
.mb-1{ margin-bottom:8px !important; }
.mb-2{ margin-bottom:16px !important; }
.mb-3{ margin-bottom:24px !important; }

/* ---------- Typography Defaults ---------- */
h1{
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2{
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
}

p{ color:var(--muted); }

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.page-header a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--btn-h);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration:none !important;
  cursor:pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}

.btn-primary{
  background: var(--blue-100);
  color: var(--blue-900);
  border-color: rgba(255,255,255,.35);
}

.btn-primary:hover{
  transform: translateY(-1px);
  background: #ffffff;
}

/* Optional alternate button if you want a solid brand CTA somewhere */
.btn-solid{
  background: var(--blue-700);
  color: #fff;
  border-color: rgba(255,255,255,.15);
}
.btn-solid:hover{
  transform: translateY(-1px);
  background: var(--blue-800);
}

/* ---------- Site Header ---------- */
.site-header{
  position:absolute;            /* lets the hero image run “behind” it */
  top:0;
  left:0;
  right:0;
  z-index: 9999;
  height: var(--header-h);
  display:flex;
  align-items:center;
	height:150px;
  /* readable over hero image */
  background: linear-gradient(to bottom, rgba(16,24,40,.45), rgba(16,24,40,0));
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}
.logo img{
  height: 100px;
  width:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* Header actions area */
.header-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Optional: use this class on pages where you want a solid header background */
.site-header.is-solid{
  position:sticky;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(228,231,236,.8);
}
.site-header.is-solid .main-nav a{
  color: var(--text);
}
.site-header.is-solid .main-nav a:hover{
  background: var(--blue-050);
}
.site-header.is-solid .btn-primary{
  background: var(--blue-700);
  color:#fff;
  border-color: transparent;
}

/* ---------- Main Navigation ---------- */
.main-nav ul{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.main-nav a{
  font-family: "Bebas Neue", sans-serif;

  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 12px;
  color: rgba(255,255,255,.92);
  font-weight: 350;
  font-size: 18px;
  text-decoration:none !important;
  position: relative;
  transition: background .18s ease, color .18s ease;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  background: rgba(255,255,255,.9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  opacity: .9;
}

/* 
.main-nav a:hover{
  background: rgba(255,255,255,.12);
}
 */

.main-nav a:hover::after,
.main-nav a.is-active::after{
  transform: scaleX(1);
}

.main-nav a.is-active{
  background: rgba(255,255,255,.18);
}
/* ---------- Page Layout Wrapper ---------- */
.custom-page{
  /* your .grid already gives you a gap; this adds safe spacing */
  padding-bottom: 48px;
}

/* ---------- Page Header / Hero (STACKED) ---------- */
.page-header{
  position:relative;
  min-height: clamp(560px, 60vh, 680px);
  overflow:hidden;

  /* stacked + centered */
  display:grid;
  place-content:center;          /* centers the stack vertically + horizontally */
  justify-items:center;          /* centers each item horizontally */
  text-align:center;

  /* fallback if no image */
  background: var(--blue-700);
  color:#fff;

  /* Add some breathing room for content within hero */
  padding: calc(var(--header-h) + 40px) var(--gutter) 56px;
}

/* Hero background image */
.page-header > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index: 0;
}

/* Overlay for readability */
.page-header::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(57,84,115,.80); /* brand-tinted overlay */
  z-index: 1;
}

/* Stacked content (targets your h1/h2/a inside .page-header) */
.page-header h1,
.page-header h2,
.page-header a{
  position:relative;
  z-index: 2;
  margin:0;                      /* keep spacing controlled */
}

/* Headline */
.page-header h1{
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.25);
  text-transform: uppercase;
  max-width: 70ch;
  margin-inline:auto;
}

/* Tagline */
.page-header h2{
  max-width: 56ch;
  margin-inline:auto;
  margin-top: 14px;
}

/* CTA button (tuned for hero) */
.page-header a{
  margin-top: 22px;
  background: rgba(255,255,255,.92);
  color: var(--blue-900);
  border-color: rgba(255,255,255,.45);
}
.page-header a:hover{
  background:#fff;
  transform: translateY(-1px);
}

/* Optional: tighten overall content width without extra markup */
.page-header > h1,
.page-header > h2,
.page-header > a{
  max-width: min(900px, 100%);
}

/* ---------- Footer (basic reusable styling) ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  background: var(--blue-050);
  padding: 28px 0;
}
.site-footer .footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 24px;
}
.site-footer p,
.site-footer a{ color: var(--muted); }

/* =========================================
   Slider (cleaned, compatible)
   ========================================= */

#slides{
  position: relative;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--blue-900);
}

/* slide stack */
#slides .slide{
  position: absolute;
  inset: 0;               /* replaces width/height/pos rules */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* overlay */
#slides .slide::after{
  content:"";
  position:absolute;
  inset:0;
/*   background: rgba(57,84,115,.55); */
  background: rgba(255,255,255,.55);
  pointer-events:none;
}

/* clickable wrapper (if you wrap slides in <a>) */
#slides .slide-link{
  position:absolute;
  inset:0;
  display:block;
}

/* inner layout */
#slides .slide .grid{
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-items: center;     /* vertical center */
}

/* content area */
#slides .slider-content{
  width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 48px) var(--gutter) 72px;
}

#slides .area{
  width: min(920px, 100%);
}

/* typography */
#slides h1{
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(34px, 4.8vw, 74px);
  /* your PHP sets inline color; this is a fallback */
  color: #0f4a73;
  text-shadow: 0 10px 26px rgba(0,0,0,.18);
}

#slides h2{
  margin: 14px 0 0;
  font-weight: 600;
  font-size: clamp(16px, 2.0vw, 22px);
  line-height: 1.4;
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 18px rgba(0,0,0,.18);
}

#slides .slide_copy{
  margin-top: 16px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

/* buttons inside slides: keep your .btn styles, just normalize spacing */
#slides .area .btn{
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* optional: foreground image */
#slides .slider-content > img{
  max-width: min(260px, 45vw);
  height: auto;
  margin-bottom: 18px;
}

/* pager (if you enable it later) */
#slides .slide-pager{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 50;
  display: flex;
  justify-content: center;
}

#slides ul.slidepg{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 10px;
}

#slides ul.slidepg li{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 0;
  transition: transform .18s ease, background .18s ease;
}

#slides ul.slidepg li.active{
  background: rgba(255,255,255,.95);
  transform: scale(1.2);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #slides *{
    animation: none !important;
    transition: none !important;
  }
}

/* mobile */
@media (max-width: 700px){
  #slides{ min-height: 460px; }
  #slides .slider-content{ padding: calc(var(--header-h) + 32px) var(--gutter) 56px; }
  #slides .slide_copy{ font-size: 16px; }
}

/* ---------- Responsive Behavior ---------- */
@media (max-width: 900px){
  :root{ --header-h: 74px; }

  .header-inner{
    flex-wrap:wrap;
    gap: 12px;
  }

  /* Stack nav on its own row; allow horizontal scroll without changing markup */
  .main-nav{
    width: 100%;
    order: 3;
  }
  .main-nav ul{
    gap: 8px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .main-nav a{
    background: rgba(255,255,255,.10);
  }

  .header-actions{
    order: 2;
    margin-left:auto;
  }

  .logo img{ height: 40px; }

  .page-header{
    min-height: 56vh;
    padding: calc(var(--header-h) + 32px) var(--gutter) 44px;
  }
}

@media (max-width: 520px){
  .btn-primary{
    padding-inline: 14px;
  }

  .main-nav a{
    font-size: 13px;
    padding: 0 10px;
  }

  .page-header h2{
    color: rgba(255,255,255,.9);
  }
}


/* Mobile: stack (box becomes below image) */
@media (max-width: 700px){
  .photo-callout__box{
    position: static;
    width: 100%;
    margin-top: 14px;
    padding: 22px 20px;
  }
}
/* ---------- Optional: Accessible focus ---------- */
:focus-visible{
  outline: 3px solid rgba(207,216,226,.95);
  outline-offset: 3px;
  border-radius: 10px;
}@charset "UTF-8";.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);-ms-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);-ms-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);-ms-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);-ms-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);-ms-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);-ms-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);-ms-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);-ms-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);-ms-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);transform:perspective(400px)translateZ(0)rotateY(0)scale(1)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1)}50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95)}80%,100%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1)}}@keyframes flip{0%{-webkit-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);-ms-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);transform:perspective(400px)translateZ(0)rotateY(0)scale(1)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);-ms-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1)}50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-ms-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);-ms-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95)}80%,100%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);-ms-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1)}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg)}70%{-webkit-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg)}100%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}}@keyframes flipInX{0%{-webkit-transform:perspective(400px)rotateX(90deg);-ms-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateX(-10deg);-ms-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg)}70%{-webkit-transform:perspective(400px)rotateX(10deg);-ms-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg)}100%{-webkit-transform:perspective(400px)rotateX(0);-ms-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}70%{-webkit-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}100%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}}@keyframes flipInY{0%{-webkit-transform:perspective(400px)rotateY(90deg);-ms-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateY(-10deg);-ms-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}70%{-webkit-transform:perspective(400px)rotateY(10deg);-ms-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}100%{-webkit-transform:perspective(400px)rotateY(0);-ms-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px)rotateX(0);-ms-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateX(90deg);-ms-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px)rotateY(0);-ms-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateY(90deg);-ms-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%)skewX(30deg);transform:translateX(-20%)skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%)skewX(-15deg);transform:translateX(0%)skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%)skewX(-30deg);-ms-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%)skewX(30deg);-ms-transform:translateX(-20%)skewX(30deg);transform:translateX(-20%)skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%)skewX(-15deg);-ms-transform:translateX(0%)skewX(-15deg);transform:translateX(0%)skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%)skewX(0);-ms-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}100%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%)skewX(0);-ms-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}100%{-webkit-transform:translateX(100%)skewX(-30deg);-ms-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-ms-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0)}0%,20%,60%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg)}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}40%,80%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg)translateY(0);transform:rotate(60deg)translateY(0);opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}@keyframes hinge{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}0%,20%,60%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg)}40%{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}40%,80%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg)translateY(0);-ms-transform:rotate(60deg)translateY(0);transform:rotate(60deg)translateY(0);opacity:1}100%{-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);transform:translateX(-100%)rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);-ms-transform:translateX(-100%)rotate(-120deg);transform:translateX(-100%)rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0)rotate(0);-ms-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%)rotate(120deg);transform:translateX(100%)rotate(120deg)}}@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0)rotate(0);-ms-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%)rotate(120deg);-ms-transform:translateX(100%)rotate(120deg);transform:translateX(100%)rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}
.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}
.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 		
}

@keyframes pullUp {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullUp {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}