body {
    color: #fff;
    margin: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    background-color: #359;
}


body, div, header, nav, ul, h1, h2, p, img, iframe {
    box-sizing: border-box;
    margin: 0;
}


/*HEADER SECTION*/
.header {
    min-height: 100vh;
    box-sizing: border-box;
    background-image: url(imagenes/roldanillo32m.jpg);
    display: flex;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;

}


.header__overlay {
    min-height: 100vh;
    width: 100%;
    background-color: #0008;/*08f6*/
    position: absolute;
    z-index: 1;
    margin: auto;
    
}

.header__item-container {
    position: relative;
    z-index: 10;
    margin: auto;
    text-align: center;
    max-width: 700px;
    min-height: 100vh;
}

.header__item-container p {
text-wrap: pretty;
font-size: 20px;
}

.header__img {
    min-width: 250px;
    max-width: 50%;
    border-radius: 50%;
    border: 1px solid #f10;/*08f*/
    margin: 20px;
    box-shadow: 5px 5px 20px rgba(255, 0, 0, 0.961);
}

.img--info{
    min-width: 150px;
    max-width: 10%;
    border-radius: 50%;
    border: 1px solid #f10;/*08f*/
    margin: 20px;
    box-shadow: 5px 5px 20px rgba(255, 0, 0, 0.961);
}

h1 {
    margin: 0;
    font-size: 3.6rem;
    text-wrap: balance;
    transition-property:  font-size, color;
    transition-duration: 1s;
	text-shadow: 2px 2px 4px rgba(13, 5, 253, 0.5);

}

h1:hover {
    font-size: 4rem;
    color: rgba(253, 17, 5, 0.967);
    text-shadow: 2px 2px 4px rgb(251, 251, 253);
}

p {

    margin: auto;
    font-size: 15PX;
    text-wrap: pretty;
    text-shadow: 2px 2px 4px rgb(77, 77, 248);


}



/*----- NAV BAR SECTION  -----*/

.nav {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px  20px;
    text-align: center;
    position: sticky;
    top: 0;
    margin-bottom: 10px;
    box-shadow: 0 0 45px #000;

}
.nav__ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

.nav__item {
 list-style: none;
}

.nav__ul-container {
    flex-grow: 4;
}

.nav__logo-container, .nav__ul-container {
    flex-grow: 1;
    text-align: center;
}



.nav__link {
    color: #08f;
    text-decoration: none;
    display: inline-block;
    padding: 8px;
    margin: 6px;
    border-radius: 0;
    transition: background-borde 0.3s, border-radius 0.2s, outline 0.2s, outline-offset 0.2s;
    margin: 10px;
    outline: 0;
    outline-offset: 0;
    border-radius: 15px;
    background-color: #8f92;
}

.link--optionhome {
    background-color: #f553;
}

.link-Ferreterias{
    background-color: #5553;
}

.link--Restaurantes{
    background-color: #f603;
}

.link--Servicios{
    background-color: #08f3;
}

.link--Trading{
    background-color: #f105;
    color: #000;
}

.nav__link:hover {
background-color: #00f4;
border-radius: 20px;
outline: 2px solid #00f7;
outline-offset: -5px;
}

.link--login {
    background-color: #25a;
    color: #fff;
    border-radius: 20px;
    padding: 8px 24px;
    margin-left: 5px;
}

.link--login:hover {
    background-color: #00f;
    outline: none;
}

.nav__logo {
    width: 110px;
}


/*---- MAIN SECTION ------ */

.main__Encuesta {
    max-width: 800PX;
    margin: auto;
    font-size: 30PX;
    text-wrap: pretty;
    align-items: center;
    display: flex;
}
div {
    margin: auto;
}

.main__informacion {

    min-height: 100vh;
    box-sizing: border-box;
    display:contents;
    background-size: cover;
    background-position: center;
    z-index: 4;
    
}

.main__Encuestatrading {
  
    flex-grow: 1;
    margin: auto;
    
}

.main__Encuesta {

flex-grow: 2;
}


.ctademo {

   align-items: center;
   margin: auto;
    
}


.header__item-containermain {
    position: relative;
    z-index: -1;
    margin: auto;
    text-align: center;
    max-width: 700px;
    min-height: 100vh;
}

.info__proyectos {
    font-size: 10px;
    text-align: center;
    border: 1px solid #f55;
    padding: 25px;
    display: flex;
}
.info__proyectos a {
    color: #fff;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
}

.header__item-containermain p {
    margin: auto;
    text-align: center;
        text-wrap: pretty;
font-size: 10px;
}
.info__proyectos {
    z-index: 50;    
}
.info__proyectos:hover {
    color: red;
}

/* FOTTER */

footer {
    margin-top: auto;
    background-color: #333;
    color: #fff;
    padding: 40px;
    text-align: center;
    font-weight: bold;
    box-shadow: 5px 5px 40px rgba(23, 22, 22, 0.961);

}