@import url(https://fonts.googleapis.com/css?family=Lato);

body {
	padding: 0;
	margin: 0;
	font-family: 'Lato', sans-serif;	
	font-size: 1em;
	background-color: #eee;
}

/**************************
	Navigation bar
**************************/
#navigation {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #005FCC;
	line-height: 50px;
	font-weight: 700;
	font-size: 1.3em;
}

#navigation .left {
	float: left;
}

#navigation .right {
	float: right;
}

#navigation .item {
	color: rgba(255, 255, 255, 1);
	margin-left: 20px;
	margin-right: 20px;

	-webkit-transition: color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	-ms-transition: color 200ms linear;
	transition: color 200ms linear;
}

#navigation .item:hover {
	color: rgba(255, 255, 255, 0.5);
}

#navigation .logo {
	position: absolute;
	left: 50%;
	top: 5px;
	margin-left: -25px;
	width: 40px;
	height: 40px;

	background: url("../img/logo-128.png") no-repeat center;
	background-size: 100%;
}

#navigation a {
	color: white;
}

#navigation a:visited {
	color: white;
}

#navigation .menu {
	display: none;
	position: absolute;
	right: 0;
	top: 5px;
	width: 30px;
	height: 30px;
	margin-top: 5px;
	margin-bottom: 5px;
	cursor: pointer;

	background: url("../img/menu.png") no-repeat center;
	background-size: 100%;

	margin-left: 20px;
	margin-right: 20px;
	-webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	-o-transition: opacity 200ms linear;
	-ms-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
}

#navigation .menu:hover {
	opacity: 0.5;
}



/**************************
	Primary elements
**************************/
h1, h2, h3, h4, h6, h5 {
	margin-top: 0;
	margin-bottom: 20px;
}

h1 {
	font-size: 5em;
}

h2 {
	font-size: 4em;
}

h3 {
	font-size: 3em;
}

h4 {
	font-size: 2em;
}

h6 {
	font-size: 1.75em;
}

h5 {
	font-size: 1.5em;
}

h7 {
	font-size: .6em;
}

a {
	color: #005FCC;
	text-decoration: none;

	-webkit-transition: color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	-ms-transition: color 200ms linear;
	transition: color 200ms linear;
}

a:hover {
	color: #00BFFF;
}

a.error-link {
	color: #00FFFF;
	text-decoration: none;

	-webkit-transition: color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	-ms-transition: color 200ms linear;
	transition: color 200ms linear;
}

a.error-link:hover {
	color: #00BFFF;
}

#site-content {
	margin-top: 50px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 40px;
	padding-left: 10px;
	padding-right: 10px;

	/* Stops padding effecting the element width & height */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}

#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 40px;
	width: 100%;
	background-color: #222;
	text-align: center;
	line-height: 40px;
	color: #999;
}

#footer a {
	color: #ccc;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

#footer a:hover {
	color: white;
}

#footer .left {
	display: inline-block;
	float: left;
	text-align: left;
	padding-left: 20px;
}

#footer .right {
	display: inline-block;
	text-align: right;
	float: right;
	padding-right: 20px;
}

/**************************
	Homepage elements
**************************/
#home-wrapper {
	width: 100%;
	height: 100vh;
	padding-top: 50px;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

#home {
	position: relative;
	width: 100%;
	height: 100%;
	color: white;

	background: url("../img/2160PBG.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow-y: auto;
}

#home-overlay {
	display: table;
	text-align: center;
	width: inherit;
	height: inherit;

	/* Stops padding effecting the element width & height */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#home-content {
	display: table-cell;
	vertical-align: middle;
	background-color: rgba(0, 0, 0, 0.4);
}

/**************************
	Work elements
**************************/
.picture-wrapper {
	text-align: center;
}

.picture-container {
	display: inline-block;
	width: 404px;
	margin: 4px;
	padding: 10px;
	background-color: white;
	border: 1px solid #ccc;
	vertical-align: top;

	-webkit-transition: transform 200ms linear;
	-moz-transition: transform 200ms linear;
	-o-transition: transform 200ms linear;
	-ms-transition: transform 200ms linear;
	transition: transform 200ms linear;

	/* Stops padding effecting the element width & height */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.picture-container:hover {
	-webkit-transform: scale(1.025);
    -moz-transform: scale(1.025);
    -o-transform: scale(1.025);
    -ms-transform: scale(1.025);
    transform: scale(1.025);
}

.picture-container img {
	width: 100%;
	background-size: cover;
	height: auto;
	padding-bottom: 10px;
}

.picture-container div {
	width: 100%;
	text-align: center;
}

/* The text box height has been set so all picture container are the same height*/
.picture-container div div {
	height: 50px;
}


a.picture-container {
	color: black;
}

a:visited.picture-container {
	color: black;
}

.two-col-container-about {
	display: block;
}

.two-col-container-about .left-col {
	display: inline-block;
	width: 50%;
	float: left;
}

.two-col-container-about .right-col {
	display: inline-block;
	width: 50%;
	/* Stops padding effecting the element width & height */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	padding-left: 1%;
	float: left;
}

.medium-image {
	width: 100%;
	max-width: 626px;
	height: auto;
}

.wedding-size {
	vertical-align: top;
	height: 370px;
}

/**************************
	Contact elements
**************************/
.two-col-container-contact {
	display: block;
}

.two-col-container-contact .left-col {
	display: inline-block;
	width: 30%;
	float: left;
}

.two-col-container-contact .right-col {
	display: inline-block;
	width: 70%;
	float: left;
}

.contact-span {
	display: inline-block;
	width: 100px;
	font-weight: bold;
}

.testimonials {
	display: block;
	width: 100%;
}

.testimonials .left-col {
	display: block;
	width: 50%;
	float: left;
}

.testimonials .right-col {
	display: block;
	width: 50%;
	float: left;
}

.testimonials .cell {
	display: block;
}

.testimonials h5 {
	margin-top: 20px;
	margin-bottom: 0;
}


/**************************
	Events elements
**************************/
.full-width {
	width: 1236px;
}

.half-width {
	width: 612px;
}

.third-width {
	width: 404px;
}

.fourth-width {
	width: 300px;
}

.fifth-width {
	width: 240px;
}

.events-padding {
	padding-top: 30px;
	padding-bottom: 30px;
}


/**************************
	Pricing elements
**************************/
table {
	border-collapse: collapse;
	border: 1px solid #ccc;
}

table td, table th {
	padding: 5px;
	border: 1px solid #ccc;
}

table td ul {
	margin: 0;
}

.table-container {
	display: inline-block;
	float: left;
	width: 45%;
	padding-bottom: 30px;
}

.table-50 {
	width: 50%;
}

.table-seperator {
	padding-right: 10%;
}

.table-100 {
	width: 100%;
}

.table-75 {
	width: 75%;
}

.table-25 {
	width: 25%;
}

.services {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.pricing-container {
	display: inline-block;
	padding: 20px;
	margin: 10px;
	background-color: white;
	border: 1px solid #ccc;
	width: 355px;
}

.pricing-container h5 {
	text-align: center;
	border-bottom: 1px solid #ccc;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
}

.pricing-container .price-container {
	padding-top: 20px;
	padding-bottom: 20px;
}

.pricing-container .price-seperator {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 1.25em;
}

.pricing-container .price {
	width: 100%;
	text-align: center;
}

.pricing-container .no-secondary {
	margin-top: 17px;
	margin-bottom: 17px;
}

.pricing-container .price .number {
	font-size: 1.75em;
	color: #005FCC;
	font-weight: bold;
}

.pricing-container .price .secondary-number {
	font-size: 1.25em;
	color: #005FCC;
	font-weight: bold;
}

.pricing-container .price .duration-right {
	margin-left: 5px;
	color: #aaa;
}

.pricing-container .price .duration-right-blk {
	margin-left: 5px;
	color: #444;
}

.pricing-container .price .duration-left {
	margin-right: 5px;
	color: #aaa;
}

.pricing-container .secondary-price {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.pricing-container .secondary-price .number {
	font-size: 1.25em;
	color: #005FCC;
	font-weight: bold;
}

.pricing-container .secondary-price .duration {
	margin-left: 5px;
	color: #aaa;
}

.pricing-container .sentence {
	text-align: center;
	font-weight: bold;
}

.pricing-container .feature-list {
	color: #444;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}

.pricing-padding {
	padding-top: 30px;
	padding-bottom: 30px;
}

/**************************
	Info Section
**************************/

.info-container {
	display: inline-block;
	padding: 20px;
	margin: 10px;
	background-color: white;
	border: 1px solid #ccc;
	width: 650px;
}

.info-container h5 {
	text-align: center;
	border-bottom: 1px solid #ccc;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
}

.info-container .info-container {
	padding-top: 20px;
	padding-bottom: 20px;
}

.info-container .info-seperator {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 1.25em;
}

.info-container .info {
	width: 100%;
	text-align: left;
}

.info-container .no-secondary {
	margin-top: 17px;
	margin-bottom: 17px;
}

.info-container .info .number {
	font-size: 1.75em;
	color: #005FCC;
	font-weight: bold;
}

.info-container .info .secondary-number {
	font-size: 1.25em;
	color: #005FCC;
	font-weight: bold;
}

.info-container .info .duration-right {
	margin-left: 5px;
	color: #aaa;
}

.info-container .info .duration-left {
	margin-right: 5px;
	color: #aaa;
}

.info-container .secondary-info {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.info-container .secondary-info .number {
	font-size: 1.25em;
	color: #005FCC;
	font-weight: bold;
}

.info-container .secondary-info .duration {
	margin-left: 5px;
	color: #aaa;
}

.info-container .sentence {
	text-align: center;
	font-weight: bold;
}

.info-container .feature-list {
	color: #444;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}

.pricing-padding {
	padding-top: 30px;
	padding-bottom: 30px;
}

/**************************
	Fixed Size section
**************************/

.height-220 {
    height: 220px;
    vertical-align: top;
}

.width-500 {
    width: 500px;
    vertical-align: top;
}

/**************************
	Common classes
**************************/
.content-box {
	max-width: 1260px;
}

.margin-lr-auto {
	margin-left: auto;
	margin-right: auto;
}

.absolute-tl {
	position: absolute;
	top: 0;
	left: 0;
}

.title {
	text-align: center;
}

.nav-logo {
	width: 60px;
	height: 60px;
}

.invisible {
	display: none;
}
.clear{
	clear: both;
}

.center {
	text-align: center;
}

.margin-top {
	margin-top: 20px;
}

.no-padding-bottom {
	padding-bottom: 0;
}

/**************************
	Media queries
**************************/
h1 {
	font-size: 5em;
}

h2 {
	font-size: 4em;
}

h3 {
	font-size: 3em;
}

h4 {
	font-size: 2em;
}

h5 {
	font-size: 1.5em;
}

@media (max-width: 1020px) {

	h1 {
		font-size: 4em;
	}

	h2 {
		font-size: 3em;
	}

	h3 {
		font-size: 2em;
	}

	h4 {
		font-size: 1.75em;
	}

	h5 {
		font-size: 1.5em;
	}

	.table-container {
		display: block;
		width: 100%;
	}

	.table-seperator {
		padding-right: 0;
	}

}

@media (max-width: 820px) {

	h1 {
		font-size: 3em;
	}

	h4 {
		font-size: 1.5em;
	}

}

@media (max-width: 1230px) {

	#navigation .logo {
		position: absolute;
		left: 0;
		top: 5px;
		margin-left: 0;

		background: url("../img/logo-128.png") no-repeat center;
		background-size: 100%;
		margin-left: 20px;
		margin-right: 20px;
	}

	#navigation .menu {
		display: inline-block;
	}

	#navigation .item {
		display: none;
	}

	#navigation #nav-entrypoint {
		margin-top: 50px;
	}

	/* Toggled State */
	input[type=checkbox]:checked ~ div#navigation div a.item{
		float: none;
		display: block;
		background-color: #004EA8;
		margin: 0;
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}

	#navigation .left {
		float: none;
		display: block;
	}

	#navigation .right {
		float: none;
		display: block;
	}

}

@media (max-width: 660px) {
	.half-width {
		width: 100%;
	}
}

@media (max-width: 1260px) {
	.two-col-container-about .left-col, .two-col-container-about .right-col {
		display: block;
		float: none;
		width: 100%;
		padding-left: 0%;
	}

	.two-col-container-contact .left-col, .two-col-container-contact .right-col {
		display: block;
		float: none;
		width: 100%;
	}
}

@media (max-width: 1280px) {
	.full-width {
		width: 100%;
	}
}

@media (max-width: 1200px) {

	.testimonials .left-col {
		display: block;
		width: 100%;
		float: left;
	}

	.testimonials .right-col {
		display: block;
		width: 100%;
		float: left;
	}

}

@media (max-width: 440px) {
	.picture-container {
		width: 95%;
	}

	.picture-container img{
		height: auto;
	}
}

@media (max-width: 455px) {
	.extra-pricing-container {
		width: 95%;
		margin-left: 0;
		margin-right: 0;
		/* Stops padding effecting the element width & height */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}

	.wedding-size {
		height: auto;
	}

	/* The text box height has been set so all picture container are the same height*/
	.picture-container div div {
		height: auto;
	}

	#footer .left {
		display: inline-block;
		float: none;
		text-align: center;
		padding-left: 0;
	}

	#footer .right {
		display: none;
	}

	.third-width {
		width: 100%;
	}

}

@media (max-width: 350px) {
	.fourth-width {
		width: 100%;
	}
}

/**************************
	IFRAMES-SCHEDULE
**************************/

.Schedule {
    position: relative
}

.Schedule .ratio-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.Schedule IFRAME {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}