@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700);

body {font-family: 'Quattrocento Sans', sans-serif;}
/* ÉLÉMENTS DE BASE */
h1, h2, h3, h4, h5 {text-transform: uppercase; font-family: 'Quattrocento Sans', sans-serif;}
h1 {font-size: 21px; margin:0; line-height: 23px;}
h2 {font-size: 25px; }
h3 {font-size: 21px;}
a:link, a:visited {color: inherit; text-decoration: none;}
a:hover, a:active, a:focus {text-decoration: underline; color: inherit;}
p {font-size: inherit; margin: 0; padding: 0;}
.upper {text-transform: uppercase;}
.no-margin-fix { font-size: inherit; margin-bottom: 0 !important;}
/* THEMES */
.base-black-theme{background-color: #141414; color: white; padding: 30px 21px; margin: 10px 0;}
.base-green-theme {background-color: #8ba23a; color: white;}

.base-darkgreen-theme {background-color: #5f791a; color: white; margin-bottom: 10px;}
.base-darkgreen-theme .texte {padding: 20px 40px; }

.base-yellow-theme {background: #f2d23e url(../medias/guitare-jaune.jpg) no-repeat center; background-size: cover; color: black;}
.base-yellow-theme .texte {padding-left: 35px; padding-right: 35px; padding-bottom: 30px;}

.base-gray-theme {background-color: #f3f3f3; color: black; padding-top: 30px; padding-left: 21px; padding-right: 21px; padding-bottom: 21px; }
.base-gray-theme p {margin-bottom: 20px;}
.base-gray-theme li {padding-top: 11px; padding-bottom: 11px;}

.green-link-button {background-color: #8ba23a; color: white; padding: 9px 25px; text-transform: uppercase; display: inline-block; font-size: 24px;}
.green-link-button:link, .green-link-button:visited {color: white;}
.green-link-button:hover, .green-link-button:active, .green-link-button:focus {background-color: black; color: white; text-decoration: none;}



/* PAGE D'ACCUEIL + header + footer */
#header {background-color: white; padding: 10px 0;}
#header .logo img{ display: block; }
#header .main-title {padding-top: 40px;}
#header .tel {font-size: 22px; margin: 3px 0; padding-left: 30px; padding-right: 30px;}

#carousel {background: black url(../medias/jeune-guitariste.jpg) no-repeat center; background-size: cover; color: white; }
#carousel .row {padding-top: 115px; padding-bottom: 30px;}
#carousel .carousel-content {max-width: 370px;}
#carousel .green-link-button {margin-top: 35px; width: 380px; }
#carousel h2 {color: white !important;}
#carousel #rencontre{ border: thick solid #FFFFFF; width: 324px; text-align: center; margin-top: 35px; }

#contenu-1 {background-color: white; font-size: 21px; margin-bottom: 10px;}
#contenu-1 .source-citation {font-size: 12px;}
#contenu-1 .logo-vincent {padding-top: 45px; padding-left: 35px; padding-right: 15px; padding-bottom: 35px;}

#contenu-2 {background-color: #f3f3f3; color: black;}
#contenu-2 h2 {text-align: left;}
#contenu-2 .row {padding-top: 65px; padding-bottom: 45px; position: relative;}
#contenu-2 .left{ text-align: justify; }
#contenu-2 .left .first-section { margin-bottom: 40px; }
#contenu-2 .left .second-section { margin-bottom: 40px; }
#contenu-2 .left .consulter{ margin: 0; padding: 0; }
#contenu-2 .left .consulter .green-link-button{ font-size: 14px; padding: 15px 25px; }
#contenu-2 .instruments {position: absolute; right: 55px; top: 40px;}

#sous-banniere {background: black url(../medias/orpheline-avec-flute.jpg) no-repeat center; background-size: cover; height: 350px; color: white;}
#sous-banniere .row {padding-top: 115px;}
#sous-banniere .sous-banniere-texte {font-size: 34px;}

#contenu-3 {background-color: white; padding-top: 75px; padding-bottom: 60px;}
#contenu-3 h2 {text-align: left;}
#contenu-3 .texte {text-align: justify;}
#contenu-3 .list-wrapper {margin-top: 50px;}
#contenu-3 ul {padding: 45px 25px; margin-bottom: 0;}
#contenu-3 li {padding: 7px 0px; padding-right: 15px; font-weight: 700; line-height: 19px; font-size: 18px;}

#info {background-color: #f2f2f2; padding-top: 55px; padding-bottom: 45px;}
.info-ligne-1 {font-size: 21px;}
.info-contact {font-size: 21px;}
.info-mail {font-size: 20px; color: black;}
.info-mail:hover, .info-mail:active, .info-mail:focus {color: inherit; text-decoration: underline;}

#footer {background-color: white; padding-top: 15px; padding-bottom: 85px;}
#footer a {color: black;}

#addthis {float: right;}
#addthis .icon {padding: 0 5px; display: inline-block;}
#addthis .icon:hover, #addthis .icon:active, #addthis .icon:focus {color: #8ba23a;}


/* MOBILE */
@media only screen and (max-width: 40em) {  /* max-width 640px, mobile-only styles, use when QAing mobile issues */
	#header .logo img{ margin: 0 auto; }
	#header .main-title{ margin-bottom: 20px; }
	#carousel{ height: auto; }
	#carousel #inscription-button{ font-size: 16px; width: auto; }
	#carousel #rencontre{ float: none !important; height: auto; width: auto; }
	#contenu-1{ font-size: 16px; }
	#contenu-2 .left{ margin-bottom: 30px; }
	#contenu-2 .instruments{ display: none; }
	#contenu-3 .left{ margin-bottom: 30px; }
	#footer{ text-align: center; }
	#footer .left{ margin-bottom: 20px; }
	#sous-banniere .sous-banniere-texte {font-size: 24px;}
	.modal{ top: 620px !important; width: 300px; }
	.modal .tableau{ display: block; width: auto; }
	.modal .tableau tbody,
	.modal .tableau tr,
	.modal .tableau td{ display: block; }
}

/* 1204/IPAD STYLE */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
	#header .main-title{ padding-left: 0; padding-right: 0; }
	#header .header-contact{ font-size: 12px; padding-top: 15px; }

	#header .tel { font-size: 14px; padding: 6px 16px;}
	#footer .left{ font-size: 0.9em; }	
	#carousel #contacter-button{ font-size: 16px; }
	#contenu-1{ font-size: 18px; }
	#sous-banniere .sous-banniere-texte {font-size: 24px;}
	.modal{ top: 420px !important; width: 600px; }
}