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


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

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;}

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

.logoHeaderContainer .right img {
	float:right;
}

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

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

    
#small-dialog h2 {font-size: 20px;padding-top:0px;}
#small-dialog p {line-height: 1.45em;font-size: 14px;}

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

body {}

#svg-wrapper, #svg-bg-wrapper {
  visibility:hidden;
}

#svg-wrapper { width: 103%;margin-left: -1%;margin-top: 118px; z-index:99; }

#svg-bg-wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
    top: 180px;
}

#white-rect, #white_text {
    opacity: 1;
}

#white_rect rect {
	fill: #fff;
}

a.popup-with-zoom-anim {	
    position: absolute;
    width: 12%;
    left: 47%;
    bottom: 40px;
	overflow: visible;
}

#box, #click {
	opacity: 0;
}

#svg-gift {
	padding: 20px;
}

svg { 
	overflow: visible;
}

#hearts path, #svg-gift path {
	fill: #00a0b8;
}

#white-bg rect, rect.white-rect {
	fill: #fff;
}

#lt_blue_rect rect {
	fill: #7fdcea;
}

#rect-blue path {
	fill: #091e2d;
}


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


#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 {  }
.svg-wrapper {  }
.svg-wrapper svg {  }

}

/* 0 - 320 -  =========================================================================== */	
@media (max-width: 320px) and (min-width: 0px) {

#svg-gift {
	width: 110px;
	height: auto;
	margin-left: -50px;
}

.logoHeaderContainer .right img {
	width: 70%;
	height: auto;
}

#svg-bg-wrapper {
    top: 193px;
}

#svg-wrapper {
    margin-top: 160px;
}

}

/* 321 - 375 -  =========================================================================== */	
@media (max-width: 375px) and (min-width: 321px) {

#svg-gift {
	width: 110px;
	height: auto;
	margin-left: -50px;
}

.logoHeaderContainer .right img {
	width: 80%;
	height: auto;
}

#svg-bg-wrapper {
    top: 193px;
}

#svg-wrapper {
    margin-top: 125px;
}

}

/* 375 - 411 -  =========================================================================== */	
@media (max-width: 411px) and (min-width: 376px) {

#svg-gift {
	width: 110px;
	height: auto;
	margin-left: -50px;
}

.logoHeaderContainer .right img {

}

#svg-bg-wrapper {
    top: 193px;
}

#svg-wrapper {
    margin-top: 150px;
}

}

/* 411 - 414 -  =========================================================================== */	
@media (max-width: 414px) and (min-width: 411px) {

#svg-gift {
	width: 110px;
	height: auto;
	margin-left: -50px;
}

.logoHeaderContainer .right img {

}

#svg-bg-wrapper {
    top: 193px;
}

#svg-wrapper {
    margin-top: 130px;
}

}


/* 415 - 768 -  =========================================================================== */	
@media (max-width: 768px) and (min-width: 415px) {

#svg-gift {
	width: 140px;
	height: auto;
	margin-left: -50px;
}

.logoHeaderContainer .right img {

}

#svg-bg-wrapper {
    top: 248px;
}

#svg-wrapper {
    margin-top: 185px;
}

#small-dialog {
    max-width: 80%!important;
}

}

/* 769 1024 -  =========================================================================== */	
@media (max-width: 1024px) and (min-width: 769px) {

#svg-gift {
	width: 140px;
	height: auto;
	margin-left: -50px;
}

.logoHeaderContainer .right img {

}

#svg-bg-wrapper {
    top: 313px;
}

#svg-wrapper {
    margin-top: 245px;
}

#small-dialog {
    max-width: 80%!important;
}

}

/*  -  =========================================================================== */	
@media (max-width: 1280px) and (min-width: 1025px) {


#svg-bg-wrapper {
    top: 157px;
}

#svg-wrapper {
    margin-top: 95px;
}


}

/*  -  =========================================================================== */	
@media (max-width: 1366px) and (min-width: 1281px) {


#svg-bg-wrapper {
    top: 117px;
}

#svg-wrapper {
    margin-top: 45px;
}


}

/*  -  =========================================================================== */	
@media (max-width: 1440px) and (min-width: 1367px) {


#svg-bg-wrapper {
    top: 137px;
}

#svg-wrapper {
    margin-top: 65px;
}


}



/* ------------------------------------------------------ */
/* 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; }*/
		
}