html{height:100%;background-color:#F5F5F5;width:100%;margin:0;}
body{margin:0;height:100%;font-family:"Trebuchet MS", sans-serif;font-size:14px;width:100%;background: linear-gradient(to right, #31b0c1, #815698);}
.container{height:100%;display:grid;grid-template-columns:100%;grid-template-rows:120px 60% auto;grid-template-areas:"header" "main" "footer";}
.item-1{grid-area:header;display:flex;justify-content:start;align-items:center;padding:40px;color:white;font-size:20px;font-family:"Trebuchet MS", sans-serif;text-transform:uppercase;}
.item-1>img{height:80px;padding-right:25px;}
.item-2{padding:0px 100px 0 0;grid-area:main;display:flex;position:relative;justify-content:space-around;align-items:center;color:white;font-family:"Trebuchet MS", sans-serif;}
.item-2>.sub-item{z-index:2;}
.sub-item-1{width:15%;}
.sub-item-1>img{height:150px;}
.sub-item-2{width:45%;}
.sub-item-3{width:30%;}
.item-3{grid-area:footer;background-color:white;height:100px;display:flex;justify-content:center;align-items:center;padding:40px;color:white;font-size:20px;font-family:"Trebuchet MS", sans-serif;text-transform:uppercase;}
.item-3>img{height:80px;padding-right:25px;}
.bandeau{width:100%;height:50%;background:rgba(0,72,153,0.3);z-index:1;position:absolute;left:0;}
.login-card{background-color:white;height:100%;padding:50px 50px 25px 50px;border-radius:7px;box-shadow:0 0 6px #32B9C8;color:black;}
.compte{text-align:left;font-size:12px}
.mentions{text-align:center;font-size:11px;color:#abb2b9;margin-top:25px;}
h1{font-family:"Trebuchet MS", sans-serif;font-size:40px;margin:0 0 15px 0;}
h2{font-family:"Trebuchet MS", sans-serif;font-size:25px;background-color:rgb(160,50,140);padding:6px;box-sizing:content-box;display: inline-block;}
h3{font-family:"Trebuchet MS", sans-serif;text-transform:uppercase;font-size:30px;letter-spacing:1px;color:#47D1E1/*#5a7c32*/;margin:0;}
.summary{font-style:italic;font-family:"Trebuchet MS", sans-serif;font-size:13px;color:#abb2b9;margin-top:10px;margin-bottom:25px;display:inline-block;}
input {padding:15px;border-radius:3px;border:1px solid #e5e7ea;background-color:#fbfcfc;width:calc(100% - 30px);margin-top:10px;margin-bottom:10px;font-family:"Trebuchet MS", sans-serif;}
input:first-child{margin-top :30px;}
input:focus{border:1px solid #BBBBBB;border-radius:3px;}
input:hover{border:1px solid #D9D9D9;}
form p:first-child,form p:nth-child(2){margin:0;padding:0;}
form p:first-child{margin-top:25px;margin-bottom:10px;}
label{font-size:12px;font-family:"Trebuchet MS", sans-serif;color:#6c757d;}
form p:last-child button{width:100%;}
button{padding:10px 14px 10px 14px;font-size:12px;cursor:pointer;min-width:50px;min-height:30px;font-variant:all-small-caps;margin-left:2.5px;margin-right:2.5px;border:1px solid #32B9C8;background-color:#32B9C8;color:white;}
a{color:#32B9C8;text-decoration:none;font-weight:bold;}
.alert{display:flex;background-color:white;font-size:12px;}
.alert>div:nth-child(1){width:50px;}
.alert>div:nth-child(2){width:calc(100% - 100px);padding:20px;}
.alert>div:nth-child(3){width:50px;}
.alert>div:nth-child(1) img{padding:15px;}
.alert>div:nth-child(3) img {width:15px;padding:18px;}
.alert-success{border:1px solid #8ac249;}
.alert-success>div:nth-child(1){background-color:#d3e8bb;}
.alert-warning{border:1px solid #ec4b4b;}
.alert-warning>div:nth-child(1){background-color:#f8bcbc;}

@media screen and (min-width: 1280px) and (max-width: 1919px){
  .container{grid-template-rows:100px 60% auto;}
.item-1>img{height:50px;}
.sub-item-1>img{height:100px;}
.item-3{height:50px;padding:20px;margin-top:30px}
.item-3>img{height:50px;}
h1{font-size:40px;}
h2{font-size:18px;}	
h3{font-size:25px;}
.summary{font-size:12px;}
input {padding:10px;}
label{font-size:11px;}	
body{font-size:11px;}	
  .sub-item-2{width:40%;}
}

@media screen and (min-width: 667px) and (max-width: 1279px){
	body{background-position:85% center;}
	.container{grid-template-rows:50px calc(100% - 50px) 0;grid-template-areas:"header" "main" "footer";}
	.item-1{padding:20px;font-size:12px;}
	.item-1>img{height:50px;padding-right:25px;}
	.item-2{padding:0;display:flex;align-items:center;justify-content:start;}
	.sub-item-1{display:none;width:10%;}
	.sub-item-1>img{display:none;height:50px;}
	.sub-item-2{width:40%;}
	.sub-item-2{width:60%;}
	.item-3{height:25px;padding-right:20px;}
	.item-3>img{height:15px;padding-right:25px;}
	.login-card{position:absolute;top:-50px;height:calc(100vh - 30px);padding:15px;}
	input {padding:5px 15px 5px 15px;}
	input:first-child{margin-top:10px;}
	h1{font-size:30px;padding-left:20px;}
	h2{font-size:15px;padding-left:20px;}	
	h3{font-size:25px;margin:0;}
	.summary{font-size:12px;margin-bottom:5px;}
	.mentions{text-align:center;font-size:10px;color:#abb2b9;margin-top:20px;}
	.bandeau{top:25%;}
}

@media screen and (max-width: 666px)
{
	body{background-position:85% center;}
	.container{grid-template-rows:calc(100% - 50px) 50px;grid-template-areas: "main" "header";}
	.item-3{display:none;}
	.item-1{padding:0;font-size:12px;height:50px;display:flex;justify-content:center;}
	.item-1>img{height:15px;}
	.item-2{padding:0;display:flex;flex-direction:column;align-items:center;justify-content:start;height:calc(100vh - 50px);}
	.sub-item-1{display:none;width:10%;}
	.sub-item-1>img{display:none;height:50px;}
	.sub-item-2{height:100px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
	.sub-item-2>h2{display:none}
	.sub-item-3{height:calc(100% - 100px);width:90%;}
	.login-card{padding:35px;height:calc(100% - 70px);}
	h3{font-size:20px;margin:0;}
	.summary{font-size:12px;margin-bottom:5px;}
	h1{font-size:30px;padding:0px;margin:0;}
	h2{font-size:15px;padding:0px;margin:0;}	
	.bandeau{top:25%;}
}