html { 
height: 100%;
}
body{
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}

.content{
    width: 100%;
    position: absolute;
    background: #24262b;
    color: #CCCCCC;
}

.context{
    width: 100%;
    min-height: 60vh;

}
.tittle-1{
    width: 100%;
    min-height: 60vh;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    
}
.container{
width: 100%;
min-height: 10vh;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
margin-top: auto;
background-color: #24262b;
padding: 50px 50px 50px 100px;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 30px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #e91e63;
}

@media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
}
img{
    width: 100%;
} 
.controller{
    display: block;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
.boton{
    /* display: block; */
	width: 100%;
	max-width: 200px;
	background: #c1171f;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 10px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 15px;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}
.boton:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px ;
	background-color:#e43922
	/* #0059fd */

  }

.video-wrap{ 
    text-align: center;
    width:85%; 
    height:115%; 
    margin:10px auto;
    max-width: 640px;
    max-height: 480px;

    min-height: 100px;

}
#canvas_video{
    border:1px solid #d9d9d9;
    width: 100%; 
    height: 100%;
}
.title-container{
    width: auto;
    height: 500px;
    text-align: center;
    position: relative;
    top: 200px;
}

.p-controller{
    margin-bottom: 0px;
    font-size: 18px;
    color:#fff ;
}


.modal-note{
    z-index: 1000;
    text-align: center;
    display:flexbox;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%    ;
    max-height: 700px;
    position: absolute;
    background: #24262b;
    color: #CCCCCC;
}
.content-modal-img{
    top: 90px;
	display: inline-block;
    width: 50vw;
    height: 50vw;
    min-width: 150px;
	min-height: 150px;
    max-height: 270px;
    max-width: 270px;
    background: #CCCCCC;
    border-radius: 50%;
    align-self: center;
    position: relative;
    z-index: 10;
}
.modal-img{
    position: relative;
    display: inline-block;
    width: 50vw;
    min-width: 50px;
    max-width: 200px;
    top: 12%;
    color: #CCCCCC;
}
.modal-title{
    position: relative;
    top: 90px;
    display: inline-block;
    text-align: center;
    font-size: 5vw;
    
}
.content-modal-title{
    display: inline-flex;
    width: 70%;
    height: auto;
    max-width: 1200px;
}

@media (max-width: 400px) {
    .title-container{
        top: 100px;  
    }
    .p-controller{
        position: relative;
        top: 0px;
    }
}
@media (min-width: 245px) and (max-width: 500px) {
    .modal-img{
        width: 40vw;
    }
}