@import url('https://fonts.googleapis.com/css?family=David+Libre|Roboto:300');

/* ---------- Common part for all pages ---------- */

body {
    padding-top: 5rem; /* padding to shift content down from tixed-top navbar */
}

    /* Logo image to go beyond navbar bottom */

.navbar {
    max-height: 70px;
} /* this breaks menu dropdown */

.navbar-brand img {
    width: 115px;
    margin-top: 0px;
    padding-top: 50px;
}

@media (max-width: 760px) {  /* 760 to keep still big Logo on iPan Mini vertical orientation which is exactly 768px wide */
    .navbar-brand picture img {
        width: 50px;
        padding-top: 10px;
    }
}

@media (max-width: 992px) {
    .navbar {
        max-height: auto;
        padding-top: 0;
        vertical-align: top;
    } /* to fix hamburger button and logo shifting down on tablet / phone screen after adding max-height to .navbar in desktop screen */
    
     .navbar-brand img {
        padding-top: 58px;
    }

}


    /* END OF Logo image to go beyond navbar bottom */


/* Fonts for menu or text */

.my-text-menu { /* header of paragraph on About page */
    font-family: 'David Libre', serif;
}

.my-text-about { /* text of paragraph on About page */
    font-family: 'Roboto', sans-serif;
}

/* END OF Fonts for menu or text */


/* ---------- END OF Common part for all pages ---------- */




/* ---------- Portfolio page ---------- */

.portfolio-item img {
    transition: 1s;
    padding-top: 10px;
    width: 100%;
    height: auto;
    /*height: 300px;*/
    /*height: 100%;
    width: 100%; */
    /*object-fit: cover; /* was befor object-fit: contain; */
    filter: grayscale(75%);
}

.portfolio-item img:hover {
    filter: none;
}

.portfolio-item-no-filter img {
    transition: 1s;
    padding-top: 10px;
    width: 100%;
    height: auto;
}

@media (max-width: 992px) {
    .portfolio-item img {
        filter: none; /* no grayscale filter on top of image on mobile devices */
    }
}


@media (min-width: 992px) {
    
    .portfolio-item img:hover {
        transform: scale(0.95); /* scale effect only on large devices */
    }

}
.my-category-container {
    position: relative;
    /*max-width: 760px;*/
}

.my-category-header {
    /*color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;*/
    
    position: absolute; 
    bottom: 0; 
    padding-top: 100%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.5); /* Black see-through */
    color: black; /*#f1f1f1; */
    width: 100%;
    height: 100%;
    transition: .5s ease;
    opacity: 0;
    font-family: 'David Libre', serif;
    font-size: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.title-top {
    vertical-align: top !important;   
}

@media (max-width: 992px) {
    .my-category-header {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1); /* Black see-through */
        transition: none;     
    } /* show category headers permanently without hover on mobile devices */
    
    .my-font-light {
        color: white; /* on smartphone and tablet some permanent category descriptions should be in white because there's no half opacity backgroud layer*/    
    }
}

.my-category-container:hover .my-category-header {
    opacity: 1;
}

.my-category-link {
    text-decoration: none;
    color: black;
}

.my-category-link:hover {
    text-decoration: none;
    color: black;
}

/* ---------- END OF Portfolio page ---------- */

.tag-description {
    display: none;
}

/* ---------- About page ---------- */

/* Color borders around divs, were needed inly during build to see formatting
.container-fluid {
    border: 1px solid blue;
}

.about-column, .about-column, .about-header {
    border: 1px solid red;
} */
    /* Extra small devices (portrait phones, less than 576px)
       No media query for `xs` since this is the default in Bootstrap */

.my-jumbotron-with-image {
    /* background-image: url('http://lubakultaeva.com/test_site/images/about1%20mono%20-02.jpg'); */
    background-image: url('http://lubakultaeva.com/test_site/images/about2%20copy%20-01.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.my-contact-email, .my-contact-email:hover {
    text-decoration: none;
    color: white;
}

    /* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { ... }

    /* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {

    .about-header {
        max-width: 780px;
    }

    .portfolio-item img, .portfolio-item-no-filter img {
        padding-left: 20px;
        padding-right: 20px;
    }    
    
}

    /* Large devices (desktops, 992px and up) - REPLACED TO 1025 to keep without left margin on iPad mini in landscape mode*/
@media (min-width: 1025px) {
    
    .about-header {
        margin-left: 200px;
    }
}

    /* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* ---------- END OF About page ---------- */


/* TO BE REMOVED - USED ONLY DURING TROUBLESHOOTING */

.bd-example {
    background-color:rgba(86,61,124,.15);
    border:1px solid rgba(86,61,124,.2)
}

.bd-highlight {
    background-color:rgba(86,61,124,.15);
    border:1px solid rgba(86,61,124,.15)
}

.my-border-red {
    border: 1px solid red;
}

.my-border-black {
    border: 1px solid black;
}

.my-border-blue {
    border: 1px solid blue;
}

.my-border-green {
    border: 1px solid green;
}