@font-face {
	font-family: 'BeausansPro-bold';
	src: url('fonts/PFBeauSansPro-Bold.ttf');
}

@font-face {
	font-family: 'BeausansPro-semibold';
	src: url('fonts/PFBeauSansPro-SemiBold.ttf');
}

@font-face {
	font-family: 'BeauSansPro-Bbook';
	src: url('fonts/PFBeauSansPro-Bbook.ttf');
}

@font-face {
	font-family: 'BeausansPro-light';
	src: url('fonts/PFBeauSansPro-Light.ttf');
}

@font-face {
	font-family: 'Firasans-regular';
	src: url('fonts/FiraSans-Regular.otf');
}

@font-face {
	font-family: 'Firasans-medium';
	src: url('fonts/FiraSans-Medium.otf');
}
.big-selected-mobile {
	text-indent: -11px;
}


.big-selected-mobile:before {
	position: relative;
	top: 0;
	left: -11px;
	border-left: 11px solid #3ED8D2;
	content: "";
	mix-blend-mode: normal;
}

.book-selected-mobile {
	text-indent: -6px;
}

.book-selected-mobile:before {
	position: relative;
	top: 0;
	left: -13px;
	border-left: 6px solid #3ED8D2;
	content: "";
}
@media (max-width: 992px) {
    
    #container-mobile{
        display: flex;

    }
}
    #container-mobile{


	    background: wheat;
    position: relative;
	/*position: relative;
	top: 50px;
	left: 300px;*/
	z-index: 499;
	/*background: right url('media/blackneruds.jpg');*/
	overflow: hidden;
	/* box-shadow: 1px 1px 2px black;*/
    width: 100%;
    height: 190vw;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 2px -2px 2px rgba(0,0,0,0.15);

    }
    #banner-container{
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 20px;
    }
    #container-mobile-background{
        background: right url('media/blackneruds.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 5;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    #trap-mobile{
        border-left: 2px solid white;
	    position: absolute;
	    bottom: 0;
	    z-index: 505;
        /*right: 0;*/
        left: -1px;
        
        

		/*border right задается в js функции при загрузке страницы*/
		border-top: 78px solid white;
    }
    #trap-inner-mobile{
        position: absolute; 
        
       
        height: 100%;
        align-items: center;
        justify-content: center;
        padding-bottom: 25px;
    }
    .trap-inner-mobile-col{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
	    color: #fff;
        text-align: center;
    }
    .trap-header-mobile{
        font-size: 28px;
        margin-top: 30px;
        margin-bottom: 0px;
        text-decoration: underline;
        font-family: 'BeausansPro-bold';
    }
    .trap-teasis-mobile{
        font-size: 21px;
        font-family: 'BeausansPro-light';
        margin-top: 8px;
        color: transparent;
    }
    #trap-map-img-mobile{
        width: 200px;
        height: 200px;
    }
    .dot-mobile{
        width: 18px;
        height: 18px;
        border-radius: 18px;
        background: transparent;
        margin: auto;
        display: block;
    }
    #block-mobile{
        position: absolute;
	    top: 0;
        left: 0;
	    z-index: 500;
	    /*border-right: 30px solid white;*/

        background: white;
        
		/*border-bottom: 78px solid white;*/
    }
    #block-content-mobile {
    height: inherit;
        overflow: hidden;
  
        mix-blend-mode: difference;


	}
    #banner-header-mobile {
    word-wrap: break-word;
	font-size: 18px;
	font-family: 'BeausansPro-semibold';
	padding-left: 15px;
	color: #fff;

}
    .banner-bold-text-mobile {
    font-family: 'BeausansPro-bold';
	color: #ccc;
	font-size: 16px;
	padding-left: 15px;
	padding-right: 10px;
    margin-bottom: 6px;
    margin-top: 6px;
}

.banner-book-text-mobile {
    font-family: 'BeauSansPro-Bbook';
	color: #ccc;
	font-size: 16px;
	padding-left: 15px;
	padding-right: 10px;
    margin-bottom: 6px;
    margin-top: 6px;
}
    .banner-bold-text-mobile {
	font-size: 16px;
	font-family: 'BeausansPro-bold';
	padding-left: 15px;
	color: #ccc;

}
    #block-numbers-mobile{
        width: 95%;
        padding-left: 10px;
        padding-right: 10px;
        mix-blend-mode: normal;
        position: absolute;
        padding-top: 10px;
        overflow: visible;
        z-index: 510;
        bottom: 5px;
        
    }
    .block-number-mobile{
        font-family: 'BeausansPro-bold';
        font-size: 34px;
        color: #89FFFF;
        text-align: center;
        
    }
    .block-number-text-mobile{
        font-family: 'BeausansPro-semibold';
        font-size: 12px;
        color: #ccc;
        text-align: center;
        z-index: 520;
    }
    #block-number-1-mobile{
        animation-name: blocknumbers;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    #block-text-1-mobile{
        animation-name: blocktexts;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    #block-number-2-mobile{
        animation-name: blocknumbers;
        animation-duration: 0.5s;
        animation-delay: 0.6s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    #block-text-2-mobile{
        animation-name: blocktexts;
        animation-duration: 0.5s;
        animation-delay: 0.6s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    #block-number-3-mobile{
        animation-name: blocknumbers;
        animation-duration: 0.5s;
        animation-delay: 0.9s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    #block-text-3-mobile{
        animation-name: blocktexts;
        animation-duration: 0.5s;
        animation-delay: 0.9s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
@media (max-width: 300px) and (min-width: 290px) {
        #block-numbers-mobile{
        bottom: 25px;
    }
}
    /*ДОБАВИТЬ ИЗМЕНЕНИЕ ВЫСОТЫ ГЛАВНОГО БЛОКА НА СТАТИЧЕСКУЮ ПРИ ГОРИЗОНТАЛЬНОМ ПОЛОЖЕНИИ И СДЕЛАТЬ RESIZE FUNCTION ДЛЯ ДИНАМИЧЕСКОГО ПОДГОНА ВСЕХ РАЗМЕРОВ В JS*/
    @media (max-width: 300px)  {
        #banner-header-mobile {
            font-size: 11px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 11px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 3px;
            margin-top: 3px;
        }

        .banner-book-text-mobile {
	        font-size: 11px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 11px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 25px;
        }
        .block-number-text-mobile{
            font-size: 8px;
        }
        #trap-inner-mobile{
        padding-bottom: 25px;
    }
    .trap-inner-mobile-col{
        font-size: 14px;
    }
    .trap-header-mobile{
        font-size: 16px;
        margin-top: 15px;
    }
    .trap-teasis-mobile{
        font-size: 14px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 110px;
        height: 110px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 560px;
    }
}
@media (max-width: 320px) and (min-width: 310px) {
        #block-numbers-mobile{
        bottom: 25px;
    }
}
    @media (max-width: 320px) and (min-width: 300px) {
        #banner-header-mobile {
            font-size: 12px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 11px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 3px;
            margin-top: 3px;
        }

        .banner-book-text-mobile {
	        font-size: 12px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .block-number-mobile{
            font-size: 20px;
        }
        .block-number-text-mobile{
            font-size: 9px;
        }
        #trap-inner-mobile{
        padding-bottom: 25px;
    }
    .trap-inner-mobile-col{
        font-size: 16px;
    }
    .trap-header-mobile{
        font-size: 18px;
        margin-top: 15px;
    }
    .trap-teasis-mobile{
        font-size: 14px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 133px;
        height: 133px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 590px;
    }
}

@media (max-width: 340px) and (min-width: 320px) {
    #banner-header-mobile {
            font-size: 14px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 14px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 13px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 13px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 25px;
        }
        .block-number-text-mobile{
            font-size: 9px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }
    .trap-inner-mobile-col{
        font-size: 16px;
    }
    .trap-header-mobile{
        font-size: 18px;
        margin-top: 15px;
    }
    .trap-teasis-mobile{
        font-size: 17px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 133px;
        height: 133px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 640px;
    }
}
@media (max-width: 360px) and (min-width: 340px) {
    #banner-header-mobile {
            font-size: 15px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 15px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 14px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 14px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 25px;
        }
        .block-number-text-mobile{
            font-size: 9px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }
    .trap-inner-mobile-col{
        font-size: 16px;
    }
    .trap-header-mobile{
        font-size: 18px;
        margin-top: 15px;
    }
    .trap-teasis-mobile{
        font-size: 17px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 133px;
        height: 133px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 640px;
    }
}
@media (max-width: 380px) and (min-width: 360px) {
    #banner-header-mobile {
            font-size: 16px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 16px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 15px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 15px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 26px;
        }
        .block-number-text-mobile{
            font-size: 10px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 22px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 18px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 144px;
        height: 144px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 740px;
    }
}
@media (max-width: 400px) and (min-width: 380px) {
    #banner-header-mobile {
            font-size: 17px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 17px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 15px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 16px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 26px;
        }
        .block-number-text-mobile{
            font-size: 10px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 25px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 18px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 155px;
        height: 155px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 750px;
    }
}
@media (max-width: 420px) and (min-width: 400px) {
    #banner-header-mobile {
            font-size: 18px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 18px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 16px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 16px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 26px;
        }
        .block-number-text-mobile{
            font-size: 12px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 25px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 18px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 155px;
        height: 155px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 780px;
    }
}
@media (max-width: 460px) and (min-width: 420px) {
    #banner-header-mobile {
            font-size: 19px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 18px;
	        padding-left: 19px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 17px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 17px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 27px;
        }
        .block-number-text-mobile{
            font-size: 13px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 27px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 21px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 155px;
        height: 155px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 820px;
    }
}
@media (max-width: 520px) and (min-width: 460px) {
    #banner-header-mobile {
            font-size: 20px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 20px;
	        padding-left: 19px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 18px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 18px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 28px;
        }
        .block-number-text-mobile{
            font-size: 14px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 28px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 22px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 155px;
        height: 155px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 856px;
    }
}
@media (max-width: 600px) and (min-width: 520px) {
    #banner-header-mobile {
            font-size: 21px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 21px;
	        padding-left: 19px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 19px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 19px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 30px;
        }
        .block-number-text-mobile{
            font-size: 15px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 29px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 24px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 170px;
        height: 170px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 856px;
    }
}
@media (max-width: 768px) and (min-width: 600px) {
    #banner-header-mobile {
            font-size: 22px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 22px;
	        padding-left: 19px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 20px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 20px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 32px;
        }
        .block-number-text-mobile{
            font-size: 16px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 32px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 25px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 180px;
        height: 180px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 880px;
    }
}
@media (max-width: 992px) and (min-width: 768px) {
    #banner-header-mobile {
            font-size: 24px;
	        padding-left: 15px;
        }
        .banner-bold-text-mobile {
	        font-size: 24px;
	        padding-left: 19px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        .banner-book-text-mobile {
	        font-size: 22px;
	        padding-left: 15px;
	        padding-right: 10px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        .banner-bold-text-mobile {
	        font-size: 22px;
	        padding-left: 15px;
        }
        .block-number-mobile{
            font-size: 36px;
        }
        .block-number-text-mobile{
            font-size: 18px;
        }
    #trap-inner-mobile{
        padding-bottom: 25px;
    }

    .trap-header-mobile{
        font-size: 36px;
        margin-top: 12px;
    }
    .trap-teasis-mobile{
        font-size: 27px;
        margin-top: 8px;
    }
    #trap-map-img-mobile{
        width: 190px;
        height: 190px;
    }
    .dot-mobile{
        width: 12px;
        height: 12px;
        border-radius: 12px;
    }
    #container-mobile{
        height: 900px;
    }
}