/*

Dear Buyer,

This file is created for the sake of easier customization. You don't have to search for colors 
and font-families in the forest of the main css file.

Table of Contents:

      1. Header / Homepage
      2. Portfolio
      3. Services
      4. About
      5. Contact

*/


/*-- 1. Header / Homepage --*/
#header { background: #FFF; } /* The background of the Homepage / First section */

/* Styles for the navigation bar */
div#navigation { background: #000; border-bottom: 1px solid #FFF; }
div#navigation div ul li a { color: #FFF; }
div#navigation div ul li:hover { background: #FFF; }
div#navigation div ul li:hover a, div#navigation div ul li a:hover { color: #000; }

/* Intro */
div#intro h1 { font-size: 50px; font-family: 'Oswald', sans-serif; font-weight: bold; color: #000; }
div#intro p { line-height: 28px; font-family: 'Open Sans', sans-serif; font-size: 18px; color: #666; }
div#intro p strong, div#intro p strong a { color: #000; }

/* Slider */
.flex-caption { background: #000; color: #FFF; font-size: 14px; font-family: 'Oswald', sans-serif; text-align: center; }
.flex-direction-nav li a { width: 56px; height: 120px; top: 130px; }
#slider:hover .flex-direction-nav li .next { right: 0px; background: url('images/slider_next.png') no-repeat; }
#slider:hover .flex-direction-nav li .prev { left: 0px; background: url('images/slider_prev.png') no-repeat; }


/*-- 2. Portfolio --*/
div#portfolio { background: #333; } /* The backrgound of the portfolio section */
div#portfolio_title h2 { color: #FFF; }

/* Styles for the hidden element that shows when you hover over a thumb */
div#portfolio_thumbs ul li div.item_info { background: #333; border-bottom: 2px solid #FF9900; }
div#portfolio_thumbs ul li div.item_info h3 { color: #FFF; font-family: 'Oswald', sans-serif; }
div#portfolio_thumbs ul li div.item_info h3 a { color: #FFF; }

/* Styles for the item page that loads via ajax */
#text_content { text-align: center; font-size: 12px; color: #CCC; }
#text_content h3 { font-size: 20px; color: #FFF; font-family: 'Oswald', sans-serif; }
#item_slider .flex-direction-nav li a { background: #666; font-size: 15px; }
#item_slider .flex-direction-nav li .next { color: #FFF; }
#item_slider .flex-direction-nav li .prev { color: #FFF; }
#item_slider .flex-direction-nav li .next:hover { background: #999; }
#item_slider .flex-direction-nav li .prev:hover { background: #999; }
#control_buttons a { background: #999; font-size: 15px; color: #FFF; }
#control_buttons a:hover { background: #CCC; }

/* Styles for the quote */
div#quote { text-align: center; color: #CCC; }
div#quote p { line-height: 32px; font-size: 24px; font-family: 'Quicksand', sans-serif; }


/*-- 3. Services --*/
div#services { background: #FFF; } /* The backrgound of the services section */
#services_title h2 { color: #333; }
div#services_intro { color: #666; }
div#service_elements ul li .icon {  background: #333; } /* The background of the icons */
div#service_elements ul li .service_content h3 { font-size: 19px; color: #333; font-family: 'Oswald', sans-serif; }
div#service_elements ul li .service_content a.read_more { font-size: 11px; font-weight: bold; font-style: italic; color: #333; }
div#service_elements ul li .service_content a.read_more:hover { color: #FF6600; }

/* Styles for the service page that loads via ajax */
div#service_content h3 { color: #333; font-family: 'Oswald', sans-serif; }
div#service_content a#close_service { font-size: 13px; color: #CCC; background: #333; }


/*-- 4. About --*/
div#about { background: #333; color: #CCC; } /* The backrgound of the about section */
#about_title h2 { color: #FFF; }
#about_content h3 { font-size: 22px; color: #FFF; font-family: 'Oswald', sans-serif; }
div#testimonails_contaier { background: #000; }
div.testimonial_content { color: #CCC; }

/*-- 5. Contact --*/
div#contact { background: #FFF; }
#contact_title h2 { color: #000; }
div#contact_form { font-family: 'Oswald', sans-serif; font-size: 16px; }
div#contact_form input[type="text"], div#contact_form textarea { color: #666; }
div#contact_form button { color: #FFF; background: #333; }