﻿/* Layout for search container */
.search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:rgb(255 255 255 / 90%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.search{position:fixed;z-index:999999;top:0;left:0;width:100%;height:100vh;}
.search::before, .search::after{content:'';position:absolute;width:calc(100% + 15px);height:calc(100% + 15px);pointer-events:none;}
.search::before{top:0;left:0;border-right-width:0;border-bottom-width:0;}
.search::after{right:0;bottom:0;border-top-width:0;border-left-width:0;}
.btn--search-close{font-size:16px;position:absolute;top:36px;right:36px;display:none;color:#555555;padding:12px;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;font-weight:bold;}
.btn--search-close:hover{color:#000000;background-color:rgba(2, 2, 8, 0.12) }
.btn--search-close{display:block;}
.search__form{margin:5em 0;}
.search__form_true{opacity:0;}
.search__input{font-family:inherit;font-size:6vw;line-height:1;display:inline-block;box-sizing:border-box;width:100%;padding:0.3em 0;color:#11358a;border-bottom:2px solid !important;}
.search__input::-webkit-input-placeholder{opacity:0.3;color:#060919;}
.search__input::-moz-placeholder{opacity:0.3;color:#060919;}
.search__input:-ms-input-placeholder{opacity:0.3;color:#060919;}
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration{-webkit-appearance:none;}
.search__input::-ms-clear{display:none;}
.search__info{font-size:100%;font-weight:bold;display:block;width:100%;margin:0 auto;padding:0.85em 0;text-align:left;color:#11358a;}
.search__related{display:flex;width:73%;pointer-events:none;margin-bottom:128px;}
.search__suggestion{width:50%;text-align:left;padding-right:36px;}
.search__suggestion:nth-child(2){margin:0 3em;}
.search__suggestion h3{font-size:1.35em;margin:0;}
.search__suggestion h3::before{content:'\21FE';display:inline-block;padding:0 0.5em 0 0;}
.search__suggestion p{font-size:14px;line-height:24px;margin:0.75em 0 0 0;color:#333333;}
/************************/
/* Transitions 			*/
/************************/
 .search{pointer-events:none;opacity:0;transition:opacity 0.5s;}
 .search--open{pointer-events:auto;opacity:1;}
/* Border */
.search::before, .search::after{transition:transform 0.5s;}
.search::before{transform:translate3d(-15px, -15px, 0);}
.search::after{transform:translate3d(15px, 15px, 0);}
.search--open::before, .search--open::after{transform:translate3d(0, 0, 0);}
/* Close button */
.btn--search-close{opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s;}
.search--open .btn--search-close{opacity:1;transform:scale3d(1, 1, 1);}
/* Search form with input and description */
.search__form{opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s;}
.search--open .search__form{opacity:1;transform:scale3d(1, 1, 1);}
.search__suggestion{opacity:0;transform:translate3d(0, -30px, 0);transition:opacity 0.5s, transform 0.5s;}
.search--open .search__suggestion{opacity:1;transform:translate3d(0, 0, 0);}
.search--open .search__suggestion:nth-child(2){transition-delay:0.1s;}
.search--open .search__suggestion:nth-child(3){transition-delay:0.2s;}
@media screen and (max-width:40em) {
    .search__form{margin:5em 0 3em;}
    .btn--search-close{font-size:16px;top:1.5em;right:1.5em;font-weight:bold;}
    .search__info{text-align:left;}
    .search__suggestion{font-size:80%;width:100%;padding-right:0px;}
    .search__suggestion:nth-child(2),.search__suggestion:nth-child(3){display:none;}
    .search__related{width:64% !important;}
}
@media (min-width:320px) and (max-width:767px) {
    .search__input{font-size:8vw;}
}