@import url("mainColors.css?v1.700");
@import url("header.css?v1.700");
@import url("gallery.css?v1.700");
@import url("video.css?v1.700");
@import url("blog.css?v1.700");

html{
    background:#f0f0f0;
    background-image: url(img/body_bg.jpg);
    background-size: 500px;
}

body{
    background:#f0f0f0;
    background-image: url(img/body_bg.jpg);
    background-size: 500px;
    display:none;
    overflow-x: hidden;
}
button{
    cursor: pointer;
}
/* Overrides */
.lead{
    font-weight: 350;
}
.dropdown-menu .nav-link{
    white-space: nowrap;

}
/* Main */
#pageContent{
    padding-top: 2.5em;
    min-height: 100%;
}
.container-fluid{
    min-height:100%;
}
.mainPageContent{
    z-index:0;
    padding-top: 3em;
    padding-bottom: 3em;
    background:#ffffff;
    background-image: url(img/page_bg.jpg);
    min-height: 100%!important;
}
.realPageContent{
    min-height: 100%;
}
/* Footer */
.footer{
    background-image: url(img/footer.png);
    background-size: 40em;
    background-repeat: no-repeat;
    height: 10em;
    width: 100%;
    background-position-x: center;
    display: flex;
    align-items: end;
    justify-content: center;
}
.footer .content{
    color: #8c8c8c;
    margin-bottom: 2em;
}
/* Content Base */
.part {
   display: block;
}
.part .videoTitle.over{
    margin-top: 1em;
}
.part .videoTitle.below{
    margin-bottom: 1em;
}
.bottomMargin-1{
    margin-bottom:1em;
}
.bottomMargin-2{
    margin-bottom:2em;
}



/* -------------------------------------------------------------------------------------------------- Menu */
.nav-link.active{
    font-weight:bold;
    color:var(--arx-media-bd-color)!important;
}
.nav-item .dropdown-item.active, .nav-item .dropdown-item:active{
    background-color:#ffffff!important;
    font-weight:bold!important;
    color:var(--arx-media-bd-color)!important;
}

.nav-item ul{
    padding-inline-start:0
}
.nav-item li{
    margin-left: 0.5em;
    list-style: none;
}
.nav-item .subsub.nav-link{
    display: block;
    padding-left: 1.5em;
}



/* Content */
.asTitle{
    color:var(--arx-media-bd-color);
    font-size: 1.5em;
}
.asMainTitle{
    margin-top:1em;
    margin-bottom:2em;

}
.alignCenter{
    text-align:center;
}
.alignRight{
    text-align:right;
}
.italic{
    font-style:italic;
}
.justified{
    text-align: justify;
}
.marginTop{
    margin-top:1em;
}
.marginBottom{
    margin-bottom:1em;
}
.centerBlock{
    margin-left: auto;
    margin-right:auto;
}
.centerCell > div{
    margin-left: auto;
    margin-right: auto;
}
.centered{
    margin-left:auto;
    margin-right:auto;
}
.weightNormal{
    font-weight: normal;
}
.mainPageContent h1{
    text-align: center;
    border-bottom: 1px solid;
    margin-bottom: 1em;
    padding: 0.5em;
}
.mainPageContent h1 img{
    max-height: 2em;
}
.mainPageContent h2{
    font-size: 1.5em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    border-bottom: 1px dotted #808080;
    margin: 0 0 1em 0;
    color: var(--arx-media-bd-color);
}
.mainPageContent h3{
    font-size: 1.2em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    margin: 0 0 1em 0;
    color: var(--arx-media-bd-color);
}
.mainPageContent h3.subTitle{
    border-bottom: 1px dotted #b0b0b0;
}
.line{
    height: 1em;
    border-bottom: 1px dotted #b0b0b0;
}
.line.orange{
    border-bottom: 1px solid var(--arx-media-bd-color)
}
/* Layout */
.mainPageContent .fitImage img{
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
.mainPageContent .fitImage-90 img{
    max-width: 90%;
    height: auto;
    text-align: center;
    max-height: 100%;
}
.mainPageContent .fitImage-80 img{
    max-width: 80%;
    height: auto;
    text-align: center;
    max-height: 100%;
}
.mainPageContent .fitImage-70 img{
    max-width: 70%;
    height: auto;
    max-height: 100%;
}

.textPart p{
    margin:0!important
}

.textPart.summary{
    font-size: 1em;
    color: #808080;
}
/* Medias */

.isolatedImageContainer {
    display: inline-flex;
    align-items: flex-start;
}
.isolatedImageContainer img {
    border: 3px solid #ffffff;
    display: block;
    border-radius: 0.5em;
    box-shadow: 0px 0px 22px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.isolatedImageContainer.black img {
    border-color:#000000;
}
@media (max-width: 768px) {
    .isolatedImageContainer img {
        margin-bottom:1em;
        max-width: 80%;
    }

}


.imageSubtitle{
    background: #c84300;
    color: #ffffff;
    display: inline-block;
    padding: 0 1em 0.25em 1em;
    border-radius: 0 0 0.25em 0.25em;
    border: 1px solid #9fa2a1;
    position: relative;
    z-index: 0;
}
@media (max-width: 768px) {
    .imageSubtitle{
        position: relative;
        top: -1em;
    }
}
/* News */
.news{
    width: 100%;
    margin-bottom: 1em;
}

.news .newsHeader{
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--arx-media-bd-color);
    margin-bottom: 0.25em;
    padding-bottom: 0.25em;
}
.news .newsContent{
    display: flex;
    align-items: start;
    width: 100%;
}
.news .newsContent .imgContainer{
    border-radius: 0em 5em 5em 5em;
    background: var(--arx-media-bd-color);
    padding: 0.25em;
    text-align: right;
}
.news .newsContent img{
    max-height:4em;
    border-radius: 5em;
    border: solid 2px #ffffff;
}

.news .newsHeader h3{
    padding-bottom: 0;
    padding-top: 0;
    margin: 0 0 0 0;
}
.news .newsHeader h3 .category{
    font-size: 0.75em;
    color: #000;
}

.news .link{
    display: flex;
    align-items: start;
    gap: 1em;
    margin-bottom: 0.25em;
}

.news .link .icon, .row.iconLinkContainer .icon{
    font-size: 1em;
    padding: 0.4em;
    /* background: #ffffff; */
    border-radius: 2em;
    color: #c84301;
    text-align: center;
}
.newsLink{
    flex-wrap: nowrap;
}
.notAvailable{
    background: var(--arx-media-bd-color);
    color: #ffffff;
    padding: 0.1em 0.5em 0.25em 0.5em;
    border-radius: 0.5em;
    display: inline-block;
    transform: rotate(349deg);
    font-size: 0.8em;
    margin-right: 0.5em;
}
.row.iconLinkContainer{
    align-items: start;
    margin-bottom: 1em;
}
@media (min-width: 768px) {
    .row.iconLinkContainer{
        margin-bottom: 0;
    }
}
@media (min-width: 768px) {
    .row.iconLinkContainer{
        align-items: center;
    }
}
/* Forms */
label{
    font-weight: bold;
    padding-left: 0.5em;
    font-style: italic;
}
form ::placeholder {
    color: blue;
    font-size: 0.9em;
  }
form button{
    background-color: var(--arx-media-bd-color)!important;
    border-color: var(--arx-media-bd-color)!important;
}
form .form-group button{
    margin-top: 0;
    width: 100%;
}
.validation .error, .contactValidation .error{
    font-style: italic;
    color:#a00000;
}
.status.inForm, .validation.inForm{
    display: block;
}
.status.outForm, .validation.outForm{
    display: none;
}
@media (min-width: 768px) {
    .inFormStatus{
        display: none;
    }
    .status.outForm, .validation.outForm{
        display: block;
    }
    form .form-group button {
        margin-top: 2em;
        width: 100%;
    }
}
.status .error, .contactStatus .error{
    background: #a0000080;
    padding: 1em;
    border-radius: 0 0.5em 0.5em;
    border: 1px solid #a00000;
    font-weight: bold;
}
.status .success, .contactStatus .success{
    background: #00a00080;
    padding: 1em;
    border-radius: 0 0.5em 0.5em;
    border: 1px solid #00a000;
    font-weight: bold;
}
/* languageSelector */
.languageSelector a{
    cursor:pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Links */
.mainPageContent a.txtLink{
    position: relative;
    /* left: -0.5em; */
    /* top: calc(-0.6em/2 - 2px); */
    /* top: calc(0.6em/2 - 3px); */
    top: calc(0.6em/2 + 0px);
    /* display: inline-flex; */
    color: var(--arx-media-a-color);
    font-weight: 350;
    padding: 0.1em 1em 0.25em 2em;
    border-radius: 0.5em;
    /* line-height: 0; */
    margin-bottom: 0.25em;
    border: 1px solid #0085c800;
    border-left: 0 none;
    /* border-width: 3px; */
    /* border-style: solid; */
    background: linear-gradient(90deg, #0085c800 25%, #0085c810);
    cursor: pointer;
}
.mainPageContent a.txtLink:hover{
    text-decoration: none;
    color: var(--arx-media-a-color);
    border: 1px solid #d0d0d0;
    background: #0085c81a;
}
.mainPageContent a.txtLink:before {
    position: absolute;
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    left: 0.5em;
    top: 0.2rem;
    /* top: 50%; */
}
.mainPageContent a.txtLink:hover:before{
    content: "\f101";
    left: 0.75em;
}

.bordersContainer{
    z-index: -1;
    opacity: 0;
}
.bordersContainer.ready{
    opacity: 0.8;
    transition: opacity 4s;
}
.bordersContainer.hiddenBorders{
    visibility: hidden;
}
.border-left{
    display:none;
    position: absolute;
    background-image: url(img/border.jpg);
    background-position-x: center;
    width: 25px;
    height: 25px;
    top: 5em;
    left: 30px;
    opacity: 0.5;
}

.inlineButton{
    position: relative;
    /* left: -0.5em; */
    /* top: calc(-0.6em/2 - 2px); */
    /* top: calc(0.6em/2 - 3px); */
    display: inline-flex;
    color: var(--arx-media-a-color)!important;
    font-weight: 350;
    padding: 0.25em;
    border-radius: 0.5em;
    /* line-height: 0; */
    /* margin-bottom: 0.25em; */
    border: 1px solid #0085c800;
    /* border-left: 1px transparent; */
    /* border-width: 3px; */
    /* border-style: solid; */
    background: linear-gradient(90deg, #0085c800 25%, #0085c810);
    cursor: pointer;
}
.inlineButton:hover{
    color: var(--arx-media-a-color);
    border: 1px solid #d0d0d0;
    background: #0085c81a;
}

.orangeBox{
    background: #c84300;
    color: #ffffff;
    padding: 0.5em;
    border-radius: 0.25em;
}
.iframeContainer iframe {
    border-radius: 0.5em;
    /* border: 1px solid #ff8000!important; */
    /* margin:  2px; */
}

.steamIcon {
    font-size: 2em;
}

.isolatedLink{
    margin: 0.5em auto;
    border: 2px solid #1b387d;
    border-radius: 0.5em;
    padding: 0.5em;
    background: #1b387db0;
    color: #ffffff;
}
.isolatedLink a, .isolatedLink a:hover, .isolatedLink a:visited{
    color: #ffffff;
}




/* new for presskit */

.colorBlack{
    color: var(--arx-media-black);
}

.asPageMainTitle{
    font-size:2em;
    border-style: solid;
    border-width:1px 0;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 0.5em 0
}

.importantText{
    font-size: 1.25em;
    font-weight:bold;
}

.justify{
    text-align: justify;
}

.keyWords{
    color: #000000;
    font-weight: 400;
}

table{
    margin-bottom: 1em!important;
}
table{
    width: 100%;
}
.featuresTable{
    background: #a8a8a820;
    margin: 0 auto;
    border-radius: 0.25em;
}
.featuresTable tr{
    border-bottom: 1px dotted;
}
.featuresTable tr:last-child{
    border-bottom: 0 none;
}
.featuresTable td{
    vertical-align:top;
    padding:1em;
    color: var(--arx-media-bd-color);
    font-weight: bold;
    width:30%;
}
.featuresTable td+td{
    color: var(--arx-media-black);
    font-weight: normal;
    width:70%;
}
.featuresTable ul{
    list-style:none;
    padding: 0;
}
.featuresTable li:before{
    content: "»";
    padding: 0 0.5em 0 0;
    color: var(--arx-media-bd-color);
    font-size: 1.5em;
    margin: 0;
    line-height: 0;
}
.featuresTable li{
    
}

.infosTable{
    margin: 0 auto;
    /* border:1px solid; */
    text-align: center;
}
.infosTable tr:first-child{
    color: var(--arx-media-bd-color);
}
.infosTable tr{
    border-bottom: 1px solid;
}
.infosTable tr:last-child{
    border-bottom: 1px solid;
}
@media (max-width: 360px) {
    .infosTable tr:last-child{
        border-bottom: 0 none;
    }
}
.infosTable tr+tr{
    border: 0 none;;
}
.infosTable td{
    width: 50%;
    padding: 1em;
}
.techTable td{ 
    width:30%;
    color: var(--arx-media-a-color-dark);
}
.techTable td+td{ 
    width:70%
}
.techTable li:before{
    color: var(--arx-media-a-color-dark);
} 

.imagesTable{
    width:100%;
    text-align: center;
}
.imagesTable td{ 
    width:50%;
}

.imagesTable img{
    max-width: 90%;
}


.summaryTable{
    margin: 0 auto;
    border:0 none;
    font-size:1em;
}

/* icons */
.summaryTable .fa-solid, .summaryTable .fa-brands {
    font-size: 1.5em;
    color: var(--arx-media-bd-color);
}
.summaryTable td{
    padding-bottom:1em;
}
.summaryTable td{
    width:25%;
}
.summaryTable td+td{
    width:25%;
    text-align:center;
    /* padding-left:5%;
    text-align: left; */
}
@media (max-width: 768px) {
    
    .summaryTable td{
        width:0%;
    }
    .summaryTable td+td{
        width:30%;
    }
    .summaryTable td+td+td{
        width:70%;
    }
}
.summaryTable td+td+td{
    text-align: left;
    width:50%;
}
.qrCode{
    max-width: 80%;
    max-height: 200px;
}


.printOnly{
    /* display:none; */
    visibility: hidden;
    display: none;
}

button.download:hover{
    border: 3px solid var(--arx-button-border-bd-color);
}

button.download{
    /* border: 3px solid var(--arx-button-border-bd-color); */
    border: 3px solid var(--arx-button-bd-color);
    border-radius: 1em;
    color: #000000;
    padding: 0.25em 0.5em;
    background: var(--arx-button-bd-color);
    /* font-weight: bold; */
}

.printFooter{
    display: none;
}

.steamHashTag{
    font-size: 1.25em;
    border: 1px solid #000000;
    padding: 0.5em;
    border-radius: 0.25em;
    background: #d0d0d0;
    color: blue;
}
@media print {
    .noPrint, #mainHeader, .bordersContainer, .footer {
        visibility: hidden;
        height:0;
        width:0;
    }
    .printOnly{
        display: block;
        visibility: visible;
    }
    #pageContent{
        padding-top: 0!important;
    }
    .printFooter{
        display: inline-block;
        width: 100%;
        position: fixed;
        text-align: right;
        padding-right: 2em;
        margin: 1em auto;
        bottom: 1em;
        /* width: 100%;
        height: 2em;
        display: block;
        overflow: hidden;
        position: fixed;
        bottom:1em;
        left:0;
        right:0;
        border-top: 1px solid #f0f0f0;
        text-align: right; */
    /* z-index: -1; */
    /* margin: 0 2em; */
    /* opacity: 0.1;
    position:fixed; */
    /* bottom: -50em; */
    }
    html, body, .mainPageContent{
        background-image:unset!important;
        background :#ffffff
    }
    
    .techTable td{ 
        width:30%;
        color: var(--arx-media-a-color-dark);
    }
    .techTable td+td{ 
        width:70%
    }
    .pageBreak { break-after: page; }
}

.sm-display{
    display:none;
}
.sm-no-display{
    display:block
}
@media (max-width: 600px) {
    
    .sm-no-display{
        display:none!important;
    }
    .sm-display{
        display:block!important;
    }
}