/* ------------------------------------------------------ */
/* Loring Ward and BAM Alliance Holiday Card */
/* ------------------------------------------------------ */

.sr { visibility: hidden; }
.srAni { visibility: hidden; }

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

strong {font-weight:600;}

#small-dialog h2 {font-size: 25px;padding-top:5px;}

#small-dialog p {line-height: 1.5em;}


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

#small-dialog {
	border-radius: 5px;
}

/* ------------------------------------------------------ */
/* 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: #22a2cd;
	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(255, 255, 255, 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(255, 255, 255, 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);
  }
}


/* ------------------------------------------------------ */
/*  SNOW DIV   */
/* ------------------------------------------------------ */

.sky {
	position:absolute;
	width: 100vw;
	height: 100vh;
	color: #FFF;
	display: block;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border: 0;	
	z-index: 10;
}


/* ------------------------------------------------------ */
/*  HAPPY HOLIDAYS   */
/* ------------------------------------------------------ */


.greetingMessageOutter {
	width: 100%;
	max-width:1300px;
	margin: 0 auto;
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.greetingMessageInner {
	width: 95%;
	max-width:1300px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 30px;
}	

.happyHolidaysContainer {
	margin:0 auto;
	position: relative; 
	width:70%;
}

.happyHolidays path {
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  animation-duration: 4.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-delay: 1s;

}

.happyHolidays {
  fill-opacity:0;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-delay: 4.5s;
  stroke-width: 2px;
}	

.startAnimation .happyHolidays path {
  animation-name: greetingsDraw;
}	

.startAnimation .happyHolidays {
  animation-name: greetingsFill;
}

.happyHolidays .cls-1 { fill:#fff; }
.happyHolidays .cls-2 { fill:none; stroke:#fff;  stroke-miterlimit:10; } 


@keyframes greetingsDraw {
  
  100% {
	  stroke-dashoffset: 0px;
  }
}

@keyframes greetingsFill {
  
  100% {
	  fill-opacity:1;
	  stroke-width: 1px;
  }
}


/* ------------------------------------------------------ */
/*  LWBAM TEXT   */
/* ------------------------------------------------------ */


.lwbam path {
  stroke-dasharray: 1000px;
  stroke-dashoffset: 1000px;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
  animation-delay: 1s;
}

.startLWBAMAnimation .lwbam path {
  animation-name: lwbamDraw;
}	
	
.lwbam .cls-1 {fill:none;stroke:#FFFFFF;stroke-width:.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

@keyframes lwbamDraw {
  
  0% {
    fill: #22a2cd;
  }
  80% {
    fill: #fff;
    stroke-dashoffset: 0;
  }
  100% {
    fill: #fff;
    stroke-dashoffset: 0;
  }
}


/* ------------------------------------------------------ */
/*  FROM TEXT   */
/* ------------------------------------------------------ */


.fromOutter {
	width: 45%;
	max-width:800px;
	padding-bottom: 4%;
	position: relative;
	margin: 1% 22% 0 auto;
	transition: 1s opacity ease-out;
}

.fromText {
	text-align:center;
	font-size: 19px;
	letter-spacing:.03em;
	margin: -2.6% 0 0 -19%;
	text-transform:lowercase;
	opacity: 0;
	transition: 1s opacity ease-out;
}	


/* ------------------------------------------------------ */
/*  SANJOSE AND STLOUIS DRAWING   */
/* ------------------------------------------------------ */


.citiesbottomborder {	
	opacity: 0;
   position: relative;
}

.citiesbottomborder.goOpacity .animline {	
	fill: none;
  	stroke: #fff;
  	stroke-width: 3;
  	animation: expand-from-center 1s linear forwards;
}	

@keyframes expand-from-center
{
  from {
    stroke-dasharray: 0 1200;
    stroke-dashoffset: -600;
  }
  
  to {
    stroke-dasharray: 1200 1200;
    stroke-dashoffset: 0;
  }
}

.cities {
	width: 100%;
	padding-bottom: 6%;
	position: relative;
	margin: 0 auto;
	height:100px;
	max-width:1100px;
	transition: 1s opacity ease-out;
}	

.sanjose-container, .stlouis-container {
	float:left;
	width: 48%;
	margin-right:4%;
	height: 100px;
}

.stlouis-container {
	margin-right:0;
}

.sanjose, .stlouis {
	position:absolute;
	bottom:-1px;
	width: 48%;
}

.sanjose path, .sanjose line, .sanjose polygon, .sanjose rect, .sanjose circle, .sanjose polyline,
.stlouis path, .stlouis line, .stlouis polygon, .stlouis rect, .stlouis circle, .stlouis polyline {
  stroke-dasharray: 6900px;
  stroke-dashoffset: 6900px;
  animation-duration: 13s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
  animation-delay: 1s;
}

.startCityAnimation .sanjose path, .startCityAnimation .sanjose line, .startCityAnimation .sanjose polygon, .startCityAnimation .sanjose rect, .startCityAnimation .sanjose circle, .startCityAnimation .sanjose polyline,
.startCityAnimation .stlouis path, .startCityAnimation .stlouis line, .startCityAnimation .stlouis polygon, .startCityAnimation .stlouis rect, .startCityAnimation .stlouis circle, .startCityAnimation .stlouis polyline {
  animation-name: cityDraw;
}	
	
.sanjose .cls-1, .stlouis .cls-1 {fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

@keyframes cityDraw {
  
  0% {
    fill: #22a2cd;
  }
  50% {
    fill: #22a2cd;
    stroke-dashoffset: 0;
  }
  100% {
    fill: #22a2cd;
    stroke-dashoffset: 0;
  }
}



@media all and (max-width: 1050px) {
	
.fromText {font-size: 16px;}			
		
}

@media all and (max-width: 920px) {
	
		
}	


@media all and (max-width: 500px) {
			
.fromOutter {
	width: 80%;
	padding-top: 10%;
}

.cities {width: 100%;}			

.fromText {font-size: 14px;}				
	
}	

/* ------------------------------------------------------ */
/*  MUSIC BUTTON   */
/* ------------------------------------------------------ */

.muteOutter {
	position: fixed;
	bottom: 20px;	
	z-index: 500;
	width: 30px;
	height: 35px;	
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
}

.button {
  border: 0;
  box-sizing: border-box;
  width: 0;
  height: 30px;
  border-color: transparent transparent transparent rgba(255,255,255, .5);
  transition: 100ms all ease;
  cursor: pointer;
}

.button.play {
  border-style: double;
  border-width: 0px 0 0px 22px;
}

.button.paused {
  border-style: solid;
  border-width: 15px 0 15px 30px;
}

.muteOutter:hover .button {
  border-color: transparent transparent transparent rgba(255,255,255, .9);
}

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

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

.giftBox {
	position: fixed;
    bottom: 80px;
	z-index: 20;
    left: 47%;
    transform: translateX(-47%);
	opacity: 0;
}

.giftBox a {
	outline: 0;
	border: 0;
	text-decoration: none;
}

.giftBox img {
	width: 150px;
	height: 86px;
	transition: all .2s ease-in-out; 
}			

.giftBox:hover img {
	margin-left:-10px;
	width: 175px;
	height: 100px;
	
}		

.giftBoxRotate {
	-webkit-animation-name: rotateGift;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 4s;
}		

@keyframes rotateGift {
	  0%     { transform: rotate(0deg); } 
	  3%  { transform: rotate(6deg); }   
	  6% { transform: rotate(-6deg);  }  
	  9% { transform: rotate(6deg);  }  
	  12% { transform: rotate(0deg);  }      
	  100% { transform: rotate(0deg);  }   
}


/* ------------------------------------------------------ */
/* MOBILE BREAKPOINTS */
/* ------------------------------------------------------ */


@media all and (max-width: 700px) {
	
.greetingMessageOutter {
    width: 100%;
    top: 36%;
}

.happyHolidaysContainer {
    width: 90%;
}

.fromOutter {
    width: 95%;
    padding-bottom: 2%;
    margin: 1% 0 0 auto;
}

.giftBox {
    bottom: 80px;
    left: 43%;
    transform: translateX(-43%);
}
	
.giftBox img {
	width: 110px;
	height: 63px;
}	

.giftBox:hover img {
	width: 150px;
	height: 86px;
}	
					
}			

@media all and (max-width: 500px) {
	
.greetingMessageOutter {
    width: 100%;
    top: 36%;
}

.happyHolidaysContainer {
    width: 90%;
}

.fromOutter {
    width: 95%;
    padding-bottom: 2%;
    margin: -6% 0 0 auto;
}

.giftBox {
    bottom: 80px;
    left: 40%;
    transform: translateX(-40%);
}
	
.giftBox img {
	width: 110px;
	height: 63px;
}	

.giftBox:hover img {
	width: 150px;
	height: 86px;
}		
					
}					


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

.goOpacity {
	opacity: 1;
}

.hide { display: none;}


/*  animated SVG IE fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
.happyHolidays
	{ fill-opacity:1; stroke-opacity: 0; }
.lwbam path,
.sanjose path, .sanjose line, .sanjose polygon, .sanjose rect, .sanjose circle, .sanjose polyline,
.stlouis path, .stlouis line, .stlouis polygon, .stlouis rect, .stlouis circle, .stlouis polyline 
	{ stroke-opacity: 0;stroke-dasharray: 0px !important;  stroke-dashoffset: 0px !important; }
.lwbam path {fill-opacity:1;}
	
	
}