@font-face {
  font-family: 'PF DinDisplay Pro';
  src: url('fonts/PFDinDisplayPro-Regular.eot');
  src: local('PFDinDisplayPro-Regular'),
    url('fonts/PFDinDisplayPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/PFDinDisplayPro-Regular.woff') format('woff'),
    url('fonts/PFDinDisplayPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'PF DinDisplay Pro';
  src: url('fonts/PFDinDisplayPro-Bold.eot');
  src: local('PFDinDisplayPro-Bold'),
    url('fonts/PFDinDisplayPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/PFDinDisplayPro-Bold.woff') format('woff'),
    url('fonts/PFDinDisplayPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
* { margin: 0px; padding: 0px; border: 0;}
*,*::before, *::after {box-sizing: border-box;}
table {border-collapse: collapse; border-spacing: 0;}
html,body {height: 100%;}
a > img {border: none;}
input, button, textarea, select {outline: none;}
body {width: 100%; color: #363636; background-color: #F4F5F5; font-family: 'PF DinDisplay Pro'; font-weight: normal; font-size: 18px; overflow-x: hidden; min-width: 320px; position: relative; z-index: 5; -webkit-overflow-scrolling: touch;}
.bg-FFF {background-color: #FFF;}
.wrap {min-height: 100%; position: relative; z-index: 5;
-webkit-transform: translate(0,0); transform: translate(0,0); visibility: visible; transition: all 0.8s cubic-bezier(.23,.62,.42,.99);
}
#main {padding-bottom: 72px; position: relative: z-index: 2;}
footer {min-height: 72px; margin-top: -72px; position: relative; background-color: #1D1D1B; z-index: 6;}
.centered {width: 100%; padding: 0 56px;}
.centered2 {width: 1424px; margin: 0 auto;}
.inline {width: 100%; position: relative; display: inline-block;}
.align_center {position: relative; width: 100%;}
.align_center:after {content: ''; display: block; clear: both;}
.align_center_to_left {position: relative; right: 50%; float: right;}
.align_center_to_right {position: relative; z-index: 1; right: -50%;}
.tbl {display: table; width: 100%;}
.tbl > div {display: table-cell;}
.clearfix:after {content: ''; display: table; clear: both;}
.flex {display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} 
.flex > div {display: -webkit-flex; display: -ms-flexbox; display: flex;}
.no_select {-moz-user-select: none; -khtml-user-select: none; user-select: none;}
.bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-size: cover; background-position: 50% 50%;}
.bg > img, .bg > video, .bg > iframe {position: absolute; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; font-family: 'object-fit: cover;';}
.ratio-inner {position: relative; height: 0; border: none;} 
.ratio-content {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.ratio-1-1 {padding-top: 100%;}
.ratio-2-3 {padding-top: 64%;}
.ratio-3-2 {padding-top: 140%;}
.flex2, .flex3 {display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%;}
.flex2 > div, .flex3 > div {display: -webkit-flex; display: -ms-flexbox; display: flex;}
.flex2 > div:first-child, .flex3 > div:last-child {height: auto; align-self: stretch;}
.flex2 > div:last-child {align-self: stretch; flex-grow: 1; overflow: hidden; position: relative; align-items: flex-end; -webkit-box-align: end; -ms-flex-align: end;}
.flex3 > div:first-child {align-self: stretch; flex-grow: 1; overflow: hidden; position: relative; align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start;}
img.imgborder {max-height: 100%; max-width: 100%; height: auto; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.stickySide {position: sticky; top: 20px; min-height: 32px; margin: 0 0 0px;} 
.marginTop-88 {margin-top: 88px;}
.marginTop-100 {margin-top: 100px;}
.marginTop-24 {margin-top: 24px;}
.marginTop-16 {margin-top: 16px;}
.marginTop-8 {margin-top: 8px;}
.marginTop-32 {margin-top: 32px;}
.marginTop-40 {margin-top: 40px;}
.marginTop-48 {margin-top: 48px;}
.marginTop-56 {margin-top: 56px;}
.marginTop-64 {margin-top: 64px;}
.marginTop-160 {margin-top: 160px;}
#top {background-color: #fff; position: relative; z-index: 5;}
#topBody, #panelTop > .flex {height: 104px;}
#topBody > div, #panelTop > .flex > div {position: relative; align-items: center;}
#topBody > div > div, #panelTop > .flex > div > div {width: 100%; position: relative;}
#topBody > div:nth-child(2), #panelTop > .flex > div:nth-child(2) {width: 330px;}
#topBody > div:nth-child(2) img, #panelTop > .flex > div:nth-child(2) img {width: 100%; height: auto;}
#topBody > div:first-child, #topBody > div:last-child, #panelTop > .flex > div:first-child, #panelTop > .flex > div:last-child {width: calc((100% - 330px) / 2);}
#topBodyLeft > div:first-child, #panelTopLeft > div:first-child {padding-right: 40px;}
#topBodyLeft > div:last-child a, #panelTopLeft > div:last-child a {display: block; width: 20px; height: 20px; float: left; margin-right: 8px; position: relative;}
#topBodyLeft > div:last-child a svg, #panelTopLeft > div:last-child a svg {width: 100%; height: 100%;}
#topBodyLeft > div:last-child a svg path {fill: #363636; transition: all 0.2s linear;}
#topBodyLeft > div:last-child a:hover svg path {fill: #053B7A; transition: all 0.2s linear;}
#panelTopLeft > div:last-child a svg path {fill: #fff; transition: all 0.2s linear;}
#panelTopLeft > div:last-child a:hover svg path {fill: #DDD; transition: all 0.2s linear;}
#panelTopLeft > div:first-child p {color: #fff;}
#closePanel {display: block; border: 1px solid #fff; border-radius: 6px; padding: 14px; float: right; cursor: pointer; transition: all 0.2s linear;}
#closePanel svg {display: block; width: 13px; height: 13px;}
#closePanel svg rect {fill: #fff; transition: all 0.2s linear;}
#closePanel:hover {background-color: #fff; transition: all 0.2s linear;}
#closePanel:hover svg rect {fill: #053B7A; transition: all 0.2s linear;}
#topBodyRight > div:last-child {width: 20px;}
#topBodyRight > div:last-child svg {display: block; width: 20px; height: 20px; cursor: pointer;}
#topBodyRight > div:last-child svg line {stroke: #363636; transition: all 0.2s linear;}
#topBodyRight > div:last-child svg:hover line {stroke: #053B7A; transition: all 0.2s linear;}
#topBodyRight > div:first-child {width: calc(100% - 20px); padding-right: 40px; justify-content: flex-end;}
#topBodyRightMenu {list-style: none;}
#topBodyRightMenu > li {float: left; margin-left: 32px;}
#topBodyRightMenu > li > a, #topBodyRight > div:first-child ul li a:visited {text-decoration: none; color: #363636; transition: all 0.2s linear;}
.dropdown {position: relative; cursor: pointer;}
.dropdown:hover > a {color: #053B7A !important; transition: all 0.2s linear;}
.dropdown > ul {list-style: none; position: absolute; left: -16px; display: none; padding-top: 12px; background-color: #fff;}
.dropdown:hover > ul {display: block !important;}
.dropdown > ul li {display: block; margin-top: 0px;}
.dropdown > ul li a, .dropdown > ul li a:visited {text-decoration: none; color: #363636; transition: all 0.2s linear; line-height: 28px; display: block; padding: 4px 16px; display: block;}
#topBodyRightMenu a:hover {color: #053B7A !important; transition: all 0.2s linear;}
.dropdown > ul li a:hover {background-color: #F4F5F5;}
#block1 {width: 100%; position: relative;}
#block1 > a {width: 25%; position: relative; float: left; height: auto; text-decoration: none; display: block; color: #fff;}
#block1 > a .bg {z-index: 1;}
#block1 > a:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: #000000; z-index: 2; opacity: 0.5;  transition: all 0.2s linear;}
#block1 > a:hover:before {opacity: 0.64;  transition: all 0.2s linear;}
#block1 > a .flex {position: relative; z-index: 3; width: 100%; height: 100%;}
#block1 > a .flex > div {align-items: flex-end; width: 100%; padding: 56px;}
#block1 > a .flex p {font-size: 46px; font-family: 'Merriweather', serif; font-weight: normal; text-transform: uppercase;}
.txt h2 {font-size: 36px; line-height: 1.2; font-weight: bold; font-family: 'Merriweather', serif; text-transform: uppercase; color: #1D1D1B;}
.blocks {padding-top: 150px; position: relative;}
.blocks:last-child {padding-bottom: 150px;}
#blogTop .txt h2 {position: relative;}
#blogTop .txt h2:after {content: ''; display: block; width: 150px; height: 1px; background-color: #363636; margin-top: 14px;}
#blogTop > div:first-child {flex: 1 1 0; padding-right: 32px;}
#blogTop > div:nth-child(2) > div {width: 100%;}
#blogTop > div:nth-child(2) .flex {height: 44px;}
#blogTop > div:nth-child(2) .flex > div, .moreLink {align-items: center;}
.moreLink {text-decoration: none; color: #363636;}
.moreLink > div:first-child {padding-right: 20px;}
.moreLink > div:last-child svg {width: 141px; height: 9px; display: block;}
.moreLink > div:last-child svg path {fill: #363636; transition: all 0.2s linear;}
.moreLink > div:last-child .txt p {color: #363636; text-decoration: none; transition: all 0.2s linear;}
.moreLink:hover, .blogBodyEl:hover .moreLink {color: #053B7A; transition: all 0.2s linear;}
.moreLink:hover > div:last-child svg path, .blogBodyEl:hover .moreLink > div:last-child svg path {fill: #053B7A; transition: all 0.2s linear;}
.ratio-blog {padding-top: 88%;}
#blogBody > div {width: calc((100% - 60px) / 3); margin-left: 30px; margin-top: 56px; position: relative;}
#blogBody > div:nth-child(-n+3) {margin-top: 0px;}
#blogBody > div:nth-child(3n+1) {margin-left: 0px;}
.blogBodyEl {display: block; width: 100%; height: 100%; color: #1D1D1B; text-decoration: none; position: relative;}
#blog #blogBody {margin-top: 80px;}
.txt h3 {font-size: 24px; line-height: 1.2; font-weight: bold; font-family: 'Merriweather', serif; color: #1D1D1B;}
.blogBodyEl .txt h3 {text-align: center; color: #1D1D1B; transition: all 0.2s linear;}
.blogBodyEl:hover .txt h3 {color: #053B7A; transition: all 0.2s linear;}
.blogBodyEl .ratio {overflow: hidden; background-color: #363636;}
.blogBodyEl .ratio .bg {transition: all 0.2s linear;}
.blogBodyEl:hover .ratio .bg {transform: scale(1.1, 1.1); transition: all 0.2s linear; opacity: 0.8;}
.blogBodyElInfo {margin-top: 30px;}
.txt p {line-height: 1.5; margin-top: 20px;}
.txt p:first-child {margin-top: 0px;}
footer .flex {height: 100%; height: 72px;}
footer .flex > div {width: 100%; align-items: center; justify-content: center;}
footer .txt p {color: #fff; font-size: 16px;}
footer .txt a, footer .txt a:visited {color: #fff; text-decoration: none; border-bottom: 1px solid #fff; transition: all 0.2s linear;}
footer .txt a:hover {color: #13a89e; border-color: #13a89e; transition: all 0.2s linear;}
.blogBodyEl > .flex2 {width: 100%; height: 100%;}
.blogBodyEl > .flex2 > div:last-child {align-items: flex-end; padding-top: 20px;}
.blogBodyEl > .flex2 > div > div {width: 100%;}
.blogBodyEl > .flex2 > div:first-child .txt {margin-top: 30px;}
.blogBodyEl > .flex2 > div:last-child .moreLink {margin-top: 40px;}
.blogBodyElBottom {height: 100%;}
.blogBodyElBottom > div:first-child {align-items: flex-end;}
#innerBlock1 {width: 100%; height: 700px; position: relative; z-index: 2;}
#innerBlock1 .bg {z-index: 1;}
#innerBlock1:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: #000000; z-index: 2; opacity: 0.5;}
#innerBlock1 .tbl {height: 700px; z-index: 3; width: 100%; position: relative;}
#innerBlock1 .tbl > div {vertical-align: bottom; width: 100%; padding: 90px 0;}
h1 {font-size: 90px; line-height: 1.2; font-weight: normal; font-family: 'Merriweather', serif; color: #fff; text-transform: uppercase;}
#innerContent {margin-top: 150px; margin-bottom: 150px; position: relative; z-index: 2;}
.innerContentText .centered2 .txt {padding: 120px 240px; background-color: #fff;}
#innerContentBooks .flex > div {width: calc((100% - 90px) / 4); margin-left: 30px; margin-top: 56px; position: relative;}
#innerContentBooks .flex > div:nth-child(-n+4) {margin-top: 30px;}
#innerContentBooks .flex > div:nth-child(4n+1) {margin-left: 0px;}
.innerContentBooksEl {display: block; width: 100%; height: 100%; position: relative; text-decoration: none; color: #363636;}
.innerContentBooksEl .flex2 > div > div {width: 100%;}
.innerContentBooksEl .flex2 > div:first-child .txt {margin-top: 30px;}
.innerContentBooksEl .flex2 > div:first-child .txt h3 {text-align: center; color: #363636; transition: all 0.2s linear;}
.innerContentBooksEl:not(.innerContentBooksEl--nohover):hover .flex2 > div:first-child .txt h3 {color: #053B7A; transition: all 0.2s linear;}
.innerContentBooksEl .flex2 > div:last-child {padding-top: 30px;}
.innerContentBooksEl .flex2 > div:last-child .txt {text-align: center;}
.innerContentBooksEl .ratio {overflow: hidden;}
.innerContentBooksEl .ratio .bg {transition: all 0.2s linear;}
.innerContentBooksEl:not(.innerContentBooksEl--nohover):hover .ratio .bg {transform: scale(1.1, 1.1); transition: all 0.2s linear; opacity: 0.8;}
.button {padding: 0 56px; background-color: transparent; text-decoration: none; display: inline-block; float: left; height: 60px; line-height: 60px; border: 1px solid #053B7A; color: #053B7A; transition: all 0.2s linear; font-family: 'PF DinDisplay Pro'; font-weight: bold; font-size: 18px; cursor: pointer;}
.button:hover {background-color: #053B7A; color: #fff; transition: all 0.2s linear;}
.button--black {color: #363636; border-color: #363636; font-weight: normal;}
.button--black:hover {background-color: #363636; border-color: #363636; color: #fff; transition: all 0.2s linear;}
#innerContentBooks0 .button, #bottomBtn, #formBottom {margin-top: 110px;}
#innerContentMovies .flex > div {width: calc((100% - 60px) / 3); margin-left: 30px; margin-top: 56px; position: relative;}
#innerContentMovies .flex > div:nth-child(-n+3) {margin-top: 30px;}
#innerContentMovies .flex > div:nth-child(3n+1) {margin-left: 0px;}
.innerContentMoviesEl {display: block; width: 100%; height: 100%; color: #1D1D1B; text-decoration: none; position: relative;}
.innerContentMoviesEl .ratio {overflow: hidden; background-color: #363636;}
.innerContentMoviesEl .ratio .bg {transition: all 0.2s linear;}
.innerContentMoviesEl:hover .ratio .bg {transform: scale(1.1, 1.1); transition: all 0.2s linear; opacity: 0.8;}
.innerContentMoviesEl .button {margin-top: 30px;}
.innerContentMoviesEl:hover .button {background-color: #053B7A; color: #fff; transition: all 0.2s linear;}
#innerContentSongs {width: 100%; margin-top: 30px;}
#innerContentSongsBody > div {width: 50%; margin-top: 16px; position: relative; padding-right: 80px; align-items: center;}
#innerContentSongsBody > div:nth-child(-n+2) {margin-top: 30px;}
#innerContentSongsBody > div > div, .innerContentSongsBodyEl {width: 100%; position: relative;}
.innerContentSongsBodyEl > div {align-items: center; position: relative;}
.innerContentSongsBodyEl > div:first-child {width: 224px;}
.innerContentSongsBodyEl > div:first-child .ratio {width: 100%;}
.innerContentSongsBodyEl > div:last-child {width: calc(100% - 224px); padding-left: 30px;}
.innerContentSongsBodyEl > div:last-child audio {width: 100%;}
#innerContentSongsBottom {margin-top: 150px; width: 100%; position: relative;}
#innerContentSongsBottom > div {width: calc(100% / 3); position: relative; margin-top: 30px;}
#innerContentSongsBottom > div:nth-child(-n+3) {margin-top: 0px;}
#innerContentSongsBottom > div .button {/*width: 240px;*/ text-align: center;}
.ratio-11 {padding-top: 110%;}
#innerContent11Body {position: relative;}
#innerContent11Body > div {position: relative; height: 760px;}
#innerContent11Body > div:first-child {order: 1; width: calc(50% - 8px); margin-top: 30px;}
#innerContent11Body > div:nth-child(2) {order: 2; width: calc(((50% - 8px) - 16px) / 2); margin-top: 30px; margin-left: 16px;}
#innerContent11Body > div:nth-child(3) {order: 3; width: calc(((50% - 8px) - 16px) / 2); margin-top: 30px; margin-left: 16px;}
#innerContent11Body > div:nth-child(2) > div, #innerContent11Body > div:nth-child(3) > div {width: 100%; position: relative;}
#innerContent11Body .flex {height: 760px; width: 100%; flex-direction: column;}
#innerContent11Body > div:nth-child(2) .flex2 > div:first-child {height: 495px; position: relative; width: 100%;}
#innerContent11Body > div:nth-child(2) .flex2 > div:last-child {align-items: center;}
#innerContent11Body > div:nth-child(3) .flex2 > div:first-child {height: 250px; position: relative; width: 100%;}
#innerContent11Body > div:nth-child(3) .flex2 > div:last-child {position: relative; width: 100%;}
#innerContent11Body > div:nth-child(3) .flex2 > div:last-child .bg {margin-top: 16px;}
.txt ul {list-style: none; margin-top: 20px;}
.txt ul li {position: relative; padding-left: 16px; line-height: 1.4; margin-top: 10px;}
.txt ul li:first-child {margin-top: 0px;}
.txt ul li:before {content: ''; display: block; width: 8px; height: 2px; background-color: #363636; top: 50%; margin-top: -1px; left: 0px; position: absolute;}
.innerContentSeminarsEl {width: 100%; height: 390px; margin-top: 30px; position: relative; overflow: hidden; text-decoration: none; color: #fff; background-color: #363636;}
.innerContentSeminarsEl > div {align-items: flex-end; justify-content: center; width: 100%;}
.innerContentSeminarsEl .bg {z-index: 1; transition: all 0.2s linear;}
.innerContentSeminarsEl:hover .bg {transform: scale(1.1, 1.1); transition: all 0.2s linear; opacity: 0.8;}
.innerContentSeminarsEl .txt {position: relative; z-index: 2; text-align: center; padding: 64px; width: 60%; margin: 0 auto;}
.innerContentSeminarsEl .txt h2 {color: #fff;}
#innerContent .blogBodyEl .flex2 > div:last-child {align-items: flex-end; padding-top: 8px;}
#innerContent .blogBodyEl .flex2 > div:last-child > div > .txt {display: none;}
#blogBody.blogBody--news > div {width: calc((100% - 90px) / 4); margin-left: 30px; margin-top: 56px; position: relative;}
#blogBody.blogBody--news > div:nth-child(-n+3) {margin-top: 56px;}
#blogBody.blogBody--news > div:nth-child(3n+1) {margin-left: 30px;}
#blogBody.blogBody--news > div:nth-child(-n+4) {margin-top: 0px;}
#blogBody.blogBody--news > div:nth-child(4n+1) {margin-left: 0px;}
#form {width: 712px; margin: 0 auto; margin-top: 80px;}
.input {width: 100%; height: 56px; background-color: #fff; padding: 0 20px; color: #363636; font-family: 'PF DinDisplay Pro'; font-weight: normal; font-size: 18px; display: block; margin-top: 8px; transition: all 0.2s linear;}
.input:first-child {margin-top: 0px;}
.textarea {width: 100%; height: 160px; background-color: #fff; padding: 12px 20px; color: #363636; font-family: 'PF DinDisplay Pro'; font-weight: normal; font-size: 18px; display: block; margin-top: 8px; transition: all 0.2s linear;}
#form .button--black {margin-top: 30px;}
.button .flex {position: relative;}
.button .flex > div {align-items: center;}
.button .flex > div:first-child {width: 24px;}
.button .flex > div:first-child svg {display: block; width: 24px; height: 24px;}
.button .flex > div:first-child svg path {fill: #363636; transition: all 0.2s linear;}
.button:hover .flex > div:first-child svg path {fill: #fff; transition: all 0.2s linear;}
.button .flex > div:last-child {padding-left: 10px; width: calc(100% - 24px);}
#formBottom > div {width: 50%; position: relative; justify-content: center;}
#formBottom > div .button {padding: 0 20px;}
#innerContent2 {margin-top: 140px; margin-bottom: 140px;}
#innerContent2Top h1 {font-size: 70px; line-height: 1.2; font-weight: normal; font-family: 'Merriweather', serif; color: #363636; text-transform: none; text-align: center; width: 80%; margin-left: 10%;}
.innerBlocksBg--FFF {background-color: #fff;}
.innerBlocksPdg--56 {padding: 56px;}
.txt img {width: 100%; height: auto;}
.innerBlocks {margin-top: 72px;}
.innerBlocksPdg--224 {padding: 0 224px;}
#blog.articlesBlog {padding: 64px 0 150px; background-color: #fff;}
.txt a, .txt a:visited {color: #0860C4; text-decoration: none; border-bottom: 1px solid #0860C4; transition: all 0.2s linear;}
.txt a:hover {color: #053B7A; border-color: #053B7A; transition: all 0.2s linear;}
#loader {display: block; width: 60px; height: 60px; position: relative;}
#loader img {width: 100%; height: 100%;}
#mdl {display: none; padding: 56px; background-color: #fff; color: #363636;}
#mdl #loader {margin-top: 32px;}
.red--border {background-color: #F9DDDF !important; transition: all 0.2s linear;}
#panel {display: block; background-color: #1D1D1B; width: 100%; height: 100%; position: fixed; z-index: 20; top: 0px; bottom: 0px; -webkit-transform: translate(100%,0); transform: translate(100%,0); opacity: 0;
-webkit-transition:opacity 0s .3s,visibility 0s .4s,-webkit-transform .3s cubic-bezier(.23,.62,.42,.99) .1s;
transition:opacity 0s .3s,visibility 0s .4s,-webkit-transform .3s cubic-bezier(.23,.62,.42,.99) .1s;
transition:transform .3s cubic-bezier(.23,.62,.42,.99) .1s,opacity 0s .3s,visibility 0s .4s;
transition:transform .3s cubic-bezier(.23,.62,.42,.99) .1s,opacity 0s .3s,visibility 0s .4s,-webkit-transform .3s cubic-bezier(.23,.62,.42,.99) .1s;
}
.panel--open #panel {-webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1;
-webkit-transition:opacity 0s .3s,visibility 0s .4s,-webkit-transform .3s cubic-bezier(.23,.62,.42,.99) .1s;
transition:opacity 0s .3s,visibility 0s .4s,-webkit-transform .3s cubic-bezier(.23,.62,.42,.99) .1s;
transition:transform .3s cubic-bezier(.23,.62,.42,.99) .1s,opacity 0s .3s,visibility 0s .4s;
transition:transform .3s cubic-bezier(.23,.62,.42,.99) .1s,opacity 0s .3s,visibility 0s .4s,-webkit-transform .3s cubic-bezier(.23,.62,.42,.99) .1s;
}
#panelBody {width: 100%; height: calc(100vh - 104px); overflow-y: auto; padding: 48px 0px;}
#panelBody > div {align-items: center; width: 100%; color: flex;}
#panelBodyMenu {list-style: none; width: 100%;}
#panelBodyMenu > li {margin-top: 24px;}
#panelBodyMenu > li:first-child {margin-top: 0px;}
#panelBodyMenu > li a, #panelBodyMenu > li a:visited {font-size: 46px; text-decoration: none; text-transform: uppercase; font-weight: normal; font-family: 'Merriweather', serif; color: #fff; transition: all 0.2s linear;}
#panelBodyMenu > li a span {position: relative;}
#panelBodyMenu > li a span:after {content: ''; display: block; width: 140px; height: 8px; background: url('../img/arrow2.svg') no-repeat; top: 50%; margin-top: -4px; right: -196px; position: absolute; opacity: 0; visibility: hidden; transition: all 0.2s linear;}
#panelBodyMenu > li a:hover span:after {opacity: 1; visibility: visible; transition: all 0.2s linear;}
.preopen .wrap {-webkit-transform: translate(0,100%); transform: translate(0,100%); visibility: hidden; display: none; transition: all 0.2s cubic-bezier(.23,.62,.42,.99);}
.preopen footer {display: none;}
.preopen {height: 100vh; overflow: hidden;}
#preload {width: 100%; height: 100%; background: url('../img/preloadBg.webp') no-repeat; background-size: cover; background-position: 50% 50%; position: relative; z-index: 1; position: fixed; overflow: hidden;}
#preload > div {align-items: flex-end; justify-content: center; width: 100%; height: 100%; position: relative;}
#preloadMarianna {width: auto; height: 90%; position: relative; z-index: 1;
margin-bottom: -80px; opacity: 0; transition: all 1.2s cubic-bezier(.23,.62,.42,.99);
}
.preloadMarianna--active {margin-bottom: 0px !important; opacity: 1 !important; transition: all 1.5s cubic-bezier(.23,.62,.42,.99);}
#preloadLogo {position: absolute; z-index: 2; bottom: 6%; width: 40%; height: auto; left: 30%; opacity: 0; transition: all 1s cubic-bezier(.23,.62,.42,.99);}
.preloadLogo--active {bottom: 16% !important; opacity: 1 !important; transition: all 2s cubic-bezier(.23,.62,.42,.99);}
#preloadLogo path {/*stroke-width: 6px; stroke: #F9D8BB;*/ fill: #F9D8BB; /*opacity: 0; transition: all 0.4s linear;*/}
.squiggle {
  animation: draw 0.4s linear forwards;
}
.squiggle2 {
  animation: draw 0.2s linear forwards;
}
.squiggle3 {
  animation: draw 1s linear forwards;
}
.nsquiggle {
  opacity: 1 !important;
  transition: all 0.4s linear;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw2 {
  to {
    opacity: 1;
  }
}
#preloadWrp {opacity: 1;}
.preloadWrp--hidden {opacity: 0 !important; transition: all 0.8s cubic-bezier(.23,.62,.42,.99);}
.scrollTracking {opacity: 0;}
.scrollTracking.scrollTracking--active {opacity: 1; -webkit-transition: all 0.6s 0.2s ease; -moz-transition: all 0.6s 0.2s ease; -o-transition: all 0.6s 0.2s ease; transition: all 0.6s 0.2s ease;}
.scrollTracking2 {-moz-transform: translate(0px, 80px); -webkit-transform: translate(0px, 80px); -o-transform: translate(0px, 80px); -ms-transform: translate(0px, 80px); transform: translate(0px, 80px); opacity: 0; -webkit-transition: all 0.3s 0.2s ease; -moz-transition: all 0.3s 0.2s ease; -o-transition: all 0.3s 0.2s ease; transition: all 0.3s 0.2s ease;}
.scrollTracking2.scrollTracking--active {-moz-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}

.innerContentSongsBottomNotop {margin-top: 0px !important;}
#innerContentBottomText {margin-top: 150px; width: 100%; text-align: center; margin-bottom: 60px; position: relative;}
#innerContent2Top p {text-align: center; /*color: #053B7A;*/ margin-top: 32px;}

.ratio-16-9 {padding-top: 56.25%;}
.ratio-9-16 {padding-top: 177%;}
.ratio-V {width: 60%; margin-left: 20%;}