/*

Theme Name: Visualdrugstore

Description: Custom theme for Visualdrugstore

*/
@charset "utf-8";

/*--------------------------------------------------------------------------------------------------
CSS Styles for <PROJECT NAME>.

version:   1.0
--------------------------------------------------------------------------------------------------*/

/* =CSS Reset
--------------------------------------------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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;
}
/* 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;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/* End CSS Reset
--------------------------------------------------------------------------------------------------*/

/* =Toolkit
--------------------------------------------------------------------------------------------------*/

/* Micro Clearfix Hack by Nicholas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */
/* For modern browsers */ 
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

/* general purpose classes */
.nodisplay { display:none; }
.nodisplay_strict { display:none !important; }
.alignleft { float:left; }
.alignright { float:right; }

/* End Toolkit
--------------------------------------------------------------------------------------------------*/

/* =Normalization - mostly derived from normalize.css (https://github.com/necolas/normalize.css/) but without comments and compressed to keep the file small
--------------------------------------------------------------------------------------------------*/

hr { display:block; height:1px; border:0; margin:1em 0; padding:0;
	border-top:1px solid #cccccc; /* change border colour to suit your needs */
}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, button, input, select, textarea { font-family: sans-serif; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
h1 { font-size: 2em; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul { margin: 1em 0; }
del { text-decoration: line-through; }
abbr[title] { border-bottom: 1px dotted; cursor:help; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
small { font-size: 75%; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; -ms-interpolation-mode: bicubic; max-width:100%; /* make it floated */ }
.index img { max-width:none;}
svg:not(:root) { overflow: hidden; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; *margin-left: -7px; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
input, select { vertical-align:middle; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

/* End Normalization
--------------------------------------------------------------------------------------------------*/


/* =Typography
--------------------------------------------------------------------------------------------------*/

/* Setting up the fonts */
body {
  font: normal 14px/120% "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0px 10px;
    color: #888888;
}

/* End Typography
--------------------------------------------------------------------------------------------------*/


/* =Headings
--------------------------------------------------------------------------------------------------*/
h2 { font-family: 'ralewayextralight', sans-serif; font-size: 32px; color: #222222; text-transform: lowercase; margin: 0px 0px 50px 0px; line-height: 100%; }
h3 { font-family: 'ralewayextralight', sans-serif; font-size: 16px; color: #fff; line-height: 100%; margin: 0px; }
h3 em { font-style: normal; font-family: 'ralewayheavy', sans-serif; font-size: 14px; margin-left: 10px;}
/* End Headings
--------------------------------------------------------------------------------------------------*/


/* =Links
--------------------------------------------------------------------------------------------------*/
a {
    text-decoration: none;
    color: #666666;
}
a:hover {
    color: #444444;
    text-decoration: underline;
}
/* End Links
--------------------------------------------------------------------------------------------------*/


/* =Branding
--------------------------------------------------------------------------------------------------*/




/* End Branding
--------------------------------------------------------------------------------------------------*/
.projects { padding: 0px; }
footer { position: relative; }
@media only screen and (min-height: 480px)
{
    .projects { padding: 100px 0 50px 0; }
    .projects.post { padding-top: 100px; }
    header { position: fixed; top: 0px; z-index: 999; width: 100%; background: #fff; }
    footer { position: fixed; bottom: 0px; z-index: 999; width: 100%; background: #fff; }
}

/* =Main Nav
--------------------------------------------------------------------------------------------------*/
nav#main-nav { text-align: center; position: fixed; bottom: 0px; left: 0px; right: 0px; padding-bottom: 16px; z-index:999999;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 90%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(75%,rgba(255,255,255,1)), color-stop(90%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 90%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 90%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 90%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 90%); /* W3C */
    -pie-background: linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 90%);
    behavior: url(PIE.htc);
}
.index nav#main-nav { background: none; behavior: none; }
h1#logo { display: inline-block; }
h1#logo a { display: block; width: 96px; height: 38px; background: transparent url('img/logo.png') no-repeat left center; font-size: 0px; line-height: 0px; color: transparent; overflow: hidden;}

nav#main-nav ul { font-size: 0px; margin: 0px auto; }
nav#main-nav li { display: inline-block; margin: 0 10px; }
nav#main-nav li a { font-family: 'ralewayextralight', sans-serif; font-size: 22px; color: #fff; text-decoration: none; height: 45px; line-height: 45px; padding: 0px 10px; display: block;}
nav#main-nav li a:hover { text-decoration: underline;}


.projects nav#main-nav { position: relative; padding: 30px 10px 0px 10px; text-align: right; background: none; filter: none; height: 100px; }

.projects.post nav#main-nav {
    -webkit-box-shadow: 0px 0px 17px -1px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 0px 0px 17px -1px rgba(100, 100, 100, 0.5);
    box-shadow: 0px 0px 17px -1px rgba(100, 100, 100, 0.5);
    behavior: url(PIE.htc);
}
.projects nav#main-nav ul { float: right; }
.projects h1#logo { display: block; float: left; margin: 0px; }
.projects h1#logo a { background-image: url('img/horiz-logo.jpg'); width: 300px; height: 45px; background-size: 70%; }
@media only screen and (min-width: 480px) {
    .projects h1#logo a { background-size: contain;}
}
.projects nav#main-nav li a { color: #666666; }
.projects nav#main-nav li:last-child { margin-right: 0px; }

/* End Main Nav
--------------------------------------------------------------------------------------------------*/


/* =Sub Nav
--------------------------------------------------------------------------------------------------*/
#project-filter { background: transparent url('img/bgi/bg-left-side.jpg') repeat; padding: 0px 10px; overflow: auto;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .2s, .2s;
    transition-duration: .2s, .2s;
    -webkit-transition-timing-function: linear, linear;
    transition-timing-function: linear, linear;
    -webkit-overflow-scrolling: touch;
}
#project-filter ul { height: 40px; font-size: 0px; white-space: nowrap; }
#project-filter ul li { display: inline-block; }
#project-filter ul li a { display: block; height: 40px; line-height: 40px; font-size: 14px; font-weight: bold; color: #414141; padding: 0 15px; }
#project-filter ul li a:hover, #project-filter ul li a.active { background-color: #F9625B; text-decoration: none; color: #fff; }
/* End Sub Nav
--------------------------------------------------------------------------------------------------*/


/* =Main Content
--------------------------------------------------------------------------------------------------*/

.inner { background-color: #fff; background: url('img/contact.jpg') no-repeat top center; }
.inner nav#main-nav li a { color: #666666; }

.inner .wrapper { max-width: 1200px; margin: 500px auto 160px auto; }
.inner .wrapper p { margin: 0px 0px 30px 0px; }
.inner .wrapper p strong { display: block; margin-bottom: 10px;}

.projects { background-color: #fff;  }

.post-wrapper { max-width: 1200px; margin: 0px auto; }
.project-post-image img { width: 100%; height: auto; }
.project-post { margin: 0 10px; padding-right: 10px; color: #515151; }
.zilla-share iframe, .zilla-share div {
    clear: both!important;
    float: left!important;
    display: block!important;
    width: 100%!important;
}
#___plusone_0 {position: relative;top: 7px;}
.zilla-share > div.fb_edge_widget_with_comment {top: 5px!important;}
@media only screen and (min-width: 768px) {
    .project-post { float: left; padding-right: 350px; }
}

    h2.project-post-title { line-height: 90px; border-bottom: 1px solid #e9e9e9!important; color: #313131; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; text-transform: none; margin-bottom: 30px; }

@media only screen and (max-width: 768px) {
    h2.project-post-title { line-height: 120%; }
}    
    .project-post p { margin: 0px 0px 20px 0px; }
    .post-gallery { margin: 40px 0px 20px 0px; }
    .post-gallery li { display: inline-block; }
    .post-gallery img {
        background-color: #FFFFFF;
        border: 1px solid #A9A9A9;
        display: block;
        margin: 4px 0px 4px 5px;
        padding: 4px;
        position: relative;
    }
    .post-gallery a:hover img { background-color: #A9A9A9; }

.post-meta { width: 100%; padding: 0 10px; margin-top: 20px; margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
    .post-meta { width: 300px; float: left; margin-left: -300px; padding-left: 0px;  margin-top: 90px; }
}
    .meta-content { background-color: #f8f8f8;padding: 20px; color: #515151; font-size: 13px; position: relative; }
    .meta-content ul { margin: 0px; }
    .meta-content li { margin-bottom: 10px; }
    .meta-content strong { color: #414141; }
    .zilla-share {
        top: -17px;
        position: relative;
        left: 50px;
        width: 90%;
        margin-bottom: 0px;
        height: 100%;
        overflow: visible;
    }
.previous-container,
.next-container {
    position: absolute;
    left: 20px;
    display: inline-block;
    bottom: 12px;
    color: #515151 !important;
}
.next-container {
    right: 20px;
    left: auto;
}

.next-post,
.previous-post {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 13px;
    height: 13px;
    background: transparent url('img/next.png');
    margin-left: 4px;
}
.previous-post {
    background: transparent url('img/prev.png');
    margin-right: 4px;
    margin-left: 0px;
}
/* =End Main Content
--------------------------------------------------------------------------------------------------*/


/* =Secondary Content
--------------------------------------------------------------------------------------------------*/

.columns {

}

@media only screen and (min-width: 480px) {
    .columns {
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -ms-column-count: 2;
        -ms-column-gap: 10px;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;
    }
}

@media only screen and (min-width: 1024px) {
    .columns {
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -ms-column-count: 3;
        -ms-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
    }
}

.gallery {}
.gallery li { float: left; width: 100%; margin-right: 0; margin-bottom: .7%;}
@media only screen and (min-width: 480px) {
    .gallery li {width: 49.5%; margin-right: 1%;}
    .gallery li:nth-child(2n+0) { margin-right: 0px; }
}
@media only screen and (min-width: 768px) {
    .gallery li {width: 32.66666666666667%;}
    .gallery li:nth-child(2n+0) { margin-right: 1%; }
    .gallery li:nth-child(3n+0) { margin-right: 0px; }
}
@media only screen and (min-width: 1024px) {
    .gallery li {width: 24.25%;}
    .gallery li:nth-child(3n+0) { margin-right: 1%; }
    .gallery li:nth-child(4n+0) { margin-right: 0px; }
}
@media only screen and (min-width: 1280px) {

}
figcaption strong { display: block; }
.mosaic-block { position: relative; }
.mosaic-block figcaption { position: absolute; left: 10px; bottom: 10px; }
.mosaic-block figcaption p { margin: 0px !important; color: #fff; font-weight: bold; }
.mosaic-block figcaption a { font-weight: normal; color: #fff; text-decoration: none; }
.mosaic-block figcaption a:hover { text-decoration: underline; }

#project-mosaic {}
#project-mosaic ul { margin: 0px; }

#project-mosaic ul li { margin: 0px; float: left; width: 100%; }

@media only screen and (max-width: 320px) {
    
}
@media only screen and (min-width: 480px) {
    /*#project-mosaic ul li { width: 33.33333333%;}*/
    #project-mosaic ul li { width: 50%;}
}
@media only screen and (min-width: 768px) {
    /*#project-mosaic ul li { width: 25%;}*/
    #project-mosaic ul li { width: 33.33333333%;}
}
@media only screen and (min-width: 1024px) {
    /*#project-mosaic ul li { width: 20%;}*/
    #project-mosaic ul li { width: 25%;}
}
@media only screen and (min-width: 1280px) {
    #project-mosaic ul li { width: 20%; position: relative;}
}

#project-mosaic ul li figure { position: relative; overflow: hidden; cursor: pointer; }
#project-mosaic ul li figure a { display: block; position: relative; bottom: 0px; top: 0px; width:  100%; z-index:  1; }
#project-mosaic ul li figure a.hover { opacity: 0; }
#project-mosaic ul li figure img { display: block; max-width: 100%; height: auto;}
#project-mosaic ul li figure figcaption { position: absolute; bottom: 0px; top: 0px; width: 100%; color: #fff; }
#project-mosaic ul li figure figcaption h3 { font-size: 14px; line-height: 100%; position: relative; text-align: left; padding: 0 5%; top: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;  width: 90%;}
#project-mosaic ul li figure figcaption p { font-size: 12px; margin: 0px; position: absolute; top: 40%; left: 5%; right: 5%; bottom: 20%; overflow: hidden; line-height: 120%; }
@media only screen and (min-width: 480px) {
    #project-mosaic ul li figure figcaption h3 { font-size: 20px; }
    #project-mosaic ul li figure figcaption p { font-size: 14px; }
}
@media only screen and (min-width: 768px) {

}
@media only screen and (min-width: 1024px) {

}

#project-mosaic ul li figure figcaption nav { position: absolute; bottom: 0px; width: 100%;}
#project-mosaic ul li figure figcaption nav ul { margin: 0px 5%; }
#project-mosaic ul li figure figcaption nav ul li { margin: 0px; float: left; }
#project-mosaic ul li figure figcaption nav ul li.link { float: right; }
#project-mosaic ul li figure figcaption nav ul li a { height: 40px; display: block; padding: 0 10px; line-height: 40px; }
#project-mosaic .zilla-likes:hover,  #project-mosaic .zilla-likes.active:hover{padding-left: 10px !important;background: transparent url('img/like_big_active.png') no-repeat left center;}
#project-mosaic .zilla-likes.active {padding-left: 10px !important;background: transparent url('img/like_big.png') no-repeat left center;}
#project-mosaic li.like, #project-mosaic li.link { width: auto; }
li.like a { background: transparent url('img/like_big.png') no-repeat left center; height: 19px; text-indent: 20px; font-size: 0px; color: transparent;}
li.like a:hover { background: transparent url('img/like_big_active.png') no-repeat left center;}
li.like a span { font-size: 14px; font-weight: bold; color: #fff;}

li.link a { background: transparent url('img/link.png') no-repeat center center; font-size: 0px; line-height: 0px; color: transparent; overflow: hidden; margin: 0px; width: 30px; }
/* End Secondary Content
--------------------------------------------------------------------------------------------------*/


/* =Footer
--------------------------------------------------------------------------------------------------*/
footer { height: 50px; width: 100%; padding: 0px 10px; border-top: 1px solid #e9e9e9; }
.footer-menu { text-align: left; }
@media only screen and (min-width: 480px) {
    .footer-menu { text-align: center; }
}

.footer-menu > ul { margin: 0px; }
    .footer-menu li { display: inline-block; color: #666; font-size: 12px; line-height: 50px; height: 50px; margin: 0;  }
    .footer-menu li:after { content: "//"; margin-left: 15px;}
    .footer-menu li:last-child:after { content: normal; margin: 0px; }
    .footer-menu li { padding: 0px 5px; }

.social-nav { position: absolute; right: 10px; top: 0px; }
.social-nav > ul { margin: 0px; font-size: 0px; }
.social-nav-item { display: inline-block; line-height: 50px; height: 50px; margin-left: 10px; }
.social-nav-item a { display: block; width: 25px; height: 25px; margin-top: 12px; color: transparent; overflow: hidden; font-size: 0px; background-color: transparent; background-position: center center; background-repeat: no-repeat; }
a.facebook { background-image: url('img/facebook.png'); }
a:hover.facebook { background-image: url('img/facebook_color.png'); }
a.vimeo { background-image: url('img/vimeo.png'); }
a:hover.vimeo { background-image: url('img/vimeo_color.png'); }

/* End Footer
--------------------------------------------------------------------------------------------------*/


/* =Forms
--------------------------------------------------------------------------------------------------*/

/* Removing fieldset borders (remove if you want to keep the defaults defined in Normalization) */
fieldset { border: 1px solid transparent; margin: 0; padding: 0; }

/* End Forms
--------------------------------------------------------------------------------------------------*/

/* =Tables
--------------------------------------------------------------------------------------------------*/

/* End Tables
--------------------------------------------------------------------------------------------------*/


/* =Misc 1
--------------------------------------------------------------------------------------------------*/

/* End Misc 1
--------------------------------------------------------------------------------------------------*/


/* =Misc 2
--------------------------------------------------------------------------------------------------*/

/* End Misc 2
--------------------------------------------------------------------------------------------------*/


/* =Additional 1
--------------------------------------------------------------------------------------------------*/

/* End Additional 1
--------------------------------------------------------------------------------------------------*/


/* =Additional 2
--------------------------------------------------------------------------------------------------*/

/* End Additional 2
--------------------------------------------------------------------------------------------------*/