*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin-top: 80px;
    background-color: rgb(0, 0, 0);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
   

}

.titulo-5{
    font-size: 12px;
    min-width: 390px;
    position: absolute;
    top: 95%;
    color: #ffffff;
    
}
.titulo{
    
    text-align: left;
    position: absolute;
    top: 3%;
    color: #00deff;
    font-family: Roboto, sans-serif;
}
.hr{
    position: absolute;
    top: -2%;
    background-color: rgb(90, 90, 90);
    z-index: 3;
    margin-bottom: 10px;
}
hr {
    position: absolute;
    top: 0%;
    border: none; 
    height: 1px; 
    background-color: rgb(206, 206, 206); 
}
p{
    font-size: 14px;
    opacity: 0.5;
}
h1{
    font-weight: 250;
    color: #a72dfa;
}


.video-1{
    position: relative;
    background-color: rgb(0, 0, 0);
    width: 390px;
    height: 218px;
    
    
}
.video-2{
    position: relative;
    background-color: rgb(0, 0, 0);
    width: 390px;
    height: 218px;
    margin-bottom: 45px;
    
}
.video-3{
    position: relative;
    background-color: rgb(0, 0, 0);
    width: 390px;
    height: 218px;
    margin-bottom: 45px;
}
.video-4{
    position: relative;
    background-color: rgb(0, 0, 0);
    width: 390px;
    height: 218px;
    margin-bottom: 45px;
}

.media{
        position: relative;
        width: 390px;
        height: 256px;
        margin-bottom: 14px;
        background-color: transparent;
        bottom: -40px;
}
a.button1  {
 
    min-height: 30px;
    position: absolute;
  z-index: 3;
    opacity: 0.6;
    top: 86%;
    display: flex;
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #a72dfa;
    margin:0 0.3em 0.3em 0;
    border-radius:0.10em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#00deff;
    text-align:center;
    transition: all 0.2s;
    cursor: pointer;
    }
    a.button1:hover{
        opacity: 0.7;
    color:#a72dfa;
    background-color:transparent;
    }
    @media all and (max-width:30em){
    a.button1{
    display:block;
    
    }
    }
    a.button2  {
        
        min-height: 30px;
        position: absolute;
        z-index: 3;
        top: 86%;
        opacity: 0.6;
        display: flex;
        position: absolute;
        display:inline-block;
        padding:0.35em 1.2em;
        border:0.1em solid #a72dfa;
        margin:0 0.3em 0.3em 0;
        border-radius:0.0em;
        box-sizing: border-box;
        text-decoration:none;
        font-family:'Roboto',sans-serif;
        font-weight:300;
        color:#00deff;
        text-align:center;
        transition: all 0.2s;
        cursor: pointer;
        }
        a.button2:hover{
            opacity: 0.7;
        color:#a72dfa;
        background-color:transparent;
        }
        @media all and (max-width:30em){
        a.button2{
        display:block;
        }
        }
        
svg{
position: absolute;          
        }
a.button3  {
    min-height: 30px;
    position: absolute;
    z-index: 3;
    top: 86%;
            opacity: 0.6;

           display: flex;
           position: absolute;
          
            display:inline-block;
            padding:0.35em 1.2em;
            border:0.1em solid #a72dfa;
            margin:0 0.3em 0.3em 0;
            border-radius:0.10em;
            box-sizing: border-box;
            text-decoration:none;
            font-family:'Roboto',sans-serif;
            font-weight:300;
            color:#00deff;
            text-align:center;
            transition: all 0.2s;
            cursor: pointer;
            }
            a.button3:hover{
                opacity: 0.7;
            color:#a72dfa;
            background-color:transparent;
            }
            @media all and (max-width:30em){
            a.button3{
            display:block;
          
            }
            }
            svg{
                position: absolute;
              
            }
a.button4  {
    min-height: 30px;
    position: absolute;
    z-index: 3;
    top: 86%;
                opacity: 0.6;

               display: flex;
               position: absolute;
               
                display:inline-block;
                padding:0.35em 1.2em;
                border:0.1em solid #a72dfa;
                margin:0 0.3em 0.3em 0;
                border-radius:0.10em;
                box-sizing: border-box;
                text-decoration:none;
                font-family:'Roboto',sans-serif;
                font-weight:300;
                color:#00deff;
                text-align:center;
                transition: all 0.2s;
                cursor: pointer;
                }
                a.button4:hover{
                    opacity: 0.7;
                color:#a72dfa;
                background-color:transparent;
                }
                @media all and (max-width:30em){
                a.button4{
                display:block;
               
                }
                }
svg{
    max-width: 16px;
    max-height: 16px;
}
a.button-ver-mas  {

    opacity: 0.6;


    display: flex;
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #00deff;
    margin:0 0.3em 0.3em 0;
    border-radius:0.40em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:#00deff;
    text-align:center;
    transition: all 0.2s;
    cursor: pointer;
    }
    a.button-ver-mas:hover{
        opacity: 0.7;
    color:#000000;
    background-color:#00deff;
    }
    @media all and (max-width:30em){
    a.button-ver-mas{
    display:block;
    margin:0.4em auto;
    }
    }