html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

@font-face {
   font-family: BariolThin;
   src: url("Bariol_Thin.otf") format("opentype");
}

@font-face {
   font-family: BariolBold;
   src: url("Bariol_Bold.otf") format("opentype");
}

body{ font-size: 24px; line-height: 36px; font-family: BariolThin; font-weight: normal; }
strong{ font-family: BariolBold; font-weight: normal; }
.absolute{ position: absolute; }
.marginfix{ height: 1px; }
.clear{ clear: both; }
p{ margin: 0; color: #3f4461; }
.clrline{ height: 20px; background: url('/img/clrline.png') 50% 0 no-repeat; }
#area1{ min-height: 400px; background: #fff; }
.inside{ width: 80%; margin: 0 auto; }

#bubbleLogo{ display: block; float: left; width: 370px; height: 500px;
   background: url('/img/logo.png') no-repeat; background-size: 100%;
   margin-top: 250px;
}


#bubbleLogo .a{ position: absolute; z-index: 100; background: #fff; }
#bubbleLogo .z{ position: absolute; z-index: 110; width: 165%; height: 165%; left: -41%; top: -33%; background: #fff; }
#bubbleLogo,
#bubbleLogo .a{ width: 370px; height: 370px; overflow: hidden; }
#bubbleLogo .b1{ background-image: url('/img/logo/1.png'); right: 5%; bottom: 12%; z-index: 210; }
#bubbleLogo .b2{ background-image: url('/img/logo/2.png'); left: 22%; top: 11%; z-index: 220; }
#bubbleLogo .b3{ background-image: url('/img/logo/3.png'); left: 5%; top: 25%; z-index: 230; }
#bubbleLogo .b1,
#bubbleLogo .b2,
#bubbleLogo .b3{ position: absolute; width: 54%; height: 54%; background-size: 100%; opacity: 1; }
#bubbleLogo .o1{ background-image: url('/img/logo/5.png'); background-repeat: no-repeat; left: 26.7%; top: 26.5%; z-index: 400;
position: absolute; width: 47%; height: 47%; background-size: 100%; opacity: 0.5; }
#bubbleLogo .t{ background-image: url('/img/logo/6.png'); background-repeat: no-repeat; left: 28%; top: 46.5%; z-index: 500;
position: absolute; width: 54%; height: 45%; background-size: 100%; opacity: 1; }
#bubbleLogo .w{
   position: absolute;
   width: 100%;
   height: 100%;
   background-size: 100%;
   background-image: url('/img/logo/4.png');
   z-index: 300;
   opacity: 1;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
#bubbleLogo .b1,
#bubbleLogo .b2,
#bubbleLogo .b3 {
  -webkit-animation: rotating 15s linear infinite;
  -moz-animation: rotating 15s linear infinite;
  -ms-animation: rotating 15s linear infinite;
  -o-animation: rotating 15s linear infinite;
  animation: rotating 15s linear infinite;
}

#area1 .text{ display: block; float: right; width: 700px; }

#topBar{ height: 125px; background: #fff url('/img/clrline.png') 50% 0 no-repeat; position: fixed; top: 0; width: 100%; z-index: 4000; }
#topLeft{ float: left; background: url('/img/logo_clean.png') 0 0 no-repeat; width: 100px; height: 50px; background-size: contain; margin: 40px 0 0 0; }
#topLeft:hover{ cursor: pointer; }
#topRight{ float: right; margin-top: 50px; }
#topRight div,#topRight a{ display: inline-block; margin: 0 1em; font-size: 1.2em; }
#topRight .c{ border: 1px solid #888; border-radius: 50%; width: 30px; height: 30px;
text-align: center; line-height: 1.3em; font-size: 1em; margin: 0 0.5em; }
#topRight div:hover{ cursor: pointer; }
#topRight a{ text-decoration: none; }

#site.short #topBar{ display: none; }

#area2{ background: url('/img/area2.jpg') 50% 0px; background-size: cover; text-align: center; }
h2{ font-weight: normal; color: #fff; font-size: 2em; line-height: 1.2em; }
#area2 .inside{ padding: 4em 0 6em 0; }

#site.short .clrline{ background-position: 20% 0; }
#site.short #area1 #bubbleLogo{ float: none; margin: 50px auto 0 auto; width: 300px; }
#site.short #area1 #bubbleLogo .a{ width: 300px; height: 300px; overflow: hidden; }
#site.short #area1 .text{ float: none; text-align: center; width: auto; margin: 2em 0 2em 0; padding: 0; }
#site.short #area1{ padding: 0 0 0.2em 0; }

.clients{ text-align: center; position: relative; }
.clients .e{ display: inline-block; height: 200px; width: 20%; min-width: 200px; }
.clients .e img{ float: left; width: 100%; max-width: 150px; }

#area3{ background: url('/img/area1.jpg') 50% 0; }

#site.short #area4{ background-position: 20% 0; }

#area3 .kava{ background: url('/img/kava.png') 120px bottom no-repeat; float: left; width: 38%; background-size: 60%;
text-align: right; padding-top: 1em; padding-left: 2em; max-width: 700px; font-size: 1.5em; line-height: 1.4em;
 position: absolute; margin-left: -80px; }

#area3 .form{ width: 50%; max-width: 470px; float: right; }

#site.short #area3 .kava{ background: transparent; position: static; text-align: center; padding: 1em 0 0 0;
margin: 0 auto; width: 100%; font-size: 1.2em; float: none; }

.inpwrap,
.txtwrap{ background: #efefef; margin: 1em 0; border-radius: 5px; padding: 0.5em 1em; }

.inpwrap input{ background: transparent; border: 0; width: 100%; }
.txtwrap textarea{ background: transparent; border: 0; width: 100%; resize: none; height: 100px; }
.inpwrap input:focus,
.txtwrap textarea:focus{ outline: 0; }

#site.short #area3 .form{ margin: 0 auto; width: 100%; float: none; margin-top: 2em; }

#submitform{ width: 100%; height: 50px; background: url('/img/submit.png') 50% 0; border-radius: 5px; margin-bottom: 2em;
font-family: BariolBold; color: #fff; text-align: center; line-height: 2em; display: block; outline: 0; border: 0; }
#submitform:hover{ cursor: pointer; background: url('/img/submit.png') 50% 50px; }

#area4{ height: 173px; background: url('/img/footer.png') 50% 0; overflow: hidden; }
#area4{ color: #fff; font-size: 0.8em; }
#area4 a{ color: #fff; text-decoration: none; }
#area4 img{ width: 12%; max-width: 130px; }
#area4 .d1{ height: 123px; float: left; padding: 50px 0 0 120px; background: url('/img/logo_clean.png') left 50% no-repeat; background-size: 100px; }
#area4 .d2{ height: 123px; float: right; padding: 50px 0 0 0px; }

#area1 .arrows{ background: url('/img/down.png') 50% 50% no-repeat; background-size: contain; width: 60px; height: 60px;
margin: 3em auto 0 auto; }
#area1 .arrows:hover{ cursor: pointer; }

@media screen and (max-width: 1900px){
#area1 .text{ width: 500px; }
#bubbleLogo{ width: 600px; height: 600px; }
#bubbleLogo .a{ width: 600px; height: 600px; overflow: hidden; }
}

@media screen and (max-width: 1600px){
#bubbleLogo{ width: 400px; height: 400px; }
#bubbleLogo .a{ width: 400px; height: 400px; overflow: hidden; }
#area1 .text{ width: 500px; }
}

@media screen and (max-width: 1150px){
#bubbleLogo{ width: 300px; height: 300px; }
#bubbleLogo .a{ width: 300px; height: 300px; overflow: hidden; }
#area1 .text{ width: 300px; }
}

@media screen and (min-width: 701px) and (max-width: 900px){
   #bubbleLogo{ width: 220px; height: 220px; }
   #bubbleLogo .a{ width: 220px; height: 220px; overflow: hidden; }
   #area1 .text{ font-size: 0.7em; }
}

@media screen and (min-width: 701px) and (max-width: 1130px){
   #area3 .kava{ font-size: 1em; }
   #area4{ font-size: 0.6em; }
   #area4 .d1{ background: transparent; padding-left: 0; }
}

#site.short #area4 .d1,
#site.short #area4 .d2{ display: block; text-align: center; width: 100%; height: auto; float: none; margin: 0.5em 0 0 0; background: transparent; padding: 0; }

.clients .e img{ position: relative; z-index: 300; }
.clients .e .bg{ background: black; width: 100%; height: 100%; border-radius: 50%; opacity: 0.3; display: none; position: absolute; z-index: 100; }
