/*Proyecto final*/
body{ 
  background-image:url('../img/fondo cctv.jpg');
  background-size: 1600px;
  font-family:'Averta',sans-serif;
margin-right: 10px;
margin-left: 20px
margin-bottom:400px;}

.contenedor-superior img{width: 100px;
height: 80px; margin-left: 0px; margin-top: 20px; float: left; }

.contenedor-superior h1{
  font-size: 60px;
}
h1{margin-top: 0px}

nav li a:hover{background-color:#c8d9f0; }
li{flex-grow: 1;}

.galeria nav ul{display: flex}

.modal{display: none}
.modal:target {
    display: block;
    position: fixed;
    background: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal a {
  background:#f5c5c5 ; 
    color: red;
    font-size: 30px;
    text-align: center;
    margin: 15px 0;
}
.modal,.div h3 {
    color: #ffff;
    font-size: 30px;
    text-align: center;
    margin: 15px 0;
}

.contenedor-inferior h2{font-size: 35px; 
    text-align: center;
    color: white;
    margin-top: 90px}
.contenedor-inferior h3{font-size: 50px}

    .contenedor-superior img{width: 80px;
height: 80px; margin-left: 0px; margin-top: -10px }

.slides img { width: 90px;
height: 100px; 
margin-left: 80px; 
margin-right: 50px;
margin-top: 10px;   
}

.flexslider{
  width: 10%;
  position: relative;

}
.slides{
  width:300px;
  overflow: hidden;
}

.slides,
.flex-control-nav,
.flex-direction-nav{
  margin:0;
  padding: 0;
  list-style: none;
}
.flex-control-nav{
  width: 230px;
  text-align: center;
}

.flex-control-nav li{
  display: inline-block;
  margin: 5px;
}
.flex-control-nav li a{
  display: block;
  background: #777777
}
.flex-control-nav a{
  color: #ffff;
}
.flex-control-nav li a: hover{
  background-color:black;
}
.flex-control-nav li a.flex-active:hover{
  background-color:black;}

.flex-direction-nav a{
  display: block;
  text-decoration: none;
  position: absolute;
  top: 50%;
  z-index: 999;
}
.flex-direction-nav .flex-prev{
  left: 0
  ;
}
.flex-direction-nav .flex-next{
  left: 200px
}
.flex-next{
  color: #f0f0f0;
  font-size: 20px;
}
.flex-prev{
  color: #f0f0f0;
  font-size: 20px;
}




.flexslidergaleria{
  width: 10%;
  position: relative;

}
.slides{
  width:300px;
  overflow: hidden;
}

.slides,
.flex-control-nav,
.flex-direction-nav{
  margin:0;
  padding: 0;
  list-style: none;
}
.flex-control-nav{
  width: 230px;
  text-align: center;
}

.flex-control-nav li{
  display: inline-block;
  margin: 5px;
}
.flex-control-nav li a{
  display: block;
  background: #777777
}
.flex-control-nav a{
  color: #ffff;
}
.flex-control-nav li a: hover{
  background-color:black;
}
.flex-control-nav li a.flex-active:hover{
  background-color:black;}

.flex-direction-nav a{
  display: block;
  text-decoration: none;
  position: absolute;
  top: 50%;
  z-index: 999;
}
.flex-direction-nav .flex-prev{
  left: 0
  ;
}
.flex-direction-nav .flex-next{
  left: 200px
}
.flex-next{
  color: #f0f0f0;
  font-size: 20px;
}