html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,images,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*** GENERAL ***/
html { font-size: 14px; }
body { line-height: 1; width: 100%; height: 100%; min-height: 100%; background: #ffffff; color: #808080; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #00000; }
a { color: #930606; text-decoration: none; }
b,
strong { font-weight: bold; }
i { font-style: italic; }
u { text-decoration: underline; }
a:hover { color: #6a0606; }
:focus { outline: none; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

/*** WRAPPER ***/
#wrapper { padding: 1rem 0; }
#wrapper button.hidden { display: none; }
#wrapper input.hidden { display: none; }
#wrapper .messages .error { background: #a71515; border: 0.1rem solid #f86c6c; color: #fff; padding: 0.5rem; margin: 0.3rem 0; }
#wrapper .messages .error a { color: #fff; text-decoration: underline; }

#wrapper #login { padding-top: 4rem; width: 80%; margin: 0 auto; text-align: center; }
#wrapper #login h1 { text-align: center; color: #272727; font-weight: bold; font-size: 1.6rem; padding: 0.5rem 1.7rem 1.2rem; line-height: 3rem; }
#wrapper #login input { display: inline-block; width: 20rem; margin: 0 0.1rem; padding: 1.1rem; border: 0.2rem solid #c6c6c6; background: #fbfbfb; }
#wrapper #login #submit { width: 18rem; padding: 1.1rem; background: #F0F0F0; border: 0.2rem solid #c6c6c6; cursor: pointer; margin: 1.8rem auto 0; font-weight: bold; text-align: center; }

#wrapper #action { width: 76%; margin: 0 auto; }
#wrapper #action h3 { font-weight: bold; font-size: 1.6rem; padding: 0 1.3rem; line-height: 3rem; color: #272727; text-transform: uppercase; }
#wrapper #action .set { border: 0.2rem solid #c6c6c6; background: #fbfbfb; width: 100%; margin-bottom: 2rem; }
#wrapper #action .set:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#wrapper #action .set.controllable .item { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; transition: color 0.1s; }
#wrapper #action .set .item { float: left; width: 34%; padding: 0 8%; height: 5rem; line-height: 5rem; }
#wrapper #action .set .item:nth-of-type(4n-2) { background: #F0F0F0; }
#wrapper #action .set .item:nth-of-type(4n-1) { background: #F0F0F0; }
#wrapper #action .set .item { font-size: 1.9rem; font-weight: bold; }
#wrapper #action .set .item.flaticon { font-size: 1rem; font-weight: normal; }
#wrapper #action .set .item.flaticon:before { font-size: 2.2rem; }
#wrapper #action .set .item.flaticon-rounded21:before { font-size: 2.9rem; }
#wrapper #action .set .item.active { color: #8ce196; transition: color 0.1s; }

@media screen and (max-width: 1200px) {
	html { font-size: 10px; }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	html { font-size: 28px; }
	#wrapper #login input,
	#wrapper #login #submit { width: 75%; }
	#wrapper #action { width: 80%; }
	#wrapper #action .set .item { width: 84%; }
	#wrapper #action .set .item:nth-of-type(4n-2) { background: none; }
	#wrapper #action .set .item:nth-of-type(4n-1) { background: none; }
	#wrapper #action .set .item:nth-of-type(even) { background: #F0F0F0; }
}

@media screen and (max-width: 800px) {
	html { font-size: 14px; }
	#wrapper #login input { display: block; width: 65%; margin: 0.7rem auto; }
	#wrapper #login #submit { width: 65%; }
	#wrapper #action { width: 80%; }
	#wrapper #action .set .item { width: 84%; }
	#wrapper #action .set .item:nth-of-type(4n-2) { background: none; }
	#wrapper #action .set .item:nth-of-type(4n-1) { background: none; }
	#wrapper #action .set .item:nth-of-type(even) { background: #F0F0F0; }
}