html, body{background-color:#E9EAEE;font-family:'Open Sans', sans-serif;width:100%;}
ul{padding:0;}
.content-cookie{background:#00B8E8;padding-top:10px;margin:0;position:fixed;bottom:0;z-index:100;}
.content-cookie > .div-100-max > p{color:white;padding-left:10px;padding-right:10px;width:92%;float:left;text-align:justify;}
.content-cookie > .div-100-max > button{background-color:#00B8E8;color:white;border:1px solid;border-radius:4px;float:right;margin-right:10px;}
.back-home{position:absolute;top:28%;color:white;border:1px solid white;padding:5px 20px;border-radius:30px;}
.back-home:hover{background:white;color:#00b8e8;text-decoration:none;}
.content-text{background-color:white;padding:20px;margin-top:10px;margin-bottom:10px;}
.mobile{display:none;}
.no-mobile{display:block;}
.show{display:block;background:#E9EAEE;position:relative;}
.no-show{display:none!important;min-height:0px;}
.ngdialog-overlay{background:rgba(0,0,0,.7)!important;}
.ngdialog.ngdialog-theme-default .ngdialog-content{-webkit-animation:ngdialog-flyin .5s;animation:ngdialog-flyin .5s;background:#f0f0f0;border-radius:2px!important;color:#444;font-family:Helvetica,sans-serif;font-size:1.1em;line-height:1.5em;margin:0 auto;max-width:94%!important;padding:1em;position:relative;width:410px!important;}
.ngdialog.ngdialog-theme-default{padding-bottom:160px;padding-top:230px;}
.button-remove{float:none!important;display:block!important;margin-left:auto!important;margin-right:auto!important;max-width:230px!important;width:98%!important;border-radius:2px!important;height:40px!important;line-height:23px!important;margin-bottom:10px!important;background:rgb(0, 184, 232)!important;color:white!important;border:none!important;font-family:'Roboto',sans-serif!important;}
.button-cancel{float:none!important;display:block!important;margin-left:auto!important;margin-right:auto!important;max-width:230px!important;width:98%!important;border-radius:2px!important;height:40px!important;line-height:23px!important;background:rgb(226, 0, 122)!important;color:white!important;font-family:'Roboto',sans-serif!important;}
.picto-remove{margin-top:-50px;margin-left:auto;margin-right:auto;display:block;width:70px;border:3px solid rgb(240, 240, 240);border-radius:50px;}
.message-remove h3,
.message-remove p{text-align:center;font-family:'Roboto',sans-serif!important;}
.disableMouse{pointer-events:none;}
.enableMouse{pointer-events:initial;}
.content-remove{position:relative;}
.remove{width:10px;position:absolute;top:-49px;left:10px;}
.remove > img{width:100%;}
.reponse-comment:hover .remove{display:block;}
.reponse-comment:hover{background:rgb(240, 240, 240);}
#home-header{background-color:#1F2632;width:100%;}
.logo-yon{display:block;width:100px;margin-left:auto;margin-right:auto;padding-top:20px;padding-bottom:20px;}
#home-content{}
.content-video > .iframe{display:block;max-width:740px;width:100%;min-height:470px;margin-left:auto;margin-right:auto;margin-top:60px;margin-bottom:60px;}
.content-contact{}
.plus-infos{font-family:'Roboto', sans-serif;font-weight:100;color:#26292E;font-size:18px;text-align:center;}
.button-contact{display:block;width:55px;height:55px;margin-right:auto;margin-left:auto;background:url(../img/landing-page/send.png);background-repeat:no-repeat;background-color:#00aeef;background-size:48%;background-position:center center;border-radius:30px;-webkit-transition:box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);transition:box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);}
.button-contact:hover{-webkit-transform:translate3d(0, -1px, 0);transform:translate3d(0, -1px, 0);-webkit-transition:box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);transition:box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.4)}
#home-footer{background:rgb(31, 38, 50);width:100%;padding: 0px!important;}
.footer-links{text-align:center;padding:20px 0px 0px 0px;}
.footer-links > a{color:white;margin:0px 10px;}
#home-footer > p{color:white;text-align:center;line-height:60px;margin:0;padding:0;}
.button-contact{background-color:#00aeef;margin-top:20px;padding-top:15px;margin-bottom:30px;}
.discover-yon{background:rgb(0, 184, 232);height:70px;position:relative;}
.discover-yon > p{text-align:center;color:white;font-size:24px;font-family:'Roboto', sans-serif;letter-spacing:1px;line-height:70px;}
.part-1{height:410px;overflow:hidden;}
.content-part-1{margin-top:30px;margin-bottom:30px;}
.yesno-quoi{text-align:center;margin-top:50px;}
img.title-yesno{width:100px;}
.span-button-discover-app{display:block;margin-top:70px;}
.button-discover-app{font-family:'Montserrat', sans-serif;color:rgb(31, 38, 50);border:2px solid rgb(31, 38, 50);border-radius:2px;padding:13px 20px;display:block;width:224px;margin-left:auto;margin-right:auto;text-align:center;background-color:rgb(233, 234, 238);}
.button-discover-app:hover{color:white;text-decoration:none;cursor:pointer;}
.hvr-sweep-to-bottom:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#1F2632;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
.hvr-sweep-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#1F2632;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
.hvr-bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:transform;transition-property:transform;left:calc(50% - 10px);bottom:0;border-width:10px 10px 0 10px;border-color:#E9EAEE transparent transparent transparent;}
.hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before{-webkit-transform:translateY(10px);transform:translateY(10px);border-color:#1F2632 transparent transparent transparent;}
.part-2{}
.bloc-video{margin-top:50px;margin-bottom:50px;}
.home-video{width:100%;}
.bloc-lyrics{padding:10px;position:relative;}
.lyrics{font-family:'Roboto',sans-serif;font-size:19px;font-style:italic;margin-top:24%;float:left;}
.img-quotes{float:left;margin-top:20%;margin-right:2%;margin-left:22%;}
.logo-appStore{max-width:170px;width:50%;}
.logo-googlePlay{max-width:170px;width:50%;}
.iphone6-yesno{max-width:380px;width:100%;margin-left:auto;margin-right:auto;display:block;}
.part-3{padding-top:50px;padding-bottom:108px;}
.bloc-yesno-iphone-content{position:relative;}
.iphone6-static{width:100%;margin-left:auto;margin-right:auto;}
.iphone6-content-slide{width:304px;height:538px;margin-left:auto;position:absolute;right:50%;margin-right:-151px;margin-top:89px;}
.iphone6-content-slide div{background-size:100%!important;height:568px;background-repeat:no-repeat;}
.iphone-contour{width:360px;position:absolute;right:50%;margin-right:-180px;}
.rn-carousel-control.rn-carousel-control-next:before{content:" ";background:url(../img/home/arrow-right.png) no-repeat;background-size:60%;width:20px;height:30px;position:absolute;right:0px;}
.rn-carousel-control.rn-carousel-control-prev:before{content:" ";background:url(../img/home/arrow-left.png) no-repeat;background-size:60%;width:20px;height:30px;position:absolute;left:0px;}
.part-3 .yesno-quoi{text-align:center;margin-top:2px;background:#1F2632;color:white;padding-top:30px;padding-bottom:30px;margin-bottom:0;position:relative;z-index:100;}
.part-3 .bloc-quoi{margin-top:92px;}
.part-3 .yon-description-1{font-size:18px;background:white;margin:0;padding:20px 20px 10px 20px;position:relative;}
.part-3 .yon-description-1 p{font-size:16px;}
.part-3 .yon-description-2{font-size:18px;background:white;margin:0;padding:10px 20px 10px 20px;position:relative;}
.part-4{z-index:1000;position:relative;}
.part-4 h2{color:white;text-align:center;padding-top:20px;padding-bottom:10px;}
.part-4 .description-invitation{text-align:center;color:white;padding-bottom:20px;}
.part-4 .list-type-invit{width:100%;list-style-type:none;margin:0;}
.part-4 .list-type-invit > li{width:16.66666%;float:left;}
.part-4 .list-type-invit > li > img{display:block;margin-left:auto;margin-right:auto;width:62px;margin-top:12px;margin-bottom:6px;}
.part-4 .list-type-invit > li > p{text-align:center;color:white;font-family:'Roboto',sans-serif;font-size:15px;font-weight:bold;margin-bottom:30px;}
.part-4 .li-apero p{padding-right:10px;}
.part-4 .li-resto p{}
.part-4 .li-cine p{}
.part-4 .li-poker p{}
.part-4 .li-reunion p{}
.part-4 .li-more p{}
.part-5{margin-top:-20px;position:relative;}
.part-5 h2{color:white;text-align:center;padding-top:20px;padding-bottom:10px;}
.list-date{width:100%;list-style-type:none;margin:0;}
.list-date > li{width:33.333%;float:left;}
.list-date > li > img{display:block;margin-left:auto;margin-right:auto;width:140px;margin-top:12px;margin-bottom:6px;}
.list-date > li > p{text-align:center;color:white;font-family:'Roboto',sans-serif;font-size:25px;margin-bottom:30px;}
.part-6{margin-top:-20px;}
.part-6 h2{color:white;text-align:center;padding-top:20px;padding-bottom:10px;}
.part-6 .description-invitation{text-align:center;color:white;padding-bottom:20px;padding-left:10px;padding-right:10px}
.part-6 .list-type-invit{width:100%;list-style-type:none;margin:0;}
.part-6 .list-type-invit > li{width:50%;float:left;}
.part-6 .list-type-invit > li > img{display:block;margin-left:auto;margin-right:auto;width:140px;margin-top:12px;margin-bottom:6px;}
.part-6 .list-type-invit > li > p{text-align:center;color:white;font-family:'Roboto',sans-serif;font-size:25px;margin-bottom:30px;}
.li-phonebook > p{padding-left:8px;}
.puce{width:10px;height:10px;background:rgb(213, 213, 213);-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;position:absolute;margin-top:12px;left:35px;}
.timeline-comment{width:70px;float:left;min-height:20px;}
.timeline-line{width:2px;height:40px;background:rgb(213, 213, 213);margin-left:40px;}
.content-comment{padding:10px 13px 10px 13px;width:93.5%;border-left:2px solid rgb(213, 213, 213);margin-left:39px;}
.reponse-comment{position:relative;}
.comments{bottom:0;width:100%;}
.comment-date{font-size:10px;font-style:italic;font-weight:bold;text-align:left;padding-bottom:4px;margin:0px;}
.comment-text{margin:0px;text-align: left;}
.input-comment{padding:10px 10px;width:79%;border:none;margin-left:2%;margin-bottom:2%;margin-top:2%;background:rgb(247, 247, 247);float:left;}
.hideComment{display:none;}
.bouton-envoyer{padding:10px 0px;border:0;background:rgb(247, 247, 247);color:rgb(51, 51, 51);float:right;margin-top:2%;margin-bottom:2%;margin-right:2%;width:15%;font-family:'Roboto',sans-serif;}
.main-content-invitation{max-width:600px;width:100%;margin-right:auto;margin-left:auto;margin-top:40px;margin-bottom:40px;}
.header-invitation{background-color:#00B8E8;position:relative; text-align: left;}
.type-button{width:64px;height:64px;position:absolute;bottom:-32px;right:20px;border-radius:40px;}
.type-verre{background:url('../img/pictos/verre.png') no-repeat;background-size:60%;background-position:62% 50%;background-color:#EB363D;}
.type-cine{background:url('../img/pictos/cine.png') no-repeat;background-size:60%;background-position:58% 50%;background-color:#EB363D;}
.type-poker{background:url('../img/pictos/poker.png') no-repeat;background-size:60%;background-position:58% 50%;background-color:#EB363D;}
.type-repas{background:url('../img/pictos/repas.png') no-repeat;background-size:68%;background-position:46% 50%;background-color:#EB363D;}
.type-reunion{background:url('../img/pictos/reunion.png') no-repeat;background-size:60%;background-position:52% 50%;background-color:#EB363D;}
.sources{}
.activCookie{opacity:0.5;pointer-events:none;}
.content-invitation{background-color:rgb(240, 240, 240);}
.content-invitation-date{background-color:rgb(240, 240, 240);}
.label-title{font-family:'Roboto',sans-serif;font-weight:normal;font-size:30px;color:#fff;text-align:left;padding:10px;margin:0;}
.detail-date{padding-left:10px;padding-bottom:10px;display:block;color:white;font-size:16px;font-family:'Roboto',sans-serif;text-align: left;}
.detail-lieu{padding-left:10px;padding-bottom:10px;padding-right:10px;display:block;color:white;font-size:18px;font-family:'Roboto',sans-serif;}
.detail-heure{padding-left:10px;padding-bottom:10px;display:block;color:#fff;font-size:28px;font-family:'Roboto',sans-serif;}
.hideLieu{display:none;}
.label-date-deadline{padding-left:10px;padding-right:26px;padding-top:15px;font-weight:bold;font-size:16px;}
.detail-date-deadline{font-size:16px;padding-top:15px;padding-bottom:15px;padding-left:10px;}
.statut-date{float:right;margin-right:20px;color:#fff;font-size:14px;border-radius:2px;margin-top:22px;margin-left:20px;background:white;font-weight:bold;}
.statutDateOpen{border:1px solid #41bd41!important;background:#41bd41!important;padding:4px 10px;}
.statutDateClose{border:1px solid #eb363d;background:#eb363d;padding:4px 10px;}
.statutDateCornerOpen{width:0;height:0;border-top:40px solid #41bd41;border-left:40px solid transparent;position:absolute;right:0;}
.statutDateCornerClose{width:0;height:0;border-top:40px solid #EB363D;border-left:40px solid transparent;position:absolute;right:0;}
.item-img-content{width:84px;height:84px;padding-top:12px;float:left;}
.item-img-content > .img-content{background-color:#D5D5D5;border-radius:50%;width:60px;height:60px;margin-left:auto;margin-right:auto}
.item-img-content > .img-content > p{text-align:center;line-height:60px;font-size:28px;font-family:'Roboto', sans-serif;letter-spacing:0px;}
.item-name-content{float:left;}
.item-name-content p{margin:0;font-size:18px;line-height:84px;}
.item-valid-content{float:right;}
.ats-switch{border-radius:2px;}
.ats-switch.switch-primary span.switch-left{color:#FFF;background:#00B8E8;font-weight:bold;text-transform:uppercase;}
.switch-primary.switch-valid{margin-top:27px;margin-right:10px;}
.ats-switch span.switch-right{color:#FFF;background:#E2007A;font-weight:bold;text-transform:uppercase;}
.button-yes{background-color:#F0F0F0;border:1px solid #BBB;color:#777;}
.button-yes:hover{color:#fff!important;background-color:#00B8E8!important;border-color:#00B8E8!important;}
.button-yes.active{color:#fff!important;background-color:#00B8E8!important;border-color:#00B8E8!important;}
.button-no{background:#F0F0F0;border:1px solid #BBB;color:#777;}
.button-no:hover{color:#fff!important;background-color:#E2007A!important;border-color:#E2007A!important;}
.button-no.active{color:#fff!important;background-color:#E2007A!important;border-color:#E2007A!important;}
.hideDate{height:50px;}
.hideDate > .label-date-deadline,
.hideDate > .detail-date-deadline{display:none;}
span.sources{font-size:12px;font-style:normal;text-align:center;width:100%;display:block;padding-right:20px;}

.comments { padding: 0!important; }
@media screen and (max-width:880px){.bloc-quoi{float:none;width:100%;}
.no-img-mobile{display:none;}
.bloc-yesno-iphone{float:none;width:100%;}
.lyrics{font-family:'Roboto',sans-serif;font-size:19px;font-style:italic;margin-top:5%;margin-left:auto;margin-right:auto;display:block;width:295px;float:none;padding-left:5%}
span.sources{font-size:12px;font-style:normal;text-align:center;width:100%;display:block;padding-right:20px;}
.part-1{height:500px;overflow:hidden;}
.div-50.float-left.bloc-quoi{width:100%;float:none;}
.div-50.float-left.bloc-yesno-iphone{float:none;width:100%;margin-top:70px;}
.bloc-video{margin-top:50px;margin-bottom:0px;width:100%;float:none;}
.bloc-lyrics{padding:10px;position:relative!important;width:100%!important;float:none!important;}
.part-3 .bloc-quoi{margin-top:0;margin-bottom:50px;}
.bloc-yesno-iphone-content{position:relative;float:left;width:100%!important;}
.part-3 .yon-description-1{font-size:18px;background:#fff;margin:0;padding:30px 20px 20px 20px;position:relative;}
.home-video{max-width:600px;width:100%;margin-left:auto;margin-right:auto;display:block;padding:0;padding-top:30px;}
.bloc-video{width:100%!important;float:none!important;padding:0!important;margin:0!important;}
}
@media screen and (max-width:660px){.footer-links > a{color:white;margin:20px 10px;display:block;}
.part-4 .list-type-invit>li{width:33.33%;float:left;}
.part-4 .list-type-invit>li>img{display:block;margin-left:auto;margin-right:auto;width:52px;margin-top:12px;margin-bottom:6px;}
.list-date>li>img{display:block;margin-left:auto;margin-right:auto;width:80px;margin-top:12px;margin-bottom:6px;}
.part-6 .list-type-invit>li>img{display:block;margin-left:auto;margin-right:auto;width:80px;margin-top:12px;margin-bottom:6px;}
}
@media screen and (max-width:600px){.bloc-quoi .text-center{font-size:16px;}
.main-content-invitation{max-width:600px;width:98%;margin-left:auto;margin-right:auto;}
.label-title{font-size:24px;}
.detail-heure{font-size:28px;}
.content-comment{padding:10px 13px 10px 13px;width:86%;border-left:2px solid rgb(213, 213, 213);margin-left:39px;}
}
@media screen and (max-width:490px){.logo-yon{width:60px;}
.main-content-invitation{margin-top:6px;margin-bottom:6px;}
.item-name-content p{margin:0;font-size:14px;line-height:84px;}
}
@media screen and (max-width:374px){.content-cookie > .div-100-max > p{width:89%;}
.mobile{display:block;}
.no-mobile{display:none;}
.part-3{padding-top:50px;padding-bottom:30px;}
.item-img-content>.img-content{background-color:#d5d5d5;border-radius:50%;width:50px;height:50px;margin-left:auto;margin-right:auto;margin-top:6px;}
.item-img-content>.img-content>p{text-align:center;line-height:55px;font-size:24px;font-family:'Roboto',sans-serif;letter-spacing:0px;}
/*.item-name-content p{margin:0;font-size:14px;line-height:84px;}*/
.item-valid-content{float:none;position:absolute;right:0;}
.switch-primary.switch-valid{margin-top:27px;margin-right:25px;}
.btn{display:inline-block;padding:4px 8px;margin-bottom:0;margin-top:1px;font-size:14px;font-weight:normal;line-height:1.428571;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border-radius:4px;}
.button-no{background:#f0f0f0;border:1px solid #b0b0b0;color:#1f2632;}
}



/* New invitation */

.header-background {
    background-size: cover;
    background-position: 50% 50%;
    min-height: 180px;
}

.header-background > h2 {
    font-size: 16px;
    color: white;
    padding: 10px;
    margin: 0;
    text-align: left;
    padding-top: 15px;
}

.header-background > h2 > span {
    display: inline;
    text-align: left;
}

.header-background > h2 > i {
    display: inline;
    margin-right: 10px;
}

.header-background > h1 {
    color: white;
    text-align: left;
    font-size: 26px;
    padding: 10px;
    vertical-align: middle;
    padding-top: 30px;
    padding-bottom: 10px;
}


.content-button {
    /*background-color: #333E4B; //#222B2F;*/
    height: 100px;
    overflow-x: scroll;
}

.content-button ul.list-button {
    list-style-type: none;
}

.content-button ul.list-button > li {
    float: left;
    width: 50%;
}

.content-button ul.list-button > li > a {
    display: block;
    /*width: 150px;*/
    height: 100px;
    color: #828B97;
    /*line-height: 100px;*/
}

.content-button ul.list-button > li > a > .content-a > p {
    padding-top: 25px;
}

.content-button ul.list-button > li > a > .content-a i.icon {
    font-size: 25px;
    color: #828B97;
}

.content-button ul.list-button > li > a:hover {
    background-color: #3C4A5A;
    color: white;
}

.content-button ul.list-button > li > a.active {
    background-color: #3C4A5A;
    color: white;
}

.content-button ul.list-button > li > a:active {
    background-color: #3C4A5A;
    color: white;
    text-decoration: none;
}

.content-button ul.list-button > li > a:hover > .content-a {
    border-bottom: 5px solid #22C6EF;
    height: 100px;
}

.content-button ul.list-button > li > a.active > .content-a {
    border-bottom: 5px solid #22C6EF;
    height: 100px;
}

.content-button ul.list-button > li > a:hover > .content-a i.icon {
    color: white;
}

.button-add-calendar {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #00B8E8;
    color: white;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
}

.button-add-calendar:hover {
    color: rgba(255, 255, 255, 0.5);
}

.button-add-calendar:hover {
    cursor: pointer;
}
.button-add-calendar > .add-calendar > p > .add-button {

}

.content-nb-invit {
	background-color: #F2F2F2;
    height: 35px;
    margin-left: 15px;
    margin-right: 15px;
    border-left: 1px solid #BBC8CC;
    position: relative;
}

.content-nb-invit > p {
	text-align: left;
    color: #425056;
    margin: 0;
    padding: 0;
    padding-left: 15px;
    line-height: 35px;
    font-weight: 400;
    font-size: 17px;
}

.content-nb-invit > .puce-chat {
	background-color: #F2F2F2;
    width: 13px;
    height: 13px;
    border-radius: 7px;
    position: absolute;
    top: 12px;
    left: -7px;
    border: 1px solid #BBC8CC;
}

.content-background {
    background-color: #f2f2f2;
    /*height: 500px;*/
}

.content-invit {
    height: 90px;
    border-bottom: 1px solid #D5D5D5;
}

.div-invit-initial {
    width: 20%;
    float: left;
    height: 90px;
}

.div-invit-initial > .invit-initial {
    margin: 0;
    width: 54px;
    height: 54px;
    line-height: 53px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
    border-radius: 43px;
    font-size: 28px;
    font-weight: 100;
    background: #d5d5d5;
    color: #425056; /* #777777; */
    font-family: "Roboto";
    text-align: center;
    padding-left: 0px;
    border: 1px solid #BBBBBB;
    background-size: cover;
    background-position: 50%;
}

.div-invit-name {
    width: 40%;
    float: left;
}

.div-invit-name > .invit-name {
    font-family: "Roboto";
    font-weight: 400;
    text-transform: uppercase;
    font-size: 20px;
    text-align: left;
    line-height: 90px;
    margin: 0;
    color: #425056;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.div-invit-button {
    float: right;
    margin-right: 20px;
}

.round-button {
    width: 60px;
    height: 50px;
    line-height: 48px;
    padding: 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    border-radius: 3px;
    color: #425056;
}

.ul-msg {

}

.ul-msg > li {
    border-left: 1px solid #BBC8CC;
    margin-left: 15px;
    padding-left: 15px;
    margin-right: 10px;
}

.sidebar {

}

.content-msgs {
	position: relative;
}

.content-msgs > .puce-chat {
	background-color: #BBC8CC;
    width: 7px;
    height: 7px;
    border-radius: 5px;
    position: absolute;
    top: 12px;
    left: -19px;
}

.content-msgs > .name-date-msg {
	
}

.content-msgs > .name-date-msg > div {
    margin: 5px 0 5px;
}

.content-msgs > .name-date-msg  > div > .name-msg {
	float: left;
    font-family: "Roboto";
    font-weight: 400;
    font-size: 14px;
    color: #425056;
}

.content-msgs > .name-date-msg > div > .date-msg {
	float: right;
	font-size: 13px;
    color: #425056;
    font-weight: 400;
}


.content-msgs > .content-msg {
	text-align: left;
}

.content-msgs > .content-msg > p {
	background: #E4E4E4;
    display: inline-block;
    border-radius: 6px;
    padding: 2px 6px;
    color: #586469;
    word-break: break-all;
    word-wrap: break-word;
}

@media screen and (max-width:450px) {

    .content-button {
        height: 80px;
    }

    .content-button ul.list-button > li > a {
        height: 80px;
    }

    .content-button ul.list-button > li > a.active > .content-a {
        height: 80px;
    }

    .content-button ul.list-button > li > a > .content-a > p {
        padding-top: 15px;
    }

    .div-invit-name > .invit-name {
        font-size: 18px;
    }

    .div-invit-button .mt20 {
        margin-top: 25px;
    }

    .round-button {
        width: 50px;
        height: 40px;
        line-height: 38px;
        padding: 0;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 500;
    }

    .div-invit-button {
        margin-right: 10px;
    }


}

@media screen and (max-width:360px) {

    .div-invit-initial > .invit-initial {
        margin: 0;
        width: 44px;
        height: 44px;
        line-height: 44px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 23px;
        border-radius: 43px;
        font-size: 24px;
        font-weight: 100;
        background: #d5d5d5;
        font-family: "Roboto";
        text-align: center;
        padding-left: 0px;
        border: 1px solid #BBBBBB;
        background-size: cover;
        background-position: 50%;
    }

    .div-invit-name > .invit-name {
        font-size: 16px;
    }

}

@media screen and (max-width:320px) {

    .div-invit-name > .invit-name {
        font-size: 14px;
    }

}