/**
* Copyright 2021 Bradley Monk
*/

body {
margin: 0;
font-family: 'Roboto', sans-serif;
}

::selection {background-color: #44a0b3;color: #fff;background-color: #44a0b3;background-color: #44a0b3;}


p {
	font-family: 'Roboto', sans-serif;
	color: #666;
}



/* ======================= PSE MAIN =======================  */

.pse-main {
	font-family: 'Roboto', sans-serif;
	font-size: 22px;
	position: relative;
	color: #666;
	left: 10%;
	width: calc(100% - 10% * 2);
	padding-top: 20px;
	padding-bottom: 30px;
}














/* ======================= SERVICES =======================  */

.pse-services {
	font-family: 'Roboto', sans-serif;
	font-size: 22px;
	position: relative;
	color: #666;
	left: 10%;
	width: calc(100% - 10% * 2);
	padding-top: 20px;
	padding-bottom: 30px;
}


.pse-card-container {
}

.pse-card-container .mdl-card__media {
overflow: hidden;
background: transparent;
}

.pse-card-container .mdl-card__media img {
width: 100%;
}

.pse-card-container .mdl-card__title {
background: transparent;
height: auto;
}

.pse-card-container .mdl-card__title-text {
color: black;
height: auto;
}

.pse-card-container .mdl-card__supporting-text {
height: auto;
color: black;
padding-bottom: 56px;
}

.pse-card-container .mdl-card__actions {
position: absolute;
bottom: 0;
}

.pse-card-container .mdl-card__actions a {
border-top: none;
font-size: 16px;
}









/* ======================= HEADER MENU =======================  */

.right-menu-links a{
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	color: #757575;
	font-size: 14px;
}

.pse-header .mdl-menu__container {
z-index: 50;
margin: 0 !important;
}


.mdl-textfield--expandable {
width: auto;
}


.pse-link-menu:hover {
cursor: pointer;
}

.pse-mobile-title {
display: none !important;
}



/* ======================= LOGO =======================  */

.pse-logo-image {
height: 35px;
}

#pselogo {
height: 35px;
width: 175px;
}





/* ======================= HEADER =======================  */

.pse-header {
overflow: visible;
background-color: white;
}

.pse-header .material-icons {
color: #767777 !important;
}

.pse-header .mdl-layout__drawer-button {
background: transparent;
color: #767777;
}

.pse-header .mdl-navigation__link {
color: #757575;
font-weight: 700;
font-size: 14px;
}



/* ======================= TOP NAV =======================  */

.pse-navigation-container {
/* Simple hack to make the overflow happen to the left instead... */
direction: rtl;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 500px;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pse-navigation {
/* ... and now make sure the content is actually LTR */
direction: ltr;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 800px;
}



.pse-navigation .mdl-navigation__link {
display: inline-block;
height: 60px;
line-height: 68px;
background-color: transparent !important;
border-bottom: 4px solid transparent;
}

.pse-navigation .mdl-navigation__link:hover {
border-bottom: 4px solid #44a0b3;
}


.pse-more-button {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}





/* ======================= SIDE NAV =======================  */

.pse-drawer {
border-right: none;
}

.pse-drawer-separator {
height: 1px;
background-color: #dcdcdc;
margin: 8px 0;
}

.pse-drawer .mdl-navigation__link.mdl-navigation__link {
font-size: 14px;
color: #757575;
}

.pse-drawer span.mdl-navigation__link.mdl-navigation__link {
color: #44a0b3;
}

.pse-drawer .mdl-layout-title {
position: relative;
background: #eee;
height: 70px;
}

.pse-drawer .pse-logo-image {
position: absolute;
bottom: 16px;
}







/* ======================= FULL SCREEN BG =======================  */

.better-design {
position: relative;
height: 100%;
width: auto;
background: url('../img/violin.jpg') center 10% no-repeat;
background-size: cover;
}

.pse-splash-cover {
	position: relative;
	height: 100%;
	width: auto;
}

.pse-splash-cover-color {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
}

.pse-slogan {
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	font-size: 60px;
	font-weight: 500;
	line-height: 50px;
	padding-top: 100px;
	padding-bottom: 50px;
	text-shadow: 1px 2px 4px #333;
}

.pse-slogan-links {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	height: 100px;
	font-size: 45px;
	font-weight: 500;
	margin-top: 30px;
}

.pse-slogan-links a{
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	height: 100px;
	font-size: 45px;
	font-weight: 500;
	margin-top: 30px;
}

@media (max-width: 900px) {

	.pse-slogan {
	font-family: 'Roboto', sans-serif;
	color: #ffffff;
	font-size: 2.4em;
	font-weight: 500;
	padding-top: 60px;
	padding-bottom: 30px;
	line-height: 1.3em;
	}

	.pse-slogan-links {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	height: 100px;
	font-size: 18px;
	}

	.pse-slogan-links a{
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	height: 100px;
	font-size: 18px;
	}

	
}









/* ======================= INDEX ABOUT =======================  */


.pse-about-slogan {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	color: rgb(252, 252, 210);
	font-size: 60px;
	font-weight: 500;
	line-height: 60px;
	padding-top: 10px;
	padding-bottom: 2px;
	text-shadow: 1px 1px 2px #333;
}


.glowIn {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	color: rgb(43, 85, 120);
	font-size: 40px;
	font-weight: 500;
	text-shadow: 1px 1px 2px #333;
}
.glowIn span {
  animation: glow-in 5.8s both;
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
  65% {
    opacity: 1;
    text-shadow: 0 0 25px #fdffe3;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0.95;
  }
}



.pse-abouts {
width: 100%;
background-color: #FFF;
}

.pse-abouts-txt {
padding: 10px 48px 48px 48px;
text-align: left;
}




/* ======================= ICONS =======================  */

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }






/* ======================= LINKS =======================  */

.pse-link {
text-decoration: none;
color: #44a0b3 !important;
}

.pse-link:hover {
color: #44a0b3 !important;
}

.pse-link .material-icons {
position: relative;
top: -1px;
vertical-align: middle;
}

.pse-alt-link {
text-decoration: none;
color: #64ffda !important;
font-size: 16px;
}

.pse-alt-link:hover {
color: #00bfa5 !important;
}

.pse-alt-link .material-icons {
position: relative;
top: 6px;
}













/* ======================= FOOTER =======================  */

.pse-footer {
background-color: #fafafa;
position: relative;
}

.pse-footer a:hover {
color: #44a0b3;
}

.pse-footer .mdl-mega-footer--top-section::after {
border-bottom: none;
}

.pse-footer .mdl-mega-footer--middle-section::after {
border-bottom: none;
}

.pse-footer .mdl-mega-footer--bottom-section {
position: relative;
}

.pse-footer .mdl-mega-footer--bottom-section a {
margin-right: 2em;
}

.pse-footer .mdl-mega-footer--right-section a .material-icons {
position: relative;
top: 6px;
}








/* =========================================================================  */
/* ============================= MOBILE LAYOUT =============================  */
/* =========================================================================  */

@media (max-width: 900px) {

.pse-aboutus-h1-mobile {
font-size: 64px;
padding: 3%;
}


.pse-navigation-container {
display: none;
}

.pse-title {
display: none !important;
}

.pse-mobile-title {
display: block !important;
position: absolute;
left: calc(50% - 70px);
top: 12px;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Use both - and + to satisfy iOS */
.pse.pse-search-box.is-focused ~ .pse-mobile-title,
.pse-search-box.is-focused + .pse-navigation-container + .pse-mobile-title {
opacity: 0;
}

.pse-more-button {
display: none;
}

.pse-create-character {
padding-top: 200px;
font-size: 16px;
}

.pse-create-character img {
height: 12px;
}

.pse-lab-band-text {
margin-left: 0;
padding: 16px;
}

.pse-footer .mdl-mega-footer--bottom-section {
display: none;
}
}