/*
Theme Name: System Platform
Theme URI: https://ideaspublicity.com/web/systemplatform/
Description: System Platform (previously named My Office) is a website and a complete management platform for your staff. Created with the use of Formidable Forms, Elementor and Ultimate Member, System Platform offers all the tools for managers to adjust all the settings and look of the page without knowing anything about code. This theme has been created exclusively for MG Oficinas with the ability to produce more in case we required it.
Version: 1.9
Author: @erickojitoz
Author URI: https://erickrubio.com
Tags: responsive design, flexbox, landing page, multi page theme, coming soon, multi-porpuse, new website, system platform, data base, client management, staff friendly, policy manager, case management
*/

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* main css */
a{
  color: #757575;
	text-decoration: none;
}
a:hover, a:focus, a:active{
	color: #bdbdbd;
  cursor: pointer;
}
b{
	font-weight: 700;
}
body{
	background-color: #f1f2f3;
	font-family: 'Work Sans', sans-serif;
	color: #212121;
	font-size: 15px;
}
h1, h2, h3, h4, h5 ,h6{
	font-family: 'Fjalla One', sans-serif;
  line-height: 1.8em;
  text-transform: uppercase;
}
h1{
  font-size: 2.2em;
}
h2{
  font-size: 1.9em;
}
h3{
  font-size: 1.6em;
}
h4{
  font-size: 1.35em;
}
h5{
  font-size: 1.2em;
}
h6{
  font-size: 1.1em;
}
img{
  height: auto;
	vertical-align: middle;
	width: 100%;
}
p{
	line-height: 1.6em;
}
.bg{
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.bold-cell{
	font-weight: 700;
}
.button-light{
	border: 1px solid #f1f2f3;
	border-radius: 24px;
	color: #f1f2f3;
	display: inline-block;
	font-size: .9em;
	text-transform: uppercase;
	padding: 9px 30px;
}
.button-light:hover{
	background: #E64A19;
	border: 1px solid #E64A19;
}
.button-main{
	background: #E64A19;
	border: 1px solid #E64A19;
	border-radius: 24px;
	color: #f1f2f3;
	display: inline-block;
	font-size: .9em;
	text-transform: uppercase;
	padding: 9px 30px;
}
.button-main:hover{
	background: #FFEB3B;
	border: 1px solid #FFEB3B;
}
.repdiv{
	margin-top: 12px;
}
.desktop{
	display: none !important;
}
.flex{
	display: flex;
}
.hover, .button, button, a, input[type=submit]{
	-moz-transition: all 0.5s ease-in-out !important;
  -webkit-transition: all 0.5s ease-in-out !important;
  transition: all 0.5s ease-in-out !important;
	cursor: pointer;
}
.printonly{
	display: none;
}
.google-visualization-table-th{
	color: #000000 !important;
	padding: 6px !important;
}
.google-visualization-table-td{
	font-size: 14px !important;
}
.google-visualization-table-type-number{
	text-align: center !important;
}
.privacy p{
	padding: 6px 0 18px 0;
}

.form-text-info{
	font-size: 16px !important;
	line-height: 1.4em;
	margin-bottom: 24px !important;
	padding: 0 5% !important;
}

/* footer */
footer{
	background: #fff;
	flex-direction: column;
	font-size: .85em;
	padding: 24px 48px;
	text-transform: uppercase;
}
footer .copy{
	color: #757575;
	text-align: center;
}
footer .copy p{
	margin-bottom: 18px;
}
footer .foot-icon{
	justify-content: center;
	margin: -24px auto;
}
footer .foot-icon img{
	height: 128px;
	width: 128px;
}
.foot-mobile{
	justify-content: center;
}
.admin-menu{
	background-color: #73010c;
	bottom: 0;
	justify-content: center;
	padding: 18px;
	position: fixed;
	right: 0;
	z-index: 99;
	width: 100%;
}
.admin-menu a{
	font-size: .9em;
	color: #fff;
	margin-left: 24px;
	text-transform: uppercase;
}
.admin-menu a span{
	font-size: .85em;
	vertical-align: baseline;
}
.admin-menu a:first-child{
	margin-left: 0;
}
.admin-menu a:hover{
	color: #bdbdbd;
}

/* forms */
form label{
	margin-bottom: 12px;
}
form input{
	border: 1px solid rgba(0,0,0,.1);
	font-size: .9em;
	padding-left: 12px;
	height: 38px;
}
form input[type="radio"]{
	height: auto;
}
address{
	line-height: 1.6em;
}
select{
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 0 !important;
	height: 38px;
}
textarea{
	border: 1px solid rgba(0,0,0,.1);
	font-size: .9em;
	padding: 12px;
}
::placeholder{
	line-height: 1.5em;
}

/* header */
header{
	background-color: #fff;
	height: 80px;
	justify-content: center;
	width: 100%;
}
header.float-head{
	background: transparent;
	position: absolute;
	width: 100%;
	z-index: 2;
}
.float-container{
	align-items: center;
	justify-content: space-between;
	width: 90%;
}
header.float-head nav a, header.float-head .head-dash a{
	color: #f1f2f3;
}
header.float-head nav a:hover, header.float-head .head-dash a{
	color: #FFEB3B;
}
header .site-id{
	align-items: center;
	margin-left: 36px;
}
header .site-id .custom-logo, header .site-id .custom-logo img{
	height: 50px;
	width: auto;
}
header .site-id .icon{
	height: 50px;
	margin-left: -12px;
	width: 50px;
}
header .site-id .name a{
	color: #1976D2;
	font-size: 1.8em;
	font-weight: 100;
}
header .site-id .name a:hover{
	color: #757575;
}
.float-button a{
	border: 1px solid #f1f2f3;
	border-radius: 24px;
	color: #f1f2f3;
	font-size: .8em;
	right: 24px;
	padding: 9px 24px;
	position: absolute;
	top: 24px;
	z-index: 19;
}
.float-button a:hover{
	background: #E64A19;
	border: 1px solid #E64A19;
}

/* menu */
.menu-icon{
  cursor: pointer;
	display: inline-block;
  height: 80px;
	margin: 0 -10px;
	padding: 29px;
	position: absolute;
  width: 80px;
	z-index: 39;
}
.menu-icon .bar{
  height: 15%;
  margin-bottom: 25%;
  width: 100%;
  background-color: #f1f2f3;
  pointer-events: none;
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.menu-icon.menu-wt .bar{
	background-color: #212121;
}
.menu-icon .bar:nth-child(1) {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
.menu-icon .bar:nth-child(3) {
  -webkit-transform-origin: right top;
  transform-origin: right top;
}
.menu-icon.active{
	position: fixed;
}
.menu-icon.active .bar{
	background-color: #f1f2f3;
}
.menu-icon.active .bar:nth-child(1) {
  -webkit-transform: translate(-7.5%, 12.5%) rotate(-45deg);
  transform: translate(-7.5%, 12.5%) rotate(-45deg);
}
.menu-icon.active .bar:nth-child(2) {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.menu-icon.active .bar:nth-child(3) {
  -webkit-transform: translate(-7.5%, -3.125%) rotate(-315deg);
  transform: translate(-7.5%, -3.125%) rotate(-315deg);
}
.cbp-spmenu{
  padding-top: 72px;
	position: fixed;
}
.cbp-spmenu a{
	display: block;
	line-height: 1.4em;
  margin: 0 auto;
  text-transform: uppercase;
  width: 90%;
}
.cbp-spmenu a:last-child{
  border-bottom: none;
}
.cbp-spmenu a:hover{
  padding-left: 30px;
	cursor: pointer;
}
.cbp-spmenu-vertical{
	background: #73010C;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	width: 80vw;
	top: 0;
	z-index: 29;
}
.cbp-spmenu-vertical a{
  color: #f1f2f3;
	padding: 15px 12px;
}
.cbp-spmenu-left{
	left: -80vw;
}
.cbp-spmenu-left.cbp-spmenu-open{
	left: 0px;
}
.side-button a{
	background-color: #ffeb3b;
	color: #212121;
	font-size: 1.2em;
	font-weight: 700;
	padding: 20px;
	text-align: center;
	width: 100%;
}
.side-button a:hover{
	background-color: #c8b900;
	cursor: pointer;
	padding: 20px;
}

/* pages */
.body{
	min-height: 620px;
	width: 100%;
}
.body.body-sys{
	padding: 12px;
	padding-top: 60px;
}
.centered-page{
	margin: 0 auto;
	max-width: 980px;
	padding: 24px;
}
.framed-page{
	padding: 24px;
}
.body-not-found{
	align-items: flex-end;
	background-image: url(img/404.jpg);
	height: 100vh;
	justify-content: flex-end;
	padding: 8%;
}
.not-found-content{
	color: #f1f2f3;
	max-width: 720px;
}
.not-found-content h1{
	font-family: 'Work Sans', sans-serif;
	font-size: 2.5em;
	font-weight: 300;
	text-align: right;
}
.not-found-content p{
	text-align: right;
}
.not-found-content .not-found-404{
	color: #FF5722;
	font-family: 'Work Sans', sans-serif;
	font-size: 7em;
	font-weight: 300;
	text-align: right;
}
.not-found-content .not-found-button{
	padding-top: 36px;
	text-align: right;
}

@media screen and (min-width: 480px){
	.cbp-spmenu a{
		width: 80%;
	}
	.framed-page{
		padding: 48px;
	}
}

@media screen and (min-width: 720px){
	footer{
		flex-direction: row;
		justify-content: space-between;
		padding: 24px;
	}
	footer .copy p{
		margin-bottom: 0;
	}
	footer .footnav a{
		line-height: 1.8em;
		padding: 0 12px;
	}
	header{
		justify-content: space-between;
	}
	.head-button{
		margin: auto 12px;
	}
	header nav, .head-dash{
		align-items: center;
	}
	header nav a, .head-dash a{
		font-size: .85em;
		padding: 12px;
		text-transform: uppercase;
	}
	header.header-sys{
		background-color: #212121;
		background-image: url(/wp-content/uploads/menu-strip.jpg);
		flex-direction: column;
		float: left;
		height: 100vh;
		justify-content: flex-start;
		padding: 0;
		position: fixed;
		width: 12%;
	}
	header.header-sys .submenu{
		border-bottom: 1px solid #757575;
		padding: 12px;
		text-transform: uppercase;
		text-align: center;
	}
	header.header-sys .submenu:last-child{
		border-bottom: none;
	}
	header.header-sys .submenu ul li{
		text-align: center;
		margin-top: 18px;
	}
	header.header-sys .submenu ul li:first-child{
		margin-top: 0;
	}
	header.header-sys .submenu ul li a{
		color: #f1f2f3;
		display: inline-block;
		font-size: .5em;
		font-weight: 300;
		line-height: 1.6em;
	}
	header.header-sys .submenu ul li a:hover{
		color: #757575;
	}
	header.header-sys .submenu ul li a span{
		font-size: 16px;
		display: block;
		margin: 0 auto;
		margin-bottom: 6px;
	}
	header.header-sys .submenu ul li a.non-essential{
		display: none;
	}
	header .site-id{
		margin-left: 24px;
	}
	header .site-id .icon{
		height: 60px;
		width: 60px;
	}
	header .site-id .custom-logo{
		height: 50px;
	}
	.admin-menu{
		justify-content: flex-end;
		width: 88%;
	}
	.body.body-sys{
		background-color: #fff;
		float: right;
		min-height: 100vh;
		padding: 24px;
		width: 88%;
	}
	.cbp-spmenu a{
		width: 70%;
	}
	.cbp-spmenu-vertical{
		width: 320px;
	}
	.cbp-spmenu-left{
		left: -320px;
	}
	.centered-page{
		padding: 48px;
	}
	.desktop{
		display: flex !important;
	}
	.framed-page{
		padding: 60px;
	}
	.local-switch{
		background: rgba( 255, 255, 255, .8);
		border-radius: 48px;
		display: inline-block !important;
		left: 24px;
		padding: 18px;
		position: fixed;
		text-align: center;
		text-transform: uppercase;
		top: 40%;
		z-index: 99;
		width: 72px;
	}
	.local-switch.right{
		left: auto;
		right: 24px;
	}
	.local-switch div a:hover{
		opacity: .5;
	}
	.local-switch div a span{
		display: inline-block;
		font-size: .7em;
		margin-top: 9px;
	}
	.local-switch .cloud{
		padding: 18px 0 6px 0;
	}
	.local-switch .local{
		padding: 6px 0 18px 0;
	}
	.mobile{
		display: none;
	}
	.not-found-content h1{
		font-size: 3.5em;
	}
	.not-found-content .not-found-404{
		font-size: 9em;
	}
	.side-button a{
		border-radius: 24px;
		font-size: 1.1em;
		margin: 24px auto;
		padding: 10px 36px;
		width: 70%;
	}
	.side-button a:hover{
		padding: 10px 36px;
	}
}

@media screen and (min-width: 960px){
	header.header-sys{
		padding: 12px;
	}
	header.header-sys .submenu ul li a.non-essential{
		display: inline-block;
	}
	.framed-page{
		padding: 90px;
	}
}
@media screen and (min-width: 1260px){
	header.header-sys .submenu ul li a{
		margin: 0;
		font-size: .7em;
	}
}

@media screen and (min-width: 1440px){
	header.header-sys{
		padding: 36px;
		width: 20%;
	}
	header.header-sys .submenu{
		padding: 24px 6px;
	}
	header.header-sys .submenu ul li{
		text-align: left;
	}
	header.header-sys .submenu ul li a{
		margin: 0;
		font-size: .95em;
	}
	header.header-sys .submenu ul li a span{
		display: inline;
		font-size: .95em;
		margin: 0;
		margin-right: 6px;
	}
	header.header-sys .submenu ul li a:hover{
		padding-left: 12px;
	}
	.admin-menu{
		width: 80%;
	}
	.body.body-sys{
		padding: 90px;
		width: 80%;
	}
	.centered-page{
		padding: 48px;
	}
	.framed-page{
		padding: 90px;
	}
}

/* clearfix */

.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */

.cf{
	overflow: auto;
  *zoom: 1;
}

*{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
*:focus{
  outline: 0;
}

/* Extra Elements */
#bitnami-banner{
  display: none !important;
}
.site-header-top{
  display: none !important;
}