*{margin:0;padding:0;box-sizing:border-box;outline:none}
html{width:100%;height:100%}
body{width:100%;min-height:100%;background:transparent url(../images/logo/srhPeur.jpeg) repeat center center; background-size: cover; font-family:Arial, sans-serif;font-size:15px}
.wrapper{
    width:100%;height:100%;position:relative;
}
.wrapper::before {
    content: '';
    display: block;
    z-index: -1;
    width:100%;height:100%;position:absolute;background:rgba(0,0,0,.5); overflow:hidden;
}
.background {
    position: absolute;
    left: 50%;
    top: 150px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.background > * {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
}
.background img {
    width: 150px;
}
.background .title {
    font-size: 30px;
    color: #fff
}
.height-block{display:flex;align-content:center;justify-content:center}
.search{width:50%;display:flex;align-items:center}
.search .logo{height:150px;display:inline-block;margin-right:40px}
form#search{width:100%;display:flex;height:60px;position:relative}
form#search * {font-size: 16px}
form#search input[type=search]{display:inline-block;width:100%;border-radius:3px 0 0 3px;border:none;padding:5px 15px;background-color:#eee;font-weight:bold;box-shadow:0 0 6px 1px rgba(0,0,0,.14);transition:.3s}
form#search input[type=search]:focus{background-color:#fff;outline:none;box-shadow:0 0 2px rgba(0,0,0,.25) inset}
form#search button{width:20%;position:relative;border:none;border-radius:0 3px 3px 0;cursor:pointer;background-color: #456ca2;text-transform:uppercase;color:#fff;box-shadow:-4px 0 8px 1px rgba(0,0,0,.18);font-weight:bold;z-index:0}
form#search button::before{content:'';display:block;position:absolute;right:100%;top:50%;transform:translateY(-50%);width:0;height:0;border-right:25px solid #456ca2;border-left:17px solid transparent;border-top:30px solid transparent;border-bottom:30px solid transparent;z-index:1;}
form#search button:hover{background-color: #5587cb
}
form#search button:hover::before{border-right-color:#5587cb}
.menu-wrap{position:absolute;top:0;left:0;right:0;z-index:5}
.menu{width:100%;display:flex;justify-content:flex-end;list-style:none;padding:10px 30px}
.menu a{display:inline-block;margin:0 7px;color:rgba(255,255,255,.6);text-decoration:none;font-weight:bold;text-transform:uppercase;padding:5px 10px;border:1px solid rgba(255,255,255,.6);border-radius:2px;font-size:.85em}
.menu a:hover,.menu a.active{border-color:#fff;color:#fff}
.menu a.active{transform:scale(1.18)}
.content{width:80%;margin:0 auto;background-color:#fff;padding:25px 10px;border-radius:5px;box-shadow:0 0 8px 1px rgba(0,0,0,.25)}
.center-align{text-align:center}
h2{margin:0 0 10px}
.content-wrap{margin-top:100px}
.wrap{width:100%;padding-top:80px;margin-bottom:15px}
.mb-15{margin-bottom:15px}
.h-color{color:#456ca2}
p{padding:12px 10px}
p>span{font-weight:bold}
ul{padding:0 30px}
ul li{margin:5px 0}
#result{position:absolute;top:110%;left:0;right:0}
table#detail {width:100%;background-color:#fff}
table#detail th{width:50%;padding:12px 8px;background-color:#456ca2;color:#fff}
table#detail tr th:nth-child(1){border-right:1px solid #fff}
table#detail td{padding:8px;color:#333;border-bottom:1px solid #ccc !important;}
table#detail tr{background-color:#fff}
table#detail tbody tr:hover{background-color:#f1f1f1}
table#detail tbody tr td:nth-child(1){cursor:pointer}
table#detail tbody tr td:nth-child(1):hover{color:#456ca2}
.bold-text{font-weight:bold}
#result {max-height: 300px; overflow-y: scroll}

table#tresult {width:100%;background-color:#fff; text-align: center}
table#tresult th{width:20%;padding:17px 8px;background-color:#456ca2;color:#fff}
table#tresult td{padding:8px;color:#333;border-bottom:1px solid #ccc !important;}
table#tresult tr{background-color:#fff}
table#tresult tbody tr:hover{background-color:#f1f1f1}
.bold-text{font-weight:bold}

@media all and (max-width:1000px){
    .search{width:95%;flex-wrap:wrap;justify-content:center}
}
@media all and (max-width:768px){
    .height-block{flex-wrap:wrap;align-content:flex-start}
    .logo{margin-bottom:10px}
    .menu-wrap{position:static}
    .menu{flex-wrap:wrap;justify-content:space-around}
    .content{width:95%}
    .wrap{padding-top:0}
}
@media all and (max-width:650px){
    .search{}

}
@media all and (max-width:425px){
    .menu{padding:10px}
}