/*easing*/
.main-content form button,.nav-overlay ul li a,button.side-nav-button, .main-content form a, button.disconnect-btn, button.info-btn, button.info-btn i, button.info-btn h5, button.ci-access, button.diconnect-btn-l, .side-nav a{ transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; }

/*container*/
.container{ width: 100%; height: 100%; min-height: 500px; position: absolute; left: 0px; top: 0px; }
.side-nav{ width: 500px; height: 100%;  min-height: 500px; background: url('../../img/home_bg.jpg') no-repeat; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; -webkit-background-size: cover; background-size: cover; position: absolute; left: 0px; top: 0px; }
#myVideo{ position: absolute; object-fit: cover; height: 100%; width: 100%; bottom: 0px; }
.side-nav-overlay{ position: relative; width: 100%; height: 100%; background-color: rgba(58, 87, 149, .8); }
.side-nav-title{ width: 450px; position: relative; top: 45%; -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0px auto; }
.side-nav-title img{width: 60%; display: block; margin: 0px auto; }
.side-nav-title h2, .side-nav-title h3{ font-family: 'Montserrat', Sans-serif; color: #FFF; font-weight: 700; text-align: center; margin-top: 10px; }
.side-nav-title h3{ font-weight: 200; }
button.info-btn h5{ display: none; font-size: .4em; margin: 0px auto; font-family: 'Roboto', sans-serif; font-weight: 700; color: #FFF; text-align: center; letter-spacing: 2px; }
button.info-btn a{ text-decoration: none; color: #FFF; }
button.side-nav-button, button.disconnect-btn, button.info-btn{ cursor: pointer; font-size: 1.3em; border: none; width: 50px; overflow: hidden; height: 50px; border-radius: 50%; background-color: #DDD; color: #3A5795; text-align: center;  position: fixed; top: 20px; right: 20px; }
button.side-nav-button{ z-index: 99; }
.nav-overlay{ display: none; z-index: 90; backdrop-filter: blur(10px); width: 100%; height: 100%; min-height: 500px; background-color: rgba(63,63,63,.5); position: absolute; top: 0px; right: 0px; }
.nav-overlay ul{ text-align: center; list-style-type: none; width: 480px; padding-left: 0px; position: relative; top: 50%; -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0px auto; }
.nav-overlay ul li a{ text-transform: uppercase; font-size: 2.3em; display: block; text-decoration: none; color: #FFF; text-align: center; margin-bottom: 20px; font-family: 'Roboto', Sans-serif; font-weight: 100; }
.nav-overlay ul li a:hover, .nav-overlay ul li a.active, button.side-nav-button:hover, .main-content form button:hover, .main-content form a:hover, button.diconnect-btn-l:hover{ font-weight: bold; text-shadow: 1px 1px 2px black, 0 0 1em #3A5795, 0 0 0.2em #3A5795; }
.main-content{ width: calc(100% - 800px); position: absolute; left: 650px; top: 0px; top: 50%; -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0px auto; }
.main-content h1{ font-size: 1.8em; text-align: left; color: #444; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 30px; }
.main-content form{ position: relative; width: 100%; display: block; margin: 10px auto; }
.main-content form input{ font-size: 1em; width: 100%; height: 45px; margin-bottom: 20px; font-weight: 300; border: none; padding-left: 15px; border-radius: 5px; background-color: #EEE; color: #777; font-family: 'Roboto', sans-serif; }
.main-content form button[type=submit], .main-content form button[type=button], button.ci-access, button.diconnect-btn-l{ margin-left: 10px; font-size: .9em; font-weight: 700; font-family: 'Roboto', sans-serif; float: right; width: 140px; height: 45px; color: #FFF; background-color: #3A5795; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px; }
.main-content form button[type=button], button.diconnect-btn-l{ background-color: #DDD; color: #444; }
.main-content form .line, .line2{ width: 100%; height: 1px; background-color: #DDD; margin-bottom: 20px; }
.main-content form a{ text-decoration: none; float: left; font-family: 'Roboto', sans-serif; font-weight: 300; color: #3A5795; margin-top: 10px; margin-bottom: 20px; }
.main-content .response{ overflow: hidden; clear: both; border-radius: 5px; width: 100%; padding-bottom: 20px; padding-top: 20px; background-color: #f2dede; color: #a94442; font-size: .9em; font-weight: 700; font-family: 'Roboto', sans-serif; padding-left: 15px; }
button.disconnect-btn, button.info-btn{ bottom: 20px !important; background-color: #3A5795; color: #FFF; top:auto; }
button.disconnect-btn a i, button.info-btn a i{ color: #FFF; }
button.disconnect-btn:hover, button.ci-access:hover, button.info-btn:hover{ box-shadow: 0 3px 5px rgba(0,0,0,0.4); }
button.info-btn:hover{ width: 200px; border-radius: 20px; }
button.info-btn:hover h5{ display: block; }
button.info-btn:hover i{ font-size: 1em; }
button.ci-access{ width: 100%; margin-left: 0%; height: 55px; font-size: 1em; }
button.ci-access:nth-child(2){ margin-left: 4%; }
.line2{ overflow: hidden; display: inline-block; margin-top: 20px; }
.main-content table{ width: 100%; margin: 20px auto; border-collapse: collapse; border-radius: 20px; font-family: 'Roboto', sans-serif; font-size: 1.1em; color: #444; overflow: hidden; }
.main-content table tr td{ border: 2px solid #FFF; padding: 15px; background-color: #EEE }
.main-content table tr td i{ color: #3A5795; }
.main-content table tr td:nth-child(2n+2){ color: #FF0000; font-size: .9em; }
.main-content h3{ font-family: 'Roboto', sans-serif; font-size: 1.2em; font-weight: 100; }
.main-content #red{ color: #FF0000; font-weight: bold; }
.main-content iframe{ width: 100%; height: 200px; border-radius: 20px; }

.side-nav h5{ font-size: .43em; position: absolute; bottom: 5px; left: 0px; right: 0px; margin: 0px auto; font-weight: 100; color: #FFF; text-align: center; letter-spacing: 2px; text-transform: uppercase; }
.side-nav a{ text-decoration: none; color: #FFF; }
.side-nav a:hover{ letter-spacing: 4px; }

img#imgClosed{ width: 80%; display: block; margin: 0px auto; }

.main-content .green{ color: #228B22; background-color: #98FB98;  }

/*media*/
@media screen and (max-width: 1600px){
	button.ci-access{ font-size: .8em; }
}

@media screen and (max-width: 1280px){
	.main-content form a{ float: none; display: block; }
	.side-nav{ width: 300px; }
	.side-nav-title{  width: 250px; }
	.main-content{ width: calc(100% - 600px); left: 450px; }
}

@media screen and (max-width: 1024px){
	.main-content form button[type=button], .main-content form button[type=submit]{ float: none; display: block; width: 100%; margin-bottom: 10px; margin-left: 0px; }
	button.ci-access,button.ci-access:nth-child(2){ float: none; margin-left: 0px; width: 100%; margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	.side-nav{ width: 100%; height: 500px; position: static; }
	.main-content{ width: 85%; margin-top: 100px; position: static; padding-bottom: 100px; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none; }
	.side-nav-title{ width: 290px; }
	.nav-overlay{ top: 0px; bottom: 0px; position: fixed; min-height: none; }
	.nav-overlay ul{ width: 280px; }
	.nav-overlay ul li a{ font-size: 1.6em; }
	.main-content table{ font-size: .9em; }
	.side-nav h5{ display: none; }
	#myVideo{ height: 500px; top: 0px; }
}

@media screen and (max-height: 450px) and (max-width: 900px){
	.nav-overlay ul{ top: 40%; }
}