@charset "UTF-8";
/* CSS Document */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, input, select {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none; }
html{
    height:100%;
width:100%;
overflow-x: hidden;}
body{
    width:100%;
    height:100%;
    background-color:#e5f6fe;
}
a{
    text-decoration: none;
    -webkit-transition: all 0.125s;
    -moz-transition: all 0.125s;
    -o-transition: all 0.125s;
    transition: all; 0.125s;
	   } 
p{
    color:#630;
     font-family: 'Century Old Style Std';
    font-size:1.3em;
}
b{
    font-family: 'Century Old Style Bold'
}
u{
    font-size:0.9em;
    opacity: 75%; 
    color:#82368c;

}
@font-face {
    font-family: 'Century Old Style Std';
    src: url('fonts/CenturyOldStyleStd-Regular.eot');
    src: url('fonts/CenturyOldStyleStd-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/CenturyOldStyleStd-Regular.woff2') format('woff2'),
        url('fonts/CenturyOldStyleStd-Regular.woff') format('woff'),
        url('fonts/CenturyOldStyleStd-Regular.ttf') format('truetype'),
        url('fonts/CenturyOldStyleStd-Regular.svg#CenturyOldStyleStd-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Old Style Std Bold';
    src: url('fonts/CenturyOldStyleStd-Bold.eot');
    src: url('fonts/CenturyOldStyleStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/CenturyOldStyleStd-Bold.woff2') format('woff2'),
        url('fonts/CenturyOldStyleStd-Bold.woff') format('woff'),
        url('fonts/CenturyOldStyleStd-Bold.ttf') format('truetype'),
        url('fonts/CenturyOldStyleStd-Bold.svg#CenturyOldStyleStd-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.logo-cont{
    display:table;
    width:100%;
    height:320px;
}
.logo{
    width:100%;
    display:table-cell;
    text-align:center;
    vertical-align: middle;
}

.ruleta-r {
    margin-left: 5px;
    margin-top: 7%;
    width: 80px;
    height: 80px;
    position: fixed;
    background-image: url(img/ruleta.png);
    animation: animaRuleta 9s infinite linear;
}
@keyframes animaRuleta{
	from{
    transform: rotate(0);
  }
	to{
    transform: rotate(360deg);
  }
}
.resumen {
    display: table;
    width: 750px;
    height: 145px;
    text-align: center;
    vertical-align: middle;
    opacity: 75%;
    margin:0 auto;
}
.resumen p{
    display:table-cell;
    vertical-align:middle;
    width:400px;
    color:#82368c;
    line-height:1;
    font-size:1.5em;
}
.servicios{
    display:table;
    width:100%;
    height:40px;
    background-color:#630;
    float: left;
    vertical-align: middle;
}
.servicios2{
    margin-top:3%;
    display:table;
    width:100%;
    height:40px;
    background-color:#630;
    float: left;
    vertical-align: middle;
}
.text-moving{
    display:table-cell;
    vertical-align:middle;
    animation: moveText linear 20s forwards infinite;
    color:#ded087;    
    font-size:1.3em;
    margin-top:5px;
    }
.text-moving2{
    display:table-cell;
    vertical-align:middle;
    animation: moveText linear 20s -4s forwards infinite;
    color:#ded087;    
    font-size:1.3em;
    margin-top:5px;
    }
@keyframes moveText {
	from { transform: translateX(100%); }
	to { transform: translateX(-150%); }
}
footer{
    width:100%;
    height:140px;
    padding-top:1%;
    display:table;
}
.subfooter{ 
    width: 25%;
    height:120px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    float: left;
}
.info{
    font-size:1.1em;
}
.subfooter b{
    font-size:1.2em;
    letter-spacing:1px;
}

.subtodomata{
     width:100%;
    height:20px;
    float:left;
    display:table-cell;
   text-align: center;   
}
.Copyright{
    font-size:0.9em;
    color:#82368c;
}
@media screen and (min-width: 1400px) {
    .logo-cont{
        height:380px;
    }
    .resumen{
        height:200px;
        margin:0 auto;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .ruleta-r{
    margin-top: 9%;

    }
    .servicios2{
        width:130%;
    }
    .logo-cont{
    height: 500px;
    }
    .resumen{
    height: 245px;
    width: 500px;
    }
}
  /* Estilos para iPad vertical */
@media screen and (max-width: 778px) and (min-width: 480px)
	{

		}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
    
}
@media screen and (max-width: 480px) and (min-width: 320px)
	{
.ruleta-r {
    margin-top: 90%;
    margin-left: 38%;
    position: absolute;
    z-index: 99;
    }
.logo img{
    width:80%;
        }
.logo-cont {
    height: 400px;
}
.servicios2, .servicios {
    width: 240%;
        }
.servicios2{
    margin-top:9%;
        }
.resumen {
    font-size: 1em;
    width: 400px;
    height: 170px;
    }
.resumen p {

    font-size: 1.2em;
}
footer{
    height:406px;
        }
.subfooter{
    float:left;
    width:50%;
    height:150px;
    padding-top: 20px;
        }
.subtodomata {
    width: 400px;
    height: 30px;
    display: table-cell;
    text-align: center;
    padding-left: 8%;
}
}
@media screen and (max-width: 480px) and (min-width: 360px) and (orientation:landscape){
    .ruleta-r{
    position:absolute;
    }
}
@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 414px) 
  and (-webkit-min-device-pixel-ratio: 3) {
.ruleta-r {
    margin-top: 100%;
    }
.resumen{
    width:340px;
      }
      .subtodomata{width:300px;}
.subfooter p{
    font-size:0.9em;}
      .servicios{display:none;} .servicios2{display:none;}
}