.h-dblue {
	color: #022b52;
}
.h-mblue {
	color: #0b4881;
}
.h-yell {
	color: #fbcc45;
}
.h-gray {
	color: #2b2b2b;
}
.b-dblue {
	background-color: #022b52;
}
.b-mblue {
	background-color: #0b4881;
}
.b-yell {
	background-color: #fbcc45;
}
.b-gray {
	background-color: #ebebeb;
}
.b-dgray {
	background-color: #2b2b2b;
}
.form-group {
	margin: 10px auto;
}
#register_form{
	height: 300px;
	z-index: 1;
}
#register_form > div {
	position:relative; 
	top: -40px;
	left:0px; 
	background-color:#0175be; 
	border-radius:5px; 
	box-shadow: 0 0 50px 5px #171717;
}
#register_form > div > div {
	border-radius: 3px; 
	padding: 0px 20px;
}
#pc {
	z-index: 2;
}
#pc > div {
	padding: 0px;
}
#pc > div > img {
	width:100%;
}
#pc > div > img:nth-of-type(2) {
	position: absolute; 
	top: -80px; 
	left: 480px; 
	width: 23%;
}
button {
	border-radius: 5px;
	border: none;
	box-shadow: 0 2px 6px -1px #363636;
}
#showA {
	position: absolute;
	top: -60px; 
	left: 250px;
	transform: rotate(20deg);
	display: none;
	z-index: 3;
	-webkit-animation: opacityArr 2s ease-in-out; /* Chrome, Safari, Opera */
    animation: opacityArr 2s ease-in-out;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes opacityArr {
    0%   {opacity: 1;}
	25%   {opacity: 0;}
	50%   {opacity: 1;}
	100%   {opacity: 0;}
	/*15%   {opacity: 0;}
	30%   {opacity: 1;}
	45%   {opacity: 0;}
	60%   {opacity: 1;}
	75%   {opacity: 0;}
	85%   {opacity: 1;}
    100% {opacity: 0;}*/
}

/* Standard syntax */
@keyframes opacityArr {
    0%   {opacity: 1;}
	25%   {opacity: 0;}
	50%   {opacity: 1;}
	100%   {opacity: 0;}
}
a {
	color: #fbcc45;
}
@media screen and (max-width: 367px) {
	#register_form > div {
		position: absolute !important;
		top: 0px !important;
		left: 0px;
	}
	.col-sm-6.col-sm-offset-3 > h1.h-dblue.text-center {
		margin-top: 170px;
	}
	#inputName, #inputEmail {
		width: 70%;
		margin-left: 20px;
	}
	span, h2, h1 {
		font-size: 30px !important;
	}
	#pc, #arrow {
		display: none;
	}
}
@media screen and (min-width: 368px) and (max-width: 581px) {
	#register_form > div {
		position: absolute !important;
		top: 0px !important;
		left: 0px;
	}
	.col-sm-6.col-sm-offset-3 > h1.h-dblue.text-center {
		margin-top: 140px;
	}
	#pc, #arrow {
		display: none;
	}
	span, h2, h1 {
		font-size: 32px !important;
	}

}
@media screen and (min-width: 582px) and (max-width: 767px) {
	#register_form > div {
		position: absolute !important;
		top: 0px;
		left: 0px;
	}
	#pc, #arrow {
		display: none;
	}
}
@media screen and (min-width: 768px) and (max-width: 1300px){	
	.col-sm-offset-3 {
		margin-left: 8%;
	}
	.col-sm-1 {
		width: 14%;
	}
	.col-sm-1 img {
		width: 100%;
	}
	.col-sm-2 {
		width: 28%;
	}
	.col-sm-3 {
		width: 42%;
	}
	.col-sm-4 {
		width: 50%;
	}
	.col-sm-6 {
		width: 84%;
	}
	h2 {
		font-size: 26px;
	}
	h4 {
		font-size: 18px;
	}
	h5 {
		font-size: 16px;
	}
	h6 {
		font-size: 12px;
	}
	#register_form a img {
		width: 45%;
	}
	div.col-sm-2.b-gray {
		height: 100px;
	}
	.form-group input {
		width: 70%;
		height: 40px;
	}
	#pc, #arrow {
		display: none;
	}
}
@media screen and (min-width: 1301px) and (max-width: 1600px){
	#logo {
		width: 70%;
		transform: translateX(0);
	}
	#btn div.col-sm-2 {
		height: 100px !important;
	}
	#pc > div > img:nth-of-type(2) {
		width: 25%;
		transform: translateX(-60%);
	}
	div.col-sm-1 img {
		width: 80%;
	}
	.col-sm-2 {
		width: 23.33333%;
	}
	.col-sm-3, #register_form {
		width: 35%;
	}
	.col-sm-4 {
		width: 45%;
	}
	.col-sm-6 {
		width: 70%;
	}
	.col-sm-offset-3 {
		margin-left: 15%;	
	}
	#arrow {
		width:70%;
		transform: translate(25%, 10%);
	}	
}
@media screen and (min-width: 1601px) and (max-width: 1900px){
	#logo {
		width: 100%;
		transform: translateX(0);
	}
	#btn div.col-sm-2 {
		height: 100px !important;
	}
	#pc > div > img:nth-of-type(2) {
		width: 25%;
		transform: translateX(-25%);
	}
	div.col-sm-1 img {
		width: 80%;
	}
	.col-sm-1 {
		width: 10%;
	}
	.col-sm-2 {
		width: 20%;
	}
	.col-sm-3, #register_form {
		width: 30%;
	}
	.col-sm-4 {
		width: 40%;
	}
	.col-sm-6 {
		width: 60%;
	}
	.col-sm-offset-3 {
		margin-left: 20%;
	}
	#arrow {
		width:70%;
		transform: translate(25%, 10%);
	}
}
@media screen and (min-width: 1900px) {
	#logo {
		width: 100%;
		transform: translateX(0);
	}
	#btn div.col-sm-2 {
		height: 100px !important;
	}
	div.col-sm-2 img {
		width: 50%;
		transform: translateX(130%);
		max-width: 180px;
	}
	#arrow {
		width: 100%;
		transform: translate(25%, 10%);
	}
}