@charset "utf-8";
/* CSS Document */
.popup {
  position:fixed;
  z-index:9;
  top: 20%;
  right: 50%;
  margin-top:-0px;
  margin-right:-200px;
  width: 400px;
  height: auto;
  border-radius: 10px;
  border: 10px solid rgba(255,255,255,1.0);	
  background-image: url("../images/popup/background.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;	
  display: none;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto, auto, auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;	
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
	.popup {width: 300px; left:50%; right:0%; margin-left:-150px; margin-right:0px }
}


.popup .logo { grid-area: 1 / 1 / 2 / 2;  padding:10px 0px 10px 10px }

.logo img {
	width: 50px
}

.popup .whitespace { grid-area: 1 / 2 / 2 / 3; }

.popup .icons { 
	grid-area: 1 / 3 / 2 / 4;  
	position: absolute; 
	right: 0px; 
	padding: 10px 10px 0px 0px 
}

#exit {  
	width: 24px;
	opacity: 1.0;
}

#exit:hover, #exit:focus {
	opacity: 0.5;
}

.popup .content { 
	grid-area: 2 / 1 / 3 / 4; 
	margin: 0px 10px 10px 10px;
    padding: 10px 10px 0px 10px;	
	background-color:RGBA(255,255,255,0.075); 
	border-radius:10px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 0px;
    grid-row-gap: 10px;
}

.content .name { grid-area: 1 / 1 / 2 / 2 }
.content .email { grid-area: 2 / 1 / 3 / 2 }
.content .message { grid-area:  3 / 1 / 4 / 2 }

input, textarea {
  width: 100%;
  border: 1.5px solid lightgray;
  border-radius: 5px;
  padding: 10px;
  color: white;		
  box-sizing: border-box;
  resize: none;
  background: transparent;
  margin-bottom: 10px;	
  margin-top: 5px;	
  letter-spacing: normal;	
}

::placeholder {
  color: white;
  opacity: 0.5
}

label {
  font-family: 'Arial',Arial, Helvetica, sans-serif; 
  font-size: 16px;
  font-weight: bold;	
  color: #5DADE2;	
  letter-spacing: 1.25px	
}


.popup .buttons { 
	grid-area: 3 / 1 / 4 / 4; 
	text-align: right;
	padding: 0px 10px 10px 0px 
}

button {
  background-color: #5DADE2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-family: 'Arial',Arial, Helvetica, sans-serif; 
  font-size: 16px;
  font-weight: bold;	
}

button:hover {
	opacity:0.75;
}