/* //////////////////////////////// SPLASH //////////////////////////////// */

#splash-outer { 
	width: 100%; height: 100%; 
	position: absolute; z-index: 8000; 
	display: flex; justify-content: center; align-items: center; align-content: center;
	overflow: hidden; top: 0; right: 0; text-decoration: none; 
	background-color: rgba(0,0,0,0.6); 
}

#splash { width: 90%; height: auto; position: relative; background: #FFF; padding: 0; overflow: hidden; border-radius: 5px; -webkit-border-radius: 5px; } 


#splash .content { display: block; overflow: hidden; }

#splash .upper { padding: 20px; overflow: hidden; display: block; overflow: hidden; position: relative; }

#splash .banner	{ width: 100%; display: table; clear: both; overflow: hidden; }
#splash .banner-logo { display: block; padding: 0; padding-top: 30px; position: relative; overflow: hidden; }
#splash .banner-logo a { width: 120px; display: block; overflow: hidden; margin: 0 auto; padding: 10px; background-color: #FFF; }
#splash .banner-logo a img { width: 80%; height: auto; display: block; margin: 0 auto; }

#splash h1 { font-size: 20px; line-height: 25px; font-weight: 700; color: #1e3773; text-align: center; clear: both; margin: 0 auto 15px auto; padding: 0; }
#splash p { font-size: 14px; line-height: 18px; color: #666; clear: both; margin: 0 auto; text-align: center; max-width: 100%; font-family: "Open Sans", helvetica, arial, sans-serif; }
#splash p.small { font-size: 14px; line-height: 18px; margin-bottom: 20px; background-color: #EEE; padding: 10px; margin: 20px 0; }

#splash p.small2 { font-size: 12px; line-height: 16px; margin: 20px auto 0 auto; }

#splash .btn-group { width: 100%; display: block; text-align: center; }

#splash .btn { 
	font-weight: bold; max-width: 150px;
	margin: 20px auto 0 auto; font-size: 16px; line-height: 22px; padding: 10px 40px 10px 20px; 
	background-color: #1e3773; 
	text-decoration: none; text-align: center; 
	color: #FFF !important; clear: both; display: block; 
	 -webkit-transition: all .3s ease-in; transition: all .3s ease-in; font-family: "Open Sans", helvetica, arial, sans-serif; letter-spacing: -0.01em;
	 cursor: pointer;
	 clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 0% 0%);
}

#splash .btn:focus {
  background-color: #b426ff;
  outline: 5px solid #ea3bcb;
}

#splash .btn:hover { background-color: #8cd2fa; color: #1e3773 !important; }

#splash .btn span { font-size: 12px; line-height: 16px; }

#splash .btn.grey { background: #EEE !important; color: #333 !important; }
#splash .btn.grey:hover { background: #CCC !important; color: #333 !important; }

#splash .bar { width: 100%; height: auto; position: relative; bottom: 0; display: block; /* background: url('../inline/img/splash/bar-bkg-2-01.png') center; background-size: 100%; border-top: 4px solid #00558b; */ }
#splash .logos { padding: 5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;  }
#splash .logos .item { max-width: 30px; flex-grow: 1; height: auto; padding: 10px; }
#splash .logos .item.wide { flex-grow: 2; max-width: 120px; }
#splash .logos .item img { width: 100%; height: auto; display: block; }

#splash .lang-btns a { width: 35px; height: 35px; margin: 2px; }

#splash .footer { display: block; text-align: center; margin-top: 20px; background-color: #bb579b; clear: both; overflow: hidden; border-top: 5px solid #1e3773;}
#splash .footer .inner { padding: 10px; display: block; overflow: hidden; }
#splash .footer a { display: inline-block; margin: 20px 10px; width: 30px; overflow: hidden; }
#splash .footer a img { width: 100%; height: auto; display: block; }

/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////// START OF RESPONSIVE STYLES //////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */


/* ////////////////////////////////  bigger than mobile version //////////////////////////////// */

@media screen and (min-width: 480px) {

	#splash .banner-logo a { width: 150px; margin-bottom: 0; }

}

/* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */  

@media screen and (min-width: 480px) and (max-width: 768px) {


}

/* //////////////////////////////// big ipad version //////////////////////////////// */

@media screen and (min-width: 768px) {

	#splash { max-width: 600px; }
	#splash .banner	{  }
	#splash .banner-logo { padding-top: 30px; }
	#splash .upper { padding: 30px; }
	#splash h1 { font-size: 25px; line-height: 35px; }
	#splash p { font-size: 14px; line-height: 18px; display: block; }
	#splash .footer a { width: 40px; margin: 20px; }
}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

@media screen and (min-width: 960px) {

	#splash { max-width: 800px; }

}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

@media screen and (min-width: 1200px) {

	#splash { max-width: 800px; }
	#splash .banner	{  }
	#splash .upper {  }
	#splash h1 { font-size: 25px; line-height: 35px; }
	#splash p { font-size: 16px; line-height: 20px; }
	#splash .logos .item { max-width: 40px; padding: 10px 20px; }
	#splash .logos .item.wide { max-width: 110px; }
	#splash .btn { font-size: 18px; line-height: 22px; margin-top: 20px; }

}

/* //////////////////////////////// very wide version //////////////////////////////// */ 

@media screen and (min-width: 1500px) { 

	#splash { max-width: 900px; }

	#splash p { max-width: 80%; }

	#splash .btn { max-width: 150px; }

}

/* //////////////////////////////// extra wide version //////////////////////////////// */ 

@media screen and (min-width: 1750px) {


}

/* //////////////////////////////// extra extra wide version //////////////////////////////// */ 

@media screen and (min-width: 2000px) {


}