/* CSS Document */

* { outline: none; box-sizing: border-box; }

HTML {}
BODY {
    font-family: 'Roboto', sans-serif;
	color: #222;
	margin: 0;
	padding: 0;
}


H1 { font-size: 35px; line-height: 42px; font-weight: 300; text-transform: uppercase; color: #444444; }
H2 { font-size: 28px; line-height: 34px; font-weight: 300; text-transform: uppercase; color: #444444; }
H3 { font-size: 22px; line-height: 27px; font-weight: 300; text-transform: uppercase; color: #444444; }
H4 {}
H5 {}
H6 { font-size: 13px; line-height: 17px; font-weight: 300; text-transform: uppercase; color: #CCCCCC; font-family: 'Roboto Slab', sans-serif; margin: 0 0 0 0; }

H1 A, H2 A, H3 A, H4 A, H5 A, H6 A { text-decoration: none; }

IMG { border: none; }
HR { border: none; border-bottom: solid 3px #DDDDDD; margin: 20px auto; width: 50%; }

.clr { clear:both; }

.width { position: relative; width: 1200px; margin: 0 auto 0 auto; }

.full-width-image { width: 100%; height: auto; display: block; }
.full-width-iframe { display: block; }

.table { display: table; height: 100%; }
.table .cell { display: table-cell; height: 100%; vertical-align: middle; }

.image-bg { background-image: url('../img/006_Wedding Web.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; height: auto; }

.align-center 	{ text-align: center; }
.align-left 	{ text-align: left; }
.align-right 	{ text-align: right; }
.align-justify 	{ text-align: justify; }

/*	COLUMNS  ************************************************************* */

DIV.col_full 			{ padding: 15px; }

DIV.col_1\/2 			{ float: left; width: 50%; padding: 15px; }

DIV.col_1\/3 			{ float: left; width: 33.3333%; padding: 15px; }
DIV.col_2\/3 			{ float: left; width: 66.6666%; padding: 15px; }

DIV.col_1\/4 			{ float: left; width: 25%; padding: 15px; }
DIV.col_3\/4 			{ float: left; width: 75%; padding: 15px; }

DIV.col_1\/5 			{ float: left; width: 20%; padding: 15px; }
DIV.col_2\/5			{ float: left; width: 40%; padding: 15px; }
DIV.col_3\/5			{ float: left; width: 60%; padding: 15px; }

.gallery 				{}
.gallery DIV.col_1\/5 	{ padding: 15px; }

DIV.no-padding 			{ padding: 0; }

/* ********************************************************************* */
/*	HEAD
/* ********************************************************************* */

#head { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 70px; transition: all 0.5s ease-in-out; }

#head #menu {}
#head #menu UL { list-style: none; margin: 0 auto 0 auto; padding: 0; display: table; }
#head #menu UL LI { margin: 0; padding: 0; display: table-cell; font-size: 16px; font-weight: 300; text-transform: uppercase; vertical-align: top; }
#head #menu UL LI A { display: block; color: #FFFFFF; text-decoration: none; padding: 20px 15px 10px 15px; transition: all 0.5s ease-in-out; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); }
#head #menu UL LI A:HOVER { color: #E1E1E1; }

#head #menu UL LI.logo { width: 300px; padding: 0 60px 0 60px; transition: all 0.5s ease-in-out; }
#head #menu UL LI.logo A { padding: 0 0 0 0; }
#head #menu UL LI.logo IMG { display: block; height: auto; width: 100%; }

#head #menu UL LI .rmore { display: none; }
#head #menu UL LI UL { display: none; position: absolute; }
#head #menu UL LI UL LI { display: block; }
#head #menu UL LI UL LI A { padding: 10px 15px 10px 15px; }

#mobile { display: none; }

#head #social { position: absolute; top: 20px; left: 20px; transition: all 0.5s ease-in-out;  }
#head #social UL { list-style: none; margin: 0 auto 0 auto; padding: 0; display: table; }
#head #social UL LI { margin: 0; padding: 0; display: table-cell; font-size: 20px; }
#head #social UL LI A { color: #FFFFFF; text-decoration: none; padding: 0 10px 0 0; }
#head #social UL LI A:HOVER { color: #E1E1E1; }

#head #social UL LI.menutab { display: none; } 

#head.scrolled { height: 50px; background-color: #444444; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3); }
#head.scrolled #menu UL LI A { padding: 15px 15px 14px 15px; }
#head.scrolled #menu UL LI.logo { width: 264px; padding: 0 60px 0 60px; }
#head.scrolled #menu UL LI.logo A { padding: 0 0 0 0; }
#head.scrolled #menu UL LI UL { background-color: rgba(68,68,68,0.90); }
#head.scrolled #menu UL LI UL LI {}
#head.scrolled #menu UL LI UL LI A { border-top: solid 1px #111111; padding: 7px 30px 7px 15px; }
#head.scrolled #menu UL LI UL LI A:HOVER { background-color: #444444; }

#head.scrolled #social { top: 11px; left: 20px; }

/* ********************************************************************* */
/*	PAGE
/* ********************************************************************* */

#page { padding: 0 0 70px 0; }

#page P { font-size: 14px; line-height: 21px; color: #444444; }

#page UL LI { font-size: 14px; line-height: 21px; color: #444444; }
#page OL LI { font-size: 14px; line-height: 21px; color: #444444; }

#page A { color: #444; }
#page A:HOVER { text-decoration: none; }

#page .button { display: inline-block; padding: 5px 15px; background-color: #E1E1E1; border: solid 1px #CCC; text-decoration: none; text-align: center; }
#page .button:HOVER { background-color: #CCC; }

#page .divide { width: 60%; height: 40px; margin: 20px auto 60px auto; font-size: 30px; line-height: 60px; color: #d1d1d1; border-bottom: solid 1px #E1E1E1; }
#page .divide SPAN { position: absolute; left: 50%; display: block; box-sizing: border-box; width: 80px; height: 80px; margin: 0 0 0 -40px; border: solid 10px #FFFFFF; border-radius: 50%; background-color: #EEEEEE; text-align: center; }
#page .divide {}

/*	Show
/* ********************************************************************* */

#page .show { height: 100vh; }
#page .show .slides { width: 100%; height: 100%; }
#page .show .slide { width: 100%; height: 100%; }
#page .show .slide .bg { width: 100%; height: 100%; }

/*	Testimonials
/* ********************************************************************* */

#page .testimonials { padding: 30px 0 30px 0; text-align: center; background-color: #EEEEEE; }
#page .testimonials .slides { width: 100%; }
#page .testimonials .slide { width: 100%; }
#page .testimonials .slide .width { height: 100%; }
#page .testimonials .slide .table { height: 100%; margin: 0 auto 0 auto; }
#page .testimonials .slide .cell { height: 100%; box-sizing: border-box; padding: 0 120px 10px 120px; }

#page .testimonials .slide H2 { font-family: 'Roboto Slab', sans-serif; font-weight: 300; font-style: italic; color: #666666; }
#page .testimonials .slide P { font-family: 'Roboto Slab', sans-serif; font-weight: 300; font-style: italic; font-size: 16px; line-height: 24px; color: #666666; }

#page .testimonials .slide .quote-left { font-size: 50px; line-height: 50px; color: #d1d1d1; position: absolute; top: 0; left: 30px; }
#page .testimonials .slide .quote-right { font-size: 50px; line-height: 50px; color: #d1d1d1; position: absolute; bottom: 0; right: 30px; }

/*	Latest News
/* ********************************************************************* */

#page .latest-news { position: relative; height: 250px; margin: 15px 0 15px 0; }
#page .latest-news .behind { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#page .latest-news .infront { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background-color: rgba(230,230,230,0.9); padding: 10px 25px; text-align: center; }
#page .latest-news H3 { font-family: 'Roboto Slab', sans-serif; font-weight: 300; color: #222222; text-transform: none; }
#page .latest-news P { color: #222222; font-size: 12px; line-height: 16px; }
#page .latest-news A { color: #222222; }

/*	Forms
/* ********************************************************************* */

#page .form {}
#page .form LABEL { display: block; font-weight: 600; }
#page .form INPUT[type='text'],
#page .form INPUT[type='email'] { display: block; box-sizing: border-box; width: 100%; padding: 5px; border: solid 1px #AAA; font-family: 'Roboto', sans-serif; font-size: 14px; color: #444444; }
#page .form TEXTAREA { display: block; box-sizing: border-box; width: 100%; padding: 5px; border: solid 1px #AAA; font-family: 'Roboto', sans-serif; font-size: 14px; color: #444444; }
#page .form INPUT[type='submit'] { display: inline-block; box-sizing: border-box; padding: 7px 25px; border: solid 1px #444; font-family: 'Roboto', sans-serif; font-size: 14px; color: #FFF; background-color: #444; text-transform: uppercase; font-weight: 300; }

#page .form INPUT#time { display: none; }
#page .form .error { color: #990000 }
#page .form .notice { color: #009900 }

/* ********************************************************************* */
/*	FOOT
/* ********************************************************************* */

#foot { background-color: #444444; padding: 30px 0 50px 0; }

#foot P { font-size: 11px; line-height: 14px; color: #CCCCCC; }
#foot A { color: #CCCCCC; text-decoration: none; }
#foot A:HOVER { color: #FFFFFF; } 

/* ********************************************************************* */
/* ***** RESPONSIVE **************************************************** */
/* ********************************************************************* */

@media screen and (max-width: 1220px) {
	
	.width { width: 960px; }
	
}

@media screen and (max-width: 980px) {
	
	.width { width: 100%; }
	
	#head { height: 50px; background-color: #444444; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3); }
	#head #menu UL { margin: 0 0 0 auto; }
	#head #menu UL LI.logo, #head.scrolled #menu UL LI.logo { width: 184px; padding: 0 20px 0 20px; }
	#head #menu UL LI.logo A { padding: 0 0 0 0; }
	#head #social { top: 11px; left: 20px; }
	#head #social UL LI.menutab { display: block; }
	
	#mobile { position: fixed; z-index: 998; top: 50px; right: 0; bottom: 0; left: 0; background-color: #DDDDDD; }
	#mobile .table { width: 100%; }
	#mobile .table .cell { width: 100%; }
	
	#mobile H2 { font-family: 'Roboto Slab', sans-serif; text-align: center; }
	
	#mobile UL { display: block; list-style: none; width: 70%; margin: 0 auto 0 auto; padding: 0; }
	#mobile UL LI { display: block; margin: 0; padding: 0; text-align: center; }
	
	#mobile UL LI.logo { display: none; }
	
	#mobile UL LI A { display: block; font-size: 20px; font-weight: 300; color: #444444; text-decoration: none; padding: 8px; border-bottom: dotted 1px #CCCCCC; }
	#mobile UL LI A:HOVER {}
	
	#mobile UL LI:last-child A { border: none; }
	
	#mobile UL LI .rmore { display: none; }
	#mobile UL LI UL { padding: 0 0 5px 0; }
	#mobile UL LI UL LI {}
	#mobile UL LI UL LI A { color: #999999; font-size: 16px; padding: 6px; border-bottom: dotted 1px #CCCCCC; }
	#mobile UL LI UL LI:last-child A { border-bottom: dotted 1px #CCCCCC; }
	
}

@media screen and (max-width: 780px) {
	
	/*	COLUMNS  ************************************************************* */

	DIV.full_col 			{}
	DIV.half_col 			{ float: none; width: 100%; }
	DIV.third_col 			{ float: none; width: 100%; }
	DIV.twothirds_col 		{ float: none; width: 100%; }
	DIV.quarter_col 		{ float: left; width: 50%; }
	DIV.threequarters_col 	{ float: none; width: 100%; }
	DIV.fifth_col 			{ float: left; width: 33.3333%; }
	DIV.twofifths_col		{ float: none; width: 100%; }
	DIV.threefifths_col		{ float: none; width: 100%; }
	
	#page .latest-news .infront { display: block; background-color: rgba(230,230,230,0.8); }
	
	#foot { text-align: center; }
	#foot .quarter_col { padding-bottom: 30px; }
	
}

@media screen and (max-width: 600px) {
	
	/*	COLUMNS  ************************************************************* */

	DIV.col_full 			{}
	DIV.col_1\/2			{ float: none; width: 100%; }
	DIV.col_1\/3 			{ float: none; width: 100%; }
	DIV.col_2\/3 			{ float: none; width: 100%; }
	DIV.col_1\/4 			{ float: none; width: 100%; }
	DIV.col_3\/4 			{ float: none; width: 100%; }
	DIV.col_1\/5 			{ float: left; width: 50%; }
	DIV.col_2\/5			{ float: none; width: 100%; }
	DIV.col_3\/5			{ float: none; width: 100%; }

}

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

	/*	COLUMNS  ************************************************************* */

	DIV.col_full 			{}
	DIV.col_1\/2			{ float: none; width: 100%; }
	DIV.col_1\/3 			{ float: none; width: 100%; }
	DIV.col_2\/3 			{ float: none; width: 100%; }
	DIV.col_1\/4 			{ float: none; width: 100%; }
	DIV.col_3\/4 			{ float: none; width: 100%; }
	DIV.col_1\/5 			{ float: none; width: 100%; }
	DIV.col_2\/5			{ float: none; width: 100%; }
	DIV.col_3\/5			{ float: none; width: 100%; }
	
	#page .testimonials .slide .cell { padding: 30px 50px 40px 50px; }
	
}