html{height: 100%}
body{
    font-size: 16px;
    color: #fff;
    background-color: #000000;
	/*
	background-image: linear-gradient(120deg, #2aac97 30%, #ccd89a 90%);
	*/
	
	background-image: url(../images/bg.jpg);
	background-position-x: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	overflow-x: hidden; position: relative; height: 100%;font-family: 'Montserrat', sans-serif;
}


@media screen and (max-width:420px){
    body{
        font-size: 14px;
    }
}
.scrollbar {
            height:250px;
            width:100%;
            overflow: auto;
            padding: 0 10px; text-align: left
        }
        /*       ScrollBar 1        */
        
        #scrollbar1::-webkit-scrollbar {
            width: 10px;
        }
        
        #scrollbar1::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar1::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #017cd2;
        }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}



.header{position: relative; max-width: 90%; margin: 0 auto; text-align: left}
#container{position: relative; max-width:1400px; margin: 0 auto;}
#imgSport{position: absolute; bottom: 0; left: 10vh; z-index: 1}
#imgSport img{max-height: 90vh}
/* loader */
#loading-mask {

    position: fixed;
    top: -20%;
    left: -20%;
    width: 150vw;
    height: 1000vh;
    background: rgb(0 0 0 / 50%);
    z-index: 1000;
}

#loading-mask h1 {
    text-align: center;
    color: black;
    padding-top: 50%;
}

#loading-mask .preloader {
    position: absolute;
    text-align: center;
    height: 20px;
    width: 20px;
    top: calc(70vh - 30px);
    left: calc(70vw - 10px);
}

#loading-mask .c-three-dots-loader {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation-fill-mode: both;
    animation: three-dots-loader-animation 2s infinite ease-in-out;
    animation-delay: -0.16s;
    color: rgb(251, 250, 250); 
}

#loading-mask .c-three-dots-loader:before, #loading-mask .c-three-dots-loader:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    color: white;
    animation: three-dots-loader-animation 2s infinite ease-in-out;
    border-radius: 50%;
}

#loading-mask .c-three-dots-loader:before {
    left: -24px;
    animation-delay: -0.32s;
}

#loading-mask .c-three-dots-loader:after {
    left: 24px;
}

#loading-mask .load-mask-wrapper {
    position: absolute;
    text-align: center;
    height: 200px;
    width: 200px;
    top: calc(50vh - 100px);
    left: calc(50vw - 100px);
}

#loading-mask .load-mask-innerDots {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
}

#loading-mask .load-mask-outerPlane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@keyframes three-dots-loader-animation {
 0%,
 80%,
 100% {
   box-shadow: 0 20px 0 -24px;
 }
 40% {
   box-shadow: 0 20px 0 0;
 }
}


/* loader */


.landing_page{
    max-width:50%;
    width: 100%; float:right;
    text-align: center; margin-top: -200px;
}


.logo{
    max-width: 80%;
    padding: 20px
}

/*
@media screen and (max-width:280px){
    .logo{
        max-width: 80%;
        padding: 10px 10%;
    }
}


.logo{
    height: 200px;
}
*/
.title{
    text-align: center;
    font-size:6vh;
    color: #eefc00;
    padding: 0 10px; font-family: 'Teko', sans-serif; line-height: 8vh
}
.login h2{font-size:28px; color: #017cd2; position: relative;font-family: 'Montserrat', sans-serif; font-weight: 400}
.login h2::before{position: absolute;
    left: 42%;
    width: 16%;
    bottom: -10px;
    height: 5px;
    background: #017cd2;
    content: '';


}

@media screen and (max-width:420px){
    .title{
        font-size: 18px;
    }
}

@media screen and (max-width:360px){
    .title{
        font-size: 16px;
        
    }
}
@media screen and (max-width:280px){
    .title{
        font-size: 14px;
    }
}
.title img{
    width: 20%;
    float: left;
    margin-right: 10px;
}

.title strong{
    color: #fff;
}

.login_form{
    text-align: center; background: #fff; max-width: 768px; border-radius: 20px
}
.login_title{
    border: 1px solid #017cd2;
    width: 92%;
    margin: auto;
    border-radius: 12px;
    color: #fff; background: #017cd2;
    font-weight: bold;
	margin:5vh 4% 15vh 4%;
    box-shadow: 0 0px 37px 0px #fff;
    padding: 5px 0;
}

.login_form{
    width: 90%;
    
    padding: 20px 5%;
    border-radius: 20px;
    color: #000; text-align: center;
    margin-top: 20px;
    
}

.login_form label{
 display: block; margin-bottom: 20px; font-size: 18px    
}

.login_NumTel input, .login_code input{
    width: 80%;
    border: 1px solid #a8c2c8;
    border-radius: 12px;
    padding: 18px 20px;
    font-size: 20px;
    text-align: left;
    color: #000;
    background-color: rgba(255,255, 255, 0.2);
}

/*
.btn{
    display: inline-block;
    width: 90%;
    color: #000000;
    background-color: #fff;
    
    border: 1px solid #fff;
    border-radius: 27px;
    margin-top: 20px;
    font-family: "gotham";
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    height: 54px;
}
*/
.btn{
    display: inline-block;
    width:86%;
    color: #fff ;
    background-color: #017cd2;
    border: 1px solid #017cd2;
    border-radius: 10px;
    margin-top: 20px;
   font-family: 'Teko', sans-serif; text-transform: uppercase;
    font-size: 34px;
    font-weight: bold;
    cursor: pointer; padding:6px 5px 4px 5px;
    line-height: 2;
}
.btn:hover{
    background-color:#eefc00; color: #000;border: 1px solid #eefc00;
}
a.btn{text-decoration: none; font-size: 28px}
.link-newNum{
    text-decoration: none;
    color: #017cd2;
    line-height: 2em;
    
}

.footer{
    text-align: center;
    color: #fff;
    width: 96%;
    margin: auto;
	margin-top: 6vh; 
}
.logo2{
    max-width: 80px;
    padding: 10px;
}

.footer a{
    text-decoration: none;
    color: #fff;
    line-height: 2em; font-size: 13px
}

/*centrer texte btn continuer */
#confirm>a.btn {
    line-height: 2;
}

@media screen and (min-width:1921px){
	#imgSport{left: 5vh}
	.landing_page{max-width:58%}
	.login{margin: 0 auto}
	.title{font-size:6.7vh}
}
@media screen and (max-width:1528px){
.logo {
    max-width: 230px;
    padding:5px;
}
	.landing_page{margin-top: -160px}
}

@media (orientation: portrait) {
	#imgSport{display: none}
	.landing_page {
    max-width: 96%;
    margin-top: 0;
	}
	.title {
    text-align: center;
    font-size: 4vh;
	}
		body{background-image: url(../images/bg_mob.jpg);}	
}


@media screen and (max-width:912px){
	body{background-image: url(../images/bg_mob.jpg);}	
	#imgSport{display: none}
	.header {
    position: relative;
    max-width: inherit;
    margin: 0 auto;
    text-align: center;
    float: left;
    width: 100%;
}
	.scrollbar {
    height: 300px;
    width: 92%;
    overflow: auto;
    padding: 0 10px;
    text-align: left;
    overflow-x: hidden;
}
	.header img.logo{max-width: 180px}
	
	.landing_page {
    margin-top: 0;
}
.landing_page {
    max-width: inherit;
    width: 100%;
    float: right;
    text-align: center;
}
	.title{font-size: 28px;
    line-height: 40px;}
	.title h3{margin: 10px 0}
	
	.login h2{font-size: 22px}
	
	.login_form {
    width: 96%;
    padding: 10px 2%;
}
	.login_form label{font-size: 16px}
	.btn {
    display: inline-block;
    width: 94%;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 30px;

}
	

.login_form {

    background: rgba(255, 255, 255, 0.9);
	
}
}

@media screen and (max-width:450px){
	.footer, .footer a{font-size: 12px}
	
	
}