/**************************************
               WHOLE DOC
**************************************/

html{
    position: relative;
    min-height: 100%;
	backfround-color:#c7c9c9;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 5px;
}
body{
    width: 100%;
    height: 100%;
	background-color:#99;
}
.bg{

    background-image: url('../images/back.jpg');
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.content{
	padding-bottom: 4em;
	min-height:90%;
}
.title{
    text-align: center;
    font-style: italic;
}
.center{
    text-align: center;
}
.userForm{
    color: white;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    black;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    black;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    black;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    black;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    black;
}

::placeholder { /* Most modern browsers support this now. */
   color:    black;
}
input[id^="search"]::-webkit-input-placeholder { 
  color: black;
}
input[id^="search"]::-moz-placeholder { 
  color: black;
}
input[id^="search"]:-ms-input-placeholder { 
  color: black;
}
input[id^="search"]:-moz-placeholder { 
  color: black;
}

.login{
    color: white;
}

.accroche a{
    text-decoration: underline;
	color:rgb(145, 209, 223);
}

.accroche h2{

}
.container-fluid{
    position: relative;
    min-height: 100vh;
    padding: 0;
}
/**************************************
              ABOUT
**************************************/
img#about{
    width: 15em;
    border: 1px wheat solid;
    border-radius: 60%

}
.about{
    margin-left: auto;
    margin-right: auto;
    float: none;
    margin-top: 1%;
	amrgin-bottom:1em;

}


/**************************************
               ERROR MESSAGE
**************************************/

.display_error{
    background-color: rgba(255,255,255,0.5);
    color: red;
    font-style: italic;
    font-weight: bold;
}
.display_success{
    background-color: rgba(255,255,255,0.5);
    color: green;
    font-style: italic;
    font-weight: bold;
}
.about-members{
	text-align: center;
	
}
.about-members .about{
	display: inline-block;
	background-color:rgb(145, 209, 223);
}

/**************************************
              HEADER & NAV
**************************************/

.header{
    height: auto
}
#headerImg{
    width: 5em;
    margin-left: auto;
    margin-right: auto; 
}
.logo{
    display: inline-block;

}
#plogo{

    margin-left: 2em;
    width: 3em;    
    border-radius: 40%;
    margin-top: -1em;

}
.topnav {
    overflow: hidden;
    margin-right: 0;
    float: right;
    top:2em;
}
.topnav a#logo-res{
    display: none;
}

.topnav a:not(:first-child){
    background-color: rgba(255,255,255,0.7);
    float: right;
    display: block;
    color: darkblue;
    text-align: center;
    padding: 4px 14px;
    text-decoration: none;
    font-size: 1em;;
    margin-right: 1em;

    border-radius: 12%;
}

.topnav a:hover {
    background-color: #90d1df;
    color: white;
}

.topnav a.active {
    background-color: #90d1df;
    color: darkblue;
}

.topnav a.icon{
    display: none;
}

/**************************************
              ACCUEIL
**************************************/
.accroche{
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px #90d1df, 0 0 5px darkblue;
    text-align: center;

}
.citySearch{
    width: 100%;
    margin-top: 12em;
}


.wellogo{

    display: block;
    margin: auto;
    height: auto;
    float: none;



}

.divSearch{
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;

}

.wellogo img{
    width: 80%;
    margin: auto;
    float: none;
    height: auto;
	margin-top: 7%;
	display:block;

}
#custom-search-input{
    height: auto;
}

.search-form{
    margin: auto;
    max-width: 600px;

}

#search{
    background-color: rgba(255,255,255,0.7);
    color: darkblue;
    line-height: 1em;
    float: left;
    width: 80%;
}

.inputForm{
    background-color: rgba(255,255,255,0.7);
    color: darkblue;


}
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
    background-color: rgba(255,255,255,0.7);
} 

#search_btn{
    margin-left: 1em;
    float: left;
    font-size: 1vw;
    color: darkblue;
    background-color: #90d1df;
}

contain-wrap{
    padding-bottom: 4em;
}

.accroche video{
	margin-top:5%;
	margin-bottom:5%;
}
#accueil-about{
	margin-bottom: 3%;
}

.footer {

	position:absolute;
	margin-left:1em;
	width: 100%;
	float: none;
	background-color: rgba(241,218,95,0.4);

}
.footer-a ul li p{

    text-align: center;
}
.footer-a ul li p a{

    color: darkblue;
    text-decoration: underline;
    font-size: 2rem;

} 
.footer-a ul {

    list-style-type: none;

}
.row-footer{
    height: 0;
}
.footer-medias{
	position:relative;
	height:3em;
	display:flex;
	margin:auto;
	text-align:center;
	background-color:rgba(255,255,255,0.9);
}
.social-link{
	margin:auto;
}
.footer-medias a img{
	margin-right:2rem;
	max-width:2.5rem;
	height:auto;
	
}

/**************************************
              INSCRIPTION
**************************************/
.regForm{
    /*    background-color: #f5dbc8;*/
    border-radius: 7%;
    border: 1px solid #fff;
    color: white;
    font-weight: bold;
}

input[type=text],[type=date],[type=email],[type=password], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #fff;
    border-radius: 4px;
    resize: vertical;
    background-color: rgba(241,218,95,0.4);
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    font-size: 1.5em;
}

input[type=submit] {
    background-color: #f1da5f;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    height: 30px;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.formButton{
    text-align: center;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    /*    padding: 20px;*/
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
#ui-datepicker-div{
	min-width:20%;
}



/**************************************
              LOGIN PAGE
**************************************/

#showResetPassword{
    text-decoration: underline;
}

.login-btn{
	display: block;
	margin:1em auto 1em auto !important;
	float: none !important;
	
}
.recover-pass{
	width: 100% !important;
	padding: 3em;
}
div.col-lg-8.col-xs-12.eventDetails.regForm.event{

	min-height:35em;
}



/**************************************
              EVENTS
**************************************/

.event{
    background-color: rgba(255,255,255,0.7);
    color: darkblue;
    width: 80%;
padding: 1em;

}
.event h3{
    color: darkblue;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    margin-top: 1em;
}
.event h3 a{
	color: rgb(145, 209, 223);
}
.event p{
    font-size: 1em;
    margin: 0;
}
.event p #link{
    color: darkblue;
    font-weight: bold;
    font-size: 1em;
}

.containerImage{
    position: relative;
    text-align: center;
    background-size: cover;
    height: 20em;
}

.overlay {

    height: 5em;
    background-size: 6em;
    background-repeat: no-repeat;
    color: black;
    position: absolute;
    margin-top: 1em;
    margin-right:  0.2em;
    width: 8em;
    height:  6em;
}
.overlay img{
    width: 100%;
}

#progressbar, .w3-green{
    height: 1.2em;
    font-size: .8em;
}

p {
    position: relative;
    z-index: 1;

    font-size: 2em;
}
.small{
    font-size: 0.3em;
}
#desc{
    height: auto;

}
#desc h2{
    color: darkblue;
    text-align: left;
    font-weight: bold;


}

#imageEvent{
    height: 100%;

}
.eventDetails{
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    height: auto;
    padding: 1em;
    margin-top: 1em;
}
/**************************************
              EVENTS
**************************************/
.retour{
	color: rgb(255, 255, 255);
	background-color: rgb(145, 209, 223);
}
/**************************************
              USER-PROFILE
**************************************/
.ui-widget-header{
	border: none;
	
}
.nav-tabs.primary > li > a {
	background-color:rgba(145, 209, 223,0.4)!important;
}
.nav-tabs.primary > li > a.active {
	background-color:white!important;
}

.tab-content label{
    font-weight: bold;
    font-size: 1.5em;
}
.tab-content input{
    border-bottom: 2px solid #fff;
    border-radius: 4px;
    background-color: rgba(241,218,95,0.4);
    width: 20em;
}

td, th{
padding:3%;	
}

/**************************************
              RESPONSIVE DESIGN
**************************************/

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .logo{
        width:30%;
    }
    .toggler{
        display: none;
    }
    .menu ul li{
        display: block;
    }

}

.toggler{
    margin-right: 1em;
}

.panel-title {
    display: inline;
    font-weight: bold;
}
.display-table {
    F      display: table;
}
.display-tr {
    display: table-row;
}
.display-td {
    display: table-cell;
    vertical-align: middle;
    width: 61%;
}


@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
#success-paypal{
	width: 80%;
margin-left: 5em;
margin-bottom: 15%;
margin-right: 5em;
}
/*****************************************************************************/
/**************************    MOBILE FRIST    *******************************/
/*****************************************************************************/


/*****************************************************************************/
/**************************    STANDARD DEVICES    *******************************/
/*****************************************************************************/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-radius: 0%;
  }
}
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) {
	.content{
		margin-top:3rem;
	}
}
@media only screen and (max-width: 768px) {

        /* For mobile phones: */
    [class*="col-"] {
     
    }
     /**************************    HEADER    *******************************/
	
	.header{
	min-height:5rem;	
	}
	.content{
		margin-top:3rem;
	}
     /**************************    NAV    *******************************/
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block !important;

        border: 1px darkblue solid;
        color: darkblue;

    }
    .logo{
        display: none;
    }
    logo #headerImg{
        text-align: center;  
    }
    
    .topnav a#logo-res{
        display: none;
    }

    #headerImg{
        display: none;
    }
    
    .wellogo img{
        width: 75%;
        display: block;
        margin: auto;
    }
    
    a.active{
        display: none;
    }
   
  /**  .topnav a:first-child, .topnav a:last-child{
        background-color: darkblue;
        color: white;
    }*/

    #myTopnav{
        background-color: transparent;
    }
 
    .logo p#headerImg{
        display: none;
    }
  .topnav.responsive {position: relative; width: 100%}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;

    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        border-radius: 0%;
    }
	#search_btn{
		width:100%;
		border-radius:0%;
		font-size:2vw;
		margin-top:1em;
		margin-left:0;
	}
	#search{
	width:100%;	
	}
	.footer{
	margin-left:1em;	
	}
	
	.eventDetails{
	width:100%;	
	}
	table{
	margin-left:-2em;	
	}
	td, th{
		font-size: 0.8em;
padding: 3%;
	}
}



@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

@media only screen and (min-width: 1024px){
	.wellogo{
		padding-top:4%;
	}
	.no-event{
		min-height: 45em;	
	}
	
}
@media only screen and (max-width: 1440{
	td, th{
		font-size: 1em;
padding: 3%;
	}
}