/*
Theme Name: BoinStudio
Author: Ruslan Ratych
Version: 1.0
*/

#wpadminbar { position: fixed;}
.admin-bar .header.active .header__nav { top:32px;}

.d-none { display: none !important;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield;}

.grecaptcha-badge { opacity: 0; margin-right: -100px;}

.mb70 { margin-bottom: 70px;}

.offer-item__content .title-h3 { max-width: 640px;}
.privacy-hidden .input-list__privacy { display: none;}

.single__head-nothumb { margin-bottom: 30px;}
.single__head-nothumb .single__button { background: #fff; border: 2px solid #E8ECFD; color: #000;}

.entry-content iframe { max-width: 100%;}
.entry-content p + ul, .entry-content p + ol { padding-top: 0;}
.entry-content #ez-toc-container { display: block; background:none; box-shadow: none;}
.entry-content .ez-toc-toggle { background: none; border:none; margin: 0;}
.entry-content .ez-toc-toggle i.ez-toc-glyphicon { display: none;}
.entry-content hr { background: #E8ECFD;}
.entry-content #system-readmore { display: none;}
.entry-content dl { margin-bottom:1em; padding-top: 0.5rem; padding-left: 2.5rem;}
.entry-content dl dt { font-size: 2rem; font-weight: 600; position: relative;}
.entry-content dl dt:before { content:''; display: block; position: absolute; left:-2.5rem; width: 1rem; height: 1rem; box-sizing: border-box; border-radius: 50%; background: 0; border: 2px solid #7E5AE8; top: 0.9rem;}
.entry-content dl dd { margin-bottom: 1rem;}
.entry-content dl dt+dd { padding-top: 0.5rem;}

.post-ratings-loading { vertical-align: top; text-align: left;}
.post-ratings-loading img { vertical-align: top; margin-top: 2px; margin-right: 5px;}

.wp-pagenavi { padding-top: 3rem; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.wp-pagenavi a, .wp-pagenavi span { margin: 0 2px 4px; padding: 0; width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border:none; border-radius:1rem; color:#43475D; font-weight: 600;}
.wp-pagenavi a svg { width: 2rem; height: 2rem;}
.wp-pagenavi .previouspostslink {background: #E8ECFD; transform: scale(-1, 1); order:-1;}
.wp-pagenavi .nextpostslink {background: #E8ECFD; order:1;}
.wp-pagenavi span.current { background: linear-gradient(96.93deg, #7E5AE8 4.5%, #5675EB 95.5%); color: #fff; border:none;}
@media (hover: hover) {
  .wp-pagenavi a:hover { color:#43475D; background: #E8ECFD; box-shadow: rgba(126, 90, 232, 0.2) 0px 3px 10px; border: none;}
}

.post__share .ya-share2__list { margin:0 -0.5rem}
.post__share .ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item { margin-left:0.5rem; margin-right: 0.5rem;}
.post__share .ya-share2__link { width:3.5rem; height:3.5rem; background: url(images/share.svg); background-size: auto 3.5rem;}
.post__share .ya-share2__item .ya-share2__badge, .post__share .ya-share2__item .ya-share2__mobile-popup-badge { display: none;}
.post__share .ya-share2__item_service_facebook .ya-share2__link { background-position: 0 0;}
.post__share .ya-share2__item_service_telegram .ya-share2__link { background-position:-4.5rem 0;}
.post__share .ya-share2__item_service_viber .ya-share2__link { background-position:-9rem 0;}
.post__share .ya-share2__item_service_twitter .ya-share2__link { background-position:-13.5rem 0;}
@media (hover: hover) {
  .post__share .ya-share2__link:hover {
    transform: scale(0.8);
  }
}

.page-preview__thumb { margin-bottom: 2.2rem;}
.masonry-screens { margin: 0 -1.1rem;}
.masonry-item { float:left; width:50%; padding: 0 1.1rem;}
.screens-flex { display: flex; justify-content: space-between;}
.screens-flex.even { flex-direction: row-reverse;}
.screens-flex .screen-desktop { width:69.5%; flex:0 0 69.5%;}
.screens-flex .screen-mobile { width:27.8%; flex:0 0 27.8%;}
.screens-flex .page-preview__thumb img { width: 100%; max-height: 50rem; object-fit: cover; object-position: top;}

.input-list__row-button, .input-list__row { width: 100%;}
.input-list__row .input-list__button { position: relative;}
.modal_order .title { font-size:3.6rem;}
.modal_order .text-23 { font-size:2rem; margin-bottom: 3rem;}
.modal_order .callback-form-success .text-23 { margin-bottom: 3rem;}
.modal_order .form-control { border-color:transparent;}
.modal_order.modal_order_callback .title { font-size:3rem; text-align: center;}
.modal_order.modal_order_callback .text-23 { font-size:1.7rem; text-align: center; margin-bottom: 2rem;}
.modal_order.modal_order_callback .callback-form-success .text-23 { margin-bottom: 3rem;}
span.wpcf7-not-valid-tip { font-size: 0.8em; margin-top: 3px;}
div.wpcf7 form .wpcf7-response-output { margin: 1em 0 0;}
.wpcf7 .input-list .ajax-loader, .wpcf7 .input-list .wpcf7-spinner { position: absolute; left:100%; top:50%; transform:translateY(-50%); margin: 0 15px;}
.wpcf7 .input-list .input-list__row .ajax-loader, .wpcf7 .input-list .input-list__row .wpcf7-spinner { left:auto; right:100%; margin-right: 10px;}
.cpt-wrap { display: none !important;}
.file-input { opacity: 0;}
.input-list__file .wpcf7-form-control-wrap { display: block;}
.psevdo-file { width: 350px; max-width: 100%;}
.wpcf7 form.sent .wpcf7-response-output { display: none !important;}

.modal_order_callback .wpcf7 .input-list .ajax-loader, .modal_order_callback .wpcf7 .input-list .wpcf7-spinner { left:0;}

.team-item_info .input-list__file { width: 100%;}
.team-item_info .psevdo-file { width: 100%;}
.team-item_info .file-btn { padding: 0 1.2rem; width: 100%; margin-top: auto; height: 5rem; color: #7E5AE8; background: none; border: 2px solid #7E5AE8; display: flex; align-items: center; border-radius: 1rem; position: relative; line-height: 1; font-size: 1.5rem; font-weight: 600; outline: none; transition: 0.3s; text-transform: uppercase;}
.team-item_info .file-btn__icon { width: 2rem; height: 2rem; border-radius: 0; min-width: 2rem; background: none; margin-right: 1rem;}
.team-item_info .file-btn__icon svg { width: 2rem; height: 2rem;}
.team-item_info .file-btn__icon svg path { fill:#7E5AE8;}
.team-item_info .file-btn span { background: linear-gradient(96.92deg, #7E5AE8 -11.05%, #5675EB 108.7%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.team-item_info .wpcf7-response-output { display: none !important;}
.team-item_info .wpcf7 .input-list .ajax-loader, .team-item_info .wpcf7 .input-list .wpcf7-spinner { left:auto; right:0;}

.single-work { min-height: 90rem;}

/* techs */
.techs { padding: 11rem 0 10.5rem;}
.techs-list { margin: 0 -1.5rem;}
.techs-list .tech-col { padding: 1.5rem; width: 25%; flex:0 0 25%;}
.tech-item { position: relative; padding-bottom: 66.67%;}
.tech-item .item-inner { display:flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; left:0; top:0; right:0; bottom:0; text-align: center; background: #E8ECFD; border: 2px solid #E8ECFD; box-shadow:none; border-radius:10px; transition:all 0.3s ease;}
.tech-item .icon { width: 92px; position: relative; margin:5px auto 7px;}
.tech-item .icon img { display: block; width:92px; height:92px; object-fit: contain; object-position: center;}
.tech-item .icon:before { content:''; z-index: 1; display: block; position: absolute; top:0; left:0; width: 100%; height: 100%; background: #C5D0FF; mix-blend-mode:color; opacity: 1;}
.tech-item .caption { font-size:2.3rem; line-height:3.2rem; color: #43475D; font-weight: 600; height: 0; opacity: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition:all 0.3s ease;}
.tech-item:hover .item-inner { background: #fff; border-color:#F7F8FC; box-shadow: 0px 4px 20px rgba(67, 71, 93, 0.07); left:-1rem; right:-1rem; top:-1rem; bottom:-1rem;}
.tech-item:hover .icon:before { opacity: 0;}
.tech-item:hover .caption { height: 3.2rem; opacity: 1;}

.widget { margin-bottom: 4rem}
.widget.action_widget, .widget.footer-widget { margin-bottom: 0;}

.widget_nav_menu .menu li { padding-bottom: 1.5rem;}
.widget_nav_menu .menu li:last-child { padding-bottom: 0;}
.widget_nav_menu .menu li a { color: #A6AAB7;}
@media (hover: hover) {
  .widget_nav_menu .menu li a:hover { color: #7E5AE8;}
}

.comments-form p { margin-bottom: 1rem;}
.comment-form-answer { display: none; margin-bottom: 1rem;}

.fancybox-button.fancybox-button--zoom { display: none !important;}

@media screen and (max-width: 1000px) {
    .admin-bar .header { top:32px;}
    .admin-bar .header .header__nav { top:32px; height: calc(100% - 32px);}
    
    .single-work { min-height: 70rem;}
    .screens-flex .page-preview__thumb img { max-height: 35rem;}
    
    .techs { padding:7rem 0;}
    .tech-item { position: relative; padding-bottom: 85%;}
    .tech-item .icon { width: 70px;}
    .tech-item .icon img { width: 70px; height: 70px;}
    .tech-item .caption, .tech-item:hover .caption { height: auto; opacity: 1;}
}

@media screen and (max-width: 782px) {
    .admin-bar .header, .admin-bar .header.active .header__nav { top:46px;}
    .admin-bar .header .header__nav { top:46px; height: calc(100% - 46px);}
}

@media screen and (max-width: 767px) {
    .page-preview__thumb img { border-radius: 2rem;}
    .masonry-item { width:100%;}
    
    .techs-list .tech-col { width: 50%; flex:0 0 50%;}
    .tech-item { padding-bottom: 66.67%;}
    .tech-item .icon { width: 92px;}
    .tech-item .icon img { width: 92px; height: 92px;}
    
  .widget_nav_menu .footer__title_toggle + div { display: none;}
  .widget_nav_menu .footer__title_toggle.active + div { display: block;}
}
@media screen and (max-width: 640px) {
    .screens-flex .page-preview__thumb img { max-height: 25rem;}
    
    .post__share .ya-share2__list { margin:0 -0.25rem}
    .post__share .ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item { margin:0 0.25rem}
    
    .wpcf7 .input-list .ajax-loader, .wpcf7 .input-list .wpcf7-spinner, .wpcf7 .input-list .input-list__row .ajax-loader, .wpcf7 .input-list .input-list__row .wpcf7-spinner { left:0;}
}
@media screen and (max-width: 540px) {
    .single-work { min-height: 62rem;}
    .techs-list { margin: 0 -1rem;}
    .techs-list .tech-col { padding: 1rem;}
    .tech-item { padding-bottom: 75%;}
    .tech-item .icon { width: 78px;}
    .tech-item .icon img { width: 78px; height: 78px;}
    .tech-item .caption { font-size: 2rem; line-height: 2.8rem;}
    
    .modal_order .title { font-size:3rem;}
}
@media screen and (max-width: 400px) {
    .tech-item { padding-bottom: 85%;}
    .tech-item .icon { width: 70px;}
    .tech-item .icon img { width: 70px; height: 70px;}
}