/*
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,400italic,300,300italic);
*/

body {
	font-family: Lato, 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	font-weight: 400;
}

header, 
.page__mobile {
	background-color: #212121;
	color: #fff;
	height: 55px;
}

footer {
	background-color: #212121;
	color: #fff;
	height: 55px;
}

main, 
.page__main, 
.page__tray {
	background-color: #fafafa;
}

p.page__title {
	line-height: 55px;
	margin:	 0;
	padding: 0 24px
}

p.page__title a {
	color: #fff;
	letter-spacing: 0.025em;
	text-decoration: none;
}

p.page__title span {
	font-weight: 700;
	letter-spacing: 0.035em;
}

.blackstar, 
.love {
	background-color: #fff;
	color: #000;
	display: block;
	float: right;
	font-size: 14px;
	height: 55px;
	margin: 0 24px;
	overflow: hidden;
	text-align: center;
}

.blackstar span, 
.love span {
	line-height: 55px;
	width: 55px; height: 55px;
}

.love1 {
	font-size: 32px;
	position: relative; top: 0.125em; left: -0.025em;
	/* top: 0.135em; left: -0.035em; */
}

.copyright {
	font-size: 0.857em;
	line-height: 55px;
	margin: 0;
	text-align: right;
}

/* Menu
	 ========================================================================== */

.page__body nav ul {
	list-style: none;
	margin: 0;
	padding:0;
}

.page__body nav ul, 
.page__body nav li {
	font-size: 0;
	position: relative;
}

.page__body nav li {
	display: inline-block;
}

.page__body nav, 
.page__body nav a {
			 height: 44px;
	line-height: 44px;
}

.page__body nav a {
	display: block;
	font-size: 0.857rem;
	font-weight: 400;
	letter-spacing: 0.015em;
	padding: 0 24px;
	text-decoration: none;
}

.page__body nav ul ul {
	position: absolute; top: -9999px; left: 0;
	width: 240px;
}

.page__body nav ul ul li {
	border: 0 solid rgba( 255, 255, 255, 0.25 );
	border-width: 0 1px 1px;
	box-sizing: border-box;
	display: block;
}

.page__body nav li:hover > ul {
	top: 44px; /* match height above */
}

.page__body nav li ul li:hover > ul {
	top: 0; left: 100%;
}

.page__body nav a {
	color: #fff;
}
.page__nav, 
.page__body nav li {
	background-color: #333;
}

.page__body nav li:hover a {
	color: #fff;
}
.page__body nav li:hover, 
.page__body nav li:hover li {
	background-color: #2196F3;
}

.page__body nav li a:hover {
	background-color: rgba( 255, 255, 255, 0.15 );
}

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

	.page__body > nav {
		display: none;
	}

} /* @media */

.page__body nav li.menu-item-has-children > a::after {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	font-weight: 700;
	text-align: center;
}

.page__body nav li.menu-item-has-children > a::after {
	content: '\f107';
	margin-left: 10px;
}

.page__body nav ul ul li.menu-item-has-children > a::after {
	content: '\f105';
	display: block;
			 height: 44px;
	line-height: 44px;
	text-align: center;
	position: absolute; top: 0; right: 0;
	width: 24px;
}

.sub-menu {
	z-index: 1;
}

a.external::after {
   /* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
   margin-left: 0.25em;
   opacity: 0.5;
   content: "\f08e";
}

/* Menu in Trays
	 ========================================================================== */

.page__tray ul.menu.t-on_mobile {
	display: none;
}

.page__tray ul.menu {
	list-style: none;
	margin: 0;
	padding:0;
}

.page__tray ul.menu, 
.page__tray ul.menu li {
	font-size: 0;
	position: relative;
}

.page__tray ul.menu li {
	display: block;
	margin: 0;
	padding:0;
}

.page__tray ul.menu a {
			 height: 36px;
	line-height: 36px;
}

.page__tray ul.menu a {
	display: block;
	font-size: 0.857rem;
	font-weight: 400;
	letter-spacing: 0.015em;
	padding: 0 24px;
	text-decoration: none;
}

.page__tray ul.menu ul a:before {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	color: hsla(0, 0%, 0%, 0.25);
	content: '\f105';
	margin-right: 12px;
}

.page__tray ul.menu ul ul a:before {
	content: '\f101';
	margin-left: 12px;
}


.page__tray ul.menu a {
	color: #2196f3;
}
.page__tray ul.menu li {
	background-color: transparent;
	box-sizing: border-box;
}

.page__tray ul.menu a:hover {
	background-color: #2196F3;
	color: #ffffff;
}

.page__tray ul.menu, 
.page__tray ul.menu > li {
	border: 0 solid #fafafa;
}

.page__tray ul.menu {
	border-width: 1px 0 0;
	margin-top: 72px;
}

.page__tray ul.menu > li {
	border-width: 0 0 1px 0;
}

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

	.page__tray ul.menu.t-on_desktop {
		display: none;
	}

	.page__tray ul.menu.t-on_mobile {
		display: block;
	}

} /* @media */

/* Body Components
   ========================================================================== */

ul.breadcrumbs {
	font-size: 0.857rem;
	line-height: 1.2;
	margin: 8px 0 0;
	padding: 10px 0 0;
}

ul.breadcrumbs li {
	display: inline-block;
	letter-spacing: 0.015em;
	list-style: none;
	padding: 0;
}

ul.breadcrumbs li::after {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	content: '\f105';
	margin: 0 10px;
	opacity: 0.5;
}

ul.breadcrumbs li:last-child::after {
	content: '\f107';
}

.the__copy {
  padding: 0 24px;
}

.admin_unit {
	margin: 3rem auto;
}

.admin_unit > *:first-child {
	margin-top: 0;
}

.admin_unit > *:last-child {
	margin-bottom: 0;
}

.page__tray ul.menu, 
.widget {
	margin: 3rem auto;
}

.widget > *:first-child {
	margin-top: 0;
}

.widget > *:last-child {
	margin-bottom: 0;
}

.textwidget {
  font-size: 0.857rem;
  padding: 0 24px;
}

/* Login
	 ========================================================================== */

.login {
	max-width: 320px;
}

/* System Messages
	 ========================================================================== */

#message {
  border: 0 solid rgba( 0, 0, 0, 0.15 );
  border-width: 0 0 0 8px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.15 );
  margin: 1.5rem auto;
  padding: 0.75rem 12px;
}

#message > p:last-child {
  margin-bottom: 0;
}

#message.error {
	color: #fff;
	background-color: #F44336;
}

#message.notice {
	color: #000;
	background-color: #fff;
}

#message.success {
	color: #fff;
	background-color: #2196F3;
}

#message h1 {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5rem;
	margin: 0;
	padding:0;
}

#message p {
	font-size: 0.857rem;
	margin: 1.5rem 0;
}

#message a {
	color: #fff;
	text-decoration: underline;
}

/* Settings
	 ========================================================================== */

.bl_settings h2 {
	border-bottom: 3px double #e0e0e0;
	clear: both;
	padding: 0.25rem 0;
}

.bl_settings p {
	max-width: 320px;
}

.bl_settings dl {
	margin: 0;
	max-width: 640px;
}

.bl_settings dt, 
.bl_settings dd {
	border: 0px solid #e0e0e0;
	box-sizing: border-box;
	float: left;
	line-height: 1.5rem;
	margin: 1.5rem 0;
	padding-bottom: 0.25rem;
	width: 50%; max-width: 320px;
}

.bl_settings dd.multirow {
	width: 720px; max-width: 720px;
}

.bl_settings dt {
	border-width: 0 0 1px;
	clear: both;
}

.bl_settings dd {
	border-width: 0 0 1px;
	font-size: 0.857rem;
	font-weight: 400;
	padding-left: 24px;
}

.bl_settings_edit dd {
	border-width: 0;
}

.bl_settings dd:empty:after {
	color: #e0e0e0;
	font-weight: 700;
	content: "\\";
}

.bl_settings input[disabled="disabled"] {
	background-color: #f5f5f5;
}

.markdown {
	float: right;
	font-weight: normal;
}
	
@media screen and ( max-width: 648px ) {

	.bl_settings dt, 
	.bl_settings dd {
		float: none;
		padding-bottom: 0;
		width: 100%;
	}

	.bl_settings dt {
		border-width: 0;
		margin-bottom: 0.25rem;
		max-width: 100%;
	}

	.bl_settings dd {
		border: 0px solid #e0e0e0;
		border-width: 1px 0 0;
		margin: 0.25rem 0;
		max-width: 100%;
		padding-left: 0;
	}

	.bl_settings input, 
	.bl_settings select, 
	.bl_settings textarea {
		margin-top: 0.5rem;
	}

} /* @media */

.description {
  color: #757575;
  cursor: help;
  display: inline-block;
  float: right;
  font-size: 1.25em;
	height: 100%;
  padding: 0 6px;
  position: relative;
  text-align: center;
  width: 24px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
  z-index: 1;
}

.description .description_text {
  background: #1496bb;
  border-radius: 4px;
  bottom: 100%;
  color: #fff;
  display: block;
  font-size: 0.857rem;
  right: 0px;
  margin-bottom: 12px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  width: 265px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.description .description_text a {
	color: orange;
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.description .description_text:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles */
.description .description_text:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  right: 8px;
  margin-left: 0;
  position: absolute;
  width: 0;
}
  
.description:hover .description_text {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

dt.user::before {
  /* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color: #757575;
  content: "\f007";
  margin-right: 6px;
}

dt.user.user-no::before {
	color: #bdbdbd;
	content: "\f235";
}

dt.user.user-no span.inactive {
	font-size: 0.857rem;
	font-weight: normal;
  line-height: 1.5rem;
  margin-left: 6px;
}

dt.user span a {
	margin: 0 0 0 12px;
}

.users dd a {
	margin-right: 12px;
}

/* Top-level Galleries
	 ========================================================================== */



/* Actions
	 ========================================================================== */

.actions
{
	text-align: right;
}

.actions input[type=button], .actions input[type=submit]
{
  background-color: #2196F3;
  border: none;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 0.857em;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 44px;
	margin-left: 12px;
  padding: 0 24px;
  text-transform: capitalize;
}

.actions input[type=submit]:hover 
{
  background-color: #1E88E5;
}

.actions input[type=button] 
{
  background-color: transparent;
  color: #212121;
}
.actions input[type=button]:hover 
{
  text-decoration: underline;
}

.page__title span.ajax__trigger {
  background-color: #2196F3;
  box-shadow: 0px 2px 4px rgba( 0, 0, 0, 0.15 );
  cursor: pointer;
  display: block;
  font-size: 24px;
  font-weight: normal;
       height: 55px;
  line-height: 55px;
  margin: 0 12px;
  padding:0;
  position: absolute; top: 0; right: 0;
  text-align: center;
  width: 55px;
}

.page__title span.ajax__success 
{
  background-color: #E91E63;
  border: 3px solid #fff;
  border-radius: 21px;
  box-shadow: 0px 0px 6px rgba( 0, 0, 0, 0.5 );
  box-sizing: border-box;
  color: #fff;
  display: none;
  font-size: 24px;
  font-weight: normal;
  line-height: 35px;
  margin: 7px 19px;
  position: absolute; top: 0; right: 0;
  text-align: center;
  text-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.15 );
  width: 41px; height: 41px;
  z-index: 5;
}

header .page__title span.ajax__success, 
header .page__title span.ajax__trigger 
{
  position: fixed; top: 0; right: 24px;
}

.setting-container:before,   
.setting-container:after 
{
  content:"";
  display:table;
}

.setting-container:after 
{
  clear:both;
}

input[type="range"], 
input.range, 
input.range ~ span.unit 
{
  display: inline-block;
  float: left;
  font-size: 0.857rem;
}

input[type="range"] 
{
  clear: left;
  height: 29px;
  margin-right: 12px;
  width: 200px;
}

input.range 
{
  padding-left: 15px;
  text-align: center;
  width: 6em;
}

input.range ~ span.unit 
{
  line-height: 2em;
}

/* for Designer's view_template.php
	 ========================================================================== */

.designer_templates td.template_actions a {
	margin: 0 12px 0 0;
	word-break: normal;
}

.admin_unit a.view_action::before {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	margin-right: 6px;
	min-width: 18px;
	opacity: 0.5;
	font-size: 14px;
}

.admin_unit a.edit::before {
	/*content: "\f085";*/
	content: "\f0ad";
}

.admin_unit a.design::before {
	content: "\f040";
}

.admin_unit a.exportTheme::before {
	content: "\f08b";
}

.admin_unit a.exportTemplate::before {
	content: "\f0c7";
}

.admin_unit a.clone::before {
	/*content: "\f24d";*/
	content: "\f0c5";
}

.admin_unit a.albums::before {
	content: "\f03e";
}

.admin_unit a.assign::before {
	content: "\f248";
}

.admin_unit a.restore::before {
	content: "\f0e2";
}

.admin_unit a.delete::before {
	content: "\f00d";
}

.admin_unit a.back::before {
	/*content: "\f060";*/
	content: "\f053";
}


/* for design_template.php
	 ========================================================================== */

label[for="title"], 
label[for="menu_set_id"]{
	margin: 1em 0 0.25em; 
}

p#template-title {
	margin: 0.25em 0; 
}

.setting-section {
	margin: 1.5rem auto;
}

.setting-section.hidden {
	display: none;
}

.setting-section p {
	margin-left: 12px;
}

.section-level-1 {
	margin: 1.5rem 0;
}

.section-level-1 > h1 {
	border: 0 solid #e0e0e0;
	border-width: 1px 0;
	line-height: 1.25;
	margin: 1.5rem 0;
	padding: 6px 0;
}

.section-level-2 {
	border: 0 solid #e0e0e0;
	border-width: 0 0 1px;
	margin: 0 auto;
	padding-bottom: 2.25rem;
}

.section-level-2 > h1 {
	font-size: 1.5rem;
	line-height: 1.5;
	margin: 1.5rem 0;
}

.section-level-3 {}
.section-level-3 > h1 {
	border-bottom: 1px solid #e0e0e0;
	font-size: 1.25rem;
	line-height: 1.5;
}

.section-level-3 > h1:before {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	color: #2196F3;
	content: '\f085';
	margin-right: 6px;
}

.section-level-4 h1 {
	border-bottom: 1px solid #e0e0e0;
	font-size: 1rem;
	line-height: 1.5;
	margin: 2rem 0 1.5rem;
}

.setting-container {
	margin: 1.5rem 0 1.5rem 12px;
}

.setting-container p {
	font-size: 0.857rem;
	margin: 0.25rem 0;
}

p.label {
	font-size: 1rem;
	font-weight: 400;
}

.unit {
	margin-left: 0.25rem;
}

.setting-container .radio-container {
	display: inline-block;
	margin: 0 24px 0 1px;
}

.radio-container label.radio, 
.radio-container input[type="radio"] {
	display: inline-block;
	float: left;
	font-weight: normal;
			 height: 1.5rem;
	line-height: 1.5rem;
	padding-right: 0.5rem;
}

.setting-container.disabled, 
.setting-section.disabled {

}

.setting-container.disabled label,
.setting-container.disabled p.label,
.setting-container.disabled p.setting-description,
.setting-container.disabled select,
.setting-section.disabled label,
.setting-section.disabled p.label,
.setting-section.disabled p.setting-description,
.setting-section.disabled select
{
	color: #e0e0e0;
}

/* Spectrum */

.sp-picker-container .sp-input-container {
	float: none;
	width: auto; max-width: 100%;
}

.setting-container .sp-replacer {
	border-color: #e0e0e0;
}
.setting-container .sp-replacer:hover, 
.setting-container .sp-replacer.sp-active {
	border-color: #2196F3;
}

div.setting-error {
	border: 1px solid #F44336;
}

/* Accordion-ish
	 ========================================================================== */

.section-level-2 {
	height: 64px;
	overflow:hidden; 
}

.section-level-2:target {
	height: auto;
}

@media screen and ( max-width: 1024px ) {
	.section-level-2:target {
		padding-top: 55px;
	}
} /* @media */

.section-level-2 > h1 a {
	background-color: #2196F3;
	border: 0 solid rgba( 0, 0, 0, 0.15 );
	border-width: 0 0 0 8px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	box-sizing: border-box;
	color: #fff;
	display: block;
	padding: 8px 20px 8px 12px;
	text-decoration: none;
}

.section-level-2 > h1 a:after {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	content: "\f07b";
	float: right;
	font-size: 1rem;
			 height: 36px;
	line-height: 36px;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.15 );
}

.section-level-2:target > h1 a:after {
	content: "\f07c";
}

/* for design_menu_set.php
	 ========================================================================== */

#menu-builder {
}

#menu-builder ul {
	margin: 0;
	padding:0;
}

#menu-builder li {
	background-color: #fff;
	border: 1px solid #333;
	list-style-type: none;
	margin: 1rem 0;
	padding:12px 0 12px 12px;
	position: relative;
}

#menu-builder li::after {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	background-color: rgba(255, 255, 255, 0.15);
	border-bottom-left-radius: 2px;
	color: #212121;
	content: "\f0cb";
	cursor: move;
	display: block;
	font-size: 14px;
	line-height: 44px;
	position: absolute; top: 0; right: 0;
	text-align: center;
	width: 44px; height: 44px;
}

#menu-builder li li {
	background-color: #BBDEFB;
	border-color: #42A5F5;
	border-right: none;
}

#menu-builder li li li {
	background-color: #C5E1A5;
	border-color: #9CCC65;
}

#menu-builder li li li .add {
	display: none;
}

#menu-builder label {
	margin-top: 0.5rem;
}

#menu-builder li > label.checkbox {
	display: inline;
	font-weight: normal;
	margin-left: 0.25em;
}

#menu-builder select, #menu-builder input[type=text] {
	margin-right: 12px;
}

#menu-builder li .actions {
}

#menu-builder .actions input[type=button] {
	color: #2196F3;
	line-height: 1.5em;
	margin: 0 12px;
	padding:0;
}

/* for addedit_image.php
    ========================================================================== */

#uploadButton
{
	padding: 0.5em;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	width: calc(320px - 1em - 2px);
	max-width: calc(500px - 1em - 2px);
	cursor: pointer;
}

.uploadFileContainer
{
	height: 0px;
	width: 0px;
	overflow: hidden;
	margin-bottom: 1em;
}

/* for list_albums.php
    ========================================================================== */

#albums a.album-set::before {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	margin-right: 0.35em;
	opacity: 0.5;
	content: "\f115";
	font-size: 1.25em;
}

#albums a.album::before {
	/* .fa */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	margin-right: 0.35em;
	opacity: 0.5;
	content: "\f1c5";
	font-size: 1.15em;
}

/* UI Styling
   ========================================================================== */

.page__ui {
	background-color: #212121;
	color: #fff;
	height: 48px;
	text-align: left;
}

.page__ui ul, 
.page__ui li {
	display: inline-block;
	list-style: none;	
	margin: 0;
	padding:0;
	position: relative;
}

.page__ui li {
	line-height: 48px;
	margin-right: 1px;
	text-align: center;
	min-width: 48px; height: 48px;
}
.page__ui li:first-child {
}
.page__ui li:last-child {
	margin-right: 0;
}

.page__ui li a {
	box-sizing: border-box;
	display: block;
	height: 48px;
	line-height: 48px;
	padding:0 6px;
	text-align: center;
}

.page__ui a,
.page__ui a:hover,
.page__ui button,
.page__ui button:hover,
.page__ui__button,
.page__ui__button:hover,
.mfp-popup .mfp-close,
.mfp-popup .mfp-close:hover {
	background-color: #000;
	color: #fff;
	opacity: 1;
	text-decoration: none;
}

/* Magnific Popup CSS (Custom)
======================================== */

.mfp-bg {
	background-color: rgba(0,0,0,0.85);
	opacity: 0.95;
	background-position: center center;
	background-repeat: no-repeat;
}

.mfp-wrap a, 
.mfp-wrap button {
	outline: none;
}

.mfp-container {
	padding: 0;
}

.mfp-popup {
	background-color: #fafafa;
	box-shadow: 0 1px 4px rgba(0,0,0,0.5);
	box-sizing: border-box;
	font-size: 14px;
	margin: 1.5rem auto;
	max-width: 640px;
	overflow: hidden;
	padding: 48px 24px 0;
	position: relative;
	text-align: left;
	width: auto;
}

.mfp-popup .mfp-close {
	border-radius: 0;
	line-height: 48px;
	width: 48px; height: 48px;
}

.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close {
	background: none;
	box-sizing: border-box;
	padding: 0;
	right: 0;
	text-align: center;
	width: 44px;
}

button.mfp-arrow {
	background: none;	
}

button.mfp-arrow-left {}

button.mfp-arrow-right {}

.mfp-title {
	box-sizing: border-box;
	line-height: 48px;
	margin: 0;
	max-width: 100%;
	padding:0 72px 0 24px;
	position: absolute; top: 0; left: 0;
	width: 100%; height: 48px;
}

.mfp-popup > .content {
	margin: 24px auto 1.5rem;
}

.mfp-popup > .content > *:first-child {
	margin-top: 0;
}

.mfp-popup > .content > *:last-child {
	margin-bottom: 0;	
}

.mfp-close:active {
	top: 0; 
}

@media screen and ( max-width: 640px ) {

	/* Full-screen popup on mobile */
	.mfp-content {
		height: 100%;
	}
	.mfp-popup {
		height: 100%;
		margin: 0 auto;
		max-width: 100%;
		padding-bottom: 80px;
		position: fixed; top: 0; left: 0;
		overflow-y: scroll;
		width: 100%;
		-webkit-overflow-scrolling: touch;
	}

} /* @media */

/*
SAMPLE MARKUP
	
<a class="mfp-inline" href="#the__popup">Trigger</a>

<div id="the__popup" class="mfp-popup mfp-hide">
	<p class="page__ui mfp-title">Title</p>
	<div class="content clearfix">
		<h2>Popup Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate egestas dignissim. Phasellus tincidunt interdum eleifend. Nam sollicitudin tempus libero, at imperdiet sem dignissim ac. Sed tellus turpis, faucibus sit amet mauris in, vehicula consectetur tortor.</p>
	</div>
</div>

*/

/* Magnific Popup CSS (Effects)
======================================== */

/* Zoom In */

.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.95;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* Move-horizontal effect */

.mfp-move-horizontal .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s;
  transform: translateX(-50px);
}
.mfp-move-horizontal.mfp-bg {
  opacity: 0;
  transition: all 0.3s;
}
.mfp-move-horizontal.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: translateX(0);
}
.mfp-move-horizontal.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-move-horizontal.mfp-removing .mfp-with-anim {
  transform: translateX(50px);
  opacity: 0;
}
.mfp-move-horizontal.mfp-removing.mfp-bg {
  opacity: 0;
}

/* Move-from-top effect */

.mfp-move-from-top .mfp-content {
  vertical-align: top;
}
.mfp-move-from-top .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s;
  transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
  opacity: 0;
  transition: all 0.2s;
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: translateY(0);
}
.mfp-move-from-top.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
  transform: translateY(-50px);
  opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 3d unfold */

.mfp-3d-unfold .mfp-content {
  perspective: 2000px;
}
.mfp-3d-unfold .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-60deg);
}
.mfp-3d-unfold.mfp-bg {
  opacity: 0;
  transition: all 0.5s;
}
.mfp-3d-unfold.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: rotateY(0deg);
}
.mfp-3d-unfold.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-3d-unfold.mfp-removing .mfp-with-anim {
  transform: rotateY(60deg);
  opacity: 0;
}
.mfp-3d-unfold.mfp-removing.mfp-bg {
  opacity: 0;
}

/* Zoom-out effect */

.mfp-zoom-out .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: scale(1.3);
}
.mfp-zoom-out.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
  transform: scale(1.3);
  opacity: 0;
}
.mfp-zoom-out.mfp-removing.mfp-bg {
  opacity: 0;
}

/* Backlight logo
======================================== */

ul.page__title {
	margin: 0;
	padding:0;
	position: relative; top: 4px; left: 16px;
}

li.logo {
	background-color: transparent !important;
	border-radius: 0;
	list-style: none;
	margin: 0;
	padding:6px;
	position: absolute; top: 0; left: 0;
	min-width: 48px;
}

li.logo a, li.logo button {
	color: inherit;
	cursor: pointer;
	display: block;
	height: 100%;
	outline: none;
	text-decoration: none;
}

li.logo ul {
	background-color: rgba( 255, 255, 255, 0.25 );
	background-color: rgba( 0, 0, 0, 0.35 );
	border: 2px solid transparent;
	box-sizing: border-box;
	float: left;
	height: 36px;
	padding:0;
	position: relative;
	width: 36px;
}

li.logo li {
	background-color: #fff;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding:0;
	position: absolute;
	width: 25%; height: 25%;
}

li.logo h1 {
	color: #212121;
	color: #ffffff;
	float: left;
	font-family: Lato, sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.025em;
	line-height: 36px;
	margin: 0;
	padding:0 6px;
	white-space: nowrap;
}

li.logo h1 strong {
	font-weight: 400;
}

li.logo ul.logo_theturninggate {
	background-color: #fff;
	border-width: 1px;
	/* box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.1 ); */
}
.logo_theturninggate li {
	border: 1px solid #fff;
}
.logo_theturninggate li.col_x2 {
	width: 50%;
}
.logo_theturninggate li.row_x2 {
	height:50%;
}
.logo_theturninggate li.color_999999 { background-color: #9E9E9E; } /* grey */
.logo_theturninggate li.color_66ccff { background-color: #90CAF9; } /* light blue */
.logo_theturninggate li.color_0099cc { background-color: #2196F3; } /* blue */
.logo_theturninggate li.color_99cc66 { background-color: #B2FF59; } /* light green */
.logo_theturninggate li.color_66cc33 { background-color: #8BC34A; } /* green */
.logo_theturninggate li.color_ff9933 { background-color: #FF9800; } /* orange */