@font-face {
    font-family: 'Klavika';
    src: url('../fonts/Klavika Light.otf'); /* IE9 Compat Modes */
}

#grid{
    -webkit-perspective: 2000px;
    perspective: 2000px !important;
}

.grid .col-md-6, .grid .col-lg-4{
    padding-left: 10px;  
    padding-right: 10px;  
}

.grid-item { 
    margin-bottom: 15px;
}

.grid-item img{
    max-width: 100%;
    height: auto;
}

body{
    font-family: "Klavika";
}

.content{
    padding-left: 13% !important;
    padding-right: 13% !important;
}

.footer-content{
    font-size: .6rem;    
}

.footer-content p{
    margin-bottom: 3px !important;
}

#toTop {
    z-index: 10;
    display: none;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    border: none;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    position: fixed;
    bottom: 70px;
    right: 30px;
    text-decoration: none;
    color: #4f4f4f;
    outline-style: none;
    font-weight: bolder;
    font-size: 1.5rem;
}

#toTop:hover{
    cursor:pointer;
}

.bg-light {
    background-color: #fff!important;
}

.img-nav{
    height: 60px;
    width: auto;
}

.navbar{
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 13%;
    padding-right: 13%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.11), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.navbar li{
    letter-spacing: 2px;
}

.navbar a{
    color: #777 !important;
}

.navbar a:hover{
    color: black !important;
}

.clickedTag{
    background: white !important;
    color: #4f4f4f !important;
}

#tags .col-md-12{
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 20px;    
}

#tags input{
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

#tags ul, .tags ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

#tags ul{
    align-items: center;
    justify-content: center;
}


.tags ul{
    align-items: flex-start;
    justify-content: flex-start;
}

#tags ul li, .tags ul li{
    border: 1px solid #4f4f4f;
    border-radius: 3px;
    float: left;
    background: #4f4f4f;
    color: white;
    font-size: .85rem;
}

#tags ul li{
    padding: .1rem .5rem .1rem .5rem;
    margin: .2rem .3rem .2rem .3rem;
}

.tags ul li{
    padding: .1rem .5rem .1rem .5rem;
    margin: 0 .1rem 0 .1rem;
}

#tags ul li:hover{
    cursor: pointer;
    background: #fff;
    color: #4f4f4f;
}

#mural, #grid{
    text-align: center;
}

#mural hr, #grid hr{
    width: 73%;
    color: white;
    background: white;

}

.img-mural{
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    background-position: center !important;
    background-size: cover !important;
}

.itemMural{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.11), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    margin-top: 15%;
    margin-bottom: 15%;
}
.itemMuralHide{
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: .5s ease;
    color: white;   
    width:100%;
    height:100%;
    padding: 20% 10% 60% 10%;
}

#grid a{
    height:100%;
    width:100%;
}

.itemMuralHide:hover{
    cursor: pointer;
    opacity: 100;
}

#modal-body-itens h5{
    margin-bottom: 10px;
}

#modal-body-itens p{
    margin-bottom: 5px;
}

#modal-body-itens img, #modal-body-itens iframe{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.modal-footer{
    padding:16px;
}

.contato ul li, footer ul li{
    display: inline-block !important;
    float: left;
}

#modal-1 i{
    font-size: 1rem !important;
}

#modal-1 a{
    color: #4f4f4f;
    transition: .5s ease;
}

#modal-1 a:hover{
    opacity: .7 !important;
}

footer{
    margin-top: 10% !important;
    background: #262727;
    color: white;
    font-size: .8em;
    letter-spacing: 2px;
    padding: 20px 2% !important;
}

footer i{
    font-size: 1.2rem !important;
    margin-left: 5px;
    margin-right: 5px;
}

footer a{
    transition: .5s ease;
    color: white !important;
    text-decoration: none !important;
}

footer a:hover{
    opacity: .7 !important;
}

@media (min-width: 992px){
    .nav-item a{
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
    }

    #tags .col-md-12{
        padding-left: 25%;
        padding-right: 25%; 
    }
}

@media (max-width: 425px){
    .content, .navbar{
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .col-mural{
        margin-top: 5%;
    }

    .col-mural:last-child{
        margin-bottom: 5%;
    }

    .itemMural{
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .itemMural:last-child{
        margin-bottom: 0%;
    }

    .itemMural:first-child{
        margin-top: 0%;
    }
}

.grid-item a {
    text-decoration: none;
}

#container-content {
    margin-top: 130px;
}

.full-width {
    width: 100%;
}

#modal-content {
    border: none;
}

#modal-body {
    padding: 0px;
}