/*
    ██████  ███████ ███████ ███████ ████████
    ██   ██ ██	  ██	  ██		 ██
    ██████  █████   ███████ █████	  ██
    ██   ██ ██		   ██ ██		 ██
    ██   ██ ███████ ███████ ███████	██
*/

@font-face {
    font-family: 'Circular Pro';
    src: url('../fonts/CircularPro-Book.eot');
    src: url('../fonts/CircularPro-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularPro-Book.woff2') format('woff2'),
        url('../fonts/CircularPro-Book.woff') format('woff'),
        url('../fonts/CircularPro-Book.ttf') format('truetype'),
        url('../fonts/CircularPro-Book.svg#CircularPro-Book') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Circular Pro';
    src: url('../fonts/CircularPro-Bold.eot');
    src: url('../fonts/CircularPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularPro-Bold.woff2') format('woff2'),
        url('../fonts/CircularPro-Bold.woff') format('woff'),
        url('../fonts/CircularPro-Bold.ttf') format('truetype'),
        url('../fonts/CircularPro-Bold.svg#CircularPro-Bold') format('svg');
    font-weight: 500;
    font-style: normal;
}

body{
    padding:0;
    margin:0;
    -webkit-text-size-adjust:none;
}

h1, h2, h3, h4, h5, h6, p, pre{
    padding:0;
    margin:0;
    line-height: inherit;
    white-space: normal;
    display: block;
    font-weight: inherit;
    font: inherit;
    vertical-align: baseline;
}

a, a:link, a:visited, a:hover, a:active{
    text-decoration: none;
    color: inherit;
}

p a,
p a:link,
p a:visited,
p a:hover,
p a:active{

}

p a:hover,
footer a:hover{
    text-decoration: underline;
}

a img{
    border: inherit;
}

input, textarea,
input:active, textarea:active,
input:focus, textarea:focus,
input:hover, textarea:hover,
select{
    border:none;
    outline:none;
    background: none;
    border-radius: 0;
    -webkit-border-radius:0;
    -mos-border-radius:0;
    -o-border-radius:0;
    -ms-border-radius:0;
    padding:10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*
     ██████  ███████ ███	██ ███████ ██████  ██  ██████
    ██	   ██	  ████   ██ ██	  ██   ██ ██ ██
    ██   ███ █████   ██ ██  ██ █████   ██████  ██ ██
    ██	██ ██	  ██  ██ ██ ██	  ██   ██ ██ ██
     ██████  ███████ ██   ████ ███████ ██   ██ ██  ██████
*/

table{
    border-collapse: collapse;
    width:100%;
    margin-top: 30px;
    word-wrap:break-word;
    border-color:#e30421;
    border:1px solid #e30421;
}

table p{
    padding: 0;
}

table p + p{
    padding: 10px 0 0 0;
}

table tr td,
table tr th{
    padding:7px 10px;
    box-sizing: border-box;
    vertical-align: middle;
}

table tr th{
    background: #e30421;
    color: #fff;
}

.table{
    display: table;
    width:100%;
    border-collapse: collapse;
}

.table-row{
    display: table-row;
}

.table-cell{
    display: table-cell;
    vertical-align: middle;
}

.clear{
    clear:both;
}

.clear-left{
    clear: left;
}

.clear-right{
    clear: right;
}

span.clear{
    display: block;
    clear:both;
    height: 1px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.hide{
    display: none;
}

.noSelect{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.right {
    float: right;
}
.left {
    float: left;
}

.txt-right{
    text-align: right;
}

.txt-left{
    text-align: left;
}

.txt-center{
    text-align: center;
}

span.txt-center,
span.txt-right{
    display: block;
}

img.centered{
    vertical-align: middle;
}

.zero-font{
    font-size: 0;
    line-height: 0;
}

.relative{
    position: relative;
}

.relative.layer{
    z-index: 1;
}

.borderBox{
    box-sizing: border-box;
}

.width100{
    width: 100%;
}

.width97{
    width: 97%;
}

.nine-tenths,
.width90{
    width: 90%;
}

.four-fifths,
.width80{
    width: 80%;
}

.three-quaters,
.width75{
    width: 75%;
}

.severn-tenths,
.width70{
    width:70%;
}

.two-thirds,
.width66-6{
    width: 66.666%;
}

.width63{
    width: 63%;
}

.three-fifths,
.width60{
    width: 60%;
}

.width55{
    width: 55%;
}

.width52{
    width: 52%;
}

.half,
.width50{
    width: 50%;
}

.width45{
    width: 45%;
}

.width43{
    width: 43%;
}

.two-fifths,
.width40{
    width: 40%;
}

.width35{
    width: 35%;
}

.one-third,
.width33-3{
    width: 33.333%;
}

.three-tenths,
.width30{
    width:30%;
}

.width28{
    width: 28%;
}

.one-quater,
.width25{
    width: 25%;
}

.width23{
    width: 23%;
}

.width21-5{
    width: 21.5%
}

.one-fifth,
.width20{
    width: 20%;
}

.one-sixth,
.width16-6{
    width: 16.666%;
}

.width15{
    width: 15%;
}

.one-eighth,
.width12-5{
    width: 12.5%;
}

.width10{
    width: 10%;
}

.paddLeft{
    padding-left: 50px;
}

.paddH5{
    padding-left: 5px;
    padding-right: 5px
}

.paddH10{
    padding-left: 10px;
    padding-right: 10px
}

.paddH20{
    padding-left: 20px;
    padding-right: 20px
}

.paddH35{
    padding-left: 35px;
    padding-right: 35px
}

.paddH40{
    padding-left: 40px;
    padding-right: 40px
}

.paddH50{
    padding-left: 50px;
    padding-right: 50px
}

.paddH60{
    padding-left: 60px;
    padding-right: 60px
}

.paddH80{
    padding-left: 80px;
    padding-right: 80px
}

.paddH100{
    padding-left: 100px;
    padding-right: 100px
}

.paddV10{
    padding-top: 10px;
    padding-bottom: 10px
}

.paddV20{
    padding-top: 20px;
    padding-bottom: 20px
}

.paddV30{
    padding-top: 30px;
    padding-bottom: 30px
}

.paddV40{
    padding-top: 40px;
    padding-bottom: 40px
}

.paddV50{
    padding-top: 50px;
    padding-bottom: 50px
}

.paddV60{
    padding-top: 60px;
    padding-bottom: 60px
}

.paddB40 {
    padding-bottom: 40px;
}

.padd20{
    padding: 20px
}

.padd40{
    padding: 40px;
}

.paddL0{
    padding-left: 0;
}

.paddR0{
    padding-right: 0;
}

.paddT0{
    padding-top: 0;
}

.paddB0{
    padding-bottom: 0;
}

.buffer{
    padding: 20px 0;
}

.txt-black{
	color: #404040!important;
}

.txt-lightgrey{
	color: rgb(230, 230, 230)!important;
}

.txt-grey{
	color: rgb(128, 128, 128)!important;
}

.txt-red{
	color: #e30421!important;
	text-decoration: inherit;
}

.txt-purple{
	color: rgb(87,12,115)!important;
}

.txt-blue{
	color: #314999!important;
}

.txt-yellow{
    color:#f49841!important
}

.txt-white{
	color: #fff
}

.bg-black{
	background: #404040;
}

.bg-palegrey{
	background: #F5F5F5;
}

.bg-lightgrey{
	background: #EBEBEB;
}

.bg-grey{
	background: #DDDDDD;
}

.bg-darkgrey{
	background: #787878;
}

.bg-blue{
	background: #314999;
}

.bg-red{
	background: #e30421;
}

.bg-purple{
	background: rgb(87,12,115);
}

.bg-white{
	background: rgb(255,255,255);
}

/*
    ███████ ██████  ███████  ██████ ██ ███████ ██  ██████ ███████
    ██	  ██   ██ ██	  ██	  ██ ██	  ██ ██	  ██
    ███████ ██████  █████   ██	  ██ █████   ██ ██	  ███████
         ██ ██	  ██	  ██	  ██ ██	  ██ ██		   ██
    ███████ ██	  ███████  ██████ ██ ██	  ██  ██████ ███████
*/

body{
    font-size: 100%;
    line-height: 1.4;
    font-weight: 400;
    visibility: visible!important;
    color: #404040;
    overflow-y: hidden;
    overflow-x: scroll;
}

body.no-overflow{
    overflow: hidden;
}

body main{
    font-size: 0;
    line-height: 0;
}

h1{
    font-size: 2.375em; /* 38px */
    font-size: 3.6vh;
}

h2{
    font-size: 2em; /* 32px */
    padding: 0 0 10px 0;
}

h3{
    font-size: 1.75em; /* 24px */
    padding: 0 0 10px 0;
}

h4{
    font-size: 1.5em; /* 24px */
    font-size: 2.3vh;
    padding: 0 0 10px 0;
}

h5{
    font-size: 1.25em; /* 20px */
}

h6{
    font-size: 1em; /* 16px */
    font-size: 1.9vh;
}

p{
    padding:10px 0 0 0
}

hr{
    height: 1px;
    width: 100%;
    padding: 0;
    margin: 6px 0 20px 0;
    background: #e30421;
    border: none;
}

hr.thicker{
    height: 2px;
    margin: 10px 0 20px 0;
}

sup{
    vertical-align: super;
    font-size: 0.75em; /* 12px */
}

sub{
    font-size: 0.75em; /* 12px */
    vertical-align: sub;
    line-height: 4px;
}

small,
.small{
    font-size: 0.625em; /* 10px */
}

p.small{
    padding-top: 5px;
}

ul,
ol{
    margin:5px 0 0 0;
    padding:0 0 0 55px;
}

ul li,
ol li{
    padding: 5px 0 0 0;
}

main p a,
main p a:link,
main p a:visited,
main p a:hover,
main p a:active{
    color: #e30421
}

strong,
.strong{
    font-weight: 500;
}

.weak{
    font-weight: 300;
}

.font-circularPro,
input,
select,
textarea{
    font-family: 'Circular Pro';
}

.sprite{
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url(../images/svg-fallback/sprites.png?v=0.01) 0 0 no-repeat;
    background: linear-gradient(transparent, transparent), url(../images/sprites.svg?v=0.01) 0 0 no-repeat;
	background-size: 288px 32px;
    vertical-align: middle;
}

.sprite.magnify{
	background-position: 0 0;
}

.sprite.arrow-left{
	background-position: -32px 0;
}

.sprite.arrow-right{
	background-position: -64px 0;
}

.sprite.quote-left{
	background-position: -96px 0;
}

.sprite.quote-right{
	background-position: -128px 0;
}

.sprite.quote-left-red{
	background-position: -160px 0;
}

.sprite.quote-right-red{
	background-position: -192px 0;
}

.sprite.cross{
	background-position: -224px 0;
}

.sprite.tick{
	background-position: -256px 0;
}

#preheader,
#header{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 125px;
    z-index: 5;
    padding: 17px 130px;
    box-sizing: border-box;
    background: #fff;
    opacity: 0.85;
}

#loader{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;;
    z-index: 5;
    box-sizing: border-box;
    background: #fff;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
}

#loader .inner{
    position: absolute;
    height: 170px;
    width: 100%;
    left: 0;
    top:50%;
    margin: -100px 0 0 0;
}

#header{
    background: none;
    opacity: 1;
    z-index: 6;
    font-size: 0.8125em; /* 13x */
    font-size: 1.7vh;
    line-height: 1.4;
}

#header > img, #header > a img{
    height: 76px;
    width: auto;
    padding: 0 35px 0 0;
}

#header .cross{
    position: absolute;
    top:50%;
    right:55px;
    margin: -16px 0 0 0;
}

#header .cross strong{
    display: none;
    position: absolute;
    top:-5px;
    right:-5px;
    padding: 5px 45px 5px 5px;
    height: 42px;
    line-height: 32px;
    font-size: 10px;
    font-size: 0.625em; /* 10px */
    text-align: right;
    width: 240px;
    outline:2px solid #e30421;
    box-sizing: border-box;
}

#header .cross:hover strong{
    display: block;
}

#exhibitionMain{
    position: relative;
    display: inline-block;
    z-index: 2;
    line-height: 1.4;
}

#exhibitionBG{
    position: relative;
    height: 100vh;
    width: auto;
    display: block;
    z-index: 1;
}

.text,
.exhibitionItem{
    font-size: 0.8125em; /* 13px */
    font-size: 1.7vh;
}

.exhibitionItem{
    position: absolute;
    z-index: 2;
}

.exhibitionItem .text{
    width: 100%;
    padding: 6px 0 0 0;
    position: absolute;
    top:100%;
}

.exhibitionItem img{
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.tv{
    width:264px;
    height:154px;
    width: 10.44216691%;
    height: auto;
}

.bannera{
    width:140px;
    height:359px;
    width: 6.416300634%;
    height: auto;
}

.bannerb{
    width:146px;
    height:374px;
    width: 6.562713518%;
    height: auto;
}

.bannerc{
    width:156px;
    height:400px;
    width: 3.806734992%;
    height: auto;
}

.bannerd{
    width: 24.176671547%;
    height: auto;
}

.bannera > img,
.bannerb > img,
.bannerc > img{
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.bannera .banner-header,
.bannerb .banner-header,
.bannerc .banner-header,
.bannerd .banner-header{
    position: absolute;
    z-index: 2;
    top:-1px;
    left: -0.8%;
    width: 101.6%;
    height: auto;
    box-shadow: none
}

.bannera .banner-footer,
.bannerb .banner-footer,
.bannerc .banner-footer,
.bannerd .banner-footer{
    position: absolute;
    z-index: 2;
    bottom:-14px;
    left: -0.8%;
    width: 101.6%;
    height: auto;
    box-shadow: none
}

.bannera .banner-footer.wide,
.bannerb .banner-footer.wide,
.bannerc .banner-footer.wide,
.bannerd .banner-footer.wide{
    z-index: 0
}

.bannera .banner-shadow,
.bannerb .banner-shadow,
.bannerc .banner-shadow,
.bannerd .banner-shadow{
    position: absolute;
    z-index: -1;
    bottom:-2px;
    width: 149%;
    height: auto;
    box-shadow: none
}

.bannera .banner-shadow.left,
.bannerb .banner-shadow.left,
.bannerc .banner-shadow.left,
.bannerd .banner-shadow.left{
    right: 0;
}

.bannera .banner-shadow.right,
.bannerb .banner-shadow.right,
.bannerc .banner-shadow.right,
.bannerd .banner-shadow.right{
    left: 0;
}

.bannera .banner-shadow.wide,
.bannerb .banner-shadow.wide,
.bannerc .banner-shadow.wide,
.bannerd .banner-shadow.wide{
    left: -4%;
    bottom:-15px;
    width: 108%;
}

#table1{
    width: 428px;
    height: 180px;
    width:17.444119082%;
    height: auto;
    left:121px;
    top:462px;
    left:2.952659834%;
    top:70%;
    z-index: 3;
}

#table2{
    width:226px;
    height: 196px;
    width:8.514885309%;
    height: auto;
    left:3465px;
    top:454px;
    left:81.7%;
    top:68.787878787%;
}

#table3{
    width:226px;
    height: 196px;
    width:8.514885309%;
    height: auto;
    left:3465px;
    top:454px;
    left:55.7%;
    top:68.787878787%;
}

#table3 #button5 strong{
    line-height: 1.6;
}

#table4{
    width: 226px;
    height: 196px;
    width: 8.514885309%;
    height: auto;
    left: 3465px;
    top: 454px;
    left: 68.7%;
    top: 68.787879%;
}

.table-document,
img.table-document{
    position: absolute;
    z-index: 3;
}

#tabledoc1{
    width: 65px;
    height: auto;
    width: 21.58317757%;
    top:-31.8%;
    left:26.388084112%
}

#tabledoc2{
    width: 92px;
    height: auto;
    width: 21.58317757%;
    top:-31.8%;
    left:50.196261682%
}

#tabledoc3 {
    width: 110px;
    height: auto;
    width: 75.632756%;
    top: -36.619505%;
    left: 11.446382386%;
}

#tabledoc4 {
    width: 110px;
    height: auto;
    width: 43.632756%;
    top: -10.619505%;
    left: 11.446382386%;
    transform: rotate3d(-8, 0, -1, 75deg);
}

#tabledoc4-2 {
    width: 110px;
    height: auto;
    width: 43.632756%;
    top: -9.619505%;
    left: 26.446382%;
    transform: rotate3d(-8, 0, -1, 75deg);
}

#tabledoc4-3 {
    width: 110px;
    height: auto;
    width: 43.632756%;
    top: -7.619505%;
    left: 38.446382%;
    transform: rotate3d(-8, 0, -1, 75deg);
}

#tabledoc5 {
    width: 110px;
    height: auto;
    width: 43.632756%;
    top: -7.619505%;
    left: 37.446382%;
    transform: rotate3d(-8, 0, -1, 75deg);
}

#tabledoc5-2 {
    width: 110px;
    height: auto;
    width: 43.632756%;
    top: -9.619505%;
    left: 26.446382%;
    transform: rotate3d(-8, 0, -1, 75deg);
}

#tabledoc5-3 {
    width: 110px;
    height: auto;
    width: 43.632756%;
    top: -7.619505%;
    left: 38.446382%;
    transform: rotate3d(-8, 0, -1, 75deg);
}

#tabledoc6 {
    width: 82px;
    height: 42px;
    width: 36.253509295%;
    height: auto;
    left: 14px;
    top: 39px;
    left: 45.189624%;
    top: 19.811639107%;
}

.light1{
    width: 62px;
    height: 192px;
    width: 2.512933138%;
    height: auto;
    z-index: 3;
}

.light2{
    width: 72px;
    height: 223px;
    width: 2.756954612%;
    height: auto;
    z-index: 3;
}

.light1 .light-ray,
.light2 .light-ray{
    width: 600%;
    position: absolute;
    top: 100%;
    left: 50%;
    height: auto;
    margin: -20px 0 0 -300%;
    pointer-events: none;
}

#light1{
    left:372px;
    top:-42px;
    left:1.577598828%;
    top:-0.363636363%;
}

#light2{
    left:1036px;
    top:-87px;
    left:37.280624695%;
    top:-0.4%;
}

#light3{
    left:1670px;
    top:-42px;
    left:84.751586139%;
    top:-0.363636363%;
}

.zoom{
    width: 42px;
    height: 42px;
    border-radius:42px;
    border:2px solid #fff;
    background: #e30421;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 3;
    top:50%;
    left:50%;
    margin: -21px 0 0 -21px;
    animation: pulse 1s infinite forwards;
}

.zoom .sprite{
    position: absolute;
    top:50%;
    left: 50%;
    margin: -16px 0 0 -16px;
}

@keyframes pulse {
    0%{
        width: 42px;
        height: 42px;
        margin: -21px 0 0 -21px;
    }

    50%{
        width:48px;
        height: 48px;
        margin: -24px 0 0 -24px;
    }

    100%{
        width: 42px;
        height: 42px;
        margin: -21px 0 0 -21px;
    }
}

.play{
    width: 56px;
    height: 56px;
    border-radius:56px;
    border:2px solid #fff;
    background: #e30421;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 3;
    top:50%;
    left:50%;
    margin: -30px 0 0 -30px;
    animation: pulse2 1s infinite forwards;
}

@keyframes pulse2 {
    0%{
        width: 56px;
        height: 56px;
        margin: -30px 0 0 -30px;
    }

    50%{
        width: 62px;
        height: 62px;
        margin: -33px 0 0 -33px;
    }

    100%{
        width: 56px;
        height: 56px;
        margin: -30px 0 0 -30px;
    }
}

.play .triangle{
    position: absolute;
    top:50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left:24px solid #fff;
    border-top:13px solid #e30421;
    border-bottom:13px solid #e30421;
    margin: -13px 0 0 -8px;
}

.button{
    position: absolute;
    z-index: 3;
}

.button img{
    width: 100%;
    display: block;
    height: auto;
    min-height:45px;
    position: relative;
    left: 0;
    top:0;
}

.button strong{
    display: block;
    position: absolute;
    top:0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 14px 2px 0 2px;
    padding: 20% 2px 0 2px;
    box-sizing: border-box;
    font-size: 0.8125em; /* 13px */
    font-size: 1.1vh
}

#button1{
    width: 82px;
    height: 42px;
    width: 19.158878504%;
    height: auto;
    left: 38px;
    top: 67px;
    left: 26.878504672%;
    top: 37.38317757%;
}

#button2{
    width: 82px;
    height: 42px;
    width: 19.158878504%;
    height: auto;
    left: 128px;
    top: 67px;
    left: 29.88224299%;
    top: 37.38317757%;
}

#button3{
    width: 82px;
    height: 42px;
    width: 19.158878504%;
    height: auto;
    left: 218px;
    top: 67px;
    left: 50.93271028%;
    top: 37.38317757%;
}

#button4{
    width: 82px;
    height: 42px;
    width: 19.158878504%;
    height: auto;
    left: 308px;
    top: 67px;
    left: 71.983411215%;
    top: 37.38317757%;
}

#button5{
    width: 82px;
    height: 42px;
    width:36.253509295%;
    height: auto;
    left: 14px;
    top: 39px;
    left: 6.189623538%;
    top: 19.811639107%;
}

#button6{
    width: 82px;
    height: 42px;
    width: 36.253509295%;
    height: auto;
    left: 14px;
    top: 39px;
    left: 48.189624%;
    top: 19.811639107%;
}

#button5 strong{
    line-height: 2.6;
}

.button:hover strong{
    padding-top: 22%;
}

.button:hover img{
    width:110%;
    left: -5%;
}

.arrow{
    width: 76px;
    height: 84px;
    width: auto;
    height: 10%;
    top:45%;
    z-index: 4;
    position: fixed;
    display: none;
    border-radius: 10px;
}

.arrow img{
    width: auto;
    display: block;
    height: 100%;
}

.arrow.left{
    left: 10px;
}

.arrow.right{
    right: 10px;
}

.arrow:hover{
    background: rgba(227,4,33,0.7);
    background: rgba(0,0,0,0.45);
    transition:0.3s;
}

#welcome{
    top:179px;
    left:100px;
    top:27.121212121%;
    left:2.440214738%;
    width: 8.44216691%;
}

#welcome h1{
    font-size: 3.375em; /* 38px */
    font-size: 7vh;
}

#tv2{
    top:179px;
    left:3370px;
    top:27.121212121%;
    left:3.2352367%;
}

#tv1 {
    top: 27.2%;
    left: 3.3%;
}

#banner1{
    left:17.248901903%;
    top:22.727272727%;
}

#banner3{
    left:26.882967301%;
    top:18.484848484%;
}

#banner3 img.banner {
    border-radius: 75px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#banner4{
    left: 1423px;
    top: 150px;
    left: 53.7%;
    top:21.727272727%;
}

#banner5{
    left: 1591px;
    top: 140px;
    left: 62.523816%;
    top:19.727272727%;
}

.westView {
    padding-left: 50px;
}

#banner6{
    left: 1823px;
    top: 150px;
    left: 90.7%;
    top:25.727272727%;
}

#banner6b{
    left: 1823px;
    top: 150px;
    left: 45.7%;
    top:25.727272727%;
}

.planningIntro {
    font-size: 60px!important;
    line-height: 60px!important;
}

#banner7{
    left: 2097px;
    top: 160px;
    left:74.171303074%;
    top:24.242424242%;
}

#banner8{
    left: 2296px;
    top: 160px;
    left:56.027330405%;
    top:24.242424242%;
}

#banner9{
    left: 2503px;
    top: 150px;
    left:61.078574914%;
    top:22.727272727%;
}

#banner10{
    left: 2777px;
    top: 140px;
    left:67.764763299%;
    top:21.212121212%;
}

#banner11{
    left: 2972px;
    top: 150px;
    left:72.52318204%;
    top:22.727272727%;
}

#banner12{
    left: 3153px;
    top: 150px;
    left:76.939970717%;
    top:22.727272727%;
}

#banner13{
    left: 3705px;
    top: 140px;
    left:90.409956076%;
    top:21.212121212%;
}

#banner14{
    left: 3877px;
    top: 150px;
    left:94.607125427%;
    top:22.727272727%;
}

.popup{
    position: fixed;
    z-index: 11;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: rgba(255,255,255,0.75);
    display: none;
}

.popup .main{
    position: absolute;
    width: 84%;
    height: 80%;
    top: 10%;
    left: 8%;
    background: #fff;
    border: 1px solid rgb(200,200,200);
    box-sizing: border-box;
    overflow: hidden;
}

.popup .main .content{
    width: 100%;
    height: 93.25%;
    overflow-y: scroll;
    overflow: hidden;
    padding: 60px 60px 30px 60px;
    padding: 3.6% 1.8% 0 3.6%;
    box-sizing: border-box;
}

.popup .main .content a{
    color:#304999
}

.popup.video .main .content{
    height: 100%;
    padding: 45px;
}

.popup .main .content .cross{
    position: absolute;
    top: 8px;
    right: 22px;
    right: 1.6%;
    top: 1.3%;
    width: 1.9%;
    height: auto;
    min-width: 10px;
    z-index: 2
}

.popup .main .content .previous,
.popup .main .content .next{
    position: absolute;
    top: 8px;
    right: 62px;
    right: 4.6%;
    top: 1.3%;
    width: 1.9%;
    height: auto;
    min-width: 10px;
    z-index: 2
}

.popup .main .content .previous{
    right:102px;
    right: 7.6%;
}

.popup .main .content iframe{
    width: 100%;
    height: 100%;
}

.popup.video .main .content iframe{
    background: #fff;
    box-sizing: border-box;
    border-top: 5px solid #fff;
}

.popup .main .content .cross img,
.popup .main .content .previous img,
.popup .main .content .next img{
    width: 100%;
    display: block;
    height: auto;
}

.popup .main .content .scrollbox{
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 1em; /* 16px */
    font-size: 1.9vh;
    line-height: 1.4;
    padding: 0 15px 20px 0;
    word-wrap: break-word;
    position: relative;
}

.popup .main .content .scrollbox.noscroll{
    overflow-y: auto;
}

.popup .main .content .scrollbox iframe{
    position: absolute;
    top:0;
    left: 0;
    box-sizing: border-box;
    border:none;
}

.popup .main .content img.left{
    display: block;
    float:left;
    height: auto;
}

.popup .main .content img.right{
    display: block;
    float:right;
    height: auto;
}

.popup .main .content img.right.small{
    width: 15%;
}

.popup .main .content img.wrap-r{
    padding-right: 15px;
}
.popup .main .content img.wrap-r.double{
    padding-right: 30px;
}

.popup .main .content img.wrap-l{
    padding-left: 15px;
}
.popup .main .content img.wrap-l.double{
    padding-left: 30px;
}

.popup .main .content img.wrap-b{
    padding-bottom: 15px;
}

.popup .main .content img.wrap-b.higher{
    padding-bottom: 30px;
}

.gap-left{
    padding-left: 10px;
    box-sizing: border-box;
}

.gap-right{
    padding-right: 10px;
    box-sizing: border-box;
}

.popup .main .content img.width33-3{
    width:31%;
    padding-bottom: 8px;
}

.popup .main .content .gap{
    width:3.5%;
    height: 10px;
    font-size: 0;
    line-height: 0
}

.popup .main .content .gap.small{
    width: 2.5%
}

.popup .main .content .gap.smaller{
    width: 2%
}

.popup .main .content .border-right{
    padding-right: 20px;
    box-sizing: border-box;
    border-right: 1px solid rgb(200,200,200)
}

.popup .main .details{
    height: 38px;
    width: 100%;
    height: 6.75%;
    background: rgb(200,200,200);
    padding: 13px;
    padding: 0 1.2%;
    box-sizing: border-box;
    line-height: 3;
    position: relative;
}

.popup .main .details strong{
    display: block;
}

.popup .main .details img{
    height: 50%;
    width: auto;
    position: absolute;
    top:25%;
    right:25px;
}

.popup .main .details .fullscreen img,
.popup .main .details .windowed img{
    right: 85px;
}

.popup .main .details .windowed img{
    display: none;
}

.popup.full{
    z-index: 12;
}

.popup.full .main {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border: 0px solid rgb(200,200,200);
}

.popup.full .main .content{
    padding: 0;
    height: 94.5%;
}

.popup.full .main .content .scrollbox{
    padding: 20px;
}

.popup.full .main .details{
    height: 5.5%;
}

.popup.full .main .content .cross {
    right: 28px;
    top: 10px;
    background: #fff;
    border-radius: 36px;
    padding: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.popup.full .main .content .previous,
.popup.full .main .content .next{
    display: none;
}

.popup.full .main .details .fullscreen img{
    display: none;
}

.popup.full .main .details .windowed img{
    display: block;
}

#iframeBox{
    position: fixed;
    z-index: 10;
    bottom:0;
    right:20px;
    height: 0px;
    background: #fff;
}

#iframeBox iframe{
    border:1px solid #e30421;
    border-bottom: none;
    width: 200px;
    height: 396px;
    height: 0;
    box-sizing: border-box;
}

#iframeBox.open{
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3)
}

#iframeBox.open,
#iframeBox.open iframe{
    height: 396px;
    width: 300px
}

#iframeBox > a{
    border:2px solid #fff;
    border-bottom: none;
    background: #e30421;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    color: #fff;
    height: auto;
    position: absolute;
    line-height: 20px;
    font-size: 0.75em; /* 16px */
    font-size: 1.45vh;
    padding: 10px 20px;
    box-sizing: border-box;
    bottom:100%;
    right: 0;
    border-radius: 8px 8px 0 0
}

#iframeBox > a.show img{
    position: absolute;
    bottom:0;
    right:100%;
    border:none;
    margin: 0 10px 0 0;
    height: 130%;
    width: auto;
}

#iframeBox > a.close{
    display: none;
    border:none;
    box-shadow: 0px -5px 8px -2px rgba(0,0,0,0.5)
}

#iframeBox.open > a{
    display: none;
}

#iframeBox.open > a.close{
    display: block;
}

@media screen and (min-width: 2386px){
    .elementsContainer {
        padding-top: 100px;
    }
}

@media screen and (max-width: 2000px) and (min-width: 1530px){
    .elementsContainer img {
        padding: 30px!important;
    }
}

@media screen and (max-width: 1530px) and (min-width: 1060px){
    .elementsContainer img {
        padding: 20px!important;
    }
}

@media screen and (max-width: 1385px){
    .planningIntro {
        font-size: 45px!important;
        line-height: 45px!important;
    }
}

@media screen and (max-width: 1280px){
    .westView{
        padding-left: 20px;
    }
}

@media screen and (max-width: 1060px){
    .elementsContainer img {
        padding: 10px!important;
    }
}

@media screen and (max-width: 1050px){
    .planningIntro {
        font-size: 30px!important;
        line-height: 30px!important;
    }
}

@media screen and (min-height:1000px){
    #preheader{
        height: 135px;
    }

    #header {
        font-size: 1.3vh;
    }
    .eastView{
        width: 50%;
    }
    .westView {
        width: 100%;
        padding-left: 0px;
    }
}

@media screen and (min-height:1300px){
    #preheader{
        height: 150px;
    }

    .zoom {
        width: 70px;
        height: 70px;
        border-radius: 70px;
        margin: -35px 0 0 -35px;
        animation: none
    }
}

@media screen and (min-height:1400px){
    #header {
        font-size: 1.1vh;
    }

    h1 {
        font-size: 3vh;
    }
}

@media screen and (max-width: 1200px){
    .imageContainer,
    .imageContainer img {
        width: 100%!important;
    }

}

@media screen and (max-width:850px){
    #preheader, #header {
        padding: 17px 100px 17px 20px;
    }

    #header .cross strong{
        display: none!important
    }
}

@media screen and (max-width: 750px){
    .planningIntro {
        font-size: 23px!important;
        line-height: 23px!important;
    }
}

@media screen and (max-width:700px){
    #header{
        font-size: 10px;
        font-size: 1.1vh;
    }

    .popup .main .content .cross,
    .popup .main .content .previous,
    .popup .main .content .next{
        right: 10px;
        top: 7px;
        background: #fff;
        border-radius: 36px;
        padding: 12px;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .popup .main .content .previous{
        right: 110px;
    }

    .popup .main .content .next{
        right: 60px;
    }
}

@media screen and (max-width:600px){
    #header{
        font-size: 10px;
        font-size: 1.1vh;
        padding: 17px 60px 17px 20px;
    }

    #header .cross {
        right: 30px;
    }

    .popup .main .content .scrollbox img {
        width: 90%!important;
        padding: 0 0 10px 0!important;
        margin: 0 auto!important;
        float:none;
        display: block
    }

    .popup .main .content .scrollbox .border-right,
    .popup .main .content .scrollbox .border-left{
        width: 100%;
        padding: 0!important;
        margin: 0 !important;
        float:none;
        display: block
    }

    .popup .main .content .scrollbox .border-right{
        border-bottom: 1px solid rgb(200,200,200);
        padding: 0 0 15px 0!important;
        margin: 0 0 15px 0!important;
    }

    .planningIntro {
        font-size: 45px!important;
        line-height: 45px!important;
        padding: 30px 0;
    }
}

@media screen and (max-width:550px){
    #header > img, #header > a img {
        height: 40px;
        width: auto;
        padding: 18px 20px 0 0;
    }
}
@media screen and (max-height:400px){
    #header > img, #header > a img {
        height: 40px;
    }

    #preheader, #header{
        height: 90px
    }
}

@media screen and (max-width:500px){
    #preheader, #header{
        height: 90px
    }

    #header {
        font-size: 8px;
        font-size: 0.89vh;
    }

    h1 {
        font-size: 23px;
        font-size: 2.6vh;
    }

    #header > img, #header > a img {
        padding: 8px 20px 0 0;
    }

    .popup .main .details {
        font-size: 1.7vh;
    }

    #iframeBox > a{
        line-height: 12px;
    }
}

@media screen and (max-width:420px){
    #header{
        padding: 15px
    }

    #header > img, #header > a img {
        padding: 15px 15px 0 0;
        height: 30px;
    }

    .popup .main .details img{
        right:15px;
    }

    .popup .main .details .fullscreen img, .popup .main .details .windowed img {
        right: 60px;
    }


}

@media screen and (max-width:360px){

}