@font-face {
    font-family: 'atilla_widenormal';
    src: url('atilla_wide_normal-webfont.eot');
    src: url('atilla_wide_normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('atilla_wide_normal-webfont.woff') format('woff'),
         url('atilla_wide_normal-webfont.ttf') format('truetype'),
         url('atilla_wide_normal-webfont.svg#atilla_widenormal') format('svg');
    font-weight: normal;
    font-style: normal;

}
html {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; 
    /*background: #dedede;*/
    background: #ffffff;
    background-size:cover;
}

.logo img{
    vertical-align:text-top;
    float: right;
    width:38%;
    margin-top : -10px;

}
#banner{
    display:block;
    width:100%;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}



table {
    border-collapse: collapse;
    border-spacing: 0;
}



body {
    font: verdana;
    /*background: linear-gradient(to top, #dedede 0% ,#FFFFFF 100%);*/
    background-repeat:no-repeat;
    margin : 0px;
}

.container {
    margin: auto;
    font-family: verdana;
}

.login {	
    margin-left:-20px;
    margin: 90px auto;
    padding: 110px 60px 60px;
    width: 576px;
    background-image: url("../images/login.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.loginNoel {    
    margin-left:-20px;
    margin: 90px auto;
    padding: 110px 60px 60px;
    width: 500px;
    background-image: url("../images/Noel/loginNoel.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.loginHNY {    
    margin-left:-20px;
    margin: 40px auto;
    padding: 12% 60px 60px;
    width: 33%;
    max-width: 444px;
    background-image: url("../images/HappyNewYear/loginNewYear.png");
    background-size: contain;
    background-repeat: no-repeat;
}


.login:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
    border-radius: 4px;
}
.login h1 {
    margin: 28px -20px 21px;
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;

}
#thatform{
    background-color: #ffffff;
    padding: 10px;
    margin: 0px 84px 160px;
    border-radius: 10px;
    width: 68%
}
#thatformHNY{
    background-color: #ffffff;
    padding: 10px;
    margin: 0 3% 3%;
    border-radius: 10px;
}

#loginTitre{
    color:#ffffff;
    margin: 3% auto 2% auto;
    width: 200px;
    text-align: center;
    font-size: 20px;
}
.msg {
	text-align : center;
	font-size : 14px;
	color : red;
}

@media all and (max-device-width: 452px){

    .login {
        border-radius: 3px;
        width : 250px;
        overflow:auto;
    }
	       
    .login h1  {
        font-size : 15px;
    }
}

p{
    display:inline;
    font-size:12px;
}
a{
    display:inline;
}

@media only screen and (min-device-width: 300px) and (max-device-width: 736px) {
    .login {    
        margin: 0px auto;
        padding: 42% 60px 60px;
        width: 64%;
        max-width: 444px;
        background-image: url("../images/login_mobile.jpg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .login h1 {
        margin: -30px -20px 21px;

    }

    #thatform{
        background-color: #ffffff;
        padding: 10px;
        margin: -10px -10px 100px;
        border-radius: 10px;
        width: 100%
    }

    .container {
        text-align: center;
    }

    .loginHNY {    
        margin-left:-20px;
        margin: 40px auto;
        padding: 42% 60px 60px;
        width: 59%;
        max-width: 444px;
        background-image: url("../images/HappyNewYear/loginNewYear_Mobile.png");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .logo img{
        vertical-align:text-top;
        width :54%;
        height: 54%;
        margin: 0 auto 0 auto;
        float:none;
    }
     input {
       margin-top:3%;
    }
    #thatformHNY{
        text-align: center;
    }
    #loginTitre{
        color:#ffffff;
        margin: 3% auto 5% auto;
    }
}