@media screen and (min-width:300px) and (max-width:800px) {
html{
  overflow: hidden;
}
body{font-size:0.8em;}
sidebar{display:none;}
}

img{max-width:100%;
alignment-adjust:auto;
max-height:100%;}

/*ZOOM IMAGEN*/
{box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}
.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}

<script>
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*set background properties for the result DIV:*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*execute a function when someone moves the cursor over the image, or the lens:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*and also for touch screens:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image:*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*set the position of the lens:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*display what the lens "sees":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>

/*fin zoom imagen_________________________________________________*/
/*ESTILO DE BARRA BUSQUEDA*/

/*Aplicar estilo al cuadro de búsqueda dentro de la barra de navegación*/
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}
/*Cuando la pantalla tiene menos de 600px de ancho, apile los enlaces y el campo de búsqueda verticalmente en lugar de horizontalmente*/
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}
/*_______________________________________________________*/
/*DESPLEGABLE MENU*/
/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: GREEN;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 8px;
  background-color: inherit;
  font: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: GRAY;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Mega Menu header, if needed */
.dropdown-content .header {
  background: blue;
  padding: 5px;
  color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 15%;
  padding: 3px;
  background-color: GRAY;
  height: 250px;
}

/* Style links inside the columns */
.column a {
  float: none;
  color: GREEN;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color on hover */
.column a:hover {
  background-color: BLACK;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*_________________________*/

/*imagen */

.container {
  position: relative;
  max-width: 280px; /* Maximum width */
  margin: 0 auto; /* Center it */
}

.container .content {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: white; /* blanco text */
  width: 80%; /* Full width */
  height:20%;  
padding: 15px; /* Some padding */
}
/*______fin imagen___*/


/*Menuuubarra*/
.topnav {
  overflow: hidden;
  background-color: #14377F;
}
/*letras*/
.topnav a {
  float: left;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;/*remarcado-letras*/
  color: red;/*letras-remarcado*/
}

.topnav a.active {
  background-color: #D30404;
  color: white;/*letras-HOME*/
}
/*__________________________________*/
.topnavo {

}
/*letras*/
.topnavo a {
  
  color: #f2f2f2;
  text-decoration: none;
  
}
/*___________________________*/
/*carrucel movimiento*/
.demo2 {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            margin: 0px;        
            width:50%;
            height: 300px;
			overflow: hidden;
						
        }

/*carrucel movimiento*/
.demo {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            margin: 0px;        
            width:100%;
            height: 497px;
			overflow: hidden;
						
        }



.bamboo>.bamboo-prev {
    position: absolute;
    z-index: 5;
    top: 48%;
    left: 0;
    width: 20px;
    height: 30px;
    transform: translateY(-50%);
    opacity: 0.3;
    background-color: rgba(0, 0, 0, .4);
    background-repeat: no-repeat;
    background-image: url("D:/psg.web/pure-css-slider/img/carrucel/i.png");
    background-position: 50% 48%;
    background-size: 20px;
}

.bamboo>.bamboo-next {
    position: absolute;
    z-index: 5;
    top: 48%;
    right: 0;
    width: 20px;
    height: 30px;
    transform: translateY(-50%);
    opacity: 0.3;
    background-color: rgba(0, 0, 0, .4);
    background-image: url("d.png");
    background-repeat: no-repeat;
    background-position: 50% 48%;
    background-size: 20px;
}

.bamboo.roll {

}
.bamboo.roll>.slides>* {
    float: left;
    overflow: hidden;

}

.bamboo.roll-horizontal>.slides {
    font-size: 0px;
    white-space: nowrap;

}

.bamboo.fade {

}

.bamboo.fade>.slides>* {
    position: absolute;
    top: 0;
    left: 0;
  
}

.bamboo.into {

}

.bamboo.into>.slides {
    position: relative;
    z-index: 0;
			
}

.bamboo.into>.slides>* {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s linear;

}


.bamboo>.bamboo-dots {/*circulos de avance*/
    position: absolute;
    z-index: 5;
    bottom: 5%;
    left: 50%;
    margin: 0px;
    padding: 0px;
    list-style: none;
    transform: translateX(-50%);
}

.bamboo>.bamboo-dots>* {/*circulos de avance*/
    float: left;
    width: 10px;
    height: 10px;
    margin: 2px 6px;
    transition: 0.4s ease;
    vertical-align: middle;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.bamboo.into>.bamboo-prev {
    top: 2px;
    left: 50%;
    transform: rotate(-90deg);
    background-color: rgba(0, 0, 0, 0);
    background-size: 12px;
    /* filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1)); */
}

.bamboo.into>.bamboo-next {
    top: auto;
    bottom: 2px;
    left: 50%;
    transform: rotate(-90deg);
    background-color: rgba(0, 0, 0, 0);
    background-size: 12px;
    /* filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1)); */
}


.bamboo.blinds {

}

.bamboo.blinds>.slides>* {
    position: absolute;
    top: 0;
    left: 0;
}

.bamboo.blinds>.tempSlide {
    position: relative;
    z-index: 2;
}

.bamboo.blinds>.tempSlide>div {/*persianas*/
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    overflow: hidden;    
}
.bamboo.blinds>.tempSlide>div>* {
    position: absolute;
    top: 0px;
    left: 0px;
}
.image0 {
  flex-grow: 1;
    		width:99%;
            height: 450px;
}
/*carrucel FIN movimiento*/
/* HTML _____________________________________________________________________________________________________*/
html ,
body {
  height: 100%;
  overflow-x: hidden;
  text-align: center;
  font: 400 100% 'Raleway', 'Lato';
  background-color: #ffffff;
/*  background-image: url("D:/psg.web/pure-css-slider/img/hex0.jpg");/*imagen como fondo*/
  background-size: cover;/*recubre todo la imagen*/
  color: #CCC;
  margin: 0px
}

/* Headerbackground-color:  #53C2F9; _____________________________________________________________________________________________________*/

#logo, header h1
{
    display: block;
    margin-bottom: 0px;
	width:430px;
	height:80px;
	padding-top: 20px;   
    padding-bottom: 3px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}
/* Header/ */


h1 {
  font-weight: 700;
  font-size: 400%;
  color: #CCC;
}
h2 {
  font-weight: 400;
  font-size: 120%;
  color: #71AD37;
}
/*-------------------------------targeta--------------------------------------------*/
.img{
    margin: 2px;
   height:70%;
	width:100%;
	}
 
/*-------------------------------PIE DE PAGINA--------------------------------------------*/
footer {
  position: relative;
  margin-top: 100px;
  top: 5xp;
  width: 100%;
  background-color: gray;
  overflow: hidden;
  color: white;
  text-align: center;
  
}


/*____________________________div inicio_______________________________________*/
.art {
	 		position: relative;
            width: 80%;
			margin:0px auto;
			text-align:center;
			bottom: 5px;
	}


.content {
	 		position: bsolute;
            left: 0;
            right: 0;
            width: 100%;
			margin:0px auto;
			text-align:center;
		 }

.title {

  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: inset 0 0 0 1px #14377F, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
	padding-top: 1px;   
    padding-bottom: 1px;
	padding-left: 0px;
	padding-right: 0px;
    background-color: #14377F;
    }
.title:hover {
  background: gray;
}
.title a {
  color: #f2f2f2;
  text-decoration: none;
  
}

.right-art {/*div de imageness*/
	padding-left: 3px;
	padding-right: 5px;
 	float: left;
        width: 24%;
}
p.ex1 {
  padding-top: 2em;
  font-size:11px;
}
p.parrafo{
	line-height: 80%;
	font: 600% arial black;
	font-weight: 500;
	font-size:36px;
	color: #cc252b;
	}


.title-f{/*titulo de los div del foot*/
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;   
    padding-bottom: 10px;
    background-color: black;
    width: 97%;
	}
.right-f {
    padding-top: 10px;
    padding-left: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    position: relative;
    float: left;
    width: 48%;
    height: auto;
    text-align: left;
}

.right-div {/*div ubicacion y horario */
    padding-top: 10px;
    padding-left: 10px;
	margin-bottom: 10px;
    position: relative;
    float: left;
    text-align: left;
    width: 100%;
}
/*____________________________div fin__________.topnav a:hover_____________________________*/

.espacio {
float: left;
padding-left: 10px;
padding-bottom: 10px;
}

.imgcenter{
	  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      top: 3px;   
      bottom: 3px;
	  width:100%;
	  height:400px;
      margin-left: 0px;
      margin-right: 0px;
	  left: 50%;
	  top: 50%;
      }

.imgcenter:hover
{
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}