/* for small screens */
@media screen and (max-width: 768px) {
    /* Style all font awesome icons */
    .share-fa {
      padding: 10px !important;
      font-size: 20px !important;
      width: 40px !important;
    /*  width: 50px;*/
      text-align: center;
      text-decoration: none;
      border-radius: 50%;
      margin-left:5px;
      margin-right:5px;
    }

    /* Add a hover effect if you want */
    .share-fa:hover {
      opacity: 0.7;
      text-align: center;
      text-decoration: none;
      color: white;
    }
}

/* Style all font awesome icons */
.share-fa {
  padding: 10px;
  font-size: 20px;
  width: 40px;
/*  width: 50px;*/
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin-left:5px;
  margin-right:5px;
}

/* Add a hover effect if you want */
.share-fa:hover {
  opacity: 0.7;
  text-align: center;
  text-decoration: none;
  color: white;
}

/* https://www.w3schools.com/howto/howto_css_social_media_buttons.asp Set a specific color for each brand */

/* Facebook */
.fa-facebook-f {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin-in {
    background: #007bb5;
    color: white;
}

.fa-whatsapp {
    background: #25D366;
    color: white;
}

.fa-at, .fa-envelope {
    background: #ff6600;
    color: white;
}


.danger {
  border-color: rgb(217, 83, 79);
}

.nav-link {
font-size:1rem !important;
}

.tooltip.show pre {
 text-align:left;
color:#ffffff;
}

.features-icons .features-icons-item .features-icons-icon {
  height: 7rem;
}

.modal-berechnung {
  background-color: #eeeeee;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block
}


.pointer {
  cursor: pointer;
}

.info-icon {
color:#bbbbbb;
}

.btn-primary {
background-color: #0062cc;
border-color: #0062cc;
}

.text-primary {
color: #0062cc !important;
}

.btn-nk {
  padding: 0em .5em;
  border-radius: 5rem;
  font-size:85%;
}

.input-group-append {
  align-self: flex-start;
}

.positive {
color:#28a745!important;
}

.negative {
color:#dc3545!important;
}

.btn-minus {
  color: #dc3545;
  background-color: transparent;
  background-image: none;
  border-color: #dc3545;
  border-color: #6c757d;
}

.btn-plus {
  color: #28a745;
  background-color: transparent;
  background-image: none;
  border-color: #28a745;
  border-color: #6c757d;
}

@media (max-width: 575.98px) {
h1 {
font-size:2.5rem;
}
#logo-img {
height:30px;
}
}

h1.landing-page{ 
color:white; 
font-weight:bold;
}

h2.landing-page{ 
color:white; 
/*font-weight:bold;*/
}

.carousel-caption p {
background: rgba(255,255,255,0.3);
}

.carousel-caption a {
color: #000000;
}

.carousel-caption i {
color: #000000;
}


::-ms-clear {
display: none;
}
.big-info-txt {
    font-size: 1.3em;
}
.form-control-clear {
z-index: 10;
pointer-events: auto;
cursor: pointer;
}

section {
/*margin:2rem 0;*/
}

.title-section {
padding-top:20px;
}

.content-section {
padding-top:30px;
}

footer a {
color:#ffffff;
text-decoration: none;
}
footer a:hover {
color:#dddddd;
text-decoration: none;
}
footer p {
color:#cccccc;
text-decoration: none;
}
.labelHeading{
font-weight:bold;
font-size: 1.3rem;
}

.nav-link {
font-size:1.3rem;
}

.bg-top {
background-color: #2C3E50;

/*    border-bottom: 5px solid #ffffff;*/
}

.bg-bottom {
background-color: #24292e;
}

@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: .8rem !important;
  padding-left: .8rem !important;
}
}

#section-cta {
background-color: #5f9cb9;
margin:0 !important;
padding:1.5rem 0;

    background-image: url({% static 'app_immo/bg2.png' %});

}
.spinnerCenter {
  position: absolute;
  top: 0%;
  /* left: 50%; */
  z-index: 99;
  width: 100%;
  height: 100%;
  text-align: center !important;
}
.loading-bg {
  background-color: rgba(255,255,255,.7);
}
  /* Social Button Stype */
  .scl-btn {
    padding: 15px;
    font-size: 25px;
    width: 55px;
    text-align: center;
    text-decoration: none;
    margin:5px;
    color: white;
  }

  /* Hover Effect */
  .scl-btn:hover {
    opacity: 0.8;
    text-align: center;
    text-decoration: none;
    color: white;
  }

  /* Round buttons */
  .scl-crcl {
    border-radius: 50%;
  }
  .scl-btn.fa-facebook-f {  background: #3B5998; }
  .fa-twitter, .btn-tw-download { background: #55ACEE; }
  .fa-download { background: #125688; }

  .btn-fb-download {
    background: #3B5998;
    border:0px;
    color:#ffffff;
  }

  .btn-tw-download {
    background: #55ACEE;
    border:0px;
    color:#ffffff;
  }

  .btn-code {
    background: #424242;
    border:0px;
    color:#ffffff;
  }

  .btn-tw-download:hover, .btn-code:hover, .btn-fb-download:hover {
    opacity: 0.8;
    text-align: center;
    text-decoration: none;
    color: white;
  }


.bg-front-box {
/* background-color:rgba(228,228,228,0.75); */
  border-radius: 10px;
}

.bg-front-box > h1 {
color:#000000;
}

.real-estate-item {
  color: #000;
  position: relative;
/*    padding-top: 1.5rem;
  padding-bottom: 1.5rem;*/
      background-color: #fff;
/*    transition: 0.15s box-shadow ease, 0.15s transform ease;
 -moz-transition: 0.15s box-shadow ease, 0.15s transform ease;*/
  box-shadow: 0 0px 20px 0 rgba(155,155,155,0.3);
  border:0px !important;
}

#parent {position: relative;width:200px;

   overflow: hidden;
}


     /* Set the size of the div element that contains the map */
    #map {
      height: 400px;  /* The height is 400 pixels */
      width: 100%;  /* The width is the width of the web page */
     }

     .card-horizontal {
  display: flex;
  flex: 1 1 auto;
}

.center-image {
  position: absolute;
  top: 0%;
  /* left: 50%; */
  z-index: 99;
  width: 100%;
  height: 100%;
}
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.bg-gray-light {
  background-color: #fafbfc!important;
}

.map {
  color: #000;
  position: relative;
/*    padding-top: 1.5rem;
  padding-bottom: 1.5rem;*/
      background-color: #fff;
/*    transition: 0.15s box-shadow ease, 0.15s transform ease;
 -moz-transition: 0.15s box-shadow ease, 0.15s transform ease;*/

  box-shadow: 0 0px 20px 0 rgba(155,155,155,0.3);
  border:0px !important;
}

.map:hover {
  box-shadow: 0 2px 30px 0 rgba(155,155,155,0.5);
  border:0px !important;
}








.jumbotron {
padding:0px;
margin:0px;
}

.call-to-action {
//position: relative;
 background-size: cover;
/*background-image: url(https://startbootstrap.com/assets/img/overlay.svg),linear-gradient(45deg,#506e8c 0%,#466380 100%);*/
/*background-color: #dededee0;*/
background-color: rgba(245,245,247,0.9);

backdrop-filter: saturate(180%) blur(15px);

border-bottom: 1px solid #D2D2D4;
padding-top: 5rem;
padding-bottom: 5rem;

}

.nav-item, .nav-link {
color: rgba(0, 0, 0, 0.71) !important;
}

.bg-front-page {

/*background-image: url(https://startbootstrap.com/assets/img/overlay.svg),linear-gradient(45deg,#bbbbbb 0%,#ffffff 100%);*/
/*background-image: url(https://startbootstrap.com/assets/img/overlay.svg);*/
background-image: url("https://app-immo.s3.amazonaws.com/static/app_immo/images/immobilist_background_house.jpg");
/* background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(https://usersthink.com/img/99-free-images-large/38-usersthink-stock-image.jpg)no-repeat center bottom fixed; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;

}

.index-white {
background-color:#ffffff !important;
}

.index-grey {
background-color:rgba(245, 245, 247, 0.72) !important;
}

.cta h1, .cta h2 {
color:#ffffff;
}


.bg-front-page-product {
}

.carousel-inner > .item {
 height: 400px;
}


.cropper {
width: 100%!important;
  object-fit: cover;
  /* width: 300px; */
  height: 300px;
}

.errorlist {
    list-style: none;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.page-link {
    color: #0062cc !important;
}

.page-link:hover {
    color: #0069d9 !important;
}

.page-item.active .page-link {
    color: #fff !important;
    background-color: #0062cc;
    border-color: #0062cc;
}

.text-muted a {
    color: #0062cc !important;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #0062cc;
    border-color: #0062cc;
}

@media (max-width: 700px) {
  .button {
    margin: 2px;
  }
}

@media (min-width: 768px) {
        .preview-image {
           border-radius: .25rem 0 0 .25rem;
        }
}

@media (max-width: 768px) {
        .preview-image {
           border-radius: .25rem   .25rem 0 0 ;
        }
}