*{padding: 0;margin: 0;box-sizing: border-box;}
body {background: #;font-weight: 400;font-family: 'Source Sans Pro', sans-serif;font-size: 16px;}
/*  header  */
.contacto{ width: 40%;height:auto;;float: right;}


#owl-demo .item {
padding-top: 15px;
padding-bottom: 25px;
margin: 3px;
}
.boton {text-align: center;padding: 5px;}
.boton  a {text-decoration: none;color: #b7b7bc; }
.boton  a:hover {text-decoration: none;color: #444; }
.item p a  {text-decoration: none;color: #b7b7bc; }
.item p a:hover  {text-decoration: none;color: #444; }
#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}
.noticiastitulo{
font-family: 'Source Sans Pro', sans-serif;   
font-weight: 300; 
background:  #f3f3f4;
height: 50px;
text-align: center;
padding: 15px;
color: #b7b7bc;
font-size: 16px;

}
.noticiastexto{
padding: 5px;
font-family: 'Source Sans Pro', sans-serif;   
width: 100%;
height: 160px;
background:  #fff;
text-align:center;
font-size: 17px;
}

.logop{
	border-top: 1px solid #b7b7bc;
	border-bottom: 1px solid #b7b7bc;    
	width: 100%;
	height: 120px;
	margin: 0;
	padding: 0;
	background: #fff;}
.logoheader{
	margin: 1% 10%;
	float: left;
	width:240px;
	height:auto;
}
.btn2{
width: 100%;padding: 15px;
}
.btn{
width: 100%;background: #f5f5f5;
}
.btn a{text-decoration: none;color: #444;}
/*  menu */
.btn{width: 100%;padding: 15px;}

.color111,.color222,.color333,.color444,.color555,.color666{
width: 16.666%;
height: 5px;
float: left;
}
.color11,.color22,.color33,.color44,.color55,.color66{
width:50%;
height: 3px;
float: left;
}
.color1,.color2,.color3,.color4,.color5,.color6{
width: 16.666%;
height: 2px;
float: left;
}
.logofondo{
width: 400px;
}

.color1,.color11,.color111{
background: rgba(108,54,93,1);
background: -moz-linear-gradient(left, rgba(108,54,93,1) 0%, rgba(166,59,86,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(108,54,93,1)), color-stop(100%, rgba(166,59,86,1)));
background: -webkit-linear-gradient(left, rgba(108,54,93,1) 0%, rgba(166,59,86,1) 100%);
background: -o-linear-gradient(left, rgba(108,54,93,1) 0%, rgba(166,59,86,1) 100%);
background: -ms-linear-gradient(left, rgba(108,54,93,1) 0%, rgba(166,59,86,1) 100%);
background: linear-gradient(to right, rgba(108,54,93,1) 0%, rgba(166,59,86,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c365d', endColorstr='#a63b56', GradientType=1 );
}
.color2,.color22,.color222{
background: rgba(198,55,100,1);
background: -moz-linear-gradient(left, rgba(198,55,100,1) 0%, rgba(213,85,132,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(198,55,100,1)), color-stop(100%, rgba(213,85,132,1)));
background: -webkit-linear-gradient(left, rgba(198,55,100,1) 0%, rgba(213,85,132,1) 100%);
background: -o-linear-gradient(left, rgba(198,55,100,1) 0%, rgba(213,85,132,1) 100%);
background: -ms-linear-gradient(left, rgba(198,55,100,1) 0%, rgba(213,85,132,1) 100%);
background: linear-gradient(to right, rgba(198,55,100,1) 0%, rgba(213,85,132,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c63764', endColorstr='#d55584', GradientType=1 );
}
.color3,.color33,.color333{
background: rgba(228,71,71,1);
background: -moz-linear-gradient(left, rgba(228,71,71,1) 0%, rgba(218,98,77,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(228,71,71,1)), color-stop(100%, rgba(218,98,77,1)));
background: -webkit-linear-gradient(left, rgba(228,71,71,1) 0%, rgba(218,98,77,1) 100%);
background: -o-linear-gradient(left, rgba(228,71,71,1) 0%, rgba(218,98,77,1) 100%);
background: -ms-linear-gradient(left, rgba(228,71,71,1) 0%, rgba(218,98,77,1) 100%);
background: linear-gradient(to right, rgba(228,71,71,1) 0%, rgba(218,98,77,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e44747', endColorstr='#da624d', GradientType=1 );}
.color4,.color44,.color444{
background: rgba(236,136,74,1);
background: -moz-linear-gradient(left, rgba(236,136,74,1) 0%, rgba(236,234,111,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(236,136,74,1)), color-stop(100%, rgba(236,234,111,1)));
background: -webkit-linear-gradient(left, rgba(236,136,74,1) 0%, rgba(236,234,111,1) 100%);
background: -o-linear-gradient(left, rgba(236,136,74,1) 0%, rgba(236,234,111,1) 100%);
background: -ms-linear-gradient(left, rgba(236,136,74,1) 0%, rgba(236,234,111,1) 100%);
background: linear-gradient(to right, rgba(236,136,74,1) 0%, rgba(236,234,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec884a', endColorstr='#ecea6f', GradientType=1 );
}
.color5,.color55,.color555{
background: rgba(67,99,79,1);
background: -moz-linear-gradient(left, rgba(67,99,79,1) 0%, rgba(95,135,92,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67,99,79,1)), color-stop(100%, rgba(95,135,92,1)));
background: -webkit-linear-gradient(left, rgba(67,99,79,1) 0%, rgba(95,135,92,1) 100%);
background: -o-linear-gradient(left, rgba(67,99,79,1) 0%, rgba(95,135,92,1) 100%);
background: -ms-linear-gradient(left, rgba(67,99,79,1) 0%, rgba(95,135,92,1) 100%);
background: linear-gradient(to right, rgba(67,99,79,1) 0%, rgba(95,135,92,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43634f', endColorstr='#5f875c', GradientType=1 );
}
.color6,.color66,.color666{
background: rgba(84,93,147,1);
background: -moz-linear-gradient(left, rgba(84,93,147,1) 0%, rgba(109,158,206,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(84,93,147,1)), color-stop(100%, rgba(109,158,206,1)));
background: -webkit-linear-gradient(left, rgba(84,93,147,1) 0%, rgba(109,158,206,1) 100%);
background: -o-linear-gradient(left, rgba(84,93,147,1) 0%, rgba(109,158,206,1) 100%);
background: -ms-linear-gradient(left, rgba(84,93,147,1) 0%, rgba(109,158,206,1) 100%);
background: linear-gradient(to right, rgba(84,93,147,1) 0%, rgba(109,158,206,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545d93', endColorstr='#6d9ece', GradientType=1 );
}
.cssmenu li .btnc:hover {background: #eb630c;color: #fff;}
.cssmenu li .btne:hover {background: #000067;color: #fff;}
.cssmenu .btnd:hover{background: #26a454;color: #fff;}
.cssmenu,
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li a,
.cssmenu .menu-button {
	padding: 0;
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	position: relative;
	z-index: 9;
}
.none{display: none;}
.cssmenu:after,
.cssmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.cssmenu .menu-button {display: none;}
.cssmenu {background: #F0F0F0;}
.cssmenu  ul  {text-align:center;}
.cssmenu  ul li {display: inline-block;}
.align-center  ul {text-align: center;}
.align-center  ul  li {display: inline-block;float: none;}
.align-center ul ul {text-align: left;}
.align-right  ul  li {float: left;}
.cssmenu  ul  li  a {padding: 16px;text-decoration: none;color: #f2682a;}
.cssmenu  ul  li  a:hover {color: #3c3c3c;text-decoration: overline;}
.cssmenu  ul  li.has-sub  a {padding-right: 30px;}
/* signo mas*/
.cssmenu  ul  li.has-sub > a:after {
	position: absolute;
	top: 22px;
	right: 11px;
	width: 8px;
	height: 1px;
	display: block;
	background: #3c3c3c;
	content: '';}
.cssmenu  ul li.has-sub  a:before {
	position: absolute;
	top: 19px;
	right: 14px;
	width: 2px;
	height: 8px;
	display: block;
	background: #3c3c3c;
	content: '';
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	-webkit-transition: all .25s ease;
	transition: all .25s ease;}
.cssmenu  ul  li.has-sub:hover > a:before {top: 23px;height: 0;}
.cssmenu ul ul {position: absolute;left: -9999px;}
.align-right ul ul {text-align: right;}
.cssmenu ul ul li {
	height: 0;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;}
.cssmenu li:hover  ul {left: auto;}
.align-right li:hover  ul {left: auto;right: 0;}
.cssmenu li:hover > ul > li {height: 35px;}
.cssmenu ul ul ul {margin-left: 100%;top: 0;}
.align-right ul ul ul {margin-left: 0;margin-right: 100%;}
.cssmenu ul ul li a {
	width: 280px;
	text-decoration: none;
	color: #3c3c3c;
	background: #F0F0F0;}
.cssmenu ul ul li:hover a,
.cssmenu ul ul li a:hover {color: #eb630c;}
.cssmenu ul ul li.has-sub  a:after {
	position: absolute;
	top: 16px;
	right: 11px;
	width: 8px;
	height: 2px;
	display: block;
	background: #dddddd;
	content: '';}
.align-right ul ul li.has-sub  a:after {right: auto;left: 11px;}
.cssmenu ul ul li.has-sub  a:before {
	position: absolute;
	top: 13px;
	right: 14px;
	display: block;
	width: 2px;
	height: 8px;
	background: #dddddd;
	content: '';
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;}
.align-right ul ul li.has-sub  a:before {right: auto;left: 14px;}
.cssmenu ul ul > li.has-sub:hover > a:before {top: 17px;height: 0;}
.overflow {overflow: hidden;width: 100%;}
.cont{ width: 100%;  position:absolute;}
.derech{padding: 0;margin: 0; width: 100%;height: 250px;background: #F0F0F0;}
/** ------------------Slider -------------------*/
.container {width: 830px;margin: 1px auto 0 ;}
.slider-wrapper {
    border-radius: 5px ;
	z-index: 2;
	position: relative;
	width: 100%;
	height: 400px;
	background: #fff;
	border: 1px solid #b7b7bc;
	overflow: hidden;}
.slider-wrapper li {display: none;}
.slider-wrapper .current-slide {display: block;}
.slider-shadow {
    position: relative;
    z-index: -3;
	width: 100%;
	height: 25px;}
.slider-shadow:before {
	right: 10px;
	left: auto;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	transform: rotate(4deg);}
.slider-wrapper img {
	position: absolute;
	max-width: 100%;
	height: auto;
	top: 0;
	left: 0;}
/**[Botones-Control] ---------------------**/
.control-buttons {
	margin-top: 15px;
	text-align: center;}
.control-buttons li {
	cursor: pointer;
	display: inline-block;
	background: #e9e9eb;
	text-indent: -99999px;
	height: 12px;
	width: 12px;
	margin: 0 6px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;}
.control-buttons li.active {background: #b7b7bc;}
.authors {
	text-align: center;
	color: #b7b7bc;
	display: block;
	margin-top: 80px;}
/** ---------------Responsive -----------------------*/
 @media only screen and (max-width: 825px) {
 	.container {
 		width: 500px;
 	}
 	.slider-wrapper {
 		height: 260px;
 	}
 }
 @media only screen and (max-width: 535px) {
 	.container {
 		padding: 5px;
 		width: 100%;
 		margin: 5px 0 0 0;
 	}
 	.slider-wrapper {
 		height: 200px;
 	}
 	.slider-wrapper .caption {
 		display: none;
 	}
 }
 @media only screen and (max-width: 410px) {
 	.slider-wrapper {
 		height: 160px;
 	}
 }
/*   caja info */
.wrap{width: 85%;margin: auto;padding: 0;overflow: hidden;
}
.col-1-4{float: left;width: 25%; padding:5px;
}
.show{
  width: 100%;
  height: 100%;
  float: left;
  border: 1px solid #b7b7bc;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #fff;
  display: block;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;}
.show .mask{
 width: 100%;
 height: 100%;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0}
.mask{
display: table;
height: 15px;
margin: 2rem auto;
text-align: center;
width: 100%;} 
.mask p{
text-align: justify;
 display: table-cell;
 vertical-align: middle;}

.cajabtn{
display: table;
height: 50px;
margin:2rem auto;
text-align:right;
width: 100%;} 
.cajabtn a.more  {
text-decoration: none;
color: #444;
display: table-cell;
vertical-align: middle;
}

a.more:hover {color: #f19154;}


.show-fourth .mask {opacity: 0;transition: all 0.4s ease-in-out;}
.show-fourth img{transition: all 1s ease-in-out;}
.show-fourth:hover img {filter: blur(10px);-webkit-filter: blur(40px);transform:scale(0.8);}
.mask {padding: 5%;}
.show-fourth:hover .mask {opacity: 1;}
.show-fourth:hover p {transition-delay: 0.1s;}
.caja{width: 100%;height: 140px;}
.titulo3{display: table;height: 100px;margin: 0 auto;text-align: center;width: 100%;} 
.titulo3 h1{display: table-cell;vertical-align: middle;}
.titulo3 p{display: table-cell;vertical-align: middle;}
p{ text-align: center;    color: #000;font-weight: 300;font-family: 'Source Sans Pro', sans-serif;font-size: 16px; } 
.boton{background-image: url(../img/SVG/descarga.svg);}
 /*texto titulo*/
.large3{
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 150%;
  color: #333;
}
.grande,.granded{
  width: 100%;
  height: auto;
  text-align: center;
    color: #666574;
  font-size: 18px;
}/*footer*/
.grande { font-weight: 700; }
/*footer*/
.granded { font-weight: 300; }
/*   contenedor social  */
.continfo{
width: 100%;
height:auto;
background: #fafafa; 
padding: 0;
margin:0;
border-top: 1px solid #b7b7bc;
border-bottom: 1px solid #b7b7bc;
}
.continfo2{
width: 100%;
height:auto;
background: #fff; 
padding: 0;
margin:0;
}
.contM{
width: 100%;
height:auto;
margin: 0;
    }
.conts{
float: left;
width: 25%;
height:auto;
padding: 10px;
margin: 1rem auto;   
display: table;
text-align: center;
  } 
.conts h3{
  display: table-cell;
  vertical-align: middle;
  } 
.logoicos:hover {      
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
/*   social  */
.contsocial{
	width: 100%;
	height: auto;
	background: #f6f7f8;
	padding:10px;
	margin: 0; }
.col{
	float: left;
	min-width: 100px;
	min-height: 620px;
	width: 33.3%;
	height: auto;
	text-align: center;
}
.wrap3{
	width: 95%;
	margin: auto;
	padding: 0;
	overflow: hidden;
}
footer{background: #3c3c3c;}
.logofooter{
	width: 110px;
	height: auto;
	float: right; 
	margin: 0 auto;}
footer > ul {   
    border-bottom: 2px solid #eb630c;
    list-style: none ;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 90%;}
footer > ul li {
   float: left;
   padding: 5px 0 30px;
   width: 33.3%;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;}
.titulofooter{ 
  text-align:left;
  width: 100%;
  font-weight: 400;
  font-size: 22px; 
  color: #fff;}
.textofooter {
  font-weight: 500;  
  text-align: left;
  color: #8a8a8a;
  font-size: 16px;
  margin: 5px 0;}
.contfooter{
  width: 100%;  }
 .copyright{
  background: #2d2c2c;
  padding: 10px 0; 
  margin: 0;
  height: 50px;
  width: 100%;
  float:none;
  text-align:center}
.copyright a {text-decoration: none;color: #fff;  }
.copyright a:hover {color: #F4E5C4; }
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.logop ,.derech{display:none;}
.cssmenu {padding-left: 0;width: 100%;}
.cssmenu ul {width: 100%;display: none;}
align-center  ul {text-align: left;}
.cssmenu ul li {width: 100%;border-top: 1px solid  #fff;}
.cssmenu ul ul li,.cssmenu li:hover  ul  li {height: auto;}
.cssmenu ul li a,.cssmenu ul ul li a {width: 100%;border-bottom: 0;}
.cssmenu  ul  li {float: none;}
.cssmenu ul ul li a {padding-left: 25px;}
.cssmenu ul ul ul li a {padding-left: 35px;}
.cssmenu ul ul li a {color: #3c3c3c;background:#F0F0F0;}
.cssmenu ul ul,.cssmenu ul ul ul,
align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;}
.cssmenu  ul  li.has-sub  a:after,
.cssmenu  ul  li.has-sub  a:before,
.cssmenu ul ul  li.has-sub  a:after,
.cssmenu ul ul li.has-sub  a:before {display: none;}
/*menu*/
.cssmenu .menu-button {
display: block;
padding: 17px;
color: #f2682a;
cursor: pointer;}
.cssmenu .menu-button:after {
position: absolute;
top: 15px;
right: 17px;
display: block;
height: 0;
width: 20px;
border-top: 1px solid #3c3c3c;
border-bottom: 1px solid #3c3c3c;
content: '';}
.cssmenu .menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #3c3c3c;
content: '';}
.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);}
.menu-opened:before {
top: 23px;
background: #fff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);}
.cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 3px solid #b7b7bc;
height: 46px;
width: 46px;
cursor: pointer;}
.submenu-opened {background: #e9e9eb;}
.cssmenu ul ul .submenu-button {height: 34px;width: 34px;}
.cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #3c3c3c;
content: '';}
.cssmenu ul ul .submenu-button:after {top: 15px;right: 13px;}
.submenu-opened:after {background: #3c3c3c;}
.cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #3c3c3c;
content: '';}
.cssmenu ul ul .submenu-button:before {top: 12px;right: 16px;}
.submenu-opened:before {display: none;}
}
@media (max-width: 1200px) {  
.wrap{
width: 95%;
margin: auto;
overflow: hidden;
}} 
@media all and (max-width:1000px){
.contsocial  { display: none;}
.contM{width: 100%;height:90px;padding: 0;margin: 0;text-align: center;}
.col-1-4{
width: 50%; 
padding: 1%;
overflow: hidden;
clear: right;}
.wrap{width: 80%;}
.mobile-clear{clear:both;}
}    
@media screen and (max-width: 835px)  {
footer ul li {float:none;width:100%;}
footer ul li:first-child {padding-left:10%;}
footer  ul li:nth-child(2) {padding-left:10%;}
footer  ul li:nth-child(3) {padding-left:10%;}
} 
@media only screen and (max-width:580px) { 
.logofooter{ padding-bottom: 10px;}
.wrap{width: 100%;}
}
@media only screen and (max-width:470px) { 
.titulo3{height: 60px;}
.granded{font-size: 16px}
.cajabtn{ border-radius: 0;margin:0;padding: 5px;}
.more{font-size: 12px;}
.show{display: none;}
.large3{font-size: 16px;}
.continfo{height: 140px;}
.contM{height: 70px;}	
}
@media only screen and (max-width:300px) { 
.wrap{width: 100%;}  
}


/* Triangles */
.triangle {
  text-decoration: none;
  display: block;
  width: 1000px;
  height: 1000px;
  position: absolute;
  top: 0;
}
.triangle span {
  position: absolute;
  font-family: 'Source Sans Pro', sans-serif;   
  color: #444;
}
.triangle.large {
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: top left;
  transform: rotate(30deg);
background: #c4aebe;
}
.triangle.small {
  top: 100px;
  right: 0;
  z-index: 2;
  transform-origin: top right;
  transform: rotate(-25deg);
background: #e8afc1;
}

/* Text */
.triangle.large span {
  transform: rotate(-30deg);
  top: 80px;
  left: 100px;
}
.triangle.small span {;
  transform: rotate(25deg);
  top: 50px;
  right: 100px;
}

/* Sides */
.half {
  top: -100px;
  position: relative;
  height: 300px;
  width: 50%;
  float: left;
  overflow: hidden;
}
.half.right .triangle.large {
  left: auto;
  right: 0;
background: #f4b5b5;
  transform-origin: top right;
  transform: rotate(-30deg);
}
.half.right .triangle.small {
  left: 0;
  right: auto;
background: #f7cfb6;
  transform-origin: top left;
  transform: rotate(25deg);
}
.half.right .triangle.large span {
  transform: rotate(30deg);
  left: auto;
  top: 80px;
  right: 100px;
}
.half.right .triangle.small span {
  transform: rotate(-25deg);
  right: auto;
  top: 50px;
  left: 100px;
}

/* Hover */
.triangle:hover {
  background: #dcdcdc !important;
}

/* Transition */
.triangle {
  transition: transform 0.5s, top 0.5s;
}
.triangle span {
  transition: transform 0.5s, top 0.5s, left 0.5s, right 0.5s;
}

/* Responsive */
@media screen and (max-width: 900px){
  .left .small {
    transform: rotate(-40deg) !important;
  }
  .left .small span {
    transform: rotate(40deg) !important;
  }
  .right .small {
    transform: rotate(40deg) !important;
  }
  .right .small span {
    transform: rotate(-40deg) !important;
  }
}
@media screen and (max-width: 700px){
  .left .large {
    transform: rotate(25deg) !important;
  }
  .left .large span {
    transform: rotate(-25deg) !important;
  }
  .right .large {
    transform: rotate(-25deg) !important;
  }
  .right .large span {
    transform: rotate(25deg) !important;
  }
	.half {
  top: 0;

}
}

@media screen and (max-width: 500px){
  .right .triangle,
  .right .triangle span {
    transform: rotate(0deg) !important;
  }
  .left .triangle,
  .left .triangle span {
    transform: rotate(0deg) !important;
  }
  .triangle.small {
    top: 50%;
  }
  .left .large span {
    top: 70px !important;
    left: 20px !important;
  }
  .left .small span {
    top: 70px !important;
    right: 20px !important;
  }
  .right .large span {
    top: 70px !important;
    right: 20px !important;
  }
  .right .small span {
    top: 70px !important;
    left: 20px !important;
  }
}