* {
    box-sizing: border-box;
    border: 0;
    padding: 0;
    margin: 0;
}

img {
    display: block;
}

ul {
    list-style-position: outside;
    padding-left: 1em;
}

html {
    color: white;
    background-color: black;
}

body {
    font-family: "Verdana", "Helvetica", "Arial";
    font-size: 16px;
    width: 100%;
    text-align: left;
    line-height: 1.5em;
}

h1, h2, h3, h4 {
    padding-top: 1em;
    padding-bottom: 0.2em;
}

h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter {
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: white;
}
a:hover {
    cursor: pointer;
    text-decoration: underline;
}

button:hover, input:hover, select:hover, textarea:hover {
    cursor: pointer;
}

select, input, button, textarea {
    font-size: 1.0em;
    color: #333;
    background-color:#ddd;
    border: 0;
    border-style: solid;
    border-color: #bbb;
    margin: 0;
    border-radius:0;
    padding: 0.3em;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button {
    border-color: #999;
    box-shadow: 0.1em 0.1em 0.3em;
}

/*select:focus, input:focus, button:focus, textarea:focus { 
    box-shadow: 1px 1px 3px, 1px -1px 3px, -1px 1px 3px, -1px -1px 3px;
    outline: none;
}*/

hr {
    background-color: #ccc;
    height:0.1em;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

b {
    font-weight: bolder;
}

::placeholder, .placeholder {
    color: #333;
}

details summary::-webkit-details-marker {
    display:none;
}

summary {
    color: rgb(30, 98, 208);
}

#pageHeader {
    position:relative;
    min-height: 11em;
}
#backgroundImg {
    height: 50vh;
    width: 100%;
    object-fit: cover;
}



#logo {
    padding-bottom: 0.2em;
    font-size: 1.3em;
    float: left;
}

#logo a {
    color: #ddd;
}
    
#quick-search-bar {
    position: absolute;
    top: 16%;
    left: 10%;
    font-size: 1.3em;
}

#quick-search-text {
    clear:both;
    width: 20em;
    height: 2em;
    padding: 1em;
    background-color: white;
    float: left;
    outline: none;
    cursor: text;
}

#quick-search-submit {
    width: 2em;
    height: 2em;
    background: #ffffff;
    border: none;
    float: left;
    padding: 0.4em;
    outline: none;    
}  

#quick-search-submit img {
    height: 100%;
}


.a_blue {
    color: rgb(30, 98, 208);
}

.center {
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.container-float-spacer {
    clear: both;
}

.avoid-break-inside {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.firstLetterUpperCase::first-letter {
    text-transform: uppercase;
}

.paging-box {
    margin:0.5em;
    text-align: center;
    width:100%;
    clear:both;
    line-height: 1.7em;
}

.root-form {
    background-color: black;
    color: white;
    width: 100%;
    overflow: hidden;
}

.main-content {
    position:relative;
    min-height: 80vh;
    margin-top: 2em;
    margin-bottom: 4em;
}

.hscrollable {
    overflow: hidden;
}

.itemBox {
    width: 20em;
    padding: 0.3em;
    display: block;
    float: left;
    overflow: hidden;
    text-align: left;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    white-space: initial;
}

.itemBoxArticle {
    background-color: rgb(40,40,40);
    position: relative;
    overflow: hidden;
}

.sale .itemBoxArticle {
    height: 35em;
}

.specs .itemBoxArticle {
    height: 35em;
}

.magazine .itemBoxArticle {
    height: 26em;
}

.video .itemBoxArticle {
    height: 20em;
}

.calendar .itemBoxArticle {
    height: 25em;
}

.itemBoxTitleMargin {
    padding: 0.3em;
    width: 100%;
}

.itemBoxTitle {
    height: 3em;
    line-height: 1.5em;
    font-size: 110%;
    width: 100%;
    color: #eee;
    font-weight: bolder;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.itemBoxFigureImage {
    position: relative;
    width: 100%;
}

.itemBoxImg {
    object-fit: cover;
    width: 100%;
    height: 13em;
}

.itemBoxImgDarkener {
    background-color: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.itemBoxImgSmoother {
    display:none;
    position: absolute;
    bottom: 0;
    height: 2em;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(60,60,60,0), rgba(60,60,60,1));
}

.itemBoxNested {
    width:100%;
    color: #ccc;
    
}

.articleBoxFooter {
    clear:both;
    padding: 0.3em;
    line-height: 1em;
    height: 1.6em;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
}

.articleBoxChannelName {
    width: 82%;
    float:left;
    text-align: left;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.articleBoxDetail {
    width: 18%;
    float: right;
    text-align: right;
}


.saleArticleBoxIconsBox {
    clear: both;
    display: block;
    width: 100%;
}

.saleArticleBoxIconFrame {
    float: left;
    width: calc( 100% / 3 );
    text-align: center;
    font-size: 0.9em;
    overflow: hidden;
    padding: 0.3em;
}

.saleArticleBoxIconValue::first-letter {
    text-transform: uppercase;
}

.saleArticleBoxIconFrame img {
    height: 2.5em;
    margin-left: auto;
    margin-right:auto;
}

.saleArticleBoxPrice {
    font-size: 140%;
    font-weight: bolder;
    clear:both;
    padding: 0.3em;
    float:right;
}

.magazinArticleBoxPerexMargin {
    width: 100%;
    padding: 0.4em;
}

.magazinArticleBoxPerex {
    height: 5.05em;
    line-height: 1.3em;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.magazineArticleBoxDate {
    padding: 0.3em;
}

.magazineArticleBoxIcon {
    display: inline-block;
    height: 1.1em;
    float: right;
    padding-right: 0.3em;
}

.geoBox {
    width: 100%;
    clear:both;
    height: 5.4em;
    line-height: 1.2em;
    padding:0.3em;
    overflow:hidden;
    position: relative;
}

.miniMap {
    float: right;
    width:35%;
    height:100%;
}

.addressBox {
    width: 65%;
    overflow: hidden;
    text-align: right;
    padding-right: 1em;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}


.geoMinimapContainer {
    position:relative;
    height:100%;
    overflow:hidden;
    display: inline-block;
}
.geoMinimapImage {
    height:100%;
    display: inline-block;
}
.geoMinimapDot {
    color:red;
    background-color:red;
    position:absolute;
    transform: translate(-50%,-50%);
    width: 0.8em;
    height: 0.8em;
    border-radius: 0.4em;
}

.article-list {
    width: 80em;
    text-align: left;
    overflow: hidden;
    float:left;
    margin-left: calc( 50% - 80em / 2 );
}

.index-sale-wrapper {
    padding-top: 4em;
    padding-bottom: 4em;
    width: 100%;
}

.index-sale-wrapper h1, .index-magazine-wrapper h1, .index-video-wrapper h1{
    text-align: center;
}

.index-magazine-wrapper {
    padding-top: 4em;
    padding-bottom: 4em;
    width: 100%;
}

.index-video-wrapper {
    padding-top: 4em;
    padding-bottom: 4em;
    width: 100%;
}

.about a, .admin a {
    text-decoration: underline;
}

.about input, .admin input, .admin textarea {
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.about button, .admin button {
    width: 8em;
    max-width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.admin {
    overflow: auto;
}

.admin tr {
    background-color: black;
}
.admin tr:nth-child(even) {
    background-color: #999;
}

.admin td {
    padding: 5px;
    margin: 5px;
}

.admin thead td {
    background-color: darkblue;
}

.divHorizontalCenter {
    text-align: center;
    display: inline-block;
}

.filter-box {
    background-color: rgb(30,30,30);
    width: 60em;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
    padding-top: 1em;
    text-align: center;
}

.filter-box h3 {
    padding-top:2em;
}

.filter-fields {
    text-align: left;
    width: 100%;
    -webkit-column-count:3;
    -moz-column-count:3;
    column-count: 3;
}

#sale-filter-advanced .filter-fields {
    padding-top:3em;
}

.filter-box .submit-frame {
    width: 8em;
    padding: 0.3em;
    display: inline-block;
}
.filter-box .input-frame {
    width: 50%;
    padding: 0.3em;
    display: block;
    float:left;
}
.filter-box .input-frame-caption {
    color:#aaa;
    padding: 0.3em;
    padding-left: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.input-frame-caption::first-letter {
    text-transform: uppercase;
}

.filter-box .checkbox-frame {
    width: 100%;
    padding: 0.3em;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.filter-box .checkbox-margin {
    float:left;
    padding: 0.3em;
}

.filter-box .filter-input {
    width: 100%;
}

.filter-tail {
    clear:both;
    padding-top: 2em;
    text-align: right;
}

.filter-sort-input {
    padding: 0.3em;
    width: 8em;
}

.filter-advanced-button {
}

.main-language-box {
    float: right;
    padding-top: 1em;
    padding-bottom: 1em;
}

.makeBox {
    width: 10em;
    height: 13em;
    padding: 0.3em;
    display: block;
    float: left;
    overflow: hidden;
    text-align: left;
    white-space: initial;
}

.makeBoxContent img {
    width: 10em;
    height: 8em;
    object-fit: cover;
}

.makeBoxPlaceholderWrapper {
    font-size: 200%;
    line-height: 1.3em;
    height: 4em;
    position: relative;
}

.makeBoxImgPlaceHolder {
    color: black;
    text-align: center;
    position: absolute;
    top:50%;
    transform: translateY(-50%);    
    width: 100%;
}

.makeBoxContent {
    widht: 100%;
    height: 100%;
    background-color: #ddd;
}

.makeBoxText {
    padding-top: 0.5em;
    height: 4.5em;
    color: black;
    text-align: center;
    overflow: hidden;
    background-color: #999;
}



.footer-text {
    clear:both;
    background-color: #222;
    color: #ddd;
    text-align: center;
    padding: 0.5em;
}

.footer-text a {
    color: #ddd;
}

#drop-menu {
    display: none;
    text-align: left;
}

.quick-search-box {
    clear: both;
    width: 50%;
    padding-top:0.2em;
    margin-left: auto;
    margin-right: auto;
}

.quick-search-input {
    width: 75%;
    float: left;
}

.quick-search-button {
    float: left;
    width: 25%;
}

.button_like_style {
    color: #333;
    background-color:white;
    margin: 0.15em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.image_youtube_iframe {
    width:640px;
    height:480px;    
}


.image_inner_top_left, .image_inner_top_right, .image_inner_bottom_right, .image_inner_bottom_left {
    position:absolute;
    word-wrap: normal;
    overflow: hidden;
    text-overflow: hidden;
    display: block;
    color: white;
    text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000;          
    padding: 0.3em;
}
.image_inner_top_left {
    left:0;
    top: 0;
}
.image_inner_top_right {
    right:0;
    top: 0;
}
.image_inner_bottom_left {
    left:0;
    bottom: 0;
}
.image_inner_bottom_right {
    right: 0;
    bottom: 0;
    text-align: right;
}

.icon {
    width: 1.8em;
    height: 1.2em;
}

.main-menu {
    clear: both;
    list-style-type: none;
    overflow: hidden;
    background-color:initial;
    display:block;
    width:auto;
    padding-left: 0;
    padding-top: 0.7em;
}
.main-menu-item {
    float: left;
    display: block;
    text-align: center;
    padding-left: 0;
    padding-right: 1em;
    text-decoration: none;
    line-height: 1.7em;
}
.main-menu-active {
    font-weight: bolder;
}

.menu-item {
    color: #ccc;
    white-space: nowrap;
    text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000;          
}

.main-menu-item::first-letter {
    text-transform: uppercase;
}
.detail-title {
    line-height: 1.4em;
}

.article-detail-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    max-width: 80em;
}

.articleDetailIcons {
    padding-top: 1em;
    
}

.articleDetailPreview {
    max-width: 100%;
}

.detailMiniMap {
    position: relative;
    height: 6em;
}

.saleDetailPrice {
    padding-top: 1em;
    font-size: 180%;
}

.saleDetailSeller {
    padding-top: 2em;
    padding-bottom: 2em;
}

.saleArticleDetailIconFrame {
    float: left;
    width: 7em;
    text-align: center;
    overflow: hidden;
    padding: 0.3em;
    font-size: 110%;
}

.saleArticleDetailIconFrame img {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.detail-others table {
    max-width: 100%;
}

.detail-others td {
    padding-right: 2em;
}

.detail-perex {
    font-size: 130%;
}

.docs-article-list {
    clear: both;
    width: 100%;
    padding: 0.7em;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count: 2;
}

.docsItemBoxImg {
    width: 100%;
}

.docsItemBox {
    width:100%;
    float:left;
    padding: 0.7em;
}

.docsItemBoxArticle {
    background-color: rgb(40,40,40);
    width: 100%;
    position: relative;
}

.docsItemBoxArticleInfo {
    padding: 0.3em;
}

@media only screen and (max-width: 679px) {
    body { font-size: 3.5vw; }
    .filter-box {
        width: 92%;
        margin-left: 4%;
    }
    .filter-fields {
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count: 1;
    }
        
    .image_youtube_iframe { width: 100%; height: 220px; }

    #backgroundImg { height: 18em; }
    
    .mobile-articlebox-original-size .itemBoxImg { height: auto; }
    .mobile-articlebox-original-size .itemBoxArticle { height: auto;}
    .mobile-articlebox-original-size .articleBoxFooter { position: initial; bottom: initial; }
    
    .article-list {
        margin: 0;
        font-size: 120%;
        width:20em;
        margin-left: calc( 50% - 20em / 2 );
    }
    
    .docs-article-list {
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count: 1;
    }    
    
    .itemBox { padding-bottom: 2em;}

    .hscrollable { overflow-x: scroll; }
    .hscrollable .article-list {
        white-space: nowrap;
        width: auto;
        margin: 0;
    }
    .hscrollable .itemBox {
        display: inline-block;
        float: none;
        padding-bottom: 0;
    }

    #quick-search-bar {
        left: 0;
        top: 0;
        width: 100%;
        padding: 0.6em;
    }

    #quick-search-text {
        width: calc( 100% - 2em );
    }
}

@media only screen and (min-width: 680px) and (max-width: 999px) {
    .filter-box {
        width: 40em;
    }
    .filter-fields {
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count: 2;
    }
    
    .article-list {
        width: 40em;
        margin-left: calc( 50% - 40em / 2 );
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1319px) {
    .article-list {
        width: 60em;
        margin-left: calc( 50% - 60em / 2 );
    }
}

@media only screen and (min-width: 1320px) {
    .article-list {
        width: 80em;
        margin-left: calc( 50% - 80em / 2 );
    }
    
    .docs-article-list {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count: 3;
    }    
}