/*
Theme Name: Calebasse
Theme URI: 
Author: Alexander Molchanov
Author URI: 
Description: Calebasse responsive theme
Version: 1.0
*/
/******************** 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, img, ins, kbd, q, s, samp, small, strike, 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 {
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
.clearfix:after {
    display: table;
    clear: both;
    content: '';
}
img {
    border: none;
}
a {
    text-decoration: none;
    color: #da4f02;
}
* {
    outline: 0;
}

/************************************************************/

body {
    font-family: 'Verdana', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #3e2d12;
    background: #bf6e1f;
}
h1, h1 a, h2, h3, h4, h5 {
    font-family: 'Conv_Tiger Rag LET Plain1.0', cursive;
    color: #e8e0bc;
}

@font-face {
	font-family: 'Conv_Tiger Rag LET Plain1.0';
	src: url('/fonts/Tiger Rag LET Plain1.0.eot');
	src: local('☺'), url('/fonts/Tiger Rag LET Plain1.0.woff') format('woff'), url('/fonts/Tiger Rag LET Plain1.0.ttf') format('truetype'), url('/fonts/Tiger Rag LET Plain1.0.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
.wrapper {
	max-width: 925px;
	margin: 0 auto;
	padding: 0 3% 55px 0;
	position: relative;
	overflow: hidden;
	box-sizing:border-box;
}
.wrapper::before {
	content: "";
	display: block;
	position: absolute;
	left: 1%;
	top: 75px;
	width: 98%;
	height: 2px;
	background: #c8925d;
}
.wrapper::after {
	content: "";
	display: block;
	position: absolute;
	left: 2%;
	bottom: 53px;
	width: 96%;
	height: 2px;
	background: #c8925d;
}
.main-container::before {
	content: "";
	display: block;
	position: absolute;
	left: 130px;
	top: -70px;
	width: 2px;
	height: 117%;
	background: #c8925d;
}
.main-container::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top: -60px;
	width: 2px;
	height: 118%;
	background: #c8925d;
}
/*************************HEADER*****************************/

.header {
	height: 75px;
	margin: 0 0 2px 130px;
}
h1 {
	display: inline-block;
	padding: 19px 20px 0;
}
h1 a {
	font-size: 54px;
	line-height: 56px;
	display: inline-block;
}
h4 {
	font-size: 32px;
	line-height: 34px;
	float: right;
	padding: 34px 20px 0 10px;
	max-width: 280px;
	box-sizing:border-box;
}

/*************************SIDEBAR****************************/

.sidebar-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;
	min-height: 100%;
	padding: 135px 0 130px;
	box-sizing:border-box;
	z-index: 100;
}
.sidebar-container .sidebar-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;
	height: 110px;
}
.sidebar-container .sidebar-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 130px;
	height: 130px;
}
.menu-menu-container input[type='checkbox'], .menu-menu-container input[type='checkbox'] ~ label {
    display: none;
}
/***************************MENU******************************/

.menu li {
	display: inline-block;
	margin: 0 0 8px 15px;
	border: 8px solid #caa379;
	-webkit-border-image: url(img/button-border.png) 10;
	border-image: url(img/button-border.png) 10;
}
.menu li a {
	display: inline-block;
	font-size: 11px;
	line-height: 12px;
	padding: 4px 6px;
	color: #fcf6df;

}
.menu li a:hover {
	background: #d2903d;
    -webkit-transform: rotate(-5deg); 
	transform: rotate(-5deg);
}
.menu .current-menu-item a {
	background: #d2903d;
}
.menu .current-page-ancestor a {
    background: #d2903d;
}
.menu ul {
    list-style: none;
}

/*************************CONTENT*****************************/

.main-container {
	padding-left: 132px;
	position: relative;
}
.content {
	min-height: 550px;
	padding: 25px 35px 25px 30px;
	background: #f0dfb0 url(img/bg.jpg) no-repeat;
	background-size: cover;
	box-sizing:border-box;
}
.content>p {
	padding-bottom: 14px;
}
.content li {
	margin-left: 25px;
}
/***************************HOME******************************/

.home .content {
	min-height: 543px;
	padding: 0;
	background: #f0dfb0 url(img/home.jpg) no-repeat;
	background-size: cover;
}
/*************************HOMMAGE*****************************/

.content blockquote p {
	line-height: 22px;
	text-transform: uppercase;
	color: #914c02;
}
.content blockquote p cite {
	display: inline-block;
	line-height: 18px;
	text-transform: capitalize;
	padding: 12px 0 40px;
}
.content .hommage-image {
	float: right;
	padding-left: 25px;
}
.page-id-16 .sidebar-top {
	background: url(img/mara.jpg) no-repeat;
}
.page-id-16 .sidebar-bottom, .home .sidebar-bottom {
	background: url(img/hommage-sidebar-bottom.png) no-repeat center;
}
/************************BIOGRAPHIE****************************/

.page-id-47 .sidebar-bottom {
	background: url(img/biographie-sidebar-bottom.png) no-repeat center;
}
.page-id-47 .sidebar-top {
	background: url(img/mara-biographie.jpg) no-repeat;
}
.text-line {
	height: 4px;
	background: url(img/line.png) no-repeat;
	background-size: contain;
	margin-bottom: 20px;
}
.page-id-47 .main-container::before {
	height: 111%;
}
.page-id-47 .main-container::after {
	height: 111%;
}
.biographie-img {
	float: right;
	padding-left: 25px;
	clear: right;
}
/*******************LA KORA & GALERIE & DISCOGRAPHIE********************/

.page-id-49 .sidebar-top {
	background: url(img/mara-la-kora.jpg) no-repeat;
}
.page-id-49 .sidebar-bottom, .page-id-51 .sidebar-bottom, .parent-pageid-51 .sidebar-bottom {
	background: url(img/lakora-sidebar-bottom.png) no-repeat center;
}
.page-id-51 .sidebar-top, .parent-pageid-51 .sidebar-top {
	background: url(img/mara-galerie.jpg) no-repeat;
}
.galerie-container {
	float: left;
	margin-bottom: 10px;
	text-align: center;
	width: 33%;
}
.discographie-container {
	float: left;
	min-height: 275px;
	margin-bottom: 14px;
	width: 33%;
	text-align: center;
}
.galerie-container>p {
	text-align: left;
	padding: 5px 0 0 15%;
}
.galerie-container .img-block {
	display: inline-block;
	border: 13px solid #90764b;
	-webkit-border-image: url(img/galerie-image-border.png) 13;
	border-image: url(img/galerie-image-border.png) 13;
}
.galerie-container .img-block>a {
	display: block;
	padding: 1px 2px 0 2px;
	background: #cbae81;
}
.galerie-container>p>a, .discographie-container>p>a {
	display: inline-block;
}
.galerie-container>p>a:hover span {
	color: #bf6e1f;
}
.galerie-container span {
	color:#aa3502;
	font-weight: bold;
	line-height: 15px;
}
#cboxLoadedContent {
	background-color: #000 !important; 
}
.discographie-container .img-block img {
	display: block;
}
.discographie-container .img-block {
	display: inline-block;
	border: double 3px #000;
}
.page-id-53 .sidebar-bottom {
	background: url(img/discographie-sidebar-bottom.png) no-repeat center;
}
.page-id-53 .sidebar-top {
	background: url(img/mara-discographie.jpg) no-repeat;
}
.page-id-53 .content>p {
	clear: both;
	padding: 14px 20% 0 0;
}
.discographie-container .discographie-description {
	padding: 10px 0 5px 10%;
	line-height: 16px;
	text-align: left;
}
.discographie-container:first-child .discographie-description {
	padding-top: 7px;
}
a.back-to-gallery {
        display: inline-block;
        color: #3e2d12;
        line-height: 18px;
        margin: 20px 0 0 20px;
        padding-left: 23px;
position:relative;
       
}
a.back-to-gallery:before{
 background: url(http://calebasse.ch/img/back-to-gallery.png) no-repeat left center;
content:'';
position:absolute;
height:18px;
width:20px;
left:0;
}
a.back-to-gallery:hover, a.back-to-gallery:active {
       color: #da4f02;
       text-decoration: none;
}
a.back-to-gallery:hover:before, a.back-to-gallery:active:before {
       background-position: -24px center;
}
.gallery-caption{
	display:none;
}
/**************************CONTACT*****************************/

.page-id-55 .sidebar-bottom {
	background: url(img/contact-sidebar-bottom.png) no-repeat center;
}
.page-id-55 .sidebar-top {
	background: url(img/mara-contact.jpg) no-repeat;
}
.page-id-55 .content {
	background: #f0dfb0 url(img/bg-contact.jpg) no-repeat;
	background-size: cover;
}
form.wpcf7-form {
	margin-top: 30px;
}
form * {
    font-family: 'Verdana', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: #3e2d12;
    background: inherit;
}
input.form-quiz {
	width: 41px !important;
}
.content form p {
	margin-bottom: 10px;
}
.content form input[type='text'], .content form input[type='email'] {
    line-height: 18px;
    width: 100%;
    padding: 0 10px;
    border: 6px solid #61471e;
    border-image: url(img/input-border.png) 8;
    box-sizing:border-box;
}
.content form span[data-name="nom"], .content form span[data-name="email"] {
    display: inline-block;
    width: 33%;
    vertical-align: top;
}
.content form span.form-quiz input[type='text'] {
    width: 41px;
    padding: 0 9px;
    border: 5px solid #61471e;
    border-image: url(img/input-border.png) 8;
}
.content form span[data-name="message"] {
	display: inline-block;
	width: 65%;
}
.content textarea {
    width: 100%;
    height: 130px;
    resize: none;
    border: 15px solid #61471e;
    border-image: url(img/textarea-border.png) 24;
    box-sizing: border-box;
}
.content form {
	overflow: hidden;
}
.content form .form-text {
	float: right;
	margin: 0 36% 10px 20px;
	color: #bf6e1f;
}
.content form .submit-block {
	float: right;
	clear: right;
    margin: 15px 37% 20px 0;
    display: inline-block;
    text-align: right;
}
.content form .submit-border {
	display: inline-block;
    margin-left: 10px;	
    border: 6px solid #61471e;
    border-image: url(img/input-border.png) 8;
}
.content form .form-envoyer {
    width: 80px;
    height: 20px;
    background: #e8e0bc;
    border: none;
    box-shadow: 0 0 1px 1px #e8e0bc;
}
.content form .form-envoyer:hover {
    cursor: pointer;
    color: #d2903d;
}
input::-webkit-input-placeholder {
    color: #3e2d12;
}
input:-moz-placeholder {
    color: #3e2d12;
}
textarea::-webkit-input-placeholder {
    color: #3e2d12;
}
textarea:-moz-placeholder {
    color: #3e2d12;
}
.wpcf7-not-valid-tip {
    padding: 3px 0;
}
.wpcf7-response-output{
    float:left;
    width:100%;
    margin: 5px 0 20px !important;
    border: 2px solid #d2903d !important;
    box-sizing:border-box;
}
/**********************MOBILE & TABLETS VERSION***************************/

@media only screen and (max-width: 910px) {
    .galerie-container {
		width: 50%;
	}
	.galerie-container>p {
		text-align: center;
		padding-left: 0;
	}
	.gallery .gallery-item {
		width: 50% !important;
	}
	.discographie-container {
	    width: 50%;
	}
	.discographie-container .discographie-description {
		padding: 10px 0 5px 0;
		text-align: center;
	}
	.content form span[data-name="nom"], .content form span[data-name="email"] {
	    width: 47%;
	}
	.content form span[data-name="message"] {
		width: 80%;
	}
	.content form .form-text {
		margin: 0 21% 10px 10px;
	}
	.content form .submit-block {
	    margin: 15px 22% 20px 0;
	}
}

@media only screen and (max-width: 680px) {
	.wrapper {
		padding: 0 0 15px;
		min-width: 320px;
	}
	.content {
		padding: 20px 20px 15px;
	}
	.sidebar-top, .sidebar-bottom, .menu {
		display: none;
	}
	.main-container {
	    padding: 0 10px;
	    border-top: 2px solid #c8925d;
	    border-bottom: 2px solid #c8925d;
	}
	.header {
		height: auto;
		min-height: 75px;
	    margin: 0;
	    padding: 0 10px;
	}
	h1 {
		float: left;
		padding: 10px 20px 0;
	}
	h4 {
		float: left;
		clear: both;
		padding: 0 10px 5px 20px;
		max-width: 250px;
	}
    .galerie-container {
		width: 100%;
	}
	.gallery .gallery-item {
		width: 100% !important;
	}
	.content .hommage-image {
		display: inline-block;
		text-align: center;
		padding-left: 0;
		float: none;
		width: 100%;
	}
	.discographie-container {
	    width: 100%;
	}
	.content form span[data-name="nom"], .content form span[data-name="email"] {
	    width: 65%;
	}
	.content form span[data-name="message"] {
		width: 95%;
	}
	.content form .form-text {
		margin: 0 6% 10px 0;
	}
	.content form .submit-block {
	    margin: 15px 7% 20px 0;
	}
	.main-container::before, .main-container::after {
		display: none;
	}
	.page-id-55 .wrapper {
		overflow: visible;
	}
	.wrapper::before {
		left: 8px;
		top: 10px;
		width: 2px;
		height: 100%;
		background: #c8925d;
	}
	.wrapper::after {
		left: auto;
		bottom: auto;
		right: 8px;
		top: 24px;
		width: 2px;
		height: 100%;
		background: #c8925d;
	}
	/**********************mobile-menu************************/
	.sidebar-container {
	    top: -60px;
	    left: auto;
	    right: 25px;
	    width: 41px;
	    min-height: auto;
	    height: 23px;
	    padding: 0;
	}
    #mobile-menu {
        position: absolute;
        display: block;
        opacity: 0;
        visibility: hidden;
    }
    #mobile-menu:checked ~ ul {
        display: block;
    }
    #mobile-menu + label {
        display: block;
        width: 41px;
        height: 23px;
        background: url(img/menu-icon.png) no-repeat center;
        background-size: contain;
    }
    #mobile-menu + label:hover {
    	background: url(img/menu-icon-hover.png) no-repeat center;
    	cursor: pointer;
    }
    .menu-menu-container {
    	position: absolute;
    }
    .menu-menu-container .menu {
    	position: absolute;
    	right: 0;
    	top: 30px;
    	background: #bf6e1f;
    	padding: 20px 10px 8px;
    	border: 2px solid #cdb395;
    	box-shadow: 0 0 4px 4px rgba(0,0,0,0.3);
    }
    .menu li {
		margin: 0 0 12px 0;
		border: 5px solid #caa379;
		-webkit-border-image: url(img/button-border.png) 10;
		border-image: url(img/button-border.png) 10;
	}
	.menu li a {
		padding: 5px 8px;
		color: #fcf6df;
	}
}

@media only screen and (max-width: 420px) {
	.page-id-49 .biographie-img {
		float: none;
		text-align: center;
		padding-left: 0;
	}
}