/**********************LOGOTIPO*************************/
#contenedor{

    width: 124px;

    height: 85px;
    
    position: relative;

    background-color: #e6cd78;
}

#texto{
    margin-top: 52px;
    
    margin-left: 0px;;

    position: absolute;
}

#centro{
    margin-top: 17px;

    margin-left: 43px;

    position: absolute;

    animation-name: ckw;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

 }

#a{
    margin-top: 30px;

    margin-left: 24px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#b{
    margin-top: 47px;

    margin-left: 42px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#c{
    margin-top: 14px;

    margin-left: 36px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#d{
    margin-top: 2px;

    margin-left: 45px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#e{
    margin-top: 5px;

    margin-left: 66px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#f{
    margin-top: 23px;

    margin-left: 78px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#g{
    margin-top: 15px;

    margin-left: 83px;

    position: absolute;

    animation-name: ckw;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#h{
    margin-top: 21px;

    margin-left: 92px;

    position: absolute;

    animation-name: ckw;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#i{
    margin-top: 34px;

    margin-left: 86px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

#j{
    margin-top: 42px;

    margin-left: 73px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;

}

/***************** PROPOSITO ***********************/

.caja{
    width: 100%;
    
    height: 550px;
    
    min-height: 550px;
    
    max-height: 550px;
    
    position: relative;

}

.uno{
    margin-top: 22px;

    margin-left: 30px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;
}

.dos{
    margin-top: 60px;

    margin-left: 367px;

    position: absolute;

    animation-name: ckw;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;
}

.tres{
    margin-top: 212px;

    margin-left: 815px;

    position: absolute;

    animation-name: ckwi;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    display: inline-block;

    animation-timing-function: linear;
}

.context{
    width: 100%;

    height: 550px;
    
    min-height: 550px;
    
    max-height: 550px;
    
    position: absolute;
    
    margin-top: 0px;
    
    margin-left: 0px;

    /*background-color: rgba(130, 130, 130, .2);*/
}

/***************MOVIMIENTO DE ENGRANES****************/

@keyframes ckw {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

@keyframes ckwi {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(-360deg);

    }

}