.modal-wrapper                  { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; overflow: auto; white-space: nowrap; font-size: 0; text-align: center; padding: 20px; box-sizing: border-box }
.modal-wrapper:before           { height: 100%; display: inline-block; vertical-align: middle; content: '' }
    
.modal                          { display: none; position: relative; font-size: 16px; line-height: 25px; margin-top: -100px; opacity: 0; white-space: normal; vertical-align: middle; text-align: center; background: #DDD; color: #000; width: 100%; padding: 50px 60px; border-radius: 20px 0 20px 20px; box-sizing: border-box; box-shadow: 0 0 80px rgba(0,0,0,0.35); transition: margin-top 0.2s, opacity 0.2s, transform 0.2s, padding 0.2s; pointer-events: none }
.modal.dark                     { background: #000 }
.modal.wide                     { max-width: 100%; min-height: 100% }
.modal.active                   { margin-top: 0; opacity: 1; pointer-events: auto }
    
.modal .close:before            { font-family: themify; content: "\e646"; font-size: 22px; line-height: 22px; color: #999; padding: 15px; margin: 0; position: absolute; top: 0; right: 0; border-radius: 0 0 0 20px; cursor: pointer; pointer-events: auto; transition: all 0.2s }
.modal .close:hover:before      { color: #000 }

.modal h1,  
.modal h2,  
.modal h3                       { margin-top: 0; text-align: center; max-width: none }

.modal p                        { text-align: center }
.modal p.label                  { text-align: left }
.modal input                    { color: #333 }

.modal .heading,
.modal .subheading              { text-align: center }

/*
.modal [class^="ti-"]:before, 
.modal [class*=" ti-"]:before,
.modal .icon:before             { font: 22px/22px themify; font-weight: normal; color: #AAA; text-shadow: 1px 1px 0 #EEE; vertical-align: middle }
*/

.modal-overlay                  { background: rgb(221 221 221 / .5) }

/* модальное окно с видео */
#modal_video                    { max-width: 1000px; padding: 0 }
#modal_video > :last-child      { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-top: 16px }
#modal_video iframe             { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #EEE }



/* галерея изображений ------------------------------------------------------ */
.modal-gallery                  { background: rgba(0, 0, 0, 0.65); padding: 0; max-width: 100%; min-height: 100%; overflow: hidden; border-radius: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.modal-gallery .close:before    { position: fixed; z-index: 999 }
.modal-gallery .preloader       { position: absolute; display: block; width: 100%; text-align: center; font-size: 22px; line-height: 22px; font-weight: bold; color: #EEE; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%) }
/* обёртка изображений */
.modal-gallery .imgs-wrapper    { position: absolute; min-width: 100%; height: 100%; line-height: 0; white-space: nowrap; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
.modal-gallery .imgs-wrapper:before { height: 100%; display: inline-block; vertical-align: middle; content: '' }
/* изображения */
.modal-gallery .imgs-wrapper .img-underlay { display: inline-block; vertical-align: middle; margin: 0 10px; background: #000 }
.modal-gallery .imgs-wrapper img { background: #FFF; opacity: 0.2; transition: opacity 0.2s; padding: 40px; box-sizing: border-box }
.modal-gallery .imgs-wrapper img.active { opacity: 1; cursor: pointer }
/* стрелки */
.modal-gallery .arrow-next:before,
.modal-gallery .arrow-prev:before { font-family: themify; content: "\e649"; font-size: 48px; line-height: 45px; color: #000; background: rgba(255, 255, 255, 0.65); padding: 16px; margin: 8px; position: fixed; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); right: 0; border-radius: 100%; cursor: pointer; pointer-events: auto; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s }
.modal-gallery .arrow-prev:before { content: "\e64a"; left: 0; right: auto }
.modal-gallery .arrow-next:hover:before,
.modal-gallery .arrow-prev:hover:before { background: rgba(255, 255, 255, 1) }
/* подпись к изображению */
.modal-gallery .caption         { position: fixed; width: 100%; white-space: normal; padding: 0 20px; bottom: 80px; left: 0; color: #FFF; font-weight: bold; font-size: 22px; line-height: 28px; text-align: center; /*text-shadow: 0 0 4px #000;*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
.modal-gallery .caption span    { display: inline-block; background: rgba(0, 0, 0, 0.5); padding: 4px 12px; border-radius: 15px }
/* указатель количества изображений */
.modal-gallery .counter         { font-size: 24px; line-height: 30px; color: #666; background: rgba(255, 255, 255, 0.65); padding: 10px 20px; margin: 8px; border-radius: 25px; position: fixed; bottom: 0; left: 50%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) }
.modal-gallery .counter > span  { color: #000; font-size: 30px }
/* галерея изображений ------------------------------------------------------ */



@media screen and (max-width: 767px) {
    .modal                          { font-size: 17px; line-height: 25px; padding: 50px 30px 40px }
    .modal p                        { margin: 8px 0 }
    
    .modal-wrapper.mobile           { padding: 0; overflow: hidden }
    .modal-wrapper.mobile:before    { vertical-align: bottom }
    
    .modal.mobile                   { opacity: 1; margin-top: 0px; transform: translateY(100%); border-radius: 40px 40px 0 0; vertical-align: bottom; padding: 30px 30px 20px; margin-top: 30px }
    .modal.mobile.active            { transform: translateY(0) }
    .modal.mobile:before            { display: block; position: absolute; left: 0; top: 0; width: 50px; height: 4px; background: #BBB; border-radius: 4px; content: ''; margin-top: 8px; margin-left: 50%; transform: translateX(-50%) }
    .modal.mobile .close            { display: none }
}

@media screen and (max-width: 639px) {
    .modal                          { font-size: 16px; line-height: 22px; }
    
    .modal.mobile                   {  }
}

@media screen and (max-width: 479px) {
    .modal-wrapper                  { padding: 5px }
    .modal                          { font-size: 15px; line-height: 20px; border-radius: 25px 0 25px 25px; padding: 50px 20px 30px }
    .modal p                        { margin: 5px 0 }
    
    .modal-gallery .caption         { font-size: 18px; line-height: 24px; bottom: 60px }
    .modal-gallery .counter         { font-size: 20px; line-height: 25px; padding: 8px 12px; border-radius: 20px }
    .modal-gallery .counter > span  { font-size: 25px }
    
    .modal.mobile                   { border-radius: 25px 25px 0 0; padding: 25px 15px 15px; margin-top: 20px }
}

@media screen and (max-width: 359px) {
    .modal                          { font-size: 14px; line-height: 18px }
}