@charset "ISO-8859-1";

html, body{
	background-color: #edfbff;
	margin: 0
}
.iphone-nav{
	display: none;
}
#div-bar {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 1075px;
}
#nav-bar{
  list-style-type: none;
  padding: 0;
  overflow: hidden;
}
.nav-button {
  float: left;
  margin-right: 12px;
  border-bottom: 1px solid black;
}
.nav-button .nav-link:hover:not(.active) {
  background-color: #f2f2f2;
  opacity: .50;
}
.nav-button .nav-link {
  display: block;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
}
.ring-photo{
	width: 1200px;	
}
#mobile-photo-col{
	display: none;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#photo-names, #rsvp-title{
  font-family: 'Meow Script', cursive;
  font-size: 40pt;
  font-weight: bold;
  margin: 0%;
}
#date-location, #days-to-go, #first-text{
	font-family: 'Quicksand', sans-serif;
	font-weight: bold;
}
#date-location, #first-text{
  margin: 0%;
  font-size: 15pt;
  font-weight: bold;
}
#days-to-go{
  font-weight: bold;
}
.container {
  min-height: 100%;
  margin: 0 auto -50px;
}
#manage-cont{
	padding: 4%;
	background-color: #f2f2f2;
	border:1px solid lightgray;
	width: 1000px;
	color: white;
	border-radius: 5px;
	display: table;
  	margin-right: auto;
  	margin-left: auto;
}
.manage-heading{
	color: black;
	float: left;
	font-size: 13pt;
	font-weight: bold;
}
#index-cont{
	
  position: relative;
  text-align: center;
  color: white;
}
.top-container{
	padding: 4%;
	background-color: #072c1c;
	width: 1100px;
	color: white;
	border-radius: 5px;
	display: table;
  	margin-right: auto;
  	margin-left: auto;
  	font-family: 'Quicksand', sans-serif;
    font-size: 12pt;
}
.rsvp-container{
	width:600px;
}
.schedule-title{
	font-family: 'Quicksand', sans-serif;
	font-size:22pt;
	margin:25px;
	text-align: center;
	font-weight: bold;
}
.form-section{
	padding: 1.3%;
}
.error-msg{
	background-color: #d76060;
	border: solid red 1px;
	border-radius: 5px;
	display: none;
}
.song-para{
	width: 200px;
	text-align: center;
	display: inline-block;
}
.song-input{
	width: 200px;
}
legend{
    text-align: left;
    font-size: 16pt;
    font-weight: bold;
    margin: 5px;
}
fieldset{
    padding: 12px;
    margin-top: 20px !important;
}
.guest-location{
	display: block;
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #FFFDD1;
	border-radius: 5px;
	border: none;
}
.guest-location:hover{
	background-color: #f1f1f1 ;
	box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
}
.guest-img{
	width: 500px;
}
footer{
	background-color: white;
	text-align: center;
	padding: 1%;	
    width: 100%;
}
#left-foot{
	float: left;
}
#left-foot a{
	text-decoration: none;
	color: black;
}
input[type="submit"], .rsvp-submit{
	background-color: #FFFDD1;
	border-radius: 5px;
	padding: 1%;
	margin: 1%;
	border: none;
}
.filter-radio{
	margin-left: 10px;
}
input[type="submit"]:hover{
	background-color: #f1f1f1 ;
	box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
}
.song-para{
	font-weight: bold;	
}
#song-table{
  border-collapse: collapse;
  width: 600px;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 25px;
  margin-top: 25px;
  color: white;
 }
#song-table  td{
	border-bottom: 1px solid white;
	padding: 10px;
}
#song-table th {
	padding: 10px;
}
#song-table tr:hover{
	background-color: #ddede6;
	color: black;
}

.question{
	font-size: 13.5pt;
	font-weight: bold;
}
.answer{
	width:500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
.guest-title{
	font-weight: bold;
}
#faq-section{
	text-align: center;
	margin-top:60px;
}
.manage-table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
.mobile-visible{
	display: block;
	background-color: #edfbff;
	font-size: 22pt;
	text-align: center;
	padding: 15px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}
.manage-table td, .manage-table th {
  border: 1px solid #ddd;
  padding: 8px;
}
.manage-table tr:nth-child(even){
	background-color: #a0c5c1;
}
.manage-table tr:hover {
	background-color: #dfecea;
}
.manage-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #999999;
  color: white;
}
#mobile-container{
	display:none;
}

.manage-photos{
	width: 350px;
}
.logo{
	max-width: 175px;
	margin: 2%;
}
.xl {
  font-size: 2rem;
}
.toggle {
  appearance: none;
  position: relative;
  box-sizing: content-box;
  display: inline-block;
  vertical-align: middle;
  width: calc(var(--toggle-size) * 2);
  height: var(--toggle-size);
  border: var(--toggle-border-thickness) solid var(--toggle-color-border);
  border-radius: var(--toggle-border-radius);

  font-size: inherit;
  background: var(--toggle-color-background);

  transition: background 0.4s;
}

.toggle:before {
  content: "";
  position: absolute;
  left: calc(var(--toggle-size) * 0.1);

  width: var(--toggle-size);
  height: var(--toggle-size);
  border-radius: var(--toggle-border-radius-inner);

  background-color: var(--toggle-color-ball);
  transition: background-color 0.4s, left 0.4s;
}

.toggle:checked {
  --toggle-color-background: var(--green);
}

.toggle:checked:before {
  --toggle-color-ball: var(--white);

  left: calc(var(--toggle-size) * 0.9);
}
:root {
  /* Used color variables */
  --gray: #c6d0cc;
  --green: #FFFDD1;
  --white: #ffffff;

  /* Toggle variables */
  --toggle-size: .75em;
  --toggle-border-thickness: 0.1em;
  --toggle-color-background: var(--gray);
  --toggle-color-ball: var(--white);
  --toggle-border-radius-inner: calc(var(--toggle-size) / 2);
  --toggle-border-radius: calc(
    var(--toggle-border-radius-inner) + var(--toggle-border-thickness)
  );
}
#toggle-label{
	font-size:12pt;
}
#mobile-dtg-2{
	display: none;
}
.mob-text{
	font-family: 'Quicksand', sans-serif;
	font-size: 13pt;
}
.mob-text-small{
	font-family: 'Quicksand', sans-serif;
	font-size: 15pt;
}
.schedule-title{
	padding: 15px;
}
.message-input{
	display: block;
	margin: 20px;
}
#msg-cont{
	width:370px;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}

.fa-bars, .fa-xmark{
	font-size:14pt !important;
}
.iphone-link{
	font-weight: bold;
}
#hotel-info{
	display: none;
}
#rsvp-hidden-error{
	display: none;
	color: red;
	font-weight: bold;
}
.headshot{
  border-radius: 50%;
  width: 175px;
  margin: 25px;
}
.headshot:hover{
	width: 215px;
	margin:0px;
	margin-bottom:10px;
	margin-top: 10px;
}
.headshot-cont{
	display: inline-block;
	width: 225px;
}
.headshot-cont:hover{
	width: 225px;
}
.best{
	margin-left:50px;
	margin-right:50px;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;  
  background-color: #FFFDD1;
  color: black;
  padding-left: 7px;
  padding-right: 7px;
  font-weight: bolder;
  border-radius: 50%;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e9e9e9;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
#captcha-box{
	margin-left: 35%;
	margin-right: 35%;
	
}
#song-form{
	display: none;
}
#add-song-button{
	padding: 10px;
}
#schedule-cere-info{
	max-width:800px;
	margin-left: auto;
	margin-right:auto;
}
/*ALL PHONE MOBILE DEVICES
*/
@media only screen and (min-width: 320px) and (max-width: 430px){
#captcha-box{
	margin:0% !important;
	
}
#nav-bar{
	display: none;
}
.iphone-nav {
  display: block;
  overflow: hidden;
  position: relative;
  font-family: 'Quicksand', sans-serif;
  margin:0;
}

.iphone-nav #myLinks {
  display: none;
  margin:0px;
}
.iphone-nav .iphone-link {
  color: black !important;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  margin:0px;
  text-align: center;
  font-size: 13pt;
}
.iphone-nav .iphone-link.icon {
  display: block;
  text-align: left;
  right: 0;
  top: 0;
  color: black;
}	
.iphone-nav .iphone-link:hover {
  color: black;
  margin:0px;
}
.ring-photo, .mobile-photo{
	width: 100vw;
}
#photo-names{
	font-size: 20pt;
	width: 90vw;
}
#date-location, #days-to-go, #first-text{
	display: none;
}
#mobile-container{
    display: block;
    margin:0px;
}
.mob-text{
	text-align: center;
    font-family: 'Quicksand', sans-serif;
    margin: 0px;
    font-size: 16pt;
}
.mob-text-small{
	padding: 25px !important;
	font-size: 13pt;
}
.schedule-title{ 
	font-size: 16pt;
}
.mobile-section{
	margin-top: 30px;
	padding: 0%;
    font-family: 'Quicksand', sans-serif;
    margin-bottom:0px;
}
.mobile-photo{
	display: block;
}	
footer{
	background-color: white;
	text-align: center;
    font-family: 'Quicksand', sans-serif;
    margin-top: 50px;
}
#left-foot{
	display: none;
}
#left-foot a{
	text-decoration: none;
	color: black;
}
.top-container{
	padding: 1%;
	background-color: #072c1c;
	color: white;
	border-radius: 5px;
	display: table;
  	margin-right: auto;
  	margin-left: auto;
  	width: 98vw !important;
}
fieldset{
	width: 95vw;
}
.guest-img, .guest-img-2{
	width: 90vw !important;
}
#rsvp-title{
	margin-left: auto;
	margin-right: auto;
	width: 95vw;
}

#mobile-photo-col{
	display: block;
}
#desktop-photos{
	display: none;
}
.schedule-title{
	font-family: 'Quicksand', sans-serif;
	margin:0px !important;
}
.timeline-item{
	margin:0px !important;
	padding:0px;
}
#manage-cont, .manage-table{
	width: 660px !important;
}
.answer, .question, #faq-section{
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
}
.song-section, #song-req-1, #song-table{
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
}
.song-para, .song-input{
	width: 35vw;
}
#s_sub{
	width:65px;
}
#msg-form, #msg-cont{
	width: 90vw;
}
.message-input{
	width: 85vw;
	padding:0;
}
#upload-success{
	width:100vw !important;
}
.address-details{
	font-size: 15pt !important;
}
.address-details2{
	font-size: 13pt;
	font-weight: normal;
}
}

/*ALL IPAD/TABLET DEVICES
*/
@media only screen and (min-width: 640px) and (max-width: 875px){
#nav-bar{
	display: none;
}
.iphone-nav {
  display: block;
  overflow: hidden;
  position: relative;
  font-family: 'Quicksand', sans-serif;
  margin:0;
}

.iphone-nav #myLinks {
  display: none;
  margin:0px;
}
.iphone-nav .iphone-link {
  color: black !important;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  margin:0px;
  text-align: center;
  font-size: 18pt;
}
.iphone-nav .iphone-link.icon {
  display: block;
  text-align: left;
  right: 0;
  top: 0;
  color: black;
}	
.iphone-nav .iphone-link:hover {
  color: black;
  margin:0px;
}
.ring-photo, .mobile-photo{
	width: 100vw;
}
#photo-names{
	font-size: 40pt;
	width: 90vw;
}
#date-location, #days-to-go, #first-text{
	display: none;
}
#mobile-container{
    display: block;
    margin:0px;
}
.mob-text{
	text-align: center;
    font-family: 'Quicksand', sans-serif;
    margin: 0px;
    font-size: 22pt;
}
.mob-text-small{
	padding: 25px !important;
	font-size: 18pt;
}
.schedule-title{ 
	font-size: 22pt;
}

.mobile-section{
	margin-top: 30px;
	padding: 0%;
    font-family: 'Quicksand', sans-serif;
    margin-bottom:0px;
}
.mobile-photo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 60vw;
}
footer{
	background-color: white;
	text-align: center;
    font-family: 'Quicksand', sans-serif;
    margin-top: 50px;
}
#left-foot{
	display: none;
}
#left-foot a{
	text-decoration: none;
	color: black;
}
.top-container{
	padding: 1%;
	background-color: #072c1c;
	color: white;
	border-radius: 5px;
	display: table;
  	margin-right: auto;
  	margin-left: auto;
  	width: 98vw !important;
  	font-size: 16pt;
}
fieldset{
	width: 95vw;
}
legend{
	font-size: 22pt;
}
.guest-img, .guest-img-2{
	width: 90vw !important;
}
#rsvp-title{
	margin-left: auto;
	margin-right: auto;
	width: 95vw;
	font-size:55pt;
}
.schedule-title{
	font-family: 'Quicksand', sans-serif;
	margin:0px !important;
}
.timeline-item{
	margin:0px !important;
	padding:0px;
}
#manage-cont, .manage-table{
	width: 660px !important;
}
.answer, .question, #faq-section{
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
}
.question{
	font-size: 18pt;
}
.song-section, #song-req-1, #song-table{
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
}
.song-para, .song-input{
	width: 35vw;
}
#song-table, #song-table tr{
	font-size: 14pt !important;
}
#s_sub{
	width:80px;
}
#msg-form, #msg-cont{
	width: 90vw;
	
}
#msg-cont input, #msg-cont textarea {
	width: 50vw !important;
}
.message-input{
	width: 85vw;
	padding:0;
}
#upload-success{
	width:100vw !important;
}
  
}