@charset "utf-8";

/* ------------------------------
Icon
------------------------------ */

/*
[class*="o_start_icon"] { position:relative; display:inline-block; margin:.4em; width:8em; text-decoration:none; font-size:.9em; }
[class*="o_start_icon"] span { display:block; width:100%; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
[class*="o_start_icon"] span:nth-child(1) { padding:2em 0 0 0; height:6em; color:#000; background-color:#fff; border:1px solid #ccc; border-bottom:0; -moz-border-radius:.8em .8em 0 0; -webkit-border-radius:.8em .8em 0 0; -khtml-border-radius:.8em .8em 0 0; border-radius:.8em .8em 0 0; }
[class*="o_start_icon"] span:nth-child(1) i { font-size:2em; }
[class*="o_start_icon"] span:nth-child(2) { padding:.4em 0 0 0; height:3em; white-space:nowrap; font-family:'Open Sans Condensed', Tahoma; font-weight:bold; border:1px solid #ccc; border-top:0; -moz-border-radius:0 0 .8em .8em; -webkit-border-radius:0 0 .8em .8em; -khtml-border-radius:0 0 .8em .8em; border-radius:0 0 .8em .8em; }
[class*="o_start_icon"]:hover span:nth-child(1) { border-color:#666; }
[class*="o_start_icon"]:hover span:nth-child(2) { border-color:#666; }

.o_start_icon_user span:nth-child(2) { color:#333; background-color:#fd8; }
.o_start_icon_user:hover span:nth-child(2) { color:#fff; background-color:#fc3; }
.o_start_icon_todo span:nth-child(2) { color:#333; background-color:#6bd; }
.o_start_icon_todo:hover span:nth-child(2) { color:#fff; background-color:#09c; }
.o_start_icon_job span:nth-child(2) { color:#333; background-color:#f96; }
.o_start_icon_job:hover span:nth-child(2) { color:#fff; background-color:#f60; }
.o_start_icon_new span:nth-child(2) { color:#333; background-color:#b68; }
.o_start_icon_new:hover span:nth-child(2) { color:#fff; background-color:#904; }
.o_start_icon_calendar span:nth-child(2) { color:#333; background-color:#b9d; }
.o_start_icon_calendar:hover span:nth-child(2) { color:#fff; background-color:#96c; }
.o_start_icon_talk span:nth-child(2) { color:#333; background-color:#f96; }
.o_start_icon_talk:hover span:nth-child(2) { color:#fff; background-color:#f60; }
.o_start_icon_document span:nth-child(2) { color:#333; background-color:#ce7; }
.o_start_icon_document:hover span:nth-child(2) { color:#fff; background-color:#ad2; }
.o_start_icon_officer span:nth-child(2) { color:#333; background-color:#f9d; }
.o_start_icon_officer:hover span:nth-child(2) { color:#fff; background-color:#f6c; }
.o_start_icon_html span:nth-child(2) { color:#333; background-color:#f9d; }
.o_start_icon_html:hover span:nth-child(2) { color:#fff; background-color:#f6c; }
*/


.o_start_icon { display:block; }
.o_start_icon a { display:inline-block; width:47%; margin:1%; padding:2em 1em; color:#09f; text-align:center; text-decoration:none; border:.4em solid #09f; }
.o_start_icon a:hover { color:#fff; background-color:#09f; }
.o_start_icon a i { font-size:3em; }
.o_start_icon a span { display:block; padding:.8em .2em; overflow:hidden; font-size:1.4em; font-weight:bold; }



/* Transition */
[class*="o_start_icon"] span, [class*="o_start_icon"]:hover span,
.o_start_icon a, .o_start_icon a:hover,
.o_start_icon a span, .o_start_icon a:hover i
{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; -ms-transition:all .5s ease-out; }




@media screen and (min-width:320px) {


}



@media screen and (min-width:480px) {

.o_start_icon a { width:47%; }

}



@media screen and (min-width:620px) {


}



@media screen and (min-width:800px) {

.o_start_icon a { width:30.8%; }

}



@media screen and (min-width:960px) {


}



@media screen and (min-width:1150px) {

.o_start_icon a { width:22.6%; }


}



@media screen and (min-width:1500px) {

.o_start_icon a { width:17.7%; }

}