/* ////////////////////////////////////////////////////   HELP   ////////////////////////////// */
/*
          ##     ## ######## ##       ########
          ##     ## ##       ##       ##     ##
          ##     ## ##       ##       ##     ##
          ######### ######   ##       ########
          ##     ## ##       ##       ##
          ##     ## ##       ##       ##
          ##     ## ######## ######## ##

FLEX:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CHARSET:
https://www.toptal.com/designers/htmlarrows/
ASCII TEXT ART:
http://patorjk.com/software/taag/#p=display&h=0&f=Banner3&t=GALLERY
FontAwesome	-	https://fontawesome.bootstrapcheatsheets.com/
*/

/* RWD: */

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 1280px) { /*----------  HD+  ----------------*/ }
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/ }
@media only screen and (max-width: 1080px) { /*----------  DESKTOP  ------------*/ }
@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/ }
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/ }
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/ }
@media only screen and (min-width: 768px)  { /*----------  MOBILE (down)  ------*/ }
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/ }
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/ }



/* ////////////////////////////////////////////////////   CONTAINERS   ////////////////////////////// */
/*
           ######   #######  ##    ## ########    ###    #### ##    ## ######## ########
          ##    ## ##     ## ###   ##    ##      ## ##    ##  ###   ## ##       ##     ##
          ##       ##     ## ####  ##    ##     ##   ##   ##  ####  ## ##       ##     ##
          ##       ##     ## ## ## ##    ##    ##     ##  ##  ## ## ## ######   ########
          ##       ##     ## ##  ####    ##    #########  ##  ##  #### ##       ##   ##
          ##    ## ##     ## ##   ###    ##    ##     ##  ##  ##   ### ##       ##    ##
           ######   #######  ##    ##    ##    ##     ## #### ##    ## ######## ##     ##
*/

/* --------------------  CARDS (inner container)  ---------------------- */




/* ////////////////////////////////////////////////////   SINGLE CARD   ////////////////////////////// */
/*
           ######     ###    ########  ########
          ##    ##   ## ##   ##     ## ##     ##
          ##        ##   ##  ##     ## ##     ##
          ##       ##     ## ########  ##     ##
          ##       ######### ##   ##   ##     ##
          ##    ## ##     ## ##    ##  ##     ##
           ######  ##     ## ##     ## ########
*/

.card{
  display: flex;
  flex-direction:column;
  position: relative;
  padding:40px;
}

.card > *:first-child{ margin-top:0px !important; }

.card.left > * { text-align:left; }
.card.right > * { text-align:right; }

*[class*="bg-"] .card { background-color:transparent; }
.section:not(.no-margin) .card:not([class*="bg-"]) { padding:0 !important; }

/* wide margin */

.margin-wide .card{
  padding:60px;
}

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  {
  .margin-wide .card{ padding:50px; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .card { padding:30px; }
  .margin-wide .card{ padding:40px; }
}
@media only screen and (max-width: 600px)  {
  .card { padding:25px; }
  .margin-wide .card{ padding:30px; }
}
@media only screen and (max-width: 480px)  {
}

/* ////////////////////////////////////////////////////   TEXT   ////////////////////////////// */
/*
          ######## ######## ##     ## ########
             ##    ##        ##   ##     ##
             ##    ##         ## ##      ##
             ##    ######      ###       ##
             ##    ##         ## ##      ##
             ##    ##        ##   ##     ##
             ##    ######## ##     ##    ##
*/

/*----------  Title  ------------------*/

.card h3, .card h4, .card h5 {
  text-align:center;
}

/*----------  Paragraph  ------------------*/

.card p {
  color:rgb(40, 50, 78);
  font-size:0.9em;
  text-align:center;
}
.card p.title{
  font-family: "Roboto Slab", sans-serif;
  font-size:1em;
  font-weight:bold;
  color:rgb(30, 40, 64);
  padding-bottom: 1.2em;
}
.card p.subtitle{
  font-style: italic;
  color:#134db2;
}
.card p.important{
  font-family: "Roboto Slab", sans-serif;
  font-size:1em;
  font-weight:bold;
  color:#134db2;
}
.card .btns{
	justify-content: center;
  flex-direction: row;
}

/*----------  Style  ------------------*/

.card.bg-dark p {
  color:white;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .cards p, .cards.col-2 p, .cards.col-3 p{ font-size:1em; }
}



/* ////////////////////////////////////////////////////   IMAGES   ////////////////////////////// */
/*
          #### ##     ##    ###     ######   ########  ######
           ##  ###   ###   ## ##   ##    ##  ##       ##    ##
           ##  #### ####  ##   ##  ##        ##       ##
           ##  ## ### ## ##     ## ##   #### ######    ######
           ##  ##     ## ######### ##    ##  ##             ##
           ##  ##     ## ##     ## ##    ##  ##       ##    ##
          #### ##     ## ##     ##  ######   ########  ######
*/

.card > a{
  display:flex;
}
.card img{
  width:100%;
}
.card.img {
  background-position: 50% 50% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.card .img-icon{
  width: 10rem;
  margin: 0 auto !important;
  display:flex;
  justify-content: center;
}
.card .img-icon.XL{
  width: 15rem;
}
.card .img-icon.gallery{
  width: auto !important;
}
.card .img-icon img{
  width: auto;
  max-width: 100%;
  max-height: 20vw;
}
.card .img-icon.XL img{
  max-height: 25vw;
}
.card > *:first-child.img-circle {
  /*margin-top:-40px !important;*/
}
.card.foto {
	position: relative;
  padding: 0 !important;
}
.card .foto-desc{
  padding: 1.2em;
}
.section:not(.no-margin) .card:not([class*="bg-"]) .foto-desc { padding:1.2em 0 0 0 !important; }

/* wide margin */

.margin-wide .card > *:first-child.img-circle {
  margin-top:-60px !important;
}

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .card .img-icon{ width: auto; }
  .card .img-icon img { max-height: 25vw; }
  .card .img-icon.XL img { max-height: 32vw; }
}



/* ////////////////////////////////////////////////////   ICONS   ////////////////////////////// */
/*
          ####  ######   #######  ##    ##  ######
           ##  ##    ## ##     ## ###   ## ##    ##
           ##  ##       ##     ## ####  ## ##
           ##  ##       ##     ## ## ## ##  ######
           ##  ##       ##     ## ##  ####       ##
           ##  ##    ## ##     ## ##   ### ##    ##
          ####  ######   #######  ##    ##  ######
*/

.card i{
  font-size:5em;
  text-align: center;
}
.card.icon-left {
  padding-left: 75px;
}
.card.icon-left * {
  text-align: left;
}
.card.icon-left i{
  position: absolute;
  top: 40px;
  left: 25px;
  font-size:2em;
  text-align: left;
}
.card.icon-left i + *{
  margin-top: 0;
}
.card .flipcard-icon{
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.card .flipcard-icon::before{
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: -28px;
  left: calc(50% - 16px);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: .3s;
  transition: .3s;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  color: #97be0d;
  border-radius: 50%;
  padding-top: 6px;
  background: white;
}
.card:hover .flipcard-icon::before{
  color: white;
  background: #134db2;
}

/* wide margin */

.margin-wide .card.icon-left i{
  top: 60px;
  left: 25px;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  S  ------------------*/
  .card.icon-left{ padding-left: 30px !important; }
  .card.icon-left > *{
    text-align: center !important;
    margin-top: 1.2em !important;
  }
  .card.icon-left > *:first-child{
    margin-top: 0 !important;
  }
  .card.icon-left i{
    position: relative;
    top: 0 !important;
    left: 0 !important;
    font-size: 5em !important;
  }
}



/* ////////////////////////////////////////////////////   CLICKABLE CARDS   ////////////////////////////// */
/*
           ######  ##       ####  ######  ##    ##    ###    ########  ##       ########
          ##    ## ##        ##  ##    ## ##   ##    ## ##   ##     ## ##       ##
          ##       ##        ##  ##       ##  ##    ##   ##  ##     ## ##       ##
          ##       ##        ##  ##       #####    ##     ## ########  ##       ######
          ##       ##        ##  ##       ##  ##   ######### ##     ## ##       ##
          ##    ## ##        ##  ##    ## ##   ##  ##     ## ##     ## ##       ##
           ######  ######## ####  ######  ##    ## ##     ## ########  ######## ########
*/

.clickable .card{
  cursor: pointer;
  transition: all .25s ease-in-out;
}
.clickable:not(.flipcards):hover .card{
  /*
  filter:blur(3px);
  -webkit-transform: scale(.95);
  -ms-transform: scale(.95);
  transform: scale(.95);
  */
  opacity:.3;
  transition: all .25s ease-in-out;
}
.clickable:not(.flipcards):hover .card:hover{
  /*
  filter:blur(0px);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
*/
  opacity:1;
  transition: all .25s ease-in-out;
}




/* ////////////////////////////////////////////////////   CLICKABLE CARDS   ////////////////////////////// */
/*
          ######## ##     ## ########     ###    ##    ## ########
          ##        ##   ##  ##     ##   ## ##   ###   ## ##     ##
          ##         ## ##   ##     ##  ##   ##  ####  ## ##     ##
          ######      ###    ########  ##     ## ## ## ## ##     ##
          ##         ## ##   ##        ######### ##  #### ##     ##
          ##        ##   ##  ##        ##     ## ##   ### ##     ##
          ######## ##     ## ##        ##     ## ##    ## ########
*/

/* --- BTN --- */

.expand-btn{
  z-index: 2;
}
.section:not(.no-margin) .expand-btn::before{
  display: block;
  width: 100%;
  height: 0px;
  bottom: 0px;
  position: absolute;
  background: #4e5469;
  content:" ";
  -webkit-transition: .3s;
  transition: .3s;
}
.section:not(.no-margin) .expand-btn.active::before{
  display: block;
  height: 33px;
  bottom: -33px;
}
.expand-btn::after{
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
	-ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  -webkit-transition: .3s;
  transition: .3s;

  font-family: 'FontAwesome';
  content:"\f067";
  font-size: 24px;
  font-weight:300;
  text-align: center;
  color: white;

  border-radius: 50%;
  padding-top: 11px;

  background: #97be0d;
}
.expand-btn.active::after {
  transform: translate(-50%, 50%) scale(0.8) rotate(-135deg);
  background: #222629;
  color: #97be0d;
  bottom: -41px;
}
.expand-btn:hover{
  cursor: pointer;
}
.expand-btn:hover::after{
  color: #97be0d;
  background: #222629;
}
.expand-btn.active:hover::after{
  color: #fff;
  background: #97be0d;
}

/* --- DESC --- */

.card.expand-desc{
  width: 100% !important;
  margin-left: 0 !important;
  z-index: 1;
  order: 999;
  overflow: hidden;
}
.card.expand-desc:not(.active){
  margin: 0px !important;
}

/* --- no margin --- */

.no-margin .expand-btn::after{
  bottom: 0px;
}
.no-margin .expand-btn.active::after {
  bottom: -14px;
}
.no-margin .card.expand-desc{
  width: 100% !important;
  margin-left: 0 !important;
  order: 999;
}

/* --- wide margin --- */

.section:not(.no-margin) .margin-wide .expand-btn.active::before{
  height: 63px;
  bottom: -63px;
}
.margin-wide .expand-btn.active::after {
  bottom: -64px;
}
.margin-wide .card.expand-desc{
  width: 100% !important;
  margin-left: 0 !important;
  order: 999;
}

/* --- individual --- */

.expand-btn.palmiarnia, .expand-btn.palmiarnia::before, .expand-desc.palmiarnia{
    background: #61892f !important;
}
.expand-btn.mzp, .expand-btn.mzp::before, .expand-desc.mzp{
    background: #434455 !important;
}

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  .margin-wide .expand-btn.active::after {
    bottom: -56px;
  }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .margin-wide .expand-btn.active::after {
    bottom: -48px;
  }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/ }
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/ }

/* ////////////////////////////////////////////////////   FLIPPING CARDS   ////////////////////////////// */
/*
          ######## ##       #### ########   ######     ###    ########  ########   ######
          ##       ##        ##  ##     ## ##    ##   ## ##   ##     ## ##     ## ##    ##
          ##       ##        ##  ##     ## ##        ##   ##  ##     ## ##     ## ##
          ######   ##        ##  ########  ##       ##     ## ########  ##     ##  ######
          ##       ##        ##  ##        ##       ######### ##   ##   ##     ##       ##
          ##       ##        ##  ##        ##    ## ##     ## ##    ##  ##     ## ##    ##
          ##       ######## #### ##         ######  ##     ## ##     ## ########   ######
*/

.cards.flipcards .card{
  padding:0 !important;
}
.card{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
}

.card .front, .card .back{
  background-size: cover;
	background-position: center;

	text-align: center;
	min-height: 320px;

	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
.card .back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.card .front, .card .back, .card:hover .front, .card:hover .back{
    -webkit-transition: -webkit-transform .6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .6s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .6s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card .inner{
    -webkit-transform: translateY(-50%) translateZ(100px) scale(0.94);
            transform: translateY(-50%) translateZ(100px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}
.card .inner > *{ padding-left: 0 !important; padding-right: 0 !important; }
.card .inner > *:first-child{ padding-top: 0 !important; }
.card .inner > *:last-child{ padding-bottom: 0 !important; }
.card .back, .card.unhover:not(.active) .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.card .front, .card.unhover:not(.active) .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.card:hover .back, .card.active .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.card:hover .front, .card.active .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width:768px){ /*----------  MOBILE  -------------*/
    .card .inner{ padding:2em; }
    .card .inner > *:not(.btns):not(.fa):not(h3):not(h4) { font-size:0.85rem; }
}