/*
Theme Name: art&tram V02
Description: Thème enfant pour le thème Twenty Twelve
Author: HEAD — Genève, Valérie Pierrehumbert, head.hesge.ch/
Template: twentytwelve
*/
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
with any questions regarding Web Fonts:  http://www.linotype.com
*/

@import url("../twentytwelve/style.css");

@import url("http://fast.fonts.net/lt/1.css?apiType=css&c=afd3d5c4-8d9c-4395-92e8-999a000468f9&fontids=1290095");

@font-face{
font-family:"Foundry Monoline W01 Lt";
src:url("Fonts/1290095/e5de97bd-5e5f-403a-8e3a-42edfb24fa59.eot?#iefix");
src:url("Fonts/1290095/e5de97bd-5e5f-403a-8e3a-42edfb24fa59.eot?#iefix") format("eot"),url("Fonts/1290095/6486cfab-8f58-41fb-a723-0407883264ba.woff") format("woff"),url("Fonts/1290095/925ea81a-6b33-4f92-9181-ccc8c80979c7.ttf") format("truetype"),url("Fonts/1290095/70dd2192-cebe-49b6-bcbf-de1598808da2.svg#70dd2192-cebe-49b6-bcbf-de1598808da2") format("svg");
}



body {
    background-color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1.4;
	-moz-hyphens:none !important;
    -ms-hyphens:none !important;
    -webkit-hyphens:none !important;
	hyphens:none !important;
}
*{
	-moz-hyphens:none !important;
    -ms-hyphens:none !important;
    -webkit-hyphens:none !important;
	hyphens:none !important;
}
body.custom-font-enabled{
    /* font-family: Helvetica, Arial, sans-serif;*/
    font-family: 'Roboto Condensed', sans-serif;
}
body .site {
    box-shadow: 0 0px 0px rgba(255, 255, 255, 0.3);
    margin-top:0;
    margin-bottom: 0;
}
.site-header h1 a{
	font-family:"Foundry Monoline W01 Lt";
	width:321px;
	height:58px;
	display:block;
	background-image:url("images/logo-art-et-tram.png");
	color:transparent;
	text-indent: -3000px;
}
.site-header h1 a:hover{
	color:transparent;
}
.site-header h2{
	display:none;
}
/*NAVIGATION*/
hgroup{
	width:330px;
	float:left;
}
.main-navigation{
	width:630px;
	margin-left: 0;
	float:right;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul{
	border-top:0px;
	border-bottom:0px;
}
h1, h2,h3, h4{
	color:rgba(226, 0, 122, 1);
	text-transform:uppercase;
	font-family:"Foundry Monoline W01 Lt";
	font-weight: normal;
}
a, a:hover, a:visited{
	color:rgba(226, 0, 122, 1);
	text-decoration: none;
}

.entry-content .category_exerpt a, .entry-content .category_exerpt a:visited{
	color:#444 !important;
	text-decoration:none;
}
.entry-header .entry-title{
	text-align:right;
	font-size: 3.57143rem;
	line-height: 1em;
	margin-top: 0.2em;
}
.entry-content a:visited{
	color:rgba(226, 0, 122, 1) !important;
}

.entry-header.category_item .entry-title{
	text-align:left;
	font-size:1.3em;
}
.category .entry-box{
	margin-bottom:5em;
}
img.wp-post-image{
	margin-bottom:2em;
}
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a{
	color:rgba(226, 0, 122, 1) !important;
	font-weight: normal;
}
.main-navigation li .current-post-ancestor.current-menu-parent.current-post-parent > a{
	color:rgba(226, 0, 122, 1) !important;
	font-weight: normal;
}
.main-navigation{
	float: right;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul{
	text-align: right;
}
.main-navigation li {
    margin: 0 0 0 1.4rem;
    position: relative;
    line-height: 1;
}
.main-navigation li:first-of-type{
	margin: 0;
}
.main-navigation li a{
	font-family:"Foundry Monoline W01 Lt";
	font-size: 1.6em;
	line-height: 45px;
}
.home .main-navigation li#menu-item-80 a{
	color:rgba(226, 0, 122, 1);
}
.main-navigation li a:hover, .main-navigation li a:focus {
    color:rgba(226, 0, 122, 1);
}
#nav_menu-2 ul{
	text-align:right;
}
#nav_menu-2 li{
	display:inline-block;
	padding: 0 0 2px 20px;
	background-color: #fff;
}
#nav_menu-2 li a{
	color:#6A6A6A;
	text-decoration:none;
	font-size: 0.8em;
}
#nav_menu-2 li a:hover{
	color:rgba(226, 0, 122, 1);

}
.home .top-widget-area{
	max-width: 68.5714rem;
	margin:0 0 130px 0 ;

}
.top-widget-area{
	max-width: 68.5714rem;
	margin:125px 0 5px 0 ;

}
#nav_menu-2 li.current-menu-item a{
	color:rgba(226, 0, 122, 1);
	text-decoration:none;
	font-weight:bold;
}
.entry-content li{
	background: url(images/bg_list.png) no-repeat left 9px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.57143rem;
}
.single h2.artiste{
	text-align: right;
	font-size:1.57143rem ;
}

.grecaptcha-badge{
	display: none;
}
.page-id-76 .grecaptcha-badge,
.page-id-199 .grecaptcha-badge{
	display: block;
}


/* STRUCTURE */
.site-content{
	float:right;
	margin-top:0;
}
.widget-area{
	float:left;
}
#main{clear:both;}
.site-header{padding:0;position: relative;min-width: 960px;}
.home #main{
	padding-top:365px ;
}
#main{
	padding-top:30px
}
.home #content{
	display: none;
}
#bio_box{
	margin-bottom: 5.14286rem;
    padding-bottom: 1.71429rem;
    padding: 20px;
    background-color: #f0f0f0;
    margin-top: 5em;
    font-weight: 300;
}
#bio_box h2{
	margin-bottom: 0.5em;
}

.entry-content h6, .comment-content h6, #bio_box h6{
	margin-top: -1.2em;
	font-size: 0.8em;
	line-height: 1.3em;
	font-weight: 700;
}
h6.legend{
	margin-top: -1.2em;
	margin-bottom: 1.71429rem;
	font-size: 0.8em;
	line-height: 1.3em;
	font-weight: 700;
}


#bio_box .one-third{
	text-align: center;
	margin: 0;
	width: 33.3%;
}
#bio_box .one-third.first{
	text-align: left;
	margin: 0;
}
#bio_box .one-third.last{
	text-align: right;
	margin: 0;
}
.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image{
	border-radius:0;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* WIDGET HOMEPAGE */
.template-front-page .widget-area .widget, .template-front-page.two-sidebars .widget-area .front-widgets{
	width:100%;
}
#secondary.widget-area {
    margin: 80px 0 0 0;

}

.template-front-page #secondary.widget-area {
    margin: 1.71429rem 0 0 0;
}

.widget-area .widget h3{
	float:left;
	width:25%;
	color:rgba(226, 0, 122, 1);
	font-size: 1.57143rem;
	padding-top: 10px;
	}
div.srp-widget-container{
	float:left;
	width:75%;
	clear:none;
	display: block;
}
div.srp-widget-singlepost{
	float:left;
	width:33%;
	clear:none;
	border-bottom:0;
}
div.srp-content-box{
	padding:20px;
	position:relative;
}
h4.srp-post-title{
	text-transform:uppercase;
	min-height:60px;
	}
.widget-area .widget h4.srp-post-title a{
	text-decoration:none;
	color:rgba(226, 0, 122, 1);

}
p.srp-widget-date{
	color:rgba(226, 0, 122, 1);
	font-weight:bold;
	font-size:0.8em !important;
	position:absolute;
	top:0;
}
.template-front-page .widget-area, footer[role="contentinfo"]{
	border:0;
}
footer[role="contentinfo"]{
	font-size: 0.7em;
	margin-top: 0;
	padding-top: 0;
}
.widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget{
	line-height: 1.5;
}
.template-front-page .widget-area .widget, .template-front-page.two-sidebars .widget-area .front-widgets{
	margin-bottom: 0;
}
.widget-area .widget {
    -moz-hyphens:none !important;
    -ms-hyphens:none !important;
    -webkit-hyphens:none !important;
	hyphens:none !important;
}



/* SCROLL DIV PARAMM CSS*/
#scrolldivzone{
	clear: both;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 120px;
	overflow:hidden;
}
#makeMeScrollable
		{
			width:100%;
			height: 120px;
			position: relative;
		}

		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		#makeMeScrollable div.scrollableArea a
		{
			display: inline-block;
			width: 300px;
			height: 120px;
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
			color: transparent;
			-webkit-transition: all .6s ease;
    		-moz-transition: all .6s ease;
    		-o-transition: all .6s ease;
    		transition: all .6s ease;
		}
		#makeMeScrollable div.scrollableArea img{
			border-radius:0px !important;
			box-shadow:0px !important;
			width: 300px;
			height: 120px;
			margin: 0;
			padding: 0;
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
			filter: gray; /* IE6-9 */
			-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
			-webkit-transition: all .6s ease;
    		-moz-transition: all .6s ease;
    		-o-transition: all .6s ease;
    		transition: all .6s ease;

		}
		#makeMeScrollable div.scrollableArea a:hover{
			color:#FFF;
		}
		#makeMeScrollable div.scrollableArea a:hover > img{
			filter: none; /* IE6-9 */
			-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
		}
		#makeMeScrollable div.scrollableArea a:hover > .trameprojet{
			visibility: hidden;
		}
#makeMeScrollable .slide_title{
	position: absolute;
	bottom:20px;
	left: 20px;
	font-size: 1em;
	font-family:"Foundry Monoline W01 Lt";
}

/* SCROLL DIV PARAMM CSS HOMEPAGE*/
.home #scrolldivzone{
	clear: both;
	position: absolute;
	width: 100%;
	left: 0;
	top: 220px;
	height: 400px;
	overflow:hidden;
}
.home #makeMeScrollable
		{
			width:100%;
			height: 400px;
			position: relative;
		}

		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		.home #makeMeScrollable div.scrollableArea a
		{
			display: inline-block;
			width: 533px;
			height: 400px;
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
			color: transparent;
			-webkit-transition: all .6s ease;
    		-moz-transition: all .6s ease;
    		-o-transition: all .6s ease;
    		transition: all .6s ease;
		}
		.home #makeMeScrollable div.scrollableArea img{
			border-radius:0px !important;
			box-shadow:0px !important;
			width: 533px;
			height: 400px;
			margin: 0;
			padding: 0;
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
			filter: gray; /* IE6-9 */
			-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
			-webkit-transition: all .6s ease;
    		-moz-transition: all .6s ease;
    		-o-transition: all .6s ease;
    		transition: all .6s ease;

		}
		.home #makeMeScrollable div.scrollableArea a:hover{
			color:#FFF;
		}
		.home #makeMeScrollable div.scrollableArea a:hover > img{
			filter: none; /* IE6-9 */
			-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
		}
		.home #makeMeScrollable div.scrollableArea a:hover > .trameprojet{
			visibility: hidden;
		}
.home #makeMeScrollable .slide_title{
	position: absolute;
	bottom:40px;
	left: 40px;
	font-size: 2em;
	font-family:"Foundry Monoline W01 Lt";
	text-transform:uppercase;
}


#makeMeScrollable .trameprojet{
	visibility: hidden;
}
#makeMeScrollable .trameprojet{
	position: absolute;
	top: 0;
	left: 0;
}
#makeMeScrollable .Futurs .trameprojet{
	visibility: visible;
}

.home #makeMeScrollable .trameprojet{
	width: 533px;
	height: 400px;
	background-image: url(images/trameprojet.png);
}
#makeMeScrollable .trameprojet{
	width: 300px;
	height: 120px;
	background-image: url(images/trameprojet_small.png);
}

 /* WIDGET */
ul.list_arrets{
	margin: 0;
	padding: 0;
	ackground: url(images/bg_list_arrets.png) repeat-y;
}
ul.list_arrets li{
	margin: 0 !important;
	padding: 6px 6px 6px 30px;
	background: url(images/bg_list_arrets_middle.png) no-repeat left center;
	list-style: none;
	font-size: 0.9em !important;
}
.lien_tram a{
	text-decoration: none;
	padding: 12px 6px 6px 30px;
	background: url(images/icone_tram.png) no-repeat left center;
	display: inline-block;
	margin-top: 10px;
}
ul.list_arrets li.actif{
	background: url(images/bg_list_arrets_on.png) no-repeat left center;
}
ul.list_arrets li:first-of-type{
	background: url(images/bg_list_arrets_top.png) no-repeat;
}
ul.list_arrets li:last-of-type{
	background: url(images/bg_list_arrets_bottom.png) no-repeat;
}
ul.list_arrets li a{
	text-decoration: none !important;
}


.site-content article{
	border:0;
}




.home .entry-header{
	display:none;
}
/* MENU LANGUE */

.icl_languages_selector,
.widget_icl_lang_sel_widget{
	position: absolute;
	width: 150px;
	right: 150px;
	z-index:300;
}
#lang_sel_list ul{
	border: 0 !important;
	line-height: 1;
}
#lang_sel_list li{
	width: auto;
	border: 0 !important;
	line-height: 1;
}
#lang_sel_list a, #lang_sel_list a:visited{
	border: 0 !important;
	font-size: 0.8em;
	line-height: 1;
}
#lang_sel_list ul a, #lang_sel_list_list ul a:visited{
	line-height: 1;
}
#lang_sel_list a.lang_sel_sel{
	font-weight: bold;
}
.wpml-ls-legacy-list-horizontal{
	padding: 0;
}
.wpml-ls-legacy-list-horizontal a{
	padding: 0 10px;
}




/* GALLERIE D'IMAGE*/

#gallery-1 img {
    border: 0px solid #FFFFFF !important;
}
.gallery .gallery-icon img {
    height: auto;
    max-width: 100%;
    padding: 5%;
}






/* RESPONSIVE */

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
	.site-header{min-width: 0;}
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {text-align: left;}
	.menu-menu-principal-container{width: 100%;clear: both;}
	.main-navigation{width: 100%;}
	.home .top-widget-area {margin: 0 0 70px;}
}

/* =Media query for iPad and tablets HORIZONTAL */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	.site-header{min-width: 0;}
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {text-align: left;}
	.menu-menu-principal-container{width: 100%;clear: both;}
	.main-navigation{width: 100%;}
	.home .top-widget-area {margin: 0 0 70px;}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	.site-header{min-width: 0;}
	body .site{
		padding: 0 20px;
	}
	.top-widget-area, .home .top-widget-area{
		margin-bottom: 30px;
		margin-top: 10px;
	}

	hgroup{
		width:280px;
		clear: both;

	}
	.home #main{
		padding-top: 0;
	}
	.site-header h1 a{
		width:280px;
		height: 50px;
		-webkit-background-size: cover; /* pour Chrome et Safari */
  		-moz-background-size: cover; /* pour Firefox */
  		-o-background-size: cover; /* pour Opera */
 		 background-size: cover; /* version standardisée */
	}
	.main-navigation{
		float: none;
		width: auto;
	}
	#scrolldivzone{
		display: none;
	}
	.home #scrolldivzone{
		display: none;
	}
	.widget-area .widget h3{
		width: 100%;
		clear: both;
	}
	div.srp-widget-container{
		width: 100%;
		clear: both;
	}
	div.srp-widget-singlepost {
   	 	border-bottom: 0 none;
    	clear: both;
    	float: none;
    	width: 100%;
	}
	div.srp-content-box{
		padding: 0;
	}
	.main-navigation li {
    line-height: 1;
    margin: 0;
    position: relative;
    text-align: center;
    width: 100%;
}
	.entry-header .entry-title {
    font-size: 2.57143rem;
    text-align: left;
	}
	.single h2.artiste{
		text-align: left;
	}
	.menu-toggle {
    background-color: #fff;
    background-image: none;
    background-repeat: repeat-x;
    border:0px solid #D2D2D2;
    border-radius: 0px;
    box-shadow: 0 0 0 rgba(64, 64, 64, 0.1);
    color: rgba(226, 0, 122, 1);
    font-size: 0.785714rem;
    font-weight: bold;
    line-height: 1.42857;
    padding: 0.428571rem 0.714286rem;
	}
	.menu-toggle:active, .menu-toggle.toggled-on, .menu-toggle:visited {
    background-color: rgba(226, 0, 122, 1);
    background-image: none;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 #C6C6C6 inset, 0 0 0 0 #F4F4F4 !important;
    color: transparent;
	}
	.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
    	display: block;
    	text-align: center;
	}
	.menu-toggle{
		text-align: right !important;
		background-image: url(images/menu.png) !important;
		background-color: transparent !important;
		background-repeat: no-repeat !important;
		background-position: top right !important;
		height: 32px;
		color: transparent !important;
	}
	.menu-toggle.toggled-on{
		color: transparent;
		background-image: url(images/menu_on.png) !important;
		background-color: rgba(226, 0, 122, 1) !important;
		background-repeat: no-repeat;
		background-position: top right;
	}
	.main-navigation ul.nav-menu.toggled-on li{
		background-color: rgba(226, 0, 122, 1);
		clear: both;
	}
	.main-navigation ul.nav-menu.toggled-on li a{
	color:#fff !important;
	}
	.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
    color: #000;
    font-weight: normal;
}

}