/*!
 * CSS Document
 * Network TwentyOne
 * Original author: Network TwentyOne
 * Version 1.0 2020-07-02
 * Further changes, comments: Network TwentyOne
 */
@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);

/* === GLOBAL STYLES === */
@media (min-width: 991px) {
	::-webkit-scrollbar-track { background-color: #dbdbdb; }
	::-webkit-scrollbar { width: 7px; height: 7px; background-color: #dbdbdb; }
	::-webkit-scrollbar-thumb { background-color: #555; }
}
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} :after,:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html{ height:100%; }
html { font-size: 100%; }
body { font-family: 'Roboto', sans-serif; background: #20252f; font-size: 13px; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;	user-select: none; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; overflow-x: hidden; margin: 0; }
.animsition { overflow: hidden; }

table {	border-collapse: collapse;	border-spacing: 0; }
hr { color: #ccc; background-color: #ccc; height: 1px; border: none; clear: both; margin: 10px 0; }

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }
@keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } }
.fadeInDown { animation-name: fadeInDown; }
@keyframes zoomIn { 0% { opacity: 0; -ms-transform: scale(.7); transform: scale(.7); } 50% { opacity: 1; } }
.zoomIn { animation-name: zoomIn; }
@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
.fa-spin { -webkit-animation: fa-spin 100s infinite linear; animation: fa-spin 100s infinite linear; }
@keyframes rotateIn { 0% { opacity: 0; -ms-transform-origin: center center; transform-origin: center center; -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -ms-transform-origin: center center; transform-origin: center center; -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } }
.rotateIn { animation-name: rotateIn; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

body { background: url('../images/bg.jpg') no-repeat center; background-size: cover; background-attachment: fixed; overflow-y: auto; }
body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: url('../images/map_bg.png') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
body:after { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -9; background: url('../images/line_bg.png') repeat-x center center; }
.alert_icon { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -8; }
.alert_icon>div{ position: absolute; width: 100%; height: 100%; background: url('../images/alert_big_icon.png') no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }

.centerdiv { height: 100%; }
.centerdiv table { height: 100%; margin: 0 auto; }
.centerdiv table tr { display: table-cell; }
.centerdiv table td { display: block; width: 100%; padding: 15px; text-align: center; }
.centerdiv table td:first-child { padding: 15px 15px 0 15px; text-align: center; }
.centerdiv table td:last-child { padding: 0 15px 15px 15px; }
.centerdiv table td:last-child>div { padding: 0; margin-top: -15px; }
.centerdiv h1 { font-size: 35px; color: #e07b1d; font-weight: 500; margin: 0 0 7px; }
.centerdiv h3 { font-size: 18px; color: #000; font-weight: 500; margin: 0; }
@media (max-width: 991px) {
	.centerdiv table td:first-child img { width: 350px; max-width: 100%; }
	.centerdiv h1 { font-size: 30px; }
	.centerdiv h3 { font-size: 16px; }
}
@media (max-width: 767px) {
	.centerdiv table td:first-child img { width: 300px; }
	.centerdiv h1 { font-size: 30px; }
	.centerdiv h3 { font-size: 16px; }
}
@media (max-width: 480px) {
	.centerdiv table td:last-child>div { margin-top: -5px; }
	.centerdiv h1 { font-size: 28px; }
	.centerdiv h3 { font-size: 15px; }
}