/**
 * Styling for the custom error page 
 * is included by 404_rh.php in the template  
 * pm pk 26.04.2017
 **/ 


      
        a { cursor: pointer; }
        a:hover { opacity: 0.7; }

        #overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            height: 192px;
            width: 600px;
            margin-top: -95px;
            margin-left: -300px;
            background: rgba(0, 114, 207, 0.72);
            padding: 10px;
        }
        #logo {
            position: fixed;
            top: 10px;
            left: 10px;
            display: inline-block;
            z-index: 99;
        }
        #overlay h1,
        #overlay h2, 
        #overlay p, 
        #overlay a, 
        #overlay h2 a{
            color: white;
            font-size: 18px;
            text-align: center;
            font-family: 'Roboto Condensed', sans-serif;
        }
        #overlay h1 {
            font-size: 30px;
        }


        @media (max-width: 800px) {

            #overlay {
                position: absolute;
                top: 100px;
                left: 5%;
                height: auto;
                width: 90%;
                margin: 0;
                padding: 5px;
            }
            #logo img {
                width: 100px;
            }
            #overlay h1,
            #overlay h2, 
            #overlay h2 a{
                font-size: 12px;
            }
            #overlay h1 {
                font-size: 20px;
            }

        }


        /*svg colors */

        .cls-1 {
          fill: #e8f3e2;
        }

        .cls-2 {
          fill: #faf4a8;
        }

        .cls-3 {
          fill: #cac277;
        }

        .cls-4 {
          fill: #f3ca76;
        }

        .cls-5 {
          fill: #fdf387;
        }

        .cls-6 {
          fill: #c2e4d8;
        }

        .cls-7 {
          fill: #aedccd;
        }

        .cls-8 {
          opacity: 0.5;
        }

        .cls-10,
        .cls-16,
        .cls-17,
        .cls-22,
        .cls-32,
        .cls-38,
        .cls-39,
        .cls-48,
        .cls-50,
        .cls-56,
        .cls-9 {
          fill: none;
        }

        .cls-16,
        .cls-17,
        .cls-9 {
          stroke: #dab6c4;
        }

        .cls-10,
        .cls-18,
        .cls-19,
        .cls-32,
        .cls-38,
        .cls-39,
        .cls-48,
        .cls-50,
        .cls-56,
        .cls-9 {
          stroke-miterlimit: 10;
        }

        .cls-10 {
          stroke: #e6d0d8;
        }

        .cls-11 {
          fill: #e7d0d8;
        }

        .cls-12 {
          fill: #dab6c4;
        }

        .cls-13,
        .cls-18 {
          fill: #b5d780;
        }

        .cls-14 {
          fill: #9cb17e;
        }

        .cls-15 {
          fill: #f16a83;
        }

        .cls-16,
        .cls-17 {
          stroke-linejoin: bevel;
          stroke-width: 2px;
        }

        .cls-17 {
          stroke-dasharray: 14.92 4.97;
        }

        .cls-18 {
          stroke: #b5d780;
        }

        .cls-18,
        .cls-19 {
          stroke-width: 0.25px;
        }

        .cls-19,
        .cls-21 {
          fill: #aec58b;
        }

        .cls-19 {
          stroke: #aec58b;
        }

        .cls-20 {
          fill: #7d8a71;
        }

        .cls-23 {
          fill: #f69eac;
        }

        .cls-24 {
          fill: #c38f98;
        }

        .cls-25 {
          fill: #816872;
        }

        .cls-26 {
          fill: #6d6066;
        }

        .cls-27 {
          fill: #806871;
        }

        .cls-28 {
          fill: #dbbf53;
        }

        .cls-29 {
          fill: #bfcf30;
        }

        .cls-30 {
          fill: #b29ea7;
        }

        .cls-31 {
          fill: #8d6876;
        }

        .cls-32,
        .cls-48 {
          stroke: #8d6876;
        }

        .cls-32 {
          opacity: 0.6;
        }

        .cls-33 {
          fill: #d2a849;
        }

        .cls-34 {
          fill: #e0b24d;
        }

        .cls-35 {
          fill: #bf6872;
        }

        .cls-36 {
          fill: #f0bf53;
        }

        .cls-37 {
          fill: #c6c49e;
        }

        .cls-38 {
          stroke: #f69eac;
        }

        .cls-39 {
          stroke: #c38f98;
        }

        .cls-40 {
          fill: #c5c072;
        }

        .cls-41 {
          fill: #fdf164;
        }

        .cls-42 {
          fill: #dbedd1;
        }

        .cls-43 {
          fill: #b2beaf;
        }

        .cls-44 {
          fill: #feeb19;
        }

        .cls-45 {
          fill: #9998c8;
        }

        .cls-46 {
          fill: #fef5b1;
        }

        .cls-47 {
          fill: #fac1c4;
        }

        .cls-49 {
          fill: #bfa264;
        }

        .cls-50 {
          stroke: #806871;
        }

        .cls-51 {
          fill: #ce9d2b;
        }

        .cls-52 {
          fill: #c06975;
        }

        .cls-53 {
          fill: #e0efd3;
        }

        .cls-54 {
          fill: #b9e1d2;
        }

        .cls-55 {
          fill: #fff;
        }

        .cls-56 {
          stroke: #231f20;
        }

        .cls-57 {
          fill: #ffefb8;
        }

        .cls-58 {
          fill: #dfedc9;
        }

        .cls-59 {
          fill: #f6d695;
        }

        .cls-60 {
          fill: #fcd6d9;
        }

        .cls-61 {
          fill: #a48691;
        }

        .cls-62 {
          fill: #eddee3;
        }

        .cls-63 {
          fill: #fcf8ca;
        }

        .cls-64 {
          fill: #b8b2d8;
        }

        .cls-65 {
          fill: #eff7ea;
        }

        .cls-66 {
          fill: #fef7b7;
        }

        .cls-67 {
          fill: #fee9a0;
        }

        .cls-99 {
          fill: #ddd162;
        }

        #needles {
          -webkit-animation: rotate 5s linear infinite;
                  animation: rotate 5s linear infinite;
          -webkit-transform-origin: center;
              -ms-transform-origin: center;
                  transform-origin: center;
          transform-box: fill-box;
        }

        @-webkit-keyframes rotate {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
          }
          100% {
            -webkit-transform: rotate(-180deg);
                    transform: rotate(-180deg)
          }
        }

        @keyframes rotate {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
          }
          100% {
            -webkit-transform: rotate(-180deg);
                    transform: rotate(-180deg)
          }
        }

        #arms {
          -webkit-animation: rotate-out 5s linear infinite;
                  animation: rotate-out 5s linear infinite;
          -webkit-transform-origin: center;
              -ms-transform-origin: center;
                  transform-origin: center;
          transform-box: fill-box;
        }

        @-webkit-keyframes rotate-out {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
          }
          100% {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
          }
        }

        @keyframes rotate-out {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
          }
          100% {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
          }
        }

        #cabins {
          -webkit-animation: cabin-transit 5s linear infinite;
                  animation: cabin-transit 5s linear infinite;
          -webkit-transform-origin: center;
              -ms-transform-origin: center;
                  transform-origin: center;
          transform-box: fill-box;
        }

        @-webkit-keyframes cabin-transit {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
          }
          100% {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
          }
        }

        @keyframes cabin-transit {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
          }
          100% {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
          }
        }

        .cabin {
          -webkit-animation: cabin-transform 5s linear infinite;
                  animation: cabin-transform 5s linear infinite;
          -webkit-transform-origin: center;
              -ms-transform-origin: center;
                  transform-origin: center;
          transform-box: fill-box;
        }

        @-webkit-keyframes cabin-transform {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(-180deg);
                    transform: rotate(-180deg)
          }
        }

        @keyframes cabin-transform {
          0% {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(-180deg);
                    transform: rotate(-180deg)
          }
        }

        #balloon,
        #bunch_of_balloons1,
        #bunch_of_balloons {
          -webkit-animation: balloon-anim 5s linear infinite;
                  animation: balloon-anim 5s linear infinite;
          -webkit-transform-origin: center;
              -ms-transform-origin: center;
                  transform-origin: center;
          transform-box: fill-box;
        }

        @-webkit-keyframes balloon-anim {
          0% {
            -webkit-transform: rotate(0deg) translate(0);
                    transform: rotate(0deg) translate(0)
          }
          25% {
            -webkit-transform: rotate(2deg) translateY(5px);
                    transform: rotate(2deg) translateY(5px)
          }
          50% {
            -webkit-transform: rotate(-2deg) translateY(-5px);
                    transform: rotate(-2deg) translateY(-5px)
          }
          75% {
            -webkit-transform: rotate(-2deg) translateY(5px);
                    transform: rotate(-2deg) translateY(5px)
          }
          100% {
            -webkit-transform: rotate(0deg) translate(0);
                    transform: rotate(0deg) translate(0)
          }
        }

        @keyframes balloon-anim {
          0% {
            -webkit-transform: rotate(0deg) translate(0);
                    transform: rotate(0deg) translate(0)
          }
          25% {
            -webkit-transform: rotate(2deg) translateY(5px);
                    transform: rotate(2deg) translateY(5px)
          }
          50% {
            -webkit-transform: rotate(-2deg) translateY(-5px);
                    transform: rotate(-2deg) translateY(-5px)
          }
          75% {
            -webkit-transform: rotate(-2deg) translateY(5px);
                    transform: rotate(-2deg) translateY(5px)
          }
          100% {
            -webkit-transform: rotate(0deg) translate(0);
                    transform: rotate(0deg) translate(0)
          }
        }

        #clouds-front {
          -webkit-animation: cloud-transit infinite ease-in-out 5s;
                  animation: cloud-transit infinite ease-in-out 5s;
        }

        #clouds-back {
          -webkit-animation: cloud-transit-2 infinite ease-out 5s;
                  animation: cloud-transit-2 infinite ease-out 5s;
        }

        @-webkit-keyframes cloud-transit {
          0% {
            opacity: 0
          }
          50% {
            opacity: 1;
          }
          100% {
            -webkit-transform: translateX(-5%);
                    transform: translateX(-5%);
            opacity: 0;
          }
        }

        @keyframes cloud-transit {
          0% {
            opacity: 0
          }
          50% {
            opacity: 1;
          }
          100% {
            -webkit-transform: translateX(-5%);
                    transform: translateX(-5%);
            opacity: 0;
          }
        }

        @-webkit-keyframes cloud-transit-2 {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            -webkit-transform: translateX(5%);
                    transform: translateX(5%);
          }
        }

        @keyframes cloud-transit-2 {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            -webkit-transform: translateX(5%);
                    transform: translateX(5%);
          }
        }