.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 60px;
}
.modal-content {
background-color: #fff;
margin: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0px 20px 20px;
width: 80%;
max-width: 900px;
}
.close {
color: #000;
float: left;
font-size: 28px;
font-weight: bold;
transition: color 0.3s;
position: relative;
left: 100%;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-content iframe {
width: 100%;
height: 500px;
}
.thumbnail {
position: relative;
margin: 5px;
}
.thumbnail .play_btn {
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
cursor: pointer;
}
.row.first_pxy {
padding: 40px 0px;
}
.video_p_xy {
padding: 5px 0px 10px;
margin: 0px 5px;
}
.description h3 {
font-size: 26px;
color: #0146a1;
font-weight: 700;
text-align: center;
margin: 0px;
}
#video1 {
background-color: #00000080;
z-index:9999;
}
.testimonial-item {
margin: 20px 0px;
border: solid 8px #d8d8d8;
background-color: #fff;
clip-path: polygon(calc(0% + 5px) calc(0% + 5px), calc(100% - 5px) calc(0% + 5px), calc(100% - 5px) calc(100% - 5px), calc(0% + 5px) calc(100% - 5px) );
transition: clip-path 0.6s linear;
width:100%;
}
.testimonial-item:hover {
clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
opacity: 1;
}

@media only screen and (min-width: 834px) and (orientation: landscape){
.modal-content {
background-color: #fff;
margin: auto !important;
padding: 0px 30px 30px !important;
width: 80%;
max-width: 900px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) and (-webkit-min-device-pixel-ratio: 1) {
.modal-content {
background-color: #fff;
margin: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0px 30px 30px;
width: 80%;
max-width: 900px;
}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
.video_p_xy {
padding: 40px 0px 20px 0px;
text-align: center;
}
.modal-content {
background-color: #fff;
margin: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0px 30px 30px;
width: 80%;
height: 50%;
max-width: 500px;
}
}