/*
Theme Name: Square Grid
Theme URI: http://themeforest.net/item/bulsarah-business-creative-theme-powerful-seo/2688110?ref=themeton
Description: A Premium Responsive Theme for Portfolio and Creative
Author: ThemeTon
Author URI: http://www.themeton.com
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Version: 2.0
*/
/*
-------------------------
Stylesheet Guide
-------------------------
    01. GLOBAL
        1. HTML5 display-role reset for older browsers
        2. TYPOGRAPHY
        3. =WordPress Core
        4. BLOCKQUOTE
        5. LINKS
        6. LISTS
        7. TRANSITIONS 
    02. SITE STYLES
        1. HEADER
        2. FOOTER PARTS
        3. 404.php        
    03. ENTRY STYLES
    04. ENTRY additional
        1. JCycle
        2. IMAGE OVERLAY
    05. CONTACT FORM
    06. ISOTOPE
    07. SMALL ITEM
         01. shape11 and general
         02. shape21
         03. shape12
         04. shape22
         05. shape23
         06. Other
    08. COMMENT FORM
    09. SCROLL BAR
    10. JPLAYER SKIN
    11. DARK SKIN
    12. BLOG PAGE
    13. POST SOCIALS
    14. MEDIA QUERIES
*/

/*	01. GLOBAL
----------------------------------------------------------
----------------------------------------------------------*/
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
img{max-width: 100%; height: auto !important;}
/*	1. HTML5 display-role reset for older browsers
----------------------------------------------------------*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
body{line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    color: #646669;
    font: 12px/18px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    background: #f5f5f5 url(images/bg/bg6.jpg) fixed left top;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}
/*	2. TYPOGRAPHY
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;

}
h1 a { font-weight: bold; color: #d7df23; }
h1 { font-size: 16px; font-weight: bold; line-height: 18px; margin-bottom: 12px; margin-top: 14px; }
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px;}
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px;}
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px;}
h5 { font-size: 17px; line-height: 24px;}
h6 { font-size: 14px; line-height: 21px; margin-bottom: 10px;}
h7 { font-size: 11px; line-height: 9px; margin-bottom: 10px;}
h8 { font-size: 12px; line-height: 12px; margin-bottom: 10px; color: #d7df23; }

.subheader { color: #777; }
p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }
cite, em, i { font-style: italic; }
strong { font-weight: bold;}
small { font-size: 100%; }
::selection {
    background: #000;
    color: white;
    text-shadow: none;
}
sup {bottom: 1ex;}
sub {top: .5ex;}
sup, sub {
    font-size: 10px;
    height: 0;
    line-height: 1;
    position: relative;
    vertical-align: baseline;
}
abbr, acronym, dfn {
    border-bottom: 1px dotted #666;
    cursor: help;
}
code, kbd {font: 12px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}
s, strike, del {text-decoration: line-through;}
ins {
    background: #fff;
    text-decoration: none;
}
.dark ins {background: #292929;}
.commentlist .bypostauthor {}
.sticky {}
.to-top{display: none;}
/*  3. =WordPress Core
-------------------------------------------------------------- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float:left; margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto; }
a img.alignright { float:right; margin: 0px 0 20px 20px; padding: 5px; background: #f9f9f9;}
.dark a img.alignright {background: #292929;}
a img.alignnone { padding: 5px; background: #f9f9f9;}
a img.alignleft { float:left; margin: 0px 20px 20px 0; padding: 5px; background: #f9f9f9; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 5px; background: #f9f9f9;}
img.image-border { padding: 5px; background: #fefefe;}
.wp-caption { background: #fff; padding: 5px 0px; text-align: center; }
.wp-caption {
    padding: 5px;
    padding-top: 10px;
}
.dark .wp-caption, .dark a img.alignright, .dark a img.alignleft, .dark a img.alignnone,  .dark a img.aligncenter {background-color: #292929;}
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption.aligncenter { margin-bottom: 20px; }
.wp-caption img { border: 0 none; height: auto; margin:0; max-width: 100%; padding:0px;}
.wp-caption p.wp-caption-text { font-size:11px; font-style: italic; line-height:17px; margin:0; padding:5px 0px;}

/*	4. BLOCKQUOTE
----------------------------------------------------------*/
blockquote, blockquote p { font-size: 17px; line-height: 24px; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; }
blockquote { margin: 20px; padding: 9px 20px 0 19px; }
blockquote cite { display: block; font-size: 14px; color: #555; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-style: normal; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
blockquote.alignleft {
    width: 220px;
    float: left;
}
blockquote.alignright {
    width: 220px;
    float: right;
}
hr { border: solid #ccc; border-width: 1px 0 0; clear: both; margin: 10px 0 20px; height: 0; }
.dark #page hr {border-color: #ccc;}
pre {
    background: #F4F4F4;
    font: 12px "Courier 10 Pitch", Courier, monospace;
    line-height: 1.5;
    margin-bottom: 1.625em;
    overflow: auto;
    padding: 0.75em 1.625em;
}
.dark #page pre {background: #292929;}
/*  5. LINKS
----------------------------------------------------------*/
a, a:visited { color: #d7df23; text-decoration: none; outline: 0;}
a:hover, a:focus { color: #d7df23;}
p a, p a:visited { line-height: inherit; }
/*  6. LISTS
----------------------------------------------------------*/
ul, ol { margin-bottom: 20px; }
ul { list-style: inherit; }
ol { list-style: disc outside; list-style-type: decimal;}
ol ol {list-style: upper-alpha;}
ul, ol, ul.square, ul.circle, ul.disc { margin-left: 25px; }
ul ul, ul ol, ol ol, ol ul { margin: 0px 0 0px 25px;}
/*	7. TRANSITIONS
----------------------------------------------------------*/
a {
    -moz-transition: all 0.2s linear 0.1s;
    -webkit-transition: all 0.2s linear 0.1s;
    -o-transition: all 0.2s linear 0.1s;
    transition: all 0.2s linear 0.1s;
}

/*	02. SITE STYLES
----------------------------------------------------------
----------------------------------------------------------*/
/*  1. HEADER
----------------------------------------------------------*/
#header {margin: 50px 0 0 0;}
#header .row{margin-bottom: 50px;}
.site-name {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 0px;
    text-shadow: none;
    letter-spacing: -1px;
}
.site-description {
    font-size: 11px;
    line-height: 14px;
    color: #ff0000;
    text-shadow: none;
    margin-top: 5px;
}
.top-float {
    width: 640px;
    float: right;
}
.top-nav, .top-social{
    margin: 0 2px;
    width: 156px;
    float: left;
    padding-top: 15px;
    border-top: 1px solid #333;

}
.branding {
    margin: 0 2px;
    width: 400px;
    float: left;
    padding-top: 15px;
    border-top: 1px solid #333;
}
.top-nav ul, .top-social ul {
    list-style: none;
    margin: 0;
}
.top-nav ul li a, .top-social ul li a {
    font-size: 10px;
    font-weight: bold;
    color: #000;
}
.top-nav ul li a:hover, .top-social ul li a:hover {color: #666;}
.sub-menu li {
    padding-left: 10px;
    background: transparent url('images/sub-menu.png') no-repeat left center;	
}
.top-text {
    float: left;
    margin: 0 2px;
    width: 316px;
    padding-top: 15px;
    border-top: 1px solid #333;
}
.top-text p{margin-bottom: 0;}
.top-nav ul li a{text-transform: uppercase;}
#logo a img.logo-img{max-width:none}

/*	2. FOOTER PARTS
----------------------------------------------------------*/
#footer {
    padding: 80px 0;
    font-size: 8px;
    line-height: 0px;
}
.footer-column{
    padding: 0px;
    text-align: left;
    width: 316;
    float: top;
    margin: 0px;

}
.copyright{
    text-align: left;
    float: top;
}
.credits {
    text-align: right;
    float: top;
	font-size: 8px;
}
/*  3. 404.php
-----------------------------------------------------------*/
#not-found{
    display: none;
    z-index: 1000;
    background: #000;
    color: #FFF;
    padding: 20px 0;
    width: 100%;
    text-align: center;
    top: 0;
    opacity: 0.8;
}
#not-found h1 {
    text-transform: uppercase;
    font-size: 24px;
    line-height: 14px;
    margin-bottom: 10px;
    color: #FFF;
}
#not-found p {
    font-style: italic;
    font-size: 11px;
    margin-bottom: 0px;
}
#not-found .screen-reader-text {
    display: none;
}
.not-found-close{
    cursor: pointer;
    background-image: url('images/btnClose404.png');
    width: 31px;
    height: 31px;
    position: relative;
    float: right;
    margin-top: -112px;
}
/*	03. ENTRY STYLES
----------------------------------------------------------
----------------------------------------------------------*/
.entry-image{display: block;}
.preload {
    opacity:0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}
.entry-image a {
    display: block;
    position: relative;
    float: left;
}
.entry-image img{float: left;}
.entry-content p:last-child {margin-bottom: 30px;}
.post-category a{
    color: #666;
    font-size: 11px;
    line-height: 15px;
}
.post-category a:hover{color: #ff0000;}
.hover-content {
    overflow: hidden;
    position: relative;
    background: url(images/progress.gif) no-repeat center center #ffffff;
}
.entry-image-slide{overflow: hidden;}
ul.nav {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99;
    list-style: none;
}
ul.nav li{
    float: left;
    height: 30px;
    width: 30px;
    background: #000;
    opacity: .6;
    cursor: pointer;
}
ul.nav li:hover {opacity: 1;}
ul.nav li.nav_prev {background: url('images/slider-prev.png') no-repeat left top;}
ul.nav li.nav_next {background: url('images/slider-next.png') no-repeat left top;}
.row::after {clear: both;}
.row::before, .row::after {
    display: table;
    content: "";
}
/*	04. ENTRY additional
----------------------------------------------------------
----------------------------------------------------------*/
.post-category {
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    color: #666;
}
/*  1. JCycle
---------------------------------------------------------*/
.hover-content ul.jcycle-pager, .content-slider ul.jcycle-pager {
    list-style: none !important;
    margin: 0px !important;
    padding: 0px !important;
    position:absolute;
    bottom:10px;
    left:6px;
    z-index:999;}
.hover-content ul.jcycle-pager li, .content-slider ul.jcycle-pager li {
    padding-top: 3px;
    border-bottom: none !important;
    float: left;
    margin: 0px;
    margin-bottom:5px;
    height:8px;}
.hover-content ul.jcycle-pager li a, .content-slider ul.jcycle-pager li a {
    background: url(images/slider-bg.png) no-repeat center center transparent;
    display:block;
    float:left;
    height:8px;
    margin-right:5px;
    text-indent:-5000px;
    width:8px;
    cursor: pointer;
    margin: 4px;
    margin-right: 0px;
}
.hover-content ul.jcycle-pager li.activeSlide a, .content-slider ul.jcycle-pager li.activeSlide a {
    background: url(images/slider-bg-active.png) no-repeat center center transparent;
    display:block;
    float:left;
    height:8px;
    margin-right:5px;
    text-indent:-5000px;
    width:8px;
    cursor: pointer;
    margin: 4px;
    margin-right: 0px;
}
.large.item .large-info .jcycle-pager{display: none;}
/*	2. IMAGE OVERLAY
----------------------------------------------------------*/
.hover-image {
    overflow: hidden;
    display: block;
}
.hover-image .img-frame{position: absolute;}
.hover-image img{position: absolute;}
a.hover-image{
    cursor: pointer;
    width: 100%;
    position: relative;
    display: block;
}
.hover-image{
    height: 110px;
}
.image-overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0px;
}
.image-overlay .iconZoom{
    background: url(images/imgOverlay-Zoom.png) no-repeat right bottom;
    height: 100%;
    width: 100%;
}
.image-overlay .iconPlay{
    background: url(images/imgOverlay-Play.png) no-repeat right bottom;
    height: 100%;
    width: 100%;
}
.image-overlay .iconPost{
    background: url(images/imgOverlay-Post.png) no-repeat right bottom;
    height: 100%;
    width: 100%;
}
/*	05. CONTACT FORM
----------------------------------------------------------
----------------------------------------------------------*/
.overlabel-wrapper, .comment-form-comment{position: relative;}
label.overlabel {
    position:absolute;
    top:10px;
    left:10px;
    z-index:1;
    color:#999;
    width: 90%;
}
.center .label.overlabel {height: 90%;}
input, .textInput {
    border: 1px solid #F7F7F8;
    color: #B2B2B6;
    padding: 10px;
    background: white;
    border-color: #CFCFCF;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1) inset;
    box-shadow: 0 1px 3px rgba(0,0,0,.1) inset;
    color: #555;
    margin-bottom: 10px;
    width: 196px;
}
textarea.textInput {
    height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 424px;
}
.overlabel-wrapper.left, .overlabel-wrapper.right {
    width: 218px;
    float: left;
    margin-right: 10px;
}
.overlabel-wrapper.right {margin-right: 0px;}
.overlabel-wrapper.center {float: left;}
.right .textInput {float: right;}
.overlabel-wrapper.left, .overlabel-wrapper.right {
    width: 218px;
    float: left;
    margin-right: 10px;
}
.overlabel-wrapper.right {margin-right: 0px;}
.right .textInput {float: right;}
.cmxform label.error {
    color: #baa658;
    display: block;
    position: absolute;
    top: 7px;
    right: 5px;
    font-size: 10px;
}
.cmxform input.error, .cmxform textarea.error {
    border: 1px solid #f4db75;
    background: #FFF;
}
.inputFocus {
    background: #FFF;
    -moz-box-shadow: 0px 0px 10px #e9e9e9;
    -webkit-box-shadow: 0px 0px 10px #e9e9e9;
    box-shadow: 0px 0px 10px #e9e9e9;
}
.form-submit .button, input[type="submit"], #contactform button[type="submit"] {
    background-color: #333;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1;
    padding: 10px;
    width: 120px;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    text-align: center;
    text-shadow: none;
    border: none;
}
.form-submit .button:hover, input[type="submit"]:hover,  #contactform button[type="submit"]:hover {
    background-color: #000; }
.form-submit .button:active, input[type="submit"]:active,  #contactform button[type="submit"]:active {

}
.large-info .contact-map,.contact-map iframe{
    overflow: hidden;
    width:  476px;
    height: 156px;
}
.contact-map {background: #FFF;}
#contact-line {
    margin-top: 20px;
    background: url(images/contact-h-line.png) repeat-x;
    height: 2px;
}
.contact-v-line {
    background: url(images/contact-v-line.png) repeat-y 630px;
    margin-top: -1px;
}
.contact-form-big {padding: 20px 0px;}
.contact-side {
    padding: 20px 0px;
    padding-left :20px;
}
.contact-side, .contact-form-big {font-size:12px;}
.contact-side-line{
    background: url(images/contact-h-line.png) repeat-x left;
    height: 2px;
    margin: 20px -19px;
}
.contactus-forum {padding-top: 30px;}
/*	SEARCH BOX
*/

/*  06. ISOTOPE
----------------------------------------------------------
----------------------------------------------------------*/
.container { position: relative; margin: 0 auto; padding: 0; }
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:         top, left, opacity;
    transition-property:         transform, opacity;

    -webkit-transition-property: top, left, opacity;
    -moz-transition-property: top, left, opacity;
    -ms-transition-property: top, left, opacity;
    -o-transition-property: top, left, opacity;
    transition-property: top, left, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.red{background-color: red;}
.yellow{background-color: yellow;}
.black{background-color: black;}
#SquareGrid{width: 990px;}
#options h3 {
    font-size: 10px;
    text-transform: uppercase;
    float: left;
    margin-right: 20px;
    line-height: 18px;
    font-weight: normal;
}
ul#filters li {
    list-style: none;
    float: left;
    line-height: 17px;
    margin-right: 10px;
}
ul#filters li a{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
}
.title-container h1{
    font-size: 18px;
    text-transform: none;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 0;
}
.title_with_filter {
    position: relative;
}
.title_with_filter section h3 {
    display: none;
}
.title_with_filter ul#filters {
    position: absolute;
    top: 4px;
    right: 0px;
}
#mobile-filter {
    display: none;
    margin-bottom: 20px;
}
#mobile-filter select {
    min-width: 232px;
    width: 100%;
    -webkit-appearance: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-image: url(images/mobile-menu-arrow.png);
    background-position: center right;
    background-repeat: no-repeat;
    padding: 10px 5px;
    margin-top: 20px;
    background-color:#FFF;
}
/*  07. SMALL ITEM
----------------------------------------------------------
----------------------------------------------------------*/
/*      01. shape11 and general
----------------------------------------------------------*/
.item{
    margin:2px;
    width: 156px;
    height:156px;
    float: left;
    background: white url('images/progress.gif') no-repeat center;
}
.itemButton,.nav_post div, .small-info{cursor: pointer;}
.small-info .item_hover{
    position: absolute;
    top: 0px;
    left: 0;
    padding: 15px;
    height: 126px;
    width: 126px;
    display: none;
    z-index: 105;
    background: #FFF;
}
.small-info h2 {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
    padding-bottom: 9px;
    margin-top: 30px;
    background: transparent url('images/title-seperator.gif') no-repeat left bottom;
    overflow: hidden;
    max-height: 60px;
}
.small-info .nav{display: none;}
.dark .small-info h2 {background: transparent url('images/title-seperator-light.gif') no-repeat left bottom;}
.small-info, .large-info{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
/*      02. shape21
----------------------------------------------------------*/
.shape21.item{
    width: 156px;
    height:316px;
}
.shape21 .small-info .item_hover{
    width: 126px;
    height:286px;
}
/*      03. shape12
----------------------------------------------------------*/
.shape12.item{
    width: 316px;
    height:156px;
}
.shape12 .small-info .item_hover{
    width: 286px;
    height:126px;
}
/*      04. shape22
----------------------------------------------------------*/
.shape22.item{
    width: 316px;
    height:316px;
}
.shape22 .small-info .item_hover{
    width: 286px;
    height:286px;
}
/*      05. shape23
----------------------------------------------------------*/
.shape23.item{
    width: 476px;
    height:316px;
}
.shape23 .small-info .item_hover{
    width: 446px;
    height:286px;
}
/*      06. Other
-------------------------------------------------------*/
.item.large{
    width: 476px;
    height:636px
}
.entry-content{
    width: 446px; 
    height: 225px;
    margin: 0px; 
    position:relative;
    padding: 15px;
    padding-top: 0;
}
.contact_page.large .large-info .entry-content h6{margin: 10px 0 0 0}
.contact_page .entry-content {
    height: auto;
    overflow: hidden;
}
.contact_page .entry_touch {height: 305px !important;}
.entry-content h2 {
    font-size: 14px;
    line-height: 18px;
}
#navigation ul{float: left;}
.item .itemButton{
    width: 31px;
    height: 31px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 105;
}
.itemButton.format-standard{
    background-image: url('images/btnOpen.png');
}
.itemButton.format-video{
    background-image: url('images/btnVideo.png');
}
.itemButton.format-audio{
    background-image: url('images/btnAudio.png');
}
.item.large .itemButton{
    background-image: url('images/btnClose.png');
    width: 31px;
    height: 31px;
}
.large-info{background: white;}
.large-info .entry-title {
    width: 450px;
    height: 22px;
    overflow: hidden;
    font-size: 16px;
    color: #d7df23;
    line-height: 20px;
    margin: 40px 0 !important;
    padding: 0 15px;
    margin: 0;
}
.entry-video, .entry-video iframe{
    overflow: hidden;
    width:  476px;
    height: 316px;
}
.format-audio .entry-content, .format-audio .entry_touch{height: 55px;}
.dark, .dark a, .dark h2{color: relative;}
.dark a:hover{color: #d7df23;}
.nav_post{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 101;
}
.nav_post div{
    position: absolute;
    float: left;
    height: 30px;
    width: 30px;
    top: 0px;
}
.nav_post_prev{
    left: -60px;
    background: url('images/slider-prev.png') no-repeat left top;
}
.nav_post_next{
    left: -30px;
    background: url('images/slider-next.png') no-repeat left top;
}
.to-top a{
    padding: 8px 6px;
    color: white;
    display: block;
    font-size: 10px;
    font-weight: bold;
}
.search-content{
    position: absolute;
    right: 0px;
    top:150px;
    z-index: 20;
    overflow: hidden;
    cursor: pointer;
    zoom: 1;
}
.search-content .search-button{
    width: 45px;
    height:48px;
    cursor: pointer;
    background: #000 url('images/search-button.jpg') no-repeat left top;
    position: relative;
    z-index: 999;
}
.search-content .search-form{
    overflow: hidden;
    background: #000;
    position: relative;
    padding: 5px;
}

.search-content .search-form input {
    margin: 0px;
    background: #333;
    color: #FFF;
    border: 1px solid #333;
}
.search-content .search-form input#searchsubmit {
    padding: 12px;
    width: 66px;
    line-height: 9px;
    margin-left: 5px;
}
.search-content .search-form{
    float: right;
}
.search-content .search-button{
    float: right;
    text-align: right;
}
#infscr-loading {
    text-align: center;
    z-index: 100;
    position: fixed;
    left: 45%;
    bottom: 40px;
    width: 200px;
    padding: 10px;
    background: black;
    opacity: 0.8;
    color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
/*	08. COMMENT FORM
----------------------------------------------------------
----------------------------------------------------------*/
.comment-box {
    font-size: 12px;
}
.comment-meta {
    font-size: 11px;
}
h3#reply-title, h3.comment-box-title {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 15px;
    margin-top: 30px;
}
.comment-author img {
    height: 28px;
    width: 28px;
    margin-top: 3px;
    float: left;
    margin-right: 10px;
}
.comment-author {
    margin-bottom: 5px;
}
span.comment-author-link {
    font-weight: bold;
}
span.comment-replay-link a {
    margin-left: 10px;
}
.comment-body {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.comment-body p:last-child {
    margin-bottom: 0px;
}
.comment .comment {
    margin-left: 40px;
}
.dark h3#reply-title, .dark h3.comment-box-title {
    color: #FFF;
}
/*  09. SCROLL BAR
----------------------------------------------------------
----------------------------------------------------------*/
/* iScroll */
.entry_touch {
    width: 446px;
    height: 225px;
    margin: 0;
    /*IMPORTANT*/
    position:absolute;
    top:   0;
    bottom:0;
    left:  15px;
    right: 0;
    padding-right: 8px;
    overflow:hidden;
    z-index: 991;
    outline: 0;
}
/*Vertical Scrollbar*/
.myScrollbarV {
    position:absolute;
    z-index:100;
    width:8px;bottom:7px;top:2px;right:1px;

    background: transparent url(images/scrollbar/bg-scrollbar-trackend-y.png) repeat 0 0;
}
.myScrollbarV > div {
    position:absolute;
    z-index:100;
    width:100%;
    /* The following is probably what you want to customize */
    background: transparent url(images/scrollbar/bg-scrollbar-thumb-y.png) repeat 50% 100%;
    overflow: hidden;
}
/*	10. JPLAYER SKIN
----------------------------------------------------------
----------------------------------------------------------*/
div.jp-jplayer.jp-jplayer-video,div.jp-jplayer.jp-player-video {
    background-color: #292a2b;
    width: 560px;
}
.jp-audio-container,.jp-video-container { margin-bottom: 20px; }
div.jp-interface {
    position: relative;
    width: 100%;
    background: url(images/jplayer-bg.png) repeat-x;
    z-index: 100;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
.jp-interface { height: 30px; }
.jp-controls {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.jp-controls li { display: inline; }
.jp-controls a {
    border-bottom: none;
    position: absolute;
    overflow: hidden;
    text-indent: -9999px;
}
a.jp-play,a.jp-pause {
    width: 33px;
    height: 30px;
    z-index: 1;
    outline: none;
    top: 0;
    left: 0;
}
a.jp-play { background: url(images/jplayer-skin.png) 0 0 no-repeat; }
a.jp-play:hover { background-position: -33px 0; }
a.jp-pause { 
    background: url(images/jplayer-skin.png) 0 -30px no-repeat; 
    display: none;
}
a.jp-pause:hover { background-position: -33px -30px; }
.jp-progress-container {
    position: absolute;
    top: 0;
    left: 34px;
    width: 253px;
    height: 6px;
    padding: 12px 10px;
}
.jp-progress { 
    position: absolute; 
    width: 325px;
    height: 7px;
    padding: 1px;
    background: url(images/jplayer-skin.png) 0 -192px repeat-x ;
}
.jp-seek-bar {
    width: 0px;
    height: 5px;
    cursor: pointer;
    background: url(images/jplayer-skin.png) 0 -163px repeat-x;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
.jp-play-bar {
    width: 0px;
    height: 5px;
    background: url(images/jplayer-skin.png) 0 -133px repeat-x ;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
.jp-volume-bar-container {
    position: absolute;
    top: 0;
    right: 20px;
    width: 40px;
    height: 6px;
    padding: 12px 10px;
}
.jp-volume-bar {
    position: relative;
    overflow: hidden;
    background: url(images/jplayer-skin.png) 0 -192px repeat-x;
    width: 40px;
    height: 9px;
    cursor: pointer;
    top: 0;
    left: 18px;
}
.jp-volume-bar-value {
    width: 0px;
    height: 5px;
    margin: 1px;
    background: url(images/jplayer-skin.png) 0 -133px repeat-x;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
a.jp-mute,a.jp-unmute {
    width: 17px;
    height: 13px;
    z-index: 1;
    outline: none;
    top: 9px;
    right: 60px;
}
a.jp-mute { background: url(images/jplayer-skin.png) -10px -68px no-repeat; }
a.jp-mute:hover { background-position: -43px -68px; }
a.jp-unmute { background: url(images/jplayer-skin.png) -10px -98px no-repeat; }
a.jp-unmute:hover { background-position: -43px -98px; }
.seperator-first,.seperator-second {
    background:url(images/seperator.png) no-repeat left;
    height: 30px;
    width: 2px;
    position: absolute;
    left: 32px;
}
.seperator-second { 
    left: auto; 
    right: 90px;
}

/*	11. DARK SKIN
----------------------------------------------------------
----------------------------------------------------------*/
.dark_style #footer a { color: #999;}
.dark_style #footer a:hover, .dark_style #footer a:focus { color: #666; }
.dark_style, .dark_style .item, .dark_style .large-info {
    background-color: #000000;
}
.dark_style .hover-content, .dark_style .item {
    background: #333333 url('images/ajax-loader.gif') no-repeat center center;
}
.dark_style .top-nav ul li a, .dark_style .top-social ul li a, .dark_style ul#filters li a  {
    color: #d7df23;
}
.dark_style .top-nav ul li a:hover, .dark_style .top-social ul li a:hover, .dark_style ul#filters li a:hover, .dark_style ul#filters li a.selected,.dark_style h1.site-name, .dark_style #options h3, .dark_style .site-description  {
    color: #d7df23;
}
.dark_style .top-nav, .dark_style .top-social, .dark_style .branding, .dark_style .top-text, .dark_style .title-container h1{
    border-color: #666;
    color: #d7df23;
}
/*	12. BLOG PAGE
----------------------------------------------------------
----------------------------------------------------------*/
.page-template-blog-page-php .large-info .entry-title, body.category .large-info .entry-title, body.blog .large-info .entry-title, body.single .large-info .entry-title{
    height: auto;
}
.page-template-blog-page-php .item.large .entry-content, body.category .item.large .entry-content, body.blog .item.large .entry-content, body.single .item.large .entry-content{
    height: auto;
}
/*	13. POST SOCIALS
----------------------------------------------------------
----------------------------------------------------------*/
.lazy-share-widget{
    margin: 10px 0 !important;
    padding: 0 10px;}
.entry-content .lazy-share-widget{
    padding: 0;
}
/*	13.5 FACEBOOK COMMENT
----------------------------------------------------------
----------------------------------------------------------*/
.fb-comments SPAN, .fb-comments.fb_iframe_widget SPAN IFRAME
{
    width: 100% !important;
}
.fb_iframe_widget{
    display: block !important;
}
/*	14. MEDIA QUERIES
----------------------------------------------------------
----------------------------------------------------------*/
/* Smaller than standard (devices and browsers) */
@media only screen and (min-width: 1280px)  {
    .container {width: 1280px;}
    #SquareGrid{width: 1280px;}
}
@media only screen and (min-width: 1120px) and (max-width: 1279px) {
    .container {width: 1120px;}
    #SquareGrid{width: 1120px;}
}
@media only screen and (min-width: 960px) and (max-width: 1119px) {
    .container {width: 960px;}
    #SquareGrid{width: 960px;}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 800px) and (max-width: 959px) {
    .container {width: 800px;}
    #SquareGrid{width: 800px;}
}
@media only screen and (min-width: 640px) and (max-width: 799px) {
    .container {width: 640px;}
    #SquareGrid{width: 640px;}
    .branding {
        float: none;
        margin: 0 auto;
        width: 100%;
    }
    .top-float {float: none;}
}
@media only screen and (min-width: 480px) and (max-width: 639px) {
    .container, #SquareGrid{width: 480px;}
    .branding {
        float: none;
        margin: 0 auto;
        width: 100%;
    }
    .top-social {display: none;}
    .top-float {width: 480px;}
    .large-info .entry-image a, .large-info .entry-image img, .large-info .entry-image-slide {
        width: 476px !important;
        height: 316px !important;
    }
    #footer .footer-column {
        float: none;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .copyright {margin-bottom: 10px !important;}
    .jp-progress,.jp-progress-container{width: 330px;}
    .to-top{display: block;
            position: relative;
            margin: 0px auto;
            width: 34px;
            height: 34px;
            border-radius: 17px;
            margin-top: 50px;
    }
    #infscr-loading {left: 35%;}
}
@media only screen and (max-width: 479px) {
    #mobile-filter { display: block;	}
    section#options { display: none; }
    .shape23 .small-info .item_hover{height: 180px;}
    .shape23 .small-info .item_hover{width: 286px;}
    .shape23 .small-info .hover-content a, .shape23 .small-info .hover-content img, .shape23 .small-info .hover-content .entry-image-slide{
        width: 316px !important;
        height: 210px !important;
    }
    .shape23.item,.entry-video, .entry-video iframe{  
        width:  316px;
        height: 210px;
    }
    .large.item .large-info iframe{width:316px !important;}
    .jp-progress, .jp-progress-container{width: 170px;}
    #SquareGrid,.container {width: 320px;}
    .large-info{width: 316px;}
    .large-info .contact-map,.contact-map iframe{
        width:  316px;
        height: 172px;
    }
    .large-info .entry-title{width: 286px;}
    .large-info .entry-image a, .large-info .entry-image img, .large-info .entry-image-slide {
        width: 316px !important;
        height: 210px !important;
    }
    .item.large {
        width: 316px;
        height: 370px;
        display: block;
    }
    .item.large .entry-content {width: 286px;}
    .item.large .entry-content .entry_touch {width: 278px;}
    .branding {
        float: none;
        margin: 0 auto;
        width: 100%;
    }
    .top-text {margin-top: 15px;}
    .top-float {float: none;width: 320px;}
    #footer .footer-column {
        float: none;
        width: 100%;
        margin: 0;
        text-align: center;
    }
    .post-socials {
        top: 173px;
    }
    .copyright {margin-bottom: 10px !important;}
    .to-top{display: block;
            position: relative;
            margin: 0px auto;
            width: 34px;
            height: 34px;
            background: black;
            border-radius: 17px;
            margin-top: 50px;
    }
    .contact-form-big fieldset, .contact-form-big .overlabel-wrapper{width: 286px;}
    .contact-form-big .textInput{width: 263px;}
    .contact_page.large{height: 530px}
    .contact_page .large-info .entry-content>p{margin-top: -30px;}
    .contact_page.large{height: 627px;}
    .contact_page .entry-content {height: 440px;}
    #infscr-loading {left: 20%;}
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */