@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

.responsive {
  width: 100vw;
  height: 50vh;
}
  .banner{
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center                ;
            align-items: center;
            background-color: rgb(0,0,0,0.5);
            z-index: 10;
        }
        
        .banner video{
            position: absolute;
            top: 40px;
            left: 0;
            object-fit: cover;
            width: 100%;
            height: 95%;
            pointer-events: none;
            
        }
        
        .banner .content
        {
            position: relative;
            z-index: 10;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }
        
        .banner .content h1{
            margin: 0;
            padding: 0;
            font-size: 4.5em;
            text-transform: uppercase;
            color: #fff;
        }

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

        #myImg:hover {opacity: 0.7;}

        /* The Modal (background) */
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1000; /* Sit on top */
          padding-top: 5vh; /* 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: 60%;
         /*  max-width: 900px; */
        }

         
 

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



            .pos-relative{
                position: relative;
            }
            
            
            .z30:hover barralarga{
                width:100%; 
            } 
            
           
            
            
            .z30{
                z-index: 30;
            }
            
             .z_1{
                z-index: -1;
            }
           
.upper{
    text-transform: uppercase;
}