/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

/* ========================================================================


 ========================================================================== */


.uk-container{
max-width: 100%;
padding: 0px;
}

.tm-wrapper {
background-image: url("../images/texture.jpg")!important;
background-repeat: no-repeat !important;
background-position: 50% 1150px !important;
background: #f2efed;
padding-bottom: 0px;
}

.tm-background {
height: 960px;
}

.tm-background:after {
   background-image: none;
}

.tm-content {
background-image: url("../images/texture-bleu.jpg")!important;
background-repeat: no-repeat !important;
background-position-x: center !important; 
padding-top: 20px;
}

.uk-article{
background: none !important;
padding-bottom: 0px !important;
}

.tm-top-a{
padding-bottom: 25px;
max-width: 1175px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 10px;
padding-right: 25px;
}

.tm-bottom-a {
background-color: none;
max-width: 1175px;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 40px;
padding-right: 15px;
padding-left: 10px;
padding-right: 25px;
}

.tm-bottom-b {
background-color: none;
max-width: 1175px;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 40px;
padding-right: 15px;
padding-left: 10px;
padding-right: 25px;
}

.tm-bottom-c {
padding-top: 40px;
padding-bottom: 80px;
padding-left: 10px;
padding-right: 25px;
max-width: 1175px;
margin-left: auto !important;
margin-right: auto !important;
}

#tm-bottom-d{
background: #ffffff !important;
padding-top: 60px;
padding-bottom: 0px;
padding-left: 25px;
padding-right: 25px;
margin-bottom-0px;
margin-left: auto !important;
margin-right: auto !important;
}

.wk-slideshow{
max-width: 100%;
margin-left: auto !important;
margin-right: auto !important;
}

#tm-top-c{
background-color: #ffffff 0% !important;
padding-top: 60px;
padding-bottom: 0px;
margin-top: 35px;
margin-left: auto !important;
margin-right: auto !important;
}

.tm-footer{
background-color: #3f5c79;
text-color: #ffffff;
}

.uk-panel-space{
padding-bottom: 0px;
padding-top: 60px;
}

.uk-panel-box{
padding: 30px;
}

.uk-overlay-area{
background: rgba(51, 94, 138, 0.8);
}

.uk-overlay-area-content{
padding: 0px;
vertical-align: bottom;
margin-bottom:-4px;
}

hr{
border-top: 2px solid #ffffff;
margin-top: 0px;
margin-bottom: 50px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 10px;
padding-right: 25px;
}



/* ========================================================================
   FONT
 ========================================================================== */

p{
font-size: 19px;
line-height: 30px;
color: #352e29;
}


h1{
color: #6489af;
text-transform: none;
font-size: 46px;
line-height: 52px;
margin-bottom: 20px;
}

h2{
margin: 0 0 15px 0;
font-family: 'Lato';
font-size: 32px;
font-weight: 100;
color: #6489af;
text-transform: none;
margin-top: 0px;
}

h3{
color: #6489af;
text-transform: none;
font-size: 22px;
line-height: 26px;
}

h6{
color: #9f9f9e;
text-transform: none;
font-size: 15px;
line-height: 22px;
}

h7{
color: rgba(255, 255, 255, 0.3);
text-transform: none;
font-size: 11px;
line-height: 16px;
}

h8{
margin: 0;
font-family: 'Lato';
font-size: 32px;
font-weight: 100;
color: #6489af;
text-transform: none;
}

small{
color: #9f9f9e;
font-size: 90%;
font-weight: 500;
padding-left: 5px;
}

.uk-width-1-3.uk-scrollspy-init-inview.uk-scrollspy-inview.uk-animation-fade{
color: #3f5c79;
font-weight: 500;
}

a{
color: #4d6b8a;
}

a:hover{
color: #6489af;
}


/* ========================================================================
   MENU

 ========================================================================== */

.uk-navbar-nav > li > a{
color: rgba(255, 255, 255, 0.9);
text-transform: none;
font-size: 20px;
border-width: 1px;
margin-left: 10px;
}

.uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li.uk-open > a{
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.0);
border-width: 1px;
background-color: rgba(255, 255, 255, 0.1);
}

.uk-navbar-nav > li.uk-active > a{
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
border-width: 1px;
}

.tm-navbar-space .tm-navbar{
margin-bottom: 50px;
margin-top:30px;
}

.uk-subnav > li > a{
color: rgba(255, 255, 255, 0.4);
}

.uk-subnav > li > a:hover{
color: #ffffff;
}

.uk-navbar-toggle{
color: #ffffff;
margin-left: 15px;
}




/* ========================================================================
   AUDIO
========================================================================== */

audio {
width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;

} 

/* ========================================================================
   CLASS
 ========================================================================== */

.song{
position: relative;
background: #ffffff;
text-align: left;
padding: 20px;
}

.chanson{
font-size: 18px;
line-height: 22px;
margin-top: 10px;
margin-bottom: 0px;
}

.compositeur{
font-size: 12px;
margin-top: 0px;
text-transform: uppercase;
}

.extrait{
color: #ffffff;
font-size: 22px;
margin-bottom: 20px;
}

#home{
background-color: #faf7f4;
}

.intro{
color: #ffffff !important;
text-align: center;
margin-left: 100px;
margin-right: 100px;
}

.img100{
width: 100% !important;
}


/* ========================================================================
  ICONS
 ========================================================================== */

.uk-icon-button{
color: #6489af;
width: 40px;
height: 40px;
font-size: 26px;
}

.uk-icon-button:hover{
color: #3f5c79;
}

.uk-icon-quote-left{
padding-right: 5px;
color: #9f9f9e;
}

.uk-icon-quote-right{
padding-left: 5px;
color: #9f9f9e;
}

/* ========================================================================
  BUTTON
 ========================================================================== */

.uk-button{
background: #f0efed;
color: #4c433b;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
line-height: 22px !important;
}

.uk-button:hover{
background: #6489af;
color: #ffffff !important;
}


/* ========================================================================
  MOBILE
 ========================================================================== */

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {



}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {

h1{
font-size: 40px;
line-height: 46px;
}

.tm-background {
height: 900px;
}

.tm-wrapper {
background-position: 50% 900px !important;
}

.tm-navbar-space .tm-navbar{
margin-top: 0px !important;
margin-bottom: 120px !important;
}

.intro{
color: #ffffff !important;
text-align: center;
margin-left: 0px;
margin-right: 0px;
}

}

/* Only Phones */
@media (max-width: 767px) {

h1{
font-size: 32px;
line-height: 36px;
}

.tm-navbar-space .tm-navbar{
margin-bottom: 120px !important;
margin-top: 0px !important;
}

.tm-background {
height: 750px;
}

.tm-wrapper {
background-position: 50% 750px !important;
}

.intro{
color: #ffffff !important;
text-align: center;
margin-left: 0px;
margin-right: 0px;
}

}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {

.tm-background {
height: 800px;
}

.tm-wrapper {
background-position: 50% 800px !important;
}

}

/* Only Phones (Portrait) */
@media (max-width: 479px) {



}

/* Only Phones (Portrait) */
@media (max-width: 320px) {

h1{
font-size: 24px;
line-height: 30px;
}

}