body
{
   background-color: transparent;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
input:focus, textarea:focus, select:focus
{
   outline: none;
}
#modal .modal-content
{
   background-color: rgba(255,255,255,0.20);
   background-image: none;
   border: 1px solid #CCCCCC;
   border-radius: 6px;
   box-shadow: 0px 3px 9px rgba(0,0,0,0.50);
   margin: 0;
   overflow: visible;
}
#modal.fade
{
   opacity: 1;
   -webkit-transition: all 500ms linear;
   transition: all 500ms linear;
}
#modal .animate-show
{
   -webkit-animation-duration: 500ms;
   animation-duration: 500ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: swoop-in;
   animation-name: swoop-in;
}
#modal .animate-hide
{
   -webkit-animation-duration: 500ms;
   animation-duration: 500ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: swoop-in;
   animation-name: swoop-in;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
}
#modal.modal
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 9999;
   display: none;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
   outline: 0;
}
#modal .modal-open .modal
{
   overflow-x: hidden;
   overflow-y: auto;
}
#modal .modal-open
{
   overflow: hidden;
}
#modal .modal-dialog
{
   position: relative;
   width: 796px;
   margin-left: auto;
   margin-right: auto;
}
#modal .modal-content
{
   position: relative;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   outline: 0;
}
#modal .modal-header
{
   min-height: 16px;
   padding: 15px 15px 15px 15px;
   border-bottom: 1px solid #CCCCCC;
}
#modal .modal-footer
{
   padding: 15px 15px 15px 15px;
   border-top: 1px solid #CCCCCC;
}
#modal .modal-body
{
   position: relative;
   width: 796px;
   height: 217px;
}
#modal .close
{
   float: right;
   font-size: 21px;
   font-weight: 700;
   line-height: 1;
   color: #CCCCCC;
   text-shadow: 0px 1px 0px #fff;
   opacity: 0.5;
   -webkit-appearance: none;
   padding: 15px 15px 0px 0px;
   cursor: pointer;
   background: 0 0;
   border: 0;
   margin-top: -2px;
}
.modal-backdrop
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1040;
   background-color: #000;
}
.modal-backdrop.fade
{
   opacity: 0;
   -webkit-transition: opacity .15s linear;
   transition: opacity .15s linear;
}
.modal-backdrop.show
{
   opacity: 0.5;
}
.modal-open
{
   overflow: hidden;
}
#modal .modal-content
{
   margin: 0;
   pointer-events: all;
}
#modal .modal-title
{
   color: #CCCCCC;
   font-size: 16px;
   font-weight: 500;
   margin: 0;
}
#modal .modal-dialog
{
   justify-content: center;
   display: flex;
   align-items: center;
   pointer-events: none;
}
#modal .modal-dialog::before
{
   display: block;
   height: calc(100vh);
   content: "";
}
#WrapText1
{
   background-clip: padding-box;
   background-color: rgba(0,0,0,0.00);
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-radius: 10px;
   box-shadow: 3px 3px 5px #000000 inset;
   -webkit-animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both;
   animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both;
}
.WrapText1
{
   position: absolute;
   border-width: 0px;
   color: #000000;
   font-family: "Lucida Sans Unicode";
   font-weight: bold;
   font-size:28.80px;
   font-style: normal;
   text-align: justify;
   text-align-last: justify;
}
.WrapText1 span
{
   text-align: justify;
   text-align-last: justify;
}
.WrapText1 span:after
{
   content: "";
   display: inline-block;
   width: 100%;
}
#wb_Card4
{
   margin: 0;
   padding: 0;
   -webkit-animation: animate-fade-in-left 1000ms linear 0ms 1 normal both;
   animation: animate-fade-in-left 1000ms linear 0ms 1 normal both;
   background-color: rgba(176,196,222,0.20);
   background-image: none;
   border-top-width: 3px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 3px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   box-shadow: 3px 3px 6px #000000;
   text-align: center;
}
#Card4-card-body
{
   font-size: 0px;
}
#Card4-card-item0
{
   box-sizing: border-box;
   border-radius: 8px 8px 0 0 !important;
   margin: 20px 20px 0px 20px;
   padding: 0;
   color: #438AD0;
   font-family: "Bookman Old Style";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
#Card4-card-item1
{
   display: inline-block;
   height: 95px;
   box-sizing: border-box;
   margin: 25px 20px 20px 20px;
   padding: 10px 16px 10px 16px;
   border: 0px solid transparent;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #54C4D8;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 75px;
}
#wb_Card4:hover #Card4-card-item1
{
   -webkit-transform: rotateX(0deg) scale3d(1.3,1.3,1.3);
   transform: rotateX(0deg) scale3d(1.3,1.3,1.3);
   color: #008B8B;
   -webkit-transition: -webkit-transform 500ms linear 0ms, color 500ms linear 0ms;
   transition: transform 500ms linear 0ms, color 500ms linear 0ms;
}
#Card4-card-item1 a
{
   color: inherit;
   text-decoration: none;
}
#Card4-card-item1 i
{
   text-align: center;
   vertical-align: top;
   font-size: 75px;
   width: 75px;
}
#Card4-card-item2
{
   box-sizing: border-box;
   margin: 20px 20px 0px 20px;
   border-top: 1px #D8D8D8 solid;
   border-width: 1px 0 0 0;
   height: 0;
   line-height: 0;
}
#Card4-card-item3
{
   box-sizing: border-box;
   border-radius: 0 0 8px 8px !important;
   margin: 20px 20px 0px 20px;
   padding: 0;
   color: #808080;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
}
#wb_Card4:hover #Card4-card-item3
{
   color: #DB7093;
   -webkit-transition: color 500ms ease 0ms;
   transition: color 500ms ease 0ms;
}
#WrapText2
{
   background-clip: padding-box;
   background-color: rgba(0,0,0,0.00);
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-radius: 10px;
   box-shadow: 3px 3px 5px #000000 inset;
   -webkit-animation: transform-bounce-in-up 1000ms linear 0ms 1 normal both;
   animation: transform-bounce-in-up 1000ms linear 0ms 1 normal both;
}
.WrapText2
{
   position: absolute;
   border-width: 0px;
   color: #000000;
   font-family: "Lucida Sans Unicode";
   font-weight: bold;
   font-size:28.80px;
   font-style: normal;
   text-align: justify;
   text-align-last: justify;
}
.WrapText2 span
{
   text-align: justify;
   text-align-last: justify;
}
.WrapText2 span:after
{
   content: "";
   display: inline-block;
   width: 100%;
}
#wb_Card2
{
   margin: 0;
   padding: 0;
   -webkit-animation: animate-fade-in-down 1000ms linear 0ms 1 normal both;
   animation: animate-fade-in-down 1000ms linear 0ms 1 normal both;
   background-color: rgba(176,196,222,0.20);
   background-image: none;
   border-top-width: 3px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 3px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   box-shadow: 3px 3px 6px #000000;
   text-align: center;
}
#Card2-card-body
{
   font-size: 0px;
}
#Card2-card-item0
{
   box-sizing: border-box;
   border-radius: 8px 8px 0 0 !important;
   margin: 20px 20px 0px 20px;
   padding: 0;
   color: #438AD0;
   font-family: "Bookman Old Style";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
#Card2-card-item1
{
   display: inline-block;
   height: 95px;
   box-sizing: border-box;
   margin: 25px 20px 20px 20px;
   padding: 10px 16px 10px 16px;
   border: 0px solid transparent;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #54C4D8;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 75px;
}
#wb_Card2:hover #Card2-card-item1
{
   -webkit-transform: rotateX(0deg) scale3d(1.3,1.3,1.3);
   transform: rotateX(0deg) scale3d(1.3,1.3,1.3);
   color: #008B8B;
   -webkit-transition: -webkit-transform 500ms ease 0ms, color 500ms ease 0ms;
   transition: transform 500ms ease 0ms, color 500ms ease 0ms;
}
#Card2-card-item1 a
{
   color: inherit;
   text-decoration: none;
}
#Card2-card-item1 i
{
   text-align: center;
   vertical-align: top;
   font-size: 75px;
   width: 75px;
}
#Card2-card-item2
{
   box-sizing: border-box;
   margin: 20px 20px 0px 20px;
   border-top: 1px #D8D8D8 solid;
   border-width: 1px 0 0 0;
   height: 0;
   line-height: 0;
}
#Card2-card-item3
{
   box-sizing: border-box;
   border-radius: 0 0 8px 8px !important;
   margin: 20px 20px 0px 20px;
   padding: 0;
   color: #808080;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
}
#wb_Card2:hover #Card2-card-item3
{
   color: #DB7093;
   -webkit-transition: color 500ms ease 0ms;
   transition: color 500ms ease 0ms;
}
#WrapText3
{
   background-clip: padding-box;
   background-color: rgba(0,0,0,0.00);
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-radius: 10px;
   box-shadow: 3px 3px 5px #000000 inset;
   -webkit-animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both;
   animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both;
}
.WrapText3
{
   position: absolute;
   border-width: 0px;
   color: #000000;
   font-family: "Lucida Sans Unicode";
   font-weight: bold;
   font-size:28.80px;
   font-style: normal;
   text-align: justify;
   text-align-last: justify;
}
.WrapText3 span
{
   text-align: justify;
   text-align-last: justify;
}
.WrapText3 span:after
{
   content: "";
   display: inline-block;
   width: 100%;
}
#wb_Card3
{
   margin: 0;
   padding: 0;
   -webkit-animation: animate-fade-in-right 1000ms linear 0ms 1 normal both;
   animation: animate-fade-in-right 1000ms linear 0ms 1 normal both;
}
#Card3{
   background-color: rgba(176,196,222,0.20);
   background-image: none;
   border-top-width: 3px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 3px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   box-shadow: 0px 0px 6px #000000;
   text-align: center;
}
#Card3-card-body
{
   font-size: 0px;
}
#Card3-card-item0
{
   box-sizing: border-box;
   border-radius: 8px 8px 0 0 !important;
   margin: 20px 20px 0px 20px;
   padding: 0;
   color: #438AD0;
   font-family: "Bookman Old Style";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
#Card3-card-item1
{
   display: inline-block;
   height: 97px;
   box-sizing: border-box;
   margin: 25px 20px 20px 20px;
   padding: 10px 16px 10px 16px;
   border: 1px solid transparent;
   border-radius: 1px;
   background-color: transparent;
   background-image: none;
   color: #54C4D8;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 75px;
}
#wb_Card3:hover #Card3-card-item1
{
   -webkit-transform: rotateX(0deg) scale3d(1.3,1.3,1.3);
   transform: rotateX(0deg) scale3d(1.3,1.3,1.3);
   color: #008B8B;
   -webkit-transition: -webkit-transform 500ms ease 0ms, color 500ms ease 0ms;
   transition: transform 500ms ease 0ms, color 500ms ease 0ms;
}
#Card3-card-item1 a
{
   color: inherit;
   text-decoration: none;
}
#Card3-card-item1 i
{
   text-align: center;
   vertical-align: top;
   font-size: 75px;
   width: 75px;
}
#Card3-card-item2
{
   box-sizing: border-box;
   margin: 20px 20px 0px 20px;
   border-top: 1px #D8D8D8 solid;
   border-width: 1px 0 0 0;
   height: 0;
   line-height: 0;
}
#Card3-card-item3
{
   box-sizing: border-box;
   border-radius: 0 0 8px 8px !important;
   margin: 20px 20px 0px 20px;
   padding: 0;
   color: #808080;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
}
#wb_Card3:hover #Card3-card-item3
{
   color: #DB7093;
   -webkit-transition: color 500ms ease 0ms;
   transition: color 500ms ease 0ms;
}
#Card3 .arrow
{
   position: absolute;
   display: block;
   width: 13px;
   height: 6.5px;
   margin: 0;
}
#Card3 .arrow::before, #Card3 .arrow::after
{
   position: absolute;
   display: block;
   content: "";
   border-color: transparent;
   border-style: solid;
}
#Card3, .Card3.bs-popover-auto[x-placement^="top"]
{
   margin-bottom: 6.5px;
}
#Card3 > .arrow, .Card3.bs-popover-auto[x-placement^="top"] > .arrow
{
   bottom: 0;
}
#Card3 > .arrow::before, .Card3.bs-popover-auto[x-placement^="top"] > .arrow::before
{
   bottom: 0;
   border-width: 6.5px 6.5px 0;
   border-top-color: #DEDEDE;
}
#Card3 > .arrow::after, .Card3.bs-popover-auto[x-placement^="top"] > .arrow::after
{
   bottom: 1px;
   border-width: 6.5px 6.5px 0;
   border-top-color: rgba(176,196,222,0.20);
}
#Card3 .arrow{
   left: calc(50% - 6.5px);
}
#Card3{
   height: calc(100% - 6.5px);
}
#WrapText4
{
   background-clip: padding-box;
   background-color: rgba(0,0,0,0.00);
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-radius: 10px;
   box-shadow: 3px 3px 5px #000000 inset;
   -webkit-animation: animate-fade-in-down 1000ms linear 0ms 1 normal both;
   animation: animate-fade-in-down 1000ms linear 0ms 1 normal both;
}
.WrapText4
{
   position: absolute;
   border-width: 0px;
   color: #000000;
   font-family: "Lucida Sans Unicode";
   font-weight: bold;
   font-size:28.80px;
   font-style: normal;
   text-align: justify;
   text-align-last: justify;
}
.WrapText4 span
{
   text-align: justify;
   text-align-last: justify;
}
.WrapText4 span:after
{
   content: "";
   display: inline-block;
   width: 100%;
}
#Button2
{
   box-sizing: border-box;
   line-height: 34px;
   text-decoration: none;
   vertical-align: top;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   background-color: rgba(127,127,127,0.20);
   background-image: none;
   color: #FFFFFF;
   box-shadow: 3px 3px 8px #7F7F7F;
   font-family: "Courier New";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
}
#Button2:hover
{
   -webkit-transform: rotateX(0deg) scale3d(1.1,1.1,1.0);
   transform: rotateX(0deg) scale3d(1.1,1.1,1.0);
   -webkit-transition: -webkit-transform 500ms linear 0ms;
   transition: transform 500ms linear 0ms;
}
#Button3
{
   box-sizing: border-box;
   line-height: 63px;
   text-decoration: none;
   vertical-align: top;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #F2F2F2;
   border-right-color: #F2F2F2;
   border-bottom-color: #F2F2F2;
   border-left-color: #F2F2F2;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
   background-color: rgba(174,94,39,0.20);
   background-image: none;
   color: #55783E;
   box-shadow: 3px 3px 8px #7F7F7F;
   font-family: "Courier New";
   font-weight: bold;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
   -webkit-animation: transform-scale-in 1000ms linear 0ms 1 normal both;
   animation: transform-scale-in 1000ms linear 0ms 1 normal both;
}
#Button3:hover
{
   box-shadow: 3px -2px 21px 8px rgba(172,189,234,0.75);
   background-color: rgba(105,65,85,0.20);
   -webkit-transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
   transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
}
#Button5
{
   box-sizing: border-box;
   line-height: 88px;
   text-decoration: none;
   vertical-align: top;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #F2F2F2;
   border-right-color: #F2F2F2;
   border-bottom-color: #F2F2F2;
   border-left-color: #F2F2F2;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
   background-color: rgba(236,19,84,0.20);
   background-image: none;
   color: #AE5E27;
   box-shadow: 3px 3px 8px #7F7F7F;
   font-family: "Courier New";
   font-weight: bold;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
   -webkit-animation: twister-up-in 1000ms linear 0ms 1 normal both;
   animation: twister-up-in 1000ms linear 0ms 1 normal both;
}
#Button5:hover
{
   box-shadow: 3px -2px 21px 8px rgba(172,189,234,0.75);
   background-color: rgba(60,88,137,0.20);
   -webkit-transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
   transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
}
#Button6
{
   box-sizing: border-box;
   line-height: 63px;
   text-decoration: none;
   vertical-align: top;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #F2F2F2;
   border-right-color: #F2F2F2;
   border-bottom-color: #F2F2F2;
   border-left-color: #F2F2F2;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
   background-color: rgba(85,120,62,0.20);
   background-image: none;
   color: #694155;
   box-shadow: 3px 3px 8px #7F7F7F;
   font-family: "Courier New";
   font-weight: bold;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
   -webkit-animation: twister-down-in 1000ms linear 0ms 1 normal both;
   animation: twister-down-in 1000ms linear 0ms 1 normal both;
}
#Button6:hover
{
   box-shadow: 3px -2px 21px 8px rgba(172,189,234,0.75);
   background-color: rgba(167,131,23,0.20);
   -webkit-transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
   transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
}
#Button7
{
   box-sizing: border-box;
   line-height: 70px;
   text-decoration: none;
   vertical-align: top;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #F2F2F2;
   border-right-color: #F2F2F2;
   border-bottom-color: #F2F2F2;
   border-left-color: #F2F2F2;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
   background-color: rgba(30,114,199,0.20);
   background-image: none;
   color: #55783E;
   box-shadow: 3px 3px 8px #7F7F7F;
   font-family: "Courier New";
   font-weight: bold;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
   -webkit-animation: twister-up-in 1000ms linear 0ms 1 normal both;
   animation: twister-up-in 1000ms linear 0ms 1 normal both;
}
#Button7:hover
{
   box-shadow: 3px -2px 21px 8px rgba(172,189,234,0.75);
   background-color: rgba(85,120,62,0.20);
   -webkit-transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
   transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
}
#SlideShow1 .image
{
   border-width: 0;
   border-radius: 0px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#SlideShow1
{
   margin: 0;
   -webkit-animation: transform-lightspeed-in 1000ms linear 0ms 1 normal both;
   animation: transform-lightspeed-in 1000ms linear 0ms 1 normal both;
}
#SlideShow1:hover
{
   -webkit-transform: rotateX(0deg) scale3d(1.1,1.1,1.0);
   transform: rotateX(0deg) scale3d(1.1,1.1,1.0);
   -webkit-transition: -webkit-transform 500ms linear 0ms;
   transition: transform 500ms linear 0ms;
}
#Button4
{
   box-sizing: border-box;
   line-height: 73px;
   text-decoration: none;
   vertical-align: top;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #F2F2F2;
   border-right-color: #F2F2F2;
   border-bottom-color: #F2F2F2;
   border-left-color: #F2F2F2;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
   background-color: rgba(105,65,85,0.20);
   background-image: none;
   color: #EC1354;
   box-shadow: 3px 3px 8px #7F7F7F;
   font-family: "Courier New";
   font-weight: bold;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
   -webkit-animation: tin-right-in 1000ms linear 0ms 1 normal both;
   animation: tin-right-in 1000ms linear 0ms 1 normal both;
}
#Button4:hover
{
   box-shadow: 3px -2px 21px 8px rgba(172,189,234,0.75);
   background-color: rgba(87,255,192,0.20);
   -webkit-transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
   transition: box-shadow 500ms linear 0ms, background-color 500ms linear 0ms;
}
#LayerMenu
{
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
}
#ThemeableButton2
{
   font-family: Arial;
   font-weight: normal;
   font-size: 19px;
   font-style: italic;
   display: inline-block;
   position: relative;
   vertical-align: middle;
   user-select: none;
   overflow: visible;
   text-decoration: none;
   cursor: pointer;
}
#wb_ThemeableButton2
{
   border-radius: 4px;
   margin: 0;
   vertical-align: top;
}
#ThemeableButton2
{
   box-sizing: border-box;
   padding: 0;
   text-align: center;
}
#wb_ThemeableButton2 .ui-button
{
   margin: 0;
   line-height: 21px;
}
#ThemeableButton2
{
   color: #454545;
   text-decoration: none;
}
#ThemeableButton2 :hover
{
   color: #2B2B2B;
}
#ThemeableButton2 :active
{
   color: #FFFFFF;
}
#wb_ThemeableButton2 .ui-primary
{
   background-image: none !important;
   text-indent: 0;
   display: inline-block;
   font-family: "Bootstrap Icons";
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   overflow: visible;
   position: absolute;
   left: 10px;
   top: 50%;
   margin-top: -9.5px;
   width: 19px;
   height: 19px;
   color: #454545;
}
#wb_ThemeableButton2 .ui-primary:before
{
   content: "\f432";
}
#wb_ThemeableButton2:hover .ui-primary
{
   color: #2B2B2B;
}
#wb_ThemeableButton2:active .ui-primary
{
   color: #FFFFFF;
}
#wb_ThemeableButton2 .ui-corner-all, #wb_ThemeableButton2 .ui-corner-left
{
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
}
#wb_ThemeableButton2 .ui-corner-all, #wb_ThemeableButton2 .ui-corner-right
{
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
}
#wb_ThemeableButton2 .ui-button
{
   background-color: transparent;
   background-image: none;
   border: 1px solid rgba(197,197,197,0.00);
   color: #454545;
}
#wb_ThemeableButton2 .ui-state-hover, #wb_ThemeableButton2 .ui-button:hover
{
   border-color: #CCCCCC;
   background-color: #EDEDED;
   background-image: none;
   color: #2B2B2B;
}
#wb_ThemeableButton2 .ui-state-active, #wb_ThemeableButton2 .ui-button:active
{
   border-color: #2E6DA4;
   background-color: #3370B7;
   background-image: none;
   color: #FFFFFF;
}
#LayerAbout
{
   background-color: rgba(12,12,12,0.33);
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-radius: 20px;
   box-shadow: 3px 3px 8px #000000 inset;
   -webkit-animation: push 1000ms linear 0ms 1 normal both;
   animation: push 1000ms linear 0ms 1 normal both;
   margin: 0 auto;
}
#WrapText5
{
   background-clip: padding-box;
   background-color: rgba(0,0,0,0.00);
   background-image: none;
   border-top-width: 2px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 2px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-radius: 10px;
   box-shadow: 3px 3px 8px #000000;
   -webkit-animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both, animate-box-shadow 1000ms linear 0ms infinite normal both;
   animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both, animate-box-shadow 1000ms linear 0ms infinite normal both;
}
.WrapText5
{
   position: absolute;
   border-width: 0px;
   color: #000000;
   font-family: "Lucida Sans Unicode";
   font-weight: bold;
   font-size:28.80px;
   font-style: normal;
   text-align: justify;
   text-align-last: justify;
}
.WrapText5 span
{
   text-align: justify;
   text-align-last: justify;
}
.WrapText5 span:after
{
   content: "";
   display: inline-block;
   width: 100%;
}
#WrapText6
{
   background-clip: padding-box;
   background-color: rgba(0,0,0,0.00);
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-radius: 10px;
   box-shadow: 0px 0px 8px #000000 inset;
   -webkit-animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both;
   animation: transform-bounce-in-down 1000ms linear 0ms 1 normal both;
}
.WrapText6
{
   position: absolute;
   border-width: 0px;
   color: #000000;
   font-family: "Lucida Sans Unicode";
   font-weight: bold;
   font-size:28.80px;
   font-style: normal;
   text-align: justify;
   text-align-last: justify;
}
.WrapText6 span
{
   text-align: justify;
   text-align-last: justify;
}
.WrapText6 span:after
{
   content: "";
   display: inline-block;
   width: 100%;
}
#ThemeableButton3
{
   cursor: progress;
   font-family: "Courier New";
   font-weight: normal;
   font-size: 16px;
   font-style: normal;
   display: inline-block;
   position: relative;
   vertical-align: middle;
   user-select: none;
   overflow: visible;
   text-decoration: none;
}
#wb_ThemeableButton3
{
   border-radius: 8px;
   margin: 0;
   box-shadow: 0px 0px 8px #000000;
   vertical-align: top;
}
#ThemeableButton3
{
   box-sizing: border-box;
   padding: 0;
   text-align: center;
}
#wb_ThemeableButton3 .ui-button
{
   margin: 0;
   line-height: 36px;
}
#ThemeableButton3
{
   color: #454545;
   text-decoration: none;
}
#ThemeableButton3 :hover
{
   color: #2B2B2B;
}
#ThemeableButton3 :active
{
   color: #FFFFFF;
}
#wb_ThemeableButton3 .ui-corner-all, #wb_ThemeableButton3 .ui-corner-left
{
   border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;
}
#wb_ThemeableButton3 .ui-corner-all, #wb_ThemeableButton3 .ui-corner-right
{
   border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;
}
#wb_ThemeableButton3 .ui-button
{
   background-color: rgba(127,127,127,0.60);
   background-image: none;
   border: 1px solid rgba(127,127,127,0.20);
   color: #A5A5A5;
}
#wb_ThemeableButton3 .ui-state-hover, #wb_ThemeableButton3 .ui-button:hover
{
   border-color: #CCCCCC;
   background-color: rgba(85,120,62,0.60);
   background-image: none;
   color: #F2F2F2;
}
#wb_ThemeableButton3 .ui-state-active, #wb_ThemeableButton3 .ui-button:active
{
   border-color: #2E6DA4;
   background-color: #3370B7;
   background-image: none;
   color: #FFFFFF;
}
#wb_Text7 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Text8 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text8 div
{
   text-align: left;
}
#wb_Text9 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text9 div
{
   text-align: left;
}
#Layerfeedback
{
   background-color: #F2F2F2;
   background-image: none;
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-radius: 20px;
   box-shadow: 3px 3px 8px #000000 inset;
   -webkit-animation: push 1000ms linear 0ms 1 normal both;
   animation: push 1000ms linear 0ms 1 normal both;
   margin: 0 auto;
}
#wb_Form1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid transparent;
   border-radius: 0px;
}
#wb_Form1:hover
{
   border-color: #FFE9FF;
   -webkit-transition: border-color 500ms linear 0ms;
   transition: border-color 500ms linear 0ms;
}
#Label1
{
   border: 0px solid #CCCCCC;
   border-radius: 4px;
   background-color: transparent;
   background-image: none;
   color: #595959;
   font-family: "Courier New";
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   vertical-align: top;
}
#Label2
{
   border: 0px solid #CCCCCC;
   border-radius: 4px;
   background-color: transparent;
   background-image: none;
   color: #7F7F7F;
   font-family: "Courier New";
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   vertical-align: top;
}
#Editbox2
{
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   line-height: 28px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   box-shadow: 3px 3px 6px #7F7F7F inset;
}
#Editbox2::placeholder
{
   color: #D8D8D8;
   opacity: 1;
}
#Editbox2::-ms-input-placeholder
{
   color: #D8D8D8;
}
#Label3
{
   border: 0px solid #CCCCCC;
   border-radius: 4px;
   background-color: transparent;
   background-image: none;
   color: #7F7F7F;
   font-family: "Courier New";
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   vertical-align: top;
}
#Combobox1
{
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   background-color: #FFFFFF;
   background-image: none;
   color: #696969;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   box-shadow: 3px 3px 6px #7F7F7F inset;
   box-sizing: border-box;
}
#Label4
{
   border: 0px solid #CCCCCC;
   border-radius: 4px;
   background-color: transparent;
   background-image: none;
   color: #7F7F7F;
   font-family: "Courier New";
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   vertical-align: top;
}
#TextArea1
{
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   box-shadow: 3px 3px 6px #7F7F7F inset;
   text-align: left;
   overflow: auto;
   resize: none;
}
#TextArea1::placeholder
{
   color: #D8D8D8;
   opacity: 1;
}
#TextArea1::-ms-input-placeholder
{
   color: #D8D8D8;
}
#Button1
{
   border: 1px solid #2E6DA4;
   border-radius: 4px;
   background-color: #3370B7;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
}
#Editbox1
{
   border-top-width: 0px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 0px;
   border-top-style: double;
   border-right-style: double;
   border-bottom-style: double;
   border-left-style: double;
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
   border-bottom-color: #FFFFFF;
   border-left-color: #FFFFFF;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   line-height: 28px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   box-shadow: 3px 3px 6px #7F7F7F inset;
}
#Editbox1::placeholder
{
   color: #D8D8D8;
   opacity: 1;
}
#Editbox1::-ms-input-placeholder
{
   color: #D8D8D8;
}
#JavaScript1 .text 
{
   display: block;
   position: relative;
   margin: 25px 0 0 0;
   z-index: 2;
}
#JavaScript1 .bubbles 
{
   display: inline-block;
   position: relative;
}
#JavaScript1 .bubble 
{
   position: absolute;
   border-radius: 100%;
   bottom: 10px;
   background-color: #954F72;
   z-index: 1;
}
body {
  margin: 20px auto;
  font-family: 'Lato';
  background:#666;
  color:#fff;
}

*{
  margin:0;
  padding:0;
}

h2 {
  font-weight: bold;
  font-size: 1rem;
}
p {
  font-family: 'Reenie Beanie';
  font-size: 1rem;
}
ul,li{
  list-style:none;
}
ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transform: rotate(-6deg);
  transition: transform .15s linear;
}

ul li:nth-child(even) a{
  transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
ul li:nth-child(5n) a{
  transform:rotate(5deg);
  position:relative;
  top:-10px;
}

ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  transform: scale(1.25);
  position:relative;
  z-index:5;
}

ul li{
  margin:1em;
}
:root {
  --v1: #87CEEB;
  --v2: #ffffff;
  --v3: #7f6000;
  --transparentv3: #00FFFFFF;
  --v4: #38761d;
  --s1: #f3f6f4;
  --s2: #f4fedf;
  --cloud: #ffffff;
}
*,
*:before,
*:after {
  //animation:none!important;
}
.landscape:after,
.landscape:before,
.landscape *,
.landscape *:after,
.landscape *:before {
  position: absolute;
}

.front {
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
}

.landscape {
  height: 100vh;
  background-image: linear-gradient(var(--v1), var(--s1), var(--v1));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.mountain {
  border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;
  width: 40vmin;
  height: 30vmin;
  bottom: 50%;
  left: -10vmin;
  background: var(--s1);
  background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));
  box-shadow: inset -10px 0 10px -10px var(--s1);
  &:before {
    content: "";
    bottom: 0;
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: inherit;
    transform-origin: bottom center;
    transform: scaleX(1) scaleY(-0.6);
    filter: blur(3px);
  }
}

.mountain-2 {
  left: 5vmin;
  height: 15vmin;
  width: 40vmin;
  box-shadow: inset -15px 0 10px -14px var(--s1);
  border-radius: 120% 50% 0% 0%/25vmin 25vmin 0% 0%;
  background-image: linear-gradient(var(--v3), var(--v4));
}

.mountain-3 {
  border-radius: 80% 0% 0 0/100% 100% 0 0;
  right: -85vmin;
  width: 100vmin;
  left: auto;
  height: 12vmin;
  color: var(--v3);
  background-image: linear-gradient(var(--s1), var(--v4));
  box-shadow: inset 15px 0 10px -10px var(--s1);
}

.mountain-3:after {
  content: "";
  border-radius: 60% 0 0 0/100% 0 0 0;
  background: inherit;
  width: 100%;
  height: 0;
  bottom: 0;
  right: 20%;
}

.lotus {
  width: 10vmin;
  height: 5vmin;
  background: conic-gradient(
    var(--v3) 0deg 40deg,
    var(--transparentv3) 50deg 70deg,
    var(--v3) 80deg
  );
  border-radius: 50%;
}

.lotus-1 {
  bottom: 10vmin;
  right: 5vmin;
  width: 20vmin;
}

.lotus-2 {
  bottom: 20vmin;
  right: 15vmin;
  height: 3vmin;
  transform: skew(-10deg);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.lotus-3 {
  bottom: 10vmin;
  right: 35vmin;
  transform: rotate(180deg) skew(-20deg);
  opacity: 0.8;
  width: 15vmin;
}

.cloud {
  width: 80vmin;
  height: 6vmin;
  background: currentcolor;
  color: var(--cloud);
  top: 24vmin;
  left: 20vmin;
  border-radius: 50%;
  box-shadow: 30vmin 0.5vmin 0 -1vmin currentcolor,
    -25vmin 0 0 -0.6vmin currentcolor;
  opacity: 0.3;
  transform: translate3d(-150vmin, 0, 0);
  animation: clouds 120s infinite;
  animation-delay: -10s;
}
@keyframes clouds {
  50% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(150vmin, 0, 0);
  }
}
.cloud-1 {
  left: 60vmin;
  top: 15vmin;
  opacity: 0.2;
  filter: blur(1px);
  animation-delay: 0;
  animation-duration: 100s;
}

.water {
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#009fe1, var(--v2));
  overflow: hidden;
  box-shadow: inset 0 1px 4px -3px white;
}

.stone {
  bottom: -5vh;
  left: 0;
  height: 20vmin;
  width: 40vmin;
  background: var(--v4);
  box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.2);
  border-radius: 0% 200% 0 0/0% 200%;
}
.stone:after {
  content: "";
  background: var(--v3);
  width: 100%;
  height: 100%;
  right: -15%;
  border-radius: inherit;
  z-index: -1;
  transform: scaleX(1.3) skew(10deg);
  box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.4);
}

.grass {
  height: 40vmin;
  width: 10vmin;
  border-radius: 0 60% 0 0/0 100% 0 0;
  bottom: 0;
  border-right: 5px solid var(--v4);
  box-shadow: 1px 0 0 var(--s1);
  filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2))
    drop-shadow(-4.5vmin 10vmin 0 var(--v3));
}

.grass-1 {
  left: 14vmin;
  bottom: -2vmin;
  transform: scaleX(-1);
  box-shadow: 2px 0 0 var(--v4);
  border-color: var(--v3);
  filter: drop-shadow(-1vmin 5vmin 0 var(--v3))
    drop-shadow(-80vmin 5vmin 0 var(--v4));
}

.grass-2 {
  right: 0;
  left: auto;
  height: 20vmin;
  bottom: -2vmin;
  transform: scaleX(-1);
}

.sun {
  background: white;
  border-radius: 50%;
  width: 20vmin;
  height: 20vmin;
  left: calc(60% - 10vmin);
  top: 100%;
  transform: translate3d(0, 0, 0);
  animation: rise 30s infinite;
  box-shadow: 0 0 10px white;
}
.reed {
  height: 40vmin;
  width: 0.5vmin;
  bottom: 0;
  left: 10vmin;
  color: var(--v4);
  background: currentColor;
  transform-origin: bottom center;
  transform: rotate(4deg);
  box-shadow: inset -1px 0 0 var(--s2), -6vmin 3vmin 0 0, 80vmin 0 0 0;
  animation: verticalise 20s infinite;
}
.reed-1 {
  color: var(--s2);
  left: 15vmin;
  height: 50vmin;
  bottom: -5vmin;
  transform: rotate(-2deg);
  animation: verticalise-1 20s infinite;
  box-shadow: inset -1px 0 0 var(--s1), 6vmin 13vmin 0 0 var(--s1),
    80vmin 10vmin 0 0 var(--v3);
}
.reed:after {
  content: "";
  width: 1.5vmin;
  height: 10vmin;
  background: currentcolor;
  border-radius: 0.75vmin;
  top: 0;
  left: -0.5vmin;
  box-shadow: inherit;
}
@keyframes verticalise {
  0%,
  10% {
    transform: rotate(4deg);
  }
  30%,
  70% {
    transform: rotate(0);
  }
}
@keyframes verticalise-1 {
  0%,
  10% {
    transform: rotate(-2deg);
  }
  45%,
  70% {
    transform: rotate(0) translateY(-6vmin);
  }
}
@keyframes rise {
  100% {
    transform: translate3d(0, -100vh, 20vmin);
  }
}
@keyframes rise-reflection {
  30% {
    opacity: 0;
    transform: translate3d(0, 5vmin, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 80vmin, 0);
  }
}
.sun-container {
  overflow: hidden;
  width: 100%;
  height: 50%;
}

.sun-container-1:after {
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: radial-gradient(circle at 60% 100%, var(--s2), transparent);
  animation: fade 20s infinite;
  mix-blend-mode: color-burn;
}

@keyframes fade {
  10% {
    opacity: 1;
  }
  30%,
  70% {
    opacity: 0;
  }
}
.sun-container-reflection {
  top: 50%;
  background: radial-gradient(circle at 60% 0%, var(--s2), transparent);
}
.sun-container-reflection .sun {
  background: linear-gradient(white, rgba(255, 255, 255, 0));
  box-shadow: none;
  filter: blur(5px);
  opacity: 1;
  top: 0;
  transform: translate3d(0, -20vmin, 0);
  animation-name: rise-reflection;
}

.light {
  height: 0.5vmin;
  width: 20vmin;
  background: white;
  left: 20%;
  right: 0;
  margin: auto;
  top: calc(50% + 1vmin);
  animation: light 20s infinite;
  opacity: 0;
  transform: scaleX(0.1) translate3d(0%, 0, 0);
  border-radius: 0.25vh;
  filter: blur(1px);
}

@-webkit-keyframes light {
  5% {
    opacity: 1;
    transform: scaleX(1);
  }
  10% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(5%, 0, 0);
  }
  15% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(-5%, 0, 0);
  }
  20% {
    opacity: 0;
    transform: scaleX(0.1) translate3d(0, 0, 0);
  }
}
@keyframes light {
  5% {
    opacity: 1;
    transform: scaleX(1);
  }
  10% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(5%, 0, 0);
  }
  15% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(-5%, 0, 0);
  }
  20% {
    opacity: 0;
    transform: scaleX(0.1) translate3d(0, 0, 0);
  }
}
.light-1 {
  top: calc(50% + 2vmin);
  animation-delay: 0.5s;
}

.light-2 {
  top: calc(50% + 3vmin);
  width: 18vmin;
  animation-delay: 1s;
}
.light-3 {
  top: calc(50% + 4vmin);
  width: 18vmin;
  animation-delay: 1.5s;
}
.light-4 {
  top: calc(50% + 5vmin);
  width: 16vmin;
  animation-delay: 2s;
}
.light-5 {
  top: calc(50% + 8vmin);
  width: 14vmin;
  animation-delay: 2.5s;
}
.light-6 {
  top: calc(50% + 9vmin);
  width: 10vmin;
  animation-delay: 3s;
}
.light-7 {
  top: calc(50% + 7vmin);
  width: 12vmin;
  animation-delay: 3.5s;
}

.splash {
  width: 8vmin;
  height: 3vmin;
  border: 2px solid var(--s1);
  box-shadow: 0 0 2px var(--s1);
  border-radius: 50%;
  bottom: 5vmin;
  left: 70%;
  animation: splash 9s infinite;
  transform: scale(0);
}

.splash-stone {
  bottom: 15vh;
  left: -3vmin;
  height: 10vmin;
  width: 30vmin;
}

.splash-4 {
  bottom: 5vmin;
  left: auto;
  bottom: 15vmin;
  right: -2vmin;
}

@keyframes splash {
  50%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.delay-1 {
  animation-delay: 1s;
}
.delay-2 {
  animation-delay: 2s;
}
.delay-3 {
  animation-delay: 3s;
}
.delay-4 {
  animation-delay: 4s;
}
.delay-5 {
  animation-delay: 5s;
}
.delay-6 {
  animation-delay: 6s;
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* .wrapper{
    background-color: rgb(6, 14, 22);
    padding: 50px;
    border-radius: 50%;
} */

.color{
    background: linear-gradient(to bottom, #2980b9, #2c3e50);
    -webkit-text-fill-color: transparent;
    background-clip: unset;
    -webkit-background-clip: text;
}

.time{
    position: relative;
}

#time{
    text-shadow: 0 0 55px #2980b9;
    font-size: 4.5rem;
}
#med{
    position: absolute;
    top: 10px;
    right: 0px;
}

/* .day{
    display: flex;
    justify-content: space-between;
} */

.day span{
    font-size: 0.9rem;
    opacity: 0.4;
    font-weight: 600;
}
p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}