@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

@import 'device.css';



.nofocus:focus{outline:none;}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor:default;
}

/* margin-padding */
.margin-t-md{margin-top:6%;}
.margin-t-sm{margin-top:3%;}
.margin-t-xs{margin-top:1%;}
.margin-b-md{margin-bottom:6%;}
.margin-b-sm{margin-bottom:3%;}
.margin-b-xs{margin-bottom:1%;}
.margin-lg{ padding-top:9%; padding-bottom:9%;}
.margin-md{ padding-top:6%; padding-bottom:6%;}
.margin-sm{margin-top:3%; margin-bottom:3%;}
.margin-xs{padding-top:1%; padding-bottom:1%;}
.margin-none{margin:0 !important;}

.padding-lg{ padding-top:9%; padding-bottom:9%;}
.padding-md{ padding-top:6%; padding-bottom:6%;}
.padding-sm{padding-top:3%; padding-bottom:3%;}
.padding-xs{padding-top:1%; padding-bottom:1%;}
.padding-t-xs{padding-top:1%;}
.padding-t-sm{padding-top:3%;}
.padding-t-md{padding-top:6%;}
.padding-t-lg{padding-top:9%;}
.padding-t-xl{padding-top:12%;}
.padding-b-xs{padding-bottom:1%;}
.padding-b-sm{padding-bottom:3%;}
.padding-b-md{padding-bottom:6%;}
.padding-none{padding:0 !important;}

body,html{
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Open Sans', sans-serif;
	padding: 0;
	
	background: #0052D4;
 
	
}

video {
  width: 100%    !important;
  height: auto   !important;
}
.noto{
	font-family: 'Noto Sans', sans-serif;
}

.Montserrat{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}
.Montserrat .w300{
	font-weight: 300;
}
.Montserrat .w500{
	font-weight: 500;
}
h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 28pt;
	letter-spacing: 8pt;
	text-align: center;
	margin-bottom: 50px;
	color:#666;
}
h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 18pt;
	letter-spacing: 4pt;
	border-bottom: solid 1px #ccc;
	color:#666;
}
h2 strong{
	display: inline-block;
	background: #eee;
	padding: 10px;
	width:50px;
	color:#fff;
	text-align: center;
	margin-right: 15px;
	border-left: solid 1px #ccc;
}
.page{
	background: #fff;
	padding-top: 50px;
	padding-bottom: 100px;
}
.header{
	color:#fff;
	padding-top: 20px;
	padding-bottom: 20px;
}
.header .logo-type{
	padding-top: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}
.header .logo-type strong{
	font-weight: 500;
}
.header .menus{
	padding-top: 20px;
}
.header .menus a{
	display: inline-block;
	background: #fff;
	border-radius: 20px;
	padding-right: 15px;
	margin-left: 10px;
	color:#09c;
	font-size:90%;
}
.header .menus a:first-child{
	margin-left: 0;
}
.header .menus a.logout{
	/* padding-right: 0; */
}
.header .menus a.logout i{
	margin-right: 0;
}
.header .menus a:hover{
	background: #09c;
	color:#fff;
	text-decoration: none;
}
.header .menus a.logout:hover i{
	background: #09c;
	color:#fff;
	text-decoration: none;
}
.header .menus a i{
	background: #fff;
	color:#09c;
	padding: 10px;
	border-radius: 20px;
	margin-right: 5px;
	box-shadow: 1px 0 15px #ccc;
}
.footer{
	padding-top: 30px;
	padding-bottom: 30px;
	color:#fff;
	text-align: center;
	
}
	.footer a{
		color:#fff;
		display:inline-block;
		padding:5px 30px;
		border:solid 1px #fff;
		border-radius:20px;
		margin:0 10px;
	}
		.footer a:hover{
			text-decoration:none;
			background:#000;
			
		}
.video{
	display: inline-block;
	color:#333;
}
.video:hover{
	color:#333;
	text-decoration: none;
}

.video .image{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

.video .image:after{
	content: "\f144";
	font-family: "Font Awesome 5 Free";
	color:#fff;
	text-align: center;
	font-size: 50px;
	padding-top: 15%;
	position: absolute;
	left:0;
	top: 0;
	background: rgba(0,0,0,.5);
	width: 100%;
	height: 100%;
	

}
.video:hover .image:after{
	background: rgba(0,0,0,0);
}
.card-signin {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.card-signin .card-title {
  margin-bottom: 2rem;
  font-weight: 300;
  font-size: 1.5rem;
}

.card-signin .card-body {
  padding: 2rem;
}

.form-signin {
  width: 100%;
}

.form-signin .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  transition: all 0.2s;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.btn-google {
  color: white;
  background-color: #ea4335;
}

.acat{
	display: inline-block;
	color:#fff;
	width: 100%;
	padding-bottom:10px;
	margin: 20px;
	text-align: center;
	box-shadow: 1px 1px 15px #ccc;
	text-shadow:1px 1px 5px rgba(0,0,0,.5);
}
.acat img{
	margin-bottom:5px;
}
.acat:hover{
	text-decoration: none;
	background: #fff !important;
	color:#000;
}