/*
@media screen and (min-width: 768px) {
  selector { property: value; }
}

*/

/* --------------------- GENERAL STUFF --------------------*/

body, section, article, h1, h2, nav, a{
	margin: 0;
	padding: 0;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
}

a:link, a:visited {
    color: #000000;
}

a:hover {
    color: #5569C4;
}

a:active {
    color: #DC4960;
}

a {
	text-decoration: none;
}

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

div#loadScreen{
	position: fixed;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	z-index: 1000;
}

div#loading{
	margin: 30vh auto;
	width: 252px;
	height: 252px;
}


/* --------------------- HEADER --------------------*/

section.header{
    background-repeat: repeat;
    width: 100%;
}

#homeheader{
	background-image: url("../images/bg_blueStripe.png");
}

#infoheader{
	background-image: url("../images/bg_polka.png");
}

#registryheader{
	background-image: url("../images/bg_cheveron4.png");
}

#rsvpheader{
	background-image: url("../images/bg_shells.png");
}

img.headerBanner{
	width: 60%;
	margin-left: 20%;	
	margin-top: 30px;
}

nav{
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 2vw;
	bottom: 0px;
	padding: 8px;
	background-color: rgba(255,255,255,0.5);
}

table{
	text-align: center;
}

td{
	width: 20%;
}

img.monogram{
	width:15%;
	margin-left: 42.5%;
	margin-bottom: -90px;
	z-index: 10;
}

div.dots{
	width: 100%;
	margin-top: -5px;
	height: 10px;
	background-image: url("../images/dots.png");
	background-size: contain; 
    background-repeat: repeat-x;
    
}

/* --------------------- FOOTER --------------------*/

footer{
	margin-top: 125px;
}

footer h2{
	text-align: center; 
	margin-top: 50px;
}

footer p{
	text-align: center; 
	margin-bottom: 50px;
}

/* --------------------- INFO PAGE --------------------*/

img.sectionBanner{
	max-height: 66px;
	height: 8vw;
	margin: 30px auto 20px auto;
}

p.info{
	text-align: left;
	width: 65%;
	font-size: 15px;	
	margin: 0 auto 20px auto;
}

p.price{
	text-align: center;
	width: 65%;
	font-size: 15px;	
	margin: 0 auto 10px auto;
}

span.phoneNumber{
	color: #9B5E93;
}


h2.infoHeader{
	font-size: 20px;
	text-align: center;
	margin: 0 auto 10px auto;
	width: 65%;
}

h3{
	text-align: center;
	margin: 10px auto 10px auto;
}

section#infoHolder a:link{
	color: #5569C4;
	cursor: pointer;
}
section#infoHolder a:visited{
	color: #5569C4;
	cursor: pointer;
}

#low{
	color: #6E9ED2;	
	font-size: 30px;
}
#high{
	color: #DC4960;
	font-size: 30px;
}

table.whatToWear{
	width:75%; 
	margin: 0 auto; 
	border: 2px solid rgba(227,235,240,0.9); 
	border-radius: 17px;
	border-collapse: separate;
	border-spacing: 0px;
	margin-bottom: 20px;
	
}

.whatToWear td{
	border-right: 2px solid rgba(227,235,240,0.9); 
	padding: 20px;
	vertical-align: top;

}

#key{
	text-align: center;
}

#key img{
	margin-bottom: -12px;
margin-left: 30px;
margin-top: 15px;

}

img.infoIcon{
	width: 12%;
margin: 15px 44% 0px 44%;

}


/* --------------------- DATA VIZ --------------------*/


h1{
	text-align: center;
}

h2{
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 500;
}




section#factHolder{
	width: 1151px;
	margin: 0 auto;
}


    
	


.infoBox { 
	text-align: center; 
/* 	margin: 25px; */
	border: 2px solid rgba(227,235,240,0.9);
	border-radius: 17px;
	padding: 23px;
	padding-top: 15px;
}

.picture{
	padding: 23px;
	width: 300px;
}

.picture a img{
	width: 100%;
}

.width300{
	
}

.width475{
	margin: 0px 12.5px;
}
/* --------------------- boat --------------------*/

#boatStat {
	width: 300px;
/* 	height: 285px;	 */
}

.mark { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 30px; 
	height: 26px; 
	background-image: url("../images/mark.png"); 
	background-repeat: no-repeat;
	margin: 0px; 
}

.mark:hover {cursor: move; }

#boat { 
	position: 
	absolute; 
	top: 0; 
	left: 0; 
	width: 55px; 
	height: 55px; 
}
	
#water { 
	width: 170px; 
	height: 170px; 
	padding: 40px; 
	background-image: url("../images/water.png"); 
	background-repeat: no-repeat;
	overflow: hidden; 
	margin: auto;
}

/* --------------------- counters --------------------*/

#countDownToWedding, #countUpFromMeeting{
	width: 300px;
/* 	height: 400px; */
}

p.time span{
	font-weight: 700;
}
  
     
/* --------------------- music --------------------*/
  
/*
#musicHolder{
	width: 300px;	
}
*/

div#songs{
	width: 475px;
	padding-bottom: 30px;	
}

#sideBySide{
/* 	float:left; */
	display: inline-table;
	margin-left: 5px;
	margin-right: 5px;
}

#mrazButton, #hozierButton{
    height:175px; 
    width: 175px;
    border: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    outline:none;
}

.mrazPlay{background: url('../images/mrazPlay.png') ;}
.mrazPause{background: url('../images/mrazPause.png') ;}

.hozierPlay{background: url('../images/hozierPlay.png') ;}
.hozierPause{background: url('../images/hozierPause.png') ;}

form.song input{
	font-family: Quicksand, sans-serif;
	font-size: 12px;
	margin: 20px 0px 0px 0px;
}

input.submitSong{
	text-decoration: none;
	border: none;
    color: #fff;
    background: #6E9ED2;
    padding: 5px 10px;
    border-radius: 3px;
    outline: none;
}

input.submitSong:hover{
	background: #1E5784;
	outline: none;
}

input.submitSong:visited{
	outline: none;
}

input.submitSong:active{
	outline: none;
	background: #5569C4;
}

input.songSuggestion{
	
}

p#thankYou{
	margin-bottom: 0px;
	display: none;
}
		

/* --------------------- movies --------------------*/

div#movies{
	width: 475px;
}

.sticker{
	height:200px;
    width:200px;
/*     background-size: 100% 100%; */
    background-repeat: no-repeat;
    background-position: center;
}

.ironManPoster .sticker-img {
	background-image: url('../images/ironmanSmall.png');
}

.interstellarPoster .sticker-img {
	background-image: url('../images/interstellarSmall.png');
}




/* --------------------- map --------------------*/

#placesWeveLivedHolder{
	width: 700px;	
}

#placesWeveLived{
	margin-left: 25px;
	margin-bottom: 20px;
}

.map2{
	margin: 0px; 
	margin-left: 179px;
}

#mapLived{
	background-image: url('../images/mapLived.png');
	width:647px;
	height:385px;
	background-repeat: no-repeat;
    background-position: center;
}

div#toolTipHolder{
	margin-left: -10px;
}

#mapVisited{
	background-image: url('../images/mapTraveled.png');
	width:742px;
	height:558px;
	background-repeat: no-repeat;
    background-position: center;
}

.qLived, .jLived, .bLived, .toolTip{
	position: absolute;
}

.qLived, .jLived, .bLived{
	width:15px;
	height:15px;
	border-radius: 50%;
	margin:10px;
	cursor: pointer;
}

.qLived{
	background-color: #DC4960;
}

.jLived{
	background-color: #1E5784;
}

.bLived{
	background-color: #9C7DBE;
}

p.close{
	text-align: right;
	font-weight: 900;
	font-size: 25px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.a{
	top: 285px;
	left:93px;
}
.b{
	top: 267px;
	left:258px;
}
.c{
	top: 202px;
	left:541px;
}
.d{
	top: 246px;
	left:87px;
}
.e{
	top: 252px;
	left:266px;
}
.f{
	top: 270px;
	left:87px;
}
.g{
	top: 229px;
	left:315px;
}
.h{
	top: 232px;
	left:299px;
}
.i{
	top: 214px;
	left:316px;
}

#a{
	top: 221px;
	left:48px;	
}
#b{
	top: 204px;
	left:212px;
}
#c{
	top: 121px;
	left:480px;
}
#d{
	top: 165px;
	left:48px;	
}
#e{
	top: 170px;
	left:175px;
}
#f{
	top: 188px;
	left:48px;
}
#g{
	top: 148px;
	left:254px;	
}
#h{
	top: 151px;
	left:114px;
}
#i{
	top: 135px;
	left:260px;
}


.j{
	top: 446px;
	left:115px;
}
.n{
	top: 446px;
	left:173px;
}
.k{
	top: 468px;
	left:631px;
}
.l{
	top: 254px;
	left:590px;
}
.m{
	top: 268px;
	left:571px;
}
.o{
	top: 208px;
	left:485px;
}
.p{
	top: 229px;
	left:494px;
}
.q{
	top: 205px;
	left:466px;
}
.r{
	top: 330px;
	left:164px;
}
.s{
	top: 272px;
	left:34px;
}
.t{
	top: 234px;
	left:250px;
}
.u{
	top: 241px;
	left:277px;
}
.v{
	top: 267px;
	left: 74px;
}
.w{
	top: 231px;
	left:523px;
}


div#mapVisited div.toolTip{
	margin: 0 auto;
}


.toolTip{
	background-color: black;
	border-radius: 10px;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
}

.toolTip2{
	background-color: black;
	border-radius: 10px;
	color: white;
	padding: 15px;
	margin: 0 auto;
	margin-top: 0px;
	position: absolute;
	min-width: 680px;
/* 	min-height: 500px; */
}

.toolTip2 p{
	margin: 0;
	margin-bottom: 15px;
}

.toolTip2 img{
	max-width: 650px;
	max-height: 475px;
}


/* --------------------- books --------------------*/


#books{
	width: 475px;	
}

#bookCover{
	padding:5px 10px 4px 10px;
	background-image: url('../images/bookJacket.png');
	background-repeat: no-repeat;
}

#bookHolder{
	width: 322px;
	margin: 0 auto;
	margin-top: 20px;
}

div#whenitallhappened{
	width: 1100px;
}
       
       



table.whatToWear img{
	width: 75%;
}




div#hair{
	width: 300px;
}

div#hair img{
	width: 100%;
}




div.underConstruction{
	width: 25%;
	margin: 0 auto;
}

div.underConstruction img{
	width: 100%;
	max-width: 527px;
}








/* -----------------------------------------------REGISTRY OLD----------------------------------------------- */

img.registryImg{
	width: 25%;
	margin-right: 2%;
	display: inline-block;
}



/* -----------------------------------------------REGISTRY OLD----------------------------------------------- */


/*
article#potteryBarn{
	width: 80%;
	margin: 0 auto;
	margin-top: 20px;
}


li.registryItem{
	width: 20%;
	list-style-type: none;
	display: inline-block;
	margin: 20px;
	text-align: center;
	background-color: rgba(228,236,240,0.3);
	border: 2px solid rgba(227,235,240,0.3);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.10);
}

img.registryThumb{
	width: 100%;
}

li.registryItem p{
	padding: 0px 5px 0px 5px;
	margin: 0px;
}

p.source{
	font-size: 12px;
	font-weight: 600;
	color: rgb(118, 118, 118);
}

p.itemName{
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	margin-top: 5px !important;
	color: black;
}

p.itemPrice{
	font-weight: 900;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  color: #6E9ED2;
  font-size: 18px;
}

p.buyButton{
	background-color: #1E5784;
  padding: 8px !important;
  color: white;
  margin-top: 6px !important;
}

p.buyButton:hover{
	background-color: #6E9ED2;
}

p.buyButton:active{
	background-color: #B8D3EF;
}



p.reqPur{
  font-size: 13px;
  font-weight: 500;
  color: rgb(118, 118, 118);	
}

span.requested{
	
}

span.purchased{
	
}
*/















@media screen and (max-width: 1150px) {
	section#factHolder{
		width: 100%;
		overflow: scroll;
	}
	
	div#whenitallhappened{
		width: 90%;
	}
	
	.map2{
		margin: 0;
	}
	
}


@media screen and (max-width: 500px) {
	img.registryImg{
		width: 50%;
		margin-left: 25% !important;
		margin-bottom: 20px;
	}

}




/* ----------------------------RSVP---------------------------- */

section#RSVPinfoHolder form{
	display: inline;
}

section#RSVPinfoHolder table{
	width: 80%;
    margin-left: 8.5%;
    margin-top: 3vh;
}

section#RSVPinfoHolder table td{
	padding: 0px 15px;
}

input.submitRSVP{
	text-decoration: none;
	font-size: 12pt;
	border: none;
    color: #fff;
    background: #6E9ED2;
    padding: 5px 10px;
    border-radius: 3px;
    outline: none;
/*     margin-left: 45%; */
    margin-top: 3vh;
}

input.submitRSVP:hover{
	background: #1E5784;
	outline: none;
}

input.submitRSVP:visited{
	outline: none;
}

input.submitRSVP:active{
	outline: none;
	background: #5569C4;
}

section#RSVPinfoHolder textarea{
	margin-left: 43%;
	margin-top: 3vh;
    outline: none;
}

p#rsvpError{
	font-size: 14pt;
	text-align: center;
}