/* Default css */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

.container {
  display: none;
  width: 90%;
  height: auto;
  top: -7%;
  position: fixed;
  transform: translate(5%, 100%);
  border: 1px solid black;
  cursor: pointer;
  z-index: 3;
}

@media screen and (min-width: 900px){
  .container{
    width: 50%;
    top: 0;
    transform: translate(50%, 50%);
  }
}

@media screen and (min-width: 1750px){
  .container{
    width: 50%;
    top: -10%;
    transform: translate(50%, 50%);
  }
}

.container img {
  width: 100%;
  height: auto;
}

.container .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 800;
  margin-top: 38%;
  cursor: pointer;
  line-height: .5;
  text-align: center;
  background-color: white;
  border: 2px solid green;
  border-radius: 12px;
}

.container .centered p {
  padding-left: 10px;
  padding-right: 10px;
}

.container .centered:hover {
  color: white;
  background-color: green;
}

.screensize {
  width: 25%;
  margin-left:auto; 
  margin-right:auto;
 
  }

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 1150px) {
  .screensize {
    width: 50%;
    margin-left:auto; 
    margin-right:auto;
   
    }
  }

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .screensize {
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
   
    }
  }

.utilsize {
  width: 50%;
  margin-left:auto; 
  margin-right:auto;
 
  }

  .keeplogged{
    font-size:16px; 
    float:right; 
    margin-top:1%;
  }
  
  
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 1400px) {
  .utilsize {
    width: 60%;
    margin-left:auto; 
    margin-right:auto;
   
  }
  .keeplogged{
    font-size:16px; 
    float:right; 
    margin-top:1.5%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 875px) {
  .utilsize {
    width: 70%;
    margin-left:auto; 
    margin-right:auto;
   
  }
  .keeplogged{
    font-size:16px; 
    float:right; 
    margin-top:2%;
  }
}

@media screen and (max-width: 545px) {
  .utilsize {
    width: 90%;
    margin-left:auto;
    margin-right:auto;

  }
  .keeplogged{
    font-size:16px;
    float:right;
    margin-top:2%;
  }
}

	  button {
        color: darkblue;
        background-color: skyblue;
        font-size: 16px;
        margin: 4px 2px;
        border-radius: 8px;
        cursor: pointer;
      }
        
	  button:hover{
	    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.24), 0 8px 25px 0 rgba(0,0,0,0.19);
	    }


        
body {  }