html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 125%;
	   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	   font-size:.9em;
	   color: #444137;
	   position: relative;
	   background-color: #000;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}


/* =============================================== */
/* ! Base     */
/* =============================================== */

.four-col {
	width: 988px;
	margin:0 auto;
	overflow:hidden;
	background: rgba(255,255,255,0.8) ;
}

.three-col {
	width: 721px;
	overflow:hidden;
	margin: 0 10px;
}

.two-col {
	width: 494px;
	margin: 0 10px;
}

.one-col {
	width: 227px; 
	margin: 0 10px; 
	float: left;
}

/* =============================================== */
/* ! Global Layout  */
/* =============================================== */

/*Header*/

.main-nav {
	background: rgba(255, 255, 255, .9);
	width: 100%;
	padding:20px 40px;
	position: fixed;
	top: 0; left: 0;
	overflow: hidden;
	z-index: 9999;
	
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

.main-nav .logo {
	width: 150px;
	height: auto;
	float: left;
}

ul#mainMenu ,
ul#mainMenu ul{
	display: block;
	width: 100%;
	text-align: center;
}

ul#mainMenu li {
	display: inline-block;;
	padding: 10px 0;
	margin: 0 10px 0 10px;
	font-size: 1.2em;
}

ul#mainMenu li a {
	float: left;
	color: #333;
}

ul#mainMenu li a:hover {
	color: #ce7876;
}

ul#mainMenu li.active > a {
	font-weight: 300;
	color: #ce7876;
}

ul#mainMenu li ul {
	display: none !important;
}

/*Sub Nav Flyout*/
.sub-nav {
	padding:10px 0 10px 20px;
	background: rgba(255, 255, 255, .9);
	position: fixed;
	z-index: 999;
	top: -100%;
	width: 100%;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.sub-nav-open {
	top:92px;
}

.sub-nav ul {
	width: 100%;
	text-align: center;
}

.sub-nav ul li {
	display: inline-block;
	margin: 0 20px 0 0;
}

.sub-nav ul li a {
	float: left;
	color: #333;
	margin:0;
}

.sub-nav ul li a:hover {
	color: #ce7876;
}

/*Full portfolio*/
.full-portfolio {
	width: 100%;
	padding:40px 0 90px 0;
	position: relative;
	text-align: center;
	background: #ce7876 url('https://images.unsplash.com/photo-1424223022789-26fd8f34bba2?format=auto&auto=compress&dpr=2&crop=entropy&fit=crop&w=1651&h=1101&q=80');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.full-portfolio h3 {
	margin:0;
	font-size:2em;
}

.full-portfolio h3 i {
	font-size: 3.2em;
	margin-bottom: 15px;
	}

.full-portfolio a {
	color: #333;
	font-weight: 400;
}

.full-portfolio a:hover {
	text-decoration: none;
}

/*Footer*/
.footer-container {
	width: 100%;
	background: #fff;
	padding:30px 20px 50px 20px;
}

.footer-inner {
	text-align: center;
}

.fb-like {margin-bottom: 30px; float: left; clear: both; width: 100%;}

/* =============================================== */
/* ! Global Styles   */
/* =============================================== */

a {text-decoration: none; color: #ce7876;}
a:hover {text-decoration: underline;}

.footer-inner a {color: #333;}

p {color: #333; font-size:1em; margin: 0 0 25px 0; line-height: 150%;}
strong {font-weight: 300;}
.footer-inner p .fa {font-size: 1.4em; margin: 0 10px;}
blockquote {font-style: italic; text-align: left; line-height: 130%; font-size: 1.25em; padding: 0 0 0 20px; border-left: solid 2px #ccc; font-weight: 400; margin: 0 0 20px 0;}

h1 {font-size: 1.8em; font-weight: 400; margin: 0 0 15px 0; line-height: 125%;}
h2 {font-size: 1.4em; font-weight: 400; margin: 0 0 15px 0; line-height: 125%;}
h3 {font-size: 1.55em; font-weight: 400; margin: 0 0 15px 0; line-height: 125%;}
h5 {font-size: 1.3em; font-weight: 900; margin: 0 0 40px 0; line-height: 125%; text-align: left;}

.work-info h1,
.work-info h2,
.work-info p {color: #fff;}

.wall-text h2,
.wall-text h3 ,
.wall-text p{
	margin: 0 0 5px 0;
	color: #fff;	
	color: #333;	
	font-size: 1.2em;
}

h1.listing-title {
	text-align: center;
}

.more,
.offset-more {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 999;
	margin-left: -27px;
	
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.totop {margin-left: -36px;}

.more a,
.offset-more a {
	background: rgba(255, 255, 255, .9);
	padding:20px;
	display: block;
	color: #ce7876;
}

.more:hover ,
.offset-more:hover {
	background: rgba(255, 255, 255, 1);
}

.blog-inner p {font-size: 1.15em;}


/* =============================================== */
/* ! Home */
/* =============================================== */

.splash {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 0;
}

.splash-banners {
	width: 100%;
	height: 100vh;
}

.splash-banners div {
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

.splash-content {
	position: absolute;
	width: 100%;
	top: 40%;
	z-index: 999;
}

.splash-content-inner {
	text-align: center;
	width: 100%;
	margin: 0 auto;
}

.splash-content-inner img {
	padding:20px;
	height: auto;
	background: rgba(255, 255, 255, .6);
	
	-moz-transform:scale(0.7);
    -webkit-transform:scale(0.7);
    transform:scale(0.7);
    
}

/*Introduction*/

.introduction {
	width: 100%;
	height: auto;
	min-height: 100vh;
	background:#000 url('https://images.unsplash.com/photo-1460538512106-37e555b43281?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9b0f4af2ec4b033facaa3b623c1a0c7c') no-repeat center top;
	background-size: cover;
	position: relative;
	padding: 30vh 0 10vh 0;
}

.intro-content {
	background: rgba(255, 255, 255, .9);
	padding: 30px;
	width: 70%;	
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.introduction h1 {font-size:3.2em;}
.introduction h2 {font-size:2.2em;}

/*Tables*/
.intro-content table {
	border: 0;
	outline:0;
	width: 100% !important;
	background: #fff;
	margin: 20px 0;
}

.intro-content table td {
	padding: 10px 15px 0 15px;
}

	.intro-content table td p {
		margin: 0 0 10px 0;
	}

	.intro-content table th {
		padding: 15px 15px 0 15px;
	}

	/*Package name Cell*/
	.intro-content table th,
	.intro-content table td.table-contact {
		font-weight: bold;
		font-size: 1.4em;
		background: #e2acab;
	}
	
	.intro-content table th p,
	.intro-content table td.table-contact a {
		color: #fff;
	}

	/*Price Cell*/
	.intro-content table td.price {
		background: #ecc1c1;
		padding: 15px 15px 0 15px;
	}
	
	.intro-content table td.price p {
		color: #fff;
		font-size: 5em;
		line-height: 100%
	}
	
	/*left and right aligned tables*/
	table.table-left {
		float: left;
		width: 48% !important;
	}
	
	table.table-right {
		float: right;
		width: 48% !important;
	}
	

/*Wall*/

.wall-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 1%;
}

.work {padding-top:110px;}

.wall-item {
	width: 48%;
	margin:1%;	
	float: left;
	position: relative;
	z-index:0;
	overflow:hidden;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.wall-item img {
	width: 101%;
	height: auto;
	z-index: 0;
	float: left;
	opacity: .9;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-backface-visibility: hidden;
}

.wall-text {
	background: rgba(255, 255, 255, .9);
	position: absolute;
	bottom:7%;
	left: 4%;
	width: 92%;
	padding:10px 10px 0 10px;
	opacity: 0;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.wall-item a:hover .wall-text,
.wall-item:hover img,
.wall-item a.hover_effect .wall-text,
.hover_effect img {opacity: 1;}

.wall-text a:hover {text-decoration: none;}

.play-icon {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin-left: -30px;
	margin-top: -30px;
	font-size: 60px;
	font-weight: 100;
	color: #fff;
	opacity: .8
}


/* =============================================== */
/* ! Blog Items */
/* =============================================== */

.wall-blog {
	opacity: 1;
}

.blog-inner img {width: 100% !important; height: auto !important;}

/* =============================================== */
/* ! Work Items */
/* =============================================== */

.work-container {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 0;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.work-opacity {
	width: 100%;
	height: 100vh;
	background:#000;
	position: absolute;
	z-index: 1;
	opacity: .6;
}

.work-info {
	position: absolute;
	z-index: 10;
	bottom:30px;
	right:30px;
	width: 50%;
	background: #333;
}

.work-info-inner {
	padding:30px 30px 15px 30px;
}

ul.work-controls {
	position: absolute;
	top:30px;
	right: 30px;
}

ul.work-controls li {
	display: block;
	float: left;	
	margin-left:10px;
}

ul.work-controls li a {
	display: block;
	float: left;
	padding:15px;
	text-decoration: none;
	background: #ce7876;	
	color: #fff;
	opacity: .9;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

ul.work-controls li a:hover {
	opacity: 1;
}

/*Forms*/

.form-container {
	width: 80%;
	clear: both;
	margin: 0 auto;
}

.form-element {
	width: 100%;
	clear: both;
	padding: 0 0 10px 0;
	overflow: hidden;
}

.form-half {
	width: 48%;
	clear: none;
}

.form-element label {
	width: 100%;
	float: left;
	text-align: left;
	padding: 2% 0;
}

.form-element textarea,
.form-element input[type=text],
.form-element input[type=email],
.form-element select {
	width: 100%;
	padding:3% 2%;
	border: solid 1px #333;
	float: left;
	clear: both;
	font-size: 14px;
}

.form-element select {
	height: 41px;
}

.form-element textarea:focus,
.form-element input[type=text]:focus,
.form-element input[type=email]:focus,
.form-element select:focus {
	border: solid 1px #ce7876;
}

.form-element input[type=submit] {
	border: 0;
	padding:10px 20px;
	background: #333;
	color: #fff;
	cursor: pointer;
	font-size:1.4em;
	
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.form-element input[type=submit]:hover {
	background: #ce7876;
	padding: 10px 30px;
	
}

#thanks p {
	color: #ce7876;
	font-size: 1.4em;
	font-weight: 400;
}


/* =============================================== */
/* ! Desktop Overrides  */
/* =============================================== */

.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.mobile-nav,
.mobile {display: none !important;}

/* =============================================== */
/* ! Responsive Rules */
/* =============================================== */

@media only screen and (min-width:0px) and (max-width:768px) {
   /* As soon as we fall below the Ipad's width I use my 'mobile'
      design. So, everything in this query is meant for 
      smartphones and other small screens. */
      
      
		.four-col {width: 100%; float: none; clear: both;margin:0 !important;}
		.three-col {float: none; clear: both;  margin:0; width: 94%; padding: 0 3%}
		.two-col { float: none; clear: both;  margin:0; width: 94%; padding: 0 3%}
		.one-col { float: none; clear: both;margin:0; width: 94%; padding: 3%}
		
		.mobile,
		.mobile-nav {display: block !important;}
		.sub-nav {display: none !important}
		
		.wall-container {margin:0;}
		.main-nav {
			left: -100% !important;	
			height: 100%;
			height: 100vh;
			
			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			-o-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
		}
		
		.logo {
			width: 90%;
		}		
		
		.mobile-open {
			width: 100%;
			top:0;
			bottom:0;
			right: 0;
			left:0 !important;
		}	
				
		/*Mobile Menu Btn*/		
		.mobile-nav {
			display: block;
			position: absolute;
			top: 30px;
			left: 30px;
			z-index: 10;
		}
		
		.mobile-nav a {
			display: block;
			float: left;
			padding:15px;
			text-decoration: none;
			background: #ce7876;	
			color: #fff;
			opacity: .9;
			
			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			-o-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
		}		

		.mobile-nav a:hover {opacity: 1;}	
		
		ul#mainMenu {
			margin-top:120px;
			overflow: hidden;
		}
		
		ul#mainMenu li {
			display: block;
			width: 100%;
			clear: both;
			padding: 0;
			margin: 0;
			font-size: 1.6em;
		}
		
		
		ul#mainMenu li.home {
			display: none;
		}
		
		ul#mainMenu li a {
			float: left;
			color: #333;
			width: 100%;
			padding:15px 0;
		}	
		
		ul#mainMenu li ul {
			display: block !important;
		}

		ul#mainMenu li li {
			display: block;
			width: 100%;
			clear: both;
			padding: 0;
			margin: 0;
			font-size: .7em;
		}
		
		ul#mainMenu li li a {
			float: left;
			color: #333;
			width: 100%;
			padding:5px 0;
		}	
	
		
		/*Home*/			
		
		.introduction {min-height: auto; padding:105px 0 90px 0;}
		.intro-content {width: 95%; padding:20px;}
		.introduction h1 {font-size:2.2em;}
		.introduction h2 {font-size:1.6em;}
		
		table.table-left,table.table-right {
			width: 100% !important;
			float: none;
			clear: both;
		}

		.blog-inner {
			padding:0;
		}
		
		.wall-text h2,
		.wall-text h3,
		.wall-text p {
			margin: 0 0 5px 0;
			font-size: .9em;
		}

		/*Projects*/		
		.work-info {
			bottom:auto;
			top: 100px;
			right: auto;
			width: 100%;
		}	
		
		/*Forms*/
		
		.form-container {
			width: 100%;
		}
		
      
}


@media only screen and (min-width:0px) and (max-width:480px) {
   /* As soon as we fall below the Ipad's width I use my 'mobile'
      design. So, everything in this query is meant for 
      smartphones and other small screens. */
      
      .wall-item {
	      width: 100%;
	      margin: 1% 0;
      }
            
}