/*-----------------------------------------------------

    Title :  MMO News
    Usage :  Homepage
    Edited:  2016-04-21 20:51

-------------------------------------------------------

    1. branding
    2. contact
    3. responsive ( 479px)

-------------------------------------------------------*/



/*  1. branding
-------------------------------------------------------*/

#branding {
	max-width: 600px;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	text-align: center;
	}

#branding h1 {
	font-size: 73px;
	font-family: Roboto, sans-serif;
	}

#branding h1 abbr {
	cursor: help;
	}

#branding p {
	margin-top: 10px;
	font-size: 25.8px;
	}

#branding button {
	position: absolute;
	bottom: 15px;
	right: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.5;
	width: 55px;
	height: 55px;
	font-size: 0;
	text-decoration: none;
	background: none;
	border: 2px solid #fff;
	border-radius: 50%;
	transition: opacity 500ms, transform 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

#branding button:hover {
	opacity: 1;
	transform: rotate(360deg);
	}

#branding button::before {
	content: "\f003";
	display: block;
	width: 100%;
	font-size: 23px;
	font-family: "Font Awesome";
	text-align: center;
	transition: transform 200ms;
	}

#branding button:active::before {
	transform: scale(1.15);
	}



/*  2. contact
-------------------------------------------------------*/

#contact {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 35px;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	height: 100%;
	font-family: "Open Sans", sans-serif;
	background: rgba(255, 255, 255, 0.7);
	transition: opacity 400ms, visibility 400ms;
	}

#contact.displaying {
	opacity: 1;
	visibility: visible;
	}

#contact .w1 {
	position: relative;
	padding: 30px;
	width: 500px;
	max-width: 100%;
	color: #525252;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	}

#contact .w1 h2 {
	font-size: 42px;
	font-family: Roboto, sans-serif;
	text-transform: uppercase;
	}

#contact .w1 form p {
	clear: both;
	padding-top: 20px;
	}

#contact .w1 form p:nth-of-type(1) {
	float: left;
	}

#contact .w1 form p:nth-of-type(2) {
	float: right;
	}

#contact .w1 form p:nth-of-type(1),
#contact .w1 form p:nth-of-type(2) {
	clear: none;
	width: calc(50% - 15px);
	}

#contact .w1 form p:nth-last-of-type(2) {
	display: none;
	}

#contact .w1 form p:nth-of-type(2)::before {
	content: "|";
	display: inline-block;
	visibility: hidden;
	font-size: 15px;
	}

#contact .w1 form p label {
	font-size: 15px;
	}

#contact .w1 form p label small {
	font-size: 0;
	}

#contact .w1 form p label small::before {
	content: "*";
	color: red;
	font-size: 15px;
	}

#contact .w1 form p input {
	display: block;
	margin-top: 6px;
	padding: 0 12px;
	width: 100%;
	height: 38px;
	color: #222;
	font-size: 15px;
	border: 1px solid #d7d7d7;
	border-radius: 3px;
	transition: border 200ms;
	}

#contact .w1 form p:nth-of-type(1) input,
#contact .w1 form p:nth-of-type(2) input {
	margin-bottom: 6px;
	}

#contact .w1 form p input:focus {
	border-color: #999;
	}

#contact .w1 form p input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
	}

#contact .w1 form p textarea {
	display: block;
	margin-top: 6px;
	padding: 8px 12px;
	width: 100%;
	max-width: 100%;
	min-height: 150px;
	color: #222;
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid #d7d7d7;
	border-radius: 3px;
	transition: border 200ms;
	}

#contact .w1 form p textarea:focus {
	border-color: #999;
	}

#contact .w1 form p button {
	width: 120px;
	height: 46px;
	color: #fff;
	font-size: 15px;
	background: #444;
	border: none;
	border-radius: 3px;
	transition: background 200ms;
	}

#contact .w1 form p button:hover {
	background: #666;
	}

#contact .w1 form p button:active {
	background: #222;
	}

#contact .w1 form + a {
	position: absolute;
	bottom: 40px;
	right: 30px;
	opacity: 0.7;
	font-size: 0;
	text-decoration: none;
	transition: opacity 200ms;
	}

#contact .w1 form + a:hover {
	opacity: 1;
	}

#contact .w1 form + a::before {
	content: "Powered by ";
	vertical-align: middle;
	color: #999;
	font-size: 12px;
	}

#contact .w1 form + a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 53px;
	height: 18px;
	background: url(data:image/png;base64,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)
	}

#contact .w1 > button {
	position: absolute;
	top: -29px;
	right: -29px;
	font-size: 0;
	line-height: 1;
	background: none;
	border: none;
	}

#contact .w1 > button::before {
	content: "\f00d";
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 35px;
	line-height: 1;
	font-family: "Font Awesome";
	text-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
	transition: transform 200ms;
	}

#contact .w1 > button:hover::before {
	transform: scale(1.1);
	}

#contact .w1 > button:active::before {
	transform: scale(1);
	}

#contact .w1 #success {
	position: absolute;
	top: 1px;
	left: 1px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	padding: 19px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	background: #fff;
	border-radius: 10px;
	transition: opacity 400ms, visibility 400ms;
	}

#contact .w1 #success.displaying {
	opacity: 1;
	visibility: visible;
	}

#contact .w1 #success p {
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	}

#contact .w1 #success p::before,
#contact .w1 #success p::after {
	content: "\f00c";
	display: block;
	color: rgb(86, 204, 242);
	font-size: 100px;
	line-height: 1;
	font-family: "Font Awesome";
	}

#contact .w1 #success p::before {
	margin-bottom: 10px;
	}

#contact .w1 #success p::after {
	visibility: hidden;
	margin-top: 10px;
	}



/*  3. responsive ( 479px)
-------------------------------------------------------*/

@media (max-width:  479px) {

/*  1. branding  */

#branding h1 {
	font-size: 50px;
	}

#branding p {
	font-size: 17.8px;
	}

#branding button {
	right: auto;
	left: 50%;
	margin-left: -30px;
	width: 45px;
	height: 45px;
	}

#branding button::before {
	font-size: 19px;
	}


/*  2. contact  */

#contact {
	padding: 15px;
	}

#contact .w1 > button {
	top: -40px;
	right: 0;
	}

#contact .w1 {
	padding: 20px;
	text-align: center;
	}

#contact .w1 form p {
	text-align: left;
	}

#contact .w1 form p:nth-of-type(1),
#contact .w1 form p:nth-of-type(2) {
	width: calc(50% - 10px);
	}

#contact .w1 form p button {
	width: 100%;
	}

#contact .w1 form + a {
	position: static;
	display: inline-block;
	margin-top: 20px;
	}

}