/*
    orange : e75012
    predications or : cdab3a
    video vert : 64c5a4
    rencontres bleu : 3fb4c5
*/


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

html {
    font-size: 100%;
}

body {
    font-size: 62.5%;
    font-family: 'Open Sans', sans-serif;
    background: #f8f8f8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif;
}

h1.section-title {
    position: relative;
    font-size: 3.2em;
    font-style: italic;
    font-family: 'Vollkorn', serif;
    color: #78818a;
    /*margin-top: 0.5rem;*/
	margin-top:2em;
    text-align: center;
}

h1.section-title span {
    display: inline-block;
    padding: 0 1rem;
    background: #f8f8f8;
}

h2.section-title {
    position: relative;
    font-size: 2.5em;
    font-style: italic;
    font-family: 'Vollkorn', serif;
    color: #78818a;
    margin-top: 0.5rem;
    text-align: left;
}

h2.section-title span {
    display: inline-block;
    padding: 0 1rem;
    background: #f8f8f8;
}

p,
.top-bar-section {
    font-size: 1.6em;
}

.top-bar-title {
    padding: 0.5rem 0;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.round {
    border-radius: 100em;
}


/*    TOP-HEADER
==================== */

.site-title,
.site-title h1 {
    padding: 0;
    margin: 0;
}

.site-title a {
    font-size: .3em;
    text-indent: -99999px;
    padding: 0;
    width: 240px;
    height: 80px;
    background: url(../img/eglise-evangelique-toulouse.png) no-repeat;
    background-size: contain;
}

.top-header {
    background: #fff;
}

.top-bar {
    padding: 0;
    background: #fff;
}

.top-header .top-bar ul {
    list-style-type: none;
    margin-bottom: 0;
    background: #fff;
}

.top-header .top-bar li {
    float: left;
}

.top-header .top-bar li a {
    display: inline-block;
    color: #000;
    text-transform: capitalize;
    padding: 20px 10px;
    margin-left: 10px;
    border-bottom: 4px solid transparent;
    /*    background: yellow;*/
}

.top-header .top-bar-section li a.active,
.top-header .top-bar-section li a:hover {
    color: #e75012;
    border-bottom-color: #e75012;
}

.top-bar-section {
    padding-top: 1.8rem;
}

.top-header .row {
    position: relative;
}

nav.share {
    position: absolute;
    top: 0;
    right: 0;
    padding: .5rem;
    display: table;
}

nav.share .social-label {
    display: table-cell;
    vertical-align: middle;
    padding-right: .5rem;
}

nav.share .social-label p {
    text-transform: uppercase;
    font-size: 1.1em;
    line-height: 1em;
    color: #565d4b;
    max-width: 10rem;
    text-align: right;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    padding-right: .5rem;
}

nav.share ul {
    list-style-type: none;
    display: table-cell;
    margin: 0;
    padding: 0;
}

nav.share li {
    display: inline-block;
}

nav.share a {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;
    text-indent: -999px;
}

nav.share a:hover {
    opacity: .5;
}

nav.share a[title="twitter"] {
    background: #63cdf1 url(../img/share_twitter.png) no-repeat center;
    background-size: 60%;
}

nav.share a[title="facebook"] {
    background: #507cbe url(../img/share_facebook.png) no-repeat center;
    background-size: 60%;
}

nav.share a[title="email"] {
    background: #ff6937 url(../img/share_mail.png) no-repeat center;
    background-size: 60%;
}

nav.share a[title="googleplus"] {
    background: #4d4f54 url(../img/share_google.png) no-repeat center;
    background-size: 70%;
}

.titre_lien a {
    font-size: 1.9em;
    min-height: 3vmax;
}

.titre_lien br {
    display: none;
}

.titre_lien img {
    min-width: 10vmax;
    min-height: 10vmax;
    /* largeur maximum (62.5rem) doit etre identique à largeur max pour .row dans foundation.css */
    max-width: min(25vmin, 62.5rem);
    max-height: min(25vmin, 62.5rem);
}

.description_lien {
    padding-bottom: 2em;
}

@media only screen and (max-width: 40em) {
    .site-title a {
        width: 100%;
        height: 100px;
        background-position: center;
    }
    ul.right {
        position: absolute;
        z-index: 10;
        left: 2em;
        top: 0;
        display: grid;
    }
    .top-header .top-bar .lien_page {
        padding: 10px 5px;
        margin-left: 5px;
        line-height: 1.1em;
        display: block;
    }
    /* Icones partage/social en vertical*/
    nav.share ul {
        display: grid;
    }
    /* Suppression du texte partage/social (icones seulement)*/
    nav.share .social-label p {
        max-width: inherit;
    }
    .menu-icon.dark {
        margin-left: 1rem;
        margin-top: 0.5rem;
    }
    ul.logo {
        background: red;
        padding: 0em 1rem;
        overflow: auto;
        width: 100%;
        margin: 0;
        margin-top: -28px;
    }
    .top-header .top-bar-title li {
        text-align: center;
        float: none;
    }
    .top-header .top-bar-title li a {
        margin-left: 0px;
    }
    ul.logo li {
        float: none;
    }
    .top-bar-title {
        padding: 0.5rem 0;
        width: 94%;
    }
    .social-label p {
        display: none;
    }
    h1.section-title {
        font-size: 2em;
        margin-top: 0.5rem;
    }
    h2.section-title {
        font-size: 1.8em;
        margin-top: 0.5rem;
    }
    .titre_lien a {
        font-size: 1.3em;
    }
}


/*    PAGE-CONTENT
================== */

.page-content {
    /*padding: 6rem 0;*/
    /*padding: 10vmin 0;*/
    padding: 2vmax 0;
    background: #fff;
}

.row-slider {
    position: relative;
}

.main-slider {
    width: 100%;
}

.a-slide {
    height: 100%;
    width: 100%;
    background-size: cover !important;
    background: url(../img/hero_bg.jpg) no-repeat center;
}

.a-slide .row {
    position: relative;
}

.slick-slider {
    height: 100%;
}

.slide1 {
    background: url(../img/hero_bg.jpg) no-repeat center;
}

.slider_content {
    position: absolute;
    padding: 0 .5rem 0 .5rem;
    text-align: center;
    height: 100%;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slider_content h1 {
    font-family: 'Open Sans';
    font-weight: 300;
    line-height: 1em;
    font-size: 4.6em;
    color: #000;
}

.slider_content span {
    display: block;
}

.color_me {
    color: #e75012;
}

.slider_content p {
    color: #000;
    width: 80%;
    margin-top: 20px
}

@media only screen and (max-width: 40em) {
    .slider_content {
        width: 100%;
    }
    .slider_content h1 {
        font-size: 2.2em;
    }
    .slider_content p {
        display: none;
    }
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .slider_content {
        width: 80%;
    }
    .slider_content h1 {
        font-size: 3.3em;
    }
    /*    .slider_content p{ display: none;}*/
}


/*    SECTION
================== */

h1.section-title:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    content: "";
    height: 2px;
    width: 90%;
    max-width: 55rem;
    z-index: -1;
    background: #78818a;
}

.truncate {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.last-post-audio .post-title,
.last-post-video .post-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 900;
    font-size: 2.2em;
    color: #e75012;
}

.last-post-audio .post-info p,
.last-post-video .post-info p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    color: #5d5c55;
    font-style: italic;
}

.mejs__container {
    background: #78818a;
}

.audio-player {
    width: 100%;
    min-width: 14rem;
}

.button-line .action-button {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    padding-left: 2em;
    padding-right: 2em;
	margin: 1em;
    color: #fff;
    border: solid 9px rgb(235, 236, 237);
    background: #e75012;
    background-image: -webkit-linear-gradient( 90deg, rgb(230, 80, 20) 0%, rgb(233, 97, 41) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(230, 80, 20) 0%, rgb(233, 97, 41) 100%);
}

.button-line .action-button:hover {
    background: #b84e22;
}

.video-player {
    position: relative;
    padding-bottom: 56.25%;
    /*margin: 3vmax 0;*/
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-player iframe,
.video-player object,
.video-player embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.last-post-audio {
    position: relative;
    padding: 1rem;
    margin: 1rem 0;
    background: #fff;
    /*    overflow: auto;*/
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, .1);
    display: flex;
    flex-flow: row;
}

.last-post-audio .audio-download {
    position: relative;
    float: right;
    top: .3rem;
    margin-bottom: 20px;
}

.last-post-audio .audio-download a {
    color: #cdab3a;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.2em;
    padding: .5rem;
    border: 2px solid #cdab3a;
    margin: 1rem 0;
    border-radius: .4rem
}

.last-post-audio .post-audio-img {
    position: relative;
    height: 100%;
}

.last-post-audio .audio-img-label {
    position: absolute;
    bottom: 0;
    font-family: 'Vollkorn', serif;
    font-style: italic;
    text-transform: lowercase;
    font-size: 1.8em;
    color: #fff;
    padding: .4em
}

.last-post-audio .post-audio-content {
    position: relative;
    width: 100%;
    padding: 0 0 0 1rem;
}

.last-post-audio .audio-download a:active,
.last-post-audio .audio-download a:hover {
    color: #fff;
    background: #cdab3a;
}

.last-post-audio .post-title {
    font-weight: normal;
    font-size: 1.8em;
}

.last-post-audio p {
    margin: 0;
}

.last-post-audio .post-info {}

.last-post-audio .author,
.last-post-audio .post-date {
    font-style: normal !important;
}

.last-post-audio .author {
    color: #000 !important;
}


/* Small screens*/

@media only screen and (max-width: 40em) {
    .last-post-audio {
        flex-flow: column;
    }
    .last-post-audio .audio-download {
        float: none;
        top: 0rem;
        margin: 1rem 0;
    }
    .last-post-audio .post-audio-img img {
        width: 100%;
    }
    .post-audio-content {
        display: flex;
        flex-flow: column-reverse;
        align-items: center;
        text-align: center;
    }
    .last-post-audio .audio-download a {
        font-size: 1.6em;
    }
    .last-post-audio .post-audio-content {
        padding: 0;
    }
    .mejs__mute,
    .mejs__horizontal-volume-total {
        display: none!important;
    }
}


/*    main-feature-block
=========================== */

.predications-block-header {
    color: #cdab3a;
}

.videos-block-header {
    color: #64c5a4;
}

.rencontres-block-header {
    color: #3fb4c5;
}

.main-feature-block p {
    color: #5d5c55;
}

.main-feature-block a {
    display: block;
}

.main-feature-block img {
    display: inline-block;
}

.slick-slide img {
    display: block;
    width: 100%;
    max-width: inherit;
}


/* Small screens*/

@media only screen and (max-width: 40em) {
    /* Cacher le bandeau predications / videos / rencontre */
    /*
    .page-content {
        display:none;
    }
    .main-feature-block {
        display:none;
    }
    */
}


/*    COLONNE
================== */

.widget {
    margin: 1rem 1rem;
    padding: 1.6rem .8rem;
    background: #fff;
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, .1);
}

.widget:first-child {
    /* espace entre le bandeau et les horaires de réunion */
    /*margin-top: 4rem;*/
}

.widget h3 {
    font-family: 'Vollkorn', serif;
    font-style: italic;
    font-size: 2.2em;
    text-align: center;
}

.widget h3:before {
    display: block;
    width: 100%;
    height: 3rem;
    content: "";
    background-size: contain !important;
}

.widget.widget-horaires h3:before {
    background: url(../img/ico-nos-rencontres.png) center no-repeat;
}

.widget.widget-predications h3:before {
    background: url(../img/ico-predications-mp3.png) center no-repeat;
}

.widget.widget-faq h3:before {
    background: url(../img/ico-faq.png) center no-repeat;
}

.widget {
    font-size: .9em;
}

.widget ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.widget li {
    padding: 1rem 0;
    border-bottom: 1px solid #ccc;
}

.widget li:last-child {
    border-bottom: none;
}

.widget.widget-horaires h3,
.widget.widget-horaires .jour {
    color: #3db3c5;
}

.widget.widget-predications h3,
.widget.widget-predications .title {
    color: #c49c17;
}

.widget.widget-faq h3 {
    color: #e75012;
}

.widget p {
    margin: 0;
    padding: 0 1rem;
    color: #000;
}

.widget .jour {
    font-weight: bold;
}

.widget .horaire {}

.widget .date {
 	text-align: center;
	margin-top: 2%;
	margin-bottom: 3%;
}

.widget .action-button {
    font-size: 1.6em;
    border: 2px solid #000;
    border-radius: 10em;
    padding: .5rem 1.5rem;
    margin: auto;
    display: inline-block;
}

.widget.widget-horaires .action-button {
    border-color: #3db3c5;
    color: #3db3c5;
}

.widget.widget-horaires .action-button:hover {
    border-color: #3db3c5;
    color: #fff;
    background: #3db3c5;
}


/*    PLAN
================== */

.section-plan div:first-child {
    background: #fff;
}

.section-plan {
    margin-bottom: 6rem;
}

.section-plan h4,
.section-plan p {
    font-size: 1.6em;
}

.section-plan p {
    color: #5d5c55;
}

.section-plan h4 {
    color: #000;
    font-weight: bold;
}

.section-plan .small-12 {
    position: relative;
    padding: 1.5rem;
}

.section-plan .map {}


/*    AGENDA/CALENDAR/CALENDRIER
================================= */

.calendar_classic {
    display: block;
}

.calendar_list {
    display: none;
}

@media only screen and (max-width: 40em) {
    .calendar_classic {
        display: none;
    }
    .calendar_list {
        display: block;
    }
}


/*    LIENS
================================= */

.liens {
    display: flex;
}


/*    FOOTER
================== */

footer {
    position: relative;
    background: #fff;
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, .1);
}

footer .row {
    padding: 1.5rem 0;
}

footer .columns {
    position: relative;
}

footer address {
    font-size: 1.3em;
    font-style: normal;
    padding-left: 1rem;
}

footer .copyright {
    font-size: 1.1em;
    padding-left: 1rem;
}

footer .icon-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: url('../img/ico_location.png') center no-repeat;
    background-size: contain;
}

footer ul {
    font-size: 1.3em;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

footer li {
    margin-left: 1.2rem;
}

footer a {
    color: #000;
    text-decoration: underline;
}

footer a:hover {
    color: #000;
    text-decoration: none;
}


/*    FORMULAIRE
================== */

 label
 {
    font-size: 1.5rem;
    padding: 5px;
    color: #78818a;
    font-weight: 300;
 }
input[type="text"],
input[type="email"],
textarea
{
	border-radius:0!important;
	box-shadow:none!important;
	border:0;
    border-bottom: solid 2px rgba(231,80,18,0);
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus 
{
	border-top:0 !important;
	border-left:0 !important;
	border-right:0 !important;
    border-bottom: solid 2px rgba(231,80,18,1);
}
select
{
    height: auto;
    margin: 1rem 1rem 2rem;
    border: 0;
    border-bottom: 2px solid rgba(231,80,18,1);
    font-size: 2em;
    border-radius: 0;
	background-color: #FFF;
}