/*
	Code By: Aaron Pellerine [spaquito.ca]
*/

.sack {
/* The image used */
/* background-image: url("/comingSoon/images/bg.png?t=2"); */
z-index: 1;

/* Full height */
height: 100%; 

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
img {
width: 600px;
}

#logo {
position: fixed;
top: 20%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/*border: 2px solid red;*/
}

#loginFORM {
position: fixed;
top: 35%;
left: 45%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/*border: 20px solid red !important;*/
}

#email {
position: fixed;
top: 70%;
left: 50%;
color: white;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 10px;
border-radius: 25px;
transform: translate(-50%, -50%);
}

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  //CSS
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
img {
width: 340px;
}
 
#logo {
position: fixed;
top: 15%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/*border: 2px solid red;*/
}

#loginFORM {
position: fixed;
top: 35%;
left: 42%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/*border: 20px solid red !important;*/
}

#email {
position: fixed;
top: 80%;
left: 50%;
color: white;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 10px;
border-radius: 25px;
transform: translate(-50%, -50%);
}

}
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  //CSS
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  //CSS
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
img {
width: 340px;
}

#logo {
position: fixed;
top: 15%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/*border: 2px solid red;*/
}

#loginFORM {
position: fixed;
top: 35%;
left: 28%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
/*border: 20px solid red !important;*/
}

#email {
position: fixed;
top: 85%;
left: 50%;
color: white;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 10px;
border-radius: 25px;
transform: translate(-50%, -50%);
}
  
}