#portada{
    display: flex;
    align-items: center;
    background-color:#13262e;
    background-image:url(../img/portada.jpg);
    }
    #portada .curve {top: 43vh }

    #brazo, #portada{
      height: calc(100vh - 70px);
      background-size:auto calc(100vh - 70px);
      background-position-x:center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      top: 0;
      width: 100%;
    }  

  #brazo{background-image:url(../img/brazo.png); position: fixed;}

  #frase{
    position: absolute; right: 30px; bottom: 75px;
    width: 100%;  max-width: 480px; min-width: 300px; padding: 30px;
    text-shadow: 0px 0px 10px #1e2a37;font-size: 1.5em; font-weight: 400;
}
#frase p, #frase blockquote{margin:0 0 10px;line-height: 1.1em;}

  

#bio{background-color:#496a72 ; background-size: 500px;background-position-x: right;
background-image: url(../img/bio-bg.jpg);background-repeat: repeat-y;
}
#bio article{	margin-right: 340px;    padding: 100px 70px 120px;}
#bio div{	height: 100vh;	width: 100%;	bottom: 0;  }
#chiara,   #laptop{	height: 500px;	bottom: 0;	right: 0%;  }
#laptop{	right: 25%;  }


#como-trabajo .blob { max-width: 460px;margin: auto;}
#como-trabajo img,#como-trabajo-img{    width: 98%;}
#como-trabajo article{ padding: 0 30px;}


#servicios article {max-width: 1200px;margin: 0 auto 50px;padding: 80px 30px 50px 0;}
#servicios article .texto{max-width: 480px; padding: 10px 20px;}
#servicios .blob{	  max-width: 500px;  width: calc(100% - 510px);min-width: 300px;}
#servicios article:nth-child(odd) {  flex-direction: row-reverse;}



#blog article,#cursos article{width: 100%;overflow: hidden;}
article .image{position: relative; border-radius: 20% 0 / 100%;overflow: hidden;width: 400px;}
article .image img{width:100%;height: auto;  position: absolute;  left: 0;}
article .conthumb{  max-width: 50%;}
#blog article .flex .rel,#cursos article .flex .rel{padding:30px 20px}

#cursos article:nth-child(3n+1){background-color: var(--c2);}
#cursos article:nth-child(3n+2){background-color: var(--c1b);color: var(--c2)}
#cursos article:nth-child(3n){background-color: var(--c3);color: var(--c2)}
#cursos article{flex-direction: column; display: flex;  min-width: 340px;max-width:400px;margin: 10px;}
#cursos article .flex{min-height:340px}
#cursos article .flex.con-thumb{width:100%;min-height: 0;}
#cursos article .image{width: 360px;  margin: auto;height: 360px;}

#blog article .image{float: right;height: 400px}
#blog article{height:400px; max-width: 960px;background-color: var(--c2);flex-direction: row-reverse;}
#blog article .flex{height:400px}
#blog article .con-thumb{width:calc(100% - 400px);}

#tonislider{position:relative;overflow:hidden;}
#tonislider #slides{padding:0;max-width:100%;position:relative;margin:auto;perspective:1000px;height:500px;
	text-align:center;display:flex;align-items:center;
}
  #blog #slides{ 
  background:#0005
}

#tonislider article{left:-550px;opacity:0;position:absolute;transform-style:preserve-3d;
  transition:left 1s ease,transform 1s ease,box-shadow 1s ease,opacity 1s ease;
  transform:scale(.7)rotatey(0deg)
}
#tonislider article.activo{left:calc(50% - 480px);transform:scale(1);box-shadow:0 25px 15px 0 rgba(0,0,0,0.1);opacity:1;z-index:1}
#tonislider article.anterior{left:-600px;transform:scale(.6)rotatey(30deg);box-shadow:-10px 10px 5px 0 rgba(0,0,0,0.2)}
#tonislider article.posterior{left:100%;transform:scale(.8)rotatey(-30deg);box-shadow:10px 10px 5px 0 rgba(0,0,0,0.2)}
#tonislider article{z-index:-1}
#tonislider article.anterior{z-index:-2}
#tonislider article.posterior{z-index:0}
#ts-prev,#ts-next{
  position: absolute;
  top: 150px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: .6s ease;
  height: 80px;
  width: 80px;
  padding:  20px;
  box-shadow: 0 0 20px #0005;

}
#ts-prev svg,#ts-next svg{opacity: .3;}
#ts-next{right:10px}
#ts-prev{left:10px}
#ts-prev:hover,#ts-next:hover{background-color:rgba(255,255,255,0.2)}
#ts-prev:hover svg,#ts-next:hover svg{opacity: 1;}
#dots{width:100%;text-align:center;position:relative;margin-top:4px}
#ts-prev,#ts-next,#dots span{border-radius:60% 40% 65% 35% / 40% 60% 35% 55%;}
#dots span{cursor:pointer;height:20px;width:20px;margin:0 5px;
  display:inline-block;
	border:var(--c2) solid 2px;transition:background-color .6s ease}
#dots span{background-color:transparent}
#dots span.active{background-color:var(--c2)}
#dots span:hover{background-color:var(--c2)!important}
.hidden-front{max-height: 375px;overflow: hidden;padding-top: 10px;}

@media screen and (max-width:1350px) {
  #brazo{display:none}
  #bio .col-1{column-count:1}
}

@media screen and (max-width:1000px) {
  #como-traabajo .col-1{    padding: 20px;
    max-width: 680px;
    width: 100%;}
  }
  
@media screen and (max-width:900px) {
	#bio{	background: var(--c1b);}
	#bio article{margin-right: 0;padding: 70px 30px 70px;}
  #servicios .blob{	min-width: 360px;}
  #brazo,  #como-trabajo .curve,	#bio .abs{display: none}
#portada h3{ right: 0;max-width: none;padding-top: 60px;
   background: linear-gradient(0deg, var(--c1b), transparent);
}
#cursos article { width: calc(100% - 3px);}

#ts-prev,#ts-next{height:60px;padding:0;width:60px}
#ts-prev svg,#ts-next svg{height:30px;width:auto;margin-top:15px}
#tonislider article.anterior{left:-600px}
#tonislider article.posterior{left:100%}
#tonislider article{width:100%}
#tonislider article .image{display: none}
#tonislider article.activo{left:0}
#tonislider article .con-thumb {width: 100%;}
}

@media screen and (max-width:620px) {
  #cursos article .image{height: 240px;}
  #cursos article .image img{top: -50px;}

  #frase {    right: auto;}
  #chiara,#laptop,#cursos article .flex{  display: none;}
  #cursos article  .texto { width: 100%;}
  #bio article { margin-bottom: 0;padding-bottom: 80px;}
}