.utIlluAnimOn {
    position: relative;
    height:  200px;
    /*background-color: rgba(10,10,10,.6);*/
    z-index: 200;
    background-image: url("../img/illuBkgH.png");

    -webkit-animation: utIlluAnimOn 1s ease 0s 1; /* Chrome, Safari, Opera */
    animation: utIlluAnimOn 1s ease 0s 1;

    opacity: .2
}

.utIlluAnimOn2 {
    position: relative;
    height:  200px;
    z-index: 200;
    background-image: url("../img/illuBkgH2.png");

    -webkit-animation: utIlluAnimOn 1s ease 0s 1; /* Chrome, Safari, Opera */
    animation: utIlluAnimOn 1s ease 0s 1;

    opacity: .2
}
@-webkit-keyframes utIlluAnimOn {
    0%   {opacity: 0;}
    100% {opacity: .2;}
}

@keyframes utIlluAnimOn {
    0%   {opacity: 0;}
    100% {opacity: .2;}
}

.utIlluAnimOff {
    position: relative;
    height:  200px;
    background-color: rgba(10,10,10,0.3);
    z-index: 200;
    opacity: 0.0;
}

.utIlluAnimOnPrevNext {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 1500;
}

.utTitleContainers{
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1005;
    opacity: 0.5;"
}

.utScrollArrowDown{
     position: relative;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     opacity: 1;

     background-image: url("../img/tr_arrow_down_up.png");
 }

.utScrollArrowDown:hover{
    opacity: 1;
    cursor: hand;

    background-image: url("../img/tr_arrow_down_down.png");
}

.utScrollArrowDownWhite{
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: .5;

    background-image: url("../img/tr_arrow_down_down.png");
}

.utScrollArrowDownWhite:hover{
    opacity: 1;
    cursor: hand;

    background-image: url("../img/tr_arrow_down_down.png");
}

.utScrollArrowUp{
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: 1;

    background-image: url("../img/tr_arrow_up_up.png");
}

.utScrollArrowUp:hover{
    opacity: 1;
    cursor: hand;

    background-image: url("../img/tr_arrow_up_down.png");
}

.utScrollArrowUpWhite{
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: .5;

    background-image: url("../img/tr_arrow_up_down.png");
}

.utScrollArrowUpWhite:hover{
    opacity: 1;
    cursor: hand;

    background-image: url("../img/tr_arrow_up_down.png");
}

.utScrollArrowHome{
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: 0.5;
    z-index: 2000;

    background-image: url("../img/icon_44_home_green.png");
    transform: scale(1.0);
}

.utScrollArrowHome:hover{
    opacity: 1;
    cursor: hand;
}

.utScrollArrowDownContainer{
    position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 10006;
}

.utScrollArrowUpContainer{
    position: absolute;
    bottom: 70px;
    right: 40px;
    z-index: 10006;
}

.cloud01 {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite alternate;
}

.cloud02 {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {opacity: 1; top:10px;}
    25%  {top:20px;}
    50%  {top:200px;}
    75%  {top:300px;}
    100% {opacity: 0; top:310px;}
}

@keyframes myfirst {
    0%   {opacity: 1; top:10px;}
    25%  {top:20px;}
    50%  {top:200px;}
    75%  {top:300px;}
    100% {opacity: 0; top:310px;}
}

/* Standard syntax */
@keyframes myfirstx {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* -------------------------------------------------------- */
.factory-opacity {
    opacity: 0;
    -webkit-animation: aopacity 15s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: aopacity 15s linear 2s infinite;
}

@-webkit-keyframes aopacity {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes aopacity {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* -------------------------------------------------------- */
.factory-move-left {
    width: 100px;
    height: 100px;
    position: absolute;
    -webkit-animation: afactory-move-left 30s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: afactory-move-left 15s linear 2s infinite;
}

@-webkit-keyframes afactory-move-left {
    0%   {left:1200px; background-color: yellowgreen;}
    50%  {background-color: yellowgreen;}
    100% {left:-2200px; background-color: whitesmoke;}
}

@keyframes afactory-move-left {
    0%   {left:1200px;}
    100% {left:-2200px;}
}

/* -------------------------------------------------------- */
.factory-move-dym-01 {
    width: 100px;
    height: 100px;
    position: absolute;
    -webkit-animation: afactory-move-dym-01  5s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: afactory-move-dym-01  5s linear 2s infinite;
}

@-webkit-keyframes afactory-move-dym-01 {
    0%   {opacity: 1; top:0px;}
    100% {opacity: 0; top:-2000px;}
}

@keyframes afactory-move-dym-01 {
    0%   {opacity: 1; top:0px;}
    100% {opacity: 0; top:-2000px;}
}

/* -------------------------------------------------------- */
.factory-move-dym-02 {
    width: 100px;
    height: 100px;
    position: absolute;
    -webkit-animation: afactory-move-dym-02  3s linear 1s infinite; /* Chrome, Safari, Opera */
    animation: afactory-move-dym-02  3s linear 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes afactory-move-dym-02 {
    0%   {height: 100px; width: 100px; opacity: 1;}
    100% {height: 1000px; width: 1000px; opacity: 0;}
}

@keyframes afactory-move-dym-02 {
    0%   {height: 100px; width: 100px; opacity: 1;}
    100% {height: 1000px; width: 1000px; opacity: 0;}
}

/* -------------------------------------------------------- */
.cloud-c02 {
    width: 100px;
    height: 100px;
    position: absolute;
    -webkit-animation: acloud-c02 5s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: acloud-c02 5s linear 2s infinite;
}

@-webkit-keyframes acloud-c02 {
    0%   {opacity: 0; top:-300px;}
    100% {opacity: 1; top:100px;}
}

@keyframes acloud-c02{
    0%   {opacity: 0; top:10px;}
    100% {opacity: 1; top:310px;}
}

/* -------------------------------------------------------- */
.cloud-c02-2 {
    position: absolute;
    -webkit-animation: acloud-c02-2 7s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: acloud-c02 5s linear 2s infinite;
}

@-webkit-keyframes acloud-c02-2 {
    0%   {opacity: 0; top:-300px;}
    100% {opacity: 1; top:310px;}
}

@keyframes acloud-c02-2{
    0%   {opacity: 0; top:10px;}
    100% {opacity: 1; top:310px;}
}

/* -------------------------------------------------------- */
.cloud-c02-3 {
    position: absolute;
    -webkit-animation: acloud-c02-2 10s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: acloud-c02 5s linear 2s infinite;
}

@-webkit-keyframes acloud-c02-2 {
    0%   {opacity: 0.3; top:-300px;}
    100% {opacity: 0.6; top:310px;}
}

@keyframes acloud-c02-2{
    0%   {opacity: 0.3; top:10px;}
    100% {opacity: 0.6; top:310px;}
}

/* -------------------------------------------------------- */
.cloud-20-1 {
    position: absolute;
    -webkit-animation: acloud-c20-1 10s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: acloud-c20-1 10s linear 2s infinite;
}

@-webkit-keyframes acloud-c20-1 {
    0%   {opacity: 0.3; top:-300px;}
    100% {opacity: 0.6; top:310px;}
}

@keyframes acloud-c20-1{
    0%   {opacity: 0.3; top:10px;}
    100% {opacity: 0.6; top:310px;}
}

/* -------------------------------------------------------- */
.cloud-20-2 {
    position: absolute;
    -webkit-animation: acloud-c20-2 15s linear 2s infinite; /* Chrome, Safari, Opera */
    animation: acloud-c20-2 15s linear 2s infinite;
}

@-webkit-keyframes acloud-c20-2 {
    0%   {opacity: 0.3; top:-300px;}
    100% {opacity: 0.9; top:310px;}
}

@keyframes acloud-c20-2{
    0%   {opacity: 0.3; top:10px;}
    100% {opacity: 0.9; top:310px;}
}

.circle {
    width: 50%;
    height:0;
    padding-bottom: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
}

