	<style>
        body { margin: 0; padding: 0; }
        html { height: 100%; cursor: default; }

	
body {
  background-image: url(./../images/tejado-arreglado.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 1.2rem; }
  body:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: .8;
    z-index: -1;
    background: #f12711;
    background: -webkit-linear-gradient(to right, #f5af19, #f12711);
    background: linear-gradient(to right, #f5af19, #f12711); }

.boxed-page {
  margin: 0 auto;
  margin-top: 6rem;
  margin-bottom: 6rem;
  position: relative;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
  border-radius: 5px; }

@media (min-width: 1200px) {
  .boxed-page {
    width: 1024px; }
    .boxed-page .container {
      max-width: 1080px;
      padding-left: 30px;
      padding-right: 30px; } }

.bg-white {
  background-color: #fff;
text-align: center;}

		h1 {
   			font-family: "Saira Stencil", sans-serif;
			font-weight: 200;
			font-size: 40px;
			margin-bottom:auto;
			margin-top: auto;
}

		h2 {
            font-weight: 400;
        }
	
		h3 {
            font-weight: 300;
            margin-bottom: 25px;
			margin-left:3em;
			margin-right:3em;
			line-height: 1.4;
        }
        img {
            width: 40%; /* Image width */
            border: 0; /* For IE */
            /* Aspect ratio of image, gives initial dimension to prevent text moving down once image is loaded */
            /* When changing logo, change this also */
            /* aspect-ratio: 125 / 50; */
        }
		
		.logo {
		margin-top:2em;
		}
		
		.icono {
			width:10%;
		}

		.button {
  background-color: #228B22;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
		
		
        #main {
            vertical-align: middle;
            display: table-cell;
			padding:2rem;
        }

        /* Fades in animation */
        @keyframes fadein  {
            from { opacity: 0; }
        }
        /* Animates bar on page load */
        @keyframes proanimate {
            from { width: 0%; }
        }

        @media screen and (max-width:600px) {
            img {
                width: 60%;
            }
            h1 {
                font-size: 2em;
            }
            h2 {
                margin: 1.5em;
                font-size: 1.1em;
            }
            #progress {
                width: 80%; /* Bar width */
            }
		.icono {
			width:25%;
		}
		
		
		
		}

  /* Logo font */
 /* <weight>: Use a value from 100 to 900 */
 /* <uniquifier>: Use a unique and descriptive class name */

.saira-stencil-<uniquifier> {
  font-family: "Saira Stencil", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
