/*
[==============================]
|      __    __            __  |
|     / /_  / /_____ ___  / /  |
|    / __ \/ __/ __ `__ \/ /   |
|   / / / / /_/ / / / / / /    |
|  /_/ /_/\__/_/ /_/ /_/_/     |
|                              |
[==============================]
*/


  /* --------------------- */
 /* ==  HTML Elements  == */
/* --------------------- */

html {
	background-color: #002539;
	color: #f1f0ef;
}



/*
[===============================]
|      __              __       |
|     / /_  ____  ____/ /_  __  |
|    / __ \/ __ \/ __  / / / /  |
|   / /_/ / /_/ / /_/ / /_/ /   |
|  /_.___/\____/\__,_/\__, /    |
|                    /____/     |
[===============================]
*/


  /* ---------------------- */
 /* ==  Body Structure  == */
/* ---------------------- */

body {
	display: flex;
	justify-content: center; /* horizontal */
	align-items: center;     /* vertical */
	overflow: hidden;
}


  /* --------------------- */
 /* ==  Body Elements  == */
/* --------------------- */

#BODY_VIEW {
	display: none;
	position: relative;
	vertical-align: top;
	text-align: center;
	width: 100%;
	height: 100%;
}

#BODY_NOJS {
	display: inline-block;
	position: relative;
	vertical-align: top;
	text-align: center;
	width: 100%;
	height: 100%;
}



/*
[===============================]
|      _                   __   |
|     (_)___  ____  __  __/ /_  |
|    / / __ \/ __ \/ / / / __/  |
|   / / / / / /_/ / /_/ / /_    |
|  /_/_/ /_/ .___/\__,_/\__/    |
|         /_/                   |
[===============================]
*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
      -webkit-text-fill-color: #f1f0ef;
      -webkit-box-shadow: 0 0 0px 1000px #002539 inset;
      transition: background-color 5000s ease-in-out 0s;
}



/*
[================================]
|      ____            __        |
|     / __/___  ____  / /______  |
|    / /_/ __ \/ __ \/ __/ ___/  |
|   / __/ /_/ / / / / /_(__  )   |
|  /_/  \____/_/ /_/\__/____/    |
|                                |
[================================]
*/


  /* --------------------- */
 /* ==  Font Families  == */
/* --------------------- */

/* https://fonts.google.com/?sort=alpha */
/* https://fonts.googleapis.com/css?family=Roboto:400 */

@font-face {
	font-family: 'CopperplateGothic-Heavy';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/CopperplateGothic-Heavy.woff2') format('woff2'),
		 url('../../app/font/CopperplateGothic-Heavy.woff') format('woff');
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Exo.woff2') format('woff2'),
		 url('../../app/font/Exo.woff') format('woff');
}

@font-face {
	font-family: 'Exo-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/Exo-Bold.woff2') format('woff2'),
		 url('../../app/font/Exo-Bold.woff') format('woff');
}

@font-face {
	font-family: 'ITCGaramond';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/ITCGaramond.woff2') format('woff2'),
		 url('../../app/font/ITCGaramond.woff') format('woff');
}

@font-face {
	font-family: 'ITCGaramond-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/ITCGaramond-Bold.woff2') format('woff2'),
		 url('../../app/font/ITCGaramond-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Kiddos';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Kiddos.woff2') format('woff2'),
		 url('../../app/font/Kiddos.woff') format('woff');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Lato.woff2') format('woff2'),
		 url('../../app/font/Lato.woff') format('woff');
}

@font-face {
	font-family: 'Lato-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/Lato-Bold.woff2') format('woff2'),
		 url('../../app/font/Lato-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Manrope.woff2') format('woff2'),
		 url('../../app/font/Manrope.woff') format('woff');
}

@font-face {
	font-family: 'Manrope-Med';
	font-style: normal;
	font-weight: 500;
	src: url('../../app/font/Manrope-Med.woff2') format('woff2'),
		 url('../../app/font/Manrope-Med.woff') format('woff');
}

@font-face {
	font-family: 'Manrope-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/Manrope-Bold.woff2') format('woff2'),
		 url('../../app/font/Manrope-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Montserrat.woff2') format('woff2'),
		 url('../../app/font/Montserrat.woff') format('woff');
}

@font-face {
	font-family: 'Montserrat-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/Montserrat-Bold.woff2') format('woff2'),
		 url('../../app/font/Montserrat-Bold.woff') format('woff');
}

@font-face {
	font-family: 'PermanentMarker';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/PermanentMarker.woff2') format('woff2'),
		 url('../../app/font/PermanentMarker.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Roboto.woff2') format('woff2'),
		 url('../../app/font/Roboto.woff') format('woff');
}

@font-face {
	font-family: 'Roboto-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/Roboto-Bold.woff2') format('woff2'),
		 url('../../app/font/Roboto-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Rubik.woff2') format('woff2'),
		 url('../../app/font/Rubik.woff') format('woff');
}

@font-face {
	font-family: 'Rubik-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/Rubik-Bold.woff2') format('woff2'),
		 url('../../app/font/Rubik-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Sanchez';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/Sanchez.woff2') format('woff2'),
		 url('../../app/font/Sanchez.woff') format('woff');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 400;
	src: url('../../app/font/TitilliumWeb.woff2') format('woff2'),
		 url('../../app/font/TitilliumWeb.woff') format('woff');
}

@font-face {
	font-family: 'TitilliumWeb-Bold';
	font-style: normal;
	font-weight: 700;
	src: url('../../app/font/TitilliumWeb-Bold.woff2') format('woff2'),
		 url('../../app/font/TitilliumWeb-Bold.woff') format('woff');
}



/*
[=========================================================]
|                _            __        __  _             |
|    ____  _____(_)__  ____  / /_____ _/ /_(_)___  ____   |
|   / __ \/ ___/ / _ \/ __ \/ __/ __ `/ __/ / __ \/ __ \  |
|  / /_/ / /  / /  __/ / / / /_/ /_/ / /_/ / /_/ / / / /  |
|  \____/_/  /_/\___/_/ /_/\__/\__,_/\__/_/\____/_/ /_/   |
|                                                         |
[=========================================================]
*/


  /* ------------------------------- */
 /* ==  Orientation [Landscape]  == */
/* ------------------------------- */

@media only screen and (orientation: landscape) {

/*
     error.htm
*/
body.error header {
	width: 100%;
	height: 12%;
}

body.error main {
	width: 100%;
	height: 83%;
}

body.error footer {
	width: 100%;
	height: 5%;
}

/*
     index.htm
*/
body.index header {
	width: 100%;
	height: 12%;
}

body.index main {
	width: 100%;
	height: 83%;
}

body.index footer {
	width: 100%;
	height: 5%;
}

/*
     users.htm
*/
body.users header {
	width: 100%;
	height: 12%;
}

body.users main {
	width: 100%;
	height: 83%;
}

body.users footer {
	width: 100%;
	height: 5%;
}

/*
     LAND IDs
*/
#LAND_HEAD {
	width: 100%;
	height: 100%;
	position: relative;
}

#LAND_MAIN {
	width: 100%;
	height: 100%;
	position: relative;
}

#LAND_FOOT {
	width: 100%;
	height: 100%;
	position: relative;
}

#LAND_NOJS {
	width: 100%;
	height: 100%;
}

#LAND_HEAD, #LAND_MAIN, #LAND_FOOT, #LAND_NOJS {
	display: block;
}

#PORT_HEAD, #PORT_MAIN, #PORT_FOOT, #PORT_NOJS {
	display: none;
}

}


  /* ------------------------------ */
 /* ==  Orientation [Portrait]  == */
/* ------------------------------ */

@media only screen and (orientation: portrait) {

/*
     error.htm
*/
body.error header {
	width: 100%;
	height: 1%;
}

body.error main {
	width: 100%;
	height: 98%;
}

body.error footer {
	width: 100%;
	height: 1%;
}

/*
     index.htm
*/
body.index header {
	width: 100%;
	height: 1%;
}

body.index main {
	width: 100%;
	height: 98%;
}

body.index footer {
	width: 100%;
	height: 1%;
}

/*
     users.htm
*/
body.users header {
	width: 100%;
	height: 1%;
}

body.users main {
	width: 100%;
	height: 98%;
}

body.users footer {
	width: 100%;
	height: 1%;
}

/*
     PORT IDs
*/
#PORT_HEAD {
	width: 100%;
	height: 100%;
	position: relative;
}

#PORT_MAIN {
	width: 100%;
	height: 100%;
	position: relative;
}

#PORT_FOOT {
	width: 100%;
	height: 100%;
	position: relative;
}

#PORT_NOJS {
	width: 100%;
	height: 100%;
}

#PORT_HEAD, #PORT_MAIN, #PORT_FOOT, #PORT_NOJS {
	display: block;
}

#LAND_HEAD, #LAND_MAIN, #LAND_FOOT, #LAND_NOJS {
	display: none;
}

}