/*
Theme Name: carambolage
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carambolage
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

carambolage is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}



button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}



dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}




@font-face {
    font-family: Apercu_web;
    src: url(inc/fonts/apercu_regular.eot), url(inc/fonts/apercu_regular.woff) format('woff') ;
}

@font-face {
    font-family: TimesNewRamen;
    src: url(inc/fonts/TimesNewRamen-Regular.eot), url(inc/fonts/TimesNewRamen-Regular.woff) format('woff') ;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

 * {
	box-sizing:border-box;
}

body {
	font-family:'Apercu_web', 'Helvetica';
	font-weight:lighter;
		
}


.menu1 div#di0, .text div#text0, .text div#text0 a, .close .farb1 {
	background-color:rgb(45,45,45);    color:rgb(214,34,124);}
.menu1 div#di1, .text div#text1, .text div#text1 a, .close .farb2 {
	background-color:rgb(93,194,183);  color:rgb(254,241,3);}
.menu1 div#di2, .text div#text2, .text div#text2 a, .close .farb3 {
	background-color:rgb(254,241,3);   color:rgb(214,34,124); } 
.menu2 div#di3, .text div#text3, .text div#text3 a, .close .farb4 {
	background-color:rgb(35,164,214);  color:rgb(250,250,250);}
.menu2 div#di4, .text div#text4, .text div#text4 a, .text #text4 input, .close .farb5 {
	background-color:rgb(250,250,250); color:rgb(45,45,45); }
.menu2 div#di5, .text div#text5, .text div#text5 a, .text  #text5 input, .close .farb6 {
	background-color:rgb(214,34,124);  color:rgb(250,250,250);}


.menu1, .menu2, .text {
	color:white;
	border: solid 0px red;
	text-decoration:none;
	text-align:center;
	

}
.text a {
	color:white;
	text-decoration:underline;
}
.menu1, .menu2 {
	white-space: nowrap;
	display:block;
	width:25%;
	height:100%;
	position:fixed;
	top:0px;
	border:solid 0px black;
}
.menu1 { 	left:0px; 	right:75%; }
.menu2 { 	left:75%; 	right:0px; }

.outertile  {
	cursor: pointer;
	text-decoration: none;
	width:100%;
	height:33.5%;
	float:left;
	position: relative;
}
.innertile {
	display:block;
	font-size:2.2em;
	line-height:2.2em;
	border:solid 0px red;
	height:2.2em;
	left:0px;
	right:0px;
	width:100%;
	text-align:center;
	top:0px;
	bottom:0px;
	position:absolute;
	margin:auto;
}
.innertile.emoj {
	display:none;
	font-size:3em;
}
.menu2 img {
	height:3em;
	display:inline;
	text-align:center;
}
.text {
	display:block;
	width:50%;
	height:100%;
	position:absolute;
	left:25%;
	right:25%;
	top:0px;
	border:solid 0px red;
	overflow:auto;
}
.text div.conts {
	padding:1em;
 	display:none;
 	min-height:100%;
 	text-align:left;
 	font-size:1.2em;
}
@media screen and (max-width: 700px) {
	.text div.conts {
	 	font-size:1.6em;
	}
}
.conts p:first-of-type {
	margin-top:0;
}
#text1 .month{
	display:block;
	margin-bottom:0.5em;
}
#text1 .month:not(:first-of-type) {
	margin-top:1em;
}
#text1 .date{
	display:inline-block;
	width:4em;
	margin-left: -4em;
}

#text1 .e_title{
	display:inline-block;
	padding-left: 4em;
}
#text1 .event{
	display:block;
	cursor:pointer;
	margin-top:0.5em;
	margin-bottom:0.5em;
 }
#text1 .more{
	display:none;
	margin-bottom:0.5em;
	margin-left: 4em;
}

#text1 .vermut {
	background-color:rgb(254,241,3);
	color:rgb(45,45,45);
	padding:0.5em;
	display:block;
	margin-top:2em;
	overflow: hidden;
 	white-space: nowrap;
	animation: marquee 8s ease-out infinite;
}

.text div#text1 {
	display:block;
 }
 
#text1 p {
	margin-top:0px;
	margin-bottom:0.5em;
}

@keyframes marquee {
 0%   { text-indent: 100% }
 20% { text-indent: 0% }
 100% { text-indent: 0% }
}


#text4 input, #text5 input{
	margin: 0.2em 0 1em 0;
	width:100%;
	font-size:1em;
	word-break:none;
	white-space: nowrap;
 	display:block;
 	max-width:100%;
	-webkit-filter: brightness(95%);
  	filter: brightness(95%);
  	padding:0.5em;
	border:0px;
	border-radius:0px;
	 -webkit-appearance: none;
	 cursor:pointer;
}


::-webkit-input-placeholder {
   color: inherit;
}

:-moz-placeholder { /* Firefox 18- */
   color: inherit;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: inherit;  
}

:-ms-input-placeholder {  
   color: inherit;  
}

#text4 input#send, #text5 input#send {
 	display:block;
	padding: 0.5em;	
	}


#text4 input#send:hover, #text5 input#send:hover {
	background-color:rgba(155,155,155,0.1);
}
 
.huerotate {
   -webkit-filter: hue-rotate(180deg);
   filter: hue-rotate(180deg);
}
.invert {
   -webkit-filter: hue-rotate(180deg);
   filter: hue-rotate(180deg);
}
.rotate {
   transform: rotate(-45deg);
}

.blur {
	filter: blur(2px);
	-webkit-filter: blur(2px) ;
	-moz-filter: blur(2px) ;
	-o-filter: blur(2px) ;
	-ms-filter: blur(2px);
}
.grey {
	filter: grayscale(100%) contrast(150%) invert(1);
	-webkit-filter:  grayscale(100%) contrast(150%) invert(1);
	-moz-filter:  grayscale(100%) contrast(150%) invert(1);
	-o-filter: grayscale(100%) contrast(150%) invert(1);
	-ms-filter: grayscale(100%) contrast(150%) invert(1);
}
.emoji {
   font-family:'Apple Color Emoji';
}
div.backimg {
	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
}

.ramen {
	font-family:'TimesNewRamen';
	font-size:70%;
}

.flipped{
/*		display:inline-block;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
*/
}


.text .close {
	position:fixed;
	display:block;
	bottom:70px;
	left:0px;
	right:0px;
	width:50px;
	height:50px;
	display:none;
	z-index:500;
	font-size:50px;
	margin:auto auto;
	padding:0px;
	cursor:pointer;
	color:red;
}


.text .close div {
	width:50%;
	height:33.333%;
	float:left;
	display:block;
}
.text .close_c {
	display:none;
	width:100%;
}


@media screen and (min-width: 1200px)  { 
	body {
		font-size:18px;
	}
}
@media screen and (min-width: 1600px)  { 
	body {
		font-size:25px;
	}
}



@media screen and (max-width: 700px)  { 
	body {
		font-size:10px;
	}
}

@media screen and (max-width: 500px)  { 
	body {
		font-size:9px;
	}
}


 

@-webkit-keyframes swing{
  from{
    -webkit-transform: rotate(20deg);
    }
  to{
     -webkit-transform: rotate(-20deg);
    }
  }



#di4 img { 
 -webkit-animation-name: swing;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
  -webkit-animation-direction: alternate;
  -webkit-transform-origin: 50% 3%;
}
@-webkit-keyframes swing_emoj{
  from{
    -webkit-transform: rotate(160deg);
    }
  to{
     -webkit-transform: rotate(200deg);
    }
  }

#di4 .innertile.emoj 
{
     display:none;
      -webkit-animation-name: swing_emoj;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
  -webkit-animation-direction: alternate;
  -webkit-transform-origin: 51% 69%;
	margin-top:0.5em;
}