@charset "utf-8";

/*
Theme Name: KC
Theme URI:
Author: Twenty First Media
Author URI: http://www.twentyfirstmedia.nl
Description: Custom WordPress theme developed for Kunstcentrum Zaandam. For any questions, please contact Henk Burggraaff with Twenty First Media at 06 45 37 28 26. Enjoy the theme!
Text Domain: kc
Domain Path: /
Version: 1.0
*/

/* --- Basics --- */

@media ( min-width: 1580px ) {
    .container { width: 1560px; }
}

img { display: inline-block; max-width: 100%; height: auto; }

a { color: #666; -webkit-transition: all .2s; transition: all .2s; }
a:hover { color: #66cc33; text-decoration: none; }

.alignleft { float: left; margin-right: 10px; } 
.alignright { float: right; margin-left: 10px; } 
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }

.main.front { padding-top: 380px; }
.main { padding-top: 180px; }


/* --- Typography --- */

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; color: #000; background-color: #E3E3E3; }
h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6 { margin:0; font-weight: 400; }
strong, .strong { margin: 0; font-weight: 700; }
.normal { font-weight: 400; }
.light { color: #666 !important; }
.dark { color: #000; }
.lowerc { text-transform: lowercase; }

p { margin-bottom: 20px; }


/* --- Header --- */

.header { position: fixed; z-index: 9; width: 100%; padding: 50px 0 0; background-color: #FFF; transition: all .4s ease; }

.header-nav { list-style: none; padding: 0; }
.header-nav li { display: inline-block; }
.header-nav li a { color: #000; }
.header-nav li a:hover { color: #999; }

.social li a span { -webkit-transition: all .2s; transition: all .2s; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); }
.social li a:hover span { -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }

.basket li { margin-left:10px; }
.basket li i { font-size: 26px; }

.logo { max-width: 600px; width: 100%; transition: all .4s ease; }
.tagline { visibility: visible; opacity: 1; margin-top: 15px; color: #000; font-size: 22px; transition: opacity 0.3s ease; }


/* --- Navigation --- */

.navbar-default { margin: 30px 0 0; background-color: transparent; border-left: none !important; border-right: none !important; border-top: 2px solid #000; border-bottom: 2px solid #000; border-radius: 0 !important; transition: all .4s ease; }
.navbar-default .navbar-nav { display: inline-block; float: none; vertical-align: top; }
.navbar-default .navbar-collapse { text-align: center; }

.nav > li { margin-right: 50px; }
.nav > li > a { font-size: 18px; font-weight: 500; }
.nav > li > a { padding-left: 0; padding-right: 0; }

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > .dropdown > a,
.navbar-default .navbar-nav > .open > a { color: #000; background-color: transparent; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .dropdown > a:focus,
.navbar-default .navbar-nav > .dropdown > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a:focus, 
.navbar-default .navbar-nav > .open > a:hover { color: #999; background-color: transparent; }

.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { border-color: transparent; }

.dropdown-menu { border-radius: 0; border: none; border-top: 2px solid #000; border-bottom: 1px solid #000; -webkit-box-shadow: none; box-shadow: none; }
.dropdown-menu > li > a { color: #666; }
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover { color: #000; background-color: transparent; }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { color: #000; background-color: transparent; }

.smallen .header, .header.small { padding: 20px 0 0; }
.smallen .logo, .header.small .logo { max-width: 200px; }
.smallen .tagline, .header.small .tagline { visibility: hidden; opacity: 0; margin: 0; height: 0; }
.smallen .navbar-default, .header.small .navbar-default { margin: 15px 0 0; }



/* --- Masonry Grid --- */

.grid { margin: 0 2%; width: 96%; }
.grid-item { position: relative; display: block; margin-bottom: 30px; overflow: hidden; }
.grid-item, .grid-sizer { width: calc(16.6666% - 30px); }
.grid-item.w2 { width: calc(33.3333% - 30px); }

.grid-item img { width:100%; }
.grid-item a { display:block; }
.grid-item a img { -webkit-transition: all .3s; transition: all .3s; }
.grid-item a:hover img { opacity: .7; }

.grid-item-title { position: absolute; z-index: 1; }
.grid-item-title.top { top: 0; }
.grid-item-title.left { left: 0x; }
.grid-item-title.bottom { bottom: 0; }
.grid-item-title.right { right: 0; text-align: right; }
.grid-item-title.mid { height: 100%; display: flex; justify-content: center; flex-direction: column; }
.grid-item-title.center { width: 100%; text-align: center; }

.grid-item-title .title { padding: 10px; font-size: 30px; font-weight: 500; line-height: 30px; color: #FFF; text-transform: uppercase; text-shadow: 0 0 12px rgba(0,0,0,0.6) }
.grid-item.w2 .grid-item-title .title { font-size: 40px; line-height: 40px; }

/* --- Top Nav --- */

.top-nav { margin-bottom: 30px; padding: 10px 0; height: 40px; background-color: #f2f2f2; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.top-nav > a { padding: 0 10px; line-height: 20px; }
.top-nav > a.nav-left { float: left; }
.top-nav > a.nav-left:before { content: "\f053"; margin-right: 10px; font-family: FontAwesome; }
.top-nav > a.nav-right { float: right; }
.top-nav > a.nav-right:after { content: "\f054"; margin-left: 10px; font-family: FontAwesome; }


/* --- Artist & Items--- */

.bio {}
.bio-title {}
.bio img { width: 100%; }

.item-specs {  margin-bottom: 20px; padding: 0; list-style: none; }

.btn-holder { margin-bottom: 20px; }
.btn-holder .btn { margin-bottom: 10px; }

.works-grid {}
.works-item-holder { padding-right: 15px; padding-left: 15px; width: 33.3333%; }
.grid-4 .works-item-holder { width: 25%; }
.grid-5 .works-item-holder { width: 20%; }

.works-title { margin-bottom: 20px; line-height: 33px; }
.works-single { margin-bottom: 30px; }
.works-more { margin: 40px 0; }

.works-item { margin-bottom: 30px; color: #666; border: 1px solid #e5e5e5; }
.item-desc { padding: 10px; }

.item-foot { padding: 10px 0; background-color: #f2f2f2; }
.item-foot form:not(:first-of-type) { margin-top: 10px; }
/* ---
.item-foot a { color: #666; }
.item-foot a:before { content: "\f0da"; margin-right: 9px; font-family: FontAwesome; font-size: 20px; line-height: 18px; vertical-align: middle; color: #66cc33; -webkit-transition: all .2s; transition: all .2s; }
.item-foot a:hover:before { margin-right: 14px; }
--- */

.btn-cont-l { padding-right: 7px; }
.btn-cont-r { padding-left: 8px; }

.page-navigation, .pagination { text-align: center; }
.pagination > li, .page-numbers { display: inline; }
.pagination > li > a { color: #666; }
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { background-color: #66cc33;
 border-color: #66cc33; }
.nav-links { border-radius: 4px; }
.page-numbers { position: relative; float: left; padding: 6px 12px;margin-left: -1px;line-height: 1.42857143; text-decoration: none; background-color: #fff; border: 1px solid #ddd; }
.page-numbers.current { color: #FFF; background-color: #66cc33; border-color: #66cc33; }
.page-numbers:first-child { border-radius: 4px 0 0 4px; }
.page-numbers:last-child { border-radius: 0 4px 4px 0; }


/* --- Entry --- */

.article-title { margin-bottom: 20px; }

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { margin-bottom: 20px; }

.embed { position:relative; margin-bottom: 20px; padding-bottom:54.25%; padding-top:25px; height:0; }
.embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.wp-caption { width: 100% !important; background-color: #f2f2f2; }
.wp-caption-text { padding: 3px 5px; color: #666; }


/* --- Blog --- */

.blog-item { margin-bottom: 30px; }


/* --- Sidebar --- */

.sidebar p { margin-bottom: 30px; }


/* --- Search --- */

.panel { border-radius: 0; box-shadow: none; }
.panel-default > .panel-heading, .well { background-color: #f2f2f2; border-color: #e5e5e5; }
.search-title { margin: 10px 0; }

.well { margin-bottom: 0; border-radius: 0; box-shadow: none; }
.topspace { margin-top: 15px; }


/* --- Footer --- */

.footer { padding: 50px 15px; clear: both; }

.footer ul { list-style: none; padding: 0; }
.footer ul li { display: block; font-size: 13px; line-height: 2; }

.footer ul li a { position: relative; display: block; padding-left: 9px; color: #999; text-decoration: none !important; -webkit-transition: all .3s; transition: all .3s; }
.footer ul li a:before { content: "/"; position: absolute; left:0; }
.footer ul li a:hover { padding-left: 12px; color: #666; }
.footer ul li.current-menu-item a { color: #66cc33; }
.footer-title { margin-bottom: 30px; color: #999; font-size: 15px; font-weight: 700; }

.footer .bottom { margin-top: 80px; }
.footer .bottom .bottom-line { font-size: 18px; text-transform: uppercase; letter-spacing: 11px; }


/* -- Contact -- */

input, textarea { font-family: 'Ubuntu', sans-serif; font-size: 14px; color: #999; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea { padding: 10px 12px; width: 100%; color: #999; border: 1px solid #e5e5e5; }
textarea { height: 150px; }
input[type="number"] { width: auto; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="focus"], textarea:focus { border-color: #6fbf3a; }
.wpcf7-form { margin: 20px 0; }
.wpcf7-form .wpcf7-list-item-label { margin-left: 5px; font-weight: 400; }
.wpcf7-form-control-wrap { margin-bottom: 20px; width: 100%; }
.wpcf7-response-output { display: inline-block; width: 100%; text-align: center; }
.wpcf7-list-item { white-space: nowrap; }

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; opacity: 1; }
::-moz-placeholder { color: #999; opacity: 1; }
:-ms-input-placeholder { color: #999; }

input[type=submit]:disabled, button:disabled { opacity: 0.5; }


.mailpub fieldset { margin-bottom: 10px; }
.mailpub label { font-weight: normal; }
.mailpub .button { width: auto; }


/* --- Misc --- */

.actn { padding: 10px 20px; line-height: 20px; border: none; border-radius: 0; }
.actn i { margin-right: 10px; color: #fff; font-size: 20px; line-height: 20px; vertical-align: middle; }
.actn { text-align: left; text-transform: uppercase; background-color: #6fbf3a; }
.actn .strong { margin-right: 10px; color: #333; }
.orange { background-color: #f48024; }
.btn.sml { padding: 5px 10px; font-size: 12px; }
.btn.sml i { margin-right: 6px; font-size: 16px; }
.btn.centered { text-align: center; }
.offering { color: red; }

.button { display: inline-block; padding: 10px 20px; width: 100%; color: #FFF; line-height: 20px; text-align: center; text-transform: uppercase; background-color: #6fbf3a; border: none; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.button.groot { padding: 15px 30px; font-size: 18px; line-height: 28px; }
.button.groen { background-color: #6fbf3a; }
.button.oranje { background-color: #f48024; }
.button.geel { background-color: #fdee57; }
.button.rood { background-color: #ee453a; }
.button.blauw { background-color: #3d94d1; }
.button.paars { background-color: #a44398; }

.button:hover { color: #FFF; background-color: #666; }


/* --- Responsiveness --- */

@media ( max-width: 1580px ) {

.nav > li { margin-right: 40px; }
.nav > li > a { font-size: 17px; }

}

@media ( max-width: 1220px ) {

.grid-item, .grid-sizer { width: calc(25% - 30px); }
.grid-item.w2 { width: calc(50% - 30px); }

.grid-4 .works-item-holder, .grid-5 .works-item-holder { width: 33.33333%; }

}

@media ( max-width: 1199px ) {

.main.front { padding-top: 300px; }

.nav > li { margin-right: 30px; }
.nav > li > a { font-size: 16px; }

}

@media ( max-width: 991px ) {

.header .col-md-3 { margin-top: 20px; }
.header .basket,
.header .social { margin-top:8px; }
.header .social li { margin-left: -6px; }

.nav > li { margin-right: 15px; }
.nav > li > a { font-size: 14px; }

.main.front { padding-top: 270px; }
.main { padding-top: 200px; }

.item-title .title { font-size: 34px; line-height: 30px; }

}

@media ( max-width: 767px ) {

.grid-item, .grid-sizer { width: calc(50% - 30px); }
.grid-item.w2 { width: calc(50% - 30px); }
.works-item-holder, .grid-4 .works-item-holder, .grid-5 .works-item-holder { width: 50%; }

.btn-cont-l { margin-bottom: 10px; padding-right: 15px; }
.btn-cont-r { padding-left: 15px; }

.main.front { padding-top: 240px; }
.main { padding-top: 240px; }

.header { padding: 20px 0 0; }
.logo { max-width: 200px; }
.tagline { visibility: hidden; opacity: 0; margin: 0; height: 0; }
.navbar-default { margin: 15px 0 0; }

}

@media ( max-width: 640px ) {

.grid-item, .grid-sizer, .grid-item.w2 { width: 100%; }
.works-item-holder, .grid-4 .works-item-holder, .grid-5 .works-item-holder { width: 100%; }

.footer-nav li:first-child { margin: 20px 0 15px; }

}