@media only screen and (min-width: 241px) and (max-width: 319px) {


.welcome {
float: left;
/* padding: 19px; */
margin-left: 139px;
margin-top: 73px;
z-index: 1;
color: rgb(248, 124, 124);
font-size: 15px;
position: absolute;
/* position: fixed; */
}


.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 0%;
margin-right: 0%;
padding: 6px;
border: 3px solid white;
height: 368px;
margin-bottom: 10px;
}
.inptlog1 {
margin-bottom: 8px;
margin-top: 8px;
width: 95%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.uname {
margin-top: 0px;
padding: 0px;
margin-left: 1px;
}
.password {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;margin-left: 1px;
}

 .logbuttonbase1{width: 140px; float:left;margin-left: 11px;margin-top: 0px;
}

.logbuttonbase2 {
width: 140px;
margin-left: 17px;
margin-top: 11px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: 10px;margin-top: 0px;
}
 .logbuttonbase4{width: 140px;margin-left: 17px;margin-top: 0px;
}

.logbutn1 {
margin-top: -9px;


height: 45px;
text-align: center;
padding: 0px;
font-size: 15px;
border-radius: 2px;

background-color: #4180C5;
color: aliceblue;
cursor: pointer;
margin-left: 13%;
display: block;

}

.logbutn2 {
margin-top: -9px;
height: 45px;
text-align: center;

font-size: 15px;
border-radius: 2px;

background-color: #10A563;
color: aliceblue;
cursor: pointer;
margin-left: 7%;
display: block;
}


.logbutn3 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;
border-radius: 2px;

background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
margin-left: 13%;
display: block;

margin-top: 6px;
}


.logbutn4 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;

border-radius: 2px;

background-color: rgb(181, 55, 221);
color: aliceblue;

cursor: pointer;
margin-left: 7%;
display: block;


margin-top: 6px;
}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 441px) {
/* Styles */
.inptlog1 {
margin-bottom: 8px;
margin-top: 8px;
width: 95%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.uname {
margin-top: 0px;
padding: 0px;
margin-left: 1px;
}
.password {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;margin-left: 1px;
}

 .logbuttonbase1{width: 140px; float:left;margin-left: -28px;margin-top: 0px;
}

 .logbuttonbase2{width: 140px;
margin-left: 8px;margin-top: 0px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: -28px;margin-top: 0px;
}
 .logbuttonbase4{width: 140px;margin-left: 8px;margin-top: 0px;
}

.logbutn1 {
margin-top: -9px;


height: 45px;
text-align: center;
padding: 0px;
font-size: 15px;
border-radius: 2px;

background-color: #4180C5;
color: aliceblue;
cursor: pointer;
margin-left: 13%;
display: block;

}

.logbutn2 {
margin-top: -9px;
height: 45px;
text-align: center;

font-size: 15px;
border-radius: 2px;

background-color: #10A563;
color: aliceblue;
cursor: pointer;
margin-left: 7%;
display: block;
}


.logbutn3 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;
border-radius: 2px;

background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
margin-left: 13%;
display: block;

margin-top: 6px;
}


.logbutn4 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;

border-radius: 2px;

background-color: rgb(181, 55, 221);
color: aliceblue;

cursor: pointer;
margin-left: 7%;
display: block;


margin-top: 6px;
}

}

@media only screen and (min-width: 442px) and (max-width: 480px) {
/* Styles */
.inptlog1 {
margin-bottom: 8px;
margin-top: 8px;
width: 95%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.uname {
margin-top: 0px;
padding: 0px;
margin-left: 1px;
}
.password {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;margin-left: 1px;
}

.logbuttonbase1 {
width: 140px;
float: left;
margin-left: 29px;
margin-top: 0px;
}

 .logbuttonbase2{width: 140px;
margin-left: 8px;margin-top: 0px;
}
 .logbuttonbase3 {
width: 140px;
float: left;
margin-left: 29px;
margin-top: 0px;
}
 .logbuttonbase4{width: 140px;margin-left: 8px;margin-top: 0px;
}

.logbutn1 {
margin-top: -9px;


height: 45px;
text-align: center;
padding: 0px;
font-size: 15px;
border-radius: 2px;

background-color: #4180C5;
color: aliceblue;
cursor: pointer;
margin-left: 13%;
display: block;

}

.logbutn2 {
margin-top: -9px;
height: 45px;
text-align: center;

font-size: 15px;
border-radius: 2px;

background-color: #10A563;
color: aliceblue;
cursor: pointer;
margin-left: 7%;
display: block;
}


.logbutn3 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;
border-radius: 2px;

background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
margin-left: 13%;
display: block;

margin-top: 6px;
}


.logbutn4 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;

border-radius: 2px;

background-color: rgb(181, 55, 221);
color: aliceblue;

cursor: pointer;
margin-left: 7%;
display: block;


margin-top: 6px;
}

}
@media only screen and (min-width: 481px) and (max-width: 570px) {


.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 0%;
margin-right: 0%;
padding: 6px;
border: 3px solid white;
height: 273px;
margin-bottom: 10px;
}


.inptlog1 {
margin-bottom: 8px;
margin-top: 6px;
width: 100%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.inptlog2 {
margin-bottom: 8px;
margin-top: 8px;
width: 100%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}

.uname {
margin-top: 0px;
padding: 0px;
margin-left: 1px;
}
.password {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;margin-left: 1px;
}

 .logbuttonbase1{width: 140px; float:left;margin-left: 24px;margin-top: 8px;margin-top: 0px;margin-top: 8px;
}

 .logbuttonbase2{width: 140px;margin-top: 8px;margin-top: 0px;margin-top: 8px;
margin-left: 24px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: 24px;margin-top: 0px;
}
 .logbuttonbase4{width: 140px;margin-left: 24px;margin-top: 0px;

}

.logbutn1 {
margin-top: -9px;


height: 45px;
text-align: center;
padding: 0px;
font-size: 15px;
border-radius: 2px;

background-color: #4180C5;
color: aliceblue;
cursor: pointer;
margin-left: 13%;
display: block;

}

.logbutn2 {
margin-top: -9px;
height: 45px;
text-align: center;

font-size: 15px;
border-radius: 2px;

background-color: #10A563;
color: aliceblue;
cursor: pointer;
margin-left: 7%;
display: block;
}


.logbutn3 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;
border-radius: 2px;

background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
margin-left: 13%;
display: block;

margin-top: 6px;
}


.logbutn4 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;

border-radius: 2px;

background-color: rgb(181, 55, 221);
color: aliceblue;

cursor: pointer;
margin-left: 7%;
display: block;


margin-top: 6px;
}
}



@media only screen and (min-width: 571px) and (max-width: 650px) {


.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 0%;
margin-right: 0%;
padding: 6px;
border: 3px solid white;
height: 273px;
margin-bottom: 10px;
}


.inptlog1 {
margin-bottom: 8px;
margin-top: 11px;
width: 95%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}


.uname {
margin-top: 0px;
padding: 0px;
margin-left: 1px;
}
.password {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;margin-left: 1px;
}

 .logbuttonbase1{width: 140px; float:left;margin-left: 76px;margin-top: 0px;
}

 .logbuttonbase2{width: 140px;margin-top: 0px;
margin-left: 24px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: 76px;
}
 .logbuttonbase4{width: 140px;margin-left: 24px;

}

.logbutn1 {
margin-top: -9px;


height: 45px;
text-align: center;
padding: 0px;
font-size: 15px;
border-radius: 2px;

background-color: #4180C5;
color: aliceblue;
cursor: pointer;
margin-left: 13%;
display: block;

}

.logbutn2 {
margin-top: -9px;
height: 45px;
text-align: center;

font-size: 15px;
border-radius: 2px;

background-color: #10A563;
color: aliceblue;
cursor: pointer;
margin-left: 7%;
display: block;
}


.logbutn3 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;
border-radius: 2px;

background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
margin-left: 13%;
display: block;

margin-top: -14px;
}


.logbutn4 {


height: 45px;
text-align: center;
padding: 2px;
font-size: 15px;

border-radius: 2px;

background-color: rgb(181, 55, 221);
color: aliceblue;

cursor: pointer;
margin-left: 7%;
display: block;
margin-top: -14px;
}


}


@media only screen and (min-width: 768px) and (max-width: 808px) {


 .logbuttonbase1{width: 140px; float:left;margin-left: -10px;
}

 .logbuttonbase2{width: 140px;margin-top: 20px;
margin-left: -7px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: -12px;
}
 .logbuttonbase4{width: 140px;margin-left: -5px;

}
.uname {
margin-top: 15px;
padding: 0px;
}

.password {
margin-top: 13px;
margin-bottom: 0px;
padding: 0px;
margin-left: 25px;
}

}

@media only screen and (min-width: 809px) and (max-width: 1024px) {

 .logbuttonbase1{width: 140px; float:left;margin-left: -2px;
}

 .logbuttonbase2{width: 140px;/* margin-top: 0px; */
margin-left: -1px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: 0px;
}
 .logbuttonbase4{width: 140px;margin-left: 0px;

}
.uname {
margin-top: 15px;
padding: 0px;
}

.password {
margin-top: 13px;
margin-bottom: 0px;
padding: 0px;
margin-left: 25px;
}
/*.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 22%;
margin-right: 22%;
padding: 6px;
border: 3px solid white;
height: 240px;
margin-bottom: 30px;

}*/


.inptlog1{
margin-bottom: 8px;
margin-top: 8px;
width: 80%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.inptlog2{
margin-bottom: 8px;
margin-top: 8px;
width: 80%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}

}







@media only screen 
and (min-width : 1025px) 
and (max-width : 1200px) {
.loginhead {
background-color: #F68E8E;
color: white;
margin-left: 18%;
margin-right: 18%;
padding: 4px;
margin-top: 10px;
border-top: 3px solid white;
border-left: 3px solid white;
border-right: 3px solid white;
border-bottom: 1px solid white;
}
.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 18%;
margin-right: 18%;
padding: 6px;
border: 3px solid white;
height: 206px;
margin-bottom: 10px;
}
.inptlog1{
margin-bottom: 8px;
margin-top: 8px;
width: 80%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.inptlog2{
margin-bottom: 8px;
margin-top: 8px;
width: 80%;
padding: 12px;
border-radius: 3px;
border: 1px solid #909493;
}
.logbutn1 {
/* margin-top: 18px; */
/* width: 25%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/* border: 1px solid #FFFFFF; */
background-color: #4180C5;
color: aliceblue;

cursor: pointer;
margin-left: 0%;
display: block;
float: left;
}

.logbutn2 {
/*margin-top: 18px;*/
/* width: 31%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/*border: 1px solid #FFFFFF;
*/background-color: #10A563;
color: aliceblue;

cursor: pointer;
margin-left: 2%;
display: block;
float:left
}

.logbutn3 {
/* margin-top: 18px; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/* border: 1px solid #FFFFFF; */
background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
/* font-weight: bold; */
margin-left: 4%;
display: block;
float: left;
}


.logbutn4 {
/*margin-top: 18px;*/
/* width: 39%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/*border: 1px solid #FFFFFF;*/
background-color: rgb(181, 55, 221);
color: aliceblue;
cursor: pointer;
margin-left: 5%;
display: block;
float:left
}

.logbuttonbase1{width: 140px; float:left;margin-left: -2px;
}

 .logbuttonbase2{width: 140px;/* margin-top: 0px; */
margin-left: -1px;
}
 .logbuttonbase3{width: 140px; float:left;margin-left: 0px;
}
 .logbuttonbase4{width: 140px;margin-left: 0px;

}
.uname {
margin-top: 15px;
padding: 0px;
}

.password {
margin-top: 13px;
margin-bottom: 0px;
padding: 0px;
margin-left: 25px;
}


/*.welcome {
float: left;
padding: 19px;
margin-left: 746px;
margin-top: 8px;
color: rgb(248, 124, 124);
font-size: 16px;


}
*/





}

@media only screen 
and (min-width : 1201px) 
and (max-width : 1331px) {


.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 20%;
margin-right: 20%;
padding: 6px;
border: 3px solid white;
height: 221px;
margin-bottom: 30px;
}
.loginhead {
background-color: #F68E8E;
color: white;
margin-left: 20%;
margin-right: 20%;
padding: 4px;
margin-top: 30px;
border-top: 3px solid white;
border-left: 3px solid white;
border-right: 3px solid white;
border-bottom: 1px solid white;
}
.logbutn1 {
/* margin-top: 18px; */
/* width: 25%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/* border: 1px solid #FFFFFF; */
background-color: #4180C5;
color: aliceblue;

cursor: pointer;
margin-left: 0%;
display: block;
float: left;
}

.logbutn2 {
/*margin-top: 18px;*/
/* width: 31%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/*border: 1px solid #FFFFFF;
*/background-color: #10A563;
color: aliceblue;

cursor: pointer;
margin-left: 2%;
display: block;
float:left
}

.logbutn3 {
/* margin-top: 18px; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/* border: 1px solid #FFFFFF; */
background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
/* font-weight: bold; */
margin-left: 4%;
display: block;
float: left;
}

.uname {
margin-top: 12px;
padding: 0px;
}
.logbutn4 {
/*margin-top: 18px;*/
/* width: 39%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/*border: 1px solid #FFFFFF;*/
background-color: rgb(181, 55, 221);
color: aliceblue;
cursor: pointer;
margin-left: 5%;
display: block;
float:left
}

.logbuttonbase1 {
width: 139px;
margin-top: 20px;
float: left;
margin-left: -138px;
}
.logbuttonbase2 {
width: 139px;
margin-top: 20px;
float: left;
margin-left: -3px;
}

.logbuttonbase3 {
width: 139px;
margin-top: 20px;
float: left;
margin-left: -4px;
}

.logbuttonbase4 {
width: 139px;
margin-top: 20px;
float: left;
margin-left: -2px;
}
}



@media only screen 
and (min-width : 1332px) 
and (max-width : 1347px) {

.loginbase {
background-color: #f6cb48;
color: #333333;
margin-left: 26%;
margin-right: 26%;
padding: 6px;
border: 3px solid white;
height: 221px;
margin-bottom: 30px;
}

.logbutn1 {
/* margin-top: 18px; */
/* width: 25%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/* border: 1px solid #FFFFFF; */
background-color: #4180C5;
color: aliceblue;

cursor: pointer;
margin-left: 0%;
display: block;
float: left;
}

.logbutn2 {
/*margin-top: 18px;*/
/* width: 31%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/*border: 1px solid #FFFFFF;
*/background-color: #10A563;
color: aliceblue;

cursor: pointer;
margin-left: 2%;
display: block;
float:left
}

.logbutn3 {
/* margin-top: 18px; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/* border: 1px solid #FFFFFF; */
background-color: rgb(221, 60, 60);
color: aliceblue;

cursor: pointer;
/* font-weight: bold; */
margin-left: 4%;
display: block;
float: left;
}


.logbutn4 {
/*margin-top: 18px;*/
/* width: 39%; */
width: 100%;
height: 45px;
text-align: center;
padding: 8px;
font-size: 15px;
border-radius: 2px;
/*border: 1px solid #FFFFFF;*/
background-color: rgb(181, 55, 221);
color: aliceblue;
cursor: pointer;
margin-left: 5%;
display: block;
float:left
}

.logbuttonbase1 {
width: 139px;
margin-top: 20px;
float: left;
margin-left: -7px;
}
 .logbuttonbase2{width: 139px;margin-top: 20px;
float: left;}
 .logbuttonbase3{width: 139px;margin-top: 20px;
float: left;}
 .logbuttonbase4{width: 139px;margin-top: 20px;
float: left;}
}