/* Website Designed by Francis Odozi Isibor */

/* iPad (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	/*	#######################	*/
	/* 	Text Styles */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Margins */
	/*	#######################	*/

	/*	#######################	*/ 
	/* 	Columns */
	/*	#######################	*/

	.col3	{
		width:40%;
		margin-left:5%;
		margin-right:5%;
		min-height:400px;
	}

	.twocol	{
		width:100%;
		margin: 0px;
	}

	.twopane	{
		width:100%;
		margin:0px;

		margin-bottom:10px;
		margin-top:10px;
	}

	.testimonialphoto	{
		width:100%;
		height:auto;
		margin:0px;
		margin-bottom:0px;
	}

	.testimonialphoto	img	{

		width:100%;
		height:auto;

	}

	/*	#######################	*/
	/* 	Elements */
	/*	#######################	*/

	.mobileouter	{
		display:table;

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

	.slidersmall	{
		height:230px;
		background-color:black;
	}


	#homeslider	.photoslide	img	{
		height:100%;
		width:auto;
	}

	.colright {
		margin-top:100px;
	}

	#galleryslider	{
		height:100%;
	}

	/*	#######################	*/
	/* 	Backdrop Backgrounds */
	/*	#######################	*/



	.graphicbg	{
		background-attachment:scroll;
	}

	/*	#######################	*/
	/* 	Wrappers */
	/*	#######################	*/

	.herowrapper	{
		width:100%;
	}

	.wrapper	{
		width:90%;
		margin:0 auto;
	}

	/*	#######################	*/
	/* 	Captions / Text Themes 	*/
	/*	#######################	*/

	/*	#######################	*/
	/* 	Nav + Header */
	/*	#######################	*/

	#nav	{
		width:90%;
	}

	.menu	{

		-webkit-transition:all 0.2s ease-in-out;
		-moz-transition:all 0.2s ease-in-out;
		-o-transition:all 0.2s ease-in-out;
		transition:all 0.2s ease-in-out;

		position:fixed;

		top:50px;
		left:0px;

		width:100%;
		height:calc(100% - 50px);


		opacity:0;

		float:none;
		background-color:white;

		display:none;

	}
	.slide	{
		opacity:1;
		width:100%;
		height:calc(100% - 50px);
	}
	.screen	{

	}

	ul#menu	{
		margin-bottom:200px;
		width:100%;
		float:left;
		text-align:center;
	}

	ul#menu li	{

		display:block;
		margin-top:100px;
		margin-bottom:100px;

	}

	ul#menu li	a {

		padding-top:25px;
		padding-bottom:25px;

		font-size:24px;

	}

	ul#contactmenu li	{
		display:block;
		margin-top:20px;
		margin-bottom:10px;
	}


	.burger	{

		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		width:30px;
		height:4px;

		float:right;

		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

		background-color:black;
		margin-top:23px;

		margin-left:0px;

		margin-right:0px;
		position:relative;
		left:0px;
		top:0px;

	}
	.burger:before	{

		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		height: 4px;
		width: 30px;
		background: black;
	}
	.burger:after	{

		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

		content: "";
		position: absolute;
		top: 10px;
		left: 0;
		height: 4px;
		width: 30px;
		background: black;
	}

	.active	{

		color:red;

		width:30px;

		-ms-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0); /* IE 9 */
		-webkit-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0); /* Chrome, Safari, Opera */
		transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0);

		-webkit-transform: translate3d(0, 0px, 0) rotate(45deg);
		-moz-transform: translate3d(0, 0px, 0) rotate(45deg);
		-ms-transform: translate3d(0, 0px, 0) rotate(45deg);
		-o-transform: translate3d(0, 0px, 0) rotate(45deg);
		transform: translate3d(0, 0px, 0) rotate(45deg);

	}
	.active:before	{
		content: "";
		position: absolute;
		top: 0px;
		left: 0;
		height: 4px;
		width: 30px;


		opacity:0;

		-ms-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0) scaleX(0); /* IE 9 */
		-webkit-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0) scaleX(0); /* Chrome, Safari, Opera */
		transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0) scaleX(0);

		-webkit-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		-moz-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		-ms-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		-o-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);



	}
	.active:after	{
		content: "";
		position: absolute;
		top: 0px;
		left: 0;
		height: 4px;
		width: 30px;


		-webkit-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		-moz-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		-ms-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		-o-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
	}

	/*	#######################	*/
	/* 	Logo */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/

	body	{
		background-color:black;
	}
	#rest, #hero	{
		-webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

	}

}

/* CSS for iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	/*	#######################	*/
	/* 	Positioning */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Spacing */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Columns */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Elements */
	/*	#######################	*/

	.slidersmall	{
		height:150px;
	}

	/*	#######################	*/
	/* 	Wrappers */
	/*	#######################	*/
	.wrapper {
		width:90%;
	}
	/*	#######################	*/
	/* 	Backdrop Backgrounds */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Solid Backgrounds */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Text Styles */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Captions / Text Themes 	*/
	/*	#######################	*/


	/*	#######################	*/
	/* 	Logo */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Menu */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/
}

/* CSS for iPads (portrait and landscape) ----------- */
@media screen and (min-device-width : 480px) and (max-device-width : 1024px)  {
	/*	#######################	*/
	/* 	Positioning */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Spacing */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Columns */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Elements */
	/*	#######################	*/



	.textfield	{
		margin-bottom:10px;
	}

	/*	#######################	*/
	/* 	Wrappers */
	/*	#######################	*/

	.herowrapper	{
		width:90%;
	}

	/*	#######################	*/
	/* 	Backdrop Backgrounds */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Solid Backgrounds */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Text Styles */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Captions / Text Themes 	*/
	/*	#######################	*/


	/*	#######################	*/
	/* 	Logo */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Menu */
	/*	#######################	*/

	#nav	{
		width:90%;
		margin:0 auto;
		margin-top:10px;
	}

	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/
}