/* * * Template Name: Andia * Template URI: http://azmind.com * Description: Responsive Agency Template * Author: Anli Zaimi * Author URI: http://azmind.com * */ body { background: #fff; text-align: center; font-family: 'Open Sans', sans-serif; color: #888; font-size: 12px; } .violet { color: #9d426b; } a { color: #9d426b; text-decoration: none; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } a:hover, a:focus { color: #888; text-decoration: none; } strong { font-weight: bold; } img { max-width: 100%; } h1, h2 { line-height: 40px; } h3, h4 { line-height: 20px; } ::-moz-selection { background: #9d426b; color: #fff; text-shadow: none; } ::selection { background: #9d426b; color: #fff; text-shadow: none; } /***** Big links / buttons *****/ a.big-link-1 { display: inline-block; padding: 5px 22px; background: #9d426b; color: #fff; font-style: italic; text-decoration: none; -moz-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; } a.big-link-1:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } a.big-link-1:active { -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; } a.big-link-2 { display: inline-block; width: 35px; height: 35px; padding-top: 6px; background: #9d426b; font-size: 20px; color: #fff; line-height: 20px; -moz-border-radius: 19px; -webkit-border-radius: 19px; border-radius: 19px; -moz-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; } a.big-link-2 i { vertical-align: middle; } a.big-link-2:hover { background: #5d5d5d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } a.big-link-2:active { -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; } a.big-link-3 { display: inline-block; padding: 5px 22px; background: #9d426b; font-size: 18px; color: #fff; font-style: italic; line-height: 24px; text-decoration: none; -moz-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; } a.big-link-3:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } a.big-link-3:active { -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 10px 0 rgba(0,0,0,.15) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; } /***** Top menu *****/ .navbar { margin-bottom: 0; background: #fff; border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } ul.navbar-nav { font-size: 14px; color: #888; text-transform: uppercase; } ul.navbar-nav li a { padding: 23px 20px; background: #fff; border-top: 5px solid #fff; color: #5d5d5d; } ul.navbar-nav li.active a { background: #f8f8f8; border-color: #9d426b; color: #5d5d5d; } ul.navbar-nav li a:hover, ul.navbar-nav li a:focus { background: #9d426b; border-color: #9d426b; color: #fff; outline: 0; } .nav .open > a { background: #f8f8f8; border-color: #9d426b; color: #5d5d5d; } .nav .open > a:hover, .nav .open > a:focus { background: #9d426b; border-color: #9d426b; color: #fff; } ul.navbar-nav li a i { line-height: 35px; color: #aaa; } ul.navbar-nav li a:hover i, ul.navbar-nav li a:focus i { color: #fff; } .dropdown-menu { border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); box-shadow: 0 6px 10px rgba(0, 0, 0, .15); } .dropdown-menu > .active > a { background: #fff; color: #5d5d5d; } .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background: #f8f8f8; color: #9d426b; } ul.navbar-nav li .dropdown-menu a { padding-top: 15px; padding-bottom: 15px; } ul.navbar-nav li.active .dropdown-menu a { background: #fff; color: #5d5d5d; border: 0; } ul.navbar-nav li.active .dropdown-menu a:hover, ul.navbar-nav li.active .dropdown-menu a:focus { background: #9d426b; color: #fff; border: 0; } ul.navbar-nav li.active .dropdown-menu > .active > a { background: #f8f8f8; color: #9d426b; border: 0; } ul.navbar-nav li.active .dropdown-menu > .active > a:hover, ul.navbar-nav li.active .dropdown-menu > .active > a:focus { background: #9d426b; color: #fff; border: 0; } .navbar>.container .navbar-brand { margin-left: 0; } .navbar-brand { width: 167px; height: 106px; background: url(../img/logo.png) left center no-repeat; text-indent: -99999px; } /***** Slider *****/ .slider-container { margin: 0 auto; background: #f8f8f8 url(../img/pattern.jpg) left top repeat; -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0 rgba(0,0,0,.05) inset; } .slider { padding-left: 5px; padding-right: 5px; } .flexslider { margin-top: 45px; margin-bottom: 55px; border: 6px solid #fff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 -5px 15px 0 rgba(0,0,0,.05); -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 -5px 15px 0 rgba(0,0,0,.05); box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 -5px 15px 0 rgba(0,0,0,.05); } .flexslider .slides > li { position: relative; } .flex-caption { position: absolute; left: 0; bottom: 20px; width: 95%; padding: 10px 20px; background: #1d1d1d; /* browsers that don't support rgba */ background: rgba(0, 0, 0, .7); font-size: 14px; line-height: 24px; color: #eaeaea; text-align: left; font-style: italic; } .flex-direction-nav a { width: 60px; height: 60px; padding-top: 17px; background: #9d426b; color: #fff; text-shadow: none; } .flex-direction-nav a:before { font-size: 26px; } .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next { text-align: center; } /***** Slider 2 *****/ .slider-2-container { padding: 180px 0; } .slider-2-text { padding: 30px 0 43px 0; background: #1d1d1d; /* browsers that don't support rgba */ background: rgba(0, 0, 0, .7); color: #fff; } .slider-2-text h1 { padding-left: 30px; padding-right: 30px; font-family: 'Lobster', cursive; font-size: 30px; color: #fff; font-weight: bold; } .slider-2-text p { padding-left: 30px; padding-right: 30px; font-size: 18px; font-style: italic; } /***** Presentation *****/ .presentation-container { margin-top: 30px; } .presentation-container h1 { font-family: 'Lobster', cursive; font-size: 30px; color: #5d5d5d; font-weight: bold; } .presentation-container p { font-size: 18px; font-style: italic; } /***** Services *****/ .services-container { margin-top: 10px; } .services-title { margin-top: 40px; background: url(../img/line.png) left center repeat-x; } .services-title h2 { width: 200px; margin: 0 auto; background: #fff; font-family: 'Lobster', cursive; font-size: 24px; color: #5d5d5d; font-weight: bold; } .service { margin-top: 40px; padding: 15px 15px 20px 15px; background: #f8f8f8; border-bottom: 2px solid #9d426b; } .service:hover { box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .service .service-icon { font-size: 50px; line-height: 50px; color: #5d5d5d; } .service .service-icon i { vertical-align: middle; } .service h3 { margin-top: 13px; font-family: 'Droid Sans', sans-serif; font-size: 14px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .service p { padding-bottom: 7px; line-height: 24px; } /***** Latest work *****/ .work-container { margin-top: 50px; } .work-title { background: url(../img/line.png) left center repeat-x; } .work-title h2 { width: 220px; margin: 0 auto; background: #fff; font-family: 'Lobster', cursive; font-size: 24px; color: #5d5d5d; font-weight: bold; } .work { margin-top: 40px; padding-bottom: 20px; background: #f8f8f8; border-bottom: 2px solid #9d426b; } .work:hover img { opacity: 0.7; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .work:hover { box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .work .work-bottom { margin-top: 15px; } .work h3 { margin-top: 20px; padding-left: 15px; padding-right: 15px; font-family: 'Droid Sans', sans-serif; font-size: 14px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .work p { padding-left: 15px; padding-right: 15px; line-height: 24px; font-style: italic; } /***** Testimonials *****/ .testimonials-container { margin-top: 50px; padding-bottom: 70px; } .testimonials-title { background: url(../img/line.png) left center repeat-x; } .testimonials-title h2 { width: 180px; margin: 0 auto; background: #fff; font-family: 'Lobster', cursive; font-size: 24px; color: #5d5d5d; font-weight: bold; } .testimonial-list { margin-top: 30px; text-align: left; } .testimonial-list .tab-pane { overflow: hidden; } .testimonial-list .testimonial-image { float: left; width: 10%; margin: 10px 0 0 0; } .testimonial-list .testimonial-image img { max-width: 64px; border: 3px solid #eaeaea; } .testimonial-list .testimonial-text { float: left; width: 90%; font-size: 14px; line-height: 30px; font-style: italic; } .testimonial-list .nav-tabs { border: 0; text-align: right; } .testimonial-list .nav-tabs li { float: none; display: inline-block; margin-left: 2px; margin-right: 2px; } .testimonial-list .nav-tabs li a { width: 12px; height: 12px; padding: 0; background: #eaeaea; border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .testimonial-list .nav-tabs li a:hover { border: 0; background: #ddd; } .testimonial-list .nav-tabs li.active a { background: #9d426b; } /***** Footer *****/ footer { margin: 0 auto; padding-bottom: 10px; background: #f8f8f8 url(../img/pattern.jpg) left top repeat; -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset; } .footer-box { margin-top: 20px; text-align: left; } .footer-box h4 { margin-top: 20px; font-family: 'Droid Sans', sans-serif; font-size: 14px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .footer-box-text p { line-height: 24px; } .footer-box-text-contact i { padding-right: 7px; } .footer-box-text-subscribe form { padding-bottom: 10px; } .footer-box-text-subscribe input[type="text"] { width: 95%; height: 26px; } /* Flickr feed */ .flickr-feed { margin: 16px 0 0 0; } .flickr-feed a { display: inline-block; width: 54px; margin: 0 4px 4px 0; } .flickr-feed a:hover { opacity: 0.7; } .flickr-feed a img { border: 2px solid #eaeaea; } .footer-border { margin-top: 30px; border-top: 1px dashed #ddd; } .footer-copyright { margin-top: 15px; line-height: 24px; text-align: left; } .footer-social { margin-top: 5px; text-align: right; } .footer-social a { margin: 0 0 0 10px; font-size: 26px; color: #888; } .footer-social a:hover, .footer-social a:focus { color: #9d426b; } /***** Page title *****/ .page-title-container { margin: 0 auto; padding: 30px 0 35px 0; background: #f8f8f8 url(../img/pattern.jpg) left top repeat; text-align: left; -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0 rgba(0,0,0,.05) inset; } .page-title-container h1 { display: inline; margin-left: 10px; font-family: 'Lobster', cursive; font-size: 24px; color: #5d5d5d; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); vertical-align: middle; } .page-title-container p { display: inline; margin-left: 5px; font-size: 14px; font-style: italic; vertical-align: middle; } .page-title-container i { font-size: 46px; color: #ccc; vertical-align: middle; } /* ----- ABOUT PAGE ----- */ /***** About us text *****/ .about-us-container { margin-top: 20px; } .about-us-text { padding-top: 10px; padding-bottom: 10px; text-align: left; } .about-us-text h3 { margin-top: 25px; font-family: 'Droid Sans', sans-serif; font-size: 16px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .about-us-text p { line-height: 28px; font-size: 13px; } /***** Meet our team *****/ .team-container { margin-top: 30px; } .team-title { background: url(../img/line.png) left center repeat-x; } .team-title h2 { width: 220px; margin: 0 auto; background: #fff; font-family: 'Lobster', cursive; font-size: 24px; color: #5d5d5d; font-weight: bold; } .team-box { margin-top: 40px; padding-bottom: 15px; background: #f8f8f8; border-bottom: 2px solid #9d426b; } .team-box:hover img { opacity: 0.7; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .team-box:hover { -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .team-box h3 { margin-top: 20px; padding-left: 15px; padding-right: 15px; font-family: 'Droid Sans', sans-serif; font-size: 14px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .team-box p { padding-left: 15px; padding-right: 15px; line-height: 24px; font-style: italic; } .team-social a { margin: 0 5px; font-size: 26px; } /* ----- CONTACT PAGE ----- */ /***** Form *****/ .contact-us-container { margin-top: 20px; padding-bottom: 50px; text-align: left; } .contact-us-container h3 { margin-top: 25px; font-family: 'Droid Sans', sans-serif; font-size: 16px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .contact-us-container p { line-height: 28px; font-size: 13px; } .contact-form { padding-top: 25px; padding-bottom: 30px; } .contact-form form { margin-top: 25px; } .contact-form form .form-group { margin-bottom: 20px; } .contact-form input[type="text"] { width: 95%; height: 34px; } .contact-form textarea { width: 95%; height: 170px; padding-top: 6px; padding-bottom: 6px; } .contact-form label { font-size: 13px; font-weight: 400; } .contact-form label .error-label { font-style: italic } .contact-form button { margin-top: 5px; padding: 0 45px; } /***** Google map *****/ .contact-address { padding-bottom: 15px; } .contact-address .map { margin: 20px 0 40px 0; height: 300px; border: 5px solid #f8f8f8; } /* ----- SERVICES PAGE ----- */ /***** Services full width text *****/ .services-full-width-container { margin-top: 20px; } .services-full-width-text { padding-top: 10px; text-align: left; } .services-full-width-text h3 { margin-top: 25px; font-family: 'Droid Sans', sans-serif; font-size: 16px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .services-full-width-text p { line-height: 28px; font-size: 13px; } /***** Services half width text *****/ .services-half-width-container { margin-top: 20px; } .services-half-width-text { padding-top: 10px; padding-bottom: 10px; text-align: left; } .services-half-width-text h3 { margin-top: 25px; font-family: 'Droid Sans', sans-serif; font-size: 16px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .services-half-width-text p { line-height: 28px; font-size: 13px; } /***** Call to action *****/ .call-to-action-container { margin-top: 20px; padding-bottom: 50px; } .call-to-action-text { padding-top: 25px; padding-bottom: 15px; background: #f8f8f8; text-align: left; overflow: hidden; } .call-to-action-text:hover { -moz-box-shadow: 0 3px 10px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 3px 10px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .call-to-action-text p { float: left; width: 80%; padding-left: 25px; line-height: 30px; font-size: 18px; font-style: italic; } .call-to-action-text .call-to-action-button { float: left; width: 20%; padding-right: 25px; margin-bottom: 10px; text-align: right; } /* ----- PORTFOLIO PAGE ----- */ .portfolio-container { margin-top: 20px; padding-bottom: 50px; } .portfolio-filters { padding-top: 35px; padding-bottom: 10px; font-family: 'Droid Sans', sans-serif; font-size: 16px; color: #5d5d5d; font-weight: bold; text-align: left; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .portfolio-filters a { color: #5d5d5d; } .portfolio-filters a:hover, .portfolio-filters a.active { color: #9d426b; } .portfolio-box { width: 255px; margin: 40px 15px 0 15px; } .portfolio-box img { cursor: pointer; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .portfolio-box:hover img { opacity: 0.7; } .portfolio-box-container { position: relative; background: #f8f8f8; border-bottom: 2px solid #9d426b; } .portfolio-box-container:hover { box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .portfolio-box-icon { position: absolute; top: 10px; right: 10px; width: 35px; height: 35px; padding-top: 7.5px; padding-left: 3px; background: #1d1d1d; /* browsers that don't support rgba */ background: rgba(0, 0, 0, .7); font-size: 20px; color: #fff; line-height: 20px; -moz-border-radius: 19px; -webkit-border-radius: 19px; border-radius: 19px; } .portfolio-box-text { padding: 0 15px 20px 15px; } .portfolio-box-text h3 { margin-top: 20px; font-family: 'Droid Sans', sans-serif; font-size: 14px; color: #5d5d5d; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.7); } .portfolio-box-text p { line-height: 24px; font-style: italic; }