/* * Author by FreeHTML5.co * Twitter: https://twitter.com/fh5co * Facebook: https://fb.com/fh5co * URL: https://freehtml5.co */ /* Fonts */ @font-face { font-family: 'Calisto-MT'; src: url(../fonts/Calisto-MT.ttf); } @font-face { font-family: 'Calisto-MT-Italic'; src: url(../fonts/Calisto-MT-Italic.ttf); } @font-face { font-family: 'Calisto-MT-Bold'; src: url(../fonts/Calisto-MT-Bold.ttf); } /* Colors */ /* Universal style */ * { margin: 0; padding: 0; font-family: "Calisto-MT"; } .site-container { width: 1115px; margin: 0 auto; } @media (max-width: 1250px) { .site-container { width: 90%; } } .universal-h2 { font-size: 48px; text-align: center; color: #222; } @media (max-width: 1250px) { .universal-h2 { font-size: 38px; } } @media (max-width: 668px) { .universal-h2 { font-size: 30px; } } .universal-h2-bckg { background-image: url("../images/double-line.svg"); background-repeat: no-repeat; background-position: center bottom; } /* Universal style end */ /* Includes */ .site-navigation { position: absolute; top: 4.6%; width: 100%; z-index: 2; } .site-navigation-inner { display: flex; align-items: center; justify-content: space-between; } .main-navigation { color: #fff; display: none; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; background: #000; opacity: 0.9; } .main-navigation .main-navigation__ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3%; border: 2px solid #fff; border-radius: 7px; background-color: #c18f59; } .main-navigation .main-navigation__ul li { margin-bottom: 20px; list-style: none; } .main-navigation .main-navigation__ul a { color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; text-transform: uppercase; transition: 0.3s ease; } .main-navigation .main-navigation__ul a:hover { color: #777; } @media (max-width: 1150px) { .main-navigation { opacity: 0.94; } } /* Navigation burger */ .burger-container { cursor: pointer; z-index: 3; } .bar1, .bar2, .bar3 { width: 30px; height: 3px; background-color: #c18f59; margin: 6px 0; transition: 0.4s; } .change .bar1 { transform: rotate(-45deg) translate(-6px, 6px); background-color: #c18f59; } .change .bar2 { opacity: 0; background-color: #c18f59; } .change .bar3 { transform: rotate(45deg) translate(-6px, -7px); background-color: #c18f59; } .stop-scroll { overflow: hidden; } /* Navigation burger end */ .fh5co-top-banner { position: relative; display: flex; align-items: flex-end; background-image: url("../images/top-banner-bckg.jpg"); background-position: center; background-size: cover; } .fh5co-top-banner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.9; } .fh5co-top-banner .site-container { position: relative; z-index: 1; } @media (max-width: 1600px) { .fh5co-top-banner { padding-top: 180px; } } @media (max-width: 1250px) { .fh5co-top-banner { padding-top: 130px; } } @media (max-width: 520px) { .fh5co-top-banner { padding-top: 105px; } } @media (min-width: 1600px) { .fh5co-top-banner { min-height: 100vh; } } .top-banner__inner { display: flex; align-items: center; } .top-banner__inner .top-banner__text { margin-left: 54px; } @media (max-width: 1250px) { .top-banner__inner .top-banner__text { width: 35%; } } @media (max-width: 768px) { .top-banner__inner .top-banner__text { width: 50%; margin-left: 20px; } } @media (max-width: 520px) { .top-banner__inner .top-banner__text { width: 65%; margin-bottom: 20px; margin-left: 0; } } .top-banner__inner .top-banner__text p { margin-bottom: 42px; color: #777; } @media (max-width: 768px) { .top-banner__inner .top-banner__text p { margin-bottom: 25px; font-size: 14px; } } .top-banner__inner .top-banner__h2 { font-size: 74px; letter-spacing: 3px; color: #fff; font-family: "Calisto-MT-Bold"; } @media (max-width: 1250px) { .top-banner__inner .top-banner__h2 { font-size: 50px; } } @media (max-width: 768px) { .top-banner__inner .top-banner__h2 { font-size: 35px; } } .top-banner__inner .top-banner__text-up .top-banner__h2 { margin-top: 15px; } @media (max-width: 768px) { .top-banner__inner .top-banner__text-up .top-banner__h2 { margin-top: 0; } } .top-banner__inner .top-banner__text-down { margin-bottom: 20px; padding-left: 27%; } .top-banner__inner .top-banner__text-down .top-banner__h2 { margin-bottom: 10px; } @media (max-width: 768px) { .top-banner__inner .top-banner__text-down .top-banner__h2 { margin-bottom: 0; } } .top-banner__inner .top-banner__image { font-size: 0; } @media (max-width: 1250px) { .top-banner__inner .top-banner__image { width: 50%; } .top-banner__inner .top-banner__image img { width: 100%; } } @media (max-width: 520px) { .top-banner__inner .top-banner__image { width: 65%; margin-bottom: 20px; } } @media (max-width: 520px) { .top-banner__inner { flex-direction: column; } } .brand-span { font-size: 14px; color: #c18f59; } .brand-button { display: inline-block; padding: 10px 20px; font-size: 11px; text-transform: uppercase; text-decoration: none; color: #c18f59; border: 1px solid #fff; transition: 0.3s ease; } .brand-button:hover, .brand-button:focus { color: #777; } .fh5co-about-me { position: relative; margin: 193px 0 199px; } @media (max-width: 1250px) { .fh5co-about-me { margin: 150px 0; } } @media (max-width: 992px) { .fh5co-about-me { margin: 125px 0; } } .about-me-bckg { position: absolute; background-image: url("../images/about-me-bckg.jpg"); background-position: center; background-size: cover; height: 500px; top: -75px; right: 0; height: calc(100% + 150px); width: 70%; z-index: -1; } .about-me-bckg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.7; } @media (max-width: 992px) { .about-me-bckg { width: 100%; padding-bottom: 15px; } } .about-me-inner { display: flex; justify-content: space-between; } @media (max-width: 992px) { .about-me-inner { flex-direction: column; align-items: center; } } .about-me-slider { position: relative; } .about-me-slider .slick-arrow { position: absolute; bottom: -18%; } .about-me-slider .slick-prev { left: 40%; } @media (max-width: 520px) { .about-me-slider .slick-prev { left: 34%; } } .about-me-slider .slick-next { right: 40%; } @media (max-width: 520px) { .about-me-slider .slick-next { right: 34%; } } .span-arrow { padding: 10px 15px; cursor: pointer; color: #c18f59; border: 1px solid #c18f59; border-radius: 50%; transition: 0.3s ease; } .span-arrow:hover { color: #fff; border-color: #fff; } .portfolio-wrapper { width: 390px; padding: 8px; text-align: center; background-color: #fff; } .portfolio-wrapper .portfolio__img { font-size: 0; } .portfolio-wrapper .portfolio__img img { width: 100%; } .portfolio-wrapper .portfolio__bottom { padding: 35px 0 95px; background-color: #f5f5f5; } @media (max-width: 992px) { .portfolio-wrapper .portfolio__bottom { padding: 25px 0; } } .portfolio-wrapper .portfolio__name { display: flex; justify-content: center; align-items: flex-start; margin-bottom: 23px; } @media (max-width: 992px) { .portfolio-wrapper .portfolio__name { margin-bottom: 10px; } } .portfolio-wrapper .portfolio__name span { font-size: 90px; line-height: 75px; color: #c18f59; font-family: "Calisto-MT-Bold"; } @media (max-width: 992px) { .portfolio-wrapper .portfolio__name span { font-size: 65px; line-height: 62px; } } .portfolio-wrapper p { padding: 0 10%; line-height: 25px; font-style: italic; color: #777; } @media (max-width: 620px) { .portfolio-wrapper p { font-size: 15px; line-height: 20px; } } @media (max-width: 992px) { .portfolio-wrapper { margin-bottom: 20px; } } @media (max-width: 620px) { .portfolio-wrapper { width: 250px; } } .about-me__text { width: 44%; margin-right: 80px; text-align: center; } .about-me__text .universal-h2 { color: #fff; padding-bottom: 20px; margin-bottom: 25px; } .about-me__text p { margin-bottom: 35px; line-height: 24px; color: #c18f59; } .about-me__text p span { font-size: 48px; color: #fff; } @media (max-width: 620px) { .about-me__text p { margin-bottom: 20px; font-size: 14px; line-height: 19px; } } .about-me__text h4 { margin-bottom: 7px; font-size: 25px; color: #c18f59; } .about-me__text .p-white { margin-bottom: 0; color: #fff; } @media (max-width: 1250px) { .about-me__text { width: 48%; margin-right: 40px; } } @media (max-width: 992px) { .about-me__text { width: 100%; margin-right: 0; } } .slick-slide:focus { outline: none; } .fh5co-books { margin-bottom: 122px; } .fh5co-books .universal-h2 { margin-bottom: 50px; padding-bottom: 20px; } .fh5co-books .books-brand-button { text-align: center; } .fh5co-books .books-brand-button .brand-button { font-size: 16px; text-transform: none; border-color: #c18f59; } .fh5co-books .books-brand-button .brand-button:hover { border-color: #777; } @media (max-width: 1250px) { .fh5co-books { margin-bottom: 60px; } } .books { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 70px; } @media (max-width: 559px) { .books { justify-content: space-around; } } .single-book { margin-bottom: 20px; text-align: center; } .single-book .single-book__img { position: relative; display: block; font-size: 0; } .single-book .single-book__img .single-book_download { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; transition: 0.3s ease; } .single-book .single-book__img .single-book_download img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } .single-book .single-book__img:hover .single-book_download { visibility: visible; opacity: 0.7; } .single-book .single-book__title { margin: 19px 0 18px; font-size: 18px; } .single-book .single-book__price { font-size: 18px; font-weight: 600; font-style: italic; color: #c18f59; } @media (max-width: 1250px) { .single-book { margin-right: 10px; } .single-book:last-child { margin-right: 0; } } .rating { margin-top: 8px; unicode-bidi: bidi-override; direction: rtl; } .rating span { font-size: 23px; color: #ffd200; cursor: pointer; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: "\2605"; position: absolute; } .fh5co-counter { position: relative; margin-bottom: 122px; padding: 100px 0; background-image: url("../images/book-bckg.jpg"); background-size: cover; background-position: center; } .fh5co-counter::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #c18f59; opacity: 0.9; } .fh5co-counter .site-container { position: relative; z-index: 1; } @media (max-width: 850px) { .fh5co-counter { padding: 50px 0 20px; margin-bottom: 50px; } } .counter-inner { display: flex; justify-content: space-between; flex-wrap: wrap; } .single-count { width: 23%; text-align: center; color: #fff; } .single-count span { display: block; margin-bottom: 25px; font-size: 40px; font-weight: 900; } .single-count p { font-size: 20px; text-transform: uppercase; } @media (max-width: 850px) { .single-count { width: 48%; margin-bottom: 30px; } .single-count .count { font-size: 35px; margin-bottom: 15px; } } @media (max-width: 500px) { .single-count { width: 100%; padding-bottom: 10px; border-bottom: 1px solid #fff; } } .single-count__text { display: flex; justify-content: center; } .single-count__text img { margin-right: 20px; } .fh5co-blog { margin-bottom: 175px; } .fh5co-blog .universal-h2 { margin-bottom: 55px; padding-bottom: 20px; } @media (max-width: 620px) { .fh5co-blog { margin-bottom: 105px; } } .blog-inner { display: flex; justify-content: space-between; } .blog-slider .slick-slide { margin: 0 15px; } .blog-slider .slick-list { margin: 0 -15px; } .single-blog { display: flex !important; } .single-blog .single-blog__img { width: 50%; font-size: 0; } .single-blog .single-blog__text { width: 50%; padding: 7%; border: 3px solid #f5f5f5; border-left: 0; } .single-blog .single-blog__text h4 { margin-bottom: 5px; font-size: 24px; line-height: 33px; } .single-blog .single-blog__text span { display: block; margin-bottom: 15px; font-size: 14px; color: #c18f59; font-family: "Calisto-MT-Bold"; } .single-blog .single-blog__text p { color: #777; line-height: 21px; } @media (max-width: 992px) { .single-blog .single-blog__text { padding: 5%; } .single-blog .single-blog__text h4 { margin-bottom: 3px; font-size: 20px; line-height: 24px; } .single-blog .single-blog__text p { font-size: 14px; line-height: 19px; } } @media (max-width: 420px) { .single-blog .single-blog__text { padding: 3%; } .single-blog .single-blog__text h4 { font-size: 16px; } .single-blog .single-blog__text span { margin-bottom: 7px; font-size: 12px; } .single-blog .single-blog__text p { font-size: 13px; line-height: 16px; } } .single-blog:nth-child(even) h4 { color: #c18f59; } @media (max-width: 1250px) { .single-blog .single-blog__img img { width: 100%; height: 100%; } } .blog-slider { position: relative; } .blog-slider .slick-arrow { position: absolute; bottom: -22%; } .blog-slider .slick-prev { left: 45.5%; } @media (max-width: 1250px) { .blog-slider .slick-prev { left: 40%; } } @media (max-width: 520px) { .blog-slider .slick-prev { left: 35%; } } .blog-slider .slick-next { right: 45.5%; } @media (max-width: 1250px) { .blog-slider .slick-next { right: 40%; } } @media (max-width: 520px) { .blog-slider .slick-next { right: 35%; } } .blog-slider .span-arrow:hover { color: #777; border-color: #777; } .fh5co-quotes { position: relative; padding: 135px 0 172px; text-align: center; background-image: url("../images/quotes-bckg.jpg"); background-position: center; background-size: cover; } .fh5co-quotes::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.9; } .fh5co-quotes .site-container { position: relative; z-index: 1; } .fh5co-quotes .universal-h2 { padding-bottom: 20px; margin-bottom: 30px; color: #fff !important; } .fh5co-quotes p { width: 43%; margin: 0 auto 45px; color: #fff; line-height: 24px; } @media (max-width: 620px) { .fh5co-quotes p { font-size: 14px; line-height: 19px; } } .fh5co-quotes img { margin: 0 auto 5px; } .fh5co-quotes h4 { margin-bottom: 5px; font-size: 25px; color: #c18f59; } .fh5co-quotes .slick-arrow { bottom: -8%; } .fh5co-quotes .slick-prev { left: 45.5%; } @media (max-width: 1150px) { .fh5co-quotes .slick-prev { left: 34%; } } .fh5co-quotes .slick-next { right: 45.5%; } @media (max-width: 1150px) { .fh5co-quotes .slick-next { right: 34%; } } @media (max-width: 1150px) { .fh5co-quotes { padding: 75px 0 95px; } .fh5co-quotes p { width: 90%; } } .fh5co-social { position: relative; padding: 63px 0; background-image: url("../images/social-bckg.jpg"); background-size: cover; background-position: center; } .fh5co-social::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #c18f59; opacity: 0.9; } .fh5co-social .site-container { position: relative; z-index: 1; } @media (max-width: 620px) { .fh5co-social { padding: 40px 0; } } .social { display: flex; justify-content: space-between; align-items: center; } .social h5 { font-size: 24px; color: #fff; } @media (max-width: 620px) { .social { flex-direction: column; } } .social-icons a { position: relative; border: 1px solid white; border-radius: 50%; padding: 13px 23px; margin-right: 10px; transition: 0.3s ease; } .social-icons a:hover { background-color: #777; border-color: transparent; } .social-icons img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @media (max-width: 620px) { .social-icons { margin: 35px 0; } } .site-footer { padding-top: 120px; background-color: #343434; } @media (max-width: 1250px) { .site-footer { padding-top: 60px; } } .footer-inner { display: flex; justify-content: space-between; padding-bottom: 95px; } .footer-inner h5 { margin-bottom: 30px; font-size: 20px; letter-spacing: 2px; color: #fff; } @media (max-width: 1250px) { .footer-inner { padding-bottom: 50px; flex-direction: column; align-items: center; } } .footer-info { width: 50%; display: flex; } .footer-info .footer-info__left { margin-right: 45px; } .footer-info .footer-info__left img { margin-bottom: 10px; } .footer-info .footer-info__left p { color: #c18f59; } @media (max-width: 620px) { .footer-info .footer-info__left { margin-right: 0; margin-bottom: 20px; } } .footer-info .footer-info__right p { margin-bottom: 15px; color: #aaa; } .footer-info .footer-info__right .footer-phone { font-size: 14px; } .footer-info .footer-info__right .social-icons { margin-top: 27px; } .footer-info .footer-info__right .social-icons a { padding: 9px 19px; } @media (max-width: 1250px) { .footer-info { width: 100%; margin-bottom: 20px; } } @media (max-width: 620px) { .footer-info { flex-direction: column; align-items: center; } } .footer-contact-form { width: 50%; } .footer-contact-form .contact-form__input { display: flex; justify-content: space-between; margin-bottom: 20px; } .footer-contact-form .contact-form__input input { width: 40%; padding: 20px; border: 1px solid #404040; background-color: #282828; color: #c18f59; } .footer-contact-form .contact-form__input input::placeholder { color: #aaa; } @media (max-width: 1250px) { .footer-contact-form .contact-form__input input { width: 45%; } } @media (max-width: 520px) { .footer-contact-form .contact-form__input input { width: 100%; } } .footer-contact-form textarea { box-sizing: border-box; height: 90px; width: 100%; margin-bottom: 20px; padding: 20px; border: 1px solid #404040; background-color: #282828; resize: none; color: #c18f59; } .footer-contact-form .submit-button { padding: 19px 50px; text-transform: uppercase; font-size: 12px; color: #fff; background-color: #c18f59; border: none; border-radius: 3px; cursor: pointer; transition: 0.3s ease; } .footer-contact-form .submit-button:hover { background-color: #777; } @media (max-width: 1250px) { .footer-contact-form { width: 100%; } } .footer-bottom { padding: 25px 0; background-color: #2d2d2d; } .footer-bottom-inner { display: flex; justify-content: space-between; } .footer-bottom-inner p { color: #777; } .footer-bottom-inner a { color: #c18f59; text-decoration: none; transition: 0.3s ease; } .footer-bottom-inner a:hover { color: #777; } .footer-bottom-inner .footer-bottom__img img { margin-right: 25px; } .footer-bottom-inner .footer-bottom__img img:last-child { margin-right: 0; } @media (max-width: 992px) { .footer-bottom-inner { flex-direction: column; align-items: center; } .footer-bottom-inner p { font-size: 14px; margin-bottom: 20px; } }