/* * A Design by GraphBerry * Author: GraphBerry * Author URL: http://graphberry.com * License: http://graphberry.com/pages/license * Adapted by: Manuel Cillero (http://manuel.cillero.es) */ /* * 1. GENERAL */ #frontpage { color: #fff; line-height: 1.2em; } #frontpage h3 { color: #fece1a; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } @-ms-viewport { width: device-width; } .hidden { display: none; visibility: hidden; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-left: 15px; padding-right: 15px; } /* * 2. LAYOUT */ .centered { float: none; margin-left: auto; margin-right: auto; text-align: center; } /* Use this class if you want center element with span* class */ .center { float: none !important; margin: 0 auto !important; text-align: center; } .highlighted-box { background: #f4f8f9; padding: 20px 30px; } .highlighted-box h1 { margin: 0; } .large-text { line-height: 1.2em; font-size: 30px; color: #181a1c; padding: 20px; margin-bottom: 20px; } .highlighted-box h1, .highlighted-box p { color: #181a1c !important; } .circle-border { display: inline-block; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; -khtml-border-radius: 500px; border: 3px solid #fff; } .left-align { text-align: left; } .error { color: #cf0000; display: none; } .invisible { display: none; visibility: visible; } .triangle { margin: 0 auto -10px; text-align: center; width: 0; height: 0; border-top: 30px solid #073648; border-left: 585px outset transparent; border-right: 585px outset transparent; position: relative; z-index: 100; } .primary-section .triangle { border-top-width: 40px; } .secondary-section .triangle { border-top: 40px solid #181a1c; } #clients .triangle { border-color: #fece1a; } /* * 2.1. Animations */ .zoom-in { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -o-transition: all 250ms ease; -ms-transition: all 250ms ease; transition: all 250ms ease; } .zoom-in:hover { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); } /* * 2.2. Buttons */ .button, .button:visited, .button:focus { display: inline-block; border: 1px solid #181a1c; color: #181a1c !important; background-color: transparent; padding: 15px 24px; font-size: 17px; line-height: auto; } .button:hover, .button:active { background-color: #181a1c; color: #fff !important; } .button-sp, .button-sp:visited, .button-sp:focus { border: none; background-color: #fece1a; color: #181a1c; } .button-sp:hover, .button-sp:active { background-color: #181a1c; color: #fece1a; } .button-ps, .button-ps:visited, .button-ps:focus { border: none; background-color: #181a1c; color: #fece1a !important; } .button-ps:hover, .button-ps:active { background-color: #fece1a; color: #181a1c !important; } /* * 2.3. Thumbnails */ .row { margin-left: 0; margin-right: 0; } .thumbnails { margin-left: 0; margin-right: 0; padding-left: 0; } .thumbnails > li { margin-left: 0; padding-left: 0; } .thumbnail { width: 100%; height: 100%; padding: 0; overflow: hidden; position: relative; border: 0; /* border-radius: 0; */ box-shadow: none; text-align: center; background: #191a1c; } .thumbnail .more { display: block; z-index: 4; position: absolute; top: -100px; left: 50%; margin: 0 auto; margin-left: -41px; width: 80px; height: 80px; font-size: 40px; color: #fff; text-decoration: none; line-height: 70px; text-align: center; } .thumbnail:hover .more { top: 40%; margin-top: -40px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3 s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .thumbnail h3, .thumbnail p { margin: 0; padding: 0; position: relative; z-index: 4; } .thumbnail h3 { margin-top: 10px; font-size: 20px; text-align: center; } .thumbnail > p { padding-bottom: 20px; } .thumbnail .mask { opacity: 0.85; filter: alpha(opacity=85); top: 100%; left: 0; width: 100%; height: 100%; background: #181a1c; position: absolute; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2 s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .thumbnail:hover .mask { top: 0; } /* * 2.4. Social icons */ .social { list-style: none; float: none; position: relative; margin: 5px auto; padding: 0; } .social li { display: inline-block; line-height: 32px; font-size: 32px; padding: 0 5px; } .social li a { margin: 0; padding: 0; width: 32px; height: 32px; color: #fece1a; } .social li a:hover { color: #181a1c; } /* * 3. SECTIONS */ .page-section { padding: 0 20px 40px; } .page-section .container { padding: 30px 0 0; } .page-section .container p { padding: 10px; font-weight: 100; color: #fff; } .page-section .title { text-align: center; padding: 0 0 10px; margin-bottom: 30px; } .page-section .title h1 { text-align: center; font-weight: normal; margin-bottom: 20px; padding: 0; } .page-section .title > p { font-size: 20px; color: #fff; font-weight: lighter; } .primary-section { background: #181a1c; } .primary-section .title { border-bottom: 1px solid #fff; } .primary-section, .primary-section .title p { color: #fece1a; } .primary-section h1 { color: #fff; } .secondary-section { background: #181a1c; } .secondary-section .title { border-bottom: 1px solid #181a1c; } .secondary-section h1, .secondary-section .title p { color: #181a1c; } /* Third section use background image */ .third-section { padding-bottom: 70px; background: #181a1c url(../images/frontpage/brand-bg.png) no-repeat center; border-top: 6px solid #fece1a; } .third-section .container { padding-top: 20px; position: relative; } .third-section .title { border-bottom: 1px solid #a1aab7; color: #fece1a; } .sub-section { margin-top: 30px; } /* * 3.1. Services */ #elegance { padding-bottom: 16px; } .service { margin-top: 20px; } .service, .service h2 { padding-top: 15px; } .service p { padding: 0px 40px !important; height: 60px; } .service img { width: 150px; height: 150px; } /* * 3.2. SuiteDesk */ #suitedesk { background-color: #fece1a; } #suitedesk .nav-pills { margin-bottom: 30px; } #suitedesk .nav-pills > li > a { /* -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; */ margin: 0 5px 4px 0; padding: 4px 8px; border: 1px solid #181a1c; background: transparent; color: #000; } #suitedesk .nav-pills > li > a:hover, #suitedesk .nav-pills > .active > a, #suitedesk .nav-pills > .active > a:hover, #suitedesk .nav-pills > .active > a:focus { background: #181a1c; color: #fff; } .toggleDiv { margin-top: 60px; } .single-project { margin-bottom: 30px; background: #181a1c; } .single-project img { width: 100%; } .project-description { font-size: 90%; padding: 0 20px 10px; } .project-description p { padding-left: 0 !important; } .project-title { margin-top: 15px; margin-bottom: 15px; border-bottom: 1px solid #fece1a; } .project-title h3 { float: left; margin: 0; padding: 8px 0 0; width: 80%; } .project-title .close { color: #fece1a; margin-top: 10px; } .project-info { font-weight: 100; padding: 10px 0; color: #fff; } .project-info span { width: 80px; display: inline-block; text-align: right; color: #fece1a; } .project-info div { margin-bottom: 5px; } .close { float: right; width: 40px; height: 40px; text-align: center; } #portfolio-grid .mix { opacity: 0; display: none; } /* * 3.3. About */ .team .thumbnail { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; border: 1px solid #fff; } .team .thumbnail img { margin: 0 auto; } .team .thumbnail:hover .social { z-index: 5; } .team .thumbnail:hover .social a { color: #fff; } .team .thumbnail .mask { background: #fece1a; padding: 0 10px; } .team .thumbnail .mask h2 { margin-top: 20%; color: #181a17; } .team .thumbnail .mask, .team .thumbnail .mask h3, .team .thumbnail .mask p, .team .thumbnail:hover h3, .team .thumbnail:hover .social a:hover { color: #181a17; } .about-text { margin-top: 30px; text-align: justify; } .about-text p { padding: 0 !important; font-size: 16px; } /* Skills bars */ .skills { list-style-type: none; position: relative; margin: 0; padding: 0; width: 100%; } .skills li { margin-bottom: 30px; background: #fff; height: 40px; padding: 1px; } .skills li h3 { position: relative; font-size: 15px; padding: 0; margin: 0 0 0 10px; z-index: 1; color: #181a1c !important; line-height: 40px; } .skills li .bar { height: 38px; position: absolute; background-color: #fece1a; } /* * 3.4. Clients */ #client-slider li { padding-left: 0; } .client-slider img { border: 1px solid #fff; } .client-slider img:hover { background-color: #fece1a; } .client-nav { list-style: none; margin: 20px 0 0; padding: 0; } .client-nav li { float: left; display: block; margin-left: 10px; padding-left: 0; } .client-nav li a { display: inherit; padding: 0; background: #fece1a; /* border-radius: 3px; */ width: 24px; height: 24px; line-height: 24px; color: #000; } .client-nav li a:hover { background: #181a1c; color: #fff; } .testimonial { margin-top: 20px; } .testimonial p { color: #181a1c !important; background: #fece1a; padding: 15px; margin: 0; } .testimonial .arrow { margin-top: -1px; margin-left: 10px; width: 0; border-top: 10px solid #fece1a; border-left: 20px outset transparent; border-right: 20px outset transparent; } .testimonial .whopic { display: inline-block; } .testimonial .whopic img { margin-top: 10px; width: 50px; height: 50px; float: left; } .testimonial .whopic strong { float: left; margin-top: 10px; padding-left: 10px; } .testimonial .whopic small { display: block; font-size: 12px; } .testimonial-text{ display: block; font-size: 22px; text-align: center; margin: 0 auto; margin-top: 30px; width: 70%; line-height: 1.3em; } /* * 3.5. Price table */ .price-table { margin-bottom: 20px; } .price-column { background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding-bottom: 20px; margin: 30px auto 0; text-align: center; } .price-column h3 { background-color: #181a1c; text-transform: uppercase; text-align: center; padding: 40px 0px; font-size: 36px; margin-top: 0px; -moz-border-radius: 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } .price-column .list { list-style: none; margin: 20px 50px; padding: 0; } .price-column .list li { font-weight: lighter; color: #747c89; font-size: 20px; border-bottom: 1px solid #747c89; padding: 25px 0px; } .price-column .list li.price { text-align: center; font-size: 31px; background-color: #fff; color: #747c89; margin-top: 25px; } .price-text { margin: 30px 0 20px; font-size: 20px; color: #181a1c; font-weight: normal; } /* * 3.6. Newsletter */ .newsletter, .newsletter h2 { color: #d7ddde; } .newsletter .title h2 { text-align: left; padding: 0; margin: 0; } .newsletter form { text-align: center; } .newsletter input { margin-top: 10px; padding: 15px; height: auto; } .newsletter button { margin: 10px 0; } .newsletter .button-sp:hover, .newsletter .button-sp:active { background-color: #fff !important; color: #181a1c !important; } /* * 3.7. Contact */ .contact { background: #fece1a; } .contact h1, .contact h2, .contact h3, .contact h4, .contact h5, .contact h6, .contact .page-section .title > p { color: #181a1c; } .contact textarea, .contact input[type="text"], .contact input[type="email"] { padding: 10px; margin-bottom: 10px; line-height: 20px; height: auto; } .contact textarea { height: 120px; } .contacts { color: #fff; list-style: none; margin-left: 10px; } .contacts > li { margin-top: 15px; } .contacts > li > a { color: #fff; } .contact-info { margin-top: 10px; margin-bottom: 10px; } .contact-info p { font-weight: normal; } .contact-info .icon { margin: 10px auto; font-size: 30px; } .map-wrapper { position: relative; height: 500px; } .map-canvas { position: absolute; margin-bottom: 20px; width: 100%; height: 500px; color: #29383f; position: absolute; left: 0; top: 0; right: 0; } .contact-form { background: #fff; background: rgba(255, 255, 255, 0.9); z-index: 110; position: relative; margin-top: -25px; padding: 20px; } .contact-form h3 { color: #838589; padding-bottom: 20px; } .message-btn { border:1px solid #747c89; color: #747c89 !important; background-color: transparent; padding: 15px 30px; font-size: 17px; } .message-btn:hover { background-color: #fece1a; } .contact-info { text-align: center; font-size: 22px; } .info-mail { border: 1px solid #fff; width: 60%; margin: 0 auto; padding: 15px; color: #181a1c !important; overflow: hidden; } .black { color: #181a1c; }