/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/***********************************************************************************************
property details pages
************************************************************************************************/
 :root{
 /*	--darkColor:#152d4d;*/
 	--darkColor:#24386a;  
 	 /*--mediumColor:#A2AAAD;*/
 --mediumColor:#c4c4c4;  --lightColor:#fff;  --goColor:green;  --stopColor:red;  --warningColor:orange;  --blackColor:#000; }
.noProp{
	height:50px;
	font-size:2em;
	background:var(--darkColor);
	border:1px solid #000;
	width:auto; margin:auto;
	text-align:center;
	border-radius:8px;
	margin:0px 10px;
	position: relative;
	clear:both;
	color:var(--lightColor);
}
#loadMore{
	height:50px;
	font-size:2em;
	background:var(--mediumColor);
	border:1px solid #000;
	width:auto; margin:auto;
	text-align:center;
	border-radius:8px;
	cursor:pointer;
}
#agentName {
    width: 300px;
    height: 2em;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    border-bottom: 4px double var(--darkColor);
    float:left;
    }
    #propertyStatus {
    width: 300px;
    height: 2em;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    border-bottom: 4px double var(--darkColor);
    float:left;
    }
#backButton{border:4px double var(--lightColor);background:var(--stopColor);min-width:300px;}
#moreProperties{width:100%;min-width:350px;}
#loadingIcon{height:125px;width:auto; margin:auto;text-align:center;display:none;}
.cb{clear:both;min-height:10px;width:100%;}
 #searchAgent{ background-color:var(--lightColor); color:var(--darkColor); font-size:30px; border:3px solid var(--darkColor); min-width:300px; height:300px; z-index:50; display:none; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius:8px; text-align:center; line-height:100px; padding:5px; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; } 
#agentResults{width:100%;height:250px;font-size:17px;font-weight:700;}
.agentList{border-bottom:1px solid var(--darkColor);line-height:75px;}
.actionButton{ font-weight:600; font-size:1.5em; font-family: 'Lato', sans-serif; cursor:pointer; color:var(--lightColor); border-radius: 8px; width:200px; line-height:2em; text-align:center; margin-left:10px; float:left; }
.actionButton:hover{ border:4px double var(--darkColor); background:var(--lightColor); color:var(--darkColor); animation:psShake 1s; }
.actionButton:focus {outline:none;}


#changeAgent{ border:4px double var(--lightColor); background:var(--darkColor);float:left;display:none;}
#changeAgent:hover{border:4px double var(--darkColor);background:var(--lightColor);}
#changeButton{border:4px double var(--lightColor); background:var(--darkColor);float:left;display:none;}
#changeButton:hover{border:4px double var(--darkColor);background:var(--lightColor);}
#companyProperties{border:4px double var(--lightColor); background:var(--darkColor);float:left;display:none;}
#companyProperties:hover{border:4px double var(--darkColor);background:var(--lightColor);}

#searchButton{border:4px double var(--lightColor); background:var(--darkColor);float:left;}
#searchButton:hover{border:4px double var(--darkColor);background:var(--lightColor);}
.PropStats{width:100px;float:right;}
.vs-price dd{width:185px;text-align:center;text-transform:uppercase;text-align:center;font-size:2rem;line-height:1rem;letter-spacing:-1px;font-weight:normal;margin:0;}
.vs-price dt{margin:0;width:185px;text-transform:uppercase;text-align:center;font-size:1rem;line-height:1rem;}
.vital-stats{float:right;color:#313131;font-family:lato;border-right:1px solid #313131;border-bottom:1px solid #313131}
/*.vital-stats dl{margin:0;padding:0;float:left;border-right:1px solid #313131}*/
.vital-stats dd{padding:10px 0 5px;float:left;width:185px;text-transform:uppercase;text-align:center;font-size:2rem;line-height:.6rem;letter-spacing:-1px;font-weight:300;margin:0;  display: block;}
.vital-stats dt{margin:0;padding:0 0 10px;width:185px;text-transform:uppercase;text-align:center;font-size:.7rem;line-height:1.7rem;font-weight:400;}
.vs-price{font-family:Cinzel}
.vs-other{font-family:Lato,sans-serif}
.vs-price dd{width:185px;text-transform:uppercase;text-align:center;font-size:2rem;line-height:1rem;letter-spacing:-1px;font-weight:400;margin:0}
.vs-price dt{margin:0;width:185px;text-transform:uppercase;text-align:center;font-size:1rem;line-height:1em;font-weight:400}


.prop_head{padding:10px 0 0;margin:0 0 10px;font-family:Cinzel;font-size:1.125rem;border-bottom:1px solid var(--darkColor)}
.propData{font-family:Lato,sans-serif;width:100%}
.pDatal,.pDatar{width:50%;float:left}
.propData dl{border:0}
.propData dt{font-size:.875rem}
.propData dd{padding:0;margin:0 20px;font-size:.875rem}
.pDatas{clear:both;width:100%}
.town-stats{color:#313131;cursor:pointer}
.town-stats:hover{background:var(--mediumColor)}
.town-stats dd{padding:10px;float:left;width:145px;text-transform:uppercase;text-align:center;font-size:2rem;line-height:.875rem;letter-spacing:-1px;font-weight:300;margin:0}
.town-stats dt{margin:0;padding:0 20px;width:140px;text-transform:uppercase;text-align:center;font-size:.7rem;line-height:1.7rem;font-weight:400;border-right:1px dotted #313131}
.ts-first dt{border-left:1px dotted #313131}
#chart_div{width:450px;height:400px}
/******************************************************************
slideshow
*******************************************************************/
  .swiper-container {
	width: 100%;
	max-width:850px;
	max-height:567px;
	justify-content: center;
	align-items: center;
    }
    .swiper-container
        .swiper-slide {
      background-size: cover;
      background-position: center;

    }
    
/*        .gallery-thumbs {
      height: 100px;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
  
    */
    .swiper-pagination{
    color:var(--lightColor);
    background-color:#152748;
    opacity:.8;
    padding:10px;
    }    

    .gallery-top .swiper-wrapper{
    height:100%;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
     .tall-Slide{
     text-align:center;
     max-height:567px;
     width:100%;
     background-color:var(--lightColor);
    }
    .tall-img{
    max-height:567px;width:auto; margin:auto;
    }
    .wide-Slide{
     max-height:567px;
     height:100%;
     background-color:var(--lightColor);
    }
    .gallery-top {
      height: 80%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 100px;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
        .swiper-button-white{
    background-color:#000;
    padding: 40px 20px 40px 20px;
    opacity:.5;
    margin:0px;
    }
    .swiper-button-white:hover{
    background-color:#000;
    padding: 40px 20px 40px 20px;
    opacity:1;
    }
/***********************************************************************************************************
property cards
***********************************************************************************************************/

.ListingImg{height:260px;}
.ListingImg img{max-height:260px;}
.ListingTown {letter-spacing:.5rem;font-size:1.2em;font-family:"Cinzel"; color:var(--darkColor);}
.ListingAddress{font-family:"Cinzel"; letter-spacing:.1rem;font-size:.75rem;}
.ListingPrice{	font-family: "Lato", sans-serif;letter-spacing:.5rem;font-size:.9rem;font-weight:500;}
.ListingMls{font-family: "Lato", sans-serif;font-size:1rem;}
.ListingStatus{font-family: "Lato", sans-serif;font-size:1rem;font-weight:900;}
.ListingRemarks{font-family: "Lato", sans-serif;font-size:.9rem;padding-right:10px;padding-left:10px;text-align:justify;overflow:hidden;height:360px;}

.propContainer{width:30%;min-width:300px;height: 540px; margin:0px 10px;position: relative;float:left; perspective: 1000px; padding-bottom:10px;}
.listingCard {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.propContainer:hover .listingCard {transform: rotateY(180deg);}
.front, .back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.front {background-color: var(--lightColor);color: black;}
.back {background-color: var(--lightColor);color:#000;padding:5px;transform: rotateY(180deg);overflow:hidden;text-align:left;}
.backButtons{background-color:var(--darkColor);padding:10px;padding-left:50px;margin:10px;font-family: "Lato", sans-serif;font-size:1rem;color:var(--lightColor);border:1px solid var(--darkColor);transition: transform 0.6s;transform-style: preserve-3d;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);border-radius:5px;cursor:pointer;}
.backButtons:hover{background-color:var(--lightColor);color:var(--darkColor);animation:psShake 1s;}
@keyframes psShake {
  0% {transform: scale3d(1,1,1);}
  20%{transform: scale3d(1.02,1.02,1);}
  40%{transform: scale3d(.98,.99,1);}
  60% {transform: scale3d(1.01,1.01,1);}
  80% {transform: scale3d(.99,.99,1);}
  100% {transform: scale3d(1,1,1);}
}

/*******************************************************************************************************************
Owner Cards
*******************************************************************************************************************/
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left;width:45%;min-width:300px;border:0px;list-style-type: none;background-color:transparent;}
#saveResults{background-color:var(--darkColor);color:var(--lightColor);font-size:30px;border:3px solid var(--lightColor);min-width:300px;height:100px;z-index:50;display:none;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);border-radius:8px;text-align:center;line-height:100px;
position: fixed;top: 50%;left: 50%;margin-top: -50px;margin-left: -150px;
}
.ownersForm{
	position: relative;float:left;padding-bottom:10px; min-height: 420px; margin:0px 10px;
}
.ownerCard {background-color:var(--lightColor);position: relative;width: 100%;text-align: center;padding:10px;transition: transform 0.6s;transform-style: preserve-3d;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.ownersForm input{
  font-size: 30px;
  color: #2f2f2f;
  line-height: 1.2;
  text-align: left;
  padding-bottom: 30px;
  border: none !important;
  border-bottom: 1px solid var(--darkColor) !important;
  outline: none;
  background: transparent !important;
  border-radius:0px !important;
}
.submitOwner{
  font-size: 30px;
  color: var(--lightColor);
  line-height: 1.2;
  text-align: left;
  padding:10px;
  border: 1px solid var(--lightColor) !important;
  width:100%;
  text-align:center;
  background: var(--darkColor) !important;
  border-radius:3px !important;
  cursor:pointer;
}
.ownersForm input:focus{animation:psShake 1s;}
.ownersForm textarea{
  font-size: 30px;
  color: #2f2f2f;
  line-height: 1.2;
  text-align: left;
  padding-bottom: 30px;
  border: none !important;
  border-bottom: 1px solid var(--darkColor) !important;
  outline: none;
  background: transparent !important;
  border-radius:0px !important;
}
.ownersForm textarea:focus{animation:psShake 1s;}
.oHeader{
  font-size: 30px;
  color: var(--lightColor);
  line-height: 1.2;
  background-color:var(--darkColor);
  padding:20px;
  margin-bottom:5px;
}
#newOwner {
float:right;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: var(--darkColor);
}

#newOwner::before {
  content: "+";
  height:100px;
  width:100px;
  font-size:100px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-family:courier;
  color:white;
}
.deleteOwner {
	     margin:5px;                 
	float:right;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	background-color: red;
}

.deleteOwner::before {
	content: "X";
	height:35px;
	width:35px;
	font-size:30px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	font-weight:bold;
	font-family:courier;
	color:white;
}
/***************************************************Image Gallery**********************************/

#packageButton{font-family:arial;background-color:var(--darkColor);display: flex;align-items:center;overflow:hidden; position: fixed;bottom:50% ;right: -170px; width:250px;border:1px solid #000000; border-radius: 15px 0px 0px 15px;color:var(--lightColor);  padding: 10px 0;cursor:pointer;}
#packageButton img{padding-right:10px;height:64px;}
#packageButton:hover{position: fixed;bottom:50%;right: 0; width:250px;}
#packageList{ position: fixed;top: 0;right: 0;width:10%; }

.mlsPhoto{font-family:arial !important;font-size:12px;text-align:center; width:260px;float:left;padding:20px;}
.pickImg{width:100%;text-align:center;margin:1%;border:1px solid #000000; border-radius: 15px;box-shadow: 1px 3px rgba(0,0,0,0.2);padding:10px;}
.imgInfo{font-weight:900;text-align:center;width:100%;}
.primaryChoice{font-weight:900;text-align:center;width:100%;}
.imageSelect{clear:both;}
.imageActions{float:left;width:100%; font-family:Lato,sans-serif !important;font-size:1em;letter-spacing:.2em;}
.addButton{float:left;width:45%;min-width:300px;margin:10px; border:1px solid #000000; border-radius: 15px;box-shadow: 1px 3px rgba(0,0,0,0.2);text-align:center;padding-top:10px; padding-bottom:10px; max-width:350px;cursor:pointer;}
.addButton:hover{background-color:var(--darkColor); color:var(--lightColor);animation:psShake 1s;}
.removeButton{float:left;width:45%;min-width:300px;margin:10px; border:1px solid #000000; border-radius: 15px;box-shadow: 1px 3px rgba(0,0,0,0.2);text-align:center;padding-top:10px; padding-bottom:10px; max-width:350px;cursor:pointer;display:none}
.removeButton:hover{background-color:var(--lightColor); color:var(--darkColor);}
.cb{clear:both;}
@keyframes psShake {
  0% {transform: scale3d(1,1,1);}
  20%{transform: scale3d(1.02,1.02,1);}
  40%{transform: scale3d(.98,.99,1);}
  60% {transform: scale3d(1.01,1.01,1);}
  80% {transform: scale3d(.99,.99,1);}
  100% {transform: scale3d(1,1,1);}
}


/***********************************************************************************************/

    /*****************************************************************
    small screen
    ******************************************************************/
    @media only screen and (max-width: 800px) {
      .swiper-container {
      width: 100%;
      height: 350px;
    }
     .gallery-thumbs {
      display:none;
      height: 40px;
      box-sizing: border-box;
      padding: 10px 0;
    }
     .tall-Slide{
     text-align:center;
     max-height:350px;
     width:100%;
     background-color:var(--lightColor);
    }
    .tall-img{
    max-height:350px;width:auto; margin:auto;
    }
    
    }