@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400');

*, *:after, *:before {-webkit-box-sizing: border-box; box-sizing: border-box;}
.clearfix:after {content: ""; display: table; clear: both;}

body {background:#fff; color:#7b7b7b; font:400 16px/1.625 "Open Sans", sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

.pair  {margin:2em auto 4em auto; max-width:1200px; width:100%; border-bottom: 1px solid #eee; padding-bottom:2em;}
.col_l {float:left;  width:48%;}
.col_r {float:right; width:48%;}

/* Grid Item Animation Layout by Mary Lou @ Codrops: https://tympanus.net/codrops/2015/04/15/grid-item-animation-layout/ */

.noscroll {overflow:hidden;} /* Helper class when showing content, added by javascript */

.sidebar {position:fixed; z-index:150; text-align:center; background:#2a282b; width:300px; height:100%; height:100vh; top:0; left:0;}
.main {position:relative; z-index:50;} /* Main content wrap, including section "grid" and section "content" */
.grid {position:relative;} /* Grid container */
.grid a:hover, a:focus {color:#333; outline:none;}

/* Overlay */

.grid::after {content:''; background:rgba(202, 202, 202, 0.4); opacity:0; position:absolute; pointer-events:none; 
              top:0; left:0; width:100%; height:100%; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s; transition:opacity 0.5s;}
.view-single .grid::after {opacity:1;}

/* Top bar above the grid */

.top-bar {background:#fff; width:100%; padding:1.625em 0 0;
   display: -webkit-box; -webkit-box-align: center;
   display: -ms-flexbox;    -ms-flex-align: center;
   display: flex;              align-items: center;
	}

/* Grid item - each of the dummies' squares */

.grid__item {padding: 45px 55px 30px; position: relative; color: inherit; background: #fff; min-height: 200px; cursor: pointer; text-align: center;
   display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-direction: normal;
   display: -ms-flexbox; -ms-flex-direction: column;      -ms-flex-pack: center;
   display: flex;            flex-direction: column;    justify-content: center;
   }

/* Grid item "border" */

.grid__item::before {position:absolute; content:''; top:0px; right:55px; bottom:0px; left:55px; border-bottom:1px solid rgba(74, 74, 74, 0.075);}
.grid__item * {z-index:10;}

/* Grid item element and full content element styles */

.title {margin:0; font:400 1.875em/1.2 'Crimson Text', serif; text-align:center;}
.title--preview {width: 100%;
   -webkit-box-flex: 1; display:-webkit-box;    -webkit-box-align:center;       -webkit-box-pack: center;
           -ms-flex: 1; display:-ms-flexbox;       -ms-flex-align:center;          -ms-flex-pack: center;
       -webkit-flex: 1; display:-webkit-flex; -webkit-align-items:center;-webkit-justify-content:center;
               flex: 1; display:flex;                 align-items:center;        justify-content:center;
   }
.loader {height:1px; width:40%; margin: 1em auto; position:relative; background:rgba(0, 0, 0, 0.1);}
.loader::before {content: ''; position:absolute; width:100%; height:3px; background: #ee7575; left:0; top:-1px;
                 -webkit-transform:scale3d(0, 1, 1); -webkit-transform-origin:0% 50%; 
                         transform:scale3d(0, 1, 1);     -ms-transform-origin:0% 50%; transform-origin:0% 50%;}
.grid__item--loading .loader::before {
   -webkit-transition: -webkit-transform 1s; -webkit-transform: scale3d(1, 1, 1); -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
           transition: -webkit-transform 1s;         transform: scale3d(1, 1, 1);      -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);         
           -o-transition: transform 1s;                                                   transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
           transition: transform 1s; transition: transform 1s, -webkit-transform 1s;
   }

.category {margin:0; position:relative; font:italic 400 1em "PT Serif", serif; text-align:center; display:block;}
.title--preview,
.loader,
.category {
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
          transition: opacity 0.2s, -webkit-transform 0.2s;
       -o-transition: transform 0.2s, opacity 0.2s;
          transition: transform 0.2s, opacity 0.2s;
          transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
       -o-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
          transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
   }
       
/* Closing (delays) */

.title--preview       {-webkit-transition-delay:0.15s; transition-delay:0.15s;}
.loader               {-webkit-transition-delay:0.1s;  transition-delay:0.1s;}
.grid__item .category {-webkit-transition-delay:0s;    transition-delay:0s;}

/* Opening */

.grid__item--animate .title--preview {opacity:0; -webkit-transition-delay:0s;    transition-delay:0s;    -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0);}
.grid__item--animate .loader         {opacity:0; -webkit-transition-delay:0.1s;  transition-delay:0.1s;  -webkit-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0);}
.grid__item--animate .category       {opacity:0; -webkit-transition-delay:0.15s; transition-delay:0.15s; -webkit-transform:translate3d(0, -40px, 0); transform:translate3d(0, -40px, 0);}
.meta:before {display:table; content:'';}
.meta:after  {display:table; content:''; clear:both;}
.meta--preview .meta__avatar {
                   -webkit-transition:-webkit-transform 0.4s, opacity 0.4s;
                   -webkit-transition:opacity 0.4s, -webkit-transform 0.4s;
	                        transition:opacity 0.4s, -webkit-transform 0.4s;
	                        -o-transition:transform 0.4s, opacity 0.4s;
	                        transition:transform 0.4s, opacity 0.4s;                        
	                        transition:transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
   -webkit-transition-timing-function:cubic-bezier(0.8, -0.8, 0.4, 1.6);
	     -o-transition-timing-function:cubic-bezier(0.8, -0.8, 0.4, 1.6);
           transition-timing-function:cubic-bezier(0.8, -0.8, 0.4, 1.6);
	}
.meta--preview .icon {display:block; font-size:2.25em; text-align:center; margin:.5em auto;}
.meta__misc--seperator {display:block; clear:both; text-align:left; padding:5px 0;padding:20px 0 0; margin:40px 0 0; border-top:1px solid #e5e5e5;}
.grid__item--loading .meta__avatar {opacity:0;
    -webkit-transition-delay:0.7s; -webkit-transform:scale3d(0.5, 0.5, 1);
	         transition-delay:0.7s;         transform:scale3d(0.5, 0.5, 1);
	}

/* Placeholder element (dummy that gets animated when we click on an item) */

.placeholder {pointer-events:none; position:absolute; width:-webkit-calc(100% + 5px); width:calc(100% + 5px); height:-webkit-calc(100vh + 5px); height:calc(100vh + 5px); z-index:100; top:0; left:0; background:#fff; 
              -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; }
.placeholder.placeholder--trans-in,
.placeholder.placeholder--trans-out {
   -webkit-transition:-webkit-transform 0.5s; 
           transition:-webkit-transform 0.5s; 
        -o-transition:transform 0.5s; 
           transition:transform 0.5s; 
           transition:transform 0.5s, -webkit-transform 0.5s;
   }
   
/* Content section */

.content {position:absolute; top:0; left:0; width:100%; pointer-events:none; height:0; visibility:hidden; z-index:400; overflow:hidden;}
.content.content--show {height:100vh; pointer-events:auto; visibility:visible;}

/* Scroll helper wrap */

.scroll-wrap {position:absolute; width:100%; height:100%; left:0; top:0; z-index:1; overflow-y:scroll; -webkit-overflow-scrolling:touch;}

/* Single content item - articles */

.content__item {position:absolute; margin-top:3em; top:0; width:100%; overflow:hidden; height:0; opacity:0; padding:5em 12%; pointer-events:none;}
.content__item h3 {font-size:1.25em; margin:2em auto; font-weight:600; text-align:left;}
.content__item p,
.content__item ul {max-width:1200px; margin:1em auto; text-align:left;}
.meta--full + p {font-size:1.125em; margin-bottom:4em;}
.content__item.content__item--show {height:auto; min-height:100vh; opacity:1; pointer-events:auto; -webkit-transition:opacity 0.6s; transition:opacity 0.6s;}
.content__item a {outline:none; color:#c00; text-decoration:none;}

/* Content elements */

.category--full,
.title--full    {opacity:0; -webkit-transform:translate3d(0, 40px, 0); transform:translate3d(0, 40px, 0);}
.category--full {font-size:1.25em; margin-bottom:20px;}
.title--full    {font-size:3.25em;}
.meta--full {font-size:1em; margin:0 auto 2em; max-width:1200px;}
.meta--full .meta__author,
.meta--full .meta__avatar {opacity:0; display:block; -webkit-transform:scale3d(0.5, 0.5, 1); transform:scale3d(0.5, 0.5, 1);}
.meta--full .meta__author {font-size:1.25em; margin-bottom:4em; font-weight:600; text-align:center;}
.meta--full .meta__avatar {font-size:2.25em; margin:1.5em auto;}
.content__item p,
.content__item img {opacity:0;}
.content__item p span.block {display:inline-block;}
.content__item--show .category--full,
.content__item--show .title--full,
.content__item--show .meta--full .meta__avatar,
.content__item--show .meta--full .meta__author {opacity:1; 
	-webkit-transform:translate3d(0, 0, 0); -webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
           transform:translate3d(0, 0, 0); -webkit-transition:opacity 0.3s, -webkit-transform 0.3s; 
          transition:opacity 0.3s, -webkit-transform 0.3s;
          -o-transition:transform 0.3s, opacity 0.3s;
          transition:transform 0.3s, opacity 0.3s; 
          transition:transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	}
.content__item--show .category--full,
.content__item--show .title--full {-webkit-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-timing-function:ease-out;}
.content__item--show .meta--full .meta__avatar {-webkit-transition-delay:0.2s; transition-delay:0.2s;}
.content__item--show.content__item p,
.content__item--show.content__item img {opacity:1; -webkit-transition:opacity 0.5s 0.25s; transition:opacity 0.5s 0.25s;}
.content__item--show.content__item img.art {max-width:1200px; display:block; width:100%; margin:1em auto;}
.content__item--show.content__item img.fl {display:block; float:left; border:1px solid #000; margin-right:2em; opacity: 1;
                                           -webkit-transition:opacity 0.3s !important; transition:opacity 0.3s !important;}
.content__item--show.content__item img.fl:hover {opacity:0.5;}

/* Close button (for content) */

.close-button {position:absolute; top:1.25em; right:1em; /*width:100vw;*/ border:0; margin:0; padding:1.25em .5em .75em; z-index:100; 
               background:#fff; color:#ddd; font-size:1.25em; text-align:right; cursor:pointer; opacity:0; pointer-events:none;
              -webkit-touch-callout:none; -webkit-transition:opacity 0.3s; transition:opacity 0.3s;}
.close-button:hover {color:#7b7b7b;}

/* Show class for content close button */

.close-button--show {opacity:1; pointer-events:auto;}

/* SVG icons class */
/* For targeting individual icons, use:   .icon-cross {font-size:...; color:...;}  */

.icon {display:inline-block; width:1em; height:1em; fill:currentColor; padding:0; border:0; outline:0; z-index:100;}
.icon-download2, .icon-phone, .icon-envelop {position:relative; bottom:-2px;}

/* Simple slide show for the images in Mi casa es su casa */
/* https://vedmant.com/image-slider-on-pure-css3/#comment-139 */

.fadein2, .fadein3, 
.fadein4, .fadein5 {position:relative; width:100%; padding:0; margin:0; padding-bottom:38.8888%; list-style-type:none; overflow:hidden;}

.fadein2 li img, .fadein3 li img, 
.fadein4 li img, .fadein5 li img {width: 100%;}

@-webkit-keyframes fadein2 {     25%{opacity:1;}      50%{opacity:1;}     100%{opacity:0;}}
@-webkit-keyframes fadein3 {16.6666%{opacity:1;} 33.3333%{opacity:1;} 66.6666%{opacity:0;}}
@-webkit-keyframes fadein4 {   12.5%{opacity:1;}      25%{opacity:1;}      50%{opacity:0;}}
@-webkit-keyframes fadein5 {     10%{opacity:1;}      20%{opacity:1;}      40%{opacity:0;}}

@keyframes fadein2 {25%     {opacity:1;} 50%     {opacity:1;}     100%{opacity:0;}}
@keyframes fadein3 {16.6666%{opacity:1;} 33.3333%{opacity:1;} 66.6666%{opacity:0;}}
@keyframes fadein4 {12.5%   {opacity:1;} 25%     {opacity:1;}      50%{opacity:0;}}
@keyframes fadein5 {10%     {opacity:1;} 20%     {opacity:1;}      40%{opacity:0;}}

.fadein2 li, .fadein3 li, .fadein4 li, .fadein5 li, 
.fadein6 li, .fadein7 li, .fadein8 li, .fadein9 li {position:absolute; top:0; right:0; bottom:0; left:0; opacity:0;}

.fadein2 li{-webkit-animation:fadein2  8s infinite; animation:fadein2  8s infinite;}
.fadein3 li{-webkit-animation:fadein3 12s infinite; animation:fadein3 12s infinite;}
.fadein4 li{-webkit-animation:fadein4 16s infinite; animation:fadein4 16s infinite;}
.fadein5 li{-webkit-animation:fadein5 20s infinite; animation:fadein5 20s infinite;}
.fadein2 li:nth-child(1), .fadein3 li:nth-child(1), .fadein4 li:nth-child(1), .fadein5 li:nth-child(1) {-webkit-animation-delay:0s;  animation-delay:0s;}
.fadein2 li:nth-child(2), .fadein3 li:nth-child(2), .fadein4 li:nth-child(2), .fadein5 li:nth-child(2) {-webkit-animation-delay:4s;  animation-delay:4s;}
.fadein3 li:nth-child(3), .fadein4 li:nth-child(3), .fadein5 li:nth-child(3) {-webkit-animation-delay:8s;  animation-delay:8s;}
.fadein4 li:nth-child(4), .fadein5 li:nth-child(4) {-webkit-animation-delay:12s; animation-delay:12s;}
.fadein5 li:nth-child(5) {-webkit-animation-delay:16s; animation-delay:16s;}

/* Viewport sizes based on column number and sidebar */

@media screen and (min-width: 761px) {
	html, body, .container, .main {height:100vh;}
	.main {height:100%; margin-left:300px;}
	.grid__item {padding:2.75em 2.75em 2em;}
	}
@media screen and (min-width: 901px) {
	.grid {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
	.grid__item {width:50%; border:none; min-height:280px;} /* 2 columns */
	.grid__item::before {top:5px; right:5px; bottom:5px; left:5px; border:1px solid rgba(74, 74, 74, 0.075); -webkit-transition:opacity 0.3s; transition:opacity 0.3s;}
	.grid__item:hover::before,
	.grid__item:focus::before {border:3px solid rgba(204, 0, 0, 0.5);}
	.grid__item--loading.grid__item::before {opacity:0;}
	}
@media screen and (min-width: 1200px) {/* 3 columns */ .grid__item {width:33.333%; min-height:320px;}}
@media screen and (min-width: 1500px) {/* 4 columns */ .grid__item {width:25%;}}

@media screen and (max-width: 1000px) {
	.col_l, .col_r {width:100%; float:none;}
	.content__item--show.content__item img.fl {float:none; margin:2em auto 0 auto;}
	}
@media screen and (max-width: 900px) {.grid__item {top:1.5em;}}
	
@media screen and (max-width: 760px) {
	.grid__item {top:8em;}
	.sidebar {display:none;}
	.top-bar {padding:3em 0; background:#2a282b; position:fixed; z-index:1001;}
	.title--full {font-size:3em;}
	.content__item {margin-top:8em;}
   .content .close-button {width:calc(100vw - 1em); top:4.5em; padding:1em .5em .5em .5em;}
	.content .close-button::before {content:''; position:absolute; top:0; right:0; background:transparent; width:calc(100vw - 1em); height:50px; pointer-events:none; z-index:-1;}
	}
	
@media screen and (max-width: 560px) {
	.content__item {padding:5em 5%;}
}
@media screen and (max-width: 320px) {
	.top-bar {padding:60px;}
	.grid__item {top:120px;}
	.content__item {margin-top:120px;}
	.content .close-button {top:120px;}
	}