/*---------------------*/
/*------- GENERAL -------*/
/*---------------------*/

@font-face {
    font-family: 'Georgia';
    src: url('../font/Georgia.eot'); /* IE9 Compat Modes */
    src: url('../font/Georgia.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/Georgia.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/Georgia.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Georgia-italic';
    src: url('../font/Georgia-Italic.eot'); /* IE9 Compat Modes */
    src: url('../font/Georgia-Italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/Georgia-Italic.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/Georgia-Italic.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Georgia-bold';
    src: url('../font/Georgia-Bold.eot'); /* IE9 Compat Modes */
    src: url('../font/Georgia-Bold.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/Georgia-Bold.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/Georgia-Bold.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Georgia-bold-italic';
    src: url('../font/Georgia-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('../font/Georgia-BoldItalic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/Georgia-BoldItalic.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/Georgia-BoldItalic.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'CenturyGothic';
    src: url('../font/CenturyGothic.eot'); /* IE9 Compat Modes */
    src: url('../font/CenturyGothic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/CenturyGothic.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/CenturyGothic.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'CenturyGothic-italic';
    src: url('../font/CenturyGothic-Italic.eot'); /* IE9 Compat Modes */
    src: url('../font/CenturyGothic-Italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/CenturyGothic-Italic.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/CenturyGothic-Italic.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'CenturyGothic-bold';
    src: url('../font/CenturyGothic-Bold.eot'); /* IE9 Compat Modes */
    src: url('../font/CenturyGothic-Bold.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/CenturyGothic-Bold.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/CenturyGothic-Bold.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
    font-family: 'CenturyGothic-bold-italic';
    src: url('../font/CenturyGothic-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('../font/CenturyGothic-BoldItalic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/CenturyGothic-BoldItalic.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/CenturyGothic-BoldItalic.ttf') format('truetype') /* Safari, Android, iOS */
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
}

body {
    background-image: url("../../img/background.png");
    background-size: cover;
    background-repeat: no-repeat;
    min-width: 100%;
    min-height: 100vh;
    background-position: center;
}

/*---------------------*/
/*------- HEADER -------*/
/*---------------------*/

.header-container-login {
    max-width: 680px;
    margin: auto;
}

.header-container-chat {
    max-width: 1440px;
    margin: auto;
}

.logo-header {
    height: 100px;
    display: flex;
    -ms-flex-align: center;
    padding: 1em;
}

.logo {
    margin: auto;
}

.txt-header {
    min-height: 100px;
    display: flex;
    -ms-flex-align: center;
    padding: 1em;
}

.txt {
    margin: auto;
}

.txt p {
    margin: 0;
}

.title-event {
    text-transform: uppercase;
    color: #424452;
    text-align: center;
    font-family: 'CenturyGothic-bold', Helvetica, Arial, sans-serif;
}

.date {
    text-transform: uppercase;
    color: #424452;
    text-align: center;
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
}

/*-----------------------------------*/
/*------- CURVED LINE (LOGIN) -------*/
/*-----------------------------------*/

.curved-line {
    text-align: right;
    padding-right: 30px;
    display: none;
}

/*-----------------------*/
/*------- CONTENT -------*/
/*-----------------------*/

.content-container-login {
    max-width: 680px;
    margin: auto;
}

.content-container-chat {
    max-width: 1440px;
    margin: auto;
}

/*--------------------------------------*/
/*------- PRESENTATION TXT LOGIN -------*/
/*--------------------------------------*/

.bloc-presentation-txt {
    margin: 30px auto;
    color: #424452;
}

.presentation-txt {
    text-align: center;
}

.presentation-txt h1 {
    font-size: 1.8em;
    text-transform: uppercase;
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
}

/*--------------------------------------*/
/*------- VIDEO ATTENTE & AGENDA -------*/
/*--------------------------------------*/

.bloc-video-agenda-attente {
    margin-top: 20px;
}

/*--------------------------*/
/*------- VIDEO CHAT -------*/
/*--------------------------*/

.bloc-video-chat {
    margin: 20px auto;
}

.bloc-video-chat-attente {
    margin-bottom: 20px;
}

/*--------------------------*/
/*------- SLIDES CHAT -------*/
/*--------------------------*/

.bloc-slides-chat {
    margin-top: 0;
    margin-bottom: 20px;
}

/*---------------------------*/
/*------- AGENDA CHAT -------*/
/*---------------------------*/

.bloc-agenda {
    background-color: #2c506d;
    color: #fff;
    padding: 1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.bloc-agenda h2 {
    margin-top: 0;
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
}

.bloc-agenda h3 {
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
    color: #c8d8e1;
}

.bloc-agenda p {
    font-family: 'CenturyGothic-bold', Helvetica, Arial, sans-serif;
}

.bloc-agenda span {
    font-size: 0.9em;
    display: inline-block;
    padding: 0.5em 0.9em;
    margin-bottom: 7px;
}

.bloc-agenda .hour {
    background-image: linear-gradient(to left, #265b6c, #216471, #1e6c74, #207575, #297d74);
}

/*--------------------------*/
/*------- FORM LOGIN -------*/
/*--------------------------*/

.bloc-form-login {
    margin: 40px auto;
}

.bloc-form-login .bloc-input-prenom,
.bloc-form-login .bloc-input-email,
.bloc-form-login .bloc-input-email-confirmation,
.bloc-form-login .bloc-input-organisation,
.bloc-form-login .bloc-select-pays,
.bloc-form-login .bloc-select-langues {
    margin-top: 15px;
}

.bloc-form-login label {
    font-family: 'CenturyGothic-bold', Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #424452;
}

.bloc-form-login input {
    border: 1px solid #cddbe4;
    padding: 1em;
    width: 100%;
    background-color: #ffffff;
    margin: 10px 0;
    color: #424452;
    font-family: 'Georgia-italic', Helvetica, Arial, sans-serif;
}

.bloc-form-login select {
    color: #424452;
}

.bloc-form-login button {
    border: none;
    width: 100%;
    text-transform: uppercase;
    font-family: 'CenturyGothic-bold', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    color: #fff;
    padding: 1em;
    background-image: linear-gradient(to right, #265b6c, #216471, #1e6c74, #207575, #297d74);
    cursor: pointer;
    margin-top: 40px;
}

/*--------------------------*/
/*------- FORM CHAT -------*/
/*--------------------------*/

.bloc-form-chat {
    background-image: url("../../img/background-form.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 1em;
    min-height: 535px;
    margin-bottom: 20px;
    /* min-width: 100%;
    min-height: 100vh; */
    
}

.bloc-form-chat .txt-form-heading {
    margin-top: 0;
    font-family: 'Georgia-italic', Helvetica, Arial, sans-serif;
    font-size: 1.4em;
    color: #2c506d;
}

.bloc-form-chat textarea {
    width: 100%;
    border: none;
    /* background: transparent; */
    background-color: rgba(128, 128, 128, 0.1);
    padding: 0.5em;
    font-family: 'Georgia', Helvetica, Arial, sans-serif;
    font-size: 1em;
    color: #2c506d;
    height: 270px;
    resize : none;
}

.bloc-form-chat button {
    border: none;
    /* width: 100%; */
    text-transform: uppercase;
    font-family: 'CenturyGothic-bold', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    color: #fff;
    padding: 1em 2.4em;
    background-image: linear-gradient(to right, #265b6c, #216471, #1e6c74, #207575, #297d74);
    cursor: pointer;
    margin-top: 40px;
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------*/
/*------- WORKSHOPS --------*/
/*--------------------------*/

.container-workshops {
    /* padding: 0 10px; */
}

.bloc-workshops {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bloc-workshops a {
    display: block;
    width: 49%;
    min-height: 200px;
    text-decoration: none;
}

.workshop div {
    padding: 1em;
    height: 100%;
    width: 100%;
    color: #fff;
}

.workshop p {
    margin: 0;
    text-transform: uppercase;
}

.workshop1,
.workshop3,
.workshop5 {
    margin-right: 1%;
}

.workshop1,
.workshop2,
.workshop3,
.workshop4 {
    margin-bottom: 8px;
}

.workshop1 div {
    background-color: #6582a0;
}

.workshop2 div {
    background-image: url("../../img/workshop-2.jpg");
}

.workshop3 div {
    background-image: url("../../img/workshop-3.jpg");
}

.workshop4 div {
    background-image: url("../../img/workshop-4.jpg");
}

.workshop5 div {
    background-image: url("../../img/workshop-5.jpg");
}

.workshop6 div {
    background-image: url("../../img/workshop-6.jpg");
}

.workshop2 div,
.workshop3 div,
.workshop4 div,
.workshop5 div,
.workshop6 div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
}

.workshop1 p {
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
    font-size: 1.6em;
}

/*----------------------------------*/
/*------- PRODUCTS -------*/
/*----------------------------------*/

.container-products a {
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}

.bloc-products div {
    background-image: url("../../img/products.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
    padding: 1em;
    height: 500px;
    width: 100%;
    color: #fff;
}

.bloc-products p {
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
    font-size: 1.4em;
    text-transform: uppercase;
    margin-top: 0;
}

/*---------------------------------*/
/*------- CURRENT QUESTIONS -------*/
/*---------------------------------*/

.container-bloc-current-questions {
    margin-bottom: 20px;
}

.bloc-questions-answers {
    color: #fff;
    background-color: #7993ad;
    padding: 1em;
    width: 100%;
    min-height: 280px;
    position: relative;
}

.bloc-questions-answers i {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.bloc-current-questions {
    height: 270px;
    overflow: auto;
    font-family: 'CenturyGothic', Helvetica, Arial, sans-serif;
}

.templatePseudo {
    color: #fff;
    font-family: 'CenturyGothic-bold', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    text-transform: uppercase;
}
.templatePays {
    display:none;
}

.templateQuestion {
    margin-top: 0;
}

/*----------------------*/
/*------- SELECT -------*/
/*----------------------*/

/* class applies to select element itself, not a wrapper element */
.select-css {
    display: block;
    margin: 10px 0;
	/* line-height: 1.3; */
    padding: 1.19em;
    width: 100%;
    font-size: 0.9em;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	border: 1px solid #cddbe4;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
	
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}

/*---------------------*/
/*------- FOOTER -------*/
/*---------------------*/

.footer-container {
    margin-top: 80px;
}

footer {
    padding: 1em;
    color: #2c506d;
    max-width: 530px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

footer a {
    display: inline-block;
}

footer a i {
    font-size: 2.3em;
}

/*-----------------------------*/
/*--- ERROR/SUCCESS MESSAGES ---*/
/*-----------------------------*/

.error-success-message {
    text-align: center;
}

#error-check-mail,
#error-confirmation-mail {
    color: rgb(233, 1, 1);
    font-family: 'Georgia-italic', Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    margin-top: 0;
    display: none;
}

p.error {
    color: rgb(233, 1, 1);
  
}

p.success  {
    color: rgb(44, 184, 74);

}

/*----------------------*/
/*--- FULLSCREENLINK ---*/
/*----------------------*/

/* #fullscreenLink {
    width: 25px !important;
    margin: 8px 8px 0 0 !important;
} */

/*----------------------------*/
/*------- MEDIA QUERIES -------*/
/*----------------------------*/

@media screen and (min-width: 601px)
{

    /*------ HEADER ------*/
    
    .logo {
        margin-left: 0;
    }

    .txt {
        margin-right: 0;
    }

    .title-event {
        text-align: right;
    }
    
    .date {
        text-align: right;
    }

    .curved-line {
        display: block;
    }

    /*------ TITLE ------*/

    .bloc-presentation-txt {
        margin-top: 60px;
    }

    /*------ FORM LOGIN ------*/

    .bloc-form-login button {
        width: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .bloc-form-login .bloc-input-prenom {
        margin-top: 0;
    }

    .bloc-form-login .bloc-input-nom {
        width: 49%;
        float: left;
    }

    .bloc-form-login .bloc-input-prenom {
        width: 49%;
        float: right;
    }

    .bloc-form-login .bloc-input-email {
        width: 49%;
        float: left;
    }

    .bloc-form-login .bloc-input-email-confirmation {
        width: 49%;
        float: right;
    }

    .bloc-form-login .bloc-input-organisation {
        width: 49%;
        float: left;
    }

    .bloc-form-login .bloc-select-pays {
        width: 49%;
        float: right;
    }

    /*------ FORM CHAT ------*/

    .bloc-form-chat button {
        width: inherit;
        display: inherit;
        margin-left: inherit;
        margin-right: inherit;
    }

    .bloc-form-chat textarea {
        height: 330px;
    }

    /*------- AGENDA -------*/

    .bloc-agenda {
        height: 535px;
    }

    .container-bloc-agenda {
        padding-right: 10px;
    }

    .container-bloc-form-chat {
        padding-left: 10px;
    }

    /*------- CURRENT QUESTIONS -------*/

    .container-bloc-current-questions {
        /* margin: 0 auto 30px auto; */
    }

    .bloc-questions-answers {
        height: 170px;
    }
    
    .bloc-current-questions {
        height: 160px;
    }

    /*------- WORKSHOPS -------*/

    .container-workshops {
        padding-right: 10px;
    }
}

@media screen and (min-width: 720px)
{
    /*------ HEADER ------*/

    .header-container-login .logo-header {
        padding-left: 0;
    }
    
    .header-container-login .txt-header {
        padding-right: 0;
    }

    /*------- AGENDA -------*/

    .bloc-agenda {
        height: 444px;
    }

    /*------ FORM CHAT ------*/

    .bloc-form-chat {
        min-height: 444px;
    }

    .bloc-form-chat textarea {
        height: 230px;
    }
}

@media screen and (min-width: 960px)
{

    /*------ FORM CHAT ------*/

    /* .bloc-form-chat textarea {
        height: 239px;
    } */

}

@media screen and (min-width: 993px)
{

    /*------- VIDEO CHAT -------*/

    .bloc-video-chat {
        margin-top: 40px;
        margin-bottom: 20px;
        padding-right: 10px;
    }

    .bloc-video-chat-attente {
        padding-right: 10px;
    }

    /*------- SLIDES CHAT -------*/

    .bloc-slides-chat {
        margin-top: 40px;
        margin-bottom: 20px;
        padding-left: 10px;
    }

    /*------- AGENDA -------*/

    .container-bloc-form-chat {
        padding-right: 10px;
    }

    .container-bloc-agenda-attente {
        padding-left: 10px;
    }

    /*------- CURRENT QUESTIONS -------*/

    .container-bloc-current-questions {
        padding-left: 10px;
    }

    .bloc-questions-answers {
        min-height: 444px;
    }
    
    .bloc-current-questions {
        height: 410px;
    }

    /*------- WORKSHOPS -------*/

    .bloc-workshops a {
        width: 32%;
    }

    .workshop1,
    .workshop3,
    .workshop5 {
        margin-right: 0;
    }

    .workshop {
        margin-bottom: 8px;
    }
}

@media screen and (min-width: 1024px)
{
    
}

@media screen and (min-width: 1100px)
{
    /*------- WORKSHOPS -------*/

    .workshop {
        margin-bottom: 14px;
    }
}

@media screen and (min-width: 1200px)
{
    .bloc-workshops a {
        width: 32%;
    }
}

@media screen and (min-width: 1440px)
{
    /*------- WORKSHOPS -------*/

    .container-workshops {
        padding-right: 20px;
    }

    .workshop {
        margin-bottom: 20px;
    }
}