// Default variables.
@import "default-variables";

// Bootstrap Framework.
@import '../bootstrap/assets/stylesheets/bootstrap';

// Base-theme overrides.
@import 'overrides';



$ob_header_black: #000;
$ob_header_pink: #bd03c0;
$ob_black: #252224;
$ob_violet: #d2c9fb;
$ob_grey: #888888;
$ob_green: #3f2aaf;
$ob_lightgrey: #f4f4f4; 

$ob_blue: #009ee0;
$ob_yellow:#f8b218;
$ob_brown: #1b180f;

@mixin stpclear() {clear:both;width:100%; float:left;display:block}

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}
@mixin col($col, $sum,  $align: top) {
  width: percentage($col/$sum);
  float:left;
  padding:1%;

}

@mixin list_square($color,$left:10px) {
content: "■";
position: absolute;
left:$left;
padding:0 2px;
margin-top:0px;
font-size:12px;
color:$color;

}

@mixin ob_btn($color,$bgr) {
  transition-duration:1s;
  text-align:center;
  color:#fff;

  border:1px solid $bgr;
  
  display:block;
  padding:4px 18px;

}

body {background:#fff;font-family: "Work Sans", sans-serif; font-weight:400;line-height:20pt; font-size:12pt; color:$ob_grey;}
h1,h2,h3,h4,h5,h6 {font-weight:300; color:$ob_green;}



.container {width:98%; max-width:1420px;}


.page-header { text-align:center;color:$ob_green;padding:2% 0; margin-bottom:2%; position:relative;font-weight:300;border:0;

    }
.block-title {  text-align:left;color:$ob_header_pink;padding:2% 0; margin-bottom:2%; position:relative;font-weight:300;border:0;
 text-transform: uppercase;
    

    

}

a{ &:hover {text-decoration:none;transition-duration:1s;}}

img {
transition-duration:1s;
 &:hover {transition-duration:1s;}}


#navbar {background:#fff;margin:0;padding:0; border-bottom:4px solid $ob_green; border-left:0; border-right:0; border-top:0;width:100%;overflow:hidden;

    .logo {padding:1% 0; img {@extend .img-responsive;}}
.container {margin:0 auto;padding:0;}

@media (max-width: 768px){
    .navbar-header {width:100%; clear:both;display:block; }
.in { text-align:center;}
}
	@media (min-width: 768px){
        .navbar-header {margin:2% 0 0 0; width:66%;float:right; }	
	ul.nav li.dropdown:hover ul.dropdown-menu { display: block; }
    ul.nav li.dropdown ul.dropdown-menu { margin-top: 0; }
 }

    #block-bootstrap-ogrodybielany-sass-main-menu {display:block;
        float:right;font-size:11pt;
		a{ color:$ob_grey; text-transform: uppercase; &:hover {color:$ob_green; }
		&.active {color:$ob_blue;}}
	}
    .language-switcher-language-url {margin:0;padding:0;float:right;ul {list-style-type:none; 
        li {list-style-type:none;
        &.is-active {display:none;}}}}
}



.webform-button--submit {background: $ob_green !important; position:relative;margin:1% auto; padding:2% 5%; border:0; border-radius:0;transition-duration:1s;&:hover {background:$ob_grey !important;}}


#ob_welcome {
  padding:10px;
margin-bottom:10px;
h4 {font-size:38pt; color:$ob_header_pink; font-weight:300 !important; text-transform: uppercase;padding:3% 0;}
   padding:2% 0 1% 0;
   img {@extend .img-responsive;}
}

#ob_slideshow {padding:0;position: relative; 

    .views-field-body { position:absolute; bottom:5%; left:5%; background:rgba(0,0,0,0.6); color:#fff;padding:2%;@extend .fadeIn;@extend .animated;@extend .delay-2s;}
    .views-field-nothing {position: absolute;bottom:14%; left:0; width:100%;
    
    }
}


#wsmap {clear:both;width:100%; float:left; height:400px;margin:0;}

.field--name-field-aktualnosci-zdjecie {
    .colorbox {
        img {width:100%;height:auto;max-width:270px;}
    }
}







#ob_offer {
  margin:0 0 2% 0;
  img {@extend .img-responsive;}
.block-title {color:#fff; text-align: center;padding:1% 0 3% 0; margin:0;}
.view-footer {
  padding:0 1% 1% 1%; text-align:center;color:$ob_green;border:1px solid #eee;margin:2% 0;
}

  #block-udostepnionyformularzmieszkaniapage-1 {
    background:$ob_green;
    padding:2% 5%;
    color:#fff;
    label {font-weight:300;padding:1% 5%; @extend .col-sm-6;}
    .select-wrapper {@extend .col-sm-5;padding:0;margin:0;
    select {width:100%}}
    .form-item-field-mieszkanie-liczba-pokoi-value {@extend .col-sm-5;}
    .form-item-field-mieszkanie-pietro-kat-target-id {@extend .col-sm-5;}
  }
}


.flatrow {

}


#ob_info_start {
  margin:0% 0 3% 0;
  .col-sm-6 {padding-left:0;margin-left:0;}
  h5 {font-size:16pt;}

  ul {
    list-style: none;
  }
  li {
    position: relative;
    padding-left: 2.5em;  /* space to preserve indentation on wrap */
  }
  li:before {
    content: '';  /* placeholder for the SVG */
    position: absolute;
    left: 0;  /* place the SVG at the start of the padding */
    width: 2em;
    height: 2em;
    fill:$ob_green;
    background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' style='enable-background:new 0 0 70 70;' xmlns='http://www.w3.org/2000/svg'><path   d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat ;
  }
}

.newsrow {
  margin-bottom:3%;
  .obwell {margin-right:1%;overflow:hidden;position:relative;
    &:hover {
      .views-field-view-node {height:50%;}
    }
  }
  position:relative;

  .views-field-view-node {position:absolute; bottom:0; left:0; background:rgba(255,255,255,0.8);height:130px;
    width:100%;
    transition-duration: 0.5s;
    transition: height 0.5s;
    -moz-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -o-transition: height 0.5s;
    padding:10px;
  
  a {color:#000;}
  }
}



@-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
  }
  
  .animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
  }
  
  .animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
  }
  
  .animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  
  
  
  .field--name-field-aktualnosci-galeria, .field--name-field-kierunek-galeria,.field--name-field-galeria {
	.field--item {	
		overflow:hidden;   @extend .col-sm-3;  @extend .col-xs-6; 
		.colorbox {margin:0 0 5% 0;padding:0;overflow:hidden;display:block;width:100%;
			img {width:100%; height:auto; &:hover {transform:scale(1.1);}	}
		}
	}
  }
  
  
  
  
  .footer {clear:both;text-align:center; font-size:8pt;border:0;margin:0;padding:1% 0;}



  #obmap {width:100%; height:400px;}


  .field--name-field-kol2-zdjecie {
    display: flex;
    align-items: center;
    justify-content: center;
    img {@extend .img-responsive;}
  }


  #block-mieszkaniedlakazdego {margin:5% 0;}



  .mapify-holder{
    position: relative;
    display: inline-block;
    font-size: 0px;
    max-width: 100%;/* Make the image responsive */
    z-index:1;
    
    -webkit-touch-callout: none;
    
    -webkit-user-select: none;  /* Chrome all / Safari all */
      -moz-user-select: none;     /* Firefox all */
      -ms-user-select: none;      /* IE 10+ */
  }
  
  .mapify-imgHolder{
    position:relative; 
    z-index:1;
  }
  
  .mapify-holder *,
  .mapify-GPU{
    -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      -o-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
  }
  
  /* Make the image responsive */
  .mapify-imgHolder .mapify{
    max-width: 100%;
    height: auto;
  }
  
  .mapify-img{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  .mapify-svg{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  
  /* Styles for the hilight effect */
  
  .mapify-polygon{
    transition: all 0.5s;
    fill:transparent;
    stroke: transparent;
    stroke-width: 0;
    
    /* do not use css transform translate3d, otherwise it starts lagging in iOs when panning the map*/
  }
  .mapify-hover{
    fill:rgba(78,168,95,0.6);
  }
  
  /**/
  
  .mapify-popOver{
    
    color: #000;
    position: absolute;
    top:0px;
    left: 0px;
    
    padding:20px 30px;
    width: 260px;
    background: #fff;
    box-shadow: rgba(0,0,0,0.15) 0 0 0 2px;
    z-index: 999;
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
    border-radius: 5px;
    text-align: center;
    height: auto;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    font-size: 14px;
    
    z-index: -1;
    
    opacity: 0;
    
    /* now declared in the plugin options 
    transition: all 0.5s;
    */
  }
  .mapify-popOver .mapify-popOver-arrow{
    content: "";
    width: 15px; 
    height: 15px;
    
    /* now declared in the plugin options 
    transition: margin 0.5s;
    */
  
    z-index: -2;
    
    margin-top: -3px;
    
    box-shadow: inset #fff 0 0 0 100px;
    
    border-top: solid transparent 2px;
    border-left: solid transparent 2px;
    
    border-right: solid rgba(0,0,0,0.15) 2px;
    border-bottom: solid rgba(0,0,0,0.15) 2px;
    
    position: absolute;
    top:100%;
    left: 50%;
    -webkit-transform: translateX(-15px) rotate(45deg) translateY(-50%);
    transform: translateX(-15px) rotate(45deg) translateY(-50%);
  }
  .mapify-popOver.mapify-bottom .mapify-popOver-arrow{
    top:auto;
    bottom: 100%;
    margin-top: auto;
    margin-bottom: -3px;
    
    border-bottom: solid transparent 2px;
    border-right: solid transparent 2px;
    
    border-top: solid rgba(0,0,0,0.15) 2px;
    border-left: solid rgba(0,0,0,0.15) 2px;
    
    -webkit-transform: rotate(45deg) translateY(50%);
    transform: rotate(45deg) translateY(50%);
  }
  
  .mapify-popOver.mapify-visible{
    
    /* Showing the popover */
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }


  .portfoliorow {
    clear:both; width:100%;margin-bottom:2%;float:left;width:100%;
    img {@extend .img-responsive;}
  }





  .obstatus-1 {
    .views-field-field-status-mieszkania{
      background:$ob_green !important; color:#fff; a {color:#fff;}
 
    }
  }

  .obstatus-2 {
    .views-field-field-status-mieszkania{
      background:$ob_blue !important; color:#fff; a {color:#fff;}
    }
  }

  .obstatus-3{
    .views-field-field-status-mieszkania{
      background:#ff0000 !important; color:#fff; a {color:#fff;}
      
    }
  }


  .views-field-field-mapa-pietra {
    img {@extend .img-responsive;}
    .obstatus-1 {fill:$ob_green; opacity:0.8;background:#ccc !important}
    .obstatus-2 {fill:$ob_blue; opacity:0.8;background:#ccc !important}
    .obstatus-3 {fill:#ff0000 ; opacity:0.8;background:#ccc !important}
  }
  
  
  
  
.counterrow {
  text-align: center;
}
.counterrow h3 {
  color: #fff;
  text-align: center;
  padding: 25px 0 0 0;
  border-radius: 50%;
  background: #298477;
  width: 70px;
  height: 70px;
  position: relative;
  margin: 10px auto;
}
.counterrow h5 {
  font-size: 16pt;
}


@media (max-width: 767px) {
  .table-responsive table,
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }
  .table-responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table-responsive td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%!important;
    white-space: normal;
    text-align: left;
  }
  .table-responsive td:before {
    position: absolute;
    top: 8px;
    left: 15px;
    width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }
  .table-responsive td:first-child {
    padding-top: 17px;
  }
  .table-responsive td:last-child {
    padding-bottom: 16px;
  }
  .table-responsive td:first-child:before {
    top: 17px;
  }
  .table-responsive td:before {
    content: attr(data-title);
  }
  .table tbody tr {
    border-top: 1px solid #ddd;
  }
  .table tbody tr td {
    border: none;
  }
}
.mapify-polygon[data-highlight]{
    /*fill: #23b14d ;*/
	fill: rgba(63,42,175,0.7);
}
.mapify-polygon[data-highlight-2]{
    /*fill: #23b14d ;*/
	fill: rgba(0,158,224,0.7);
}