@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,700,500,900);
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    
}

/*///////// MOBILE //////////*/

body{
    background-color: black;

}    

header{
    width: 100%;
    padding: 0.5em;
    
}

#portada img{
    width: 100%;
    max-width: 960px;

}

header nav ul li a{
    color: cornflowerblue;
    border-color: black;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size: 18pt;
    font-kerning: 100pt;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    
}

header nav ul li a:hover{
    color: snow;
    background-color: cornflowerblue;
    width: 100%;

        
}
    
main{
    margin-top: 10px;
    background-color: black;
    padding: 0.5rem;

}

#foto img{
    width: 100%;
    padding: 0.5em;
    border-radius: 7%;

}

main article{
    background-color: lightsteelblue;
    padding: 0.8em;
    border-radius: 7%;
    font-family: "Raleway", sans-serif;
    
}
    
aside{
    background-color: cadetblue;
    padding: 0.8em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    border-radius: 7%;
    font-family: "Arial";

}

footer{
    color: darkgray;
    clear: both;
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 8pt;
    padding: 1em;
    
}

footer p{
    text-align: center;   
}

.contenedor{
    width: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    background-color: black;

}

.contenedorcarta{
    width: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    font-family: "Arial";
    
}
.contenedorcarta main{
    background-color: black;
    margin-bottom: 1em;
}

.contenedorcarta h1{
    color: snow;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: snow;

}

.contenedorcarta h3{
    color: snow;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: snow;

}

.estrategia {
    background-color: lightsteelblue;
    border-top-style: double;
    border-color: black;
    padding: 1em;
 

}

.requerimientos {
    background-color: lightsteelblue;
    border-top-style: double;
    border-color: black;
    padding: 1em;
      
}

.desarrollo {
    background-color: lightsteelblue;
    border-top-style: double;
    border-color: black;
    padding: 1em;

}
    
.contenedormapa{
    width: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0.5em;
    font-family: "Arial";
    font-size: 12pt;

}



.contenedormapa main{
    width: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    background-color: lightsteelblue;
    padding: 1em;
    border-radius: 2.5%;
}

.contenedorpropuesta main{
    width: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    background-color: lightsteelblue;
}
.contenedorpropuesta main img{
    width: 100%;
    padding: 0.5em;
}


#propfinal img{
    width: 100%;
    padding: 0.5em;
    
}

h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: snow;
    
}
h2{
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: snow; 
    text-align: center;

}


h3 {
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    color: snow;
}

#botonera img{
    width: 100%;
    border-radius: 8%;

}


/*///////// TABLET //////////*/

    
@media screen and (min-width: 480px){
    header{
        width: 100%;

    }

    #portada img{
        width: 100%;
        max-width: 960px;

    }

    header nav ul li{
        display: inline-block;

    }

    header nav ul li a{
        color: cornflowerblue;
        border-color: black;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        font-size: 12pt;
        margin-top: 1em;
        margin-bottom: 0.1em;
        margin-right: 3.2em;

    }

    header nav ul li a: hover{
        color: snow;
        background-color: cornflowerblue;

    }

    main{
        margin-top: 10px;
        background-color: black;
        width: 100%;
        padding: 0.5rem;



    }

    #foto img{
        width: 45%;
        padding: 0.5em;
        margin-bottom: 1em;
        border-radius: 8%;
        float: left;
    }

    main article{
        width: 55%;
        background-color: lightsteelblue;
        padding: 2em;
        border-radius: 8%;
        font-family: "Raleway", sans-serif;
        height: 25em;
        float: right;
        margin-top: 0.5em;
        margin-bottom: 1em;

    }

    aside{
        background-color: cadetblue;
        padding: 1.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        border-radius: 8%;
        font-family: "Arial";
        clear: both;

    }

    footer{
        color: darkgray;
        clear: both;
        font-family: "Raleway", sans-serif;
        font-weight: 400;
        font-style: italic;
        font-size: 8pt;
        padding: 1em;

    }


    .contenedor{
        width: 100%;
        max-width: 960px;
        margin: auto;
        overflow: hidden;
        background-color: black;

    }

    .contenedorcarta main{
        background-color: black;
        margin-bottom: 1em;
        border-radius: 0;
    }

    .contenedorcarta h1{
        color: snow;
        font-weight: 700;
        text-align: center;
        text-decoration: underline;
        text-decoration-color: snow;

    }

    .contenedorcarta h3{
        color: snow;
        font-weight: 500;
        text-decoration: underline;
        text-decoration-color: snow;

    }

    .estrategia {
        background-color: lightsteelblue;
        border-top-style: double;
        border-color: black;
        padding: 1em;


    }

    .requerimientos {
        background-color: lightsteelblue;
        border-top-style: double;
        border-color: black;
        padding: 1em;

    }

    .desarrollo {
        background-color: lightsteelblue;
        border-top-style: double;
        border-color: black;
        padding: 1em;

    }

    .contenedormapa{
        width: 100%;
        max-width: 960px;
        margin: auto;
        overflow: hidden;
        padding: 0.5em;
        font-family: "Arial";
        font-size: 12pt;

    }

    .contenedormapa main{
        width: 100%;
        max-width: 960px;
        margin: auto;
        overflow: hidden;
        background-color: lightsteelblue;
        padding: 1em;
        border-radius: 0;
    }
    
      #botonera img{
        width: 100%;
        border-radius: 8%;
        padding: 1em;

    }


     .secciones{
        padding: 1em;

     }
    

    .contenedorpropuesta{
        width: 100%;
        max-width: 960px;
        margin: auto;
        overflow: hidden;
        background-color: lightsteelblue;
        padding: 0.5em;
        font-family: "Arial";
        font-size: 12pt;

    }
    .contenedorpropuesta main img{
        width: 100%;
        padding: 0.5em;
    }


    #propfinal img{
        width: 100%;
        padding: 0.5em;

    }

    h1 {
        font-family: "Raleway", sans-serif;
        font-weight: 700;
        color: snow;

    }
    h2{
        font-family: "Raleway", sans-serif;
        font-weight: 700;
        color: snow; 
        text-align: center;

    }


    h3 {
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        color: snow;
    }

    #botonera img{
        width: 100%;
        border-radius: 8%;

    }


/*///////// PC //////////*/



@media screen and (min-width:768px){
    header{ 
        width: 100%;
        max-width: 960px;
        padding: 0px;

    }

    header nav ul li a{
        color: cornflowerblue;
        display: inline-block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        font-size: 0.8em;
        margin-right: 2em;
        padding: 0.5em 0em 0.5em 0em;

    }

    header nav ul li a:hover{
        color: snow;
        background-color: cornflowerblue;
        transition-duration: 0.8s;
        
 
    }
    

    #foto img{
        width: 44%;
        border-radius: 7%;
        float: left;
        height: auto;

    }

    main article{
        background-color: lightsteelblue;
        border-radius: 7%;
        width: 55%;
        float: right;
        height: 22.5em;



    }
    
    main{
        background-color: black;
        width: 65%;
        float: left;
        margin-top: 1rem;
        padding: 0.3rem;
        height: auto;

        
    }

    
    aside{
        float: right;
        background-color: lightgray;
        width: 32%;
        padding: 1.5em;
        margin-top: -29.2em;
        font-size: 10pt;
        border-radius: 8%;
        font-family: "Raleway", sans-serif;
        
    }
    
    footer{
        width: 100%;
        clear: both;
        color: lightgray;
    }
    
    .contenedorcarta main{
        background-color: black;
        margin-bottom: 1em;
        border-radius: 0;
        width: 100%;

    }

    .contenedorcarta h1{
        color: snow;
        font-weight: 700;
        text-align: center;
        text-decoration: underline;
        text-decoration-color: snow;

    }

    .contenedorcarta h3{
        color: snow;
        font-weight: 500;
        text-decoration: underline;
        text-decoration-color: snow;

    }

    .estrategia {
        background-color: lightsteelblue;
        border-top-style: double;
        border-color: black;
        padding: 2em;



    }

    .requerimientos {
        background-color: lightsteelblue;
        border-top-style: double;
        border-color: black;
        padding: 2em;


    }

    .desarrollo {
        background-color: lightsteelblue;
        border-top-style: double;
        border-color: black;
        padding: 2em;


    }

    .contenedormapa{
        width: 100%;
        max-width: 960px;
        margin: auto;
        overflow: hidden;
        padding: 0.5em;
        font-family: "Arial";
        font-size: 12pt;

    }



    .contenedormapa main{
        width: 100%;
        max-width: 960px;
        margin: auto;
        overflow: hidden;
        background-color: lightsteelblue;
        border-radius: 0;
    }
    
    #botonera img{
        width: 100%;
        border-radius: 8%;
        padding: 1em;

    }
    
    .secciones{
        padding: 1em;
    
    }

    .contenedorpropuesta main{
        width: 100%;
        max-width: 960px;
        overflow: hidden;
        background-color: lightsteelblue;
        border-radius: 0;

    }
    .contenedorpropuesta main img{
        width: 100%;
        padding: 0.5em;
    }
    



    #propfinal img{
        width: 100%;
        padding: 0.5em;
    
}
    
    
}