/*
Theme Name: Université de Haute-Alsace - Evènement
Author: Baldenberger Bryan
Author URI: bryan.baldenberger.fr
Version: 1.0
Description: Template theme for uha event's website
*/

*{
	
	text-decoration:none;
	 -webkit-box-sizing: border-box;
 	 -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  list-style-type:none;
}
@font-face {
    font-family: "Din";
    src: url(DINWeb.woff);
}
html{
	height:100%!important;
	padding:0!important;
	margin:0!important;
font-family: "Din";
}
.container{
	width:100%!important;
	padding:0!important;
}
#fleche{
	top:80%;
	width:100%;
	font-size:60px;
	position:absolute;
	color:white;
	text-align:center;
}
p{
	overflow:hidden;
}
.row{
	margin:0!important;
}
#header{
    margin:0;
}
.col-md-12{
	float:none!important;
}
.logos{
	width:800px;
	margin:auto;
	position:relative;
    padding-top:20px;
    text-align:center;
}
.logo{
	width:250px;
	height:auto;
	display:inline-block;
    margin:auto;
    margin:0 50px;
}
/*
.logo:nth-child(1){
	margin:0 50px 0 0;
}
.logo:nth-child(2){
	margin:0 0 0 50px;
}
*/

.logo:nth-child(1){
	float:left;
}
.logo:nth-child(2){
	float:right;
}

.logos img{
    display:block;
	width:250px;
	height:auto;
	overflow:visible;
	z-index:1000;
	position:relative!important;
}
.logobis{
	width:250px;
	height:auto;
	display:inline-block;
}
.logobis img{
	width:250px;
	position:relative!important;
}
.white{
	width:145px;
	display:inline-block;
}
.image{
	height: 100vh;
	overflow:hidden;
	padding:0!important;
	position:relative!important;
	margin:auto; 
}
.image img{
	width:2000px;
	height:100vh!important;
	position:relative!important;
	filter: brightness(75%);
	margin:auto;
}
.image h1{
	top:40%;
	width:100%;
	font-size:60px;
	position:absolute;
	color:white;
	text-align:center;
	padding:0 15%;
	font-weight:bold;
    text-transform:uppercase;
}
.section{
	display:inline-block;
	width:100%;
	margin:40px 0 30px 0!important;
}
.section-logos{
	display:inline-block;
	width:100%;
	margin:40px 0 30px 0!important;
}
.section h2, .trait{
	display:inline-block;
}
.titre{
    text-transform:uppercase;
}
.content{
    margin-top:20px;
}
.content img{
    margin:20px;
}
.trait{
	height:23px!important;
	width:200px;
	margin:25px 0 0 0;
	background-color:rgb(0,73,150)!important;
}

#contact{
	background-color:rgb(0,73,150)!important;
	margin:70px 0 0 0!important;
	padding:20px 0  20px 0;
}
#contact h2,.wpcf7-response-output, .screen-reader-response{
	color:white!important;
}

.hideme, .hidemebis{
	opacity:0;
}

/************ CONTACT & FORM 7 **************/
#contact{
	background-color:rgb(0,73,150)!important;
	margin:70px 0 0 0!important;
	padding:20px 0  20px 0;
}
#contact h2,.wpcf7-response-output, .screen-reader-response{
	color:white!important;
    text-transform:uppercase;
    font-weight: bold;
    margin-top:30px;
    margin-bottom:20px;
}

.wpcf7 {
	padding:20px 0 20px 0;
/*	max-width:95%;*/
}
.wpcf7-textarea {
    padding:10px;
    width: 100%;
    color:black;
    border:none;
    margin:2px 0 15px 0!important;
     font-size:13px;
}
.wpcf7-text{
	padding:10px 10px;
    width:100%;
    border:none;
}
label{
    width: 100%;
    font-weight:normal!important;
}

.wpcf7-not-valid-tip{
	color:#E53935;
	padding-left:10px;
}
.wpcf7-validation-errors{
	padding:10px 0 0 0;
display:none;
}
.wpcf7-mail-sent-ok{
	color:#00E676!important;

}
.screen-reader-response{
	padding:10px 0 20px 0;

}
.screen-reader-response {
    display:none;
}

.wpcf7-submit{
	font-weight:bold;
	margin:10px 0 15px 0!important;
	color:rgb(0,75,150);
	border:none;
	background:white;
    padding:10px 30px;
    cursor:pointer;
    width:100%;
}
.wpcf7-submit:hover{
	color:white;
	background:#1DE9B6;
}
#contact p input{
    margin: 7px 0 7px 0;
    font-size:13px;
}

/***** FOOTER ******/
footer{
	background-color:rgb(0,73,150)!important;
	color:white;
	margin:50px 0 0 0;
	padding:30px 0;
	display:inline-block;
}
footer img{
	width:150px!important;
}
.footer{
	margin:0;
	text-align:center;
}
.footer li{
	vertical-align:middle;
}
.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
}
/********* Back to top ***********/
.back-to-top {
	background: none;
	margin: 0;
	padding:8px 11px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	border-radius:10px;
	height: 50px;
	z-index: 10000;
	display: none;
	text-decoration: none;
	color: rgb(0,73,150)!important;
	background-color:white;
	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
.back-to-top i {
	font-size: 30px;
}
/******** TABLEAU *********/
	table{
		text-align:center;
		width:100%;
		border-spacing:2px!important;
		border-collapse:separate!important;
	}
	table tr:not(.orange):nth-child(2n){
		background:#e8ecf8;
	}
	table tr{
		background:#bedbe4;
	}
	table tr td{
		padding:10px;
	}
	table tr td:first-of-type{
		width:110px;
		
	}
	table tr:not(.orange) td:nth-child(2n){
		width:30%;
	}
	table .orange{
		background:#ffc55c;
	}

/********** IMAGEALIGNEMENT *******/
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
margin: 0 0 0 20px!important;
}
/********* RESPONSIVE ***********/
@media screen and (min-width:768px) and ( max-width: 1200px) {

	 #presentation img{
		width:33%;
	}

	#presentation, #inscription{
		margin-bottom:20px;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
	}

}

/* lg */
@media screen and (max-width: 1200px) {
    body {
        font-size: 1.2em!important;
    }
    .logos{
        width:700px;
    }
}

/* md */
@media screen and (max-width: 992px) {
    .wpcf7-textarea {
	    width: 100%;
	    color:black;
	}
	.image h1{
		font-size:30px;
		top:40%;
	}
    .footer{
        text-align:left;
    }
    .footer_item{
        padding:10px 15px;
    }
   
}

/* sm */
@media screen and (max-width: 768px) {
    body {
        font-size: 1em;
    }
     #presentation img{
		width:50%!important;
	}
	/*.image h1{
		top:40%!important;
	}*/
	#presentation, #inscription{
		margin-bottom:20px;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
	}
	.wpcf7 input:not(.wpcf7-submit) {
	    width: 100%!important;
	    color:black;
	}
    .logos{
        width:500px;
    }
	.logo{
        width:220px;
        margin:0;
	}
.logo img{
        width:220px;
        
	}
/*
    .logo:nth-child(1){
       margin:0 20px 0 0;
    }
    .logo:nth-child(2){
        margin:0 0 0 20px;
    }
*/
		
.content img{
    	margin:10px auto!important;
	display:block;
}
.alignright{
	float:none;
}

}

/* xs < 768 */
@media screen and (max-width: 650px) {
   .trait{
		display:none;
	}
	h2{
		text-align:center!important;
		width:100%!important;
		margin-left:0px!important;
	}
	.image h1{
		top:30%!important;
	}
	h3{
		font-size:20px!important;
	}
	#presentation img{
		width:90%!important;
	}
    .logos{
        width:300px;
    }
    .logo{
/*        display:block;*/
        float:initial!important;
    }
    .section{
        margin:20px 0 10px 0!important;
    }
    .section-logos{
	   display:inline-block;
	   width:100%;
	   margin:20px 0 0 0!important;
    }
table{
font-size:10px;
    }

}