/* ------------------------------------------------------ */
/* BAM Holiday Card */
/* ------------------------------------------------------ */


body, html {
	background: #fff;
	padding: 0;
	margin: 0;
	width: 100%;
	font-family: Montserrat, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 300;
	overflow-x:hidden;
}

strong {font-weight:600;}

#small-dialog {border-radius: 5px;}
#small-dialog h2 {font-size: 25px;padding-top:5px;}
#small-dialog p {line-height: 1.5em;font-size: 18px;}
#small-dialog p em {font-size:85%;}
#small-dialog p.small {font-size: 14px;}

svg {
	display: block;
	background: transparent!important;
}


/* ------------------------------------------------------ */
/* 404 page style */
/* ------------------------------------------------------ */

.fourmessage {
	color:#fff;
	font-size:36px;
	text-align:center;
	position:absolute; 
	left:0; right:0;
	top:200px; bottom:0;
	margin:auto;
	max-width:100%;
	max-height:100%;
	overflow:auto;
}

.fourmessage a {color:#fff;}


/* ------------------------------------------------------ */
/*  LOADING SPINNER  */
/* ------------------------------------------------------ */


.spinnerOutter {
	background: #fff;
	position:absolute;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border: 0;		
	z-index: 1000;
}

.spinner {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  -webkit-animation: rotation 1s infinite linear;
  -moz-animation: rotation 1s infinite linear;
  -o-animation: rotation 1s infinite linear;
  animation: rotation 1s infinite linear;
  border: 2px solid rgba(100, 100, 100, 0.2);
  border-radius: 100%;
}

.spinner:before {
  content: "";
  display: block;
  position: absolute;
  left: -2px;
  top: -2px;
  height: 100%;
  width: 100%;
  border-top: 2px solid rgba(100, 100, 100, 0.8);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
	-webkit-transform: rotate(0deg);
  }
  to {
	-webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
	-moz-transform: rotate(0deg);
  }
  to {
	-moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
	-o-transform: rotate(0deg);
  }
  to {
	-o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(359deg);
  }
}

.logoHeaderContainer {
    position: relative;
    margin:15px 0 0 20px;
    z-index:999;
}

.logoHeaderContainer img {
    width:137px;
	height:26px;
}

/*_:-ms-input-placeholder, :root .logoHeader {
	margin-top:-44px;
}*/

/* ------------------------------------------------------ */
/*  GIFTBOX & DIALOG   */
/* ------------------------------------------------------ */

.zoom-anim-dialog {
	z-index: 30;
}

a.popup-with-zoom-anim {
	position:relative;
	display:inline-block;
	width:80px;
	height:100px;
	cursor:pointer;
}
    
#small-dialog h2 {font-size: 20px;padding-top:0px;}
#small-dialog p {line-height: 1.45em;font-size: 14px;}

#firstscrollpoint {
	position:absolute;
	top:30%;
}

#secondscrollpoint {
	position:absolute;
	top:70%;
}
    
.svg-wrapper { display: inline-block; position: relative; vertical-align: top; }
.svg-wrapper svg { display: inline-block; position: absolute; }

body {height:1000px;}
.svg-wrapper { width: 135%; }
.svg-wrapper svg { top: -260px; left: -175px; width:135%; }



/* 375px -  iPhone 8, iPhone X =========================================================================== */	
@media (min-width: 375px) {

body { height:1000px; }
.svg-wrapper { width: 135%; }
.svg-wrapper svg { top: -290px; left: -175px; width:135%; }

}

/* 414px -  iPhone 8+ =========================================================================== */	
@media (min-width: 414px) {

body { height:1000px; }
.svg-wrapper { width: 135%; }
.svg-wrapper svg { top: -250px; left: -175px; width:135%; }

}

/* 768px -  ipad 6 and other tablets  =========================================================================== */	
@media (min-width: 768px) {

body { height:1000px; }
.svg-wrapper { width: 120%; }
.svg-wrapper svg { top: -100px; left: -175px; width:120%; }

.logoHeaderContainer {
    position: absolute;
    margin:30px 0 0 40px;
}

.logoHeaderContainer img {
    width:auto;
	height:auto;
}
}

/* 848px -  ipad 6 and other tablets  =========================================================================== */	
@media (min-width: 848px) {

body { height:1000px; }
.svg-wrapper { width: 115%; }
.svg-wrapper svg { top: -80px; left: -155px; width:115%; }

}


/* 948px -  ipad 6 and other tablets  =========================================================================== */	
@media (min-width: 948px) {

body { height:1000px; }
.svg-wrapper { width: 112%; }
.svg-wrapper svg { top: -60px; left: -135px; width:112%; }

}


/* 1024px - iPad Pro smallest full display =========================================================================== */
@media (min-width: 1024px) {

body { height:1100px; }
.svg-wrapper { width: 110%; }
.svg-wrapper svg { top: -40px; left: -40px; width:110%; }

#small-dialog h2 {font-size: 25px;padding-top:5px;}
#small-dialog p {line-height: 1.5em;font-size: 18px;}
#small-dialog p.small {font-size: 16px;}

}

/* 1124px -  =========================================================================== */	
@media (min-width: 1124px) {

body { height:1100px; }
.svg-wrapper { width: 100%; }
.svg-wrapper svg { top: -30px; left: -20px; width:100%; }

}


/* 1224px -  =========================================================================== */	
@media (min-width: 1224px) {

body { height:1200px; }
.svg-wrapper { width: 100%; }
.svg-wrapper svg { top: 100px; left: 0px; width:100%; }

}


/* 1624px -  =========================================================================== */	
@media (min-width: 1624px) {

body { height:1200px; }
.svg-wrapper { width: 80%;vertical-align: middle; }
.svg-wrapper svg { top: 100px; left: 5%; width:100%; }

}


/* ------------------------------------------------------ */
/* THIS HAS TO STAY AT THE END */
/* ------------------------------------------------------ */

.hide { display: none;}


/*  animated SVG IE fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

/*#svg
	{ fill-opacity:1; stroke-opacity: 1; }*/
		
}