body, html { height: 100%; width: 100%; } body, h1, h2, h3, h4, h5, h6 { font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } body { font-weight: 600; } .lead { font-size: 18px; font-weight: 400; } p { color: #656565; font-weight: 400; } .no-padding { padding: 0px; !important; } .body { position: relative; width: 100%; overflow: hidden; } /* Header */ .navbar-default { background: none; border: none; border-radius: 0px; } .header { padding: 40px 0; margin-bottom: 10px; z-index: 10000; } .logo i { color: #fff; font-size: 22px; margin-right: 3px; top: -0px; position: relative; } .logo { color: #fff !important; font-size: 25px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 25px; } .logo span { display: block; padding-left: 36px; } /* top content */ .intro { padding-top: 0px; padding-bottom: 70px; box-shadow: 0px !important; background: #eb4b01; position: relative; } .header-nav { float: right; margin: 12px 0 0; padding: 0px; } .header-nav > li { float: left; margin-left: 5px; list-style: none; } .header-nav > li > a { color: #fff; font-weight: 400; font-size: 14px; padding: 11px 15px; } .purchase a { background: transparent; color: #fff; border-radius: 4px; margin-left: 15px; letter-spacing: 0px; text-transform: uppercase; font-size: 13px !important; border: 1px solid #fff; } .purchase a:hover { color : #eb4b01; background:#fff; } .main-slider { margin-top: 30px; } .order-wrap { position: relative; padding: 0px; background: #fff; margin-top: 50px; display: table; border-radius: 10px; overflow: hidden; border-bottom: 4px solid #b83b01; } .order-wrap form { padding: 4px 25px 10px; } .order-wrap > h2 { font-size: 30px; font-weight: 700; text-transform: uppercase; color: #222; display: table; margin: 30px auto 25px; } .order-wrap > h2 i { font-size: 12px; border: 2px solid rgb(0, 0, 0); border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 40px; margin: -16px 0 0; position: relative; top: -5px; margin-bottom: -15px; } .apply-form label { font-size: 14px; font-weight: 300; color: #000; line-height: 40px; text-transform: uppercase; } .apply-form input , .apply-form select { color: #777 !important; height: 40px; padding: 10px 15px; border: 1px solid #ccc; margin-bottom:20px; margin-top:0px; } .apply-form textarea { color: #000 !important; padding: 10px 15px; border: 1px solid #ccc; } input::-webkit-input-placeholder { color: #777 !important; opacity: 1 !important; } input:-moz-placeholder { color: #777 !important; opacity: 1 !important; } input::-moz-placeholder { color: #777 !important; opacity: 1 !important; } input:-ms-input-placeholder { color: #777 !important; opacity: 1 !important; } textarea::-webkit-input-placeholder { color: #777 !important; opacity: 1 !important; } textarea:-moz-placeholder { color: #777 !important; opacity: 1 !important; } textarea::-moz-placeholder { color: #777 !important; opacity: 1 !important; } textarea:-ms-input-placeholder { color: #777 !important; opacity: 1 !important; } /* Welcome content */ .welcome { padding: 50px 0 40px; } .welcome h2 { font-size: 35px; margin-bottom: 25px; text-transform: uppercase; font-weight: 400; } /* Services content */ .services { padding: 50px 0 100px; } .services h4 { font-size: 17px; margin: 25px 0 15px; font-weight: 700; text-transform: uppercase; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .services p { font-size: 13px; line-height: 21px; color: #666; } .service-item { margin-bottom: 15px; background: #fff; } .line { height: 1px; width: 250px; margin: 25px auto 40px; background: #000; } i.service-icon { color: #1abc9c; width:60px; height:60px; line-height:60px; display: inline-block; font-size: 60px; vertical-align: middle; text-align: center; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; position: relative; } .service-item:hover i.service-icon { font-size: 40px; } .service-item:hover h4 { color: #1abc9c; } .service-item:hover { cursor: pointer; } /* Author content */ .author-content { padding: 60px 0; background: #2ecc71; position: relative; } .author-content img { display: table; margin: 0 auto; border: 8px solid #fff; box-shadow: 0px 4px 10px rgba(0,0,0,0.3); transform: rotate(-4deg); -ms-transform: rotate(-4deg); /* IE 9 */ -webkit-transform: rotate(-4deg); /* Opera, Chrome, and Safari */; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .author-content img:hover { cursor:pointer; transform: rotate(-0deg); -ms-transform: rotate(-0deg); /* IE 9 */ -webkit-transform: rotate(-0deg); /* Opera, Chrome, and Safari */; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .author-content h2, .author-content h3, .author-content p { color: #fff !important; } .icon-center i { border: 1px solid #000; width: 55px; height: 55px; line-height: 55px; text-align: center; font-size: 18px; border-radius: 50%; } .author-content h2 { font-size: 30px; margin: 35px 0 25px; font-weight: 200; } .author-content h3 { text-transform: uppercase; font-weight: 500; margin-top: 25px; margin-bottom: 15px; font-size: 16px; border-bottom: 1px solid #fff; padding-bottom: 5px; display: table; } .author-content p { font-size: 16px; line-height: 27px; } .facebook-link a:hover { color: #3b5998; } .linkedin-link a:hover { color: #007fb1; } .twitter-link a:hover { color: #39a9e0; } .google-plus-link a:hover { color: #d14836; } .list-social-icons { margin-bottom: 45px; } .tooltip-social a { text-decoration: none; color: #fff; font-size: 23px; margin-right: 15px; } /* Screenshots content */ .quote-main { padding: 70px 0 40px; } .quote-main h2 { margin-bottom: 40px; } .blockquote-style { width: 100%; } .blockquote-style blockquote { background: #fff; padding: 15px 20px 20px; border: 1px solid #d2d2d2; border-radius: 3px; } .blockquote-style blockquote p { font-size: 14px; color: #777; font-weight: 400; line-height: 24px; position: relative; padding-left: 35px; font-family: 'Droid Serif', serif; font-style:italic; } .blockquote-style blockquote p:before { content: "\f10d"; position: absolute; width: 45px; height: 100%; color: #000; left: -15px; top: 1px; font-size: 30px; text-align: center; font-family: 'FontAwesome'; font-style: normal; color: #bbb; } .blockquote-style .mb-attribution { text-align: right; padding: 10px 80px 20px 20px; position: relative; } .blockquote-style .mb-thumb1 , .blockquote-style .mb-thumb2 , .blockquote-style .mb-thumb3 , .blockquote-style .mb-thumb4 , .blockquote-style .mb-thumb5 { display: block; width: 70px; height: 70px; border: 5px solid #fff; border-radius: 50%; background: url(../demo/quote/1.jpg) no-repeat center center; background-size: 100%; position: absolute; right: 10px; bottom: 5px; box-shadow: inset 1px 1px 4px rgba(0,0,0,0.3), 0 2px 3px rgba(0,0,0,0.4); } .blockquote-style .mb-thumb2 { background: url(../demo/quote/2.jpg) no-repeat center center; background-size: 100%; } .blockquote-style .mb-thumb3 { background: url(../demo/quote/3.jpg) no-repeat center center; background-size: 100%; } .blockquote-style .mb-thumb4 { background: url(../demo/quote/1.jpg) no-repeat center center; background-size: 100%; } .blockquote-style .mb-thumb5 { background: url(../demo/quote/2.jpg) no-repeat center center; background-size: 100%; } .blockquote-style .mb-author { font-weight: 700; font-size: 18px; color: #000; margin: 0px; } .blockquote-style cite { font-weight: 400; color: #555; text-transform: uppercase; font-size: 11px; } .blockquote-style cite:hover { color: #000; } /* Info content */ .info-content { padding: 40px 0 60px; } .info-content h2 { margin: 20px 0; } .info-content p { font-size: 15px; line-height: 26px; } /* Pricing content */ .pricing { padding: 50px 0; background: #f39c12; position: relative; } .price { font-size: 4em; } .pricing .label { position: relative; top: -2px; line-height: 0; padding: 3px 5px 2px; right: -2px; } .price-cents { vertical-align: super; font-size: 50%; } .list-group-item { color: #757575; font-size: 14px; } .list-group .btn { background: #1abc9c !important; border-color: #0fa285; } .list-group .btn:hover { background: #0fa285 !important; } .panel-default { border-color: #ccc; padding: 15px 0; } .panel-body { font-size: 13px; line-height: 23px; font-weight: 400; color: #555; } /* FAQ section */ .faq-wrap { padding: 20px 0; } .faq-content { padding: 70px 0 80px; } .faq-content .panel-title { font-size: 15px; font-weight: 700; text-transform: none; padding: 0px; margin: 0px; } .faq-content .panel-title:hover { color: #1abc9c; } .faq-content .panel-default { border-color: #CCC; padding: 9px 0px; } .faq-wrap h3 { font-weight: 700; text-transform: none; margin: 0 0 5px; } .faq-wrap p { font-size: 13px; line-height: 20px; margin-bottom: 30px; } .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 7px; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Newsletter */ .newsletter-form { display: table; float: right; } .newsletter { color: #ffffff; background: #3498db; padding: 40px 0 55px; } .newsletter input { border: none; background: #fff; height: 41px; border-radius: 5px; padding: 0px 15px; font-weight: 600; position: relative; top: 2px; } .newsletter .btn { margin: 10px; text-transform: uppercase; font-weight: bold; font-size: 14px; padding: 12px 25px 8px; background: #2980b9; } .newsletter i { margin-right: 5px; } /* Clients content */ .clients { padding: 80px 0; } .img-client { border: 1px solid #fff; border-radius: 3px; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .img-client:hover { border: 1px solid #bbb; opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } /* Contact Info */ .contact-info { padding: 0px; } .contact-info li { list-style: none; float: left; width: 33.3333%; padding: 0 20px; font-size: 18px; margin-top: 5px; text-align: center; } .contact-info li i { color: #fff; width: 60px; height: 60px; border: 1px solid #fff; border-radius: 50%; line-height: 58px; text-align: center; font-size: 25px; display: table; margin: 0 auto 20px; } .cinfo { padding: 60px 0; color: #fff; background: #e74c3c; position: relative; } .cinfo ul { margin-bottom: 0; } .cinfo-social-buttons { margin-top: 0; } .cinfo-social-buttons .btn { border: 2px solid #444; width: 58px; height: 58px; border-radius: 50%; text-align: center; padding: 0px; line-height: 56px; background: transparent; color: #444; } .cinfo-social-buttons .btn:hover { color: #1abc9c; border: 2px solid #1abc9c; } /* Footer */ footer .list-inline { display: table; margin: 0 auto; } footer { background-color: #000; padding: 50px 0; } p.copyright { margin: 15px 0 0; color: #fff; } /* Extras */ .btn1 { margin: 25px 0 0px; color: #fff; font-size: 15px; padding: 13px 30px 11px; background: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-bottom: 3px solid #aaa; text-transform: uppercase; font-weight: 700; min-width: 180px; text-align: center; } .btn1:hover { background: #555; color:#fff; } .btn2 { color: #fff; font-size: 14px; padding: 10px 20px 8px; background: #1abc9c; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-bottom: 3px solid #16a085; text-transform: uppercase; font-weight: 700; min-width: 150px; text-align: center; } .btn2:hover { background: #18b193; color:#fff; } .btn-center { display: table; margin-left: auto; margin-right: auto; } .btn3 { color: #fff; font-size: 14px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; border-bottom: 3px solid #2980b9; text-transform: uppercase; font-weight: 700; text-align: center; background: #298acb !important; } .btn3:hover { background: #2980b9 !important; color:#fff; } @media (max-width: 767px) { .container { max-width: 420px; width: 420px; margin: 0 auto; } .logo { display: table; margin-left: auto; margin-right: auto; float: none; } .header-nav { float: none; } .header-nav > li { float: none; display: table; margin-left: auto; margin-bottom: 10px; margin-right: auto; } .purchase a { margin-left: 0px; margin-top: 15px !important; display: table; } .header { padding: 20px 0; margin-bottom: 10px; z-index: 10000; } .order-wrap > h2 { font-size: 20px; } .order-wrap > h2 i { font-size: 12px; border: 2px solid rgb(0, 0, 0); border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 30px; margin: -0px 0 0; position: relative; top: -2px; margin-bottom: -15px; } .welcome h2 { font-size: 26px; line-height: 30px; } .line { width: 60%; } .service-item { margin-top: 20px; } .video-wrap .video { margin-top: 30px; } .newsletter input { width: 100%; margin: 15px 0 0; } .newsletter .btn { width: 100%; margin: 10px 0 0; } .contact-info li { width: 100%; margin: 15px 0; } .order-wrap { width: 100%; } .newsletter-form { display: table; float: none; margin: 0 auto; } .newsletter h3 { text-align: center; } } @media (max-width: 421px) { .container { max-width: 280px; width: 280px; margin: 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .apply-form input, .apply-form textarea { font-size: 12px !important; } .order-wrap > h2 { font-size: 20px; } .order-wrap > h2 i { font-size: 12px; border: 2px solid rgb(0, 0, 0); border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 30px; margin: -0px 0 0; position: relative; top: -2px; margin-bottom: -15px; } .order-wrap { margin-top: 0px; } .newsletter h3 { margin: 10px 0px; } } @media only screen and (min-width: 960px) and (max-width: 1050px) { .container { width: 90% !important; max-width: 90% !important; margin: 0 auto; } }