.HTCon {text-align: justify; float: left; margin-bottom: 1em;}

.VidCon {height: 405px; width:22%; text-align: center; margin: 2% 4% 1% 0; float: left; background-color: #FFF; border-radius:15px; box-shadow: 0 11px 18px -10px #909090}
.VidCon:nth-child(4n) {margin-right: 0}
.VidCon img {width: 82%; margin-top: 9%; border: 1px solid #ccc}

#regGrey .DSImg {width: 82%; margin-top: 9%; border: 1px solid #ccc}

#regGrey h3.WNh3 {margin: 2% 0 0; padding: 2%; font-size: 1em; color: #d6291c; height: 50px; display: table-cell; vertical-align: middle; width: 1%; text-decoration: none}
#regGrey h3.WNh3 a {color: #d6291c; text-decoration: none}
#regGrey .VidCon:hover a {font-family: '3dsweb'; color: #d6291c; text-decoration: none}

.TxtP {margin: 0; padding: 0 9%;}

@media (max-width: 1100px) {
#regGrey .DSImg {width: 63%}
.VidCon {width:32%; margin-right: 2%;}
.VidCon:nth-child(4n) {margin-right: 2%}
.VidCon:nth-child(3n) {margin-right: 0}
}

@media (max-width: 980px) {
#regGrey .DSImg {width: 72%}
.VidCon {height: 385px;}
}

@media (max-width: 880px) {
#regGrey .DSImg {width: 57%}
.VidCon  {width:48%; margin-right:4%; height: 405px;}
.VidCon:nth-child(3n) {margin-right: 4%}
.VidCon:nth-child(2n) {margin-right: 0}
}

@media (max-width: 680px) {
#regGrey .DSImg {width: 67%}
.VidCon  {height: 395px;}
}

@media (max-width: 555px) {
#regGrey .DSImg {width: 60%}
.TxtP {padding-bottom: 9% }
.VidCon  {width:100%; margin: 5% 0; height: auto}
.VidCon:nth-child(4n) {margin: 5% 0;}
.VidCon:nth-child(3n) {margin: 5% 0;}
.VidCon:nth-child(2n) {margin: 5% 0;}
}

@media (max-width: 400px) {
#regGrey .DSImg {width: 82%}
}