/* COLORS =========================================================================================================== 

PINK
#f6e3df


BLACK
#231f20


GREY PINK
#978f8f

*/

@charset 'UTF-8';


@font-face {
  font-family: 'Moderat';
  src: url('/fonts2/Moderat-Regular.eot'); /* IE9 Compat Modes */
  src: url('/fonts2/Moderat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts2/Moderat-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('/fonts2/Moderat-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts2/Moderat-Regular.svg') format('svg'); /* Legacy iOS */
}


@font-face {
  font-family: 'Moderat';
  font-weight: bold;
  src: url('/fonts2/Moderat-Bold.eot'); /* IE9 Compat Modes */
  src: url('/fonts2/Moderat-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts2/Moderat-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('/fonts2/Moderat-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts2/Moderat-Bold.svg') format('svg'); /* Legacy iOS */
}



body {
	background-color: #f6e3df;
	font-family: 'Moderat', Moderat, sans-serif;
	color: #231f20;
	width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-moz-margin-before: 0;
	-moz-margin-after: 0;
	-moz-margin-start: 0;
	-moz-margin-end: 0;
	position: relative;
	
}


#main {
	height: 100%;
	width: 100%;
	padding: 25px 0 50px 0;
}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		color: #231f20;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			text-decoration: none;
		}

	a.underline {
		border-bottom: 1px solid #231f20;
	}
	
	a.underline:hover {
		color: #978f8f;
		border-color: #978f8f;
	}

	.bold {
		font-weight: bold;
	}

	p {
		margin: 0;
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		-moz-margin-before: 0;
		-moz-margin-after: 0;
		-moz-margin-start: 0;
		-moz-margin-end: 0;
	}
/* NAV =========================================================================================================== */


#nav {
	background: #f6e3df;
	color: #231f20;
	cursor: default;
	top: 0;
	left: 0;
	padding: 20px 50px;
	position: fixed;
	width: 100%;
	z-index: 1000;
	border-bottom: 1px solid #231f20;
            }

#nav ul li {
	display: inline-block;
	font-size: 1.5em;
	list-style: none;
}

#nav ul li:first-of-type {
	margin-right: 45px;
}


/* SPLASH =========================================================================================================== */


#splashimage {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 900px;
	height: 600px;
	margin-left: -450px;
	margin-top: -300px;
}

/* BIG TEXT =========================================================================================================== */


.rsvp-text {
	width: 100%;
	padding-bottom: 15px;
	overflow: hidden;
	margin-bottom: 475px;
}

.rsvp-text-last {
	width: 100%;
	overflow: hidden;
	padding-bottom: 35px;
	margin-bottom: 350px;
}

.rsvp-text-thankyou {
	width: 100%;
	overflow: hidden;
	margin-top: 150px;
}


.floatleft {
	font-size: 20em;
	font-weight: bold;
	float: left;
	margin-left: 50px;
}

.floatright {
	font-size: 20em;
	font-weight: bold;
	float: right;
	margin-right: 50px;
}

.floatright-mini {
	font-size: 4em;
	line-height: 1em;
	float: right;
	margin-right: 50px;
    text-align: right;
    padding-top: 150px;
}



/* FORM =========================================================================================================== */


form {
	width: 100%;
	font-size: 2.35em;
	font-family: 'Moderat', Moderat, sans-serif;	
}

.formsection {
	display: block;
	margin: 40px 0;
}


input[type=text], input[type=email], select {
	border-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #333;
	padding-top: 5px;
	background-color: #f6e3df;
	font-size: 30pt;
	font-family: 'Moderat', Moderat, sans-serif;
	color: #978f8f;
	width: 40%;
}


input[type=submit], input[type=reset] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #f6e3df;
	border-radius: 0;
	padding: 20px 30px;
	margin: 20px 0;
	font-size: 15pt;
	background-color: #231f20;
	color: #f6e3df;
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	cursor: pointer;
	font-family: 'Moderat', Moderat, sans-serif;
}

input[type="submit"]:hover, input[type="reset"]:hover  {			
	background: #f6e3df;
	border-color: #231f20;
	text-decoration: none;
	color: #231f20;
}


/* CUSTOM CHECKBOX RADIO =========================================================================================================== */


/* The container */
.container {
	font-size: 0.64em;
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 12px 0;
    cursor: pointer;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


/* Create a custom radio button */
.radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #f6e3df;
  border-radius: 50%;
  border: 1px solid #231f20;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .radio {
  background-color: #978f8f;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .radio {
  background-color: #231f20;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .radio:after {
  display: block;
}



/* Style the indicator (dot/circle) */
.container .radio:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #231f20;
}



.guestsection {
	margin-top: 95px;
	padding-top: 95px;
	border-top: 1px solid #231f20;
}

.paddingleft60 {
	padding-left: 50px;
}

.paddingtop30 {
	padding-top: 30px;
}





/* MOBILE ===========================================================================================================
===================================================================================================================== */

/* Large Desktop */


@media screen and (max-width: 2400px) {
	
	
	.rsvp-text {
		padding-bottom: 15px;
		margin-bottom: 335px;
	}
	
	.rsvp-text-last {
		padding-bottom: 35px;
		margin-bottom: 300px;
	}
	
	.rsvp-text-thankyou {
		margin-top: 150px;
	}
	
	.floatleft {
		font-size: 12.5em;
	}
	
	.floatright {
		font-size: 12.5em;
	}
	
	.floatright-mini {
		font-size: 2.35em;
		line-height: 1.1em;
	    padding-top: 90px;
	}
	
	
	
	
}

/* Normal */

@media screen and (max-width: 1360px) {
	
	#main {
		padding: 25px 0 50px 0;
	}
	
	#nav {
		padding: 20px 25px;
	}
	
	#nav ul li {
		display: inline;
		font-size: 1.5em;
		list-style: none;
		padding: 0;
	}

	.rsvp-text,	.rsvp-text-last {
		width: 100%;
		padding-bottom: 20px;
		margin-bottom: 350px;
	}
	
	.floatleft {
		font-size: 10em;
		margin-left: 25px;
	}
	
	.floatright {
		font-size: 10em;
		margin-right: 25px;
	}
	
	.floatright-mini {
		font-size: 2em;
		margin-right: 25px;
	    padding-top: 80px;
	}
	
	.paddingleft60 {
		padding-left: 25px;
	}
	
	form {
		font-size: 2em;
	}

	input[type=text], input[type=email], select {
		width: 50%;
		font-size: 20pt;
	}
	
	.container {
		font-size: 0.75em;
	}

	
	
	
	
}





@media screen and (max-width: 1060px) {

	
	.floatleft {
		font-size: 8em;
	}
	
	.floatright {
		font-size: 8em;
	}

	.floatright-mini {
	    padding-top: 50px;
	}

	
}




@media screen and (max-width: 900px) {


	.rsvp-text,	.rsvp-text-last {
		width: 100%;
		padding-bottom: 20px;
		margin-bottom: 350px;
	}
	
	.floatleft {
		font-size: 6em;
		margin-left: 25px;
	}
	
	.floatright {
		font-size: 6em;
		margin-right: 25px;
	}
	
	.floatright-mini {
		font-size: 2em;
		margin-right: 25px;
	    padding-top: 18px;
	}

	#splashimage {
		width: 750px;
		height: 500px;
		margin-left: -375px;
		margin-top: -250px;
	}


}


@media screen and (max-width: 650px) {
	
	#main {
		padding: 15px 0 50px 0;
	}
	
	#nav {
		padding: 20px 15px;
	}
	
	#nav ul li {
		display: inline;
		font-size: 1em;
		list-style: none;
		padding: 0;
	}
	
	#nav ul li:first-of-type {
		margin-right: 15px;
	}
	
	.rsvp-text {
		width: 100%;
		padding-bottom: 15px;
	}
	
	.rsvp-text-last {
		width: 100%;
	}

	.floatleft {
		font-size: 3.5em;
		margin-left: 15px;
	}
	
	.floatright {
		font-size: 3.5em;
		margin-right: 15px;
	}
	
	.floatright-mini {
		font-size: 1.4em;
		margin-right: 15px;
	    padding-top: 10px;
	}
	
	.paddingleft60 {
		padding-left: 15px;
	}
	
	
	form {
		font-size: 1.35em;
	}
	
	.container {
		font-size: .8em;
	    margin: 15px 0;
	}

	input[type=text], input[type=email], select {
		width: 70%;
		font-size: 20pt;
	}

	.radio {
	  height: 18px;
	  width: 18px;
	}
	
	#splashimage {
		width: 600px;
		height: 400px;
		margin-left: -300px;
		margin-top: -200px;
	}
	
	
}


@media only screen 
  and (max-device-width: 1200px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  
	.rsvp-text,	.rsvp-text-last {
		padding-bottom: 50px;
		margin-bottom: 400px;
	}
}


@media only screen 
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  
	.rsvp-text,	.rsvp-text-last {
		padding-bottom: 20px;
		margin-bottom: 150px;
	}
  
 }