.wrapper-new {
     background-color: #53AFFF;
     max-width: 1159px;
     height: 100vh;
     display: flex;
    /* Direction of the items, can be row or column */
     flex-direction: column;
}
footer {
     height: 55px;
     padding-top: 7px;
     font-size: 10pt;
     color: #FFB969;
     bottom: 0;
     width: 100%;
     background: url(../img/other/bg2.jpg);
}
 footer a {
     color: white;
}
 footer a:hover {
     color: #FFB969;
}
.footer-left {
     padding: 0 0 0 10%;
     display: table-cell;

     float: left;
     font-size: 9pt;
     text-align: left;
}
 .footer-right {
     padding: 0 10% 0 0;
     display: table-cell;
     float: right;
}
 p.footer {
     margin: 5px 0 8px 0;
     font-family: Arial,Helvetica,sans-serif!important;
     line-height: 6px!important;
     font-size: 9pt!important;;
     color: #0089C4;
}
 footer {
     height: 55px;
     padding-top: 7px;
     font-size: 10pt;
     color: #FFB969;
     bottom: 0;
     width: 100%;
     background: url(../img/other/bg2.jpg);
}
 main {
     background-color: white;
     flex: 1;
     padding: 0;
}
.social-fb, .social-tw, .social-in, .social-ig, .social-be, .social-yo {
     margin-top: 5px;
     width: 30px;
     height: 30px;
     display: inline-block;
     transition: all 400ms;
     -webkit-transition: all 400ms;
}
 .social-fb {
     background: url(../img/other/socials.png) 0 0px;
}
 .social-fb:hover {
     background: url(../img/other/socials.png) 0 -30px;
}
 .social-tw {
    /* For some reason it thinks it's 150, not 30 */
     background: url(../img/other/socials.png) 150px 0;
}
 .social-tw:hover {
    /* For some reason it thinks it's 150, not 30 */
     background: url(../img/other/socials.png) 150px -30px;
}
 .social-ig {
     background: url(../img/other/socials.png) 120px 0;
}
 .social-ig:hover {
     background: url(../img/other/socials.png) 120px -30px;
}
 .social-in {
     background: url(../img/other/socials.png) 90px 0;
}
 .social-in:hover {
     background: url(../img/other/socials.png) 90px -30px;
}
 .social-be {
     background: url(../img/other/socials.png) 60px 0;
}
 .social-be:hover {
     background: url(../img/other/socials.png) 60px -30px;
}
 .social-yo {
    /* For some reason it thinks it's 30, not 150 */
     background: url(../img/other/socials.png) 30px 0;
}
 .social-yo:hover {
    /* For some reason it thinks it's 30, not 150 */
     background: url(../img/other/socials.png) 30px -30px;
}
/* --------------------------------------------- reset all styles --------------------------------------------- */
 .zuperSlider, .zuperSlider * {     max-width: 1159px;
     margin: 0;
     padding: 0;
     border: medium none;
     font: normal 12px/18px Arial,Verdana;
}
 .zuperSlider *:focus{
     outline: none 
}
 .zuperSlider *::-moz-focus-inner {
     border: medium none;
}
 .zuperSlider ul, .zuperSlider ul li {
     list-style-type: none;
     position: absolute;
     top:0;
}
/* END - reset all styles */
/* --------------------------------------------- general properties --------------------------------------------- */
/* container used for responsive feature. Set here the width and height of slider (for responsive use max-width and min-width;
 height must have numeric values) For full screen with responsive feature set: height: 100%;
 width:100%;
 min-width: 640px;
 // your min-width value for slider position: fixed;
 */
/* do not modify. To change the slider width and height please modify zuperWrap class */
 .zuperSlider {
     position: inherit;
     height: 100%;
     max-width: 959px;
}
/* hide all children of slider (used for loading screen)*/
 .zuperSlider > * {
     visibility: hidden;
}
/* loading screen image and size*/
 .zuperSliderLoader {
     background: url("../images/loader.gif") no-repeat scroll center center transparent;
}
 .zuperSlider img {
     display: block;
}
/* END - properties */
/* --------------------------------------------- container properties --------------------------------------------- */
 .zuperSlider > .container {
     overflow: hidden;
     position: absolute;
     z-index: 1;
    /* change container size and position */
     left: 0;
     top: 0;
     width: 100%;
     height: 70%;
}
/* set container dimension */
 .zuperSlider > .container > ul {
     position: absolute;
     width: 100%;
     height: 100%;
}
/* style <li> of container */
 .zuperSlider > .container > ul > li {
     position: absolute;
     visibility: hidden;
     display: block;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
}
/* first child will be above all children */
 .zuperSlider > .container > ul > li:nth-child(1) {
     z-index: 2;
}
/* slide active will have class 'active3' */
 .zuperSlider > .container > ul > li.active3 {
     visibility: visible;
     overflow: hidden;
     z-index: 4;
}
/* slide animated will have class 'active2' */
 .zuperSlider > .container > ul > li.active2 {
     visibility: visible;
     overflow: hidden;
     z-index: 3;
}
/* END - container properties */
/* --------------------------------------------- direction navigation - arrows (next, prev) --------------------------------------------- */
 .zuperSlider > .arrow {
     position: fixed;
     z-index: 20;
     cursor: pointer;
     top:80%!important;
}
/* right arrow image */
 .zuperSlider > .next {
     background: url("../img/other/right-arrow.png") no-repeat scroll 20px transparent;
     padding:0 20px 0 0;
     width:40px;
     height:40px;
     opacity: 0.5;
     -webkit-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
}
/* left arrow image */
 .zuperSlider > .prev {
     background: url("../img/other/left-arrow.png") no-repeat scroll 20px transparent ;
     padding:0 20px 0 0;
     width:40px;
     height:40px;
     opacity: 0.5;
     -webkit-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
}
 .zuperSlider > .prev:hover, .zuperSlider > .next:hover{
     opacity:1;
}
/* END - arrow buttons (next, prev) */
/* --------------------------------------------- alternative navigation (bullets, numbers or images) --------------------------------------------- */
 .zuperSlider > .zuperNav {
     position: absolute;
     z-index: 21;
}
/* bullets navigation */
 .zuperSlider > .zuperNav > ul.nav > li {
     background: url("../images/sprite.png") no-repeat scroll -36px -49px transparent;
     cursor: pointer;
     float: left;
     margin: 0 2px;
    /* change alternative navigation size here (bullets)*/
     width: 14px;
     height: 14px;
}
/* 'bullets navigation' that is active */
 .zuperSlider > .zuperNav > ul.nav > li.active {
     background: url("../images/sprite.png") no-repeat scroll -36px -33px transparent;
}
/* numbers navigation */
 .zuperSlider > .zuperNav > ul.nav_num > li {
     background: url("../images/sprite.png") no-repeat scroll -50px -70px transparent;
     color: #09BBBB;
     cursor: pointer;
     float: left;
     font: italic 20px/36px Georgia,Arial,Verdana;
     margin: 0 2px;
     text-align: center;
    /* change alternative navigation size here (numbers)*/
     height: 42px;
     width: 42px;
}
/* 'numbers navigation' that is active */
 .zuperSlider > .zuperNav > ul.nav_num > li.active {
     background: url("../images/sprite.png") no-repeat scroll -3px -70px transparent;
     color: #fff;
}
/* images navigation (set size with config option from zuperSlider plugin)*/
 .zuperSlider > .zuperNav > ul.nav_img > li {
     cursor: pointer;
     float: left;
     margin: 2px;
     opacity: 0.7;
     filter: alpha(opacity = 70);
     overflow: hidden;
     position: relative;
     border: 3px solid #fff;
}
/* 'images navigation' that is active */
 .zuperSlider > .zuperNav > ul.nav_img > li.active {
     border: 3px solid #09bbbb;
     opacity: 1;
     filter: alpha(opacity = 100);
}
/* if 'images navigation' has content style it */
 .zuperSlider > .zuperNav > ul.nav_img > li > div {
     position: absolute;
     top: 5px;
     left: 5px;
}
/* navigation with thumbs (set size with config option from zuperSlider plugin) */
 .zuperSlider .nav_thumb {
     background: url("../images/thumbs_arrow.png") no-repeat scroll center bottom transparent;
     padding-bottom: 3px;
     position: absolute;
}
 .zuperSlider .nav_thumb > div {
     overflow: hidden;
     border: 3px solid #000;
}
/* END - alternative navigation (bullets, numbers or images) */
/* --------------------------------------------- auto (slideshow) --------------------------------------------- */
/* circular type */
 .zuperSlider > .circular {
     background: url("../images/sprite.png") no-repeat scroll 0 0 transparent;
     position: absolute;
     z-index: 17;
    /* change circular size here */
     width: 30px;
     height: 30px;
}
 .zuperSlider > .circular > .circularWrap {
     cursor: pointer;
     position: absolute;
    /* change circular clip property here */
     clip: rect(0 30px 30px 15px);
    /* change circular container size here */
     height: 30px;
     width: 30px;
}
 .zuperSlider > .circular > .circularWrap > .circularRight, .zuperSlider > .circular > .circularWrap > .circularLeft {
     position: absolute;
     top: 0;
     left: 0;
     -moz-transform: rotate(-180deg);
     -webkit-transform: rotate(-180deg);
     -o-transform: rotate(-180deg);
     -ms-transform: rotate(-180deg);
     transform: rotate(-180deg);
    /* change circular elements size here */
     width: 30px;
     height: 30px;
}
/* circular left element */
 .zuperSlider > .circular > .circularWrap > .circularLeft {
     background: url("../images/sprite.png") no-repeat scroll -31px 0 transparent;
     display: none;
}
/* circular right element */
 .zuperSlider > .circular > .circularWrap > .circularRight {
     background: url("../images/sprite.png") no-repeat scroll -61px 0 transparent;
}
/* numbers type */
 .zuperSlider > .numbers {
     color: #fff;
     font: italic 26px Georgia,Arial,Verdana;
     position: absolute;
     z-index: 17;
}
/* line type */
 .zuperSlider > .wrapTimer {
     position: absolute;
     z-index: 17;
     overflow: hidden;
    /* change line width here (for responsive to work you must insert values in %)*/
     width: 80%;
}
 .zuperSlider > .wrapTimer > .timer {
     background: #fff;
    /* change line height here */
     height: 2px;
}
/* play/pause button */
 .zuperSlider > .playPause {
     cursor: pointer;
     position: absolute;
     z-index: 18;
    /* change play/pause size here */
     width: 13px;
     height: 13px;
}
/* play is visible */
 .zuperSlider > .play {
     background: url("../images/sprite.png") no-repeat scroll -1px -34px transparent;
}
 .zuperSlider > .play:hover {
     background: url("../images/sprite.png") no-repeat scroll -1px -50px transparent;
}
/* pause is visible */
 .zuperSlider > .pause {
     background: url("../images/sprite.png") no-repeat scroll -18px -33px transparent;
}
 .zuperSlider > .pause:hover {
     background: url("../images/sprite.png") no-repeat scroll -18px -50px transparent;
}
/* END - auto (slideshow) */
/* --------------------------------------------- caption --------------------------------------------- */
 @font-face {
     font-family: 'districtregular';
     src: url('../fonts/distth__-webfont.eot');
     src: url('../fonts/distth__-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/distth__-webfont.woff') format('woff'), url('../fonts/distth__-webfont.ttf') format('truetype'), url('../fonts/distth__-webfont.svg#districtregular') format('svg');
     font-style: normal;
}
 .zuperSlider .caption {
     position: absolute;
     z-index: 2;
     opacity: 0;
     filter: alpha(opacity = 0);
}
/* start - captions style */
 .captionH1 {
     color: #FEFEFF;
     font-family: 'Open Sans Condensed' , 'arial';
     font-size:70px;
     text-align: left;
     left: 10%;
     top: 150px;
     text-shadow: 1px 1px 5px #000;
}
 .captionH2 {
     --top:150px;
     --fontH1: 70px;
     --percent: 0.01;
     top: calc( var(--top) + var(--fontH1)*0.8 );
     font-size: calc( var(--fontH1) * 0.34);
     color: #FEFEFF;
     font-family: 'Open Sans Condensed' , 'arial';
     font-weight: bold;
     left: 10%;
     text-shadow: 1px 1px 5px #000;
}
 .captionH3 {
     font-family: 'Open Sans Condensed' , 'arial';
     font-size:40px;
     left: 10%;
     z-index:1000;
}
/* END - caption */
/* --------------------------------------------- square effect // internal needs (please do not modify) --------------------------------------------- */
 .zuperSlider > .container > ul > .block {
     overflow: hidden;
     position: absolute;
     z-index: 5;
}
 .zuperSlider > .container > ul > .block > li {
     display: block;
     visibility: visible;
     overflow: visible;
     position: absolute;
     width: 100%;
     height: 100%;
}
/* END - square effect */
/* --------------------------------------------- used by touch navigation // internal needs (please do not modify) --------------------------------------------- */
 .zuperSlider .grab * {
     cursor: url(../images/grab.cur), move;
     cursor: grab;
     cursor: -moz-grab;
}
 .zuperSlider .grabbing * {
     cursor: url(../images/grabbing.cur), move !important;
     cursor: grabbing !important;
     cursor: -moz-grabbing !important;
}
 .zuperSlider .nonGrab {
     cursor: auto;
}
/* END - used by touch navigation */
 html,body {
 	margin:0;
     height: 100%;
}
 body {
	 background-color: #53AFFF;
     width: 100%;
     height: 100%;
     margin-left: auto;
     margin-right: auto;
     text-align: left;
}
 .roll-in-right {
     -webkit-animation: roll-in-right 0.6s ease-out both;
     animation: roll-in-right 0.6s ease-out both;
}
/* ---------------------------------------------- * Generated by Animista on 2020-8-16 17:16:12 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */
/** * ---------------------------------------- * animation roll-in-right * ---------------------------------------- */
 @keyframes roll-in-right {
     0% {
         -webkit-transform: translateX(800px) rotate(540deg);
         transform: translateX(800px) rotate(540deg);
         opacity: 0;
    }
     100% {
         -webkit-transform: translateX(0) rotate(0deg);
         transform: translateX(0) rotate(0deg);
         opacity: 1;
    }
}
.enter-container{
     display: inline-block;
     position: absolute;
     bottom:30px;
     animation-delay: 1s;
     background: url(../img/other/logo_index.png) no-repeat 0 0;
     -webkit-animation-delay: 1s;
     z-index:1000;
     height:102px;
     width:330px;
     text-align: right;
     font-size:20pt;
     color:white!important;
     margin:0;
     left:10%;
     transition: all 400ms;
}
 .enter-container:hover {
     background: url(../img/other/logo_index.png) no-repeat 0 -102px;
     font-family: 'Open Sans Condensed' , 'arial';
     color:white!important;
     opacity:1;
} .enter-container-right{
     display: inline-block;
     position: absolute;
     bottom:30px;
     animation-delay: 1s;
     background: url(../img/other/login_index.png) no-repeat 0 0;
     -webkit-animation-delay: 1s;
     z-index:1000;
     height:102px;
     width:164px;
     text-align: right;
     font-size:20pt;
     color:white!important;
     margin:0;
     right:10%;
     transition: all 400ms;
}
 .enter-container-right:hover {
     background: url(../img/other/login_index.png) no-repeat 0 -102px;
     font-family: 'Open Sans Condensed' , 'arial';
     color:white!important;
     opacity:1;
}
 @media only screen and (min-width:1160px) {

     header nav {
         left: 670px;
    }
    header{
    	width:1160px;
    }
    .wrapper-new {
		position: relative!important;
		margin-left: auto;
		margin-right: auto;
    }
}
 @media only screen and (max-width:759px) {
	  .footer-left {
	     padding: 0 0 0 5%;
	}
	 .footer-right {
	     padding: 0 5% 0 0;
	}
     .zuperSlider > .arrow {
         height: 30px;
         top:76%!important;
    }
    /* right arrow image */
     .zuperSlider > .next {
         background: url("../img/other/right-arrow-small.png") no-repeat scroll 20px transparent;
         width:30px;
         height:30px;
         margin:20px 0 0 0;
    }
    /* left arrow image */
     .zuperSlider > .prev {
         background: url("../img/other/left-arrow-small.png") no-repeat scroll 20px transparent ;
         width:30px;
         height:30px;
         opacity: 0.5;
         margin:20px 0 0 0;
    }
     .zuperSlider > .arrow {
         height: 30px;
         top:76%!important;
    }
    .enter-container{
     left:5%;
     background: url(../img/other/logo_index_small.png) no-repeat 0 0;
     height:73px;
     width: 236px;
     }
     .enter-container:hover {
     background: url(../img/other/logo_index_small.png) no-repeat 0 -73px;
     } 
     .enter-container-right{
          right:0px;
          background: url(../img/other/login_index_small.png) no-repeat 0 0;
          height:73px;
          width:164px;
     }
     .enter-container-right:hover {
     background: url(../img/other/login_index_small.png) no-repeat 0 -73px;
     }    
     .captionH1 {
         left:5%;
         top:75px;
         font-size: 70px;
    }
     .captionH2 {
         left:5%;
         --top:75px;
         --fontH1: 70px;
         top: calc( var(--top) + var(--fontH1)*0.8 );
         font-size: calc( var(--fontH1) * 0.4);
    }
}
 @media only screen and (max-width:559px) {
  p.footer {
     line-height: 5px!important;
     font-size: 8pt!important;
}
 .footer-left {
     padding: 0 0 0 5%;
}
 .footer-right {
     padding: 0 5% 0 0;
}
   .social-fb, .social-tw, .social-in, .social-ig, .social-be, .social-yo {
         margin-top: 5px;
         width: 25px;
         height: 25px;
         margin-left:3px;
    }
     .social-fb {
         background: url(../img/other/socials-small.png) 0 0;
    }
     .social-fb:hover {
         background: url(../img/other/socials-small.png) 0 -25px;
    }
     .social-tw {
        /* For some reason it thinks it's 150, not 30 */
         background: url(../img/other/socials-small.png) 125px 0;
    }
     .social-tw:hover {
        /* For some reason it thinks it's 150, not 30 */
         background: url(../img/other/socials-small.png) 125px -25px;
    }
     .social-ig {
         background: url(../img/other/socials-small.png) 100px 0;
    }
     .social-ig:hover {
         background: url(../img/other/socials-small.png) 100px -25px;
    }
     .social-in {
         background: url(../img/other/socials-small.png) 75px 0;
    }
     .social-in:hover {
         background: url(../img/other/socials-small.png) 75px -25px;
    }
     .social-be {
         background: url(../img/other/socials-small.png) 50px 0;
    }
     .social-be:hover {
         background: url(../img/other/socials-small.png) 50px -25px;
    }
     .social-yo {
        /* For some reason it thinks it's 30, not 150 */
         background: url(../img/other/socials-small.png) 25px 0;
    }
     .social-yo:hover {
        /* For some reason it thinks it's 30, not 150 */
         background: url(../img/other/socials-small.png) 25px -25px;
    }
     .captionH1 {
         left:5%;
         top:75px;
         font-size: 50px;
    }
     .captionH2 {
         left:5%;
         --top:75px;
         --fontH1: 50px;
         top: calc( var(--top) + var(--fontH1)*0.8 );
         font-size: calc( var(--fontH1) * 0.4);
    }
}