@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Poppins:300,700');

body {
	background-color: rgba(255,255,255,1.0);
	background-image: url(../images/sc_index04_001.png);
	color: #4D4D4D;
	font-size: 26px;
    font-family: 'Poppins', 'Playfair Display', sans-serif;
	font-weight: 300;
	line-height: 1.429;
	margin: 0;
	padding: 0;
	text-align: center;
}
	
.body {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
}

* {padding:0; margin:0}

/* ===========================================================================================================================================================
   ===== HEADINGS ============================================================================================================================================ 
   =========================================================================================================================================================== */

h2 {
	font-size: 150%;
	text-transform: uppercase;
	font-weight: normal;
}

h3 {font-size:120%}
h4 {font-size:120%}
h5 {font-size:120%}
h6 {font-size:120%}

h2, h3, h4, h5, h6 {
	line-height: 1.1;
	margin-bottom: 2%;
}

li {list-style-type: none;}

/* ===========================================================================================================================================================
   ===== ANCHOR STYLE ======================================================================================================================================== 
   =========================================================================================================================================================== */

a {
	outline: 0;
	}

a img {
	border: 0px; 
	text-decoration: none;
}

a:link, a:visited {
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: none;
}

/* ===========================================================================================================================================================
   ===== NAVIGATION ========================================================================================================================================== 
   =========================================================================================================================================================== */

.banner ul li a:hover {
	color: rgba(255,255,255,1);
	-webkit-animation-name: nav2;
    -webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 1;
    animation-name: nav2;
    animation-duration: 0.5s;
	animation-iteration-count: 1;
}
@-webkit-keyframes nav2 {
	from  {color: rgba(255,255,255,0.5);}
	to {color: rgba(255,255,255,1);}
}
@keyframes nav2 {
	from  {color: rgba(255,255,255,0.5);}
	to {color: rgba(255,255,255,1);}
}

nav {
	position: fixed;
	margin: auto;
	padding: 15px 0px 0px 0px;
	top: 0px;
	left: 0;
	width: 100%;
	height: auto;
	background-color: rgba(56,0,76,0.85);
	background-image: url(../images/mog_background-image001.png);
	box-shadow: 0px 0px 25px rgba(0,0,0,1);
	z-index: 999;
	border-top: 0px solid rgba(255,255,255,1);
	border-bottom: 3px solid rgba(245,223,159,1);
}
nav ul {
	position: relative;
	margin: auto;
	width: 90%;
	height: auto;
}
nav ul li {
	position: relative;
	margin: auto auto;
	padding: 0px 0px;
	width: 11.2%;
	height: auto;
	display: inline-block;
	font-weight: normal;
	font-size: 40%;
	letter-spacing: normal;
	text-transform: uppercase;
	color: rgba(238,212,132,1);
	text-align: center;
    font-family: 'Poppins', sans-serif;
	border:0px solid #000;
}

nav ul li a:link, nav ul li a:visited {
	color: rgba(248,236,201,1);
	transition: 0.25s;
}
nav ul li a:hover, nav ul li a active, nav ul li a img:hover {
	opacity: 0.55;
	color: rgba(248,236,201,0.6);
}
nav ul li a img {
	position: relative;
	margin: auto auto 5px auto;
	width: 38px;
	height: auto;
	z-index: 1000;
	opacity: 1;
	transition: 0.25s;
}

.nav_mobile {
	display: none;
}


/* ===========================================================================================================================================================
   ====== SHOW =============================================================================================================================================== 
   =========================================================================================================================================================== */
img {width: 100%;}

.cycle-slideshow {
	position: relative;
	margin: 60px auto auto auto;
	padding: 0;
	width: 100%;
	height: auto;
	display: inline-block;
	top: 0;
	left: 0;
	background-image:url(../images/mog_index08A.jpg);
	background-position: center center;
	background-color: rgba(56,0,76,1);
}
.cycle-slideshow img {
	border-radius: 0px;
	width: 100%;
	z-index:777;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
}

/* ===========================================================================================================================================================
   ===== CONTENT AREA ======================================================================================================================================== 
   =========================================================================================================================================================== */
   
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- INDEX -----------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.index01 {
	position: relative;
	margin: 50px auto auto auto;
	width: 100%;
	height: auto;
}
   
.class:hover {
	color: rgba(255,217,26,1);
	-webkit-animation-name: index0201;
    -webkit-animation-duration: 0.75s;
	-webkit-animation-iteration-count: 1;
    animation-name: index0201;
    animation-duration: 0.75s;
	animation-iteration-count: 1;
}
@-webkit-keyframes index0201 {
	from  {color: rgba(255,255,255,1);}
	to {color: rgba(255,217,26,1);}
}
@keyframes index0201 {
	from  {color: rgba(255,255,255,1);}
	to {color: rgba(255,217,26,1);}
}

.index02 {
	position: relative;
	margin: -10px auto auto auto;
	padding: 10% 0% 5% 0%;
	width: 100%;
	height: auto;
	background-color: rgba(56,0,76,1);
}
.index02 span11 img {
	position: absolute;
	margin: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	display:block;
}
.index02 span22 img {
	position: absolute;
	margin: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	display:none;
}
.index02 ul {
	position: relative;
	margin: auto;
	width: 100%;
	height:auto;
	text-align: center;
}
.index02 ul li {
	position: relative;
	margin: 0% 0% 0% 0%;
	padding: 10% 0%;
	width: 23.5%;
	height: auto;
	border: 0px solid rgba(243,243,243,1);
	display: inline-block;
	border-radius: 5px;
	transition: 0.25s;
}

.index02 ul li:hover {
	background-color: rgba(0,0,0,0.4);
	background-image: url(../images/mog_footer001.png);
}

.index02 ul li img {
	position: relative;
	margin: 0% 0% 5% 0%;
	padding: 0% 0% 0% 0%;
	width: 35%;
	height: auto;
}
.index02 ul li span1 img {
	-webkit-animation-name: wiggle;
    -webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
    animation-name: wiggle;
    animation-duration: 10s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes wiggle {
	0%    {transform:rotate(7deg);}
	50%   {transform:rotate(-7deg);}
	100%  {transform:rotate(7deg);}
}
@keyframes wiggle {
	0%    {transform:rotate(7deg);}
	50%   {transform:rotate(-7deg);}
	100%  {transform:rotate(7deg);}
}

.index02 ul li span2 img {
	-webkit-animation-name: pointr;
    -webkit-animation-duration: 15s;
	-webkit-animation-iteration-count: infinite;
    animation-name: pointr;
    animation-duration: 15s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes pointr {
	0%    {transform:scale(0.8,0.8)}
	50%   {transform:scale(1,1)}
	100%  {transform:scale(0.8,0.8)}
}
@keyframes pointr {
	0%    {transform:scale(0.8,0.8)}
	50%   {transform:scale(1,1)}
	100%  {transform:scale(0.8,0.8)}
}

.index02 ul li span3 img {
	-webkit-animation-name: iphone;
    -webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
    animation-name: iphone;
    animation-duration: 10s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes iphone {
	0%    {margin: 0% 0% 5% 0%;}
	40%   {margin: -10% 0% 15% 0%;}
	50%   {margin: 0% 0% 5% 0%;}
	60%   {margin: -5% 0% 10% 0%;}
	80%   {margin: 0% 0% 5% 0%;}
	100%  {margin: 0% 0% 5% 0%;}
}
@keyframes iphone {
	0%    {margin: 0% 0% 5% 0%;}
	40%   {margin: -10% 0% 15% 0%;}
	50%   {margin: 0% 0% 5% 0%;}
	60%   {margin: -5% 0% 10% 0%;}
	80%   {margin: 0% 0% 5% 0%;}
	100%  {margin: 0% 0% 5% 0%;}
}

.index02 ul li span4 img {
	-webkit-animation-name: logo;
    -webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
    animation-name: logo;
    animation-duration: 8s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes logo {
	0%    {margin: 0% 5% 5% 0%;transform:rotate(-2deg);}
	50%   {margin: 0% 0% 5% 5%;transform:rotate(3deg);}
	100%  {margin: 0% 5% 5% 0%;transform:rotate(-2deg);}
}
@keyframes logo {
	0%    {margin: 0% 5% 5% 0%;transform:rotate(-5deg);}
	50%   {margin: 0% 0% 5% 5%;transform:rotate(5deg);}
	100%  {margin: 0% 5% 5% 0%;transform:rotate(-5deg);}
}

.index02 h3 {
	position: relative;
	margin: 0% 0% 2% 0%;
	font-size: 90%;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(255,255,255,1);
}
.index02 ul li p {
	position: relative;
	margin: 0% 0% 2% 10%;
	width: 80%;
	height: auto;
	font-size: 45%;
	color: rgba(255,255,255,1);
}
.index02 ul li a {
	position: relative;
	margin: 2% 0% 0% 0%;
	padding: 2% 10%;
	color: rgba(255,255,255,1);
	border: 2px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,0);
	text-transform: uppercase;
	font-size: 110%;
	font-weight: 700;
	line-height: 4;
	letter-spacing: 1pt;
	transition: 0.25s;
}

.index02 ul li a:hover {
	color: rgba(0,0,0,0.8);
	background-color: rgba(255,255,255,1);
}

.index03 {
	position: relative;
	/*margin: 68px auto auto auto;*/
	margin: auto auto;
	width: 100%;
	height: auto;
	background-color: #FFF;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.75);
	overflow: hidden;
	z-index: 1;
}
.index0301 {
	position: relative;
	margin: auto auto auto auto;
	padding: 0% 0% 0% 0%;
	width: 70%;
	height: auto;
	display: inline-block;
}
.index0301 img {
	position: relative;
	margin: auto auto -10px auto;
	padding: 0% 0% 0% 0%;
	width: 100%;
	height: auto;
	display: inline-block;
}
.index0302 {
	position: relative;
	margin: 5% 0% 0% 0%;
	padding: 0% 0% 0% 2%;
	width: 28%;
	max-height: inherit;
	display: inline-block;
	text-align: left;
	float: right;
	overflow-y: hidden;
	overflow-x: hidden;
}
.index0302 h2 {
	text-transform: uppercase;
	font-size: 100%;
	font-weight: 700;
	color: rgba(56,0,76,1);
}
.index0302 table {
	position: relative;
	margin: auto auto 5% auto;
	padding: 0% 0%;
	width: 100%;
	color: rgba(0,0,0,0.65);
	font-size: 60%;
	text-align: left;
}
.index0302 table tr td {
	padding: 1% 0%;
	color: rgba(0,0,0,0.65);
}
.index0302 a {
	position: relative;
	margin: auto;
	width: auto;
	height: auto;
	padding: 2% 4%;
	color: rgba(56,0,76,1);
	background-color:rgba(56,0,76,0);
	border: 2px solid rgba(56,0,76,1);
	font-weight: 700;
	font-size: 50%;
	text-transform: uppercase;
	line-height: 4;
	transition: 0.25s;
}
.index0302 a:hover {
	color: #FFF;
	background-color: rgba(56,0,76,1);
}

.index04 {
	position: relative;
	margin: auto;
	padding: 20% 0% 5% 0%;
	width: 100%;
	height: auto;
	background-color: rgba(56,0,76,1);
	background-image:url(../images/mog_index04_001.png);
	background-repeat:repeat-x;
	background-position: top right;
	overflow: hidden;
}
#scroll04 {
	position: relative;
	margin: -35% auto auto auto;
	width: 100%;
	height: auto;
	float: right;
}
.index04 h2 {
	position: relative;
	margin: auto;
	padding: 0;
	width: auto;
	height: auto;
	font-family: 'Playfair Display', Times;
	font-size: 370%;
	color: #FFF;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0px;
	text-shadow: 0px 0px 15px rgba(0,0,0,1);
}
.index04 ul {
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
}
.index04 ul li {
	position: relative;
	margin: auto 2%;
	padding: 2% 0%;
	width: 20%;
	height: auto;
	display: inline-block;
}
.index04 ul li img {
	position: relative;
	margin: auto auto auto auto;
	width: 40%;
	height: auto;
}
.index04 ul li h3 {
	position: relative;
	margin: auto auto 10% auto;
	padding: 0;
	width: auto;
	height: auto;
	font-family: 'Playfair Display', Times;
	font-size: 100%;
	color: #FFF;
	font-weight: 400;
	text-transform: uppercase;
}
.index04 ul li p {
	position: relative;
	margin: auto auto 2% auto;
	width: 80%;
	height: auto;
	color: rgba(255,255,255,0.9);
	font-size: 55%;
	text-shadow: 0px 0px 5px rgba(0,0,0,1);
}
.index04 ul li a {
	position: relative;
	margin: auto auto 2% auto;
	padding: 1% 2%;
	width: auto;
	height: auto;
	font-size: 40%;
	color: rgba(255,255,255,1);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 3px;
	background-color: rgba(255,255,255,0);
	border: 2px solid rgba(255,255,255,0);
	transition: 0.25s;
}
.index04 ul li a:hover {
	color: rgba(56,0,76,1);
	background-color: rgba(255,255,255,1);
}
.index04 p {
	position: relative;
	margin: auto auto 2% auto;
	z-index: 111;
	color: #FFF;
	font-size: 85%;
	text-transform: none;
	font-weight: 400;
	font-family: 'Playfair Display', Times;
}

/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- ABOUT -----------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

#parallax01 {
	position: fixed;
	top: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 300px;
	background-image:url(../images/mog_footer001.png);
}
.about01 {
	position: relative;
	margin: 260px auto auto auto;
	padding: 5% 0% 10% 0%;
	width: 100%;
	height: auto;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 50px rgba(0,0,0,0.8);
	background-image: url(../images/mog_logo_bknd001.png);
	background-repeat: no-repeat;
	background-position: 80% 90%;
	background-attachment: fixed;
}
.about0101 {
	position: relative;
	margin: auto auto auto 5%;
	width: 20%;
	height: auto;
	display: inline-block;
	float: left;
}
.about0101 ul {
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
}
.about0101 ul a li {
	position: relative;
	margin: auto auto 3% auto;
	width: auto;
	height: auto;
	padding: 2% 5% 2% 0%;
	text-align: right;
	border: 1px solid rgba(56,0,76,0.1);
	background-color: rgba(56,0,76,0);
	color: rgba(56,0,76,1);
	font-size: 55%;
	border-radius: 3px;
	text-transform: uppercase;
	transition: 1.0s;
}
.about0101 ul a li:hover {
	color: rgba(255,255,255,1);
	background-color: rgba(56,0,76,1);
}

.about0102 {
	position: relative;
	margin: auto 5% auto auto;
	width: 65%;
	height: auto;
	display: inline-block;
	color: rgba(0,0,0,0.7);
	font-family: 'Titillium Web';
	text-align: justify;
}
.about0102 h2 {
	position: relative;
	margin: auto auto 4% auto;
	font-size: 200%;
	color: rgba(56,0,76,1);
	text-transform: uppercase;
	font-family: 'Playfair Display', Times;
}
.about0102 h4 {
	font-weight:400;
	font-size: 140%;
	color: rgba(56,0,76,1);
	font-family: 'Playfair Display', Times;
	text-align: left;
	position: relative;
	margin: auto auto 1% auto;
}
.about0102 p {
	position: relative;
	margin: auto auto 3% auto;
	font-size: 65%;
	font-family: 'Poppins', sans-serif;
	color: rgba(0,0,0,0.7);
}
.about0102 img {
	position:relative;
	margin:auto 3% 1% auto;
	padding: 0%;
	width:70%;
	height:auto;
	display:inline-block;
	border: 1px solid #c2b2cd;	
}
.about0102 h3 {
	position: relative;
	margin: auto auto 0% auto;
	font-size: 90%;
	color: rgba(5,14,51,1);
	text-transform: uppercase;
	font-family: 'Voltaire';
}
.about0102 p span {
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 140%;
	color: rgba(5,14,51,1);
}
.about0102 p span2 {
	color:rgba(56,0,76,0.6);
	font-size:105%;
	font-family: 'Playfair Display', Times;
	font-style:italic;
}
.title {
	position: absolute;
	left: 15%;
	top: 0;
	margin: -94px auto auto auto;
	width: auto;
	height: auto;
	font-size: 320%;
	color: rgba(255,255,255,1);
	text-transform: uppercase;
	font-weight: 400;
	font-family: 'Playfair Display', Times;
	text-shadow: 0px -10px 10px rgba(0,0,0,0.8);
}


/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- CONTACT ---------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.contact01 {
	position: relative;
	margin: auto;
	padding: 12% 0% 10% 0%;
	width: 100%;
	height: auto;
	background-color: #FFF;
	background-image:url(../images/pnp_bkgd001.png);
	background-repeat: no-repeat;
	background-position: top left;
}
.contact0101 {
	position: relative;
	margin: auto;
	padding: 1% 0%;
	width: 100%;
	height: auto;
}
.contact0101 h2 {
	position: relative;
	margin: auto auto 1% auto;
	width: auto;
	height: auto;
	letter-spacing: 8px;
	font-weight: 700;
}
.contact0101 p {
	position: relative;
	margin: auto;
	font-size: 70%;
	font-weight: 400;
	color: rgba(0,0,0,0.65);
}
.contact0101 ul {
	position: relative;
	margin: auto;
	width: auto;
	height: auto;
}
.contact0101 ul li {
	position: relative;
	margin: auto 6%;
	width: 15%;
	height: auto;
	display: inline-block;
}
.contact0101 ul li a img {
	position: relative;
	margin: auto auto 3% auto;
	width: 100%;
	height: auto;
}
.contact0101 ul li a img:hover {
	width: 95%;
	-webkit-animation-name: myfadr6;
    -webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
    animation-name: myfadr6;
    animation-duration: 1s;
	animation-iteration-count: 1;
}
@-webkit-keyframes myfadr6 {
	from  {width: 100%;}
	to    {width: 95%;}
}
@keyframes myfadr6 {
	from  {width: 100%;}
	to    {width: 95%;}
}

.contact0101 ul li p {
	position: relative;
	margin: auto;
	font-size: 50%;
	font-weight: 700;
}

.contact0102 {
	position: relative;
	margin: auto;
	padding: 5% 0% 0% 0%;
	width: 100%;
	height: auto;
}
.contact0102 form p {
	font-size: 70%;
	color: rgba(0,0,0,0.75);
}
.contact0102 form {
	position: relative;
	margin: auto;
	padding: 0px;
	width: 80%;
	height: auto;
	text-align: left;
}
.contact0102 form h2 {
	font-size: 160%;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(0,0,0,0.5);
	margin: auto;
	text-align: center;
}
.contact0102 form #name {
	position: relative;
	margin: 10px auto;
	width: 100%;
	padding: 0.75%;
	font-size: 80%;
	color: rgba(0,0,0,0.75);
	border: 2px solid #FFF;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.15);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
}

.contact0102 form #email {
	position: relative;
	margin: 10px auto;
	width: 100%;
	padding: 0.75%;
	font-size: 80%;
	color: rgba(0,0,0,0.75);
	border: 2px solid #FFF;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.15);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
}
		
.contact0102 form #message {
	position: relative;
	margin: 10px auto;
	width: 100%;
	height: auto;
	min-height: 100px;
	padding: 0.5%;
	font-size: 80%;
	color: rgba(0,0,0,0.7);
	border: 2px solid #FFF;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.15);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.contact0102 form #phone {
	position: relative;
	margin: 10px auto;
	width: 60%;
	padding: 0.75%;
	font-size: 80%;
	color: rgba(0,0,0,0.75);
	border: 2px solid #FFF;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.15);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
}
.contact0102 form #website {
	position: relative;
	margin: 10px auto;
	width: 100%;
	padding: 0.75%;
	font-size: 80%;
	color: rgba(0,0,0,0.75);
	border: 2px solid #FFF;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.15);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
}
.contact0102 form #dropdown {
	position: relative;
	margin: 10px auto;
	width: 80%;
	padding: 0.75%;
	font-size: 80%;
	color: rgba(0,0,0,0.75);
	border: 2px solid #FFF;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.15);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
}
.contact0102 form #send_btn {
	position: relative;
	margin: auto;
	padding: 2% 3%;
	border: 2px solid rgba(0,0,0,0.1);
	background-color: rgba(0,0,0,0);
	color: #000;
	font-size: 70%;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	letter-spacing: 3px;
	font-family: "Comfortaa";
}
.contact0102 form #send_btn:hover {
	color: #fff;
	cursor: pointer;
	background-color: rgba(0,0,0,1);
	-webkit-animation-name: myfadr2;
    -webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 1;
    animation-name: myfadr2;
    animation-duration: 0.5s;
	animation-iteration-count: 1;
}


/* ===========================================================================================================================================================
   ===== FOOTER ============================================================================================================================================== 
   =========================================================================================================================================================== */
   
footer {
	position: relative;
	margin: auto;
	width: 100%;
	padding: 3% 0%;
	height: auto;
	background-color: #e5e5e5;
	color: rgba(56,0,76,1);
	border-top: 0px solid rgba(56,0,76,1);
	box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8);
	z-index: 666;
	text-align: right;
}
footer span img {
    position: absolute;
    top: 30%;
    left: 5%;
    margin: 0% auto;
    width: 40%;
    height: auto;
    display: inline-block;
    opacity: 1;
}

footer p {
	position: relative;
	margin: 1% auto;
	width: 90%;
	height: auto;
	font-size: 45%;
	color: rgba(56,0,76,1);
    font-weight:700;
	text-transform:uppercase;
}

footer p img, footer p a img {
	position: relative;
	margin: auto auto auto .5%;
	width: 100%;
	max-width: 40px;
	height: auto;
	border-radius: 4px;
	opacity: 1;
	transition: 0.25s;
}
footer p img:hover, footer p a img:hover {
	opacity: 0.6;
}
footer p a:link, footer a:visited {
	position: relative;
	margin:0% 0.5%;
	font-size: 150%;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(56,0,76,1);
	font-family: 'Playfair Display', sans-serif;
	transition: 0.25s;
}
footer p a:hover {
	color: rgba(56,0,76,0.5);
}




.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {}

/* ===========================================================================================================================================================
   ===== MEDIA QUERIES ======================================================================================================================================= 
   =========================================================================================================================================================== */
   
@media only screen and (min-width : 100px) and (max-width : 768px) {
	
	
/* ===========================================================================================================================================================
   ===== NAVIGATION ========================================================================================================================================== 
   =========================================================================================================================================================== */

	nav {
		display: none;
	}

	.nav_mobile {
		display: inline-block;
		position: fixed;
		margin: auto;
		padding: 10px 0px 10px 0px;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 50px;
		background-color: rgba(56,0,76,0.8);
		background-image: url(../images/mog_nav002.png);
		box-shadow: 0px 0px 15px rgba(0,0,0,1);
		z-index: 999;
		border-bottom: 3px solid rgba(245,223,159,1);
	}
	.nav_mobile img {
		position: absolute;
		right: 5%;
		top: 10px;
		margin:auto;
		width: auto;
		height:50px;
		z-index:1000;
		display: inline-block;
	}
	.nav_btn1 {
		position: absolute;
		top: 10px;
		left: 10px;
		margin:  auto;
		width: 50px;
		height: 50px;
	}
	.nav_btn1:hover {
		cursor: pointer;
	}
	.nav_btn1 img {
		position: relative;
		margin: auto;
		width: 100%;
		height: auto;
		right: auto;
		top: auto;
		display: inline-block;
	}
	.nav_content1 {
		position: fixed;
		top: 73px;
		left: 0px;
		width: 100%;
		height: auto;
		padding: 0% 0%;
		background-color: rgba(255,255,255,1);
		color: rgba(56,0,76,1);
		box-shadow: 0px 10px 10px rgba(0,0,0,0.5);
	}
	.nav_content1 ul {
		position: relative;
		margin: auto;
		width: 100%;
		height: auto;
	}
	.nav_content1 ul li {
		position: relative;
		margin: auto auto;
		padding: 1% 0% 5% 0%;
		width: 100%;
		height: auto;
		display: inline-block;
		font-weight: 400;
		font-size: 45%;
		letter-spacing: 1pt;
		text-transform: uppercase;
		color: rgba(56,0,76,1);
		text-align: left;
		font-family: 'Poppins', sans-serif;
		border-bottom: 1px solid rgba(56,0,76,0.1);
		transition: 0.3s
	}
	.nav_content1 ul li:hover {
		background-color: rgba(56,0,76,0.2);
	}
	.nav_content1 ul li a {
		color: rgba(56,0,76,1);
	}
	.nav_content1 ul li a img {
		position: relative;
		margin: 0% 0% 0% 10%;
		width: 35px;
		height: auto;
		opacity: 1;
		display: inline-block;
	}
	.nav_content1 ul li a p {
		display: inline-block;
	}
	
		
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- INDEX -----------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

	.index01 {
		position: relative;
		margin: 70px auto auto auto;
		width: 100%;
		height: auto;
	}

	.index02 {
		position: relative;
		margin: -10px auto auto auto;
		padding: 0% 0% 0% 0%;
		width: 100%;
		height: auto;
		background-color: rgba(56,0,76,1);
		background-image: url(http://weathersbyink.com/mog/images/mog_index02A.jpg);
		background-position: top center;
	}
	.index02 span11 img {
		position: absolute;
		margin: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
		display:none;
	}
	.index02 span22 img {
		position: absolute;
		margin: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
		display:block;
	}
	.index02 img {
		display: none;
	}
	.index02 ul {
		position: relative;
		margin: auto;
		width: 98%;
		height:auto;
		text-align: center;
	}
	.index02 ul li {
		position: relative;
		margin: 0% 0% 0% 0%;
		padding: 5% 0%;
		width: 100%;
		height: auto;
		border: 0px solid rgba(243,243,243,1);
		display: inline-block;
		border-radius: 0px;
	}

	.index02 ul li img {
		position: relative;
		margin: 0% 0% 0% 0%;
		padding: 0% 0% 0% 0%;
		width: 25%;
		height: auto;
	}
	.index02 ul li span1 img {
		display: inline-block;
	}
	.index02 ul li span2 img {
		display: inline-block;
	}
	.index02 ul li span3 img {
		display: inline-block;
	}

	.index02 ul li span4 img {
		display: inline-block;
	}

	.index02 h3 {
		position: relative;
		margin: 0% 0% 1% 0%;
		font-size: 80%;
		font-weight: 700;
		text-transform: uppercase;
		color: rgba(255,255,255,1);
	}
	.index02 ul li p {
		position: relative;
		margin: 0% 0% 2% 7.5%;
		width: 85%;
		height: auto;
		font-size: 50%;
		color: rgba(255,255,255,1);
	}
	.index02 ul li a {
		position: relative;
		margin: 2% 0% 0% 0%;
		padding: 1% 15%;
		color: rgba(255,255,255,1);
		border: 2px solid rgba(255,255,255,1);
		background-color: rgba(255,255,255,0);
		text-transform: uppercase;
		font-size: 150%;
		font-weight: 700;
		line-height: 4;
		letter-spacing: 1pt;
	}

	.index03 {
		position: relative;
		margin: auto;
		padding: 70px 0% 5% 0%;
		width: 100%;
		height: auto;
		background-color: #FFF;
		box-shadow: 0px 0px 30px rgba(0,0,0,0.75);
		overflow: hidden;
		z-index: 779;
	}
	.index0301 {
		position: relative;
		margin: auto auto;
		padding: 0% 0%;
		width: 100%;
		height: auto;
		display: inline-block;
	}
	.index0302 {
		position: relative;
		margin: 5% 0% 0% 0%;
		padding: 0% 0% 0% 5%;
		width: 90%;
		max-height: inherit;
		display: inline-block;
		text-align: left;
		float: none;
		overflow-y: hidden;
		overflow-x: hidden;
	}
	.index0302 h2 {
		text-transform: uppercase;
		text-align: center;
		font-size: 100%;
		font-weight: 700;
		color: rgba(56,0,76,1);
	}
	.index0302 table {
		position: relative;
		margin: auto auto 5% auto;
		padding: 0% 0%;
		width: 100%;
		color: rgba(0,0,0,0.65);
		font-size: 60%;
		text-align: left;
	}
	.index0302 table tr td {
		padding: 1% 0%;
		color: rgba(0,0,0,0.65);
	}
	.index0302 a {
		position: relative;
		margin: auto;
		width: auto;
		height: auto;
		padding: 2% 6%;
		color: rgba(56,0,76,1);
		background-color:rgba(56,0,76,0);
		border: 2px solid rgba(56,0,76,1);
		font-weight: 700;
		font-size: 50%;
		text-transform: uppercase;
		line-height: 4;
	}
	
	.index04 {
		position: relative;
		margin: auto;
		padding: 20% 0% 5% 0%;
		width: 100%;
		height: auto;
		background-color: rgba(56,0,76,1);
		background-image:url(../images/mog_index04_001.png);
		background-repeat:repeat-x;
		background-position: top right;
		overflow: hidden;
	}
	#scroll04 {
		position: relative;
		margin: -35% auto auto auto;
		width: 100%;
		height: auto;
		float: right;
	}
	.index04 h2 {
		position: relative;
		margin: auto;
		padding: 0;
		width: auto;
		height: auto;
		font-family: 'Playfair Display', Times;
		font-size: 200%;
		color: #FFF;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0px;
		text-shadow: 0px 0px 15px rgba(0,0,0,1);
	}
	.index04 ul {
		position: relative;
		margin: auto;
		width: 100%;
		height: auto;
	}
	.index04 ul li {
		position: relative;
		margin: auto 0%;
		padding: 2% 0%;
		width: 100%;
		height: auto;
		display: inline-block;
	}
	.index04 ul li img {
		position: relative;
		margin: auto auto auto auto;
		width: 25%;
		height: auto;
	}
	.index04 ul li h3 {
		position: relative;
		margin: auto auto 3% auto;
		padding: 0;
		width: auto;
		height: auto;
		font-family: 'Playfair Display', Times;
		font-size: 100%;
		color: #FFF;
		font-weight: 400;
		text-transform: uppercase;
	}
	.index04 ul li p {
		position: relative;
		margin: auto auto 2% auto;
		width: 80%;
		height: auto;
		color: rgba(255,255,255,0.9);
		font-size: 55%;
		text-shadow: 0px 0px 5px rgba(0,0,0,1);
	}
	.index04 ul li a {
		position: relative;
		margin: auto auto 2% auto;
		padding: 1% 2%;
		width: auto;
		height: auto;
		font-size: 40%;
		color: #FFF;
		font-weight: 700;
		text-transform: uppercase;
		border-radius: 3px;
		background-color: rgba(0,0,0,0.8);
		border: 2px solid rgba(255,255,255,0);
	}
	.index04 p {
		position: relative;
		margin: auto auto 2% auto;
		z-index: 111;
		color: #FFF;
		font-size: 70%;
		text-transform: none;
		font-weight: 400;
		font-family: 'Playfair Display', Times;
	}

	
	
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- ABOUT -----------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

	#parallax01 {
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		width: 100%;
		height: 300px;
		background-image:url(../images/mog_footer001.png);
	}
	.about01 {
		position: relative;
		margin: 155px auto auto auto;
		padding: 5% 0% 10% 0%;
		width: 100%;
		height: auto;
		background-color: rgba(255,255,255,1);
		box-shadow: 0px 0px 50px rgba(0,0,0,0.8);
		background-image: url(../images/mog_logo_bknd001.png);
		background-repeat: no-repeat;
		background-position: 80% 90%;
		background-attachment: fixed;
	}
	.about0101 {
		position: relative;
		margin: auto auto auto 2.5%;
		width: 22.5%;
		height: auto;
		display: inline-block;
		float: left;
	}
	.about0101 ul {
		position: relative;
		margin: auto;
		width: 100%;
		height: auto;
	}
	.about0101 ul a li {
		position: relative;
		margin: auto auto 3% auto;
		width: auto;
		height: auto;
		padding: 2% 5% 2% 0%;
		text-align: center;
		border-top: 1px solid rgba(56,0,76,0);
		border-right: 1px solid rgba(56,0,76,0);
		border-bottom: 1px solid rgba(56,0,76,1);
		border-left: 1px solid rgba(56,0,76,0);
		background-color: rgba(56,0,76,0);
		color: rgba(56,0,76,1);
		font-size: 48%;
		border-radius: 0px;
		text-transform: uppercase;
	}
	.about0102 {
		position: relative;
		margin: auto 2.5% auto auto;
		width: 67.5%;
		height: auto;
		display: inline-block;
		color: rgba(0,0,0,0.7);
		font-family: 'Titillium Web';
		text-align: justify;
	}
	.about0102 h2 {
		position: relative;
		margin: auto auto 4% auto;
		font-size: 90%;
		color: rgba(56,0,76,1);
		text-transform: uppercase;
		font-family: 'Playfair Display', Times;
	}
	.about0102 h4 {
		font-weight:400;
		font-size: 140%;
		color: rgba(56,0,76,1);
		font-family: 'Playfair Display', Times;
		text-align: left;
		position: relative;
		margin: auto auto 1% auto;
	}
	.about0102 p {
		position: relative;
		margin: auto auto 3% auto;
		font-size: 53%;
		font-family: 'Poppins', sans-serif;
		color: rgba(0,0,0,0.7);
	}
	.about0102 img {
		position:relative;
		margin:auto 3% 1% auto;
		padding: 0%;
		width:70%;
		height:auto;
		display:inline-block;
		border: 1px solid #c2b2cd;	
	}
	.about0102 h3 {
		position: relative;
		margin: auto auto 0% auto;
		font-size: 90%;
		color: rgba(5,14,51,1);
		text-transform: uppercase;
		font-family: 'Voltaire';
	}
	.about0102 p span {
		position: relative;
		margin: auto;
		width: 100%;
		height: auto;
		text-align: center;
		font-size: 140%;
		color: rgba(5,14,51,1);
	}
	.about0102 p span2 {
		margin: 0% 0% 0% 0%;
		color:rgba(56,0,76,0.6);
		font-size:100%;
		font-family: 'Poppins', sans-serif;
		font-style:italic;
		line-height: 1;
	}
	.title {
		position: absolute;
		left: 5%;
		top: 0;
		margin: -38px auto auto auto;
		width: auto;
		height: auto;
		font-size: 130%;
		color: rgba(255,255,255,1);
		text-transform: uppercase;
		font-weight: 400;
		font-family: 'Playfair Display', Times;
		text-shadow: 0px -10px 10px rgba(0,0,0,0.8);
	}
	.about0102 table tbody tr {
		font-size: 80%;
	}
	
	
	
	
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- CONTACT ---------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.contact01 {
	padding: 15% 0% 10% 0%;
}
.contact0101 {
	padding: 2% 0%;
}
.contact0101 h2 {
	position: relative;
	margin: auto auto 1% auto;
	width: auto;
	height: auto;
	letter-spacing: 4px;
	font-weight: 700;
}
.contact0101 p {
	position: relative;
	margin: auto;
	width: 90%;
	height: auto;
	font-size: 60%;
	font-weight: 700;
	color: rgba(0,0,0,0.65);
}
.contact0101 ul {
	position: relative;
	margin: auto;
	width: auto;
	height: auto;
}
.contact0101 ul li {
	position: relative;
	margin: 3% 6%;
	width: 50%;
	height: auto;
	display: inline-block;
}
.contact0101 ul li a img {
	position: relative;
	margin: auto auto 3% auto;
	width: 100%;
	height: auto;
}
.contact0101 ul li a img:hover {
	width: 100%;
	-webkit-animation-name: none;
    -webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
    animation-name: none;
    animation-duration: 1s;
	animation-iteration-count: 1;
}
.contact0101 ul li p {
	position: relative;
	margin: auto;
	font-size: 60%;
	font-weight: 700;
}


/* ===========================================================================================================================================================
   ===== FOOTER ============================================================================================================================================== 
   =========================================================================================================================================================== */
   
footer {
	position: relative;
	margin: auto;
	width: 100%;
	padding: 3% 0%;
	height: auto;
	background-image: url(../images/mog_footer002.png);
	background-color: rgba(238,212,132,1);
	color: rgba(56,0,76,1);
	border-top: 6px solid rgba(56,0,76,1);
	box-shadow: inset 0px 0px 40px rgba(38,28,0,0.95);
	z-index: 666;
	text-align: center;
}
footer span img {
    position: relative;
    top: 30%;
    left: 0%;
    margin: 2% auto;
    width: 80%;
    height: auto;
    display: inline-block;
    opacity: 1;
}
footer p {
	position: relative;
	margin: 1% auto;
	width: 90%;
	height: auto;
	font-size: 45%;
	color: rgba(56,0,76,1);
    font-weight:700;
	text-transform:uppercase;
}

footer p img, footer p a img {
	position: relative;
	margin: auto auto auto .5%;
	width: 100%;
	max-width: 40px;
	height: auto;
	border-radius: 4px;
	opacity: 1;
}
footer p a:link, footer a:visited {
	position: relative;
	margin:2% 0.5%;
	font-size: 100%;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(56,0,76,1);
	font-family: 'Playfair Display', sans-serif;
}

}