/* CSS Reset /*-----------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */ /* General Setup /*-----------------------------------------------------------------------------------*/ html{ height:100%;} body{font-family:Arial, Helvetica, sans-serif;padding:0;font-size:12px;margin:0 auto;height: 100%;position: relative;line-height:19px;} a, span.tag{ text-decoration:none;} a.view_details{padding:0 0 0 15px;} .swiper-container{ width:800px;height: 100%;} #header{ position:absolute; top:-100px; left:0px; z-index:9999; width:94%; height:40px;padding:6px 3%;} /* Headings /*------------------------------------------*/ h1, h2, h3, h4, h5, h6{font-weight:normal; margin:0px;padding:10px 0 20px 0;clear:both; letter-spacing:-1px;} h1{ font-size:30px;} h2{ font-size:26px;} h3{ font-size:22px;} h4{ font-size:18px;} h5{ font-size:14px;} h6{ font-size:12px;} p{ padding:0 0 10px 0; margin:0px;} h2.page_title{ font-size:30px;padding:0 0 20px 0;} /* Border radius /*------------------------------------------*/ .radius4{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .radius6{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .radius8{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;} .radius20{-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;} /*----------bottom bullets pagination---------------*/ .pagination {position: absolute;z-index: 20;left:0px;bottom:5px;text-align:center;width:100%;} .swiper-pagination-switch {display: inline-block;width:12px;height:3px;background: #222;margin-right: 5px;opacity: 0.5;cursor: pointer;} .swiper-active-switch {background: #fff;} /*----------header and footer buttons---------------*/ .gohome{ width:40px; height:40px; float:left;} .gohome a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;} .gohome a img{display:inline-block;max-height:25px; margin:5px 0 0 0;} .gomenu{ width:40px; height:40px;float:right;} .gomenu a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;} .gomenu a img{display:inline-block;max-height:25px; margin:6px 0 0 0;} .scrolltop{ width:40px; height:40px;margin:auto; display:block;} .scrolltop a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;} .scrolltop a img{display:inline-block;max-height:28px; margin:5px 0 0 0;} /*----------page buttons---------------*/ a.button_12{ width:48%; margin:0 1% 10px 1%;padding:10px 0; float:left; display:block;font-size:18px; text-decoration:none; text-align:center;} a.button_11{ width:98%; margin:0 0 10px 1%;padding:10px 0; float:left; display:block;font-size:18px; text-decoration:none; text-align:center;} .green{ background-color:#85af5d;} .blue{ background-color:#29aae3;} .darkblue{ background-color:#035792;} .red{ background-color:#c53238;} .purple{ background-color:#8b2767;} .pink{ background-color:#f87c68;} .orange{ background-color:#f17225;} .black{ background-color:#272625;} .gray{ background-color:#6e6e6e;} .yellow{ background-color:#ffb606;} .bluegreen{ background-color:#06a78b;} .green_borderbottom{border-bottom:3px #759a51 solid;} .blue_borderbottom{border-bottom:3px #198bbd solid;} .red_borderbottom{border-bottom:3px #8e262c solid;} .purple_borderbottom{border-bottom:3px #671a4b solid;} .pink_borderbottom{border-bottom:3px #d36755 solid;} .orange_borderbottom{border-bottom:3px #c55512 solid;} .black_borderbottom{border-bottom:3px #000000 solid;} .gray_borderbottom{border-bottom:3px #535150 solid;} .yellow_borderbottom{border-bottom:3px #e3a000 solid;} .bluegreen_borderbottom{border-bottom:3px #058770 solid;} .darkblue_borderbottom{border-bottom:3px #003a62 solid;} /* Page layout and elements /*------------------------------------------*/ .image_single{ padding:5px; margin-bottom:10px;} .image_single img{display:block;max-width:100%;} .image_caption{ width:100%; text-align:center; color:#FFFFFF;padding:10px 0; font-size:18px;margin-bottom:10px;} blockquote{padding:10px 0; margin-bottom:10px;} span.quote_author{ font-style:normal; font-weight:bold; text-decoration:underline;} ul.listing{ list-style:none; padding:0 0 10px 0;} ul.listing li { padding:5px 0 5px 10px; margin:0 0 10px 10px; border-left:2px #ececec solid;} ul.listing_detailed{ list-style:none; padding:0 0 10px 0;} ul.listing_detailed li { padding:5px 0 5px 40px; margin:0 0 10px 0;} ul.listing_detailed li a{} /* Toggle /*------------------------------------------*/ .toogle_wrap{width:92%; padding:3% 4%; margin:0 0 10px 0;} .trigger{padding:0px;margin:0;} .trigger a{text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-weight:normal; } .toggle_container{overflow: hidden;padding:15px 0 0 0;clear: both;} .toogle_wrap_blog{width:92%; padding:3% 4%; margin:0 0 10px 0;} .trigger_blog{padding:0px;margin:0;} .trigger_blog a{text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-weight:normal; } .toggle_container_blog{overflow: hidden;padding:15px 0 0 0;clear: both;} /* Tabs /*------------------------------------------*/ ul.tabsmenu{ padding:0; position:relative; bottom:-1px;} ul.tabsmenu li a{ width:31.2%; float:left; padding:12px 0 12px 0; margin:0 2% 0 0;text-align:center;} ul.tabsmenu li:last-child a{ float:right; margin:0 0 0 0;} ul.tabsmenu li.active a{font-weight:bold;} .tabcontent{ padding:5% 4%; clear:both; margin:0 0 10px 0;} /*-----------------Photo Gallery style-------------------*/ ul.photo_gallery_13{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;} ul.photo_gallery_13 li{ width:28.6%; padding:1%; float:left; margin:1%;} ul.photo_gallery_13 li img{ max-width:94%; display:block; padding:3%;} ul.photo_gallery_13_round{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;} ul.photo_gallery_13_round li{ width:28.5%; padding:1%; float:left; margin:1%;} ul.photo_gallery_13_round li img{ max-width:100%; display:block;} ul.photo_gallery_12{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;} ul.photo_gallery_12 li{ width:45.3%; padding:1%; float:left; margin:1%;} ul.photo_gallery_12 li img{ max-width:96%; display:block;padding:2%;} ul.photo_gallery_11{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;} ul.photo_gallery_11 li{ width:99.5%; padding:0; float:left; margin:0px 0 10px 0;} ul.photo_gallery_11 li img{ max-width:96%; display:block;padding:2%;} /*-----------------Blog posts style-------------------*/ ul.posts{ padding:0px; margin:0px; width:100%; display:block;} ul.posts li.post{ width:100%; height:80px; margin:0 0 10px 0; position:relative;} .post_left{width:25%; height:80px; text-align:center;position:absolute; top:0px; left:0px; } span.day{ display:block; font-size:40px; padding:15px 0 0 0;} span.month{ display:block; font-size:22px; padding:10px 0 0 0;} .post_right_reveal{width:60%; height:80px; position:absolute; top:0px; left:25%;padding:0 0 0 5%; z-index:99;} .post_right_unreveal{width:60%; height:80px; position:absolute; top:0px; left:25%;padding:0 0 0 5%; z-index:88; line-height:24px;font-size:14px;} .post_right_reveal h4{ padding:10px 10px 0 0; font-size:16px; line-height:20px;} .post_right_unreveal a{font-weight:bold;} a.post_more{display:block;position:absolute; top:0px; right:0px; width:10%; height:80px;overflow:hidden;} span.post_comments{ display:block; padding:0 0 0 25px;} a.post_readmore{ padding:0 0 0 15px;font-weight:normal; font-size:12px;} #loadMore{width:92%; padding:3% 4%; margin:0 0 10px 0; text-align:center; font-size:14px; display:block; cursor:pointer;} #showLess{width:92%; padding:3% 4%; margin:0 0 10px 0; text-align:center; font-size:14px; display:none;} a.backtoblog{width:92%; padding:3% 4%; margin:-10px 0 15px 0; text-align:center; font-size:14px; display:block; cursor:pointer;} .comment_row{ width:100%; float:left; clear:both; padding:0 0 5px 0; margin:0 0 10px 0;} .comm_avatar{float:left;} .comm_avatar img{ display:block; width:50px; height:50px;} .comm_content{ float:left; width:75%; padding:0 0 0 5%; } /*-----------------Video page style-------------------*/ .videocontainer{ max-width:96%; padding:2%; display: block; margin:0 0 10px 0;} /*-----------------Portfolio style-------------------*/ .portfolio_item{width:94%; padding:3%; margin:0 0 10px 0; float:left; clear:both;} .portfolio_image{ width:30%; float:left;} .portfolio_image img{ display:block; max-width:100%;} .portfolio_image_round{ width:30%; float:left;} .portfolio_image_round img{ display:block; max-width:100%;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;} .portfolio_details{ width:65%; float:left; padding:0 0 0 5%;} .portfolio_details h4{ padding:0 0 5px 0;} .portfolio_details p{ padding:0 0 5px 0; line-height:18px;} /*-----------------Service page style-------------------*/ .service_box{ width:100%; float:left; clear:both; padding:0 0 5px 0;margin:0 0 10px 0;} .services_icon{ padding:6% 0; width:28%;height:auto; float:left; display:block; text-align:center;} .services_icon img{ display:block; max-width:70%; margin:auto;} .service_content{ float:left; width:67%; padding:0 0 0 4%;} .service_content h4{ padding:0px 0 10px 0;} /*-----------------Clients page style-------------------*/ .client_row{width:100%; float:left; clear:both; padding:0 0 5px 0;margin:0 0 10px 0;} /*-----------------Responsive table-------------------*/ ul.responsive_table{ width:100%; float:left; clear:both; margin:0 0 10px 0; padding:0px; list-style:none;} li.table_row{width:100%; float:left; clear:both; line-height:30px;padding:0px; list-style:none;margin:0 0 1px 0;} .table_section_small{width:18%; float:left; padding:0 0 0 2%;} .table_section{ width:38%; float:left;padding:0 0 0 2%;} /*-----------------Latest tweets style-------------------*/ .tweet{ width:100%; float:left; clear:both; margin:0;} .tweet ul { list-style:none;} .tweet li{width:94%; padding:3%; margin:0 0 10px 0; float:left; clear:both;} .tweet li a{ font-weight:bold;} /* Form /*------------------------------------------*/ .form{padding:0 0 15px 0;} .form label{padding:0 0 3px 0; display:block; font-size:16px;font-weight:normal;} .form label.error{padding:10px 0 0 0; width:100%; text-align:left; font-size:14px;} .form_input{padding:3%; width:93%; margin:0 0 5px 0;} .form_textarea{padding:3%; width:93%; height:50px; margin:0 0 5px 0;} .form_submit{ width:100%;padding:4% 0 4% 0; margin:0; font-weight:normal;text-align:center; cursor:pointer; font-size:20px; border-left: none;border-right: none;border-top: none; cursor:pointer; } ul.social{ list-style:none; padding:0px; margin:0px 0 15px 0; width:100%;} ul.social li{ list-style:none; margin:1% 0 2% 4%; padding:6.5% 0; width:28%;height:auto; float:left; display:block; text-align:center;} ul.social li img{ display:inline-block;max-width:50%;} li.social_facebook{ background-color:#3f5aa9;} li.social_twitter{ background-color:#29aae3;} li.social_google{ background-color:#f2b700;} li.social_pinterest{ background-color:#d3172f;} li.social_flickr{ background-color:#90489c;} li.social_digg{ background-color:#8aaf50;} a.call_button{ float:left; clear:both; width:94%; display: block; text-align:center; font-size:18px; padding:12px 3%; margin:0 0 15px 0; } a.map_button{ float:left; clear:both; width:94%; display: block; text-align:center; font-size:18px; padding:12px 3%; margin:0 0 15px 0; } /* CSS Media Queries /*-----------------------------------------------------------------------------------*/ @media screen and (max-width: 800px) { .swiper-container{ width:100%;} .services_icon{ padding:4.5% 0;} } @media screen and (max-width: 480px) { .round_img{padding:15% 0px;} ul.social li{padding:6% 0;} .services_icon{padding:4.3% 0;} } @media screen and (max-width: 360px) { .services_icon{padding:4.5% 0;} } @media screen and (max-width: 320px) { .borders ul li{padding:4% 0.1%;width:27%;} }