* { box-sizing: border-box; }

.framedesplegables {width: 100%; height: 300px; padding: 0; border: none; margin-bottom:40px; padding: 0 5px; }
.colexpandbody {position:relative; overflow:hidden; width:100%; height:100%;}
.strips { min-height: 100%; text-align: left; overflow: hidden; color: black; height:100% }


.strip__inner-text ul { list-style-type:none !important}
.strip__inner-text ul li a { text-decoration:none; color:#000; font-weight:400;  font-size:1.1em}
.strip__inner-text ul li a:hover { text-decoration: underline}


.strips__strip { will-change: width, left, z-index, height; position: absolute; width: 25%; min-height: 100%; overflow: hidden; cursor: pointer; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border-right:#FFFFFF 65px solid; border-left:#FFFFFF 7px solid }
.strips__strip:nth-child(1) { left: 0;top:0; }
.strips__strip:nth-child(2) { left: 25vw;top:0; }
.strips__strip:nth-child(3) { left: 50vw;top:0; }
.strips__strip:nth-child(4) { left: 75vw;top:0; }
.strips__strip:nth-child(5) { left: 80vw;top:0; }

.strips__strip:nth-child(1) .strip__content {/*background:#f18969;*/ background:url(../_img/cab-institut.jpg) left;  -webkit-transform: translate3d(-100%, 0, 0); 	transform: translate3d(-100%, 0, 0);-webkit-animation-name: strip1; animation-name: strip1; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.strips__strip:nth-child(2) .strip__content {/*background:#34b5aa;*/ background:url(../_img/cab-sectors.jpg) left; -webkit-transform: translate3d(0, 100%, 0); 	transform: translate3d(0, 100%, 0); -webkit-animation-name: strip2; animation-name: strip2; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.strips__strip:nth-child(3) .strip__content {/*background:#ecbe14;*/ background:url(../_img/cab-actualitat.jpg) left; -webkit-transform: translate3d(0, -100%, 0); 	transform: translate3d(0, -100%, 0);-webkit-animation-name: strip3; animation-name: strip3; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.strips__strip:nth-child(4) .strip__content {/*background:#29677A;*/ background:url(../_img/cab-ajuts.jpg) left; -webkit-transform: translate3d(0, 100%, 0); 	transform: translate3d(0, 100%, 0); -webkit-animation-name: strip4; animation-name: strip4; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.strips__strip:nth-child(5) .strip__content {/*background:#FB9A88;*/ background:url(../_img/cab-ajuts.jpg) left; -webkit-transform: translate3d(100%, 0, 0); 	transform: translate3d(100%, 0, 0); -webkit-animation-name: strip5; animation-name: strip5; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }


.strips .strip__content { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: left; -webkit-align-items: left; -ms-flex-align: left; align-items: left; -webkit-box-pack: left; -webkit-justify-content: left; -ms-flex-pack: left; justify-content: left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none; }
/*.strips .strip__content:hover:before { -webkit-transform: skew(-30deg) scale(3) translate(0, 0); transform: skew(-30deg) scale(3) translate(0, 0); opacity: 0.1; }
.strips .strip__content:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0.05; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: skew(-30deg) scaleY(1) translate(0, 0); transform: skew(-30deg) scaleY(1) translate(0, 0); -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); }*/
.strips .strip__inner-text { /*will-change: transform, opacity;*/ visibility:hidden; position: absolute; z-index: 5; top: 45%; left: 47%; width: 90%; -webkit-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.strips__strip--expanded { width: 100%; top: 0 !important; left: 0 !important; z-index: 3; cursor: default; border-right:#FFFFFF 7px solid;}

/*.strips__strip--expanded .strip__content:hover:before { -webkit-transform: skew(-30deg) scale(1) translate(0, 0); transform: skew(-30deg) scale(1) translate(0, 0); opacity: 0.05; }*/
.strips__strip--expanded .strip__title { opacity: 0;      }
.strips__strip--expanded .strip__inner-text { opacity: 1; visibility:inherit; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
.strip__title {padding:20px; display: block; margin: 0; position: relative; z-index: 2; width: 100%; font-size: 2.0em; font-weight:700;color: #000; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); }

.strip__content h2 {border-top:none;}

.strip__close { position: absolute; right: 3vw; top: 2vw; opacity: 0; font-weight: bold; font-size: 1.4em; z-index: 10; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;  }
.strip__close--show { opacity: 1; font-weight: bold; font-size: 1.4em; }

.strip__content {position:relative;}

.strip__content ul {float:left;padding:0;margin:20px 0 0 0;width:100%;}
.strip__content ul li {float:left;display:inline;padding:5px;width:33%;}
.strip__content ul li a {background:#000; color:#fff;width:100%;padding:10px;float:left;}
.strip__content ul li a:hover {background:#fff; color:#000;text-decoration:none;}

@media screen and (min-width: 2000px) {
	.strips .strip__content {background:#f18969 !important;}
}
@media screen and (min-width: 800px) {
.framedesplegables {padding: 0; }
}

@media screen and (max-width: 1500px) {
	.strip__title 				{ font-size: 1.5em;}
	.strip__inner-text ul li a  {font-size:0.9em;}
}

@media screen and (max-width: 1024px) {
.strips__strip { min-height: 25%; border:#FFFFFF 5px solid}
.strips__strip:nth-child(1) { top: 0; left: 0; width: 100%; }
.strips__strip:nth-child(2) { top: 25%; left: 0; width: 100%; }
.strips__strip:nth-child(3) { top: 50%; left: 0; width: 100%; }
.strips__strip:nth-child(4) { top: 75%; left: 0; width: 100%; }
.strips__strip:nth-child(5) { top: 100%; left: 0; width: 100%; }
.strips__strip--expanded 	{ min-height: 100%; }
.strip__title 				{ padding:15px 10px !important; }

.strip__title 				{ font-size: 20px;}
.strip__inner-text h2 		{ display:none}
.strip__inner-text ul li a 	{ font-size: 1em;}
}
@media screen and (max-width: 760px) {
	.strip__title 				{ font-size: 15px;}
}

@media screen and (max-width: 600px) {
.framedesplegables {height: 400px; }
	.strip__inner-text ul li {width:50%;}
	.strip__inner-text ul li a {font-size:.85em;}
}

@media screen and (max-width: 450px) {
.framedesplegables {height: 450px; }
	.strip__inner-text ul li {width:100%;}
	.strip__content ul li a {padding: 5px;}
}




 @-webkit-keyframes strip1 {
 0% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes strip1 {
 0% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes strip2 {
 0% {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 
}
}
@keyframes strip2 {
 0% {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes strip3 {
 0% {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@keyframes strip3 {
 0% {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes strip4 {
 0% {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@keyframes strip4 {
 0% {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes strip5 {
 0% {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
@keyframes strip5 {
 0% {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
/* Demo purposes */
.tancar {background-image: url(../_img_icon/slide-navegacion-sprite.png); background-position:right top;  width:50px; height:50px }
.tancar:hover {background-image: url(../_img_icon/slide-navegacion-sprite-hover.png); background-position:right top;  width:50px; height:50px }
h2 { font-size: 2.0em; margin: 0 0 6px;     
	-webkit-margin-before: 0.1em !important ;
    -webkit-margin-after: 0.1em !important;}
  
p { margin: 0 0 6px; }