a,
.btn,
button {
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
outline: medium none;
}
[type=button]:focus, [type=submit]:focus, button:focus {
outline: none;
}
.utf-portfolio-area-item.default-padding {
padding-bottom: 65px;
}
.mix-item-menu button {
background: transparent none repeat scroll 0 0;
border: medium none;
font-family: "Poppins", sans-serif;
font-weight: 600;
padding: 8px 15px;
text-transform: uppercase;
position: relative;
z-index: 1;
border-radius: 6px;
margin: 0 3px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}
.mix-item-menu.dots button {
background: #ffffff;
border: medium none;
color: #666666;
font-family: "Poppins", sans-serif;
font-weight: 600;
padding: 5px 18px;
position: relative;
text-transform: uppercase;
z-index: 1;
border-radius: 4px;
font-size: 14px;
margin: 0 3px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2)
}
.mix-item-menu.dots button.active,
.mix-item-menu.dots button:hover {
background: #c70039;
color: #ffffff;
}
.mix-item-menu {
margin-bottom: 20px;
}
.mix-item-menu.dots button.active::after {
background: #c70039 none repeat scroll 0 0;
}
.mix-item-menu.dots button:last-child::after {
display: none;
}
.mix-item-menu.center-circle button {
background: transparent none repeat scroll 0 0;
border: medium none;
box-shadow: inherit;
color: #666666;
font-family: "Poppins", sans-serif;
font-weight: 600;
padding: 10px 20px;
position: relative;
text-transform: uppercase;
z-index: 1;
}
.mix-item-menu.center-circle.text-left button {
padding-left: 0;
}
.mix-item-menu.center-circle button.active::after {
background: #f4f4f4 none repeat scroll 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: "";
height: 20px;
left: 50%;
margin-left: -20px;
margin-top: -10px;
position: absolute;
top: 50%;
width: 20px;
z-index: -1;
}
.mix-item-menu.center-circle.text-left button.active,
.mix-item-menu.center-circle.text-left button:hover {
color: #c70039;
}
.mix-item-menu {
text-align: center;
}
.utf-portfolio-area-item .item-info {
padding-top: 15px;
}
.utf-portfolio-area-item .item-info h4 {
margin-bottom: 5px;
text-transform: capitalize;
color: #232323;
font-weight: 600;
}
.utf-portfolio-area-item .text-light .item-info h4 {
color: #ffffff;
}
.utf-portfolio-area-item .item-info h4 a {
color: #232323;
}
.utf-portfolio-area-item .item-info h4 a:hover {
color: #c70039;
}
.utf-portfolio-area-item .item-info .tags a {
color: #999999;
display: inline-block;
padding-right: 5px;
position: relative;
z-index: 1;
}
.utf-portfolio-area-item .item-info .tags a:hover {
color: #c70039;
}
.utf-portfolio-area-item .item-info .tags a::after {
bottom: 0;
content: ",";
position: absolute;
right: 0;
}
.utf-portfolio-area-item .item-info .tags a:last-child::after {
display: none;
}
.utf-portfolio-area-item.info-shadow .item-info {
background: #ffffff;
text-align: left;
border-radius: 0 0 6px 6px;
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
padding: 25px 30px;
}
.mix-item-menu.category-count button {
background: #f4f4f4 none repeat scroll 0 0;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
margin: 3px 0px 3px 8px;
padding: 8px 20px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}
.mix-item-menu button.active,
.mix-item-menu button:hover {
background: #c70039;
color: #ffffff;
}
.mix-item-menu.category-count {
margin-bottom: 30px;
}
.mix-item-menu.text-left button {
margin-right: 5px;
}
.mix-item-menu.active-border.text-center button.active::after {
left: 50%;
margin-left: -15px;
}
.utf-portfolio-area-item .pf-item {
float: left;
padding: 15px;
width: 33.333%;
}
.utf-portfolio-area-item .pf-item .effect-slide-up {
border-radius: 6px;
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.utf-portfolio-area-item .col-2 .pf-item {
width: 50%;
}
.utf-portfolio-area-item .col-4 .pf-item {
width: 25%;
}
.utf-portfolio-area-item .less-padding .pf-item {
padding: 0;
}
.utf-portfolio-area-item .pf-item.width {
width: 66.6667%;
}
.utf-portfolio-area-item .col-2 .pf-item.width {
width: 100%;
}
.load-button {
margin-top: 30px;
overflow: hidden;
padding-bottom: 15px;
}
.load-button i {
margin-left: 5px;
}
.container-full .pf-item img {
width: 100%;
}
.overlay-effect {
position: relative;
overflow: hidden;
z-index: 1;
}
.overlay-effect::after {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%) repeat scroll 0 0;
bottom: 0;
content: "";
height: 50%;
left: 0;
position: absolute;
width: 100%;
}
.overlay-effect * {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.overlay-effect img {
width: 100%;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.overlay-effect .item-info {
bottom: 0;
height: auto;
left: 0;
padding: 20px;
position: absolute;
top: auto;
width: 100%;
z-index: 1;
}
.overlay-effect h4 {
margin-bottom: 5px;
text-transform: uppercase;
}
.overlay-effect .item-info span {
color: #ffffff;
display: inline-block;
font-family: "Poppins", sans-serif;
padding-right: 5px;
position: relative;
text-transform: uppercase;
z-index: 1;
}
.overlay-effect .item-info span::after {
bottom: 0;
content: ",";
position: absolute;
right: 0;
}
.overlay-effect .item-info span:last-child::after {
display: none;
}
.overlay-effect .icons {
position: absolute;
bottom: 20px;
left: 20px;
opacity: 0;
transform: translateY(-150%);
}
.utf-portfolio-area-item .overlay-effect .icons a {
background: #ffffff none repeat scroll 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #c70039;
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.overlay-effect:hover .item-info h4,
.overlay-effect.hover .item-info h4,
.overlay-effect.hover .item-info span,
.overlay-effect:hover .item-info span {
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
opacity: 0;
}
.overlay-effect:hover .item-info .icons,
.overlay-effect.hover .item-info .icons {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.utf-portfolio-area-item .pf-item .item-effect {
overflow: hidden;
position: relative;
z-index: 1;
border-radius: 6px;
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.utf-portfolio-area-item .pf-item .item-effect::after {
background: #232323 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
}
.utf-portfolio-area-item .pf-item:hover .item-effect::after {
opacity: 0.6;
}
.item-effect {
position: relative;
overflow: hidden;
}
.item-effect img {
position: relative;
display: block;
height: auto;
width: 100%;
opacity: 0.8;
}
.item-effect img {
max-width: none;
width: -webkit-calc(100% + 0px) !important;
width: calc(100% + 0px) !important;
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
height: auto;
}
.item-effect .bottom-info {
height: auto;
left: 0;
margin-top: -25px;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.item-effect .bottom-info h4 {
color: #ffffff;
font-weight: normal;
line-height: 1.5;
font-family: 'Poppins', sans-serif;
letter-spacing: 0;
margin: 0;
}
.utf-portfolio-area-item.title-translate .item-effect .bottom-info {
background: transparent;
}
.item-effect a {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
text-transform: uppercase;
font-weight: 600;
}
.item-effect a {
background: #c70039;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #ffffff;
display: inline-block;
height: 40px;
line-height: 42px;
margin-right: 5px;
opacity: 0;
text-align: center;
transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
-webkit-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
-moz-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
-ms-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
-o-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
width: 40px;
font-size: 18px;
}
.item-effect:hover a {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}
.effect-up .pf-item:hover a {
opacity: 1;
}
.effect-up .pf-item:hover img {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.effect-up.clean-text .item-effect .bottom-info {
bottom: 0;
height: auto;
left: 0;
padding: 20px;
position: absolute;
top: auto;
width: 100%;
z-index: 1;
}
.effect-up.clean-text .item-effect h2,
.effect-up.clean-text .item-effect h3,
.effect-up.clean-text .item-effect h4,
.effect-up.clean-text .item-effect a {
-webkit-transform: translate3d(0, 110px, 0);
transform: translate3d(0, 110px, 0);
text-transform: capitalize;
font-weight: 500;
}
.effect-up.clean-text .item-effect h2,
.effect-up.clean-text .item-effect h3,
.effect-up.clean-text .item-effect h4 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
margin-bottom: 15px;
}
.effect-up.clean-text .item-effect:hover h2,
.effect-up.clean-text .item-effect:hover h3,
.effect-up.clean-text .item-effect:hover h4 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.effect-up.clean-text .item-effect:hover h2,
.effect-up.clean-text .item-effect:hover h3,
.effect-up.clean-text .item-effect:hover h4,
.effect-up.clean-text .item-effect:hover a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.effect-up.clean-text .item-effect a {
font-size: 14px;
height: 40px;
line-height: 40px;
width: 40px;
} .effect-left-swipe {
position: relative;
overflow: hidden;
background: #232323;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.effect-left-swipe * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.effect-left-swipe img {
width: 100%;
position: relative;
-webkit-transform: scale(1);
transform: scale(1);
}
.effect-left-swipe:after {
background: #c70039;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
content: '';
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
opacity: .9;
}
.effect-left-swipe .icons {
height: auto;
bottom: 25px;
left: 30px;
position: absolute;
text-align: left;
z-index: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.effect-left-swipe .icons .cat span {
color: #ffffff;
display: inline-block;
font-family: "Poppins", sans-serif;
position: relative;
padding-right: 5px;
}
.effect-left-swipe .icons .cat span::after {
bottom: 0;
content: ",";
position: absolute;
right: 0;
}
.effect-left-swipe .icons .cat span:last-child::after {
display: none;
}
.effect-left-swipe .cat,
.effect-left-swipe h4 {
display: block;
opacity: 0;
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.swipe-inline .effect-left-swipe .icons {
bottom: 20px;
left: 30px;
}
.swipe-inline .effect-left-swipe .cat {
display: inline-block;
margin-right: 3px;
width: auto;
}
.effect-left-swipe h4 {
font-weight: 500;
margin-bottom: 5px;
text-transform: capitalize;
}
.effect-left-swipe .cat {
display: inline-block;
}
.effect-left-swipe:hover img,
.effect-left-swipe.hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.effect-left-swipe:hover:after,
.effect-left-swipe.hover:after {
left: 0;
}
.effect-left-swipe:hover .icons .cat,
.effect-left-swipe.hover .icons .cat,
.effect-left-swipe:hover .icons h4,
.effect-left-swipe.hover .icons h4 {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.effect-left-swipe:hover h4,
.effect-left-swipe.hover h4,
.effect-left-swipe:hover .cat,
.effect-left-swipe.hover .cat {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.effect-left-swipe > a {
color: #c70039;
font-size: 20px;
opacity: 0;
text-align: center;
position: absolute;
right: 0;
top: 30px;
background: #ffffff;
width: 36px;
height: 36px;
line-height: 38px;
border-radius: 4px;
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
z-index: 1;
}
.effect-left-swipe:hover > a,
.effect-left-swipe.hover > a {
opacity: 1;
right: 30px;
} .effect-slide-up {
position: relative;
overflow: hidden;
background-color: #c70039;
}
.effect-slide-up * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.effect-slide-up h4 {
font-weight: 500;
left: 30px;
margin: 0;
opacity: 0;
position: absolute;
text-transform: capitalize;
bottom: 55px;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
-webkit-transform: translateY(10px);
transform: translateY(10px);
z-index: 2;
color: red;
}
.effect-slide-up .category {
color: #ffffff;
font-family: "Poppins", sans-serif;
left: 30px;
margin: 0;
opacity: 0;
position: absolute;
text-transform: capitalize;
bottom: 25px;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
-webkit-transform: translateY(10px);
transform: translateY(10px);
z-index: 2;
}
.item-middle .effect-slide-up a {
text-align: center;
display: block;
height: 100%;
width: 100%;
}
.item-middle .effect-slide-up h4 {
bottom: auto;
left: 0;
margin-top: -25px;
text-align: center;
top: 50%;
width: 100%;
}
.item-middle .effect-slide-up .category {
bottom: auto;
left: 0;
margin-top: 3px;
text-align: center;
top: 50%;
width: 100%;
}
.effect-slide-up .category span {
display: inline-block;
padding-right: 5px;
position: relative;
z-index: 1;
}
.effect-slide-up .category span::after {
bottom: 0;
content: ",";
position: absolute;
right: 0;
}
.effect-slide-up .category span:last-child::after {
display: none;
}
.effect-slide-up:hover img,
.effect-slide-up.hover img {
opacity: 0.15;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.effect-slide-up:hover h4,
.effect-slide-up.hover h4,
.effect-slide-up:hover .category,
.effect-slide-up.hover .category {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.effect-slide-up:hover h4{
color:red;
}
.effect-slide-up:hover:before,
.effect-slide-up.hover:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: skew(-45deg) translateX(50%);
transform: skew(-45deg) translateX(50%);
}
.effect-slide-up:hover:after,
.effect-slide-up.hover:after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transform: skew(-45deg) translateX(75%);
transform: skew(-45deg) translateX(75%);
} .portfolio-details-area .pf-item {
padding: 0;
width: auto;
overflow: hidden;
-moz-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
-webkit-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
-o-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.portfolio-details-area h2 {
font-weight: 700;
}
.portfolio-details-area h4 {
line-height: 1.4;
margin-bottom: 25px;
}
.portfolio-details-area .right-info {
padding-left: 25px;
}
.portfolio-details-area .left-info a {
display: block;
margin-bottom: 30px;
}
.portfolio-details-area .left-info a img {
border-radius: 6px;
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}
.portfolio-details-area .left-info a:last-child {
margin: 0;
}
.portfolio-details-area .projects-info li {
border-bottom: 1px solid #e7e7e7;
display: block;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
margin-bottom: 7px;
padding-bottom: 7px;
text-align: left;
text-transform: capitalize;
}
.portfolio-details-area .projects-info li span {
color: #868686;
display: inline-block;
font-size: 14px;
font-weight: 400;
margin-left: 6px;
text-transform: capitalize;
}
.portfolio-details-area .projects-info li i {
color: #666666;
margin-right: 8px;
}
.portfolio-details-area .projects-info {
margin: 25px 0;
}
.portfolio-details-area .projects-info li:last-child {
border: medium none;
margin: 0;
padding: 0;
}
.portfolio-details-area .share-projects h4,
.portfolio-details-area .share-projects ul {
float: left;
}
.portfolio-details-area .share-projects ul li {
display: inline-block;
}
.portfolio-details-area .share-projects ul li a {
background: #232323 none repeat scroll 0 0;
border: medium none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #ffffff;
display: inline-block;
font-size: 16px;
height: 40px;
line-height: 42px;
margin-right: 5px;
text-align: center;
width: 40px;
}
.portfolio-details-area .share-projects ul li.facebook a {
background: #3b5998 none repeat scroll 0 0;
}
.portfolio-details-area .share-projects ul li.twitter a {
background: #1da1f2 none repeat scroll 0 0;
}
.portfolio-details-area .share-projects ul li.pinterest a {
background: #bd081c none repeat scroll 0 0;
}
.portfolio-details-area .share-projects ul li.g-plus a {
background: #db4437 none repeat scroll 0 0;
}
.portfolio-details-area .share-projects ul li.linkedin a {
background: #0077b5 none repeat scroll 0 0;
}
.portfolio-details-area .share-projects ul li.dribbble a {
background: #ea4c89 none repeat scroll 0 0;
}
.portfolio-details-area .share-projects h4 {
margin: 0;
}
.portfolio-details-area .share-projects {
overflow: hidden;
}
.portfolio-details-area .utf-site-heading {
margin-bottom: 30px;
}
.portfolio-details-area .related-projects .pf-item .item-info h4 {
font-weight: 500;
margin: 0 0 5px;
text-transform: capitalize;
}
.portfolio-details-area .related-projects .pf-item .item-info h4 a {
color: #232323;
}
.portfolio-details-area .related-projects .pf-item .item-info h4 a:hover,
.portfolio-details-area .related-projects .pf-item .item-info a:hover {
color: #c70039;
}
.portfolio-details-area .related-projects .pf-item .item-info a {
color: #999999;
display: inline-block;
padding-right: 5px;
position: relative;
z-index: 1;
}
.portfolio-details-area .related-projects .pf-item .item-info a::after {
bottom: 0;
content: ",";
position: absolute;
right: 0;
}
.portfolio-details-area .related-projects .pf-item .item-info a:last-child::after {
display: none;
}
.portfolio-details-area .related-projects .pf-item .item-info {
padding: 20px 30px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 6px 6px;
border-top: 0;
}
.portfolio-details-area .related-projects .owl-dots .owl-dot span {
background: #ffffff none repeat scroll 0 0;
border: 6px solid #999999;
height: 16px;
margin: 5px;
border-radius: 40px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
width: 16px;
}
.portfolio-details-area .related-projects .owl-dots .owl-dot.active span,
.portfolio-details-area .related-projects .owl-dots .owl-dot:hover span {
border-color: #c70039;
} .box-height {
height: 300px
}