﻿/* artTable */
.mob-hidden { display:none;}

.float-subjects-2 ul{width:100%; margin:0; padding:0; display:inline-block;}
.float-subjects-2 ul li { padding:0 0 0 3%; }


ul.artTable {width:100%; margin:0; padding:0; display:inline-block; list-style: none;}
ul.artTable li {list-style: none;    float:right; display:inline-block; margin:0 0 35px 36px; }
ul.artTable li:nth-child(3n+3){margin-left: 0}

.artBox{ padding: 0; height:340px; }
.artOpen,.artClose{ width: 100%; height:100%; box-sizing: border-box; position: absolute;}
.artOpen{background-color: #ffcd32; display:none; bottom:0;}
.artClose{background-color: #f0f2f5; }

.artText{ padding: 20px 15px; position: absolute; width: 100%; bottom: 0; background-color: #f0f2f5;}
.artClose img{ width: 100%; max-width:510px; height: auto; max-height:340px; margin:auto; display:block;}
.artOpenText{ padding: 30px 15px 20px 15px;}
.artOpen .locationIcon{ font-size: 19px; color: #3c3c3c; display:inline-block; vertical-align: middle;}
.artOpen .locationIcon:hover, .artOpen .locationIcon:focus, .artOpen .locationIcon:active{color:#000000}
.line { padding-bottom:10px;}
.artRightText{font-family: 'blenderBold', Arial, sans-serif; font-size: 15px; line-height:15px; color: #3c3c3c; padding-left:10px; width:100px; float:right;}
.artLeftText{font-family: 'blenderRegular', Arial, sans-serif; font-size: 19px; line-height:19px; color: #3c3c3c; overflow:hidden; }

.artText dl,
.artOpenText dl{padding:6px 0; margin:0 }
.artText dt,
.artOpenText dt{font-family: 'blenderBold', Arial, sans-serif; font-size: 15px; line-height:25px; color: #3c3c3c; padding-left:10px; width:100px; float:right; font-weight: normal;}
.artText dd,
.artOpenText dd{font-family: 'blenderRegular', Arial, sans-serif; font-size: 17px; line-height:25px; color: #3c3c3c; overflow:hidden; }

.artOpenText dt, .artOpenText dd{line-height: 27px}

.artOpenBtn, .artCloseBtn{ height: 35px; width: 35px; position: absolute;left: 0;bottom: 0; text-align:center;}
.artOpenBtn{ background-color: #3c3c3c;}
.artOpenBtn:hover, .artOpenBtn:focus, .artOpenBtn:active{background-color: #000000;}
.artOpenBtn:hover span, .artOpenBtn:focus span, .artOpenBtn:active span { color:#f7b10b;}

.artCloseBtn{ background-color: #ffcd32;}
.artOpenBtn span{ color:#ffcd32; font-size:18px; line-height:36px;}
.artCloseBtn span{ color:#3c3c3c; font-size:22px; line-height:36px;}
.artOpenBtn span:before{ content: "w";font-family: 'tlv';}
.artCloseBtn span:before{content: "v";font-family: 'tlv';}
.artCloseBtn:hover, .artCloseBtn:focus, .artCloseBtn:active{ background-color: #3c3c3c;}
.artCloseBtn:hover span, .artCloseBtn:focus span, .artCloseBtn:active span{ color:#ffcd32;}

/* artTableMore */
.artTableMore{display: none; position: relative}

/* showMoreDetails */
.showMoreDetails{ background-color: #ffcd32; margin: 0 auto; padding:10px 30px ; font-family: 'blenderBold', Arial, sans-serif; font-size: 17px;color: #3c3c3c; border: none; border-radius: 5px; margin-bottom: 25px; display:block;}

/*scrollToTableTop*/
.scrollToTableTopWrap { display:none;}
.scrollToTableTop{ background-image:url(../img/arrow_up2x.png); background-position:center center; background-repeat:no-repeat; background-size:20px 20px; background-color:#3c3c3c; height:50px; width:50px; border-radius:50%; box-shadow:0 0 10px rgba(0,0,0,0.20); cursor: pointer; position: fixed; bottom: 20px; z-index: 500;}


@media (min-width: 768px) {
    /* artTable */
    .mob-hidden { display:block;}
    /*.artTable .artBox:first-child {margin: 0}*/

    .artClose img{ width: 100%;  height: auto;}
    .artBox{  height: 220px;  width: 190px; /*margin-right: 38px; margin-bottom: 38px; */}
    .artClose, .artOpen{height: 100%;}
    .line { padding-bottom:0px;}
    .artText{ padding:10px;}
    .artOpenText{ padding: 15px 10px;}
    .artRightText{font-size: 12px; color: #3c3c3c; width:70px; }
    .artLeftText{font-size: 15px; color: #3c3c3c; }
    .artText dt, .artOpenText dt{font-size: 12px; color: #3c3c3c; width:70px; }
    .artText dd, .artOpenText dd{font-size: 15px; color: #3c3c3c; }

    .artOpenBtn, .artCloseBtn{ height: 23px; width: 23px;}
    .artOpenBtn span{ font-size:12px; line-height: 25px;}
    .artCloseBtn span{font-size:15px; line-height: 23px;}
    .artOpen .artText .row {margin-bottom: 0;}
    .artOpen .locationIcon {font-size: 15px;}

    /* showMoreDetails */
    .showMoreDetails{ display:none;}
}

@media (min-width: 1200px) {
    /* artTable */
    .artBox{  height: 250px;  width: 240px;}
    .artText{ padding:15px;}
    .artOpenText{ padding:25px 15px 20px 15px ;}
    .artRightText{font-size: 15px; width: 90px;}
    .artLeftText{font-size: 17px; }
    .artText dt, .artOpenText dt{font-size: 15px; width: 90px;}
    .artText dd, .artOpenText dd{font-size: 17px; }
}

@media (max-width: 768px) {
    .artTable ul li{ margin:0px 0px 25px 100%; }
}