@import url('https://fonts.googleapis.com/css?family=Pattaya&display=swap');
p{color:#636370;}
h3{ 
    font-family: 'Pattaya', sans-serif;
    letter-spacing:2px;
    color:#4F4F4F;;
}
img{border-radius:6px;}
/*.fon-menu{background: #0e2076;}*/
.header-menu {
	position: absolute;
	/*background: #0e2076;*/
	width: 100%;
	height:110px;		
}
.logo img {
    width:80px;
    margin-right: 20px;
    cursor:pointer;
}
.logo h1{
    font-family: 'Pattaya', sans-serif;
    letter-spacing:2px;
	color: #3b4276;
	font-style: italic;
    font-weight: 400;
	font-size: 46px;
	padding: 0px;
	margin: 0px;
    cursor: pointer;
}
.tel{
	color: #3b4276;
	font-size: 36px;
    font-style: italic;
}
.logo p{
	color: #7F7F7F;
	font-size: 16px;
	padding-top:0px;
	margin: 0px;
    font-weight: 600;
}

.my-link {
	color: aliceblue;
	padding: 10px;
	font-size:16px;		
}

.my-link:hover {
	color: #EFFFBF;

}

.menu{
    background: #0e2076bd;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index:10;
}



@media (max-width: 1920px) {
    .fon-baner {
    position: relative;
    top:-60px;
	background: url('img/fon-banner5.jpg') center no-repeat;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	height: 460px;
    z-index: -1;
		
    }

    .zag-baner{padding-top: 120px;}
    .zag-baner h2{
        text-shadow: #005fa3 2px 2px 6px;
        padding-left:80px;
        margin-top:8px;
        font-weight: 800;
        font-size:36px; 
        color:#FFFFFF; 
        font-style: italic;
    }

    .zag-baner p{
        font-size:28px; 
        color:#668199; 
        margin: 0px;
        font-family: 'Pattaya', sans-serif;
        letter-spacing:2px;
        padding-left:54%;
        font-style: italic; 
        color:#FFFFFF;
    }

}

@media (max-width: 960px) {
    .fon-baner {
    position: relative;
    top:10px;
	background: url('img/fon-banner5.jpg') center no-repeat;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	height: 460px;
    z-index: -1;
		
    }
    
    .zag-baner{padding-top: 20px;}
    
    .zag-baner h2{
        text-shadow: #005fa3 2px 2px 6px;
        padding-left:10px;
        margin-top:18px;
        font-weight: 400;
        font-size:24px; 
        color:#FFFFFF; 
        font-style: italic;
    }

    .zag-baner p{
        font-size:24px; 
        color:#668199; 
        margin: 0px;
        font-family: 'Pattaya', sans-serif;
        letter-spacing:2px;
        padding-left:6%;
        color:#FFFFFF;
    }

}






@media (max-width: 1920px) {
    .zag {
    width: 100%;
    margin-top: 30px;
	margin-bottom: 50px;
   
    }
    
    
    .zag_text {
	width: 50%;
	text-align: center;
	border-bottom: 2px solid #D9D900;
    }
    
    .zag h2{
        
        font-family: 'Pattaya', sans-serif;
        letter-spacing:2px;
        font-style: italic;
        color:#444444;
        font-size:50px;
        font-weight: 400;
    }

}

@media (max-width: 960px) {
    .zag {
    margin-top: 30px;
	margin-bottom: 50px;
    padding-left: 10px;
    }
    
    .zag_text {
	width: 80%;
	border-bottom: 2px solid #D9D900;
    }
    .zag h2{
        font-family: 'Pattaya', sans-serif;
        letter-spacing:2px;
        font-style: italic;
        color:#444444;
        font-size:40px;
        font-weight: 400;
    }

}

.zag a{
	font-style: italic;
	color:#2980b9;
	font-size:20px;
}
.zag a:hover{
	text-decoration: none;
}

.border-img{
    border-radius: 200px;
    border: 10px solid #fdfdca;
}

.footer{
    margin-top: 100px; 
    background: #0F0F1E;
    color:#FFFFFF;
    padding: 0px;
}
.menu_footer{
    padding-inline-start: 0px;
    background: #21214c;
}

.menu_footer ul li{
    list-style-type: none;
}

.menu_footer a{
    margin-right: 5px;
    color: #FFFFFF;
    font-weight: 400;
}
 
.menu_footer a:hover{
    color: #9595A2;
}








/* ---------- Нумерация перечисления ----------- */


      .ol_nomer {
        counter-reset:myCounter;
        margin-left:0;
        padding-left:25px;
        color: rgb(100,100,100);
		margin-top: 20px;  
		margin-bottom: 40px;
      }

      .ol_nomer li {
        position: relative;
		padding-left: 2.6em;
		margin: 0.6em 0;
		list-style: none;
		line-height: 1.8em;
		cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
      }

      .ol_nomer li:hover {
        color: rgb(0,0,0);
      }

      .ol_nomer li:before {
        content:counter(myCounter);
        counter-increment:myCounter;
        position:absolute;
        top:0;
        left:0;
        width: 2em;
        height: 2em;
        line-height: 1.8em;
        padding:0px;
        color:#fff;
        background:#2980b9;
        font-weight:bold;
        text-align:center;
        border-radius: 1.9em;
        box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
        z-index: 1;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }

      .ol_nomer li:hover:before {
        background-color: #2ecc71;
      }

      .ol_nomer li li:before{
        background-color: #3498db;
      }

      .ol_nomer li:after {
        position: absolute;
        top: 2.1em;
        left: 0.9em;
        width: 2px;
        content: '';
        background-color: rgb(203, 203, 203);
        z-index: 0;
      }

      .ol_nomer li:hover:after {
        background-color: #2ecc71;
      }

      .ol_nomer li {
        /*font-size: 1.2em;*/
      }

      /* ---------- style end ----------- */















.but-blue{
	background: #3c6ea9;
	color:#FFFFFF;
	font-weight: 600;
	padding-left: 15px;
	padding-right: 55px;
	padding-top: 10px;
	padding-bottom: 10px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}

.but-blue:hover{color:#FFFFFF; text-decoration: none; background: #5095AF;}

.but-green{
	background: #24bb8f;
	color:#FFFFFF;
	font-weight: 600;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}

.but-green:hover{color:#FFFFFF; text-decoration: none; background: #20c997;}



















.block{
    cursor:pointer;
    color:#FFFFFF;
    margin-top: 30px;
    background: #137296;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.block:hover{
    background: #0005AF;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
    color:aqua;
}

.cart_images{
    margin: 4px;
    object-fit: cover;
    object-position: center top;
    height: 200px; 
    width: 97%;
}

.cart_zag{
    height:65px; 
    padding: 10px;
    font-weight: 800;
    font-size: 16px;
    color: #4c5999;
}
.cart_text{
    background: #EFFFBF;
    height: 320px;
    text-align: right;
    padding: 10px;
    padding-bottom: 20px;
}
.cart_p{
    padding-top: 10px;
    text-align: left;
    min-height: 250px;
}
.cart_p b{
    color:dimgray; font-size: 18px;
    font-style: italic;

}


.img_news{
    width:100%;
    height: 150px; 
    object-fit: cover;
    object-position: center top;
}




.hover:hover{opacity: 0.5;}
.section_content{min-height: 700px;}
.btn{border-radius: 0px;}

.img_krug{
    border-radius: 260px;
    border: 10px solid #fdfdca;
    max-height: 400px;
}











/**
 * Переключаемая боковая панель навигации
 * выдвигающаяся справа
 */


.nav {
    /*  ширна произвольная, не стесняйтесь экспериментировать */
    width: 310px;
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно правого края страницы */
    right: -320px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /* определяем цвет фона панели */
    background: #1d9287;
    /* поверх других элементов */
    z-index: 2000;
}



/**
 * Кнопка переключения панели
 * тег <label>
 */

.nav-toggle {
    /* абсолютно позиционируем */
    position: absolute;
    /* относительно правого края панели */
    right: 320px;
    /* отступ от верхнего края панели */
    top: 0.5em;
    /* внутренние отступы */
    padding: 0.5em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    /* цвет текста */
    color: #dadada;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}


/* цвет текста при наведении */

.nav-toggle:hover {
    color: #f4f4f4;
}


/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}


/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
}


/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */

[id='nav-toggle']:checked ~ .nav {
    right: 0;
    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
}


/* 
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/

[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
}


/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */


@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}


/**
 * позаботьтимся о средних и маленьких экранах
 * мобильных устройств
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
      width: 100%;
      box-shadow: none
    }
}


/**
 * Формируем стиль заголовка (логотип) панели 
*/



/*плавное появление заголовка (логотипа) при раскрытии панели */

[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */

.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav > ul > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* определяем интервалы появления пунктов меню */

.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}


/**
 * оформление ссылок пунктов меню
 */

.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding-left: 10px;
    font-weight: 300;
    font-size: 1.2em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
    /* плавный переход */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}


/**
 * состояние ссылок меню при наведении
 */

.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}


/**
 * линия подчеркивания ссылок меню
 */

/*.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.5px;
    width: 100%;
    background: #CCCCCC;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}*/





























.modalbackground {
margin: 0; /* убираем отступы */
padding: 0; /* убираем отступы */
position: fixed; /* фиксируем положение */
top:0; /* растягиваем блок по всему экрану */
bottom:0;
left:0;
right:0;
background: rgba(0,0,0,0.5); /* полупрозрачный цвет фона */
z-index:100; /* выводим фон поверх всех слоев на странице браузера */
opacity:0; /* Делаем невидимым */
pointer-events: none; /* элемент невидим для событий мыши */
}

/* при отображении модального окно - именно здесь начинается магия */
.modalbackground:target {
    opacity: 1; /* делаем окно видимым */ 
    pointer-events: auto; /* элемент видим для событий мыши */
}

/* ширина диалогового окна и его отступы от экрана */
.modalwindow {
	width: 100%;
	max-width: 600px;
	margin: 10% auto;
    color:#404d4d;
	background: #fff;
	border-radius: 4px;
}

/* настройка заголовка */
.modalwindow h3 {
padding: 0;
margin: 0;
color:#CCCCCC;
}



.m-header{
    padding: 15px;
    border-radius: 3px 3px 0px 0px;
}


.m-close{
   
    background: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    padding-left: 96%;
    position: relative;
    top:-55px;
    
}
.m-close:hover{
     background: none;
     text-decoration: none;
    color: #666;
}

.m-body{
    width: 100%; 
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
}