@charset "utf-8";
/* CSS Document */
@import url("http://fonts.googleapis.com/css?family=Lato:400,600");

* {margin:0; padding:0; outline:0; -webkit-text-size-adjust: none;}
html{ height: 100%;}
body { overflow-x: hidden; overflow-y: auto; text-rendering: optimizelegibility; border:0; font-family: 'Lato', sans-serif;  font-size:0.95em; color:#3D3B3B; background-color: #FFFFFF; line-height:140%; -webkit-text-size-adjust:none;}
a {text-decoration:none;}
a:hover {text-decoration:underline; position:}
img {border:0;}
ul {padding: 0 0 20px 20px;}
p {padding:0 0 20px 0; margin:0;}
table, tr, th, td { vertical-align:top;}
input, select, textarea {font-size: 100%; font-family:Helvetica, sans-serif; -webkit-appearance:none; -webkit-border-radius:0px;}
img {width: 100%;}

.clearfix {display: inline-block;}
.clearfix:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.clearfix {display: block;}

.header, .section, .footer, .aside, .nav, .main, .article, .figure, .language, .logo, .desc {
} 
.header, .nav, .footer {width: 100%; margin: 0 auto;}
.header .language a {font-family: 'Lato', sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1em; color: #FFF; display: block; padding-top: 5px; transition: all 0.25s ease 0s;}
.header .sponsor .title, .footer .organiser .title, .footer .partner .title {font-family: 'Lato', sans-serif; font-weight: 400; display: block; padding-bottom: 10px;}
.footer .sponsor .title, .footer .organiser .title, .footer .partner .title {font-family: 'Lato', sans-serif; font-weight: 400; display: block; padding-bottom: 10px;}
.footer .sponsor .banner a {border: solid 1px #999;}
.footer .organiser .logo a {display: inline-block; width: 93px; height: 65px; margin-left: -3px;}
.footer .partner .logo a {display: inline-block; width: 100px; height: 60px;}


.logo-vn, .logo-vn2 {text-align: center;}
@media only screen and (max-width: 767px) {

.xs {display: block;}
.sm {display: none;}
body {background-image: url(../img/bg-xs.png); background-position: center top; background-repeat: no-repeat; background-size: 100% auto;/* transition: all 0.5s ease 0s;*/}
.header, .nav, .footer {max-width: 92%;}
.header {position: relative; padding-bottom: 5%;}
.header .language {top: 0; right: 0; position: absolute;}
.header .language a {font-size: 0.75em; text-align: center;}
.header .language a:hover {text-decoration: none;}

.header .logo {padding-top: 12.5%; width: 88%; height: auto;}

.header .btn-expo {padding-top: 22%; width: 50%; height: auto; display: block;}
.header .btn-symposium {padding-top: 5%; width: 50%; height: auto; display: inline-block; float: left;}
.header .btn-symposium2 {padding-top: 5%; width: 50%; height: auto; display: inline-block; float: left;}
.header .btn-citywide {padding: 5% 0 0 5%; width: 45%; height: auto; display: inline-block; float: left;}
.header .btn-gala {padding: 5% 0 0 5%; width: 45%; height: auto; display: inline-block; float: left;}
.header .desc {font-family: 'Lato', sans-serif; font-size: 1em; font-weight: 400; text-align: justify; line-height: normal; color: #231F20; clear: both;}
.header .desc.sm {width: 100%; padding-top: 5%; height: auto; display: block; /*transition: all 0.5s ease 0.5s;*/}
.header .desc.md {display: none;}

.footer .sponsor, .footer .organiser, .partner {display: block; padding-bottom: 35px}
.footer .sponsor .title, .footer .organiser .title, .footer .partner .title {font-size: 0.85em; text-align: center;}
.footer .sponsor .banner {width: 100%; max-width: 255px; margin: 0 auto;}
.footer .sponsor .banner .img-responsive {display: block; max-width: 100%; height: auto;}
.footer .organiser .logo {text-align: center;}
.footer .partner {width: 100%}
.footer .partner .logo {text-align: center;}
.footer .partner .logo a {margin: 0 10px 15px 10px;}
}

@media only screen and (min-width: 768px) {
.xs {display: none;}
.sm {display: block;}
body {background-image: url(../img/bg-md.png); background-position: 40% top; background-repeat: no-repeat; /*transition: all 0.5s ease 0s;*/}
.header, .nav, .footer {max-width: 720px}
.header {position: relative;}
.header .language {
	top: -1px;
	right: 37px;
	position: absolute;
	width: 135px;
	height: 50px;
	overflow: hidden;
}
.header .language a {font-family: 'Lato', sans-serif; font-size: 0.9em; font-weight: 400; text-transform: uppercase; text-align: center; line-height: 1em; color: #FFF; display: block; width: 135px; height: 50px; margin: 0 auto; padding-top: 5px; background-image: url(../img/lang-bg.png); background-color: #F2652A; transition: all 0.25s ease 0s;}
.header .language a:hover {text-decoration:none; background-color: #49C0B6;}
.header .logo {top: 75px; left: 0; position: absolute; width: 469px; height: 178px;}
.header .btn-expo {top: 380px; left: 0; position: absolute; width: 283px; height: 138px; display: block; transition: all 0.5s ease 0s;}
.header .btn-symposium {top: 560px; left: 0; position: absolute; width: 284px; height: 138px; display: block; transition: all 0.5s ease 0s;}
.header .btn-symposium2 {top: 560px; left: 0; position: absolute; width: 284px; height: 138px; display: block; transition: all 0.5s ease 0s;}
.header .btn-citywide {
	top: 490px;
	left: 315px;
	position: absolute;
	width: 291px;
	height: 114px;
	display: block;
	transition: all 0.5s ease 0s;
}
.header .btn-gala {top: 680px; left: 315px; position: absolute; width: 276px; height: 137px; display: block; transition: all 0.5s ease 0s;}
.header .btn-expo:hover, .header .btn-symposium:hover, .header .btn-symposium2:hover {left: 5px; transition: all 0.5s ease 0s;}
.header .btn-citywide:hover, .header .btn-gala:hover {left: 320px; transition: all 0.5s ease 0s;}
.header .desc {font-family: 'Lato', sans-serif; font-size: 0.95em; font-weight: 400; text-align: justify; line-height: normal; color: #231F20;}
.header .desc.sm {overflow: hidden; width: 565px; height: auto; padding-top: 800px; padding-bottom: 35px; /*transition: all 0.5s ease 0.5s;*/}
.header .desc.md {top: 75px; right: 0; position: absolute; overflow: hidden; width: 255px; height: 0; transition: all 0s ease 0s; display: block;}
.header .desc font {font-weight: 600;}
.header .sponsor {
	top: 653px;
	left: 655px;
	position: absolute;
	width: 455px;
	height: auto;
	display: block;
	transition: all 0.5s ease 0s;
}
.header .sponsor2 {
	top: 700px;
	left: 655px;
	position: absolute;
	width: 455px;
	height: 120px;
	display: block;
	transition: all 0.5s ease 0s;
}
.footer .sponsor, .footer .organiser, .partner {display: block; padding-bottom: 35px}
.footer .sponsor .title, .footer .organiser .title, .footer .partner .title {font-size: 0.85em; display: block;}
.footer .sponsor .banner .img-responsive {display: block; width: 255px; height: auto;}
.footer .organiser .logo a {display: inline-block; width: 93px; height: 65px; margin-left: -3px;}
.footer .partner {width: 590px;}
.footer .partner .logo a {display: inline-block; width: 100px; height: 60px; margin: 0 15px 15px 0;}

.logo-vn {width: 296px;}
.logo-vn2 {width: 320px;}
}  

@media only screen and (min-width: 992px) {
body {background-position: center top;}
.header, .nav, .footer {max-width: 910px;}
.header {height: 750px;}
.header .desc.sm {height: 0; padding-bottom: 0; /*transition: all 0.5s ease 0s;*/}
.header .desc.md {height: auto; transition: all 0.5s ease 0.5s;}
}