/* 
    Created on : Feb 27, 2022, 6:32:16 PM
    Author     : JuanDavid
*/
@font-face {font-family: "JDR-Bold"; src: url('../fonts/JDR-Bold.eot') format('embedded-opentype'), url('../fonts/JDR-Bold.woff') format('woff'), url('../fonts/JDR-Bold.ttf') format('truetype'), url('../fonts/JDR-Bold.otf') format('svg'); }
@font-face {font-family: "JDR-Heavy"; src: url('../fonts/JDR-Heavy.eot') format('embedded-opentype'), url('../fonts/JDR-Heavy.woff') format('woff'), url('../fonts/JDR-Heavy.ttf') format('truetype'), url('../fonts/JDR-Heavy.otf') format('svg'); }
@font-face {font-family: "JDR-Light"; src: url('../fonts/JDR-Light.eot') format('embedded-opentype'), url('../fonts/JDR-Light.woff') format('woff'), url('../fonts/JDR-Light.ttf') format('truetype'), url('../fonts/JDR-Light.otf') format('svg'); }
@font-face {font-family: "JDR-Medium"; src: url('../fonts/JDR-Medium.eot') format('embedded-opentype'), url('../fonts/JDR-Medium.woff') format('woff'), url('../fonts/JDR-Medium.ttf') format('truetype'), url('../fonts/JDR-Medium.otf') format('svg'); }         
/*-------------- ESTILOS DE ELEMENTOS COMUNES -------------------*/ 
*{border: none; text-decoration: none; margin: 0px; padding: 0px;}
body{background: #000; padding: 0px; }

h1{font-size: 24px; color: #ccc; height: 50px; font-family: JDR-Heavy, arial, helvetica; text-align: left}
h2{font-size: 18px; text-shadow: 1px 1px 2px #333; color: #fff; display: block; height: 50px; font-family: JDR-Bold, arial-black; font-weight: bold; font-variant: petite-caps; overflow: hidden; }
a {color: #fff; text-shadow: 0px 0px 0px #fff;  font-family: JDR-Bold; font-size: 12px; }
a:hover {}
p{font-family: JDR-Medium; color: #fff; font-size: 14px;}
header {display: block; width: 100%; text-align: center; overflow: hidden; padding: 20px; box-sizing: border-box; }
header #headerMenu {width: 100%; }
header h2{text-align: left; font-size: 24px;}
#titulo{  display: block; background: transparent; font-size: 88px; letter-spacing: 2px; font-family: JDR-Bold, arial, helvetica; color: #fff; padding-top: 20px; padding-bottom: 20px; text-shadow: 0px 0px 0px #ccc; text-align: left; }
#menu {display: block; margin: auto; width: 100%; text-align: center; overflow: hidden; }
#menu ul {display: block; margin: auto; width: 100%; text-align: center; overflow: hidden; }
#menu ul li:first-child{}
#menu ul li {}
article {display: block; width: 1200px; margin: auto; padding: 20px; box-sizing: border-box; margin-top: 20px; margin-bottom: 20px; } 
.listadoMenu tr td{width: 320px; height: 320px; text-align: center; }
.listadoMenu .bloque {border-radius: 100%; border: 4px solid #fff; width: 0px; height: 0px; overflow: hidden; animation-name: abrir-contenidos; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: linear; margin: auto; cursor: pointer; transition: 1s; }
.listadoMenu .bloque a{color: #fff; display:table-cell; width: 300px; height: 300px; overflow: hidden; font-size: 48px; vertical-align: middle; transition: 1s; }
.listadoMenu .bloque.web:hover {background: yellow; }
.listadoMenu .bloque.web.activo {background: yellow; }
.listadoMenu .bloque.web.activo a{color: #000}
.listadoMenu .bloque.animation:hover{background: blue;}
.listadoMenu .bloque.animation.activo{background: blue;}
.listadoMenu .bloque.animation.activo a{color: #000;}
.listadoMenu .bloque.contact:hover{background: red;}
.listadoMenu .bloque.contact.activo{background: red;}
.listadoMenu .bloque.contact.activo a{color: #000;}
.listadoMenu .bloque a:hover{color: #000;}

.fondoPasillo {background: #ccc; background-size: cover; height: 500px; width: 300px; color: #fff; }
footer {display: block; background: #fff; color: #000; text-align: center; margin-top: 40px; padding: 20px; box-sizing: border-box; }
footer p{color: #000;}
footer a{color: #000;display: block; overflow: hidden; cursor: pointer;} .year {font-size: 10px; display: block;}
.footer{margin: auto;}
.footer tbody tr td{padding: 20px;}


/*Tablets*/
@media screen and (max-width: 1200px){ 
    
    
}

/*Moviles*/
@media screen and (max-width: 800px){ 
    hr{ height: 1px; background: #ccc; display: block; width: 100%; position: absolute; top: 63%; }
    h1{ font-size: 14px; height: 30px; margin-top: -15px; top: 50%; vertical-align: middle; line-height: 26px; }
    h2{ font-size: 10px; top: 51%; height: auto; line-height: 30px; } 
    #menu { display: none; }
    table{display: block;}
    table tbody{display: block;}
    table tbody tr{display: block;}
    table tbody tr td{display: block;}
    #titulo{font-size: 48px;}
}


/* The animation code */
@keyframes abrir-contenidos {
  0%   {width: 0px; height: 0px; }
  100% {width: 300px; height: 300px;}
}