/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 3, 2019, 12:19:01 PM
    Author     : frontend
*/


@import url('https://fonts.googleapis.com/css?family=Playfair+Display:300,400,700,900|Roboto:400,700&display=swap&subset=latin-ext');

/*


    font-family: 'Roboto', sans-serif;

    font-family: 'Playfair Display', serif;


*/

body{
    color:#262626;
    font-family: 'Playfair Display', serif;
    font-weight: 300;


}

p{
    line-height: 1.5rem;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
    font-weight: 400;





}

h2 {
    color:#262626 !important;
    text-transform: uppercase; 
    font-size: 30px;
    line-height: 45px;
    letter-spacing: 5px;
    border-bottom: 1px solid #262626;


}


img{
    max-width: 100%;
}




/*header style*/

header {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 100;  
}

header button:focus {
    outline: 1px dotted;
    outline: transparent;
}

.navbar-brand {
    max-width: 25%;
}

.navbar-toggler span {
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    display: block;
    background-color: #262626;
}

.navbar-toggler span:last-of-type{
    margin-bottom: 0;
}


.navbar-light .navbar-nav .nav-link {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.53px;
    color: rgba(77, 77, 77,0.7);
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid transparent;

}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
    border-top: 1px solid #262626;
    color: #262626;

}

/* about*/

.home-section .overflow-hidden{
    margin-top: 120px;
}

.about-section h2{
    color: rgba(77, 77, 77,0.8);  
    display: inline-block;

}
.about-section .about-item-title{
    font-size: 2rem;
    border-radius: 50px;

}

.about-section .about-item {
    background-color: rgba(77, 77, 77, 0.7);
    color:white;
    box-shadow: 0 0 1px #847055;
    border-radius: 0 20% 0 30%;
}

/*testimonial*/

.testimonial-slider {
    padding: 50px 20px;
    border: 1px solid #000;

}




.testimonial-section img {
    display: block;
}

.testimonial-section h2 {
    display: inline-block;
    background-position: center;
    background-size: cover;
    display: inline-block;
    margin-bottom: 50px;


}

.testimonial-section a {
    color: #262626;
}

.owl-theme .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
    margin: 5px 7px;

}



/*blog*/

.blog {
    margin-bottom: 100px;
}

.blog h2 {
    display: inline-block;
}

.blog h3{
    font-size: 30px;
    line-height: 45px;
    letter-spacing: 5px;
}





.blog .row div:nth-of-type(2) .blog-item,
.blog .row div:nth-of-type(4) .blog-item,
.blog .row div:nth-of-type(6) .blog-item{
    background-color: rgba(77, 77, 77,0.8) !important;
    color: #fff;


}



/*contact*/

.contact-section h2 {
    display: inline-block;
}

.contact-section h2,
.contact-section h5,
.contact-section p {
    color: #262626;
}
.contact-section .adress-info p{
    display: inline-block;

}

.contact-section .adress-info a:hover {
    color: rgba(77, 77, 77,0.5)  !important;
}

.contact-section .contact-info {
    font-style: italic;
}

.contact-section iframe{
    width: 100%;
    height: 314px;
}


/*footer*/

footer .footer-logo img {
    max-width: 25%;
}

/*social*/


.social a{

    color: #262626;
    font-size: 2rem;
    padding: 0 10px;
    text-decoration: none !important;
    transition: all 0.5s linear;

}


.social a:hover{

    transform: scale(1.3) rotate(360deg);
}



/*gallery*/

.gallery-section {

    margin-top: 80px;
    margin-bottom: 100px;
    padding: 50px 10px;
}

.gallery-section .background{
    background-color: #262626; 
    
}

.gallery-section .row div img:hover{
    opacity: 0.5;
}

.gallery-section h2 {
    color: #262626;
    border-bottom: 1px solid #262626 !important;
    display: inline-block;
}

.gallery-section p {
    letter-spacing: 5px;
    font-size: 20px;
}

.gallery-section h2 {
    border-bottom: 1px solid #fff;
    display: inline-block;
}
.gallery img {
    max-width: 100%;
    display: block;

}






.home-section .home-caption{
    left: 0;
    right: 0;
    top: 0;
    display: block;
    background:rgba(255,255,255,0.6);
    height: 100%;



}

.home-section .home-caption h2{

    text-transform: uppercase;
    color: #fff !important;
    text-align: center;
    font-size: 17px;
    padding: 10px;
    background: rgba(77, 77, 77,0.6);
    border-bottom: none;

}

.home-section .info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 20px;
    text-transform: uppercase;
    background-color: transparent;
    text-align: center;
    color: #262626;
    border: 1px solid #4d4d4d;
    box-shadow: 0 0 5px #4d4d4d;
    transition: all ease-in-out 0.3s;
    margin-top: 30px;
    font-size: 20px;
    line-height: 45px;
    letter-spacing: 5px;


}

.home-section a:hover{

    background-color: rgba(255,255,255,0.6);



}




.home-section img{
    width: 100%;
    display: block;



}






@keyframes slideLeft{
    0%{
        opacity:0;
        transform:translateX(50px);
    }
    100%{
        opacity:1;
        transform:translateX(0px);
    }
}

.slide-left{
    animation: slideLeft 1s linear;
    animation-fill-mode: forwards;
}


@keyframes slideRight{
    0%{
        opacity:0;
        transform:translateX(-50px);
    }
    100%{
        opacity:1;
        transform:translateX(0px);
    }
}

.slide-right{
    animation: slideRight 1s linear;
    animation-fill-mode: forwards;
}

@keyframes slideTop{
    0%{
        opacity:0;
        transform:translateY(50px);
    }
    100%{
        opacity:1;
        transform:translateY(0px);
    }
}

.slide-top{
    animation: slideTop 1s linear;
    animation-fill-mode: forwards;
}

@keyframes slideBottom{
    0%{
        opacity:0;
        transform:translateY(-50px);
    }
    100%{
        opacity:1;
        transform:translateY(0px);
    }
}

.slide-bottom{
    animation: slideBottom 1s linear;
    animation-fill-mode: forwards;
}


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

.zoom{
    animation: zoom 2s linear;
    animation-fill-mode: forwards;
}

.animation{
    position: relative;
    opacity: 0;
}