﻿ html,body{height:100%;min-height:100%;font-family:Arial,Helvetica,sans-serif;font-size:13px}
header,header mark,.searchBar .searchWrap,.searchBar .drop,#formBox,.closeme,#registration .goPrev,#registration .button,#registration .goNext,figure#picWall .profile span.img,figure#picWall .profile img{transition:.4s}
.hidden,.px1{display:none}img{border:0}ul{list-style-type:none;margin:0;padding:0}
.showMeReg,#baseGrid aside.categorys div a,.laststeps{cursor:pointer}header{display:inline-block;width:100%}
header .logo{position:relative;display:inline-block;max-width:450px;vertical-align:bottom;margin:20px 20px 0}
header .logo img{width:100%}header .logo mark{position:absolute;display:inline-block;top:0;right:0;margin:4% 7%;font-size:2rem;font-weight:bold;background-color:transparent}
header .logo h2{font-size:1.3rem;margin:0}header nav{display:inline-block;float:right;white-space:nowrap;margin:2%}
header nav a{font-size:1.3rem;padding:0 10px;color:#06E;text-decoration:none}header nav a:hover{text-decoration:underline}
#baseGrid{margin:0 auto;max-width:1000px}.searchBar{clear:both;display:block;padding:.3%}
.searchBar .input,.searchBar .drop,.searchBar .setAd,.searchBar .profile,.searchBar .btn{font-size:1.1rem;line-height:2.5rem}
.searchBar .input{padding:0 4%;margin:0;white-space:nowrap;cursor:text;border-radius:4px 0 0 4px}
.searchBar .input:hover{background:#FFF}
.searchBar .drop{margin:0;padding:0 25px;cursor:text;border-radius:0 4px 4px 0;background:#DDD}
.searchBar .drop:hover{background:#DDD}
.searchBar .setAd{display:inline-block;margin:0 1% 0;padding:0 10px;background:no-repeat left center;background-size:23%}
.searchBar .profile{display:inline-block;margin:0 1% 0;padding:0 0 0 26px;background: no-repeat left center;background-size:34%}
.searchBar .btn{display:inline-block;padding:0 15px;border-radius:4px;box-shadow:inset 0 -3px 0 0 #014d9f;background:#06D no-repeat 10px center;background-size:20%;width: 80%}
.searchBar .btn:hover{background-size:22%}#baseGrid aside.categorys{display:inline-block;float:left;width:25%;min-width:100px}
#baseGrid aside.categorys div{margin:5%;padding:5%;overflow:hidden}#baseGrid aside.categorys div h4,aside.categorys div h5{margin:0 0 3%;font-size:1.2rem}
#baseGrid aside.categorys div a{display:block;padding:0 5%;font-size:1.1rem;overflow:hidden}
#baseGrid aside.categorys div.boxes a{display:inline-block;margin:1.5%;padding:4% 5%;border-radius:4px}
#baseGrid aside.categorys div.boxes a:hover{text-decoration:none}#baseGrid aside.categorys div a:hover{text-decoration:underline}
#baseGrid aside.categorys hr{height:1px;margin:15px 0;border-width:0}#baseGrid{width:950px;margin:0 auto}
figure#picWall .areaBox{display:block;float:left;width:98%;padding:.5%}figure#picWall .areaBox h2{padding:0;margin:.5% 1%;font-size:1.5rem;font-weight:normal;text-align:left}
figure#picWall{display:inline-block;width:75%;margin:0;padding:1% 0 0;text-align:center}
figure#picWall div.profile{position:relative;display:inline-block;vertical-align:top;width:29%;margin:1%;padding:1%;text-align:left}
figure#picWall .info{display:block;width:100%;padding:1% 0}figure#picWall .info p{display:inline-block;height:4rem;font-size:1rem}
figure#picWall .info p span{position:absolute;bottom:5px;right:5px;font-size:1.1rem;font-weight:bold}
figure#picWall .areaBox .info p{height:5rem}figure#picWall h3{font-size:1.1rem;padding-bottom:3%;margin:0;font-weight:bold}
figure#picWall .profile span.img{display:block;height:13rem;overflow:hidden}figure#picWall .profile img{position:relative;bottom:0;width:100%;border-radius:4px 4px 0 0}
figure#picWall .profile img:hover{bottom:5%}figure#picWall .profile .ribbon{display:inline-block;padding:2px 6px;position:absolute;max-width:100px;right:-6px;top:10%;font-weight:bold;text-align:right;font-size:13px}
figure#picWall .profile .ribbon:after{content:' ';position:absolute;width:0;height:0;right:0;top:19px;border-width:3px 3px;border-style:solid}
#footer{clear:both;display:block;margin:0 auto;padding:5px 0 10px;text-decoration:none;font-size:1rem;text-align:center}
#footer a{text-decoration:none}#footer a:hover{text-decoration:underline}#regForm .hidden{display:none}
#regForm{position:fixed;z-index:10;width:100%;top:0;min-height:100%;background:rgba(0,0,0,0.8)}
#formBox{width:390px;max-width:90%;min-height:28rem;padding:0;position:absolute;text-align:center;top:15%;left:50%;margin-left:-195px;z-index:2;box-shadow:0 0 40px #000}
#regForm h2{font-weight:initial;font-size:1.8rem}#regForm .formHeader{display:block;text-align:right;padding:2%}
#regForm .closeme{display:inline-block;padding:5px 10px;margin-left:5px;font-weight:bold;font-size:.9rem;text-align:center;cursor:pointer}
@media screen and (max-width:1015px){#baseGrid{width:100%}}@media screen and (max-width:800px){figure#picWall .profile span.img{height:10rem}
}@media screen and (max-width:640px){#regForm .closeme{margin-left:30px}.searchBar .input,.searchBar .drop,.searchBar .setAd,.searchBar .profile,.searchBar .btn{font-size:1.1rem;line-height:2.5rem}
figure#picWall .areaBox .info p,figure#picWall .info p{min-height:8rem}
figure#picWall .profile span.img{height:9rem}}@media screen and (max-width:540px){body{font-size:12px}#formBox{width:100%;margin-left:-45%;top:5%}
.searchBar{margin:0}.searchBar .setAd,.searchBar .profile{font-size:1rem;line-height:2.3rem}
figure#picWall div.profile{width:43%;margin:1%;padding:2%}figure#picWall .areaBox div.profile:last-child{display:none}
}@media screen and (max-width:490px){body{font-size:11px}header .logo mark{font-size:1.8rem;margin:5% 8%}
header .logo h2{font-size:1.1rem}header nav{display:block;float:none;margin:4% auto 0;text-align:center}
#formBox{top:3%}figure#picWall{width:74%}
.searchBar .btn{width:80%;font-size:2rem;line-height:3rem;margin:1% 0;background-size:10%;background-position:25% center}
.searchBar .btn:hover{background-size:12%}
}@media screen and (max-width:410px){header .logo mark{font-size:1.6rem;margin:4% 6%}
header .logo h2{font-size:1.1rem}#baseGrid aside.categorys{display:none}figure#picWall{width:100%}
figure#picWall .areaBox{width:99%}figure#picWall .profile span.img{height:10rem}
}@media screen and (max-width:320px){header .logo mark{font-size:1.3rem;margin:5% 8%}
}

.searchBar .searchWrap {
    margin:0 auto;
    max-width:940px;
    font-size:0;
    display:flex;
    flex-direction: column;
}
.searchBar .searchWrap span {
    padding:4px;
    margin:5px;
    white-space:nowrap;
    display: flex;
    text-align: center;
    justify-content: center;
}
.searchBar .input,
.searchBar .drop {
    flex-grow: 1; 
}
.searchBar .searchWrap span:last-child {
    flex-grow:1;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
}

header nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

header nav a {
    display: block;
}

@media (min-width: 768px) {
    .searchBar .searchWrap {
        flex-direction: row;
        flex-wrap: wrap;
    }

    header nav {
        flex-direction: column;
        align-items: flex-end;
    }
}
@media (min-width: 1024px) {
    .searchBar .searchWrap {
        flex-wrap: nowrap;
        padding-left: 3px;
    }
    .searchBar .input {
        min-width: 7.5em;
    }
    header nav {
        margin: 2% 0;
    }
    header nav a {
        padding: 0 5px;
    }
}