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

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

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

.tm-content {
background: #ffffff !important;
}


temoignages {
background-color: #8d9e7f !important;
}

.tm-top-a{
margin-bottom:80px;
}

.tm-bottom-a {
background-color: none;
}

.tm-bottom-b {
padding-top: 40px;
padding-bottom: 80px;
}

#tm-bottom-c{
background: #ffffff !important;
padding-top: 60px;
padding-bottom: 0px;
margin-bottom-0px;
}

.tm-background {
height: 440px;
}

 .tm-background > .temoignages{
height: 200px;}

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



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

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

.tm-content > .uk-article{
background: #fcf8f5;
}

main.tm-content {
background: #fcf8f5;
}

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

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

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


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

hr{
border-top: 3px solid #ffffff;
margin-top: 0px;
margin-bottom: 50px;
}

.uk-grid-divider > *{
padding-bottom: 15px;
}



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

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

h2{
margin-top: 30px !important;
margin-bottom: 20px !important;
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: #4c433b;
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;
}

p{
font-size: 19px;
line-height: 30px;
color: #4c433b;
}

li{
color: #4c433b;
}

small{
color: #6489af;
font-size: 14px;
}



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
 ========================================================================== */




.mejs-container .mejs-controls .mejs-time .mejs-duration {
display: none;
}
/* ========================================================================
   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;
}

#home{
background-color: #faf7f4;
}

.phrase-accueil{
color: #9f9f9e;
}


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

.uk-icon-button{
color: #5f7c9a;
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: #f8f7f6;
color: #9f9f9e;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}

.uk-button:hover{
background: #5f7c9a;
color: #ffffff;
}

/* ========================================================================
  FORMS
 ========================================================================== */

textarea{
height: 200px;
width: 99%;
padding-right: 5px;
}

@media (max-width: 1220px) {  
.tm-background {
height: 820px;}
}

/* ========================================================================
  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-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) {

.uk-article{
padding: 20px !important;
}

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

.tm-navbar-space .tm-navbar{
margin-bottom: 120px !important;
margin-top: 0px !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) {


}

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

p{
font-size: 14px !important;
line-height: 20px !important;
}

}

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

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

p{
font-size: 14px !important;
line-height: 20px !important;
}

}