/*====================================== //--//--> STYLES GENERALES ======================================*/ body { background-color: #7294A0; color: #4e4e4e; } h1, h2, h3, h4, h5 {color: #B1A374 } h6 { color: #1e1e1e; } a { color: #1e1e1e; transition: all 0.5s ease-in-out; } a:hover { color: #0078ff; text-decoration: none; transition: all 0.5s ease-in-out; } .p-r { position: relative; } .color-a { color: #0078ff; } .color-d { color: #f5f5f5; } .color-text-a { color: #4e4e4e; } img { max-width: 100%; height: auto; } .box-shadow, .paralax-mf, .service-box, .card-blog { box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1); } .box-shadow-a, .button:hover { box-shadow: 0 0 0 4px #cde1f8; } .display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; } .display-6 { font-size: 2rem; font-weight: 300; line-height: 1.1; } .avatar { width: 32px; height: 32px; margin-right: 4px; overflow: hidden; } .bg-image { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center center; } .overlay-mf { background-color: #1A242D; } .overlay-mf { position: absolute; top: 0; left: 0px; padding: 0; height: 100%; width: 100%; opacity: .10; } .paralax-mf { position: relative; padding: 8rem 0; } .display-table { width: 100%; height: 100%; display: table; } .table-cell { display: table-cell; vertical-align: middle; } /*--/ Sections /--*/ .sect-4 { padding: 4rem 0; } .sect-pt4 { padding-top: 4rem; } .sect-mt4 { margin-top: 4rem; } /*--/ Title s /--*/ .title-s { font-weight: 600; color: #1e1e1e; font-size: 1.1rem; } /*--/ Title A /--*/ .title-box { margin-bottom: 4rem; } .title-a { font-size: 3rem; font-weight: bold; text-transform: uppercase; } .subtitle-a { color: #4e4e4e; } .line-mf { width: 40px; height: 5px; background-color: #0078ff; margin: 0 auto; } /*--/ Title Left /--*/ .title-box-2 { margin-bottom: 1rem; } .title-left { font-size: 2rem; position: relative; } .title-left:before { content: ''; position: absolute; height: 3px; width: 100px; bottom: -12px; } /*------/ Box /------*/ .box-pl2 { padding-left: 2rem; } .box-shadow-full { padding: 3rem 1.25rem; position: relative; background-color: #fff; margin-bottom: 3rem; z-index: 2; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2); } /*------/ Socials /------*/ .socials { padding: 1.5rem 0; } .socials ul li { display: inline-block; } .socials .ico-circle { height: 40px; width: 40px; font-size: 1.7rem; border-radius: 50%; line-height: 1.4; margin: 0 15px 0 0; box-shadow: 0 0 0 3px #0078ff; transition: all 500ms ease; } .socials .ico-circle:hover { background-color: #0078ff; color: #fff; box-shadow: 0 0 0 3px #cde1f8; transition: all 500ms ease; } /*------/ Ul resect /------*/ .ul-resect, .socials ul, .list-ico, .blog-wrapper .post-meta ul, .box-comments .list-comments, .widget-sidebar .list-sidebar, .widget-tags ul { list-style: none; padding-left: 0; margin-bottom: 0; } .list-ico { line-height: 2; } .list-ico span { color: #0078ff; margin-right: 10px; } /*------/ Ico Circle /------*/ .ico-circle { height: 100px; width: 100px; font-size: 2rem; border-radius: 50%; line-height: 1.55; margin: 0 auto; text-align: center; box-shadow: 0 0 0 10px #0078ff; display: block; } /*------/ Owl Carousel /------*/ .owl-theme .owl-dots { text-align: center; margin-top: 18px; } .owl-theme .owl-dots .owl-dot { display: inline-block; } .owl-theme .owl-dots .owl-dot span { width: 18px; height: 7px; margin: 5px 5px; background: #cde1f8; border: 0px solid #cde1f8; display: block; transition: all 0.6s ease-in-out; cursor: pointer; } .owl-theme .owl-dots .owl-dot:hover span { background-color: #cde1f8; } .owl-theme .owl-dots .owl-dot.active span { background-color: #1B1B1B; width: 25px; } /*--/ Scrolltop s /--*/ .scrolltop-mf { position: relative; display: none; } .scrolltop-mf span { z-index: 999; position: fixed; width: 42px; height: 42px; background-color: #0078ff; opacity: .7; font-size: 1.6rem; line-height: 1.5; text-align: center; color: #fff; top: auto; left: auto; right: 30px; bottom: 50px; cursor: pointer; border-radius: 50%; } /* Back to top button */ .back-to-top { position: fixed; display: none; background: #000; color: #fff; width: 44px; height: 44px; text-align: center; line-height: 1; font-size: 16px; border-radius: 50%; right: 15px; bottom: 15px; transition: background 0.5s; z-index: 11; } .back-to-top i { padding-top: 12px; color: #fff; } /* Prelaoder */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #fff; } #preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #f2f2f2; border-top: 6px solid #0078ff; border-radius: 50%; width: 60px; height: 60px; -webkit-animation: animate-preloader 1s linear infinite; animation: animate-preloader 1s linear infinite; } @-webkit-keyframes animate-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animate-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*====================================== //--//--> NAVBAR ======================================*/ .navbar-b { transition: all .5s ease-in-out; background-color: transparent; padding-top: 1.563rem; padding-bottom: 1.563rem; } .navbar-b.navbar-reduce { box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06); } .navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item { position: relative; padding-right: 10px; padding-left: 0; } .navbar-b.navbar-trans .nav-link, .navbar-b.navbar-reduce .nav-link { color: #fff; text-transform: uppercase; font-weight: 600; } .navbar-b.navbar-trans .nav-link:before, .navbar-b.navbar-reduce .nav-link:before { content: ''; position: absolute; margin-left: 0px; width: 0%; bottom: 0; left: 0; height: 2px; transition: all 500ms ease; } .navbar-b.navbar-trans .nav-link:hover, .navbar-b.navbar-reduce .nav-link:hover { color: #1B1B1B; } .navbar-b.navbar-trans .nav-link:hover:before, .navbar-b.navbar-reduce .nav-link:hover:before { width: 35px; } .navbar-b.navbar-trans .show > .nav-link:before, .navbar-b.navbar-trans .active > .nav-link:before, .navbar-b.navbar-trans .nav-link.show:before, .navbar-b.navbar-trans .nav-link.active:before, .navbar-b.navbar-reduce .show > .nav-link:before, .navbar-b.navbar-reduce .active > .nav-link:before, .navbar-b.navbar-reduce .nav-link.show:before, .navbar-b.navbar-reduce .nav-link.active:before { width: 35px; } .navbar-b.navbar-trans .nav-link:before { background-color: #fff; } .navbar-b.navbar-trans .nav-link:hover { color: #fff; } .navbar-b.navbar-trans .show > .nav-link, .navbar-b.navbar-trans .active > .nav-link, .navbar-b.navbar-trans .nav-link.show, .navbar-b.navbar-trans .nav-link.active { color: #fff; } .navbar-b.navbar-reduce { transition: all .5s ease-in-out; background-color: #000; padding-top: 15px; padding-bottom: 15px; } .navbar-b.navbar-reduce .nav-link { color: #E89C0B; } .navbar-b.navbar-reduce .nav-link:before { background-color: #E89C0B; } .navbar-b.navbar-reduce .nav-link:hover { color: #9B6F1A; } .navbar-b.navbar-reduce .show > .nav-link, .navbar-b.navbar-reduce .active > .nav-link, .navbar-b.navbar-reduce .nav-link.show, .navbar-b.navbar-reduce .nav-link.active { color: #fff; } .navbar-b.navbar-reduce .navbar-brand { color: #0078ff; } .navbar-b.navbar-reduce .navbar-toggler span { background-color: #fff; } .navbar-b .navbar-brand { color: #fff; font-size: 1.6rem; font-weight: 600; } .navbar-b .navbar-nav .dropdown-item.show .dropdown-menu, .navbar-b .dropdown.show .dropdown-menu, .navbar-b .dropdown-btn.show .dropdown-menu { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); visibility: visible !important; } .navbar-b .dropdown-menu { margin: 1.12rem 0 0; border-radius: 0; } .navbar-b .dropdown-menu .dropdown-item { padding: .7rem 1.7rem; transition: all 500ms ease; } .navbar-b .dropdown-menu .dropdown-item:hover { background-color: #0078ff; color: #fff; transition: all 500ms ease; } .navbar-b .dropdown-menu .dropdown-item.active { background-color: #0078ff; } /*--/ Hamburger Navbar /--*/ .navbar-toggler { position: relative; } .navbar-toggler:focus, .navbar-toggler:active { outline: 0; } .navbar-toggler span { display: block; background-color: #fff; height: 3px; width: 25px; margin-top: 4px; margin-bottom: 4px; -webkit-transform: rotate(0deg); transform: rotate(0deg); left: 0; opacity: 1; } .navbar-toggler span:nth-child(1), .navbar-toggler span:nth-child(3) { transition: -webkit-transform .35s ease-in-out; transition: transform .35s ease-in-out; transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out; } .navbar-toggler:not(.collapsed) span:nth-child(1) { position: absolute; left: 12px; top: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); opacity: 0.9; } .navbar-toggler:not(.collapsed) span:nth-child(2) { height: 12px; visibility: hidden; background-color: transparent; } .navbar-toggler:not(.collapsed) span:nth-child(3) { position: absolute; left: 12px; top: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); opacity: 0.9; } /*====================================== //--//--> INTRO ======================================*/ .intro { height: 100vh; position: relative; color: #fff; } .intro .intro-content { text-align: center; position: absolute; } .intro .overlay-itro { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0px; padding: 0; height: 100%; width: 100%; opacity: .9; } .intro .intro-title { color: #fff; font-weight: 600; font-size: 3rem; } .intro .intro-subtitle { color: #E89C0B; font-size: 1.5rem; font-weight: 300; } .intro .text-slider-items { display: none; } .intro-single { height: 350px; } .intro-single .intro-content { margin-top: 30px; } .intro-single .intro-title { text-transform: uppercase; font-size: 3rem; } .intro-single .breadcrumb { background-color: transparent; color: #0078ff; } .intro-single .breadcrumb .breadcrumb-item:before { color: #cde1f8; } .intro-single .breadcrumb .breadcrumb-item.active { color: #cde1f8; } .intro-single .breadcrumb a { color: #fff; } /*====================================== //--//--> Scroll Down Arrow ======================================*/ #thanks { background-color: #fff; } #thanks::after { content: none; } #thanks div { position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } #thanks h2 { margin-bottom: 60px; color: #333; font : normal 300 64px/1 'Josefin Sans', sans-serif; text-align: center; white-space: nowrap; } #thanks p { color: #333; font : normal 400 20px/1 'Josefin Sans', sans-serif; } #thanks p a { color: #333; text-decoration: none; transition: color .3s; } #thanks p a:hover { color: #888; } .demo a { position: absolute; bottom: 20px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } .demo a:hover { opacity: .5; } #section03 a { padding-top: 60px; } #section03 a span { position: absolute; top: 0; left: 50%; width: 46px; height: 46px; margin-left: -23px; border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; } #section03 a span::after { position: absolute; top: 50%; left: 50%; content: ''; width: 16px; height: 16px; margin: -12px 0 0 -8px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } #section03 a span::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 44px; height: 44px; box-shadow: 0 0 0 0 rgba(255,255,255,.1); border-radius: 100%; opacity: 0; -webkit-animation: sdb03 3s infinite; animation: sdb03 3s infinite; box-sizing: border-box; } @-webkit-keyframes sdb03 { 0% { opacity: 0; } 30% { opacity: 1; } 60% { box-shadow: 0 0 0 60px rgba(255,255,255,.1); opacity: 0; } 100% { opacity: 0; } } @keyframes sdb03 { 0% { opacity: 0; } 30% { opacity: 1; } 60% { box-shadow: 0 0 0 60px rgba(255,255,255,.1); opacity: 0; } 100% { opacity: 0; } } /*====================================== //--//--> Fa Fa Scroll Down Arrow ======================================*/ .arrow { text-align: center; margin: 8% 0; } .arrow a span { position: absolute; top: 0; left: 50%; width: 46px; height: 46px; margin-left: -23px; border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; } .bounce { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } /*====================================== //--//--> ABOUT ======================================*/ .about-mf .box-shadow-full { padding-top: 4rem; padding-bottom: 4rem; } .about-mf .about-img { margin-bottom: 2rem; } .about-mf .about-img img { margin-left: 10px; } .skill-mf span { color: #4e4e4e; } .skill-mf .progress { background-color: #cde1f8; margin: .5rem 0 1.2rem 0; border-radius: 0; height: 27rem; } .skill-mf .progress .progress-bar { height: .7rem; } /*====================================== //--//--> SERVICES ======================================*/ .service-box { background-color: #D49A84; padding: 2.5rem 1.3rem; border-radius: 1rem; margin-bottom: 3rem; } /*====================================== //--//--> COUNTER ======================================*/ .counter-box { color: #fff; text-align: center; } .counter-ico { margin-bottom: 1rem; } .counter-ico .ico-circle { height: 60px; width: 60px; line-height: 1.8; box-shadow: 0 0 0 10px #cde1f8; } .counter-num .counter { font-size: 2rem; margin-bottom: 0; } /* ========================================================================== 8. Portfolio Section 1 ========================================================================== */ .portfolios .mix { padding: 10px; } .portfolios .portfolio-item .shot-item { margin: 0px; } .portfolio .mix { display: none; } .controls { text-align: center; padding: 0px 0px 20px; } .controls .active { color: #61D2B4 !important; border-color: #61D2B4; background: transparent; } .controls .btn { text-transform: uppercase; margin: 2px; } .controls:hover { cursor: pointer; } .portfolio-img { overflow: hidden; display: block; position: relative; } .portfolio-img img { width: 100%; } .shot-item { margin-right: 15px; border-radius: 4px; background: #fff; position: relative; } .shot-item img { width: 100%; } .shot-item .overlay { position: absolute; width: 100%; height: 100%; text-align: center; opacity: 0; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; } .shot-item:hover .overlay { opacity: 1; } .overlay .item-icon { height: 48px; width: 48px; line-height: 48px; color: #61D2B4; left: 50%; margin-left: -24px; margin-top: -24px; top: 50%; position: absolute; z-index: 2; visibility: hidden; opacity: 0; cursor: pointer; text-align: center; font-size: 20px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 1px solid #61D2B4; border-radius: 50%; } .overlay .item-icon:hover { background: #61D2B4; color: #fff; } .shot-item:hover .item-icon { visibility: visible; opacity: 1; } /* ========================================================================== 8. Portfolio Section ========================================================================== */ #portfolios .mix { padding: 10px; border-radius: 4px; background: #fff; } #portfolios .portfolio-item .shot-item { margin: 0px; } #portfolio .mix { display: none; } .controls { text-align: center; padding: 0px 0px 20px; } .controls .active { color: #61D2B4 !important; border-color: #61D2B4; background: transparent; } .controls .btn { text-transform: uppercase; margin: 2px; } .controls:hover { cursor: pointer; } .portfolio-img { overflow: hidden; display: block; position: relative; } .portfolio-img img { width: 100%; } .shot-item { margin-right: 15px; border-radius: 4px; background: #fff; position: relative; } .shot-item img { width: 100%; } .shot-item .overlay { position: absolute; width: 100%; height: 100%; text-align: center; opacity: 0; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; } .shot-item:hover .overlay { opacity: 1; } .overlay .item-icon { height: 48px; width: 48px; line-height: 48px; color: #61D2B4; left: 50%; margin-left: -24px; margin-top: -24px; top: 50%; position: absolute; z-index: 2; visibility: hidden; opacity: 0; cursor: pointer; text-align: center; font-size: 20px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 1px solid #61D2B4; border-radius: 50%; } .overlay .item-icon:hover { background: #61D2B4; color: #fff; } .shot-item:hover .item-icon { visibility: visible; opacity: 1; } /*====================================== //--//--> TESTIMONIALS ======================================*/ .testimonials .owl-carousel .owl-item img { width: auto; } .testimonial-box { color: #fff; text-align: center; } .testimonial-box .author-test { margin-top: 1rem; } .testimonial-box .author-test img { margin: 0 auto; } .testimonial-box .author { color: #fff; text-transform: uppercase; font-weight: 600; margin: 1rem 0; display: block; font-size: 1.4rem; } .testimonial-box .comit { font-size: 2rem; color: #0078ff; background-color: #fff; width: 52px; height: 52px; display: block; margin: 0 auto; border-radius: 50%; line-height: 1.6; } /*====================================== //--//--> BLOG ======================================*/ .card-blog .card-body { position: relative; } .card-blog .card-category-box { position: absolute; text-align: center; top: -16px; left: 15px; right: 15px; line-height: 25px; overflow: hidden; } .card-blog .card-category { display: inline-block; color: #fff; padding: 0 15px 5px; overflow: hidden; background-color: #0078ff; border-radius: 4px; } .card-blog .card-category .category { color: #fff; display: inline-block; text-transform: uppercase; font-size: .7rem; letter-spacing: .1px; margin-bottom: 0; } .card-blog .card-title { font-size: 1.3rem; margin-top: .6rem; } .card-blog .card-description { color: #4e4e4e; } .card-blog .post-author { display: inline-block; } .card-blog .post-date { color: #4e4e4e; display: inline-block; float: right; } /*====================================== //--//--> BLOG-SINGLE ======================================*/ .post-box, .form-comments, .box-comments, .widget-sidebar { padding: 2rem; background-color: #fff; margin-bottom: 3rem; } .blog-wrapper .article-title { font-size: 1.5rem; } .blog-wrapper .post-meta { margin: 1rem 0; } .blog-wrapper .post-meta ul { border-left: 4px solid #0078ff; margin-top: 1rem; } .blog-wrapper .post-meta ul li { display: inline-block; margin-left: 15px; } .blog-wrapper .post-meta ul a { color: #0078ff; } .blog-wrapper .post-meta ul span { color: #1e1e1e; } .blog-wrapper .blockquote { border-left: 4px solid #0078ff; padding: 18px; font-style: italic; } /*====================================== //--//--> CONTACT ======================================*/ .footer-paralax { padding: 4rem 0 0 0; } .contact-mf { margin-top: 4rem; } /*====================================== //--//--> FOOTER ======================================*/ footer { text-align: center; color: #fff; padding-bottom: 4rem; } footer .copyright { margin-bottom: .3rem; } footer .credits { margin-bottom: 0; } footer .credits a { color: #fff; } /*====================================== //--//--> CONtaCT FORM ======================================*/ .contact-us h3 { font-size: 36px; margin-bottom: 45px; } .contact-us p span { color: #61D2B4; padding-left: 10px; } #contact { background: #343a40; color: #fff; position: relative; } .form-control { width: 100%; margin-bottom: 10px; padding: 14px; border-color: #fff; border-radius: 0px; color: #fff; background: transparent; font-size: 14px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .form-control:focus { box-shadow: none; color: #fff; border-color: #61D2B4; background: transparent; outline: none; } .btn.disabled, .btn:disabled { opacity: 1; } .text-danger { font-size: 14px; margin-top: 10px; } .list-unstyled li { color: #d9534f; } /*====================================== //--//--> BUTTON ======================================*/ .button { display: inline-block; padding: .3rem .6rem; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1rem; border-radius: .3rem; border: 1px solid transparent; transition: all 500ms ease; cursor: pointer; } .button:focus { outline: 0; } .button:hover { background-color: #0062d3; color: #fff; transition: all 500ms ease; } .button-a { background-color: #0078ff; color: #fff; border-color: #cde1f8; } .button-big { padding: .9rem 2.3rem; font-size: 1.2rem; } .button-rouded { border-radius: 5rem; } .btn-lg { padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; } @media (min-width: 577px) { .counter-box { margin-bottom: 1.8rem; } } @media (min-width: 767px) { .about-mf .box-pl2 { margin-top: 3rem; padding-left: 0rem; } .card-blog { margin-bottom: 3rem; } .contact-mf .box-pl2 { margin-top: 3rem; padding-left: 0rem; } } @media (min-width: 768px) { .box-shadow-full { padding: 3rem; } .navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item { padding-left: 10px; } .navbar-b.navbar-trans .nav-link:before, .navbar-b.navbar-reduce .nav-link:before { margin-left: 18px; } .intro .intro-title { font-size: 4.5rem; } .intro .intro-subtitle { font-size: 2.5rem; } .intro-single .intro-title { font-size: 3.5rem; } .testimonial-box .description { padding: 0 5rem; } .post-box, .form-comments, .box-comments, .widget-sidebar { padding: 3rem; } .blog-wrapper .article-title { font-size: 1.9rem; } .box-comments .list-comments .comment-author { font-size: 1.5rem; } } @media (min-width: 992px) { .testimonial-box .description { padding: 0 8rem; } } @media (min-width: 1200px) { .testimonial-box .description { padding: 0 13rem; } } @media (max-width: 768px) { .back-to-top { bottom: 15px; } /* Media Queries: Tablet Landscape */ @media screen and (max-width: 1060px) { #primary { width:67%; } #secondary { width:30%; margin-left:3%;} } /* Media Queries: Tabled Portrait */ @media screen and (max-width: 768px) { #primary { width:100%; } #secondary { width:100%; margin:0; border:none; } } }