@CHARSET "UTF-8";


/* Estilos Comunes en toda la página*/

    *{
        margin:0px;
        padding: 0px;
    }

/*Caja principal que abarca toda la página*/
    #cajaprincipal{
        width: 100%;
        height: 1200px;
        background-color: black;
    }

/*Título de la página*/
    #cajatitulo{
        min-width: 400px;
        max-width: 900px;
        height: 120px;
        margin: auto;
        padding-top: 15px;
        background-color: azure;
        font-size: 70px;
        color: darkorange;
        text-align: center;
        vertical-align: middle;
    }

/*Caja para el contenido*/
    #cajageneral{
        min-width: 450px;
        max-width: 900px;
        height: 800px;
        margin: auto;
        background-color: white;
        padding-top: 10%;
    }

    /*Caja para LINKS*/
        #cajalinks{
        width: 100%;
        height: 450px;
        top:120px;
        }
        
    /*Caja general que contiene el círculo y enlaces*/
        #cajacirculo{
        position: relative;
        width: 450px;
        height: 450px;
        margin: auto;
        padding-top: 5%;
        border-radius: 50px;
        background-color: black;
        }
    
    /*Círculo principal*/
        #circulo{
        position: relative;
        width: 80%;
        height: 80%;
        margin: auto;
        background-repeat: no-repeat;
        background-size: 110%;
        background-position: right;
        background-image: url(./images/fondocirculo.jpg);
        border-radius: 280px;
        box-shadow: 10px 10px 10px ;
        }

    /*Cuadrado con el menu para ir a las páginas WEB*/
        #paginasweb{
        position: absolute;
        width: 380px;
        height: 60px;
        bottom: 30px;
        left: 20px;
        padding:10px;
        vertical-align: middle;
        text-align: center;
        font-size: 45px;
        background-color: cornflowerblue;
        border: 6px solid white;
        border-radius: 28px;
        box-shadow: 10px 10px 10px black;
        }

    
        .sx{
        position: absolute;
        width: 80px;
        height: 80px;
        vertical-align: middle;
        align-content: center;
        text-align: center;
        color: aliceblue;
        font-size: 10px;
        background-color: orangered;
        z-index:20;
        }
        .sx:hover{
        width: 100px;
        height: 100px;
        }
        #sa{
        top:160px;
        left:10px;
        -moz-transform:rotate(-65deg) scale(1);
        -webkit-transform:rotate(-65deg) scale(1);
		-o-transform:rotate(-65deg) scale(1);
  		-ms-transform:rotate(-65deg) scale(1);
        background-image: url(./images/file.png);
        }
        #sb{
        top:50px;
        left:70px;
        -moz-transform:rotate(-30deg) scale(1);
        -webkit-transform:rotate(-30deg) scale(1);
		-o-transform:rotate(-30deg) scale(1);
  		-ms-transform:rotate(-30deg) scale(1);
        background-image: url(./images/download.png);
        }
        #sc{
        top:10px;
        left:190px;
        background-image: url(./images/audio.png);
        }
        #sd{
        top:50px;
        right:70px;
        -moz-transform:rotate(30deg) scale(1);
        -webkit-transform:rotate(30deg) scale(1);
		-o-transform:rotate(30deg) scale(1);
  		-ms-transform:rotate(30deg) scale(1);
        background-image: url(./images/multimedia.png);
        }
        #se{
        top:160px;
        right:0px;
        -moz-transform:rotate(65deg) scale(1);
        -webkit-transform:rotate(65deg) scale(1);
		-o-transform:rotate(65deg) scale(1);
  		-ms-transform:rotate(65deg) scale(1);
        background-image: url(./images/certificado.png);
        }
        


/*Caja para el pie de página*/
    #piedepagina{
        width: 100%;
        height: 30px;
        background-color: chartreuse;
    }