// http://ionicframework.com/docs/v2/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

@media (min-width: 768px) {
	.ion-page {
		margin-left: 30%;
		width: 70%;
	}

	ion-menu {
		width: 30%;
		display: block;
	}

	.bar-button-menutoggle {
		display: none;
	}

	ion-menu ion-backdrop {
		display: none;
	}

	ion-content {
		border-left: none;
	}

	ion-menu[type=overlay] .menu-inner {
		-webkit-transform: translateX(0px) !important;
		transform: translateX(0px) !important;
		box-shadow: none;
		width: 100%;
	}
}

/*
 * Components Cards page style
 */
.card-background-page {
	ion-card {
		position: relative;
		text-align: center;
	}

	.card-title {
		position: absolute;
		top: 36%;
		font-size: 2.0em;
		width: 100%;
		font-weight: bold;
		color: #fff;
	}

	.card-subtitle {
		font-size: 1.0em;
		position: absolute;
		top: 52%;
		width: 100%;
		color: #fff;
	}
}

h1.as-header-icon {
	text-align: center;
}

h1.as-header-icon ion-icon{
	font-size: 6em;
}

/*
 * Components Grid page style
 */
.grid-page {
  ion-col div {
    background-color: #F9FAFB;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
    text-align: center;
  }
}

/*
 * Components Icons page style
 */
.icons-page {
  ion-icon {
    font-size: 50px;
  }

  ion-row {
    height: 100%;
    flex-wrap: wrap;
  }

  ion-col {
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    padding: 10px 5px;
  }
}
