html, body{
	background-image: url('background.jpg');
	background-size: cover;
	min-height:100%;
	margin:0px;
	padding:0px;
	font-family: Helvetica
}

ul{
	margin:0;
	padding:0;
	list-style:none;
}
ul li{}
ul li a{
	text-decoration:none;
	color:#000
}

#application{
	width:100%;
	height:100vh;
	/*background-color:#fff;*/
}

#progress{
	width:100%;
	height:95%;
}
#progress img{
	width:50px;
	height:50px;
}
/*
 *******************************************************************************************
 * Desktop
 *******************************************************************************************
 */
@media all and (min-width:1201px){
	#header{
		padding:0%;
		padding-left:2%;
		padding-right:4%;
		height:12%;
		/*background-color:#000;*/
	}
	#site_tag{
		  padding-top:15px;
		  height:30px;
		  display: inline-flex;
	}
	#site_tag img{
		  height:60px;
		  width:60px;
		  padding:0px;
	} 
	#site_tag li{
		padding-right:20px;
	}
	#site_tag div{
		padding-top:5px;
	}
	#title{
		font-size:23px;
		color:#ff5722;
	}
	#subtitle{
		font-size:13px;
	}
	#m_top_menu{ 
		display:none;
	}
	#m_top_menu_icon{display:none;}

	#top_menu{
		float:right;
		display: inline-flex;
		font-size:14px;
		font-weight: bold;
		padding-top:35px;
	}
	#top_menu li{
		padding-left:20px;
		cursor:pointer;
		color:#000;
	}
	#side_menu{
		width: 4%;
		height: 76%;
		float: left;
		padding:2%;
		/*background-color:#fff;*/
	}
	#side_menu ul{
		padding-left:5px;
	}
	#side_menu ul li{
		padding-bottom:15px;
	}
	#container{
		width:88%;
		height:76%;
		float:left;
		padding:2%;
	}
	#platform{
		padding:30px;
		width:93%;
		height:80%;
		/* From https://css.glass */
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(4.4px);
		-webkit-backdrop-filter: blur(4.4px);
		border: 1px solid rgba(255, 255, 255, 0.3);
	}
	#footer{
		width:100%;
		height:35px;
		bottom:0;
		position:fixed;
		background-color:#000;
		border-top: 1px solid #000;
	}
	#copyright{
		color:#fff;
		font-weight: bold;
		font-size:12px;
	}

	.centered_content{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.orange_button{
		border-radius: 10px;
		border: 1px solid #ddd;
		color:#fff;
		background-color:#ff5722;
		cursor: pointer;
	}
	.main_nav_button{
		height:12px;
		width: 12px;
		background-color: #ff5722;
		border:2px solid #fff;
		border-radius:8px;
	}
	.section_title{
		font-size:18px;
		font-weight:bold;
	}
	.section_msg{
		color:#232323;
		font-size:13px;
	}
	.small_icon{
		width:20px;
		height:20px;
	}
	/*Home*/
	#main_msg{
		width:52%;
		float:left;
		padding-top:8%;
	}
	#download_btn{
		width:150px;
		height:35px;
		background-color:#000;
		margin-top:15px;
	}
	#img_app{
		margin-left: 25px;
		border-radius: 10px;
		width:17%;
		height:80%;
		float: right;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
	.text_one{
		color:#555;
		font-size:20px;
	}
	.text_two{
		color:#ff5722;
		font-size:35px;
		font-weight:bold;
		padding-top:10px;
	}
	.text_three{
		color:#00944a;
		font-size:15px;
		padding-top:15px;
	}
	/*Modules*/
	#modules_pane{
		height:100%;
		width:100%;
		/*display:grid;
		grid-auto-columns:250px;
		grid-auto-rows:170px;
		column-gap:10px;
		row-gap:15px;*/
		margin-top:30px;
		/*background-color:#efefef;*/
	}
	.module{
		width: 190px;
		height: 160px;
		padding:0px;
		margin-right:15px;
		margin-bottom:20px;
		border-radius:10px;
		/*background-color:#dd9000;*/
		float:left;
	}
	.mod_title{
		width:100%;
		margin:0;
		padding:0;
		font-weight:bold;
		color:#00944a;
		text-align:center;
	}
	.mod_details{
		margin:0;
		padding-top:10px;
		font-size:13px;
		color:#555;
		text-align:center;
	}
	/*contacts*/
	#contacts_pane{
		display:flex;
		width:100%;
		height:100%;
		margin-top:30px;
		/*background-color:#efefef;*/
		justify-content:center;
	}
	.contact_category{
		float:left;
		min-width:25%;
		margin-right: 15px;
		margin-bottom:15px;
		/*background-color:#dd9000;*/
	}
	.contact_title{
		width:100%;
		color:#ff5722;
		font-weight:bold;
		text-align:center;
	}
	.contact_category ul{
		padding-top:25px;
		padding-left:10px;
	}
	.contact_category ul li{
		display:flex;
		padding-bottom:15px;
	}
	.contact_icon{
		float:left;
		padding-top:0px;
	}
	.contact_text{
		float:left;
		height:25px;
		padding-left:20px;
		color: #000;
	}
	/*FAQ*/
	#faq_msg{
		padding-top:20px;
	}
	#faq_pane{
		height:80%;
		margin-top:30px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	.faq_title{
		font-weight: bold;	
		color:#00944a;
		padding-bottom:10px;
	}
	.faq_content{
		font-size:13px;
		color:#555;
		padding-bottom:28px;
	}

	/* License */
	#license_pane{
		height:80%;
		margin-top:30px;
		color:#555;
		font-size:13px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	#license_msg{
		padding-top:20px;
		font-size:13px;
		color:#232323;
	}
}

/*
 *******************************************************************************************
 * small desktop 
 *******************************************************************************************
 */
@media (min-width:1024px) and (max-width:1200px){
	#header{
		padding:0%;
		padding-left:2%;
		padding-right:4%;
		height:12%;
		/*background-color:#000;*/
	}
	#site_tag{
		padding-top:15px;
		height:30px;
		display: inline-flex;
	}
	#site_tag img{
		height:60px;
		width:60px;
		padding:0px;
	} 
	#site_tag li{
		padding-right:20px;
	}
	#site_tag div{
		padding-top:5px;
	}
	#title{
		font-size:23px;
		color:#ff5722;
	}
	#subtitle{
		font-size:13px;
	}
	
	#m_top_menu{
		display:none;
	}
	#m_top_menu_icon{display:none;}

	#top_menu{
		float:right;
		display: inline-flex;
		font-size:14px;
		font-weight: bold;
		padding-top:35px;
	}
	#top_menu li{
		padding-left:20px;
		cursor:pointer;
		color:#000;
	}
	#side_menu{
		width: 4%;
		height: 76%;
		float: left;
		padding:2%;
		/*background-color:#fff;*/
	}
	#side_menu ul{
		padding-left:5px;
	}
	#side_menu ul li{
		padding-bottom:15px;
	}
	#container{
		width:88%;
		height:76%;
		float:left;
		padding:2%;
	}
	#platform{
		padding:30px;
		width:93%;
		height:84%;
		/* From https://css.glass */
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(4.4px);
		-webkit-backdrop-filter: blur(4.4px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		overflow-x:hidden;
		overflow-y:auto;
	}
	#footer{
		width:100%;
		height:35px;
		bottom:0;
		position:fixed;
		background-color:#000;
		border-top: 1px solid #000;
	}
	#copyright{
		color:#fff;
		font-weight: bold;
		font-size:12px;
	}

	.centered_content{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.orange_button{
		border-radius: 10px;
		border: 1px solid #ddd;
		color:#fff;
		background-color:#ff5722;
		cursor: pointer;
	}
	.main_nav_button{
		height:12px;
		width: 12px;
		background-color: #ff5722;
		border:2px solid #fff;
		border-radius:8px;
	}
	.section_title{
		font-size:18px;
		font-weight:bold;
	}
	.section_msg{
		color:#232323;
		font-size:13px;
	}
	.small_icon{
		width:20px;
		height:20px;
	}
	/*Home*/
	#main_msg{
		width:52%;
		float:left;
		padding-top:8%;
	}
	#download_btn{
		width:150px;
		height:35px;
		background-color:#000;
		margin-top:15px;
	}
	#img_app{
		margin-left: 25px;
		border-radius: 10px;
		width:17%;
		height:80%;
		float: right;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
	.text_one{
		color:#555;
		font-size:20px;
	}
	.text_two{
		color:#ff5722;
		font-size:35px;
		font-weight:bold;
		padding-top:10px;
	}
	.text_three{
		color:#00944a;
		font-size:15px;
		padding-top:15px;
	}
	/*Modules*/
	#modules_pane{
		height:100%;
		width:100%;
		/*display:grid;
		grid-auto-columns:250px;
		grid-auto-rows:170px;
		column-gap:10px;
		row-gap:15px;*/
		margin-top:30px;
		/*background-color:#efefef;*/
	}
	.module{
		width: 190px;
		height: 160px;
		padding:0px;
		margin-right:15px;
		margin-bottom:20px;
		border-radius:10px;
		/*background-color:#dd9000;*/
		float:left;
	}
	.mod_title{
		width:100%;
		margin:0;
		padding:0;
		font-weight:bold;
		color:#00944a;
		text-align:center;
	}
	.mod_details{
		margin:0;
		padding-top:10px;
		font-size:13px;
		color:#555;
		text-align:center;
	}
	/*contacts*/
	#contacts_pane{
		display:flex;
		width:100%;
		height:100%;
		margin-top:30px;
		/*background-color:#efefef;*/
		justify-content:center;
	}
	.contact_category{
		float:left;
		min-width:25%;
		margin-right: 15px;
		margin-bottom:15px;
		/*background-color:#dd9000;*/
	}
	.contact_title{
		width:100%;
		color:#ff5722;
		font-weight:bold;
		text-align:center;
	}
	.contact_category ul{
		padding-top:25px;
		padding-left:10px;
	}
	.contact_category ul li{
		display:flex;
		padding-bottom:15px;
	}
	.contact_icon{
		float:left;
		padding-top:0px;
	}
	.contact_text{
		float:left;
		height:25px;
		padding-left:20px;
		color: #000;
	}
	/*FAQ*/
	#faq_msg{
		padding-top:20px;
	}
	#faq_pane{
		height:80%;
		margin-top:30px;
		/*background-color:#efefef;*/
	}
	.faq_title{
		font-weight: bold;	
		color:#00944a;
		padding-bottom:10px;
	}
	.faq_content{
		font-size:13px;
		color:#555;
		padding-bottom:28px;
	}

	/* License */
	#license_pane{
		height:80%;
		margin-top:30px;
		color:#555;
		font-size:13px;
	}
	#license_msg{
		padding-top:20px;
		font-size:13px;
		color:#232323;
	}
}

/*******************************************************************************************
 * tablet 
 *******************************************************************************************
 */
@media (min-width:768px) and (max-width:1024px){
	#header{
		padding:0%;
		padding-left:2%;
		padding-right:4%;
		height:12%;
		/*background-color:#000;*/
	}
	#site_tag{
		padding-top:15px;
		height:30px;
		display: inline-flex;
	}
	#site_tag img{
		height:60px;
		width:60px;
		padding:0px;
	} 
	#site_tag li{
		padding-right:20px;
	}
	#site_tag div{
		padding-top:5px;
	}
	#title{
		font-size:23px;
		color:#ff5722;
	}
	#subtitle{
		font-size:13px;
	}

	#m_top_menu{
		display:none;
	}
	#m_top_menu_icon{
		display:none;
	}
	#top_menu{
		float:right;
		display: inline-flex;
		font-size:14px;
		font-weight: bold;
		padding-top:35px;
	}
	#top_menu li{
		padding-left:20px;
		cursor:pointer;
		color:#000;
	}
	#side_menu{
		width: 4%;
		height: 76%;
		float: left;
		padding:2%;
		/*background-color:#fff;*/
	}
	#side_menu ul{
		padding-left:5px;
	}
	#side_menu ul li{
		padding-bottom:15px;
	}
	#container{
		width:80%;
		height:76%;
		float:left;
		padding:2%;
	}
	#platform{
		padding:30px;
		width:93%;
		height:84%;
		/* From https://css.glass */
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(4.4px);
		-webkit-backdrop-filter: blur(4.4px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		overflow-x:hidden;
                overflow-y:auto;
	}
	#footer{
		width:100%;
		height:35px;
		bottom:0;
		position:fixed;
		background-color:#000;
		border-top: 1px solid #000;
	}
	#copyright{
		color:#fff;
		font-weight: bold;
		font-size:12px;
	}

	.centered_content{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.orange_button{
		border-radius: 10px;
		border: 1px solid #ddd;
		color:#fff;
		background-color:#ff5722;
		cursor: pointer;
	}
	.main_nav_button{
		height:12px;
		width: 12px;
		background-color: #ff5722;
		border:2px solid #fff;
		border-radius:8px;
	}
	.section_title{
		font-size:18px;
		font-weight:bold;
	}
	.section_msg{
		color:#232323;
		font-size:13px;
	}
	.small_icon{
		width:20px;
		height:20px;
	}
	/*Home*/
	#main_msg{
		width:52%;
		float:left;
		padding-top:8%;
	}
	#download_btn{
		width:150px;
		height:35px;
		background-color:#000;
		margin-top:15px;
	}
	#img_app{
		margin-left: 25px;
		border-radius: 10px;
		width:17%;
		height:80%;
		float: right;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
	.text_one{
		color:#555;
		font-size:20px;
	}
	.text_two{
		color:#ff5722;
		font-size:35px;
		font-weight:bold;
		padding-top:10px;
	}
	.text_three{
		color:#00944a;
		font-size:15px;
		padding-top:15px;
	}
	/*Modules*/
	#modules_pane{
		height:100%;
		width:100%;
		/*display:grid;
		grid-auto-columns:250px;
		grid-auto-rows:170px;
		column-gap:10px;
		row-gap:15px;*/
		margin-top:30px;
		/*background-color:#efefef;*/
	}
	.module{
		width: 190px;
		height: 160px;
		padding:0px;
		margin-right:15px;
		margin-bottom:20px;
		border-radius:10px;
		/*background-color:#dd9000;*/
		float:left;
	}
	.mod_title{
		width:100%;
		margin:0;
		padding:0;
		font-weight:bold;
		color:#00944a;
		text-align:center;
	}
	.mod_details{
		margin:0;
		padding-top:10px;
		font-size:13px;
		color:#555;
		text-align:center;
	}
	/*contacts*/
	#contacts_pane{
		display:flex;
		width:100%;
		height:100%;
		margin-top:30px;
		/*background-color:#efefef;*/
		justify-content:center;
	}
	.contact_category{
		float:left;
		min-width:25%;
		margin-right: 15px;
		margin-bottom:15px;
		/*background-color:#dd9000;*/
	}
	.contact_title{
		width:100%;
		color:#ff5722;
		font-weight:bold;
		text-align:center;
	}
	.contact_category ul{
		padding-top:25px;
		padding-left:10px;
	}
	.contact_category ul li{
		display:flex;
		padding-bottom:15px;
	}
	.contact_icon{
		float:left;
		padding-top:0px;
	}
	.contact_text{
		float:left;
		height:25px;
		padding-left:20px;
		color: #000;
	}
	/*FAQ*/
	#faq_msg{
		padding-top:20px;
	}
	#faq_pane{
		height:80%;
		margin-top:30px;
		/*background-color:#efefef;*/
	}
	.faq_title{
		font-weight: bold;	
		color:#00944a;
		padding-bottom:10px;
	}
	.faq_content{
		font-size:13px;
		color:#555;
		padding-bottom:28px;
	}

	/* License */
	#license_pane{
		height:80%;
		margin-top:30px;
		color:#555;
		font-size:13px;
	}
	#license_msg{
		padding-top:20px;
		font-size:13px;
		color:#232323;
	}
}

/* 
 *******************************************************************************************
 * mobile 
 * ideal: 280px
 *******************************************************************************************
 */
@media (min-width:280px) and (max-width:768px){
	#application{
		justify-content:center;
	}
	#header{
		padding:0%;
		padding-left:3%;
		padding-right:5%;
		height:10%;
		/*background-color:#efefef;*/
	}
	#site_tag{
		padding-top:12px;
		height:30px;
		display: inline-flex;
	}
	#site_tag img{
		height:48px;
		width:48px;
		padding:0px;
	} 
	#site_tag li{
		padding-right:12px;
	}
	#site_tag div{
		padding-top:5px;
	}
	#title{
		font-size:18px;
		color:#ff5722;
	}
	#subtitle{
		font-size:10px;
	}

	#m_top_menu_icon{
		width:25px;
		height:25px;
		float:right;
		padding-top:20px;
		padding-right:3px;
	}
	#m_top_menu{
		display:none;
		width:95%;
		position:absolute;
		z-index:2;
		background-color:#232323;
		color:#fff222;
		margin-left:auto;
		margin-right:auto;
		margin-top:10px;
		padding-top:10px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		border-radius:10px;
	}
	#m_top_menu ul{}
	#m_top_menu ul li{
		height:22px;
		font-size:14px;
		font-weight:bold;
		text-align:center;
		margin-bottom:5px;
		padding-top:8px;
		padding-bottom:8px;
		padding-left:20px;
		padding-right:20px;
		border-radius:8px;
	}

	#top_menu{
		display: none;
	}
	#side_menu{
		display:none;
	}
	#container{
		width:85%;
		height:76%;
		padding:10px;
		margin:auto;
	}
	#platform{
		padding:25px;
		width:82%;
		height:92%;
		/* From https://css.glass */
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(4.4px);
		-webkit-backdrop-filter: blur(4.4px);
		border: 1px solid rgba(255, 255, 255, 0.3);
	}
	#footer{
		width:100%;
		height:35px;
		bottom:0;
		position:fixed;
		background-color:#000;
		border-top: 1px solid #000;
	}
	#copyright{
		color:#fff;
		font-weight: bold;
		font-size:12px;
	}

	.centered_content{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.orange_button{
		border-radius: 10px;
		border: 1px solid #ddd;
		color:#fff;
		background-color:#ff5722;
		cursor: pointer;
	}
	.main_nav_button{
		height:12px;
		width: 12px;
		background-color: #ff5722;
		border:2px solid #fff;
		border-radius:8px;
	}
	.section_title{
		font-size:18px;
		font-weight:bold;
	}
	.section_msg{
		color:#232323;
		font-size:13px;
	}
	.small_icon{
		width:20px;
		height:20px;
	}
	/*Home*/
	#home{
	}
	#main_msg{
		width:90%;
		/*float:left;*/
		padding-top:8%;
		text-align:center;
	}
	#download_btn{
		width:150px;
		height:35px;
		background-color:#000;
		margin-top:15px;
		margin-left:auto;
		margin-right:auto;
	}
	#img_app{
		border-radius: 10px;
		width:40%;
		margin-top:40px;
		margin-left:20px;
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
	}
	.text_one{
		color:#555;
		font-size:15px;
	}
	.text_two{
		color:#ff5722;
		font-size:25px;
		font-weight:bold;
		padding-top:10px;
	}
	.text_three{
		color:#00944a;
		font-size:12px;
		padding-top:15px;
	}
	/*Modules*/
	#modules_pane{
		height:90%;
		width:100%;
		/*display:grid;
		grid-auto-columns:250px;
		grid-auto-rows:170px;
		column-gap:10px;
		row-gap:15px;*/
		margin-top:30px;
		/*background-color:#efefef;*/
		overflow-x:hidden;
		overflow-y:auto;
	}
	.module{
		width: 190px;
		height: 180px;
		padding:0px;
		margin-right:15px;
		margin-bottom:20px;
		border-radius:10px;
		/*background-color:#dd9000;*/
		/*float:left;*/
		margin:auto;
	}
	.mod_title{
		width:100%;
		margin:0;
		padding:0;
		font-weight:bold;
		color:#00944a;
		text-align:center;
	}
	.mod_details{
		margin:0;
		padding-top:10px;
		font-size:13px;
		color:#555;
		text-align:center;
	}
	/*contacts*/
	#contacts_pane{
		width:100%;
		height:100%;
		margin-top:30px;
		/*background-color:#efefef;*/
	}
	.contact_category{
		width:90%;
		margin-right: 15px;
		margin-bottom:15px;
		/*background-color:#dd9000;*/
	}
	.contact_title{
		width:100%;
		color:#ff5722;
		font-weight:bold;
		text-align:center;
	}
	.contact_category ul{
		padding-top:25px;
		padding-left:10px;
	}
	.contact_category ul li{
		display:flex;
		padding-bottom:15px;
	}
	.contact_icon{
		float:left;
		padding-top:0px;
	}
	.contact_text{
		float:left;
		height:25px;
		padding-left:20px;
		color: #000;
		font-size:14px;
	}
	/*FAQ*/
	#faq_msg{
		padding-top:20px;
	}
	#faq_pane{
		height:80%;
		margin-top:30px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	.faq_title{
		font-weight: bold;	
		color:#00944a;
		padding-bottom:10px;
	}
	.faq_content{
		font-size:13px;
		color:#555;
		padding-bottom:28px;
	}

	/* License */
	#license_pane{
		height:80%;
		margin-top:30px;
		color:#555;
		font-size:13px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	#license_msg{
		padding-top:20px;
		font-size:13px;
		color:#232323;
	}
}