* { margin: 0px; padding: 0px; box-sizing: border-box; }
*, ::after, ::before { box-sizing: inherit; }
/* FULLPAGE */
html, body {  /* 100% */
	height: 100%; max-height: 100%;
    /* display: -ms-flexbox; display: -webk.contacts ul li.contacts-callit-flex; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; */
}
html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }
body {  
	/* font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; */
	font-family: 'Roboto', sans-serif; font-weight: 400;
	font-size: 1rem; line-height: 1.5; 
}

/* 100% HEIGHT */
.hundred-container {
	overflow: hidden; 
	position: absolute; top: 0; left: 0; display: table; width: 100%; height: 100%; max-width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed;
}
.hundred-cell {
    width: 100%;
    display: table-cell; vertical-align: middle; text-align: center;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 1.0;
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
	
	background-color: #000000; background-image: url("../images/background.jpg");
	background-repeat: no-repeat;
	background-position: center center; /* fixed*/ 
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}

  
.wrap-login {
	display:block; margin: 0 auto; width: 400px; text-align: left; 
    background: #fff;
    border-radius: 3px;
	padding: 40px; 
	
	background-image: url('../images/taxi-pattern.svg');
    background-repeat: repeat-x;
    background-size: 16px 16px;
    background-position: top;
	
	-webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
}


.loginlogo { text-align: center; padding: 15px 0;  }
.loginlogo a { cursor: text; }
.loginlogo img { max-width: 280px; }

.loginput { margin-bottom: 20px; }
.loginput label { display: block; text-transform: uppercase; font-size: 14px; margin-bottom: 5px;  }
.loginput-control { 
	display: block; width: 100%; border: 1px solid #303030; outline: 3px solid #FFF4DD;
	height: 46px; text-indent: 15px; font-size: 18px; 
	-webkit-transition:outline-color 0.3s; -moz-transition:outline-color 0.3s; transition:outline-color 0.3s;
}
.loginput-control:focus { outline-color: #fdc513; }
.loginput-submit { text-align: right;  padding-top: 10px; }
.loginput-button { 
	display: inline-block; padding: 14px 60px; border: none; 
	border-radius: 2px; cursor: pointer;
	font-size: 16px; background-color: #000; color: #fff; text-transform: uppercase;
	font-weight: 500;
	-webkit-transition:background-color 0.3s; -moz-transition:background-color 0.3s; transition:background-color 0.3s;
}
.loginput-button:hover { /* background-color: #fdc513; color: #000; */ }

/* •○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○• */
/*																	   */
/* 							BREAKPOINTS                                */
/*																	   */
/* •○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○• */

@media (max-width:767px) {
    body { font-size: 16px; }
	.wrap-login100 { width: 100%; }
	.wrap-login {  width: 80%; padding: 20px; background-size: 12px 12px; }
	.hundred-cell { padding: 0 20px; }
    .loginlogo img { max-width: 200px; }
     
} /* End of @media ----------------------------------------------------------------------------- */

/* https://css-tricks.com/snippets/css/orientation-lock/ */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    
} /* End of @media ----------------------------------------------------------------------------- */

/* SM - SECONDARY */
/* Old small -screen devices (tablets, 575px and up) : KEEP IT AFTER :  @media (max-width:767px) */
@media (max-width:575px) {}
/* @media ==================================================================================== */
@media (max-width:575px) and (orientation:landscape) {}
/* @media ==================================================================================== */
/* --------------------------------------------------------------------------------------------- */


/* MD */
/* Medium devices (tablets, 768px and up) */
@media (min-width:768px) and (max-width:991px) {
    
    
} /* End of @media ----------------------------------------------------------------------------- */


/* The following codes are specifically for iPad (portrait and landscape): */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {} /* @media iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}
/* @media iPad Portrait  ==================================================================================== */

/* LG */
/* Large devices (desktops, 992px and up) */
@media (min-width:992px) and (max-width:1247px) {
    

} /* End of @media ----------------------------------------------------------------------------- */

/* XL: 1280x1024 */
/* Extra large devices (large desktops, 1280 and up) */
@media (min-width:1248px) and (max-width: 1333px) {
	 
    

} /* End of @media ----------------------------------------------------------------------------- */

/* 2XL: 1366 x 768 */
/* Extra large devices (large desktops, 1366px and up) */
@media (min-width:1334px) and (max-width: 1407px) {
    
 
} /* End of @media ----------------------------------------------------------------------------- */


/* 3XL: 1440×900 */
/* Extra large devices (large desktops, 1440 and up) */
@media (min-width:1408px) and (max-width: 1879px) {
} /* End of @media ----------------------------------------------------------------------------- */

/* SPECIAL OCCASIONS ONLY  */


@media (max-width:575px) {}
@media (min-width:576px) {}
@media (min-width:768px) {}
@media (min-width:992px) {}
@media (min-width:1248px) { /* DEFAULT 1200px  changed to 1248px */
	 
} /* End of @media ----------------------------------------------------------------------------- */
@media (min-width:1334px) {}
@media (min-width:1408px) {}
@media (min-width:1880px) { /* 1920×1080px AND UP  */
} /* End of @media ----------------------------------------------------------------------------- */