@import url('https://fonts.googleapis.com/css?family=Merriweather:400i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600&display=swap');

body {
    margin:0;
    color: #1e3249;
    font-family: 'Montserrat';
    text-align:center;
}
.title {
    padding:30px 0 30px 0;
    font-size:60px; 
    text-transform:uppercase;
    font-weight:600;
    background-color: #1e3249;
    color: #fff;
}
.title span {
    font-size:30px; 
    text-transform:none; 
    font-family: 'Merriweather', serif;
    font-weight:400;
    vertical-align: middle;
}
img.logo {
    height:40px;
    display: block;
    margin: 0 auto 15px auto;
}
.service-title {
    padding:20px;
    font-size:30px;
    font-weight:600;
    border-top:1px solid #ebecf2; 
    border-bottom:1px solid #ebecf2;
    background-color:  #f6f8fc;
}
.service-content {
    max-width: 1600px;
    margin-left:auto;
    margin-right:auto;
    padding-top:30px; 
}
.calendar .service-content {
    padding-bottom:30px; 
}
.personne {
    width:200px;
    padding:0 15px 30px 15px;
    display:inline-block;
    vertical-align: top;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.photo {
    height:200px;
    width:200px;
    margin-left: auto;
    margin-right:auto;
    border-radius: 100px;
    overflow: hidden;
    background-color:#1e3249;
    margin-bottom:10px;
    position:relative;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
img.photoP {
    width:100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.personne:hover img.photoP {
    opacity:.3;
    filter:grayscale(1);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.anniversaire {
    display: none;
    color:#fff;
    height:200px;
    line-height:200px;
    font-size:20px;
    font-weight:500;
    position:absolute;
    width:100%;
    top:0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.personne:hover .anniversaire {
    display:block;
}
.birthday {
    height: 30px;
    width: 30px;
    display: block;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 65px;
}
.date {
    line-height: 40px;
}
.name {
    font-size:18px;
    font-weight:600;
}
.poste {
    font-size:16px; 
    font-family: 'Merriweather', serif;
    font-weight:400;
    opacity:.7;
}
.mail {
    font-size:16px;
    display:none;
}
.calendar iframe{
    border: none !important;
}
.calendar-container .view-cap, .calendar-container .view-container-border {
    background-color:#fff !important;
}
.calendar-container .mv-dayname {
    padding:5px;
}
.calendar-container .rb-n {
    border: none !important;
    padding: 5px;
    background-color:#1e3249;
}

@media screen and (max-width: 1024px) {
    .personne {
        width:150px;
    }
    .photo {
        height:150px;
        width:150px;
    }
    .anniversaire {
        height:150px;
        line-height:150px;
    }
    .birthday {
        margin-top: 40px;
    }
}
@media screen and (max-width: 480px) {
    .title {
        padding:20px 0 20px 0;
        font-size:30px;
    }
    .title span {
        font-size:14px;
    }
    img.logo {
        height:20px;
        margin: 0 auto 10px auto;
    }
    .service-title {
        padding: 10px;
        font-size: 22px;
    }
    .service-content {
        padding-top: 20px;
    }
    .personne {
        width:150px;
        padding: 0 0 20px 0;
    }
    .photo {
        height:130px;
        width:130px;
        margin-bottom: 5px;
    }
    .anniversaire {
        height:130px;
        line-height:130px;
    }
    .birthday {
        margin-top: 20px;
    }
    .name {
        font-size: 16px;
    }
    .poste {
        font-size: 14px;
    }
}