/*
Theme Name: Olga Bakhtina Art
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Dijana Markovic @ Motus - Dynamic Web Solution
Author URI: https://in-motus.com/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

#site-navigation-wrap .dropdown-menu > li > a {
    text-transform: uppercase !important;
}

.oceanwp-social-menu .minimal ul li a:hover{
    background: #f64747 !important;
    color: #fff !important;
    border-color: #f64747 !important;
}

.contact-form-submit{
    background: #f64747 !important;
    border: 1px solid #f64747 !important;
    color: #fff !important;
    padding: 15px 30px !important;
}

.contact-form-submit:hover{
    background: #fff !important;
    color: #f64747 !important;
    border: 1px solid #f64747 !important;
    padding: 15px 30px !important;
}


.sidebar-box .widget-title, footer .widget-title, article .widget-title {
    font-size: 18px;
    font-weight: 700;
    border-left: 0;
    padding-left: 0;
    padding-bottom: 15px;
    position: relative;
}

.sidebar-box li {
    font-size: 16px;
}

h4.widget-title:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    display: block;
    width: 50px;
    height: 5px;
    background-color: #f64747;
}

#comments #reply-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
}

#comments #reply-title:after {
    content: "";
    margin: 5px auto;
    display: block;
    width: 50px;
    height: 5px;
    background-color: #f64747;
}

#comment-form-comment {
    border: 0 !important;
}

.sidebar-box .painting-details {
    padding-left: 0;
    padding: 15px;
    background: #eee;
    margin-left: 0;
}

.painting-details li {
    list-style: none;
    color: #333;
}

.painting-details h6 {
    margin-bottom: 0;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

a.site-title.site-logo-text {
    text-transform: uppercase !important;
    font-weight: 600;
}

.site-tagline {
    display: block;
    margin-top: -5px;
}
#mosaic{
    margin-top: -5px;
}

#mosaic .sti-btn{
    display: none;
}
.grid-item{
    overflow: hidden;
    position: relative;
    opacity: 0;
}

.main-image{
    width: 100%;
    transform: rotateZ(0deg) scale(1);
    -webkit-transition: -webkit-transform 2s linear;
    -moz-transition: -moz-transform 2s linear;
    -o-transition: -o-transform 2s linear;
    transition: transform 2s linear;
}

.grid-item:hover > .main-image{
     transform: rotateZ(10deg) scale(1.3);
     -webkit-transition: -webkit-transform 6s linear;
     -moz-transition: -moz-transform 6s linear;
     -o-transition: -o-transform 6s linear;
     transition: transform 6s linear;
 }
.sti-btn:hover .main-image{
    transform: rotateZ(10deg) scale(1.3);
    -webkit-transition: -webkit-transform 6s linear;
    -moz-transition: -moz-transform 6s linear;
    -o-transition: -o-transform 6s linear;
    transition: transform 6s linear;
}

.grid-item:hover > .overlay-link{
    background: rgba(245, 71, 71, .5);
    z-index: 9999;
}

.grid-item .overlay-link{
    background: rgba(245, 71, 71, .0);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease;
}

.grid-item .overlay-link h5{
    color: #fff;
    opacity: 0;
    transition: all 1s ease;
}

.grid-item .overlay-link:hover h5{
    opacity: 1;
}
.fadeInItem{
    animation: fadeIn .6s linear 1 forwards;
}


@keyframes fadeIn{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}