﻿body {
}

.function_box { width: 75%; margin: 10px auto; }
.function_group { display: inline-block; position: relative; width: 100%; font-family: 'Roboto'; }
.function_ball { width: 175px; height: 175px; display: inline-block; vertical-align: middle; border-radius: 50%; display: inline-block;
                               background-color: #454f62; opacity: 0.9; color: #fff; text-align: center; margin: 5px}
.function_ball:hover, .function_ball_big:hover { background-color: #2f3849; border-color: #2f3849; }
.function_ball_big { width: 200px; height: 200px; border: 6px solid #454f62; }
.function_ball div { display: table; height: inherit; width: inherit; }
.function_ball div span { line-height: 30px; font-size: 20px; display: table-cell; vertical-align: middle; padding: 5px}
.big_font { font-size: 24px !important; }
.small_font { font-size: 20px !important; }
.function_ball a { color: #fff !important }
@media (max-width: 1100px) {
    .function_box { width: 85%; }
}
@media (max-width: 1000px) {
    .function_box { width: 90%; }
}
@media (max-width: 900px) {
    .function_box { width: 95%; }
}
@media (max-width: 800px) {
    .function_box { width: 100%; }
}
@media (max-width: 450px) {
    .function_ball { width: 125px; height: 125px; }
    .function_ball_big { width: 140px; height: 140px; }
    .function_ball div span { line-height: 22px; font-size: 18px; }
    .big_font { font-size: 20px !important; }
    .small_font { font-size: 14px !important; }

}


.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}