.circulo {
    width: 30px;
    height: 30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #5cb85c;
    /* animation-name: example;
    animation-duration: 2s; */
}
@keyframes example {
    0%   {width: 0px;height: 0px;}
    100%  {width: 30px;height: 30px;}
}
.cuadradoleft {
    width: 280px; 
}
.cuadrado {
    width: 250px; 
    height: 5px; 
    background: #428bca;
    transition-delay: 4s;
    animation-name: l1;
    animation-duration: 2s;
}
@keyframes l1 {
    0%   {width: 0px;}
    100%  {width: 250px;}
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .cuadrado {
        width: 200px; 
    }
    .cuadradoleft{
        width: 230px; 
    }
    @keyframes l1 {
        0%   {width: 0px;}
        100%  {width: 200px;}
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cuadrado {
        width: 150px; 
    }
    .cuadradoleft{
        width: 180px; 
    }
    @keyframes l1 {
        0%   {width: 0px;}
        100%  {width: 150px;}
    }
}

@media (max-width: 767px) {
    .cuadrado,.cuadradoleft {
        width: 150px; 
    }
    .cuadradoleft{
        width: 180px; 
    }
    @keyframes l1 {
        0%   {width: 0px;}
        100%  {width: 150px;}
    }
}
.letright{
    position:absolute;
    left:300px;
    top:250px;
}
.fdes{
    font-size:35px;
}
.key2{
    height:100px;
}
.fmision{
    width:65px;
}
.abs{
    position:absolute;
}
.card1{
    left:-200px;
    top:50px;
}
.card2{
    top:150px;
    left:150px;
}
.card2{
    top:150px;
    left:150px;
}
.card3{
    top:350px;
    left:-300px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .letright{
        left:200px;
    }
    .fright{
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .letright{
        left:100px;
    }
    .fright{
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .letright{
        left:105px;
    }
    .fright{
        font-size: 13px;
    }
    .titmodal{
        font-size: 22px;
    }
    .fdes{
       font-size:18px;
    }
    .key2{
        height:30px;
    }
    .fmision{
        width:35px;
    }
    .abs{
        position:relative;
        padding-top: 5px;
    }
    .card1{
        left:auto;
        top:auto;
    }
    .card2{
        top:auto;
        left:auto;
    }
    .card3{
        top:auto;
        left:auto;
    }
}
.cuadrado2 {
    width: 5px; 
    height: 250px; 
    background: #428bca;
    transition-delay: 4s;
    /* animation-name: l2; */
    /* animation-duration: 2s; */
}
.cuadrado3 {
    position: absolute;
    top: -40px;
    left: -100px;
    width: 5px;
    height: 250px; 
    transform: rotate(45deg);
    background: #428bca;
    transition-delay: 4s;
    /* animation-name: l2; */
    /* animation-duration: 2s; */
}
@keyframes l2 {
    0%   {width: 0px;}
    100%  {width: 250px;}
}
.cTop {
    width: 0; 
    height: 0; 
    border-bottom: 30px solid #428bca;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    z-index:1000px;
    /* animation-name: tri; */
    /* animation-duration: 2s; */
}
.cBottom {
    position: absolute;
    left: -212px;
    width: 0; 
    height: 0; 
    border-top: 30px solid #428bca;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    transform: rotate(45deg);
    /* animation-name: tri; */
    /* animation-duration: 2s; */
}
.triangulo {
    width: 0; 
    height: 0; 
    border-left: 30px solid #428bca;
    border-top: 15px solid transparent;border-bottom: 15px solid transparent; 
    /* animation-name: tri;
    animation-duration: 2s; */
}
@keyframes tri {
    0%   {border-top: 0px solid transparent;border-bottom: 0px solid transparent;border-left: 0px solid #428bca}
    100%  {border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-left: 30px solid #428bca}
}