/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
    line-height: 1;
    font-family: "Josephin Sans", Raleway, sans-serif;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


* {box-sizing: border-box;}


/******END CSS RESET*******/

body {
    font-family: 'Raleway',;
    margin: auto;
}

img {
    width: 100%;
    font-family: "Josephin Sans", Raleway, sans-serif;
}


#container {
   /*display: block;*/
   /*padding-right: 40px;
   padding-left: 40px;*/
}


header {
    padding: 40px 0;
    text-align: center;
    background-image: url(assets/header-background-img-gold-foil-1.jpg);
}


header h1 {
    font-size: 2.5em;
    text-align: center;
    list-style-type: none;
    font-style: normal;
    padding-top: 20px;
    padding-bottom: 15px;
    list-style-image: none;
    font-weight: 600;
}


#subtitle {
    background-image: url(assets/site-interior-background.jpg);
    padding-bottom: 20px;
}


header h1 a {
    text-decoration: none;
    list-style-type: none;
    color: #353F4F;
}


header h2 {
    color: #08204A;
    font-weight: 700;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 20px;
    font-family: Raleway;
}


header p {
    text-align: center;
    font-size: 1.5em;
    line-height: 1.15em;
    padding-bottom: 10px;
    color: #353F4F;
    font-weight: 700;
    min-width: 200px;
}


/******Upper Mid Section******/

#gala {
    display: flex;
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding-top: 40px;
}


#gala div {
    display: block;
    justify-content: space-between;
    padding-top: 40 0;
    margin-left: 30px;
    margin-right: 0px;
    margin-top: 10px;
}


/******Left-Side Upper Mid Section******/
    

#gala div table {
    border-collapse: separate;
    border-spacing: 50px 50px;
    border: 2px outset #C2A46E;
    margin-top: 40px;
    margin-right: 30px;
    flex: 1;
    margin-left: 10px;
    margin-bottom: 40px;
}


th {
    font-size: 2.2em;
    font-weight: bold;
    color: #353F4F;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}


 tbody td {
    /* [disabled]padding-left: 20px; */
    font-size: 1.5em;
    color: #330000;
    font-weight: bold;
    padding-top: 20px;
    padding-right: 0;
    padding-left: 20px;
    padding-bottom: 20px;
}


tbody tr:nth-child(odd) {
    background-color: #C2A46E;
}


tbody tr:nth-child(even) {
    background-color: #949FA4;
}


/*******Right-Side Upper Mid Section******/


#gala div article {
    margin-top: 40px;
    margin-right: 40px;
    flex: 1;
    overflow: hidden;
    padding-left: 20px;
    margin-left: 30px;
}

article p {
    font-size: 1.5em;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}


article a img {
    border: 2px outset #C2A46E;
    width: 100%;
}



/*******Top 1 & Top 2 Div Rules*******/

#design {
	width: 100%;
	padding: 20px;
}

#top1 {
    width: 120%;
    height: 45vw;
    transform: rotate(-15deg);
    transform-origin: top right;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: -1;
    background-image: url(assets/site-interior-background.jpg);
}


	
/******Lower Mid Section Rules******/


#packages {
    padding: 30px 15px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
    border-top: 2px outset #C2A46E;
    border-bottom: 2px outset #C2A46E;
    background-image: url(assets/site-body-background-2.jpg);
}


#packages h2 {
    font-size: 2.1em;
    font-weight: 600;
    color: #353F4F;
}


#packages button {
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.2em;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    color: #353F4F;
    background-color: #C2A46E;
    border: 2px outset #C2A46E;

}


 .grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-gap: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    overflow: hidden;
}




/************ Card Flip Styles **************/

.flip-container { perspective: 1000px; }
	


.flip-container:hover .back {
	transform: rotateY(0deg);
}

.flip-container:hover .front {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
	height: 0;
	padding-top:100%;
}


.front, .back {
	-webkit-backface-visibility: hidden; /*still needed for safari & android*/
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}


.front { transform: rotateY(0deg); z-index: 2; }

.back {
	transform: rotateY(-180deg);
	background: #C2A46E;
	padding:10px;
}


.front img {
	display:block;
}


.date {
	margin-top: 30px;
	text-transform:uppercase;
	font-size: 1.1em;
	color: #353F4F;
}


.hotel {
	margin-bottom:10px;
	font-weight:700;
	color: #353F4F;
	font-size: 1.1em;
}


.event {
	margin-bottom:10px;
	font-weight:700;
	color: #353F4F;
	font-size: 1.1em;
}


.price {
	margin-bottom:10px;
	font-weight:700;
	color: #353F4F;
	font-size: 1.1em;
}


#design-footer {
	margin: 40px 0;
	/*width: 100;*/
	position: relative;
	
}

#top3 {
    width: 120%;
    height: 10vw;
    transform: rotate(2deg);
    transform-origin: bottom right;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: -1;
    /* [disabled]margin-bottom: 40px; */
    background-image: url(assets/site-interior-background.jpg);
}

#top4 {
    width: 120%;
    height: 70px;
    transform: rotate(-2deg);
    transform-origin: bottom right;
    background-color: hsla(39,41%,60%,0.60);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* [disabled]margin-bottom: 40px; */
    margin-top: 20px;
}


/********Footer Rules*********/



footer {
    margin-right: 40;
    margin-left: 40;
    margin-bottom: 40;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    padding: 40px;
}


.grid-container > div {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.2em;
    line-height: 1.75em;
    color: #353F4F;
    background-image: url(assets/site-body-background-2.jpg);
}


.grid-container p {
    margin: auto;
    font-size: .75em;
    line-height: 1.15em;
}


.grid-item1 {
    grid-column-start: 1;
    grid-column-end: 2;
    border: 2px outset #C2A46E;
}


.grid-item1 h1 {
	text-decoration: underline;
	text-align: center;
}


.grid-item1 p {
    padding-left: 10px;
    padding-right: 10px;
}


.grid-item2 {
    grid-column-start: 2;
    grid-column-end: 3;
    border: 2px outset #C2A46E;
}

.grid-item2 h1 {
	text-decoration: underline;
	text-align: center;
}

.grid-item2 p {
	width: 265px;
    padding-left: 10px;
    padding-right: 10px;
}


.grid-item3 {
    grid-column-start: 3;
    grid-column-end: 4;
    border: 2px outset #C2A46E;
}

.grid-item3 h1 {
	text-decoration: underline;
	text-align: center;
}

.grid-item3 p {
    width: 265px;
   /* padding-left: 30px;*/
    /*padding-right: 10px;*/
    margin-bottom: 20px;
}


.grid-item3 button {
    background-color: #C2A46E;
    font-family: Raleway;
    font-weight: 600;
    text-align: center;
    border: 2px outset #C2A46E;
    font-size: 0.7em;
    color: #55657F;
}


.grid-item4 {
    grid-column-start: 4;
    grid-column-end: 5;
    border: 2px outset #C2A46E;
}

.grid-item4 h1 {
    text-decoration: underline;
    margin-bottom: 10px;
    color: #353F4F;
	text-align: center;
}


.grid-item4 .fab.fa-facebook-f {
    font-size: 1.7em;
    padding-right: 30px;
}

.grid-item4 .fab.fa-instagram {
    font-size: 1.8em;
}

.grid-item4 .fab.fa-twitter {
    font-size: 1.7em;
    padding-left: 20px;
    margin-bottom: 20px;
}




/*******Media Queries Section*******/

@media only screen and (min-width: 350px) {
.grid-item4 p a {
    color: #353F4F;
    text-decoration: none;
}
.grid-item4 p a:hover  {
    color: #6633CC;
    text-decoration: none;
}

	
.grid-container {
		display: block;
}
	
.grid {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-gap: 20px;
}

	
}


@media only screen and (min-width: 600px) {
	
	.grid-container {
		display: grid;
		grid-gap: 20px;
	}
	
	.grid {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
	}
	
	/*header, footer {
		flex: 100%;
	}*/
	
	#gala div {
		display: flex;
	}
	
	
}


	/****Layout Rules for Wider Screens go in Here****/


@media only screen and (min-width: 900px) {
	
	#gala div {
		display: flex;
	}
	
}


@media only screen and (min-width: 995px) {
	
	.grid {
		display: grid;
		grid-template-columns: auto auto auto auto;
		grid-template-rows: auto auto auto auto;
	}
}