@charset "UTF-8";
.gallery{
    margin: 0 0 3rem;
    position: relative;
}


.gallery-title {
    background-color: #4D4D4D;
    color: #FFFFFF;
    padding: 10px 20px;
    position: relative;
    top: 10px;
    font-size:large;
    letter-spacing: 2px;
}
.gallery-arrow-left {
    float: left;
    background-color: #CCCCCC;
    height: 40px;
    width: 40px;
    position: relative;
    bottom: 250px;
    opacity: 0.7;
}
.gallery-arrow-right {
    float: right;
    background-color: #CCCCCC;
    height: 40px;
    width: 40px;
    position: relative;
    bottom: 250px;
    opacity: 0.7;
}
.gallery-dots {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    background: #000;
    opacity: 0.5;
    cursor: pointer;
    border: 0;
    position: relative;
    top: 15px;
    outline: none;
    margin: 0 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    float: left;
}
.gallery-dots-selected {
    opacity: 1;
}
.housedtltitle1 {
    margin: 0px;
}
.gallery .images {
    /*width: 484px;
    height: 484px;
    margin: 40px 20px 30px 40px;*/
    width: 48rem;
    height: 48rem;
    width: 52rem;
    height: 35rem;
    text-align: center;
    position: relative;
    background: #f2f2f2;
   
}
.gallery .images img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    
    /*height: auto;*/
    width: auto;
    max-height: 100%;
}

.gallery._02 .images img{
    height: auto;
    max-height: 100%;
    height: 100%;
}
.gallery._03 .images img{
    position: relative;
    top: 1px;
    width: 100%;
}




.gallery .thumbs-box {
    display: block;
    /*width: 45%;*/
    width: 49rem;
   /* margin: 40px 40px 30px 20px;
     margin: 40px 40px 50px 20px;*/
    /*text-align: right;
    margin-top: 40px;
    max-width: 0px;
    padding-left: 10px;*/
    max-height: 49rem;
    max-height: 36rem;
     width: 46rem;
    overflow-y: hidden;
}
.gallery .thumbs-pager {
    position: absolute;
    right: 10px;
    bottom: -6px;
    bottom: 40px;
    bottom: 10px;
}
.gallery .images > div {
    width: 48rem;
    height: 48rem; 
    
        width: 52.2rem;
    height: 35rem;
      height: 35rem;
    box-shadow: none;
    overflow: hidden;
}
.gallery._02 .images > div{
    
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    /*background: #f2f2f2;*/
}



.gallery .thumbs {
    margin-top: 0px;
    position: relative;
    text-align: left;
    top: 0px;
    cursor: auto;
    
}
.gallery .thumbs > div {
    width: 15.5rem;
    height: 15.5rem; 
    
    width: 11.5rem;
    height: 11.5rem; 

     width: 11rem;
    height: 11rem; 
    
    margin: 0px 0px 1rem 0px;
    vertical-align: middle;
    
    
}
.gallery .images>div.active {
    z-index: 1;
}
.gallery .thumbs > div.active:before {
    border-bottom-color: unset;
    display: none;
}
.gallery .thumbs img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}



.galleryleft{
    position: relative;
    padding: 0 0 4em;
}

.gallery .images {
    padding-bottom: unset;
}
.gallery .images > span.left {
    padding-left: unset;
   /* margin-left: -43px;*/
   left: 0;
    top: 0px;
    z-index: 2;
}
.gallery .images > span.left::before{
    left: 0;
    content: "";
    height: 4rem;
    width: 4rem;
    background: url("../img/house/prev.svg") no-repeat left center; 
    background-size: cover;
}
.gallery .images > span.right::before{
    content: "";
    right: 0;
    height: 4rem;
    width: 4rem;
    background: url("../img/house/next.svg") no-repeat left center; 
    background-size: cover;
}

.gallery .images > span.right {
   /* left: 100%;
    margin-left: -38px;*/
    left: auto;
    right: 0;
    top: 0px;
    z-index: 2;
}

.gallery .titles {
    /*color: #FFF;*/
    position: relative;
    left:0px;
    bottom: -10px;
}
.gallery .titles>div {
    opacity: 0;
    position: absolute;
}
.gallery .titles>div.active {
    opacity: 1;
    position: absolute;
}

.left_arrow {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  float: left;
  cursor: pointer;
  font-size: 0px;
}
.right_arrow {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  float: right;
  cursor: pointer;
  font-size: 0px;
}

@media screen and (max-width:1200px) {
/*
.gallery .thumbs-pager {
    position: relative;
    bottom: 30px;
    text-align: right;
}
.gallery .thumbs-box {
    width: unset;
    padding-left: unset;
    margin: 40px 40px 30px 40px;
}*/

}

@media screen and (max-width:620px) {
/*
body {
    padding-top: 40px !important;
}*/
.gallery {
    display: block;
}
.gallery .images {
    width: 85vw;
    height: 85vw;
     height:57vw; 
    margin: 20px auto 5px auto;
}
.gallery._02 .images{
    height: 57vw;
}


.gallery .images > div {
    width: 85vw;
    height: 85vw;
    height:57vw; 
}
.gallery._02 .images > div{
    height: 57vw;
    background: none;
}



.gallery .thumbs-box {
    width: 82vw;
    /*height: 82vw;*/
    /*height: 64vw;*/
    /*margin: 30px auto 20px auto;*/
    margin: 0px auto 20px auto;
    min-width: unset;
    max-width: unset;
}
.gallery .thumbs > div {
    width: 26vw;
    height: 26vw;
    
    width: 19.5vw;
    height: 19.5vw;
    margin: 0px 0px 10px 0px;
}
.gallery .thumbs-pager {
    right: 2vw;
    text-align: right;
    bottom: -4rem;
}

.gallery-title {
    padding: 5px 20px;
    top: 5px;
}
.gallery-arrow-left {
    bottom: 170px;
}
.gallery-arrow-right {
    bottom: 170px;
}

}

@media screen and (max-width:230px) {
.gallery .thumbs-box {
    width: 61vw;
}

}

@media screen and (max-width: 170px)
.gallery .thumbs-box {
    width: 62vw;
}

}