/* ////////////////////////////////////////////////////   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: 1200px) { /*----------  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)  ---------------------- */

.cards{ padding:5% 0%; }
.cards:not(.no-margin) > div{ margin: 1% !important; width:98%; }
.cards.col-2 > div { width:48%; }
.cards.col-3 > div { width:31.33%; }
.cards.col-4 > div { width:23%; }
.cards.w-full{ padding:2%; }


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

@media only screen and (max-width: 1280px) { /*----------  HD+  ----------------*/
  .cards.w-full{ padding:3%; }
}
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/
  .cards{ padding:2%; }
}
@media only screen and (max-width: 1200px) { /*----------  DESKTOP  ------------*/
  .cards, .cards.w-full { padding:3%; }
  .cards.col-4 > div  { width:31.33%; }
}
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/
  .cards.col-4 > div{ width:48%; }
  .cards.col-3 > div{ width:48%; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .cards, .cards.w-full{ padding:3%; }
  .cards > div, .cards.col-2 > div, .cards.col-3 > div{ margin: 2% !important; width:96%; flex:none !important; }
  .cards.col-4 > div{ width:46%; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .cards, .cards.w-full{ padding:3%; }
  .cards > div{ margin: 3% !important; width:94% !important; }
}



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

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

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

*[class*="bg-"] .card { background-color:transparent; }



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

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

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

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

.card p {
  margin:0;
  padding:1em 2em 0 2em;
  color:rgb(40, 50, 78);
  font-size:0.9em;
  text-align:center;
}
.card p:first-of-type{ padding-top:2em !important; }
.card p:last-of-type{ padding-bottom:2em !important; }
.card p.title{
  font-family: "Roboto Slab", sans-serif;
  font-size:1em;
  font-weight:bold;
  color:rgb(30, 40, 64);
}
.card p.subtitle{
  padding:0 2em 0 2em !important;
  font-style: italic;
  color:#134db2;
}
.card p.important{
  font-family: "Roboto Slab", sans-serif;
  font-size:1em;
  font-weight:bold;
  color:#134db2;
}

/*----------  Button  ------------------*/

.card .btn { margin:1em 0 !important; }


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

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .cards p, .cards.col-2 p, .cards.col-3 p{ font-size:1em; }
  .card p { padding:1em 1em 0 1em; }
  .card p:first-of-type { padding-top:1em !important; }
  .card p:last-of-type { padding-bottom:1em !important; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .cards p{ font-size:1em; }
}



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

.card > a{
  display:flex;
}
.card > p, .card > h1, .card > h2, .card > h3, .card > h4, .card > h5{
  padding-left: 5%;
  padding-right: 5%;
}
.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: 2rem auto 0 auto !important;
  display:flex;
  justify-content: center;
}
.card .img-icon.XL{
  width: 15rem;
  margin: 4rem auto 0 auto !important;
}
.card .img-icon.gallery{
  width: auto !important;
  margin-top: 0 !important;
}
.card .img-icon img{
  width: auto;
  max-width: 100%;
  max-height: 20vw;
}
.card .img-icon.XL img{
  max-height: 25vw;
}
.card .img-circle{
  width: 10rem;
  height: 10rem;
  margin: 2rem auto -1em auto !important;
  padding: 1rem;
  border: 3px solid #f8f8f8;
  border-radius: 50% !important;
}
.card .img-circle img{
  border-radius: 50% !important;
  width: auto;
  max-width: 100%;
}


/* /////////////////////////////   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;
  padding-top: 0.4em !important;
}
.card *:last-child[class*="fa-"]{
  padding-bottom: 0.4em !important;
}
.card.icon-left {
  padding-left: 3em;
}
.card.icon-left * {
  text-align: left;
}
.card.icon-left i{
  position: absolute;
  top: 0.6em;
  left: 0.6em;
  font-size:2em;
  text-align: left;
  padding-top: 0 !important;
}
.card .flipcard-icon{
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.card .flipcard-icon::before{
  color: white !important;
  font-size: 20px;
  font-weight: 300;
}



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

.clickable .card{
  cursor: pointer;
  transition: all .25s ease-in-out;
}
.clickable: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: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;
}




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

.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{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.card .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.card:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.card:hover .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) { font-size:0.85rem; }
    .card p:last-of-type + .btns .btn { margin: 0 !important; }
}