@font-face {font-family: BasicTitle;src: url(../fonts/basictitlefont.ttf);font-weight: bold;}
@font-face {font-family: roboto-condensed;src: url(../fonts/roboto/Roboto-Condensed.ttf);}
@font-face {
    font-family: 'Yaldevi', sans-serif;
}
body{background-color:#009a40;background-position: right top; background-repeat:no-repeat;}
#tarjeta{width: 442px; height:105px;cursor:pointer;transform-style: preserve-3d;border-radius: 10px;

}
#tarjeta-inner{  transition: transform 0.6s;
  transform-style: preserve-3d;  position: relative;
  width: 100%;
  height: 100%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px}
#tarjetaFront{background-color: aliceblue;width: 100%; height:100%;position: absolute;left: 0;top: 0;  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;border-radius: 10px}
#tarjetaBack{background-color: aliceblue;width: 100%; height:100%;position: absolute;left: 0;top: 0;  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;transform: rotateX(-180deg);border-radius: 10px}
#foto {padding:5px;width:94px;height:95px;float:left;}
#nombre {margin:5px;width:325px;float:left;position:relative;top:50%;transform:translateY(-50%);display:'initial'}
#nombre #ssantoro {color:gray; margin:0;text-align:center;font-family:'BasicTitle';font-size:35px;}
#nombre .parrafo,#descargarCV a,#descargarCV a:link,#descargarCV a:hover,#descargarCV a:active,#descargarCV a:visited{color:orange;margin:0;text-align:center;font-family:roboto-condensed;font-size:12px;text-decoration:none;}
#datos{line-height: 12px !important;
    display: flex;
    justify-content: center;}
#escritorio{position:absolute;top:0;left:150px;height:100%;display:none;}
#botones{position:absolute;top:10%;left:0;}
#botones .item{display:none}
#descargarCV a,#descargarCV a:link,#descargarCV a:hover,#descargarCV a:active,#descargarCV a:visited{}
#rollo{width:600px;height:700px;float:left;margin-top:5px;overflow:hidden}
#menu{width:200px;float:left}
.item{font-family:'BasicTitle';cursor:pointer;width:200px}
.picto{width:600px;height:100%;position:relative; font-family:roboto-condensed;float:left;background-image:url('imagenes/fondo.jpg') no-scale;}
.picto p{font-size: 12px;color:gray}
.picto h3{color:orange;}
.carpeta{width:50px;height:35px;border-radius:5px;box-shadow: 0 0 5px 0 orange, 0 0 5px 0 orange;padding:5px;cursor:move;background-size:100% 100%;position:relative;font-family:'BasicTitle';margin:10px;}
.trabajos{background-color:#8d3e4a;max-height:570px;max-width:719px}
.musica{background-color:#c0c3d6}
.centrado {position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%);}
#videoBack {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
#iconos{display: flex;
    justify-content: space-evenly;}
ion-icon{font-size: 48px !important}

@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}

@-webkit-keyframes flip-horizontal-bottom-back {
  0% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}
@keyframes flip-horizontal-bottom-back {
  0% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}

@media screen and (max-width: 600px) {
  body{
    max-height: 100vh;
    overflow: hidden;
  }
	#tarjeta{
		transform: scale(1) translate(-50%, -50%);
	}
	#foto{
		padding: 5px 0px 5px 13px;
	}
  #videoBack{
    height: 100vh;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: unset;
  }
}