body {font-family: 'Arial', Helvetica, sans-serif;
			font-size: 16px;
            line-height: 1.5;
		}
        
        p.a
        { color:black;
            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.b
        { color:black;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1;
        }
@media(max-width:900px){p.b{color:whitesmoke;}}

p.c 
 { color:white;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1.2;
     align-self: center;
     padding: 10px;
        }
  p.d
        { color:black;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1;
            text-align: center;
            letter-spacing: 1px; 
            font-size:120%;
        }
  p.e
        { color:black;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1;
            text-align: center;
            letter-spacing: 1px; 
            font-size:140%;
             text-shadow: rgb(163, 65, 96) 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
        }
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;
        }



p.nested
        { color:color:#0202db;;
            font-family:  'Arial', Helvetica, sans-serif;
            line-height: 1.1;
        }
p.f
        { color:black;
            font-family:  'Arial', Helvetica, sans-serif;
            line-height: 1.5;
            text-align: left;
            letter-spacing:normal;
        }
p.de
        { color:black;
            font-family:  'Arial', Helvetica, sans-serif;
            line-height: 1;
            text-align: center;
            letter-spacing:3px;
            word-spacing:48px;
            font-size:130%;
        }
p.dd
        { color:black;
            font-family:  'Arial', Helvetica, sans-serif;
            line-height: 1.2;
            text-align: center;
            letter-spacing:normal;
            word-spacing:10px;
            font-size:110%;
            text-transform: uppercase;
        }


p.g
        { color:black;
            font-family: 'Arial', Helvetica, sans-serif;
            line-height: 1.5;
        }

#neontext {
color: #FFFFFF;
background: #333333;
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
color: #FFFFFF;
background: #333333;
}


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"
                "section1 section1 section1 section1 section1 section1 section1 section1"
                "section2 section2 section2 section2 section2 section2 section2 section2"
                "section section section section section section section section"
                "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"
                     "section section section section section section section section"
                    "section1 section1 section1 section1 section1 section1 section1 section1"
                     "section2 section2 section2 section2 section2 section2 section2 section2"
                   
                    "footer footer footer footer footer footer footer footer";
    		}
        }
		#content > *{
			padding: 10px;
		}

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

        aside{
            grid-area: aside;
            background: transparent;
            align-self:stretch;
        }
aside1{
            grid-area: aside1;
             background:rgba(11, 240, 134, 0.17);
            align-self:center;
        }

        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)}
}


        section{
            grid-area: section;
            background:rgba(226, 189, 176, 0.52);
        }
section1{
            grid-area: section1;
            background:transparent;
    border: 1px solid black;
        }
section2{
            grid-area: section2;
            *background:rgba(226, 189, 176, 0.52);*
        }
        footer{
            grid-area: footer;
            background: black !important;
        }
        galleria{
            grid-area: galleria;
            background: rgb(240, 170, 143);
            border: 1px solid #fff;
            padding-top:20px;
            padding-bottom:20px;
            padding-left:15px;
            padding-right:10px;
            text-align: left;
           word-spacing:px;
            color:#000000;
        }
        galleria1 {
            grid-area: galleria1;
            background: rgb(244, 237, 164);
            border: 1px solid #fff;
            padding-top:20px;
            padding-bottom:10px;
            padding-left:15px;
            padding-right:10px;
            text-align: left;
           word-spacing:normal
            color:#000000;
             
        }
          galleria2 {
            grid-area: galleria2;
            background: #dedbdb;
            border: 1px solid #fff;
             padding-top:10px;
            padding-bottom:10px;
            padding-left:15px;
            padding-right:10px;
            text-align: let;
           word-spacing:normal;
            color:#000000;

        }
 galleria3 {
            grid-area: galleria3;
     background: #f8cdcd;
     border: 1px solid #fff;
    padding-top:50px;
            padding-bottom:10px;
            padding-left:40px;
            padding-right:30px;
            text-align: left;
           word-spacing:normal;
            color:#000000;
        }
 galleria4 {
            grid-area: galleria4;
background: rgb(182, 214, 252);
     border: 1px solid #fff;
        }
 galleria5 {
            grid-area: galleria5;
background: floralwhite;
     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%}}
    .nested {
        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:
    "galleria galleria galleria galleria galleria galleria"
    "galleria1 galleria1 galleria1 galleria1 galleria1 galleria1"
    "galleria2 galleria2 galleria2 galleria2 galleria2 galleria2"
"galleria3 galleria3 galleria3 galleria3 galleria3 galleria3"
"galleria4 galleria4 galleria4 galleria4 galleria4 galleria4"}


/* desktop nested grid */
        @media screen and (min-width: 760px){
.nested {
            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:
                    "galleria galleria galleria galleria galleria1 galleria1"
                     "galleria2 galleria2 galleria2 galleria2 galleria2 galleria2"
                    "galleria3 galleria3 galleria3 galleria4 galleria4 galleria4"
                 
}
}



@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"
        "galleria7 galleria7 galleria7 galleria7 galleria7 galleria7"
    }


/* 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 galleria5 galleria6 galleria6 galleria6"
                     "galleria7 galleria7 galleria7 galleria7 galleria7 galleria7"
                 
}
}





.dot:before {
  content: ' \25CF';
  font-size: normal;
    color:#db2c02;
    padding-left:10px;
    padding-right:10px;
}

ul.circle {
    list-style-type:circle;
}


* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33%;
  
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display:inline;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}
.container {
  position: relative;
}

.text-block {
  position:relative;
  bottom: 10px;
  right: 0px;
  background-color: black;
  color: white;
    margin:2px;
  padding-left: 10px;
  padding-right: 10px;
}



.column1 {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row1::after {
  content: "";
  clear: both;
  display:inline;
}


.container1 {
  position: relative;
}

.text-block1 {
  position:relative;
  bottom: 10px;
  right: 0px;
font-family:  'Arial', Helvetica, sans-serif;
  background-color: #ce3e08;
  color: white;
  padding-left: 6px;
  padding-right: 6px;
    
}










#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
     width: 100%;
}

#myImg:hover {opacity: 0.4;}

#myImg2 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg3 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}


#myImg2:hover {opacity: 0.4;}

#myImg3:hover {opacity: 0.4;}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}



       
       h1 {
            font-family: 'Arial', Helvetica, sans-serif;
            padding: 10 px;
            margin: 0;
        }
h2 {
            font-family: 'Arial', Helvetica, sans-serif;
            border: 1px solid #fff;
            padding: 20 px;
            margin: 0;
        }


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: 'Arial', Helvetica, 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;
}

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; }


.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:
  z-index: -1;

       
}

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) {
    /* ... */
}