body {
	margin:0;
	padding:0;
	font-family: Montserrat, "Yu Gothic", YuGothic, sans-serif;
	font-size:16px;
	line-height:180%;
	min-width:1000px;
	-webkit-text-size-adjust: 100%;	
	/*background:linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)),url(front_end/image/top/main.png);*/
	/*background-repeat:no-repeat;*/
	background-color:rgba(99,197,218,0.1);
	background-blend-mode:multiply;
	background-size:cover;
	background-attachment:fixed; 	
}
img {
	border:none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
}

a:link {color:#06F; outline:none; }
a:visited {color:#06F; }
a:hover {color:#333; }
a:hover img { opacity:0.7; filter:alpha(opacity=70); -moz-opacity:0.7; }

#wrapper {}
.base {}

.pc { display:block; }
.sm { display:none; }


/*====================================================================================================
  HEADER
====================================================================================================*/
#header { width:100%; z-index:999; position:fixed; top:0; background:#eff9fb; }
#header .navbar-buttons {
	width: auto;
	justify-content: space-between;
	align-items: center;
	margin:0;
	position:fixed;
	top:30px;
	right:0;
}
#header .navbar-buttons::after { display:block; clear:both; content:""; }
#header .navbar-buttons .button {
	background-color: rgba(44, 45, 47, 0.749);
	width: 115px;
	height: 30px;
	margin-right:30px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	float:right;
	cursor: pointer;
	transition: transform 0.30s;
}
#header .navbar-buttons .button:hover { transform: scale(1.1); }
#header .navbar-buttons .button a { text-decoration:none; font-size: 12px; color:#fff; }
#header .navbar-buttons button:focus { outline: 0; }

#header .head { max-width:800px; margin:0 auto; padding-top:50px; }
#header .head::after { display:block; clear:both; content:""; }
#header .head .logo { float:left; width:350px; margin:0 auto 50px; }
#header .head .logo img { width:100%; height:auto; }
#header .head .nav { float:right; width:400px; margin:30px 0; }
#header .head .nav ul {}
#header .head .nav ul::after { display:block; clear:both; content:""; }
#header .head .nav ul li { position:relative; float:left; width:25%; }
#header .head .nav ul li a {
	display:block;
	text-decoration:none;
	color:#0A1172;
	text-align:center;
	font-size:119%;
	font-weight:500;
}
#header .head .nav ul li::before,
#header .head .nav ul li::after {
	display:inline-block;
	clear:both;
	content:"";
	position:absolute;
	bottom:-15px;
	width:0;
	height:3px;
	background:#0A1172;
	transition: 0.3s ease-out;
}
#header .head .nav ul li:before {left: 50%;}
#header .head .nav ul li:after { right: 50%;}
#header .head .nav ul li:hover:before,
#header .head .nav ul li:hover:after { width:50%; }


/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { /*clear:both; position:relative;*/ width:100%; }



/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer {
	width:750px;
	margin:0 auto 20px;
	text-align:center;
	padding-top:50px;
	border-top:1px solid #DADADA;
}
#footer .f_contact { clear:both; width:100%; max-width:220px; margin:20px auto; }
#footer .f_contact::after { clear:both; content:""; display:block; }
#footer .f_contact div { width:60px; height:60px; background:rgba(255,255,255,.8); float:left; text-align:center; border-radius:40px; }
#footer .f_contact div+div { margin-left:20px; }
#footer .f_contact div a { display:block; padding:10px; }
#footer .f_contact div.tel a { padding:13px; }
#footer .f_contact div.facebook a { padding:11px; }
#footer .f_contact img { width:20px; }

#footer .hours { color:#0A1172; }
#footer .hours h4 { letter-spacing:0.1em; }
#footer .hours p { font-size:88%; line-height:150%; }

#footer ul.f_nav { clear:both; width:100%; max-width:355px; margin:50px auto 20px; }
#footer ul.f_nav::after { clear:both; content:""; display:block; }
#footer ul.f_nav li { float:left; }
#footer ul.f_nav li+li a { border-left:1px solid #c1c1c1; }
#footer ul.f_nav li a { text-decoration:none; color:#0A1172; padding:0 15px; font-weight:bold; font-size:88%; }
#footer ul.f_nav li a:hover { color:rgba(99,197,218,.5); }

/* BANNER */
#footer .banner { max-width:750px; margin:30px auto 0; color:#0A1172; }
#footer .banner p { margin-bottom:20px; }
#footer .banner ul { width:100%; }
#footer .banner ul::after { display:block; clear:both; content:""; }
#footer .banner ul li { float:left; width:240px; margin:0 5px; }
#footer .banner ul li img { width:100%; }

#footer .copyright {
	font-size:63%;
	color:#0A1172;
	padding:12px 0;
}

/*====================================================================================================
  DEVICE [No Touch]
====================================================================================================*/
#device { display:none; background:#FFF; padding:20px; text-align:center; }
#device::after {}
#device p {}
#device p a {
	display:block;
	padding:10px;
	color:#555;
	text-decoration:none;
	background:#EEE;
	border:1px solid #DDD;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}


/*====================================================================================================
  PAGE [No Touch]
====================================================================================================*/
#page,
#page a { display:block; width:51px; height:51px;}
#page { position: fixed; bottom:130px; right: 20px;}
#page a {
	text-indent: -9999px;
}


/*====================================================================================================
  TOPPAGE 
====================================================================================================*/
#toppage { font-family:"Montserrat"; max-width:1000px; margin:200px auto 0; }
#toppage h2 { text-align:center; color:#0A1172; }

/* MAINIMG */
#toppage .mainimg {}


/* ABOUT */
#toppage .about { margin:170px 0 50px; width:100%; }
#toppage .about ul { width:100%; height:auto; margin:30px 0; }
#toppage .about ul li { width:250px!important; }
#toppage .about ul li:nth-child(odd) { background:#EEE; }
#toppage .about ul li:nth-child(even) { background:#FFF; }
#toppage .about ul li img { width:100%; }
#toppage .about .come { width:750px; font-size:100%; color:#0A1172; margin:0 auto; text-align:center; }


/* NEWS */
#toppage .news { max-width:750px; margin:200px auto 100px; }
#toppage .news::after { display:block; clear:both; content:""; }
#toppage .news h2 { float:left; margin:60px 0; }
#toppage .news table { float:right; width:75%; }
#toppage .news table td { color:#0A1172; }
#toppage .news table td:nth-child(1) { width:20%; text-align:center; }
#toppage .news table td:nth-child(2) {}
#toppage .news table td a { text-decoration:none; color:#0A1172; text-align:justify; }
#toppage .news table td a:hover { text-decoration:underline; }


/* ACCESS */
#toppage .access { max-width:750px; margin:200px auto 100px; }
#toppage .access iframe { display:block; width:750px; height:300px; margin:30px auto; }
#toppage .access p { text-align:center; color:#0A1172; }









#subpage { margin:75px auto 100px; max-width: 1000px; }
#subpage h2 { font-family:"Yu Gothic"; font-size:250%; font-weight:500; color:#0A1172; margin-bottom:100px; }


/*====================================================================================================
  LOGIN
====================================================================================================*/
#login { font-family:"Yu Gothic"; }
#login .login_box {
	width:600px;
	margin:300px auto 10%;
	background:#0492c2;
	color:#FFF;
	padding:40px;
	border-radius:20px;
}
#login .login_box label {}
#login .login_box input { width:100%; height:35px; font-size:100%; }
#login .login_box input#submit {
	display:block;
	width:50%;
	height:30px;
	margin:40px auto 10px;
	background:#0A1172;	
	cursor:pointer;
	color:#FFF;
	border:1px outset #0A1172;
}
#login .login_box p { text-align:center; line-height:100%; }
#login .login_box p a { color:#0A1172; }


/*====================================================================================================
  REGISTRATION
====================================================================================================*/
#register { font-family:"Yu Gothic"; max-width:750px; margin:10% auto; }
#register h2 {}
#register form { width:90%; margin:0 auto; }
#register form::after { display:block; clear:both; content:""; }
#register form h3 {}
#register form label { width:30%; float:left; font-weight:500; margin:3px 0 0 50px; }
#register form input {
	width:60%;
	height:25px;
	font-size:100%;
	border:1px solid #CECECE;
	background:rgba(116,45,45,.5);
	margin:3px 0;
	border-radius:3px;
	color:#FFF;
}
#register form input#birthday { font-family:"Yu Gothic"; }
#register form input#birthday,
#register form input#contact,
#register form input#code { width:25%; }
#register form input#pass,
#register form input#c-pass { width:30%; }
#register form input#submit {
	width:162px;
	height:43px;
	float:none;
	display:block;
	margin:80px auto 0;
	text-align:center;
	color:#FFF;
	background:#C97575;
	border:1px solid #CECECE;
	border-radius:13px;
	font-size:125%;
	font-weight:bold;
	padding:10px 0;
	cursor:pointer;
}
#register form p { font-size:75%; font-weight:500; line-height:100%; text-align:center; margin-top:10px; }


/*====================================================================================================
  PRODUCTS 
====================================================================================================*/
#products { font-family:"Yu Gothic"; max-width:1000px; margin:auto; width:100%; }
#products > div { position:relative; }
#products .search { width:100%; display:flex; margin-bottom:5%; }
#products .searchTerm {
	width:100%;
	border:2px solid #0A1172;
	border-right:none;
	padding:5px;
	height:30px;
	border-radius:5px 0 0 5px;
	outline:none;
	color:#0A1172;
	font-size:113%;
	text-indent:10px;
}
#products .searchTerm:focus{ color:#0A1172; }
#products .searchButton {
	width:55px;
	height:44px;
	border:1px solid #0A1172;
	background:#0A1172;
	text-align:center;
	color:#fff;
	border-radius:0 5px 5px 0;
	cursor:pointer;
}
#products .searchButton img { width:100%; height:100%; }

#products #lockerModal {}
#products #lockerModal button#myBtn { transition:all 1s; }
#products #lockerModal .modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	transition:all 1s;
}
#products #lockerModal .modal .modalContent {
	background-color: #fefefe;
	display:block;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	position:absolute;
	padding: 30px;
	border: 1px solid #888;
	width: 450px;
	height:210px;
	text-align:center;
	font-family:"Montserrat";
	border-radius:10px;
	box-shadow:0 0 10px #DDD;
}
#products #lockerModal .modal .modalContent p { line-height:130%; }
#products #lockerModal .modal .modalContent input {
	display:block;
	width:80%;
	margin:15px auto 30px;
	padding:5px 0;
	font-size:113%;
	text-align:center;
	background:rgba(99,197,218,0.1);
}
#products #lockerModal .modal .modalContent button {
	text-align:center;
	width:75px;
	margin:0 3px;
	border:none;
	padding:10px 0;
	border-radius:3px;
	font-size:113%;
	font-weight:500;
	cursor:pointer;
}
#products #lockerModal .modal .modalContent button#btn_ok { background:#0A1172; color:#FFF; }

#products #categories { margin:5% auto; background:#f6f6f6; padding:4% 2%; text-align:center; border-radius:5px; }
#products #categories h4 { margin:auto; position:relative; font-size:140%; color:#0A1172; }
#products #categories h4::after {
	position:absolute;
	content:"";
	background:#0A1172;
	width:190px;
	height:3px;
	margin:auto;
	left:0;
	right:0;
	bottom:-10px;
}
#products #categories ul { margin:5% auto auto; clear:both; width:900px; }
#products #categories ul::after { clear:both; content:""; display:block; }
#products #categories ul li { float:left; width:14.28%; }
#products #categories ul li a { text-decoration:none; color:#000; }
#products #categories ul li a.active,
#products #categories ul li a:hover { text-decoration:underline; font-weight:bold; color:#0A1172; }

#products #main-cont {}
#products #main-cont .product_data { clear:both; width:100%; }
#products #main-cont .product_data::after { clear:both; content:""; display:block; }
#products #main-cont .product_data .box { 
	float:left; 
	width:18%; 
	height:100%; 
	border:1px solid #0A1172; 
	margin:1%; 
	text-align:center; 
	position:relative;
}
#products #main-cont .product_data .box:hover { box-shadow:0px 0px 2px 0px rgba(0,0,0,1); cursor:pointer; }
#products #main-cont .product_data .box a { display:block; background:#fff; text-decoration:none; color:#000; }
#products #main-cont .product_data .box .photo { overflow:hidden; height:235px; padding:3%; }
#products #main-cont .product_data .box .photo img { width:100%; height:100%; transition:all 1s; object-fit:cover; }
#products #main-cont .product_data .box:hover .photo img { transform:scale(1.1,1.1); }
#products #main-cont .product_data .box .description { background:#f6f6f6; display:block; padding:30px 2%; height:auto; }
#products #main-cont .product_data .box .description h4.name { 
	font-size:115%; 
	margin:auto; 
	line-height:120%;
	text-overflow:ellipsis; 
	overflow:hidden; 
	display:block;
	width:100%;
}
#products #main-cont .product_data .box .description .code { font-weight:bold; font-size:90%; margin-top:2%; }
#products #main-cont .product_data .box .description .type { font-size:88%; }
#products #main-cont .product_data .box .description .price { font-size:88%; }


/*====================================================================================================
  PAGE LOADING EFFECT
====================================================================================================*/
#products .loader {
	position:absolute;
	left:0;
	right:0;
	top:250px;
	margin:auto;
	color: #0A1172;
	font-size: 30px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	z-index:9999;
	text-indent: -9999em;
	-webkit-animation: load4 1.3s infinite linear;
	animation: load4 1.3s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}



/*====================================================================================================
  PAGINATION
====================================================================================================*/
ul#pagination { font-family:"Yu Gothic"; clear:both; width:100%; margin:5% auto auto; }
ul#pagination::after { clear:both; content:""; display:block; }
ul#pagination li { position:relative; float:left; width:50px; height:50px; text-align:center; }
ul#pagination li a { text-decoration:none; color:#000; display:block; padding:22% 2%; }
ul#pagination li.arrow a { padding:27% 2%; }
ul#pagination li a:hover:not(.active) { background:#d1d1d1; color:#0A1172; }
ul#pagination li.arrow a:hover:not(.active) { background:none; opacity:0.7; }
ul#pagination li a.active { background:#0A1172; color:#fff; }
ul#pagination li a img { width:10px; margin:7px auto auto; display:block; }

/*====================================================================================================
  PAGINATION LOADING EFFECT
====================================================================================================*/
ul#pagination li .loader {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	color:#FFF;
	margin:auto;
	font-size: 6px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	text-indent: -9999em;
	-webkit-animation: load5 1.1s infinite ease;
	animation: load5 1.1s infinite ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}


/*====================================================================================================
  MATERIALS 
====================================================================================================*/
#materials {}


/*====================================================================================================
  CONTACT
====================================================================================================*/
#contact { font-family:"Yu Gothic"; margin:10% 0; }
#contact h3.come { text-align:center; font-size:113%; font-weight:500; line-height:150%; color:#0A1172; }
#contact .box { margin-top:50px; color:#0A1172; }
#contact .box form { width:800px; margin:0 auto; }
#contact .box form li {
	text-align:center;
}
#contact .box form strong {
	text-align:center;
	font-size:200%;
	box-sizing:border-box;
	border-radius:5px;
	border-left:3px solid #5CB85C;
	padding:20px;
}
#contact .box form label { display:inline-block; width:20%; color:#0A1172; }
#contact .box form textarea {
	height:200px;
	width:100%;
	font-size:113%;
	font-weight:500;
	background:rgba(99,197,218,.5);
	color:#0A1172;
	border:1px solid #CECECE;
}
#contact .box form input {
	width:79%;
	height:25px;
	font-size:105%;
	margin:5px 0;
	background:rgba(99,197,218,.5);
	color:#0A1172;
	border:1px solid #CECECE;
}
#contact .box form input[type="file"] {
	display:block;
	width:auto;
	margin:5px auto;
	height:auto;
}
#contact .box form p { text-align:center; }
#contact .box form #submit {
	display:block;
	margin:40px auto 0;
	width:250px;
	height:50px;
	font-size:150%;
	font-weight:bold;
	border-radius:50px;
	background:#0492C2;
	color:#FFF;
	cursor:pointer;
	border:none;
}