/* */ @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900); @import url("base.css"); /* Default Reset, Typography, Forms, etc. */ @import url("skeleton.css"); /* 960 Grid + Media Query Layouts */ @import url("font-awesome/css/font-awesome.css"); @import url("jquery.tweet.css"); @import url("superfish.css"); @import url("animate.css"); @import url("jquery.fancybox.css"); @import url("tipsy.css"); @import url("shortcodes.css"); /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #HEADER ================================================== */ * { margin:0; padding:0; } body { font-family:Arial,Tahoma; font-size:14px; background:#fff; color:#929292; margin:0; padding:0; } .wrapper { position:relative; width:auto; max-width:960px; height:100%; margin:0 auto; background:#fff; box-shadow: 0 0 9px rgba(0, 0, 0, 0.5); } h1, h2, h3, h4, h5, h6 { font-family:"Roboto", sans-serif; color:#505050; font-weight: normal; } h1 { font-size:26px; line-height:30px; } h2 { font-size:24px; line-height:34px; } h3 { font-size:22px; line-height:32px; } h4 { font-size:20px; line-height:30px; } h5 { font-size:18px; line-height:26px; } h6 { font-size:16px; line-height:24px; } /* top_bar */ .top_bar { width:100%; max-height:50px; background:#505050; border-top:2px solid #384E80; border-bottom:1px solid #373737; } .top_bar .email_block { margin-top:9px; } .top_bar .email_block span.icon { display:block; float:left; width:33px; height:26px; text-align:center; padding-top:7px; margin-right:1px; color:#384E80; background:#656565; font-size:18px; } .top_bar .email_block a.email { display:block; float:left; color:#e0e0e0; text-decoration:none; font-size:13px; background:#656565; padding:5px 8px 7px 8px; font-family:"Roboto"; } .top_bar .phone_block { margin-top:9px; } .top_bar .phone_block span.icon { display:block; float:left; width:33px; height:26px; text-align:center; padding-top:7px; margin-right:1px; color:#384E80; background:#656565; font-size:18px; } .top_bar .phone_block a.phone { display:block; float:left; color:#e0e0e0; text-decoration:none; font-size:13px; background:#656565; padding:5px 8px 7px 8px; font-family:"Roboto"; } .top_bar .social_icons { text-align:right; } .top_bar .social_icons a { display:inline-block; width:33px; height:33px; margin-top:9px; margin-bottom:2px; margin-right:5px; } .top_bar .social_icons a:hover { -o-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -khtml-transition:all 0.5s linear; } .top_bar .social_icons a:hover { -webkit-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear; } .top_bar .social_icons a.facebook { background:#656565 url('../images/social/facebook.png'); } .top_bar .social_icons a.facebook:hover { background:#384E80 url('../images/social/facebook.png'); } .top_bar .social_icons a.twitter { background:#656565 url('../images/social/twitter.png'); } .top_bar .social_icons a.twitter:hover { background:#384E80 url('../images/social/twitter.png'); } .top_bar .social_icons a.pinterest { background:#656565 url('../images/social/pinterest.png'); } .top_bar .social_icons a.pinterest:hover { background:#384E80 url('../images/social/pinterest.png'); } .top_bar .social_icons a.linkedin { background:#656565 url('../images/social/linkedin.png'); } .top_bar .social_icons a.linkedin:hover { background:#384E80 url('../images/social/linkedin.png'); } .top_bar .social_icons a.vimeo { background:#656565 url('../images/social/vimeo.png'); } .top_bar .social_icons a.vimeo:hover { background:#384E80 url('../images/social/vimeo.png'); } .top_bar .social_icons a.digg { background:#656565 url('../images/social/digg.png'); } .top_bar .social_icons a.digg:hover { background:#384E80 url('../images/social/digg.png'); } .top_bar .social_icons a.youtube { background:#656565 url('../images/social/youtube.png'); } .top_bar .social_icons a.youtube:hover { background:#384E80 url('../images/social/youtube.png'); } .top_bar .social_icons a.dribbble { background:#656565 url('../images/social/dribbble.png'); } .top_bar .social_icons a.dribbble:hover { background:#384E80 url('../images/social/dribbble.png'); } .top_bar .social_icons a.stumbleupon { background:#656565 url('../images/social/stumbleupon.png'); } .top_bar .social_icons a.stumbleupon:hover { background:#384E80 url('../images/social/stumbleupon.png'); } /* header */ .header { width:100%; border-bottom:2px solid #eee; } .header .logo { position:relative; margin-top:5px; } .header .logo span.slogan { position:absolute; top:7px; left:210px; color:#bbbaba; border-left:1px solid #e0e0e0; padding-left:17px; } .header .navigation { position:relative; height:88px; margin-top:-19px; } .header .navigation select { display:none; } .header .navigation ul#nav { position:absolute; top:0px; right:0; height:100%; } .header .navigation ul#nav li { width:auto; height:49px; min-width:85px; padding:0px 0px 33px 5px; margin-right:0; } .header .navigation ul#nav li a .icon { display:inline-block; font-size:16px; margin-right:5px; margin-bottom:5px; } .header .navigation ul#nav li a { display:block; text-align:center; padding-top:22px; padding-bottom:26px; font-size:14px; font-family:"PT Sans"; } .header .navigation ul#nav li.active a { background:url('../images/menu_active_bg.png'); border-bottom:2px solid #384E80 } .header .navigation ul#nav li a:hover { background:url('../images/menu_active_bg.png'); border-bottom:2px solid #4964A4 } .header .navigation ul#nav li a { color:#686868; font-size:14px; text-decoration:none; } .header .navigation ul#nav li.sfHover a.sf-with-ul { background:url('../images/menu_active_bg.png'); border-bottom:2px solid #4964A4 } .header .navigation ul#nav li.sfHover ul li a { background:#4964A4; } .header .navigation ul#nav li.sfHover ul li a.sf-with-ul { background:#4964A4; } .header .navigation ul#nav li ul li { padding:0; margin-bottom:-11px; text-align:left; border:none; } .header .navigation ul#nav li.sfHover ul li a { padding:10px; border:none; text-align:left; color:#fff; } .header .navigation ul#nav li.sfHover ul li a.sf-with-ul:after { position:absolute; content:"+"; right:7px; font-size:16px; } .header .navigation ul#nav li.sfHover ul li a:hover { border-bottom:none; background:rgba(255,255,255,0.3); } /* #FEATURED ================================================== */ .featured_block { width:100%; background:#f9f9f9 url('../images/_featured_bg.png'); border-bottom: 2px solid #EEEEEE; margin-bottom:30px } .featured_block .headings { margin-top:20px; } .featured_block .headings p { margin-bottom:20px; color:#8d8d8d; } .featured_block .breadcrumb { margin-top:35px; text-align:right; } /* breadcrumb */ .featured_block .breadcrumb { margin-top:39px; } .featured_block .breadcrumb ul { display:inline; background:#384E80; padding:7px 1px 7px 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .featured_block .breadcrumb ul li { display:inline-block; } .featured_block .breadcrumb ul li:after { content:""; padding-left:5px; padding-right:5px; color:#fff } .featured_block .breadcrumb ul li:last-child:after { } .featured_block .breadcrumb ul li a { color:#fff; text-decoration:none; } .featured_block .breadcrumb ul li a:hover { text-decoration:underline; } .featured_block .breadcrumb ul li.active a { color:#fff; } .featured_block .breadcrumb ul li.active a:hover { text-decoration:none; } /* #HOMEPAGE ================================================== */ .slider { position:relative; width:100%; height:345px; background:#fefefe } .slider li { display:none; } .slider li .flex-caption { display:none; } .slider .flexslider { position:absolute; top:0; left:0; width:100%; height:345px; margin:0; padding:0; } .slider .flexslider.loading { background:#fcfcfc url('../images/loading.gif') no-repeat center; } .slider .flexslider .flex-control-paging { display:none; } .slider .flexslider .slides a { text-decoration:none; } .slider .flexslider .slides li { position:relative; height:345px; } .slider .flexslider .slides .flex-caption { position:absolute; left:12px; top:30px; width:390px; font-size:15px; padding:25px 10px 5px 0px; border-radius:4px; } .slider .flexslider .slides .flex-caption h2 { background:#384E80; color:#fff; margin-bottom:5px; padding:8px; font-size:27px; } .slider .flexslider .slides .flex-caption p { font-size:12px; line-height:16px; font-weight:normal; color:#fff; padding:15px; } .slider .flexslider .slides .flex-caption p { background:#505050; color:#fff; margin-right:25px; margin-left:0px; margin-bottom:38px; } .slider .flexslider .slides .flex-caption a.read_more { position:absolute; bottom:-2px; left:0; display:block; width:100px; height:18px; background:#384E80; } .slider .flexslider .slides .flex-caption a.read_more { padding:12px 5px 10px 10px; color:#fff; font-size:16px; font-weight:normal; } .slider .flexslider .slides .flex-caption a.read_more:before, .slider .flexslider .slides .flex-caption a.read_more:after { background-color:rgba(255, 255, 255, 0.07); border:medium none; content:""; height:55%; left:0; margin:0; position:absolute; top:0; width:100%; z-index:300 } .slider .flexslider .slides .flex-control-paging { position:absolute; top:25px; right:10px; list-style:none; } .slider .flexslider .slides .flex-control-paging li { float:left; margin-right:5px; } .slider .flexslider .slides .flex-control-paging li a { display:block; cursor:pointer; width:30px; height:5px; background:#fff; font-size:0; } .slider .flexslider .slides .flex-control-paging li a.flex-active { background:#86ae3f; } .slider .flexslider .slides .flex-direction-nav a { display:block; float:left; width:40px; height:45px; padding:5px 5px 5px 5px; font-size:0; } .slider .flexslider ul.flex-direction-nav a.flex-prev { display:block; position:absolute; width:25px; height:60px; background:#505050; left:0px; top:120px; font-size:37px; } .slider .flexslider ul.flex-direction-nav a.flex-prev { padding-top:20px; color:#fff; padding-right:16px; text-align:center; text-decoration:none; } .slider .flexslider ul.flex-direction-nav a.flex-prev { border-radius:0 90px 90px 0; -moz-border-radius:0 90px 90px 0; -webkit-border-radius:0 90px 90px 0; } .slider .flexslider ul.flex-direction-nav a.flex-prev:hover { background:#384E80; } .slider .flexslider ul.flex-direction-nav li a.flex-next { display:block; position:absolute; right:0px; top:120px; font-size:37px; text-align:center; padding-top:20px; color:#fff; padding-left:16px; text-decoration:none; } .slider .flexslider ul.flex-direction-nav li a.flex-next { height:60px; width:25px; border-radius: 90px 0 0 90px; -moz-border-radius: 90px 0 0 90px; -webkit-border-radius: 90px 0 0 90px; background:#505050; } .slider .flexslider ul.flex-direction-nav a.flex-next:hover { background:#384E80; } /* promo block */ .promo_block { width:100%; background:#fafafa; border-bottom:1px solid #f3f3f3; } .promo_block .promo { padding-top:15px; padding-bottom:15px; margin-top:5px; margin-bottom:0px; } .promo_block .promo h3 { color:#505050; } .promo_block .promo h3 span { color:#d59805; } .promo_block .promo .promo_text p { margin-bottom:10px; } .promo_block .promo .promo_buttons { margin-top:12px; text-align:right; } .promo_block .promo .promo_buttons a.button { border-radius:0; margin-right:-1px; } /* services */ .services { margin-top:30px; margin-bottom:40px; } .services .service { border-bottom:2px solid #384E80; text-align:center; padding-top:10px; padding:7px; padding-bottom:0; } .services .service { background:#fafafa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .services .service:hover { box-shadow:1px 1px 3px rgba(0,0,0,0.2); } .services .service h4 { margin-top:5px; } .services .service .icon { position:relative; display:block; width:45px; height:35px; background:#384E80; padding:25px 30px 35px 30px; color:#fff; font-size:44px; } .services .service .icon { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .services .service .icon { margin:8px auto; box-shadow:0px -2px 10px rgba(0,0,0,0.2); } .services .service .icon:after { position:absolute; top:0; left:0; width:100%; background-color: rgba(255, 255, 255, 0.07); border: medium none; content: "" } .services .service .icon:after { height:50%; margin:0; z-index:300; } .services .service a.more { background:#384E80; padding:7px 12px 4px 12px; color:#fff; text-decoration:none; } .services .service a.more { -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; } .services .service a.more { -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; } .services .service a.more { border-top-left-radius:3px; border-top-right-radius:3px; } /* recent work */ .recent_work { position:relative; background:#fafafa; border-top:1px solid #f3f3f3; border-bottom:1px solid #f3f3f3; margin-bottom:30px; padding-bottom:15px; } .recent_work #projects_carousel .heading { position:relative; margin-top:15px; background: rgba(0 url('../images/bg_lines.png') repeat-x left 0); margin-bottom:30px } .recent_work #projects_carousel .heading h2 { display:inline; background:#fafafa; margin-top:6px; margin-left:37%; color:#505050; text-align:center; padding:20px 30px 4px 30px; } .recent_work a.flex-prev, .recent_work a.flex-next { position:absolute; width:32px; height:30px; background:#e7e7e7; text-align:center; font-size:26px; text-decoration:none; color:#898989; } .recent_work a.flex-prev { top:22px; left:10px; } .recent_work a.flex-next { top:22px; right:10px; } .recent_work a.flex-prev:hover, .recent_work a.flex-next:hover { background:#384E80; color:#fff; } .recent_work .project { position:relative; border-bottom:3px solid #384E80; padding:0px; background:#fff; } .recent_work .project { -webkit-border-bottom-right-radius:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-bottomleft:4px; } .recent_work .project { border-bottom-right-radius:4px; border-bottom-left-radius:4px; } .recent_work .project:hover { box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } .recent_work .project .details { margin-left:8px; margin-bottom:5px; } .recent_work .project .details a { color:#B1B1B1; font-size:13px; font-weight:bold; margin-right:10px; text-decoration:none; } .recent_work .project .details a:hover { color: #384E80; } .recent_work .project h4 { font-size:17px; } .recent_work .project a.img { overflow:hidden; display:block; max-height:220px; } .recent_work .project a.img img { width:100%; transition-duration:0.4s; -webkit-transition-duration:0.4s; -o-transition-duration:0.4s; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; } .recent_work .project a.img img { -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; } .recent_work .project a.img img { border-top-left-radius: 3px; border-top-right-radius: 3px; } .recent_work .project img:hover { background:#000; opacity:0.5; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); } .recent_work .project img:hover { -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .recent_work .project h4 { margin-left:7px; } .recent_work .project p.category { color:#384E80; font-weight:bold; margin-top:-5px; margin-left:7px; margin-bottom:5px; } .recent_work .project p.info { margin-top:-10px; margin-left:7px; } /* latest news */ .latest_news .news_item img { width:100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .latest_news .news_item img:hover { background:#000000; opacity:0.5; } .latest_news .news_item .date { font-weight:bold; font-style:italic; } .latest_news .news_item .description { margin-top:-15px; margin-bottom:10px; } .latest_news .news_item a.more { position:relative; display:inline-block; background:#384E80; color:#FFFFFF; margin-left:0; padding:5px 6px 5px 34px; } .latest_news .news_item a.more { text-decoration:none; text-transform:uppercase; height:20px; } .latest_news .news_item a.more .icon { position:absolute; top:0; left:0; width:25px; height:100%; max-height:22px; padding:8px 1px 0 1px; background:#384E80; } .latest_news .news_item a.more .icon { border-right:1px solid #F3F3F3; color:#FFFFFF; text-align:center; font-size:14px; } .latest_news .news_item a.more:hover { background:#666666; color:#FFFFFF; } /* featured clients */ .featured_clients { background:#fafafa;margin-top:40px; margin-bottom:-20px;pading-top:70px;padding-bottom:10px; } .featured_clients img { width:100%; max-width:211px; } /* #ABOUT ================================================== */ #about .our_mission img { width:100%; max-width:96.4%; } #about .dropcap { width:80px; } #about span.year_range { font-size:12px; } #about .our_team .team_member { background: none repeat scroll 0 0 #FAFAFA; border-bottom: 3px solid #384E80; padding: 0; /*border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;*/ border-radius:4px; padding-bottom:5px; } #about .our_team .team_member:hover { box-shadow:1px 1px 3px rgba(0,0,0,0.2); } #about .our_team .team_member img { width:100%; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; } #about .our_team .team_member img { -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; border-top-left-radius:4px; border-top-right-radius:4px; } #about .our_team .team_member img:hover { background:#000; opacity:0.3; } #about .our_team .team_member h4 { margin-left:8px; font-size:17px; } #about .our_team .team_member p.position { color: #384E80; font-weight: bold; margin:-5px 0 -2px 8px; } #about .our_team .team_member p.description { margin-left:8px; margin-right:5px; margin-bottom:5px; } #about .our_team .team_member .social_bar { margin-left:8px; } /* #SERVICES ================================================== */ #services .request_quote { background:#fafafa; border-radius:4px; border-bottom:3px solid #384E80; padding-top:5px; padding-bottom:5px; } /* #PRICING TABLE ================================================== */ table.pricing { border-collapse: separate; border-color: #DDDDDD; border-spacing:2px; table-layout:fixed; width:100%; border-radius:4px; } table.pricing thead tr.plan th { background:#505050; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#fff; font-size:25px; padding:20px; font-family:"Roboto"; } table.pricing thead tr.prices th { position:relative; background:#fafafa; padding:35px 5px 25px 5px; color:#384E80; font-size:34px; font-weight:bold; border-bottom:1px solid #f3f3f3; } table.pricing thead tr.prices th span { font-size:14px; } table.pricing tbody tr { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3); } table.pricing tbody tr td { background:#fff; color:#666; text-align:center; padding:10px; } table.pricing tbody tr:nth-child(2n) td { background:#fafafa; border-bottom:1px solid #eaeaea; } table.pricing tbody tr td .available { width:16px; height:16px; background:url('../images/available_icon.png') no-repeat center; margin-bottom:5px; margin-left:auto; margin-right:auto; margin-top:0 } table.pricing tbody tr td .not_available { width:16px; height:16px; background:url('../images/not_availabe_icon.png') no-repeat center; margin-bottom:5px; margin-left:auto; margin-right:auto; margin-top:0 } table.pricing tbody tr.signup td { background:#fafafa; border-bottom:2px solid #384E80; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } table.pricing tbody tr.signup td a.button { margin-top:15px; } /* #PORTFOLIO ================================================== */ .portfolio ul.sort { } .portfolio ul.sort li { float:left; margin-right:1px; margin-bottom:20px; } .portfolio ul.sort li a { display:block; padding:5px; text-decoration:none; background:#8c8c8c; padding:7px 15px 7px 15px; color:#fff; } .portfolio ul.sort li.current a { position:relative; background:#384E80; color:#fff; padding:7px 15px 7px 15px; text-align:center; } .portfolio ul.sort li.current a:after { border-left:0px solid; border-right:5px solid rgba(0; border-top:9px solid #384E80; border-bottom:0px solid; background:rgba(0 0 0); height: 0; left:40%; position: absolute; width: 0px; content:"";; 0) } .portfolio_sort .project { background:#fafafa; border-bottom: 3px solid #384E80; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .portfolio_sort .project:hover { box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } .portfolio_sort .project h4 { margin-left:10px; margin-bottom:4px; font-size:18px; } .portfolio_sort .project .details { margin-left:10px; margin-bottom:15px; } .portfolio_sort .project .details a { text-decoration:none; margin-right:10px; font-size:13px; color:#b1b1b1; font-weight:bold; } .portfolio_sort .project .details a:hover { color:#384E80; } .portfolio_sort .project .description { margin-left:10px; margin-bottom:20px; } .portfolio .columns4 a.img { max-height:131px; } .portfolio .columns3 a.img { max-height:179px; } .portfolio .columns2 a.img { max-height:277px; } .portfolio_sort .project a.img { position:relative; display:block; overflow:hidden; } .portfolio_sort .project a .project_img { width:100%; transition-duration: 0.4s; -webkit-transition-duration:0.4s; -o-transition-duration:0.4s; } .portfolio_sort .project a .project_img { -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; } .portfolio_sort .project a .project_img { -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } .portfolio_sort .project a .project_img { border-top-left-radius: 4px; border-top-right-radius: 4px; } .portfolio_sort .project a .project_img:hover { background:#000; opacity:0.5; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .portfolio .pagination { margin-top:20px; } .pagination a { float:left; display:block; width:20px; height:20px; background:#e7e7e7; margin-right:5px; text-align:center; border-radius:2px; } .pagination a { text-decoration:none; padding:4px 6px; -moz-transition: background-color 0.2s ease 0s; color:#666; font-size:14px; } .pagination a:hover, .pagination a.active { background:#384E80; color:#fff; } .pagination a.next { width:35px; } /* #TEAM ================================================== */ #team .team_members .team_member { background:#FAFAFA; border-bottom:3px solid #384E80; padding-bottom:5px; } #team .team_members .team_member { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #team .team_members .team_member:hover { box-shadow:1px 1px 3px rgba(0,0,0,0.2); } #team .team_members .team_member img { width:100%; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; } #team .team_members .team_member img { -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; border-top-left-radius:4px; border-top-right-radius:4px; } #team .team_members .team_member img:hover { background:#000; opacity:0.3; } #team .team_members .team_member h4 { margin-left:8px; font-size:17px; } #team .team_members .team_member p.position { color: #384E80; font-weight: bold; margin:-5px 0 -2px 8px; } #team .team_members .team_member p.description { margin-left:8px; margin-right:5px; margin-bottom:5px; } #team .team_members .team_member .social_bar { margin-left:8px; } #team .technologies .block { text-align:center; padding-top:6px; } /* #BLOG ================================================== */ .blog_content .post:hover { box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.2); } .blog_content .post .pic { position:relative; } .blog_content .post .pic a.img { display:block; overflow:hidden; max-height:288px; margin-bottom:7px; } .blog_content .post .pic img{ width:100%; -webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px; } .blog_content .post .pic img{ -moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px; } .blog_content .post .pic img{ border-top-left-radius: 4px;border-top-right-radius: 4px; } .blog_content .post .pic img { transition-duration: 0.4s; -webkit-transition-duration:0.4s; -o-transition-duration:0.4s; } .blog_content .post .pic img:hover { background:#000; opacity:0.5; } .blog_content .post .pic img:hover { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .blog_content .post .pic .post_details { position:absolute; bottom:0; left:-7px; width:100%; max-width:570px; height:30px; padding-top:10px; padding-left:10px; background:#384E80; } .blog_content .post .pic .post_details:before { position:absolute; top:0; left:0; width:100%; height:50%; content:""; margin:0; z-index:300 } .blog_content .post .pic .post_details:before { background-color:rgba(255, 255, 255, 0.07); border:none; } .blog_content .post .pic .post_details .angle { position:absolute; bottom:-6px; left:0; width:7px; height:6px; background:url('../images/blogpost_details_angle.png') no-repeat; } .blog_content .post .pic .post_details a { padding-left:21px; color:#fff; text-decoration:none; margin-right:15px; padding-bottom:5px; } .blog_content .post .pic .post_details a.date { background:url('../images/date.png') no-repeat; padding-top:2px } .blog_content .post .pic .post_details a.user { background:url('../images/user.png') no-repeat; padding-top:2px } .blog_content .post .pic .post_details a.category { background:url('../images/category.png') no-repeat; padding-top:1px } .blog_content .post .pic .post_details a.comments { background:url('../images/comments.png') no-repeat; padding-top:2px } .blog_content .post .content { background:#fafafa; margin-top:-6px; padding-bottom:20px; border-bottom:3px solid #384E80; padding:15px; } .blog_content .post .content { -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; } .blog_content .post .content { -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; } .blog_content .post .content { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .blog_content .post .content h4 { margin-top:5px; } .blog_content .post .content a.more { position:relative; display:inline-block; background:#384E80; color:#FFFFFF; margin-left:0; padding:5px 6px 5px 34px; } .blog_content .post .content a.more { text-decoration:none; text-transform:uppercase; height:20px; } .blog_content .post .content a.more .icon { position:absolute; top:0; left:0; width:25px; height:100%; max-height:22px; padding:8px 1px 0 1px; background:#384E80; } .blog_content .post .content a.more .icon { border-right:1px solid #F3F3F3; color:#FFFFFF; text-align:center; font-size:14px; } .blog_content .post .content a.more:hover { background:#666; color:#fff; } .blog_content .pagination { margin-top:20px; } .blog_sidebar ul.categories {} .blog_sidebar ul.categories li { border-bottom:1px dotted #dcdcdc; padding-bottom:5px; } .blog_sidebar ul.categories li a { text-decoration:none; color:#666; font-size:13px; } .blog_sidebar ul.categories li a:hover { color:#384E80; } .blog_sidebar ul.categories li a span.icon { float:right; font-size:13px; } .blog_sidebar ul.archive {} .blog_sidebar ul.archive li { border-bottom:1px dotted #dcdcdc; padding-bottom:5px; } .blog_sidebar ul.archive li a { text-decoration:none; color:#666; font-size:13px; } .blog_sidebar ul.archive li a:hover { color:#384E80; } .blog_sidebar ul.archive li a span.icon { float:right; font-size:13px; } .blog_sidebar .tag_cloud a { display:block; float:left; background:#666; color:#fff; padding:4px; margin-right:5px; margin-bottom:5px; text-decoration:none; } .blog_sidebar .tag_cloud a:hover { background:#384E80; } /* #BLOG POST ================================================== */ #blog_post .blog_content .comments { margin-top:20px; } #blog_post .blog_content .comments .comment { padding-top:10px; } #blog_post .blog_content .comments .comment .pic img { border-radius:50%; width:90px; height:90px; margin-left:5px; } #blog_post .blog_content .comments .comment .comment_text span.date { font-style:italic; font-weight:bold; color:#384E80; } #blog_post .blog_content .comments .comment .comment_text p { margin-top:15px; } #blog_post .blog_content .leave_reply input[type="text"] { max-width:390px; } #blog_post .blog_content .leave_reply input[type="text"], textarea { width:97%; } #blog_post .blog_content .leave_reply #send_comment:hover { position:relative; background:#384E80; color:#fff; text-shadow:none; border:1px solid #b2810d; } #blog_post .blog_content .leave_reply #send_comment:after { position:absolute; top:0; left:0; width:100%; background-color: rgba(255, 255, 255, 0.07); border: medium none; content: ""; height:50%; margin:0; z-index:300 } /* #CONTACT ================================================== */ #contact #map { border:5px solid #FFFFFF; box-shadow:0 0 4px #727272; margin-bottom:5px; } #contact #map iframe { margin-bottom:-5px; } #contact .contact_form #responce .contact_error li { color:#CC092F; margin-bottom:0; } #contact .contact_form #responce .contact_success li { color:green; margin-bottom:0; } #contact .contact_form input[type="button"]:hover { position:relative; background:#384E80; color:#fff; text-shadow:none; border:1px solid #b2810d; } #contact .contact_form input[type="button"]:hover:after { position:absolute; top:0; left:0; width:100%; background-color: rgba(255, 255, 255, 0.07); border: medium none; content: ""; height:50%; margin:0; z-index:300 } #contact .contact_details .office { padding:15px 15px 5px 15px; background:#f5f5f5; margin-bottom:10px; } #contact .contact_details .office .divider { width:100%; height:1px; background:#d2d2d2; border-bottom:1px solid #fff; } #contact .contact_details .office ul.address { background: url('../images/contact_address_icon.png') no-repeat; padding-left:22px; margin-top:7px } #contact .contact_details .office ul.phone { background: url('../images/contact_phone_icon.png') no-repeat; padding-left:23px; margin-top:-5px } #contact .contact_details .office ul.email { background: url('../images/contact_email_icon.png') no-repeat center left; padding-left:23px; margin-top:-5px; margin-bottom:7px } /* #FOOTER ================================================== */ #footer { position:relative; width:100%; background:url('../images/footer_bg.png'); margin-top:20px; color:#e0e0e0; padding-top:30px } #footer .footer .heading { position:relative; background:#384E80; color:#FFF; padding:7px 5px 7px 10px; font-size:13px; margin-bottom:25px; font-family:"Roboto"; } #footer .footer .heading { -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } #footer .footer .heading:after { background-color: rgba(255, 255, 255, 0.10); border: medium none; content: ""; left: 0; position: absolute; top: 0; width: 100%; height:20px } #footer .footer .heading .arrow { border-left:6px solid transparent; border-right:6px solid transparent; border-top:10px solid #384E80; border-bottom:0px solid transparent; position:absolute; bottom:-10px; left:12px; width:18px; height:14px; background: 0 0; height: 0; width: 0 } #footer .footer .powered_by ul li { border-bottom:1px dotted #676767; padding-bottom:4px; padding:5px; } #footer .footer .powered_by ul li:hover { background:#384E80; } #footer .footer .powered_by ul li a { color:#fff; font-size:13px; text-decoration:none; margin-left:15px; } #footer .footer .powered_by a .icon { padding-right:10px; font-size:19px; color:#f3f3f3; } #footer .footer .contact_us {} #footer .footer .contact_us ul { margin:0; padding:0; list-style:none; } #footer .footer .contact_us ul li { border-bottom:none; color:#CCCCCC; padding-left:55px; padding-top:5px; padding-bottom:5px; } #footer .footer .contact_us ul li a { color:#e0e0e0; text-decoration:none; } #footer .footer .contact_us ul li a:hover { text-decoration:underline; } #footer .footer .contact_us ul li.address { background: rgba(0 url('../images/address_icon.png') no-repeat left 0); } #footer .footer .contact_us ul li.email { background: rgba(0 url('../images/email_icon.png') no-repeat left 0); } #footer .footer .contact_us ul li.phone { background: rgba(0 url('../images/phone_icon.png') no-repeat left 0); } #footer .footer .contact_us ul li.website { background: rgba(0 url('../images/website_icon.png') no-repeat left 0); } #footer #twitter_feed a { color:#384E80; } #footer .footer ul#flickr_feed li { float:left; margin-right:7px; } #footer .footer ul#flickr_feed li img { width:60px; height:60px; padding:1px; border:2px solid #505050; } #footer .footer ul#flickr_feed li img:hover { border:2px solid #384E80; } #footer #sub_footer { position:relative; width:100%; background:#505050; margin-top:35px; border-top:2px solid #384E80; } #footer #sub_footer a.back_to_top { position:absolute; display:block; width:60px; height:24px; top:-24px; left:48%; background:#384E80; margin-left:auto; margin-right:auto; } #footer #sub_footer a.back_to_top { text-align:center; color:#fff; font-size:22px; text-decoration:none; } #footer #sub_footer .footer_text { margin-top:14px; margin-bottom:12px; } #footer #sub_footer .social_bar ul { max-height:27px; float:right; } #footer #sub_footer .social_bar ul.social_icons li { display:inline; } /* #Media Queries ================================================== */ @media only screen and (min-width: 960px) { .top_bar, .header, .promo_block, .featured_block, .slider, .recent_work, .featured_clients, #footer { width:100%; min-width:970px; } } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .top_bar, .header, .promo_block, .featured_block, .slider, .recent_work, .featured_clients, #footer { width:100%; min-width:776px; } .top_bar .email_block a.email { font-size:11px; } .top_bar .phone_block a.phone { font-size:11px; } #blog .blog_content .post .pic .post_details { max-width:495px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .top_bar { max-height:200px; } .top_bar .social_icons { text-align:left; } .header .logo {text-align:center; padding-top:20px; } .header .navigation ul#nav { display:none; } .header .navigation select { display:block; position:absolute; top:40px; right:0px; width:100%; height:30px; padding:5px; } .top_bar .email_block a.email { width:88%; } .top_bar .phone_block a.phone { width:88%; } .featured_block .breadcrumb ul { float:left; max-height:20px; margin-top:-40px; } .promo_block .promo .promo_buttons { text-align:left; } .services .service { margin-bottom:20px; } .recent_work a.flex-prev { left:0; } .recent_work a.flex-next { right:0; } .recent_work #projects_carousel .heading h2 { padding:20px 14px 4px; margin-left:28%; } .recent_work .project { margin-bottom:20px; } .latest_news .news_item { margin-bottom:20px; } .latest_news .news_item:last-child { margin-bottom:40px; } .featured_clients .client { text-align:center; margin-bottom:10px; } /* about us */ #about .skills { margin-bottom:30px; } #about .team_member { margin-bottom:20px; } /* services */ #services .divider { margin-bottom:20px; } #services .services .service { margin-bottom:20px; } #blog .blog_content .post { margin-bottom:20px; } #blog .blog_content .post .pic .post_details { max-width:395px; } #blog .blog_content .post .pic .post_details a { margin-right:5px; } #blog .blog_content .pagination { margin-bottom:25px; } /* portfolio */ .portfolio ul.sort li a { padding:7px 7px; } .portfolio .project { margin-bottom:20px; } .portfolio_sort .project a.img { min-height:220px; } /* shortcodes */ .shortcodes_progress_bars { padding-bottom:20px; } .shortcodes_accordion { padding-bottom:20px; } #team .team_members .team_member { margin-bottom:20px; } #team .technologies .block { margin-bottom:20px; } #team .technologies .block img { max-width:130px; } #footer #sub_footer .social_bar ul { float:left; margin-top:-5px; padding-bottom:5px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; }