.classes-main{ position:relative;}
.classes-main .grid-col-two{ width:50%; float:none; }
.classes-main .grid-col-three{ width:33.3333%; float:none; }
.classes-main .grid-col-four{ width:25%; float:none; }

.classes-item { position:relative; margin:15px 0 15px; display:block;}
.classes-inner { position:relative;}

.classes-thumb { position:relative; padding-top:85.366%; border-radius:0 30px 0 0; overflow:hidden; z-index:2;}
.classes-thumb img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; -webkit-transition:all .3s; transition:all .3s;}
.classes-thumb:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.8); opacity:0; z-index:1; -webkit-transition:all 0.3s linear; transition:all 0.3s linear;}

.classes-plus { position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; text-align:center; margin:auto;}
.classes-plus:before { content:''; position:absolute; top:0; left:0; border-width:0 2px 2px 0; border-style:solid; border-color:#ffffff; z-index:1; height:30px; width:30px; margin:0; opacity:0; -webkit-transition:all 0.35s linear; transition:all 0.35s linear;}
.classes-plus:after { content:''; position:absolute; bottom:0; right:0; border-width:2px 0 0 2px; border-style:solid; border-color:#ffffff; z-index:1; height:30px; width:30px; margin:0; opacity:0; -webkit-transition:all 0.35s linear; transition:all 0.35s linear;}

.classes-content { position:relative; background-color:#ffffff; margin-top:-20px; padding:20px 0 0; border:1px solid #aeaeae; border-top-width:0; border-radius:0 0 0 30px; z-index:3; -webkit-transition:all .3s ease; transition:all .3s ease;}
.classes-content-inner { background-color:#ffffff; padding:20px 15px 30px; text-align:center; border-radius:inherit; -webkit-transition:all .3s ease; transition:all .3s ease;}
.classes-category { display:block; margin-bottom:10px;}
.classes-category a { font-size:17px; color:#77997e;}
.classes-content h4 { font-size:20px; text-transform:capitalize; margin-bottom:15px;}
.classes-price { font-size:22px; color:#77997e; font-weight:700; margin-bottom:20px;}
.classes-meta { position:relative; background-color:#181d18; padding:10px 15px;}
.class-meta-box { position:relative; text-align:center;}
.class-lable { font-size:15px; color:#77997e;}
.class-value { font-size:15px; color:#ffffff;}

.classes-button { position:absolute; margin:0; bottom:0; left:0; right:0; text-align:center; -webkit-transform:translateY(50%); -ms-transform:translateY(50%); transform:translateY(50%); -webkit-transition:all .3s ease; transition:all .3s ease; opacity:0;}

.classes-item:hover .classes-thumb:before { opacity:1;}
.classes-item:hover .classes-plus:before { opacity:1; top:50%; left:50%; margin:-14px 0 0 -14px; -webkit-transform:translate(-50%, -50%) rotate(360deg); -ms-transform:translate(-50%, -50%) rotate(360deg); transform:translate(-50%, -50%) rotate(360deg);}
.classes-item:hover .classes-plus:after { opacity:1; bottom:50%; right:50%; margin:0 -14px -14px 0; -webkit-transform:translate(50%, 50%) rotate(-360deg); -ms-transform:translate(50%, 50%) rotate(-360deg); transform:translate(50%, 50%) rotate(-360deg);}
.classes-item:hover .classes-content { -webkit-transform:translateY(-30px); -ms-transform:translateY(-30px); transform:translateY(-30px); z-index:3; padding-bottom:0;}
.classes-item:hover .classes-content-inner { -webkit-transform:translateY(-20px); -ms-transform:translateY(-20px); transform:translateY(-20px);}
.classes-item:hover .classes-button { visibility:visible; opacity:1;}

.items .classes-item { margin-right:0; margin-left:0;}

/* Single Portfolio */
.classes-single { position:relative;}
.classes-single .class-content { width:100%; position:relative; margin-bottom:30px; padding-bottom:15px; padding-top:30px; border-top:1px solid #181d18; border-bottom:1px solid #181d18;}
.classes-metadeta { position:relative; width:100%;}
.classes-metadata-item { position:relative; display:block; text-align:center; margin-bottom:30px;}
.classes-metadata-item span { display:block; font-size:17px; padding:5px 0;}
.classes-metadata-item h4 { position:relative; font-size:18px; z-index:5; display:block; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; padding:12px 30px 7px; background-color:#181d18; color:#ffffff; -webkit-transition:all .4s; transition:all .4s;}

.classes-share { text-align:center; display:block; margin-top:20px;}
.classes-share ul.social-share-post{ margin:0; border-radius:0; display:inline-block; text-align:center; }
.classes-share ul.social-share-post li{ border-radius:0; margin:0 5px;}
.classes-single .image-carousel{ margin:0 auto 50px; }

/* Related Portfolio Posts */
.related-classes { position:relative;}
.related-classes h3 { position:relative; padding:10px 25px 10px 0; display:block; font-size:25px; font-weight:500; border-bottom:2px solid #77997e; text-transform:uppercase;}
.rel-class-inner { position:relative; display:flex;}
.rel-class-inner .classes-item.col-4 { padding:0; margin-left:10px; margin-right:10px;}