Notes

<div class="yellow elem txt-menu time" id="section">
ВСЕ МАРШРУТЫ
<div class="section-pointer">▼</div><div class="section-pointer" style="display: none">▲</div>
<div id="section-open">
<img class="section-bg" src="orig.jpg">
<img class="section-bg" src="orig.jpg">
</div>

-------------


isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i );

var Row, View; // Row - количество превью в ряд, View - вид меню: 0 - иконки в ряд, 1 - в два ряда, 2 - в три ряда
var LogoSize = '65%'; // Размер логотипа по горизонтали
var ParallaxOn = 1; // 1 - включение 3D, 0 - отключение 3D

// Построение страницы

function BUILD() {

var w = screen.width;
var h = screen.height;
var CountryN = $('.country').length;
var CountryV = $('.visible').length;
var CountriesN = $('.countries').length;

if ( w > h ) { LogoSize = '65%'; Row = 6; ParallaxOn = 1; View = 0; } // полный экран
if ( w <= h/1.7 ) { LogoSize = '100%'; Row = 3; ParallaxOn = 0; View = 2; } // смартфон вертикально
if ( w > h/1.7 && w <= h ) { LogoSize = '95%'; Row = 5; ParallaxOn = 1; View = 1; } // планшет вертикально
if ( w > h && isMobile ) { LogoSize = '85%'; Row = 5; ParallaxOn = 0; View = 1; } // смартфон и планшет горизонтально

$('.zoom').css( 'width', LogoSize );
$('.preview').css({'width': 100/Row + '%'});

if (View === 0) { $('.on-1,.on-2,.on-3,.on-label,.visible').hide(); // адаптивное меню
$('.invisible').show();
$('.label').css({'width': 100-12*CountryN + '%'}).css({'height': 8 + 'vw'});
$('.country, .visible').css({'width': 12 + '%'}).css({'height': 8 + 'vw'});
$('.countries').css({'width': 100/CountriesN + '%'}).css({'height': 70/CountriesN + 'vw'});

$('.elem-h').css( 'height', 'auto' ); // параметры меню
$('.txt-menu').css( 'font-size', '17px' );
$('.txt-menu-euro').css( 'font-size', '23px' );
$('.txt-menu-japan').css( 'font-size', '21px' );
$('.section-bg').css( 'width', '80vh' ); }

if (View === 1) { $('.on-1,.on-3,.visible').hide();
$('.on-label,.on-2,.invisible').show();
$('.label').css({'width': 100 + '%'}).css({'height': 8 + 'vw'});
$('.country,.visible').css({'width': 100/CountryN + '%'}).css({'height': 12 + 'vw'});
$('.countries').css({'width': 200/CountriesN + '%'}).css({'height': 140/CountriesN + 'vw'});

$('.elem-h').css( 'height', 'auto' );
$('.txt-menu').css( 'font-size', '17px' );
$('.txt-menu-euro').css( 'font-size', '21px' );
$('.txt-menu-japan').css( 'font-size', '16px' );
$('.section-bg').css( 'width', '85vw' ); }

if (View === 2) { $('.on-2,.invisible').hide();
$('.on-1,.on-3,.on-label,.visible').show();
$('.label').css({'width': 100 + '%'}).css({'height': 18 + 'vw'});
$('.country,.visible').css({'width': 200/(CountryN+CountryV) + '%'}).css({'height': 23 + 'vw'});
$('.countries').css({'width': 1000/(3*CountriesN) + '%'}).css({'height': 700/(3*CountriesN) + 'vw'});

$('.elem-h').css( 'height', '50px' );
$('.txt-menu').css( 'font-size', '16px' );
$('.txt-menu-euro').css( 'font-size', '21px' );
$('.txt-menu-japan').css( 'font-size', '16px' );
$('.section-bg').css( 'width', '85vw' ); }

if (isMobile) $( ".elem" ).hover( function() { $( this ).css('border-radius', '100px 30px/20px 15px'); }); // отключение анимации меню для мобильных устройств
};

//Раскрывающееся содержание меню

function MAP() {
$("#section-open").hide();
$("#section").click( function(){
$("#section-open").slideToggle(500);
$( ".section-pointer" ).toggle( );
});
};

// Обновление при повороте экрана

window.addEventListener( 'orientationchange', function() { BUILD(); }, false);
$(window).resize(function(){ BUILD(); });

// 3D-эффект

function PARALLAX(i1, i2) {

function setTranslate(xPos, yPos, el) { el.style.transform = 'translate3d(' + xPos + ', ' + yPos + 'px, 0)'; }

window.addEventListener("DOMContentLoaded", scrollLoop, false);

var yScrollPosition;

function scrollLoop() {

yScrollPosition = window.scrollY;

setTranslate(0, yScrollPosition * ParallaxOn * i1, document.querySelector('#layer_1'));
setTranslate(0, yScrollPosition * ParallaxOn * i2, document.querySelector('#layer_2'));

requestAnimationFrame(scrollLoop);
}
};

// Галерея фотографий. num - номер фотографии. from, to - интервал фотографий

function PhotoLoad(i) {

if (i < 10) { document.write('<a rel="gallery-1" class="swipebox" href="gallery_big/000' + i + '.jpg"><img class="preview time" src="gallery_small/000' + i + '.jpg" alt="" /></a>');}
else if (i >= 10 && i < 100) { document.write('<a rel="gallery-1" class="swipebox" href="gallery_big/00' + i + '.jpg"><img class="preview time" src="gallery_small/00' + i + '.jpg" alt="" /></a>');}
else if (i >= 100 && i < 1000) { document.write('<a rel="gallery-1" class="swipebox" href="gallery_big/0' + i + '.jpg"><img class="preview time" src="gallery_small/0' + i + '.jpg" alt="" /></a>');}
else if (i >= 1000) { document.write('<a rel="gallery-1" class="swipebox" href="gallery_big/' + i + '.jpg"><img class="preview time" src="gallery_small/' + i + '.jpg" alt="" /></a>');}
};

function ONEPHOTO(num) { PhotoLoad(num); };
function GALLERY(from, to) { for (var num = from; num <= to; ++num) { PhotoLoad(num); } };


------------------------


body { margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background-size: 100% auto;
background-repeat: repeat;
background-position: left top;}

.bg-1 { background: #31313196; }
.bg-2 { background: #000000c2; }

.sky-to-yellow { background: #1f7fdb; cursor: pointer; }
.sky-to-yellow:hover { background: #fc0; }

.yellow-to-red { background: #fc0; cursor: pointer; }
.yellow-to-red:hover { color: #fff; background: #d00; }

.yellow { background: #fc0; }
.sky { background: #1f7fdb; }

.shadow { box-shadow: 0 0 15px #0000004d;}

.elem { text-align: center;
vertical-align: center;
border: 1.5px solid #fff;
box-sizing: border-box;
border-radius: 100px 30px/20px 15px;
box-shadow: inset 20px 5px 35px #ffffff4d, inset -7px -5px 15px #00000012; }

.elem:hover { border-radius: 30px 20px/100px 20px; }

.preview {
position: relative;
border: 1.2px solid #fff;
border-radius: 10vh 2vh/3vh 2vh;
box-sizing: border-box; }

.preview:hover { border-radius: 1vh; }

#section { cursor: pointer; }
.section-pointer { display: inline-block; }
.section-bg { color: #fff;
background: #3a8edf;
font-size: 16px;
font-family: 'Verdana', sans-serif;
line-height: 1.5;
text-align: justify;
width: 85vw;
padding: 3vmin;
margin: 2vmin;
border-radius: 100px 30px/20px 15px;
border: 1.5px solid #fff; }

.label, .country, .countries, .visible { display: inline-block; height: 8vw; padding: 0; }

@font-face { font-family: Hermann-Gotisch NormalC Regular;
src: url(fonts/hermann-gotisch-normal.ttf); }

@font-face { font-family: Han Zi;
src: url(fonts/han-zi.ttf); }

.txt-menu { padding: 7px;
color: #000;
font-size: 17px;
font-family: 'Russo One', sans-serif; }

.txt-menu-euro {
padding: 7px;
color: #000;
font-size: 23px;
font-family: 'Hermann-Gotisch NormalC Regular';
text-align: center;
vertical-align: center; }

.txt-menu-japan {
padding: 7px;
color: #000;
font-size: 21px;
font-family: 'Han Zi';
text-align: center;
vertical-align: center; }

.txt-label { height: 100%; max-width: 100%; }

.story {color: #000;
background: #fff;
white-space: pre-line;
text-align: justify;
font-size: 16px;
font-family: 'Verdana', sans-serif;
line-height: 1.5;
margin: 1vw;
padding: 3vw;
border: 0.3vw solid #fece0d;
box-sizing: border-box;
border-radius: 100px 30px/20px 15px; }

a { color: #ffcc01;
text-decoration: underline;
border: 0px; }

a:hover { color: #d70; }

.zoom { transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transition: all 0.55s ease-in-out;
-moz-transition: all 0.55s ease-in-out;
-webkit-transition: all 0.55s ease-in-out;
-ms-transition: all 0.55s ease-in-out; }

.zoom:hover { transform: scale(1.02);
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out; }

.time { transition: all 0.55s ease-in-out;
-moz-transition: all 0.55s ease-in-out;
-webkit-transition: all 0.55s ease-in-out;
-o-transition: all 0.55s ease-in-out;
-ms-transition: all 0.55s ease-in-out; }

.time:hover { transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out; }

#layer_1 { z-index: 1; position: relative; margin: 0; padding: 0; width: 100%; }
#layer_2 { z-index: 2; position: relative; margin: 0; padding: 0; width: 100%; }
#layer_3 { z-index: 3; position: relative; margin: 0; padding: 0; width: 100%; }