*, *::before, *::after {
    box-sizing: border-box;
}

html {height:100%; width:100%; margin:0; padding:0; background:#ddd;}
body {height:100%; width:100%; margin:0; padding:0; position:absolute; font-family: 'Roboto', sans-serif; font-size:14px; line-height:1.2; color:#333; overflow:hidden;}
a {text-decoration:none; color:#47B400;}
a:hover {color:#b5dc4f}
h3, h4 {font-size:18px; font-weight:normal; margin:0;}
button {padding:10px; display:block; margin:0 auto; border:5px solid #333; cursor:pointer;
background: #b5dc4f; /* Old browsers */
background: -moz-linear-gradient(top,  #b5dc4f 0%, #47b400 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b5dc4f 0%,#47b400 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b5dc4f 0%,#47b400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5dc4f', endColorstr='#47b400',GradientType=0 ); /* IE6-9 */
}

input, textarea {width:100%; padding:10px 15px; border:1px solid #333;}
input:focus, textarea:focus {border-color:#000; box-shadow:0 0 5px #b5dc4f;}
button:hover {border-color:#999; box-shadow:0 0 3px #333;}
.main {width:1000px; margin:0 auto; overflow:auto; height:100%;}
.text-center {text-align:center;}

#header {position:fixed; top:0; left:0; width:100%; height:65px; z-index:1000; box-shadow:0 5px 3px rgba(0,0,0,.75);
background: #e1e1e1; /* Old browsers */
background: -moz-linear-gradient(top,  #e1e1e1 0%, #b3b3b3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e1e1e1 0%,#b3b3b3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e1e1e1 0%,#b3b3b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#b3b3b3',GradientType=0 ); /* IE6-9 */
}
#header #logo {float:left; margin-top:5px}
#header #top_menu {float:left; margin-left:30px;}
#header #top_menu > ul {margin:0; padding:0;}
#header #top_menu > ul > li {margin:0; padding:0; display:block; float:left;}
#header #top_menu > ul > li > a {margin:0; padding:24px 10px; display:block; color:#333;}
#header #top_menu > ul > li.active {
background: #b5dc4f; /* Old browsers */
background: -moz-linear-gradient(top,  #b5dc4f 0%, #47b400 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b5dc4f 0%,#47b400 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b5dc4f 0%,#47b400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5dc4f', endColorstr='#47b400',GradientType=0 ); /* IE6-9 */
}
#header #lang_menu {float:right;}
#header #lang_menu > ul {margin:0; padding:0;}
#header #lang_menu > ul > li {display:block; float:left; margin:24px 0 0; padding:0;}
#header #lang_menu > ul > li > a {display:block; margin:0 0 0 10px; padding:0;}
#header #lang_menu > ul > li > a > span {display:none;}


#center {height:100%; position:absolute; width:700%; overflow:hidden; padding-top:65px;
background: #546581; /* Old browsers */
background: -moz-linear-gradient(top,  #546581 0%, #f7fcfc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #546581 0%,#f7fcfc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #546581 0%,#f7fcfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#546581', endColorstr='#f7fcfc',GradientType=0 ); /* IE6-9 */
}
#center .main {padding-right:5px;}
#center #item4 .main {padding-right:30px;}
#content {display:none;}
#items {z-index:200; position:relative; height:100%;}
#items > div {position:absolute; width:14.29%; overflow:hidden; height:100%;  top:10%;}
#items #item2 {left:14.29%;}
#items #item3 {left:28.57%;}
#items #item4 {left:42.86%;}
#items #item5 {left:57.14%;}
#items #item6 {left:71.43%;}
#items #item7 {left:85.72%;}
#items .moduletable {background:#fff; margin-bottom:10px; box-shadow:5px 5px 3px rgba(0,0,0,.75);}
#items .moduletable.left {width:49%; float:left;}
#items .moduletable.right {width:49%; float:right;}
.moduletable h3 {background:#363F46; margin:0; color:#fff; padding:10px 25px 10px 10px; position:relative; overflow:hidden;}
.moduletable .custom h3 {margin:-10px -10px 0;}
.moduletable.green h3 {background:#47B400;}
.moduletable h3:before {content:""; display:block; border: 21px solid transparent; border-right: 21px solid #fff; border-bottom: 21px solid #fff; position:absolute; right:0; bottom:0;}
#items .moduletable > div {padding:10px;}

#items #item1 {color:#fff; text-shadow:1px 1px 0 #333; font-style:italic;}
#items #item1 p {margin:0;}

#items #item3 h3 {font-size:40px;}
#items #item3 .main > div {float:left; width:30%; margin:0 1.665%;}

#items #item4 ol {display:block; text-align:center; margin:0; padding:0 30px;}
#items #item4 ol *, #items #item4 ol *:after,  #items #item4 ol *:before {transition:0.5s}
#items #item4 ol > li {display:inline-block; text-align:center; width:33%; position:relative; height:250px;  vertical-align:top;}
#items #item4 ol > li:after {display:block; content:""; width:150px; height:150px; background:#47B500; transform:rotate(45deg); position:absolute; left:50%; margin-left:-75px; z-index:-1; box-shadow:20px -20px 0 #303D45; top:30px;}
#items #item4 ol > li:nth-child(1) > h4 {color:#fff; padding:90px 0; } 
#items #item4 ol > li:nth-child(6) > h4 {color:#fff; padding:70px 0; } 
#items #item4 ol > li > h4 {color:#fff; padding:80px 0; } 
#items #item4 ol > li > h4:before {content:"1"; position:absolute; display:block; left:10%; top:10%; background:rgba(255,255,255,0.75); font-size:40px; border-radius:100%; color:#333; width:60px; height:60px; padding-top:5px;} 
#items #item4 ol > li:nth-child(2) > h4:before {content:"2";}
#items #item4 ol > li:nth-child(3) > h4:before {content:"3";}
#items #item4 ol > li:nth-child(4) > h4:before {content:"4";}
#items #item4 ol > li:nth-child(5) > h4:before {content:"5";}
#items #item4 ol > li:nth-child(6) > h4:before {content:"6";}
#items #item4 ol > li > p {display:block; overflow:hidden; position:absolute; top:50%; background:#fff; width:0; left:50%; text-align:center; height:0; margin:-75px 0 0 -35px; color:#fff;}
#items #item4 ol > li:hover:after {box-shadow:0 0 #303D45;}
#items #item4 ol > li:before {background:#303D45; width:0; height:0; content:""; display:block; transform:rotate(45deg); top:50%; margin-top:-20px; left:50%; margin-left:65px; position:absolute;}
#items #item4 ol > li:hover:before {width:130px; margin-left:-65px; height:130px; top:40px; left:50%; margin-top:0;}
#items #item4 ol > li:hover > p {padding:5px; height:110px; width:250px; color:#333;} 

#items #item5 {background:url('../images/box5.png') no-repeat center top; top:0;}
#items #item5 .main {width:600px;}
#items #item5 .main > div {margin-top:50%;}

#items #item7 .main {width:250px;}

#author {position:fixed; right:10px; bottom:5px;z-index:200; font-style:italic;}
#author a {color:#fff;}

.plan0 {z-index:105;}
.plan1 {z-index:100;}
.plan2, #car {z-index:95; transition:0.5s liner;}
.plan3 {z-index:90; transition:0.5s liner;}
.plan4 {z-index:80;}

#city > div {position:absolute; bottom:0; left:0; width:100%; height:100%;}
#city > div > div {position:absolute; bottom:0; left:0;}

#city #list1 {left:-20px; background:url('../images/city/list1.png') left bottom; width:296px; height:359px;}
#city #list2 {left:30%; bottom:-20px; background:url('../images/city/list2.png') left bottom; width:416px; height:166px;}
#city #list3 {left:70%; bottom:-20px; background:url('../images/city/list3.png') left bottom; width:241px; height:90px;}
#city #list4 {left:90%; bottom:-20px; background:url('../images/city/list4.png') left bottom; width:579px; height:89px;}
#city #list5 {left:110%; bottom:-20px; background:url('../images/city/list5.png') left bottom; width:167px; height:76px;}

#city #road1 { bottom:0; width:100%; height:100px; background:url('../images/city/road1.jpg') center;}
#city #stolb1 {left:0;}
#city #stolb2 {left:19%;}
#city #stolb3 {left:39%;}
#city #stolb4 {left:59%;}
#city #stolb5 {left:78%;}
#city #stolb6 {left:98%;}
#city #stolb7 {left:3%;}
#city #stolb8 {left:13%;}
#city #stolb9 {left:23%;}
#city #stolb10 {left:33%;}
#city #stolb11 {left:43%;}
#city #stolb12 {left:53%;}
#city #stolb13 {left:63%;}
#city #stolb14 {left:73%;}
#city #stolb15 {left:83%;}
#city #stolb16 {left:93%;}
#city #final {left:auto; right:0; width:674px; height:873px; background:url('../images/city/final.png') right bottom no-repeat;}
#city .stolb {background:url('../images/city/stolb.png') left bottom; background-size:auto 100%;}
#city .plan1 .stolb {height:357px; width:77px; bottom:70px;}
#city .plan2 .stolb {height:217px; width:38px; bottom:138px;}
#city #kran1 {left:25%;}
#city #kran2 {left:50%;}
#city #kran3 {left:75%;}
#city #kran4 {left:15%;}
#city #kran5 {left:30%;}
#city #kran6 {left:45%;}
#city .kran {background:url('../images/city/kran.png') left bottom; background-size:auto 100%;}
#city .plan1 .kran {width:73px; height:139px; bottom:70px;}
#city .plan2 .kran {width:31px; height:60px; bottom:133px;}

#city #tree1 {left:10%;}
#city #tree2 {left:25%;}
#city #tree3 {left:40%;}
#city .tree {background:url('../images/city/tree.png') left bottom; background-size:auto 100%; height:249px; width:324px; bottom:115px;}
#city #road2 {bottom:100px; width:100%; height:30px; background:url('../images/city/road2.jpg') center;}
#city #road2-1 {bottom:130px; width:100%; height:38px; background:url('../images/city/road2-1.png') center;}
#city #car {bottom:95px; width:420px; height:129px; background:url('../images/city/car.png') left no-repeat; background-size:auto 100%; position:fixed; left:10%; z-index:97;}
#city #car.active:after, #city #car.active:before {content:""; display:block; background:url('../images/city/wheel.gif'); height:58px; width:58px; position:absolute; bottom:10px; left:64px; border-radius:100%;}
#city #car.active:before {left:300px}
#city #car2 {bottom:110px; width:362px; height:102px; background:url('../images/city/car2.png') center no-repeat; background-size:auto 100%; position:fixed; left:100%; z-index:96; margin-left:362px; animation: car2 10s linear infinite;}
@keyframes car2 {
  0%{left: 1000%;}
  100%{left: 0; margin-left:-362px;}
}


#city #houses {bottom:100px;}
#city #birds {height:400px; top:50px; width:100%; position:fixed; left:0; z-index:91;}


#city .cloud {bottom:auto; top:80px; position:fixed; animation: cloud 120s ease infinite; margin-left:-650px;}
#city #cloud1 {background:url('../images/city/cloud1.png') center; width:650px; height:347px;}
#city #cloud2 {background:url('../images/city/cloud2.png') center; width:550px; height:300px; animation-delay: 10s !important; top:100px;}
#city #cloud3 {background:url('../images/city/cloud3.png') center; width:781px; height:300px; animation-delay: 20s !important; top:90px;  margin-left:-781px !important;}
#city #cloud4 {background:url('../images/city/cloud4.png') center; width:555px; height:300px; animation-delay: 30s !important; top:90px;}
#city #cloud5 {background:url('../images/city/cloud5.png') center; width:557px; height:300px; animation-delay: 60s !important; top:90px;}
#city #cloud6 {background:url('../images/city/cloud6.png') center; width:1152px; height:300px; animation-delay: 50s !important; top:90px; margin-left:-1152px !important; }
#city #cloud7 {background:url('../images/city/cloud7.png') center; width:499px; height:231px; animation-delay: 60s !important; top:90px;}
@keyframes cloud {
  0%{left: 0;}
  10%{margin-top:3px;}
  20%{margin-top:-3px;}
  30%{margin-top:4px;}
  40%{margin-top:-4px;}
  50%{margin-top:5px;}
  60%{margin-top:-5px;}
  70%{margin-top:4px;}
  80%{margin-top:-4px;}
  90%{margin-top:2px;}
  100%{left: 150%; margin-left:0; margin-top:0;}
}

#navigation > div {position:fixed; top:0; bottom:0; width:40px; display:block; z-index:300; cursor:pointer;}
#navigation > div:hover {background-color:rgba(255,255,255,0.5) !important; }
#navigation #nav-left {left:0; background:url('../images/arrow-left.png') no-repeat center;}
#navigation #nav-right {right:0; background:url('../images/arrow-right.png') no-repeat center;}

table.faq {margin-top:20px;}
table.faq, table.faq tr, table.faq td, table.faq th,  table.faq tbody {display:block !important; text-align:left; transition:0.3s;}
table.faq p {margin:0; padding:0;}
table.faq td p {margin:20px 0; padding:0;}

table.faq tr {border:#f0f0f0 solid 1px; margin-bottom:10px;}
table.faq th {cursor:pointer; padding:5px 5px 5px 30px; position:relative;}
table.faq th:hover {background:#f0f0f0;}
table.faq th:before {content:""; display:block; border: 10px solid transparent; border-left: 10px solid #333; position:absolute; left:5px; top:5px;}
table.faq tr.active th:before {border: 10px solid transparent; border-top: 10px solid #47B400; top:10px;}
table.faq tr.active th {color:#47B400}
table.faq td {padding:0 5px; overflow:hidden; height:0;}
table.faq tr.active td {display:block; height:180px;}
.owl-controls {display:none;}

.hamburger {border-radius:3px; background:#47B400; width: auto; display:none; padding: 10px; position: absolute; left: 10px; float: none;cursor: pointer;transition-property: opacity, -webkit-filter;transition-property: opacity, filter;transition-property: opacity, filter, -webkit-filter;transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; border: 0; margin: 10px; overflow: visible; }
.hamburger:hover {opacity: 0.7; }
.hamburger-box {width: 40px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner {display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.slideout-open .hamburger--arrow-r .hamburger-inner::before {-webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
.slideout-open .hamburger--arrow-r .hamburger-inner::after {-webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
.hamburger.search span {background:url('images/searche.png') no-repeat center; display:block; width:40px; height:28px;}

.slideout-open #header .menus {left:0;}
.slideout-open .hamburger {position:fixed; left:200px;}



.coleb {
-webkit-animation: swinging 30s ease-in-out 0s infinite;
-moz-animation: swinging 30s ease-in-out 0s infinite;
animation: swinging 30s ease-in-out 0s infinite;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}

@keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(3deg); }
10% { transform: rotate(-4deg); }
15% { transform: rotate(2deg); }
20% { transform: rotate(-2deg); }
25% { transform: rotate(1deg); }
30% { transform: rotate(-2deg); }
35% { transform: rotate(3deg); }
40% { transform: rotate(-4deg); }
45% { transform: rotate(3deg); }
50% { transform: rotate(0); }
100% { transform: rotate(0); }
}



@media screen and (max-height: 700px) {
#items > div {top:3%;}
#items #item5 {height: 530px; top: -140px;}
#city > div {margin-bottom:-90px;}
}
@media screen and (max-width: 1000px) {

#header #top_menu {float:none; padding:10px 0; margin:0;}
#header #top_menu > ul {margin:0; padding:0;}
#header #top_menu > ul > li {margin:0; padding:0; display:block; float:none;  border-bottom:1px dotted #ddd;}
#header #top_menu > ul > li > a {margin:0; padding:20px 10px; display:block; color:#333;}
#header #top_menu > ul > li.active {background:#fff;}

#header #lang_menu {float:none; text-align:center;}
#header #lang_menu > ul {display:block;}
#header #lang_menu > ul > li.active {background:#fff;}
#header #lang_menu > ul > li {width:33%;}
#header #lang_menu > ul > li > a{padding:20px 0; margin:0;}

#header .menus {position:fixed; left:-200px; top:0; width:200px; height:100%; overflow:auto; background:#47B400; z-index:9999; transition:0.3s;}

.hamburger {display:block;}
#navigation > div {background-color:rgba(0,0,0,0.2) !important; display:block!important}
#navigation > div:hover {background-color:rgba(0,0,0,0.5) !important; }
.main {width:100%; padding:0 10px;}
#car2, #birds, .plan4, .plan0 {display:none;}
#header #logo {float:right;}
}
@media screen and (max-width: 700px) {
#items .moduletable.left, #items .moduletable.right, #items #item3 .main > div {width:100%; float:none; margin:0 0 10px;}
#items #item4 ol > li {width:60%;}
#city #car {height:90px; left:0; width:100%;}
#city #car.active:after, #city #car.active:before {display:none;}
#items #item5 {background:none; top:3%;}
#items #item5 .main {width:100%;}
#items #item5 .main > div {margin-top:0; background:#fff;}
}
@media screen and (max-width: 500px) {
#items #item4 ol {margin-left:-100px;}
#author {display:none;}
}


#knet_popup {position:fixed; left:0; top:0; height:100%; width:100%; z-index:99999; display:none;}
#knet_popup_bg {position:fixed; left:0; top:0; height:100%; width:100%; background:rgba(0,0,0,0.4);}
#knet_popup_close {background:url('../images/close.png'); background-size:100% 100%; width:30px; height:30px; position:absolute; top:10%; left:70%; margin-left:40px; cursor:pointer;}
#knet_popup_window {position:absolute; width:40%; top:10%; left:30%; padding:10px; margin-left:-10px; background:#fff; max-width:80%; overflow:auto; border:1px solid rgba(0,0,0,.7); border-radius:3px; box-shadow:0 0 50px #fff;}
@media screen and (max-width: 600px) {
	#knet_popup_window {width:90%; left:5%;}
	#knet_popup_close {$left:95%;}
}