body {font-family: 'Arial', Helvetica, sans-serif;
			font-size: 16px;
            line-height: 1.5;
		}
        
        p.a
        { color:whitesmoke;
            font-family:  'Arial', Helvetica, sans-serif;
            line-height: 1.5;
            text-align:center;
          
            font-size:110%;
        }
@media(max-width:900px){p.a{color:darkred;}}

p.footer
        { color:white;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1.5;
            text-align: center;
            font-size: 80%;
            letter-spacing: 1px;
 text-shadow: 1px 1px 5px #2d55ff;
        }

@media(max-width:900px){p.b{color:whitesmoke;}}

p.foot
        { color:white;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1.5;
            text-align: left;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 80%;
            letter-spacing: 1px;
        }


body {font-size:120%;} 
@media(min-width:60em){body{font-size: 110%}}

        #content{
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-auto-rows: minmax(100px, auto);
            grid-gap: 10px;
            max-width: 960px;
            margin: 0 auto;
            grid-template-areas:
                "header header header header header header header header"
                "nav nav nav nav nav nav nav nav"
                "main main main main main main main main"
                "footer footer footer footer footer footer footer footer";


        }
        /* desktop grid */
        @media screen and (min-width: 760px){
    		#content{
    			display: grid;
    			grid-template-columns: repeat(8, 1fr);
    			grid-auto-rows: minmax(100px, auto);
    			grid-gap: 10px;
    			max-width: 960px;
    			margin: 0 auto;
                grid-template-areas:
                  "header header header header header nav nav nav"
                    "main main main main main main main main"
                    "footer footer footer footer footer footer footer footer";
    		}
        }
		#content > *{
			padding: 10px;
		}

        header{
            grid-area: header;
             background:transparent;
        } 
        main{
            grid-area: main;
            background:black;
            align-self:stretch;
        }

        nav{
            grid-area: nav;
             background:black;
            border-radius: 10px;
            align-self:center;
             border: black solid 1px;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.7);
            transform:scale(0.9);
        }
@media screen and (max-width: 600px) {nav{transform:scale(0.8)}
}


        footer{
            grid-area: footer;
            background: black !important;
            align-self: flex-start;
        }
       
 galleria5 {
            grid-area: galleria5;
background: black;
     border: 1px solid #fff;
     padding-top:10px;
            padding-bottom:10px;
            padding-left:15px;
            padding-right:10px;
            text-align: left;
           word-spacing:normal;
            color:#000000;
        }
 galleria6 {
            grid-area: galleria6;
background: transparent;
     border: 1px solid #fff;
     padding-top:10px;
            padding-bottom:10px;
            padding-left:15px;
            padding-right:10px;
            text-align: left;
           word-spacing:normal;
            color:#000000;
        }
 galleria7 {
            grid-area: galleria7;
background: rgba(11, 240, 134, 0.12);
     border: 1px solid #fff;
     padding-top:10px;
            padding-bottom:10px;
            padding-left:15px;
            padding-right:10px;
            text-align: left;
           word-spacing:normal;
            color:#000000;
        }

@media(min-width:60em){body{font-size: 110%}}
    .item {
        display:grid;
        grid-template-columns:repeat (6,1 fr);
    grid-template-rows: minmax(100px, auto);
    grid-gap:10px;
        max-width: 960px;
            margin: 0 auto;
    grid-template-areas:
    "galleria5 galleria5 galleria5 galleria5 galleria5 galleria5"
    "galleria6 galleria6 galleria6 galleria6 galleria6 galleria6"
    }


/* desktop nested grid */
        @media screen and (min-width: 760px){
.item {
            display: grid;
            grid-template-columns: repeat (6,1 fr);
            grid-auto-rows: minmax(100px, auto);
    			grid-gap: 10px;
    			max-width: 960px;
    			margin: 0 auto;
            padding: 10px;
                grid-template-areas:
                    "galleria5 galleria5 galleria6 galleria6 galleria6 galleria6"
               
}
}



/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}



ul {
  list-style-type:none;
  margin:5;
    padding-left: 34px;
  overflow:hidden;
}
  

ul li {
  float:left;
     
}

ul li a {
  display:block;
  color: whitesmoke;
  text-align: center;
  padding: 10px 10px 10px 10px;
    margin:10px;
  text-decoration: none;
    font-family: 'Comfortaa', sans-serif;
}

ul li a:hover:not(.active){
  background-color: whitesmoke;
    color:black;
}

ul li a:active:{
  background-color:rgb(244, 237, 164);
  color: black;
    text-shadow: 0 0 3px #FF0000;
}


.active {
  background-color: rgb(244, 237, 164);
    color: black;
    text-shadow: 0 0 3px #FF0000;
}



 img {
   width: 100%;
     padding:10px;
 }

.cinta {
position: relative;
text-align: center;
display: inline-block; *display: inline;
}
.uno:before,
.dos:before, .dos:after,
.tres:before, .tres:after,
.cuatro:before, .cuatro:after {
content: "";
background: rgba(255, 238, 191, 0.72);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

.dos:before {
width: 40px;
height: 90px;
position:absolute;
top: 20%;
margin-top: -80px;
}
.dos:after {
width: 40px;
height: 70px;
position:absolute;
    left:90%;
top: 100%;
}
.dos:before {
left: 0px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
    z-index:1;
}
.dos:after {
    -webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
transform: rotate(40deg);
margin-top: -40px;
right: 10px;
}
.tres:before, .tres:after {
position:absolute;
    top:1;
}
.tres:before {
left: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tres:after {
top: inherit;
bottom: 4px;
right: 0;
    left:inherit;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cuatro:before {
width: 40px;
height: 90px;
position:absolute;
top: 25%;
margin-top: -70px;
    z-index:1;
}
.cuatro:after {
width: 40px;
height: 70px;
position:absolute;
    left:90%;
top: 100%;
}


.cuatro:before {
left: 0px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
.cuatro:after {
margin-top: -60px;
right: 10px;
}

.cinta img {
border: 1px solid #ddd;
padding: 8px;
background: #fff;
  text-align:center;
  vertical-align:top;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transform: scale(0.96);
   position: inherit;
  z-index: -1;

       
}

a.external:link {color: #f83030; font-weight: bold; }
a.external:visited {color: #c76cb1; font-weight: bold; }
a.external:hover {text-decoration: overline;}
a.external:active {color: #c44182; }


img.header {
   width: 100%;
    object-fit: contain;
 }
@media(max-width:900px){img.header {transform:scale(0.9);}} 

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}