/*
This file provides styles that are only used on the index page
Primarily, it is use to add shadows to header images that should only be present in the index

Making a new css file and only including it in index seems to be the simplest way to do that
without adding shadows to the rest of the site
*/


/*
There is an issue with the images being square boxes with transparent borders
A normal box-shadow will draw the borders around the transparent suqare image,
not just the visible part

This way works:
https://stackoverflow.com/questions/12690444/css-border-on-png-image-with-transparent-parts
But isn't supported on any version of IE (but works on Edge)

An alternative solution would be to edit the image itself (just put the shadow into the image)
*/

/*
#logo-img {
    -webkit-filter: drop-shadow(1px 1px 10px rgba(255,255,255,0.4))
                    drop-shadow(-1px -1px 10px rgba(255,255,255,0.4));
    
    filter:         drop-shadow(1px 1px 10px rgba(255,255,255,0.4)) 
                    drop-shadow(-1px -1px 10px rgba(255,255,255,0.4));
}
*/

/*
#add-img {
    -webkit-filter: brightness(100%)
                    drop-shadow(1px 1px 10px rgba(255,255,255,0.4))
                    drop-shadow(-1px -1px 10px rgba(255,255,255,0.4));
    
    filter:         brightness(100%)
                    drop-shadow(1px 1px 10px rgba(255,255,255,0.4)) 
                    drop-shadow(-1px -1px 10px rgba(255,255,255,0.4));


}
*/

/*
.login-icon {
    -webkit-filter: brightness(100%)
                    drop-shadow(1px 1px 10px  rgba(255,255,255,0.4))
                    drop-shadow(-1px -1px 10px   rgba(255,255,255,0.4));
                    

    filter:         brightness(100%)
                    drop-shadow(1px 1px 10px  rgba(255,255,255,0.4)) 
                    drop-shadow(-1px -1px 10px  rgba(255,255,255,0.4));
}
*/

/*
#login-button.logged-out {
    -webkit-filter: brightness(150%)
                    drop-shadow(1px 1px 10px  rgba(255,255,255,0.4))
                    drop-shadow(-1px -1px 10px   rgba(255,255,255,0.4));


    filter:         brightness(150%)
                    drop-shadow(1px 1px 10px  rgba(255,255,255,0.4)) 
                    drop-shadow(-1px -1px 10px  rgba(255,255,255,0.4));

    opacity: 0.3;
}
*/

/*

#search-button{
    -webkit-filter: drop-shadow(1px 1px 10px rgba(255,255,255,0.3))
                    drop-shadow(-1px -1px 10px rgba(255,255,255,0.3));
    
    filter:         drop-shadow(1px 1px 10px rgba(255,255,255,0.3)) 
                    drop-shadow(-1px -1px 10px rgba(255,255,255,0.3));
}
*/






.login-user-name {
    color:          #d6d6d6;
}


h1 {
    color: black;
}


body, html {
    overflow-x: hidden;
}

body {
    color: #575757;
}



h2 {
    font-size: 2.5em;
}

/*Force the div to have a width larger than its parent container element*/
.index-intro-row:after {
    background : url("/static/izdelki/resources/img/index/pozdravni_banner.jpg") no-repeat center;
    content : "";
    height: 407px;
    width: 100vw;
    background-size: cover;
    position: absolute;
    /*The same as the height of the header (180px), so that it comes right after it*/
    top: 120px;
    left: 0;
    z-index: -1;
    padding-left: 1em;
    padding-right: 1em;
}



/*Stetching the entire background looks bad on low height banners*/

.index-end-banner {
    position: relative;
    padding-left: 10em;
    padding-right: 10em;
    width: 100vw;
    left: calc(-50vw + 50%);
    background-size: cover;
}


.index-end-banner:after {
    content: "";
    background : url("/static/izdelki/resources/img/index/pozdravni_banner.jpg") no-repeat center;
    background-size: cover;
    height: 320px;
    position: absolute;
    padding-left:1em;
    padding-right:1em;
    width: 100vw;
    top:0;
    left: 0;
    z-index: -1;
}


.index-intro-row-end {
    margin-bottom: 111px;
    margin-top: 2em;
}


.index-intro-row {
    height: 386px;
}



#namen {
    height: 535px;
    padding-bottom: 1em;
}

#namen a.gray{
    text-decoration: none;
    color: #ababab;
}

#namen a.gray:hover {
    text-decoration: underline;
}

#namen .inner-container {
    padding-top: 3.8em;
}

/*
#namen:after{
    content : "";
    background : url("/static/izdelki/resources/img/index/namen.jpg") no-repeat center;
    height: 535px;
    width: 99vw;
    background-size: cover;
    position: absolute;
    left: 0;
    z-index: -1;
    padding-left: 1em;
    padding-right: 1em;
}
*/

#avtorji {
    margin-top: 3px;
    height:535px;
    min-height: 535px;
}

#avtorji .inner-container {
    padding-top: 4.7em;
}

#avtorji .about-banner:after{
    content:"";
    background : url("/static/izdelki/resources/img/index/avtorji.jpg") no-repeat center;
    background-size: cover;
    height: 535px;
    position: absolute;
    padding-left:1em;
    padding-right:1em;
    width: 100vw;
    top:0;
    left: 0;
    z-index: -1;
}

#namen .about-banner:after{
    content:"";
    background : url("/static/izdelki/resources/img/index/namen.jpg") no-repeat center;
    background-size: cover;
    height: 535px;
    position: absolute;
    padding-left:1em;
    padding-right:1em;
    width: 100vw;

    top:0;
    left: 0;
    z-index: -1;
}


.about-banner {
    position: relative;
    padding-left: 10em;
    padding-right: 10em;
    width: 100vw;
    left: calc(-50vw + 50%);
    background-size: cover;
}




.index-arrows{
    position: absolute;
    right: 0;
    left:-11em;

    margin: auto;
}

.index-arrows img{
    width: auto;
    height: 18em;
    padding-left:15em;
}


#login-button-signed-in,
#login-button {
    opacity: 1;
}


#login-user-name {
    opacity: 1;
}


#search-button {
    opacity: 1;
}

#add-img {
    opacity: 1;
}


/*Manually fix image sizes*/
#frontpage-table img#index-img-world {
    height: 53%;
    margin-right: -7px;
    margin-left: -4px;
}

#frontpage-table img#index-img-slo {
    height: 53%;
    margin-right: -8px;
}

#frontpage-table img#index-img-business {
    height: 45%;
}

#frontpage-table img#index-img-research {
    height: 52%;
    margin-right: -7px;
}

#frontpage-table img#index-img-buy {
    height: 46%;
    margin-right: 0px;
    margin-left: -1px;
}

#frontpage-table img#index-img-info {
    margin-top: 2px;
    margin-left: 9px;
    margin-right: 2px;
    height: 37px;
}

#img-oznacba {
    margin-left: 1em;
}


main {
    padding-bottom: 0px;
}


.dash-line.dash-line-bottom {
    display:none;
}



.feature-icon-dim {
    opacity: 0.5;
}

#img-author {
    display: block;
}

.about-banner{
    font-size: 1.1em;
}

.about-banner h2{
    margin-bottom: 1.5em;
}


#database{
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 5em;
}


.namen-logo-container {
    display: flex;
}

.namen-logo {
    color: #d6d6d6;
    margin-top: 100px;
}

.namen-logo:hover {
    text-decoration: underline;
    color:inherit;
}


.inner-container {
    font-size: 1.1em;
}

.inner-container h2 {
    margin-bottom: 1.5em;
}

.index-instructions {
    margin-top: 116px;
    color: #d6d6d6;
    font-weight: 300;
}

.index-instructions-end {
    padding: 0 18%;
    margin-top: 116px;
    color: #d6d6d6;
    font-weight: 300;
}


.flex-center img {
    margin-right: 11em;
    height: 6em;
    object-fit: scale-down;
}

/*Index tablet layout*/
@media (max-width: 992px){
    .index-instructions{
        padding: 0 3%;
    } 

    .index-intro-row-end {
        margin-bottom: 57px;
    }

    .title-large {
        font-size: 2em;
    }
}

/*Index mobile layout*/
@media (max-width: 768px) {
    .row.vertical-align {
        justify-content: center;
        flex-wrap: wrap;
    }

    #topMenuBar {
        height:220px;
    }

    .title-large {
        font-size: 1.8em;
    }

    /*Force the description into a new line by saying it should take up 100% of a line*/
    .index-icons-description {
        flex: 1 0 100%;
        margin-top: -2em;
    }

    .feature-icon-dim {
        margin-right: 0;
        margin-left: -2em;
    }
    
    #index-instructions {
    padding: 0 10%;
    margin-top: 3em;
    }

    .index-intro-row:after {
        height: 400px;
        /*The same as the height of the header (180px), so that it comes right ater it*/
        top: 220px;
    }

    #namen,
    #namen .about-banner:after
    {
        height: 630px;
    }

    #avtorji,
    #avtorji .about-banner:after
    {
        height: 650px;
    }
    
    #namen .row {
        flex-direction: column;
        margin-top: 3em;
    }

    /*Reorder the image div so that the image shows up first*/
    #namen .row div:last-child {
        order: -1;
        align-self: center;
    }

    #namen .inner-container,
    #avtorji .inner-container {
        padding-top: 3em;
    }

    .namen-title {
        position: absolute;
        top: -10em;
        /*Center absolute element:
            https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/
        */
        left: 47%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    #avtorji .row {
        flex-direction: column;
        justify-content: center;
        margin-top: 2em;
    }

    #img-author{
        padding: 0;
        align-self: center;
    }

    .avtorji-title {
        position: absolute;
        top: -11em;
        /*Center absolute element:
            https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/
        
        Due to different title lengths (namen, avtorji), centering both looks odd
        Instead, position them slightly diferently, so that they are aligned properly
        */
        left: 41%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    #avtorji .index-authors-text {
        margin-top: 2em;
    }

    .footer-container {
        flex-direction: column;
    }

    .index-instructions {
        margin-top: 2em;
        padding:0;
    }

     .index-instructions-end {
        margin-top: 1em;
        padding:0;
    }

    .index-instructions-end p {
        padding: 0px 20%;
    }   


    .dash-line.dash-line-bottom {
        display:inline;
    }

}




.index-start-button {
    padding: 6px 40px;

    -webkit-box-shadow: 0px 0px 10px  #ccc;  
    -moz-box-shadow:    0px 0px 10px  #ccc;  
    box-shadow:         0px 0px 10px  #ccc;  
}

/*Index small mobile layout*/
@media (max-width: 576px) {
    .index-instructions {
        margin-top: -0.1em;
        padding:0;
    }

    #index-namen-text,
    #index-authors-text {
        padding-top: 1em;
    }

    .index-instructions-end p {
        padding: 0px 9%;
    }
}