@font-face {
	src: url('../fonts/Exo-Regular.ttf');
	font-family: 'exo';
}

@font-face {
	src: url('../fonts/Exo-Bold.ttf');
	font-family: 'exob';
}

@font-face {
	src: url('../fonts/MyriadPro-Regular.otf');
	font-family: 'mpr';
}

@font-face {
	src: url('../fonts/MyriadPro-Bold.otf');
	font-family: 'mpb';
}


* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance:none;
  outline: none;
}

body {
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 62.5%;
	background-color: #1C3048;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
	text-decoration: none;
}

#container {
	width: 100%;
	height: 100%;
}

#header {
	width: 100%;
	height: 100px;
}

.header-inn {
	width: 100%;
	height: 70px;	
}

#content {
	width: 100%;
	height: 100%;
}

#mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: #000;
	opacity: 0;
	display: none;
}

.wrap {
	width: 60%;
	height: auto;
	margin: 0px auto;
}

.flt {
	float: left;
}

.frt {
	float: right;
}

.clear {
	clear: both;
}

.width70 {
	width: 70%;
	height: auto;
}

.width60 {
	width: 60%;
	height: auto;
}

.width50 {
	width: 50%;
	height: auto;
}

.width40 {
	width: 40%;
	height: auto;
}

.width30 {
	width: 30%;
	height: auto;
}

.width20 {
	width: 20%;
	height: auto;
}

.title {
	width: 100%;
	text-align: center;
	font-size: 2em;
}

.subtitle {
	margin-top: 50px;
	color: #25C0AC;
	font-size: 3em;
	text-align: center;
	font-family: exo;
}


.button {
	display: inline-block; 
	padding: 0.4em 1.5em;
	border: .010em solid #E6B30A; 
	border-radius: .20em;
	background-color: #E6B30A;
	box-shadow: 0 .1em 0.1em -0.1em rgba(0,0,0, 0.8), inset 0 .063em rgba(255,255,255, 0.4), inset 0 -0.1080em rgba(0,0,0, 0.15);
	color: #1D3149;
	text-decoration: none;
    cursor: pointer;
	font: 2.8em 'mpr';
}

.button:hover {
	background-color: #B28500;
	box-shadow: 0 .125em rgba(0,0,0, 0.4), inset 0 .063em rgba(0,0,0, 0.4), inset 0 -0.188em #E6B30A;
}

.button:active {
	background-color: #E6B30A;
	box-shadow: 0 .1em 0.1em -0.1em rgba(0,0,0, 0.8), inset 0 .063em rgba(255,255,255, 0.4), inset 0 -0.1080em rgba(0,0,0, 0.15);
}

@media (max-width: 760px) {
	.wrap {
		width: 90%;
		height: auto;
		margin: 0px auto;
	}
}

@media (max-width: 320px) { 
	.button { 
		padding: 0.8em 1em;
		font-size: 2.5em;
	}
}

.header {
	text-align: right;
	padding-right: 10px;
}