html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

strong {
font-weight: 700;
}

sup {
font-size:xx-small;
vertical-align:super;
}



/* hard reset */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    position: relative;
    padding: 0; margin: 0;
} 

/* micro clear fix (clears floats) */
    .contain:before,
    .contain:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.contain:after {
    clear: both;
}
.contain {
    *zoom: 1;
}

html {
    height: 100%; /* 01 */
    /* tells html to go ahead and feel free to be 100% height */
}

body {
    min-height: 100%; /* 02 */
    /* expands to push html to the limit */
}


/* Fonts */
@font-face {
    font-family: 'theinhardtrgwebfont';
    src: url('fonts/theinhardtrgwebfont.eot');
    src: url('fonts/theinhardtrgwebfont.eot') format('embedded-opentype'),
         url('fonts/theinhardtrgwebfont.woff2') format('woff2'),
         url('fonts/theinhardtrgwebfont.woff') format('woff'),
         url('fonts/theinhardtrgwebfont.ttf') format('truetype'),
         url('fonts/theinhardtrgwebfont.svg#theinhardtrgwebfont') format('svg');
}

@font-face {
    font-family: 'theinhardtbdwebfont';
    src: url('fonts/theinhardtbdwebfont.eot');
    src: url('fonts/theinhardtbdwebfont.eot') format('embedded-opentype'),
         url('fonts/theinhardtbdwebfont.woff2') format('woff2'),
         url('fonts/theinhardtbdwebfont.woff') format('woff'),
         url('fonts/theinhardtbdwebfont.ttf') format('truetype'),
         url('fonts/theinhardtbdwebfont.svg#theinhardtbdwebfont') format('svg');
}

  @-webkit-keyframes bounce {
    0% { -webkit-transform: translate(0px, 5px) ; }
    100% { -webkit-transform: translate(0px, -15px);  }
  }
  @-moz-keyframes bounce {
        0% { background-position: 0 0; }
      100% { background-position: 0 100%; }
  }
  
  @keyframes bounce {
        0% { background-position: 0 0; }
      100% { background-position: 0 100%; }
  }
  
  .bounce {
  animation: bounce 1s linear 0s infinite alternate;
  -webkit-animation: bounce 1s linear 0s infinite alternate;
  
  }



body {
width:100%;  
background: #ffffff;
font-family: 'theinhardtrgwebfont';
overflow: hidden;
}


/*HEADER*/
.header {
width: 100%;
height: 60px;
background: url("gfw/header.jpg") no-repeat right top;
background-color: #000000;
}

.header .logo{
padding: 10px 0 0 23px;
float: left;
}

.header .language {
float: right;
height: 30px;
margin: 13px 31px 0 0;
position: relative;
z-index: 10000;
}


.header .language ul {
height: 28px;
list-style: outside none none;
margin-top: 1px;
overflow: visible;
width: 40px;
}

.header .language ul li {
clear: both;
}

.header .language ul li.first {
display: block;
}

.header .language ul li.last {
background: #12b447 none repeat scroll 0 0;
display: none;
position: relative;
z-index: 10000;
}

.header .language ul li.last:last-of-type {
border-radius: 0 0 6px 6px;
}

.header .language ul li a {
color: #fff;
display: block;
font-family: 'theinhardtbdwebfont';
font-size: 16px;
font-weight: normal !important;
height: 28px;
line-height: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 40px;
}

.header .language ul li.first a {
background: #000 none repeat scroll 0 0;
border-radius: 6px;
}

.header .language ul li.first.open a {
border-radius: 6px 6px 0 0;
}

/*CONATINER*/
.container {
width: 100%;
font-size: 0;
vertical-align: top;
display: inline-block;
}

.container .item{
width: 25%;
display: inline-block;
vertical-align: top;
position: relative;
-webkit-transition: width 0.5s;
transition: width 0.5s;
cursor: pointer;
}

.container .item.active{
width: 31%;
}

.container .item.small{
width: 23%;
}

.container .item.one{
background: url("gfw/item-1.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.one.active{
background: url("gfw/item-1-hover.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.two{
background: url("gfw/item-2.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.two.active{
background: url("gfw/item-2-hover.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.three{
background: url("gfw/item-3.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.three.active{
background: url("gfw/item-3-hover.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.four{
background: url("gfw/item-4.jpg") no-repeat 50% 50%;
background-size: cover;
}

.container .item.four.active{
background: url("gfw/item-4-hover.jpg") no-repeat 50% 50%;
background-size: cover;
}



.container .item .text{
width: 100%;
height: 300px;
display: block;
position: absolute;
bottom: 0;
background: url("gfw/text-bg.png") no-repeat 50% 50%;
background-size: cover;
text-align: left;
padding: 0 5% 34px 5%;
-webkit-transition: height 1s;
transition: height 1s;
}

.container .item.active .text{
padding: 0 10.5%;
height: 350px;
}


.container .item .text h2{
font-family: 'theinhardtbdwebfont';
font-size: 33px;
line-height: 43px;
color: #ffffff;
margin: 25px 0 10px 0;
}

.container .item .text p{
font-size: 16px;
line-height: 22px;
color: #cccccc;
margin: 0 0 15px 0;
}

.container .item .text p.basic{
display: block;
}

.container .item.active .text p.basic{
display: none;
}

.container .item .text p.more{
display: none;
}

.container .item.active .text p.more{
display: block;
}

.container .item .text p.link{
font-size: 18px;
line-height: 24px;
color: #ffffff;
margin: 0 0 25px 0;
}

.container .item .text p.link a{
color: #ffffff;
text-decoration: none;
font-family: 'theinhardtbdwebfont';
}

.container .item .text p.link a:hover{
text-decoration: none;
}

.container .item .text a.enter{
color: #ffffff;
text-decoration: none;
display: block;
font-size: 19px;
line-height: 26px;
font-family: 'theinhardtbdwebfont';
background: url("gfw/enter-bg.png") no-repeat 0 50%;
padding: 0 0 0 36px;
}

.container .item .text .arrow {
text-align: center;
bottom: 2%;
position: absolute;
width: 90%;
display: none;
}

.container .item .text .arrow span {
display: block;
height: 32px;
width: 33px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
margin: 0 auto;
background: url("gfw/arrow-down.png") no-repeat center center;
background-size: 34px 15px;
}


@media screen and (max-width: 1024px) {
.container .item .text{
height: 350px;
}

.container .item.active .text{
height: 400px;
}

.container .item .text h2{
font-size: 24px;
line-height: 34px;
}


.container .item .text p.link{
font-size: 16px;
line-height: 22px;
}

}


@media screen and (max-width: 800px) {

body {
overflow: auto;
}

.header {
background: #000000;
position: fixed;
z-index: 100;
}

.header .logo{
padding: 10px 0 0 5%;
}


.container .item{
width: 100%;
height: 100vh !important;
}


.container .item.active{
width: 100%;
}

.container .item.small{
width: 100%;
}

.container .item .text{
height: auto;
}

.container .item.active .text{
padding: 0 5% 34px 5%;
height: auto;
}

.container .item .text h2{
font-size: 24px;
line-height: 34px;
margin: 25px 0 10px 0;
}


.container .item .text p.link{
font-size: 16px;
line-height: 22px;
margin: 0 0 25px 0;
}

.container .item .text .arrow {
display: block;
}

}