*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    body{
        background-image: url(fondo11.jpg);
       
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .nav {
        font-family: 'Titillium Web';
        text-transform: uppercase;
        text-align: center;
        font-weight: 600;
        
      }
      
      .nav * {
        box-sizing: border-box;
        transition: all .35s ease;
       
      }
      
      .nav li {
        display: inline-block;
        list-style: outside none none;
        margin: .5em 1em;
        padding: 0;
       
      }
      
      .nav a {
        padding: .5em .8em;
        color: rgb(255, 255, 255);
        position: relative;
        text-decoration: none;
        font-size: 30px;
      }
      
      .nav a::before,
      .nav a::after {
        content: '';
        height: 14px;
        width: 14px;
        position: absolute;
        transition: all .35s ease;
        opacity: 0;
       
      }
      
      .nav a::before {
        content: '';
        right: 0;
        top: 0;
        border-top: 3px solid #16d3b3;
        border-right: 3px solid #16d3b3;
        transform: translate(-100%, 50%);
      }
      
      .nav a:after {
        content: '';
        left: 0;
        bottom: 0;
        border-bottom: 3px solid #16d3b3;
        border-left: 3px solid #16d3b3;
        transform: translate(100%, -50%)
      }
      
      .nav a:hover:before,
      .nav a:hover:after{
        transform: translate(0,0);
        opacity: 1;
        
      }
      
      .nav a:hover {
        color: #3DA35D;
        }
    
    .nav-relleno{
      background-image:url(fondo11.jpg) ;
    }
    h2{
        text-align: center;
        font-size: 60px;
        font-family: cabria bold;
        margin-top: 50px;
        color: rgb(18, 137, 192);
        text-shadow: 6px 0px 6px black;
    }
    .content-all{
        width: 210px;
        margin: auto;
        Perspective: 800px;
        position: relative;
        margin-top: 50px;
    }
    .content-carrousel{
        width: 80%;
        position: absolute;
        animation: rotar 40s infinite linear;
        transform-style: preserve-3d;
    }
    .content-carrousel:hover{
        animation-play-state: paused;
        cursor: pointer;
    }
    .content-carrousel figure{
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: absolute;
        box-shadow: 0px 0px 20px 0pX black;
        transition: all 300ms;
        border-radius: 40px;
    }
    .content-carrousel figure:hover{
        box-shadow: 50px 50px 50 px 50px black;
        transition: all 300ms;
    }
    
    
    .content-carrousel figure:nth-child(1){transform: rotateY(0deg) translateZ(390px);}
    .content-carrousel figure:nth-child(2){transform: rotateY(24deg) translateZ(390px);}
    .content-carrousel figure:nth-child(3){transform: rotateY(48deg) translateZ(390px);}
    .content-carrousel figure:nth-child(4){transform: rotateY(72deg) translateZ(390px);}
    .content-carrousel figure:nth-child(5){transform: rotateY(96deg) translateZ(390px);}
    .content-carrousel figure:nth-child(6){transform: rotateY(120deg) translateZ(390px);}
    .content-carrousel figure:nth-child(7){transform: rotateY(144deg) translateZ(390px);}
    .content-carrousel figure:nth-child(8){transform: rotateY(168deg) translateZ(390px);}
    .content-carrousel figure:nth-child(9){transform: rotateY(192deg) translateZ(390px);}
    .content-carrousel figure:nth-child(10){transform: rotateY(216deg) translateZ(390px);}
    .content-carrousel figure:nth-child(11){transform: rotateY(240deg) translateZ(390px);}
    .content-carrousel figure:nth-child(12){transform: rotateY(264deg) translateZ(390px);}
    .content-carrousel figure:nth-child(13){transform: rotateY(288deg) translateZ(390px);}
    .content-carrousel figure:nth-child(14){transform: rotateY(312deg) translateZ(390px);}
    .content-carrousel figure:nth-child(15){transform: rotateY(336deg) translateZ(390px);}
    .content-carrousel figure:nth-child(16){transform: rotateY(360deg) translateZ(390px);}
    .content-carrousel img{
    width: 100%;
    height: 100%;
    border-radius: 55px ;
    border: 3px solid;
    transition: all 300ms; 
    }
    
    
    
    .content-carrousel img:hover{
        transform: scale(1.2);
        transition: all 300 ms;
    }
    @keyframes rotar{
        form{
        Transform: rotateY(0deg);
        }to{
        transform: rotateY(360deg);
        }
    }