/* Theme Name: Folio Theme URL: https://bootstrapmade.com/folio-bootstrap-portfolio-template/ Author: BootstrapMade.com Author URL: https://bootstrapmade.com */ /* General Styling /*-----------------------------------------------------------------------------------*/ body { background: #ffffff; color: #898989; font-family: 'Poppins', helvetica; font-size: 15px; font-weight: 300; line-height: 20px; letter-spacing: 0.02em; overflow-x: hidden; margin: 0 auto; padding: 0; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { margin: 0; } h2 { color: #292929; font-weight: 600; } h4 { color: #292929; font-size: 14px; font-weight: 600; } a { color: #292929; text-decoration: none !important; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } a:hover { -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } a:hover, a:focus { color: #b8a07e; text-decoration: underline; } nav ul li a { padding: 2px 0 0 0; position: relative; display: block; font-size: 12px; color: #999999; letter-spacing: 0.1em; font-weight: 500; line-height: 14px; text-transform: uppercase; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } p { margin: 25px 0; padding: 0; font-size: 15px; color: #999999; line-height: 28px; } ::-moz-selection { background: #b8a07e; color: #fff; } ::selection { background: #b8a07e; color: #fff; } .btn { background: #333; border: medium none; border-radius: 0; color: #fff; font-size: 12px; height: 50px; line-height: 50px; padding: 0 30px; text-transform: uppercase; } .btn:hover, .btn:focus { color: #fff; } .padDiv { padding: 30px 20px; } .section-title { margin-bottom: 70px; } .section-title h2 { font-size: 25px; letter-spacing: 2px; text-transform: uppercase; } .form-control { background-color: transparent; border: 1px solid #999; border-radius: 0; color: #999999; font-size: 12px; font-weight: 500; height: 50px; letter-spacing: 0.1em; padding-left: 10px; margin: 0 0 25px 0; line-height: 14px; text-transform: uppercase; } .form-control:focus { box-shadow: none; outline: 0 none; } .paddsection { padding-top: 90px; padding-bottom: 90px; } .paddsections { padding-top: 90px; padding-bottom: 90px !important; } .hvr-shutter-in-horizontal::before { background: #333; } .hvr-shutter-in-horizontal:hover { background: #b8a07e; } .mb-30 { margin-bottom: 30px; } /*-----------------------------------------------------------------------------------*/ /* Navbar Top /*-----------------------------------------------------------------------------------*/ nav { position: fixed; background: #fff; z-index: 1000; width: 100%; padding: 20px; display: none; -webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18); } .nav-menu { float: right; line-height: 32px; margin-bottom: 0; padding-top: 16px; } nav ul li { float: left; margin-right: 15px; font-family: 'Poppins', sans-serif; font-size: 14px; margin-left: 40px; } nav ul li a { padding: 2px 0 0 0; position: relative; display: block; font-size: 14px; color: #999999; font-family: 'Poppins', helvetica; font-weight: 500; line-height: 16px; text-transform: uppercase; letter-spacing: 0.02em; text-transform: capitalize; } .logo { float: left; } .logo img { width: 100px; height: 50px; } .responsive { display: none; font-size: 23px; } .active { color: #afafaf; } /*----------------------------------------------------------------------------------*/ /* Header /*-----------------------------------------------------------------------------------*/ #header { background: url("../images/home-bg.jpg") repeat scroll center center / cover; height: 100vh; width: 100%; } #header .header-content { height: 100vh; text-align: left; width: 100%; display: flex; justify-content: center; flex-direction: column; } .header-content h1 { font-size: 40px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; color: #fff; } .header-content p { font-size: 13px; letter-spacing: 5px; margin-top: 0; margin-bottom: 30px; text-transform: capitalize; color: #fff; font-weight: 500; } .header-content .list-social li { float: left; margin-right: 20px; } .header-content .list-social li i { color: #fff; font-size: 15px; } /*-----------------------------------------------------------------------------------*/ /* Aout-us /*-----------------------------------------------------------------------------------*/ #about { width: 100%; height: auto; background: #f7f7f7; padding-top: 190px; } #about .div-img-bg { padding-bottom: 30px; border: 20px solid #b8a07e; } #about .div-img-bg .about-img img { width: 100%; box-shadow: 0px 0px 85px 0px rgba(0, 0, 0, 0.14); margin-top: -60px; margin-left: 40px; height: 400px; object-fit: cover; } #about .about-descr .p-heading { font-family: 'Playfair Display', serif; font-size: 28px; text-align: left; } #about .about-descr .separator { max-width: 80%; margin-bottom: 0; text-align: left; } /*-----------------------------------------------------------------------------------*/ /* Services /*-----------------------------------------------------------------------------------*/ #services { background: #f7f7f7; position: relative; padding-bottom: 80px; } .owl-item { float: left; } .services-block span { margin: 10px 0; position: relative; font-size: 13px; color: #292929; letter-spacing: 0.1em; font-weight: 500; text-transform: uppercase; display: block; } .services-block .separator { margin: 0; font-size: 13px; line-height: 22px; } .services-block i { font-size: 44px; color: #b8a07e; line-height: 44px; } .services-carousel .owl-stage-outer { overflow: hidden; } .services-carousel .owl-dots { margin-top: 5px; text-align: center; } .services-carousel .owl-dot { display: inline-block; margin: 0 5px; width: 12px !important; height: 12px !important; border-radius: 50%; border: 0; padding: 0 !important; background-color: #ddd; cursor: pointer; } .services-carousel .owl-dot.active { background-color: #b8a07e; } .owl-nav { display: none; } /*-----------------------------------------------------------------------------------*/ /* Portfolio /*-----------------------------------------------------------------------------------*/ #portfolio { position: relative; padding-bottom: 50px; } #portfolio .portfolio-list { margin-bottom: 50px; } #portfolio .portfolio-list .nav { display: inline-block; margin: 0; } #portfolio .portfolio-list .nav li { margin: 0 40px 0 0; float: left; font-size: 14px; color: #999999; line-height: 16px; cursor: pointer; font-family: 'Poppins', helvetica; font-weight: 500; letter-spacing: 0.02em; text-transform: capitalize; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } #portfolio .portfolio-list .nav li:hover, #portfolio .portfolio-list .nav li.filter-active { color: #b8a07e; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } #portfolio .portfolio-container { display: inline-block; margin-bottom: 50px; width: 100%; } .portfolio-thumbnail { margin-bottom: 30px; overflow: hidden; min-height: 260px; } .portfolio-thumbnail img { max-width: 100%; } /*-----------------------------------------------------------------------------------*/ /* Journal /*-----------------------------------------------------------------------------------*/ #journal, #journal-blog { height: auto; width: 100%; background: #f7f7f7; padding-bottom: 60px; position: relative; } #journal-blog { background: #fff; padding-bottom: 30px; } #journal .journal-block { display: inline-block; height: auto; width: 100%; } #journal .journal-block .journal-info { position: relative; } .journal-block .journal-info img { max-width: 100%; } .journal-block .journal-info .journal-txt { padding: 25px 0px; position: relative; } .journal-block .journal-info .journal-txt h4 a { display: block; font-size: 19px; line-height: 24px; margin: 0 0 13px 0; font-weight: 500; color: #292929; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .journal-block .journal-info .journal-txt h4 a:hover { color: #b8a07e; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .journal-block .journal-info .journal-txt p { margin: 0; font-size: 14px; line-height: 24px; } /*-----------------------------------------------------------------------------------*/ /* Contact /*-----------------------------------------------------------------------------------*/ #contact { height: auto; width: 100%; } .contact-details { list-style: none; margin: 0; padding: 0; } .contact-details li { padding-bottom: 10px; } #contact input, #contact textarea { width: 100%; } #contact #sendmessage { color: #18d26e; border: 1px solid #18d26e; display: none; text-align: center; padding: 15px; font-weight: 600; margin: 15px; } #contact #errormessage { color: red; display: none; border: 1px solid red; text-align: center; padding: 15px; font-weight: 600; margin: 15px; } #contact #sendmessage.show, #contact #errormessage.show, #contact .show { display: block; } #contact .validation { color: red; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } /*-----------------------------------------------------------------------------------*/ /* Footer /*-----------------------------------------------------------------------------------*/ #footer { background: #f7f7f7; padding-top: 50px; padding-bottom: 50px; } #footer .socials-media { width: 100%; } #footer .socials-media ul { display: inline-block; float: none; margin: 0 0 20px 0; } #footer .socials-media ul li { float: left; margin-left: 10px; margin-right: 10px; } #footer .socials-media ul li a { font-size: 24px; color: #999; letter-spacing: 0.1em; font-weight: 500; background: transparent; text-transform: uppercase; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } #footer .socials-media ul li a:hover { color: #b8a07e; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } #footer p { font-size: 12px; letter-spacing: 0.1em; font-weight: 500; margin-top: 0; text-transform: uppercase; } .credits { font-size: 13px; }