
body{
	width: 100%;
	margin: 0px 0px 0px 0px;
	font-family: 'Roboto', sans-serif;
}

header{
	height: 65px;
}

p{
    font-size: 1.2em;
    line-height: 1.5em;
    color: #555;
    font-weight: 400;
    text-align: left;
}

#marquee{
	background-color: #f3724c;
	padding: 3px 0;
	margin-bottom: -4px;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}

#container{
	width: 100%;
	height: 50px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
}
.field2txt{
	width: 40%;
	float: left;
}
.field2img{
	width: 56%;
	float: left;
	margin-left: 2%;
}

.field3txt{
	width: 47%;
	float: left;
}
.field3img{
	width: 40%;
	float: left;
	margin-left: 4%;
}

#logo{
	float: left;
	margin-left: 10%;
	margin-top: 5px;
}
#logob{
	float: right;
	margin-right: 10%;
	margin-top: 5px;
}

.banner {
    position: absolute;
    top: 65px;
    right: 4%;
    z-index: 50;
}
.banner {
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.banner {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}
@-webkit-keyframes bounceInLeft {
  0%, 4%, 6%, 8%, 10%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0, 0);
    transition-timing-function: cubic-bezier(0, 0);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  4% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  6% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  8% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  10% {
    -webkit-transform: none;
    transform: none;
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 4%, 6%, 8%, 10%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0, 0);
    transition-timing-function: cubic-bezier(0, 0);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    -ms-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  4% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    -ms-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  6% {
    -webkit-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  8% {
    -webkit-transform: translate3d(5px, 0, 0);
    -ms-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  10% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.banner {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
  -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
  animation-delay: 1s;
}






#about, #training, #game, #service, #chinese {
	float: right;
	color: #F37721;
	width: 10%;
	font-size: 90%;
	padding-top: 19px;
	text-align: center;
	height: 36px;
	margin-top: -5px;
}
#partner {
	float: right;
	color: #F37721;
	width: 11%;
	font-size: 90%;
	padding-top: 19px;
	text-align: center;
	height: 36px;
	margin-top: -5px;
}

#about:hover, #training:hover, #game:hover, #service:hover, #partner:hover, #chinese:hover {
	background-color: #f1f2f2;
}

#content{
	width: 94%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

h1{
	line-height: 140%;
	color: #FFFFFF;
	font-size: 400%;
	margin-top: 8%;
	margin-bottom: 8%;
	font-weight: normal;
}

h2{
	line-height: 150%;
	padding: 2% 0;
	color: #FFFFFF;
	font-size: 120%;
	font-weight: normal;
}

h3{
    font-size: 350%;
    font-weight: 700;
    line-height: 100%;
    color: #ff4c38;
    text-shadow: 0 0 0;
    margin: 2% 0 1% 0;
}

h4{
    font-size: 260%;
    font-weight: 400;
    line-height: 120%;
    color: #333;
    margin: 25px 0 5px 0;
}

h5{
    font-size: 180%;
    font-weight: 400;
    line-height: 120%;
    color: #333;
    margin: 0;
    text-align: center;
}

b{
	line-height: 80%;
	color: #444;
	font-weight: bold;
	font-size: 90%;
}

#orangebar{
	width: 11.5%;
	height: 5px;
	margin-top: -5px;
	margin-left: 26.6%;
	background-color: #F37721;
}

#field1{
	display: block;
	float: right;
	background: url(../images/about_field2.jpg);
	background-size: cover;
	background-color: #4BB649;
	width: 100%;
	min-height: 300px;
}


#field2{
	display: block;
	float: right;
	background-color: #FFF;
	width: 100%;
	padding-bottom: 30px;
}

#field3{
	display: block;
	float: right;
	background-color: #efefef;
	width: 100%;
	padding-bottom: 30px;
}

#text{
	float: left;
	width: 65%;
}

#img1{
	float: right;
	margin-top: 2.5%;
}

#img2{
	float: right;
	margin-top: 17%;
	margin-right: -9%;
	height: 80px;
}

#ball{
	width: 100%;
}

#part1{
	width: 28%;
	float: left;
}

#u1241-A, #u1241-C, #u1241-E {
	font-size: 200%;
	line-height: 110%;
	width: 70%;
	color: #FFF;
	text-align: center;
	margin-top: -140px;
	margin-bottom: 80px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 1px 1px 5px #666;
}

#footer{
	z-index: 37;
	width: 100%;
	color: #ffffff;
	background-color: #444444;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

#box{
	width: 100%;
	max-width: 900px;
	margin-top: 30px;
	margin-bottom: 30px;
	color:#FFFFFF;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin-left: auto;
    margin-right: auto;
}

#u1088-4
{
	background-color: #444;
	color: #FFFFFF;
	margin-top: 6px;
	float: right;
	margin-right: 7%;
	margin-bottom: 3%;
	padding: 10px 25px 10px 25px;
}

#clients{
	width: 96%;
	text-align: center;
	max-width:900px;
	margin-left: 2%;
}

#tabela{
	width: 100%;
	text-align: center;
}
#tabela2{
	width: 90%;
	text-align: center;
	margin-left: 5%;
}


a { color:white; text-decoration: none } /* Globally */

/* Each state */

a:link { color: white; text-decoration: none}
a:visited { text-decoration: none; color:white; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:white; }
a:hover, a:active { text-decoration: none; color:black }

::-webkit-scrollbar {
      width: 8px;
  	  height: 8px;

}

::-webkit-scrollbar-track {
      background-color: #edeeef;
}
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2); 
}
 
::-webkit-scrollbar-button {
      background-color: #faab18;
}
 
::-webkit-scrollbar-corner {
      background-color: black;
}


@media all and (max-width: 1250px) and (min-width: 1000px) {
h2 {
    line-height: 156%;
    font-size: 97%;
    padding-top: 8%;
}
#text {
    width: 60%;
}
}
@media all and (max-width: 999px) and (min-width: 100px) {
h2 {
    line-height: 156%;
    font-size: 120%;
    padding-top: 1%;
}
.banner{width: ;overflow: hidden;}
#text {width: 80%;}
#img1 {display: none;}
#img2 {display: none;}
}
@media all and (max-width: 670px) and (min-width: 100px) {
h2 {
    line-height: 156%;
    font-size: 90%;
    padding-top: 1%;
}
}

@media all and (orientation: portrait) {
	#grid {
	-ms-grid-columns: 150px 25px 1fr;
	-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
.banner{
	top: 95px;
}
#logo{
	float: left;
	margin-left: 5%;
}
#orangebar{height: 0}
#about, #training, #game, #service, #partner, #chinese {
	float: right;
	color: #F37721;
	width: 15%;
	padding-top: 17px;
	text-align: center;
	height: 33px;
	margin-top: -5px;
	font-size: 100%;
}

p{
    font-size: 1.4em;
    line-height: 1.6em;
}
#marquee{
	display: none;
}

#content{
	width: 86%;
	margin-left: auto;
	margin-right: auto;
}

#box{width: 90%;}

#part1{width: 28%;float: left;}


.field2txt{width: 100%;}
.field2img {width: 100%;margin-left: 0;margin: 20px 0 40px}
.field3txt {width: 100%;}
.field3img {width: 90%;margin-left: 5%;margin: 20px 0 40px}


h3{
	line-height: 130%;
	text-align: center;
	margin-top: 20px;
	font-size: 120%;
}


#img1{
	float: right;
	margin-top: 8%;
	height: 180px;
}

#img2{
	float: right;
	margin-top: 20%;
	margin-right: -9%;
	height: 80px;
}

#field1{
}

#u1241-A, #u1241-C, #u1241-E {
	font-size: 170%;
	line-height: 110%;
}