body{
	width: 100%;
	margin: 0px 0px 0px 0px;
	font-family: 'Roboto', sans-serif;
}

#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: 30%;
	float: left;
}
.field2img{
	width: 67%;
	float: left;
	margin-left: 2%;
}

.field3txt{
	width: 47%;
	float: left;
}
.field3img{
	width: 40%;
	float: left;
	margin-left: 4%;
}

#logo{
	float: right;
	margin-top: 5px;
}
#logob{
	float: left;
	margin-top: 5px;
}
#bar_1{
	width: 15%;
	float: left;
}
#bar_2{
	width: 70%;
	float: left;
}
#bar_3{
	width: 15%;
	float: left;
}

.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: infinite;
  animation-iteration-count: infinite;
}
@-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;
}


/*   MENU    */
.dropmenu ul {
  margin: 0;
  padding: 0;
}

.dropmenu{
	width: 70%;
	float: left;
	padding: 0;
	margin: 0;
}

.dropmenu li {
  float: left;
  list-style: none;
  position: relative;

	float: left;
	color: #F37721;
	width: 20%;
	font-size: 90%;
	padding-top: 10px;
	text-align: center;
	height: 45px;
	margin-top: -5px;	
}

.dropmenu li a {
	text-decoration: none;
	color: #F37721;
	display: block;
	padding: 10px 1em;
	height: 25px;
}

.dropmenu li ul {
	display: none;
	position: absolute;
	left: 0; top: 100%;
	width: 100%;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
	z-index: 999;
	background-color: #f1f2f2;
}

.dropmenu li ul li {
	float: none;
	width: 100%
}

.dropmenu li ul li:hover {
	background-color: #fff;
}

.dropmenu li:hover {
	background-color: #f1f2f2;
}

.dropmenu li:hover > ul {
	display: block;
}

.dropmenuZZZ li.dir > a:after {
	content: " +";
	color: #F37721;
}

.dropmenu:after {
	content: "";
	display: table;
	clear: both;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    border-bottom-color: #777;
    border-top-color: #777;
    margin-top: 8px;
}
/*   MENU    */



#about, #training, #game, #service, #chinese {
	float: right;
	color: #F37721;
	width: 20%;
	font-size: 90%;
	padding-top: 19px;
	text-align: center;
	height: 36px;
	margin-top: -5px;
}
#partner {
	float: right;
	color: #F37721;
	width: 20%;
	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: 6%;
	margin-bottom: 4%;
	font-weight: bold;
}

h2{
    line-height: 130%;
    color: #FFFFFF;
    font-size: 220%;
    font-weight: normal;
    margin: 0;
}

h3{
    font-size: 350%;
    font-weight: 700;
    line-height: 100%;
    color: #ff4c38;
    text-shadow: 0 0 0;
    margin: 2% 0;
}

h4{
    font-size: 260%;
    font-weight: 400;
    line-height: 120%;
    color: #333;
    margin: 25px 0 5px 0;
}

p{
    font-size: 120%;
    font-weight: 400;
    line-height: 120%;
    margin: 10px 0;
    text-align: left;
    color: #555;
}

b{
	line-height: 80%;
	color: #444;
	font-weight: bold;
	font-size: 90%;
}

#orangebar{
	width: 14%;
	height: 5px;
	margin-top: -5px;
	margin-left: 15%;
	background-color: #F37721;
}

#field1{
	display: block;
	float: right;
	background: url(../images/about_field1.jpg);
	background-size: cover; 
	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: 52%;
}

#img1{
	float: right;
	margin-top: 1%;
}

#img2{
	float: right;
	margin-top: 17%;
	margin-right: -9%;
	height: 80px;
}

#ball{
	width: 100%;
}

#part1{
	width: 30%;
	float: left;
}

#u1241-A, #u1241-C, #u1241-E {
	font-size: 170%;
	line-height: 110%;
	width: 70%;
	color: #FFF;
	text-align: center;
	margin-top: -170px;
	margin-bottom: 130px;
	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;
	cursor: pointer;
}

#clients{
	width: 90%;
	text-align: center;
	margin: 0 5%;
}

#tabela{
	width: 90%;
	margin: 0 5%;
}
#tabela2{
	width: 90%;
	margin: 0 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: 980px) and (min-width: 521px) {
#field1 {overflow: hidden;}
.left {width: 70%;}
.right {width: 40%;margin-right: -10%;}
.fbit {width: 20%;margin-top: 10px;}
}

@media all and (max-width: 520px) and (min-width: 100px) {
#field1 {overflow: hidden;}
.left {width: 100%;}
.right {display: none;}
.fbit {width: 22%;margin-top: 20px;}
.banner {right: 2%;}
}
@media all and (max-width: 880px) and (min-width: 200px) {
#text {width: 100%;}
#img1 {display: none;}
#img2 {display: none;}

p{line-height: 140%;color: #444;font-size: 100%;font-weight: normal;margin-top: 0px;}
h3{line-height: 130%;text-align: center;margin-top: 20px;font-size: 200%;}
h4{font-size: 200%;}
}

@media all and (orientation: portrait) {
	#grid {
	-ms-grid-columns: 150px 25px 1fr;
	-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
.banner{
	display: none;
}
#orangebar{height: 0}

#logo{
	float: left;
	margin-left: 5%;
}

#about, #training, #game, #service, #partner, #chinese {
	float: right;
	color: #F37721;
	width: 20%;
	padding-top: 17px;
	text-align: center;
	height: 33px;
	margin-top: -5px;
	font-size: 100%;
}

#content{
	width: 86%;
	margin-left: auto;
	margin-right: auto;
}

#box{
	width: 90%;
}
#part1{
	width: 28%;
	float: left;
}


#field1{
	height: 300px;
}

#u1241-A, #u1241-C, #u1241-E {
	font-size: 170%;
	line-height: 110%;
}
}