﻿body{
  font-family: 'Open Sans', sans-serif;
  /* background:#3498db; */
  background:white;  
  margin:0 auto 0 auto;  
  width:100%; 
  text-align:center;
  margin:20px 0px 20px 0px;   
}

p{
  font-size:16px;
  text-decoration: none;
  color:#ffffff;
}

h1{
  font-size:1.5em;
  /* font-size:2em; */
  color:#525252;
}

.box{
  border: 0px solid black;
  /* border: #2980b9 0px solid;  */
  background:white;
  /* width:300px; */
  width:400px;
  border-radius:6px;
  margin: 0 auto 0 auto;
  padding:0px 0px 20px 0px;
  
}

.email{
  background:#ecf0f1;
  border: #ccc 1px solid;
  /* border-radius:4px; */
  border-radius:0px;
  border-bottom: #ccc 2px solid;
  padding: 5px;
  /* width:260px;   */
  width:360px;
  color:#AAAAAA;
  margin-top:10px;
  font-size:1.5em;
}

.password{
  background:#ecf0f1;
  /* border-radius:5px; */
  border-radius:0px;
  border: #ccc 1px solid;
  padding: 5px;
  /* width:260px;  */
  width:360px;
  font-size:1.5em;
}

.btn1{
  /* background:#2ecc71; */
  background:#3498db;
  width:175px;
  padding:5px;
  /* padding-top:5px; */
  /* padding-bottom:5px; */
  color:white;
  border-radius:4px;
  /* border: #27ae60 1px solid; */
  border: 1px solid black;
  margin-top:20px;
  /* margin-bottom:10px; */
  float:left;
  margin-left:20px;
  font-weight:500;
  /* font-size:0.8em; */
  font-size:1.5em;
}

.btn1:hover{
  /* background:#2CC06B; */
  background:darkred;  
}

.btn2{
  /* background:#3498db; */
  background:#2ecc71;
  width:175px;  
  padding-top:5px;
  padding-bottom:5px;
  color:white;
  border-radius:4px;
  /* border: #27ae60 1px solid; */
  border: 1px solid black;
  margin-top:20px;
  /* margin-bottom:10px; */
  float:left;
  margin-left:10px;
  font-weight:500;
  /* font-size:0.8em; */
  font-size:2em;
}

.btn2:hover{ 
  /* background:#3594D2;  */
  background:darkred;
}

.btn3{
  /* background:red; */
  background:#3498db;
  /* background:#2ecc71; */
  width:360;  
  padding-top:5px;
  padding-bottom:5px;
  color:white;
  border-radius:4px;
  /* border: #27ae60 1px solid; */
  border: 1px solid black;
  margin-top:10px;
  margin-bottom:0px;
  /* float:left; */
  float:middle;
  /* margin-left:10px; */
  margin-left:0px;
  font-weight:500;
  /* font-size:0.8em; */
  font-size:1.5em;
}

.btn3:hover{ 
  /* background:darkred; */
  background:red;  
}

/* Responsive design: --------------------------------------------------------------------------------- */
@media screen and (min-width: 300px) {					/* Samrtphones: VOY, ...						*/
	body {
		border: 2px solid orange;
		width: 380px;
		/* width: 393px;				*/				/* XIAOMI Redmi Note ... [VOY]					*/
		/* background-color: green;		*/				/* #90ee90: helles grün							*/
		/* background-color: black; */
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	.box{
	  /* border: 0px solid black; */
	  /* background:white; */
	  /* width:300px; */
	  width:300px;
	  /* width:360px; */
	  /* border-radius:6px; */
	  /* margin: 0 auto 0 auto; */
	  /* padding:0px 0px 70px 0px; */
	  /* border: #2980b9 4px solid;  */
	}
	
	.email{
	  /* background:#ecf0f1; */
	  /* border: #ccc 1px solid; */
	  /* border-radius:4px; */
	  /* border-bottom: #ccc 2px solid; */
	  /* padding: 5px; */
	  width:260px;  
	  /* width:360px; */
	  /* color:#AAAAAA; */
	  /* margin-top:10px; */
	  font-size:1.0em;
	}

	.password{
	  background:#ecf0f1;
	  border-radius:5px;
	  border: #ccc 1px solid;
	  padding: 5px;
	  width:260px;
	  /* width:360px; */
	  font-size:1.0em;
	}
	
	.btn1{
	  /* background:#2ecc71; */
	  /* background:#3498db; */
	  width:125px;
	  /* padding:5px; */
	  /* padding-top:5px; */
	  /* padding-bottom:5px; */
	  /* color:white; */
	  /* border-radius:4px; */
	  /* border: #27ae60 1px solid; */
	  /* margin-top:20px; */
	  /* margin-bottom:20px; */
	  /* float:left; */
	  /* margin-left:20px; */
	  /* font-weight:500; */
	  /* font-size:0.8em; */
	  font-size:1.0em;
	}

	.btn2{
	  /* background:#3498db; */
	  /* background:#2ecc71; */
	  width:125px;  
	  /* padding-top:5px; */
	  /* padding-bottom:5px; */
	  /* color:white; */
	  /* border-radius:4px; */
	  /* border: #2980b9 1px solid; */
	  /* margin-top:20px; */
	  /* margin-bottom:20px; */
	  /* float:left; */
	  /* margin-left:10px; */
	  /* font-weight:500; */
	  /* font-size:0.8em; */
	  font-size:1.0em;
	}
	
	.btn3{
	  /* background:#3498db; */
	  /* background:#2ecc71; */
	  width:260px;  
	  /* padding-top:5px; */
	  /* padding-bottom:5px; */
	  /* color:white; */
	  /* border-radius:4px; */
	  /* border: #2980b9 1px solid; */
	  /* margin-top:20px; */
	  /* margin-bottom:20px; */
	  /* float:left; */
	  /* margin-left:10px; */
	  /* font-weight:500; */
	  /* font-size:0.8em; */
	  font-size:1.0em;
	}	
		
@media screen and (min-width: 800px) {						/* Tablets: TABLETTE, ...						*/
	body {
		border: 0px solid blue;
		width: 800px;
		/* background-color: white; */
		margin-left: auto;
		margin-right: auto;
		}	

	.box{	
	  /* background:white; */
	  /* width:300px; */
	  /* width:400px; */
	  width:400px;
	  /* border-radius:6px; */
	  /* margin: 0 auto 0 auto; */
	  /* padding:0px 0px 70px 0px; */
	  /* border: #2980b9 4px solid;  */
	}
	
	.email{
	  /* background:#ecf0f1; */
	  /* border: #ccc 1px solid; */
	  /* border-radius:4px; */
	  /* border-bottom: #ccc 2px solid; */
	  /* padding: 5px; */
	  /* width:260px;   */
	  width:360px;
	  /* color:#AAAAAA; */
	  /* margin-top:10px; */
	  font-size:1.5em;
	  }

	.password{
	  background:#ecf0f1;
	  border-radius:5px;
	  border: #ccc 1px solid;
	  padding: 5px;
	  /* width:260px;  */
	  width:360px;
	  font-size:1.5em;
	}
	
	.btn1{
	  /* background:#2ecc71; */
	  /* background:#3498db; */
	  width:175px;
	  /* padding:5px; */
	  /* padding-top:5px; */
	  /* padding-bottom:5px; */
	  /* color:white; */
	  /* border-radius:4px; */
	  /* border: #27ae60 1px solid; */
	  /* margin-top:20px; */
	  /* margin-bottom:20px; */
	  /* float:left; */
	  /* margin-left:20px; */
	  /* font-weight:500; */
	  /* font-size:0.8em; */
	  font-size:1.5em;
	}

	.btn2{
	  /* background:#3498db; */
	  /* background:#2ecc71; */
	  width:175px;  
	  /* padding-top:5px; */
	  /* padding-bottom:5px; */
	  /* color:white; */
	  /* border-radius:4px; */
	  /* border: #2980b9 1px solid; */
	  /* margin-top:20px; */
	  /* margin-bottom:20px; */
	  /* float:left; */
	  /* margin-left:10px; */
	  /* font-weight:500; */
	  /* font-size:0.8em; */
	  font-size:1.5em;
	}
	
	.btn3{
	  /* background:#3498db; */
	  /* background:#2ecc71; */
	  width:360px;  
	  /* padding-top:5px; */
	  /* padding-bottom:5px; */
	  /* color:white; */
	  /* border-radius:4px; */
	  /* border: #2980b9 1px solid; */
	  /* margin-top:20px; */
	  /* margin-bottom:20px; */
	  /* float:left; */
	  /* margin-left:10px; */
	  /* font-weight:500; */
	  /* font-size:0.8em; */
	  font-size:1.5em;
	}