/* 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; }
.doright { float: right; }.doleft { float: left; }

/*----------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; }
.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; color: #fff; }
.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; color: #fff; }
.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; }
.fontred { color: #c53238; }

.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: 35%; height: 80px; position: absolute; top: 0px; left: 25%; padding: 0 0 0 5%; z-index: 99; text-align: center; vertical-align: middle; }
.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: 28%; 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_input_h { width: 48%; float: left; padding: 12px 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; }

.textaligen { text-align: center; }

/* 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%; }
}