html {
	line-height: 1.5;
	font-family: "Roboto", sans-serif;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.87);
}
nav {
    color: #88c33e !important;
    background-color: rgba(39, 39, 39, 0.94) !important;
    width: 100%;
    height: 64px;
    line-height: 64px;
}

/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
}

.preloader-wrapper.small {
	width: 36px;
	height: 36px;
}

.preloader-wrapper.big {
	width: 64px;
	height: 64px;
}

.preloader-wrapper.active {
	/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
	-webkit-animation: container-rotate 1568ms linear infinite;
	animation: container-rotate 1568ms linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}

@
-webkit-keyframes container-rotate {to { -webkit-transform:rotate(360deg);
	
}

}
@
keyframes container-rotate {to { transform:rotate(360deg);
	
}

}
.spinner-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	border-color: #26a69a;
}

.spinner-blue, .spinner-blue-only {
	border-color: #4285f4;
}

.spinner-red, .spinner-red-only {
	border-color: #db4437;
}

.spinner-yellow, .spinner-yellow-only {
	border-color: #f4b400;
}

.spinner-green, .spinner-green-only {
	border-color: #0f9d58;
}

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
}

.active .spinner-layer.spinner-red {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
}

.active .spinner-layer.spinner-yellow {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
}

.active .spinner-layer.spinner-green {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
}

.active .spinner-layer, .active .spinner-layer.spinner-blue-only,
	.active .spinner-layer.spinner-red-only, .active .spinner-layer.spinner-yellow-only,
	.active .spinner-layer.spinner-green-only {
	/* durations: 4 * ARCTIME */
	opacity: 1;
	-webkit-animation: fill-unfill-rotate 5332ms
		cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
}

@
-webkit-keyframes fill-unfill-rotate {
	/* 0.5 * ARCSIZE */
	/* 1   * ARCSIZE */
	/* 1.5 * ARCSIZE */
	/* 2   * ARCSIZE */
	/* 2.5 * ARCSIZE */
	/* 3   * ARCSIZE */
	/* 3.5 * ARCSIZE */
	/* 4   * ARCSIZE */ 12.5% {
	-webkit-transform: rotate(135deg);
}

25%
{
-webkit-transform












:






 






rotate












(270
deg










);
}
37
.5





 





%
{
-webkit-transform










:





 





rotate










(405
deg








);
}
50%
{
-webkit-transform












:






 






rotate












(540
deg










);
}
62
.5





 





%
{
-webkit-transform










:





 





rotate










(675
deg








);
}
75%
{
-webkit-transform












:






 






rotate












(810
deg










);
}
87
.5





 





%
{
-webkit-transform










:





 





rotate










(945
deg








);
}
to {
	-webkit-transform: rotate(1080deg);
}

}
@
keyframes fill-unfill-rotate {
	/* 0.5 * ARCSIZE */
	/* 1   * ARCSIZE */
	/* 1.5 * ARCSIZE */
	/* 2   * ARCSIZE */
	/* 2.5 * ARCSIZE */
	/* 3   * ARCSIZE */
	/* 3.5 * ARCSIZE */
	/* 4   * ARCSIZE */ 12.5% {
	transform: rotate(135deg);
}

25%
{
transform












:






 






rotate












(270
deg










);
}
37
.5





 





%
{
transform










:





 





rotate










(405
deg








);
}
50%
{
transform












:






 






rotate












(540
deg










);
}
62
.5





 





%
{
transform










:





 





rotate










(675
deg








);
}
75%
{
transform












:






 






rotate












(810
deg










);
}
87
.5





 





%
{
transform










:





 





rotate










(945
deg








);
}
to {
	transform: rotate(1080deg);
}

}
@
-webkit-keyframes blue-fade-in-out {from { opacity:1;
	
}

25%
{
opacity












:






 






1;
}
26%
{
opacity












:






 






0;
}
89%
{
opacity












:






 






0;
}
90%
{
opacity












:






 






1;
}
100%
{
opacity












:






 






1;
}
}
@
keyframes blue-fade-in-out {from { opacity:1;
	
}

25%
{
opacity












:






 






1;
}
26%
{
opacity












:






 






0;
}
89%
{
opacity












:






 






0;
}
90%
{
opacity












:






 






1;
}
100%
{
opacity












:






 






1;
}
}
@
-webkit-keyframes red-fade-in-out {from { opacity:0;
	
}

15%
{
opacity












:






 






0;
}
25%
{
opacity












:






 






1;
}
50%
{
opacity












:






 






1;
}
51%
{
opacity












:






 






0;
}
}
@
keyframes red-fade-in-out {from { opacity:0;
	
}

15%
{
opacity












:






 






0;
}
25%
{
opacity












:






 






1;
}
50%
{
opacity












:






 






1;
}
51%
{
opacity












:






 






0;
}
}
@
-webkit-keyframes yellow-fade-in-out {from { opacity:0;
	
}

40%
{
opacity












:






 






0;
}
50%
{
opacity












:






 






1;
}
75%
{
opacity












:






 






1;
}
76%
{
opacity












:






 






0;
}
}
@
keyframes yellow-fade-in-out {from { opacity:0;
	
}

40%
{
opacity












:






 






0;
}
50%
{
opacity












:






 






1;
}
75%
{
opacity












:






 






1;
}
76%
{
opacity












:






 






0;
}
}
@
-webkit-keyframes green-fade-in-out {from { opacity:0;
	
}

65%
{
opacity












:






 






0;
}
75%
{
opacity












:






 






1;
}
90%
{
opacity












:






 






1;
}
100%
{
opacity












:






 






0;
}
}
@
keyframes green-fade-in-out {from { opacity:0;
	
}

65%
{
opacity












:






 






0;
}
75%
{
opacity












:






 






1;
}
90%
{
opacity












:






 






1;
}
100%
{
opacity












:






 






0;
}
}

/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
	position: absolute;
	top: 0;
	left: 45%;
	width: 10%;
	height: 100%;
	overflow: hidden;
	border-color: inherit;
}

.gap-patch .circle {
	width: 1000%;
	left: -450%;
}

.circle-clipper {
	display: inline-block;
	position: relative;
	width: 50%;
	height: 100%;
	overflow: hidden;
	border-color: inherit;
}

.circle-clipper .circle {
	width: 200%;
	height: 100%;
	border-width: 3px;
	/* STROKEWIDTH */
	border-style: solid;
	border-color: inherit;
	border-bottom-color: transparent !important;
	border-radius: 50%;
	-webkit-animation: none;
	animation: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

.circle-clipper.left .circle {
	left: 0;
	border-right-color: transparent !important;
	-webkit-transform: rotate(129deg);
	transform: rotate(129deg);
}

.circle-clipper.right .circle {
	left: -100%;
	border-left-color: transparent !important;
	-webkit-transform: rotate(-129deg);
	transform: rotate(-129deg);
}

.active .circle-clipper.left .circle {
	/* duration: ARCTIME */
	-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
	animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
	/* duration: ARCTIME */
	-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1)
		infinite both;
	animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@
-webkit-keyframes left-spin {from { -webkit-transform:rotate(130deg);
	
}

50%
{
-webkit-transform












:






 






rotate












(-5
deg










);
}
to {
	-webkit-transform: rotate(130deg);
}

}
@
keyframes left-spin {from { transform:rotate(130deg);
	
}

50%
{
transform












:






 






rotate












(-5
deg










);
}
to {
	transform: rotate(130deg);
}

}
@
-webkit-keyframes right-spin {from { -webkit-transform:rotate(-130deg);
	
}

50%
{
-webkit-transform












:






 






rotate












(5
deg










);
}
to {
	-webkit-transform: rotate(-130deg);
}

}
@
keyframes right-spin {from { transform:rotate(-130deg);
	
}

50%
{
transform












:






 






rotate












(5
deg










);
}
to {
	transform: rotate(-130deg);
}

}
#spinnerContainer.cooldown {
	/* duration: SHRINK_TIME */
	-webkit-animation: container-rotate 1568ms linear infinite, fade-out
		400ms cubic-bezier(0.4, 0, 0.2, 1);
	animation: container-rotate 1568ms linear infinite, fade-out 400ms
		cubic-bezier(0.4, 0, 0.2, 1);
}

@
-webkit-keyframes fade-out {from { opacity:1;
	
}

to {
	opacity: 0;
}

}
@
keyframes fade-out {from { opacity:1;
	
}

to {
	opacity: 0;
}

}
.slider {
	position: relative;
	height: 400px;
	width: 100%;
}

.slider.fullscreen {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.slider.fullscreen ul.slides {
	height: 100%;
}

.slider.fullscreen ul.indicators {
	z-index: 2;
	bottom: 30px;
}

.slider .slides {
	background-color: #9e9e9e;
	margin: 0;
	height: 400px;
}

.slider .slides li {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: inherit;
	overflow: hidden;
}

.slider .slides li img {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
}

.slider .slides li .caption {
	color: #fff;
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	opacity: 0;
}

.slider .slides li .caption p {
	color: #e0e0e0;
}

.slider .slides li.active {
	z-index: 2;
}

.slider .indicators {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}

.slider .indicators .indicator-item {
	display: inline-block;
	position: relative;
	cursor: pointer;
	height: 16px;
	width: 16px;
	margin: 0 12px;
	background-color: #e0e0e0;
	-webkit-transition: background-color .3s;
	-moz-transition: background-color .3s;
	-o-transition: background-color .3s;
	-ms-transition: background-color .3s;
	transition: background-color .3s;
	border-radius: 50%;
}

.slider .indicators .indicator-item.active {
	background-color: #4CAF50;
}

.login {  
    color: rgb(1, 103, 136);
}
.login .logo {
    
}
.login .logo img {
    display: block;
    width:30% !important;
    height:auto;
    margin-left: auto;
    margin-right: auto
}

div.modal-header {
	position: absolute;
	margin-top: -24px;
	margin-left: -24px;
	width: 100%;
	height: 37px;
}

div.modal-header-title {
	font-size: 16px;
	font-family: 'Roboto', serif;
	font-weight: 700;
	padding: 1.2%;
	margin-left: 8px;
}

.modal-content-text p {
	font-family: 'Roboto';
	font-size: 14px;
	margin-top: 30px;
}

#main,
footer {
  padding-left: 240px;
}

#input-select .input-field label {
  position: absolute;
  top: -14px;
  font-size: 0.8rem;
}
#sidenav-overlay {
  background-color: transparent;
}
.container {
  padding: 0 0.5rem;
  margin: 0 auto;
  max-width: 100% !important;
/*   width: 98%; */
}


/*=================================================================================
    Header
====================================================================================*/
/*----------------------------------------
    Page Header
------------------------------------------*/
h1.logo-wrapper{
  margin: 0px 0px;
}
h1 span.logo-text{
  display: none;
}
header .brand-logo {
  margin: -3px 0px;
  padding: 0 20px;
}
header .brand-logo img{ 
  width: 172px;
}
.menu-sidebar-collapse{
  margin: 0 10px;
}
.menu-sidebar-collapse i{
  line-height: 36px !important;
}
@media only screen and (max-width: 992px) {
  nav .nav-wrapper {
    text-align: center;
  }
  nav .nav-wrapper a.page-title {
    font-size: 36px;
  }
}


/*Search box*/ 
.header-search-wrapper {
  max-width: 824px;
  width: 100%;
  margin: 0 auto;
  width: calc(100% - 45%);
  height: 40px;
  display: inline-block;
  margin-left: 240px;
  position: relative;
}
#content .header-search-wrapper {
  width: 100%;
  margin: 0 auto; 
  height: 40px;
  display: inline-block; 
  position: relative; 
}
.header-search-wrapper i {
  position: absolute;
  top: 0;
  font-size: 24px;
  top: 6px;
  left: 24px;
  line-height:32px !important;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
}
input.header-search-input {
  display: block;
  padding: 8px 8px 8px 72px;
  width: 100%;
  background: rgba(255,255,255,0.3);
  height: 24px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  border: none;
  font-size: 16px;
  appearance: textfield;
  font-weight: 400;
  outline: none;
  border-radius: 3px;
}
.header-search-input::-webkit-input-placeholder
{
  color:#fff;
  font-size:16px;
  font-weight:400
}
.header-search-input::-moz-placeholder
{
  color:#fff;
  font-size:16px;
  font-weight:400
}
.header-search-input:-ms-input-placeholder
{
  color:#fff;
  font-size:16px;
  font-weight:400
}
.header-search-input::placeholder
{
  color:#fff;
  font-size:16px;
  font-weight:400
}

input.header-search-input:hover {
    background: rgba(255,255,255,0.5);
}

input.header-search-input:focus {
    color:#333;
    background: #fff;
}
input.header-search-input:focus {
  border-bottom: none !important;
  box-shadow: none !important;
}

.header-search-wrapper-focus  i {
  color:#444 ;
}
.header-search-input:focus::-webkit-input-placeholder
{
  color:#333;
  font-size:16px;
  font-weight:400
}
.header-search-input:focus::-moz-placeholder
{
  color:#333;
  font-size:16px;
  font-weight:400
}
.header-search-input:focus:-ms-input-placeholder
{
  color:#333;
  font-size:16px;
  font-weight:400
}
.header-search-input:focus::placeholder
{
  color:#333;
  font-size:16px;
  font-weight:400
}
/*=================================================================================
    Sidebar
====================================================================================*/
/*----------------------------------------
    Sidebar Main Menu 
------------------------------------------*/
nav ul li.no-hover:hover{
  background: none;
}
ul.side-nav.leftside-navigation {
  top: 64px;
}
@media only screen and (max-width: 992px) {
  ul.side-nav.leftside-navigation {
    top: 64px;
  }
}
ul.side-nav.leftside-navigation hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e0e0e0;
  margin: 1em 0;
  padding: 0;
}
.side-nav a {
  line-height: 42px !important;
  height: 42px !important;
}
#left-sidebar-nav {
  position: fixed;
  width: 100px;
  left: 180px;
  z-index: 999;
  height: auto;
}
#slide-out li a i {
  line-height: inherit;
  width: 2rem;
  font-size: 1.6rem;
  display: block;
  float: left;
  text-align: center;
  margin-right: 1rem;
}
#slide-out ul.side-nav li {
  padding: 0px !important;
}
ul.side-nav li {
  padding: 0;
}
ul.side-nav .collapsible-header {
  margin: 0;
}
.caption {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 30px;
}
.caption-uppercase {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.sidebar-collapse {
  position: absolute;
  left: -170px;
  top: -45px;
}

ul.side-nav.leftside-navigation {
  overflow: hidden;
}
ul.side-nav.leftside-navigation li {
  line-height: 44px;
}
ul.side-nav.leftside-navigation li:hover,
ul.side-nav.leftside-navigation li.active {
  background-color: rgba(0, 0, 0, 0.05);
}
ul.side-nav.leftside-navigation li a {
  font-size: 14px;
  font-weight: 400;
}
.side-nav.leftside-navigation .collapsible-body li.active,
.side-nav.fixed.leftside-navigation .collapsible-body li.active{
  background-color: #FAFAFA;
}
.side-nav.leftside-navigation .collapsible-body li.active a,
.side-nav.fixed.leftside-navigation .collapsible-body li.active a{
    color: #444;
}
.side-nav .collapsible-body li a{
    margin: 0 1rem 0 3rem;
}
ul.side-nav.leftside-navigation ul.collapsible-accordion {
  background-color: #FFF;
}
ul.side-nav.leftside-navigation:hover {
  /*overflow-y:hidden;*/
}
ul.side-nav.leftside-navigation li.user-details {
  background: url(../images/user-bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*overflow: hidden;*/
  
  margin-bottom: 15px;
  padding: 15px 0px 0px 15px;
}
.user-details .row {
  margin: 0;
}
.user-task,
.user-time {
  margin: 0;
  font-size: 13px;
  color: #fff;
}
ul.side-nav.leftside-navigation .profile-image {
  /*height: 50px;*/
}
ul.side-nav.leftside-navigation .profile-btn {
  margin: 0;
  text-transform: capitalize;
  padding: 0;
  text-shadow: 1px 1px 1px #444;
  font-size: 15px;
}
.user-roal {
  color: #fff;
  margin-top: -16px;
  font-size: 13px;
  text-shadow: 1px 1px 1px #444;
}
.bold > a {
  font-weight: bold;
}
nav.top-nav {
  height: 122px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
nav.top-nav a.page-title {
  line-height: 122px;
  font-size: 48px;
}


/*----------------------------------------
    Right Chat Slideout
------------------------------------------*/

.rightside-navigation {
  overflow: hidden;
}
.chat-close-collapse {
  padding: 5px 15px 0 0;
}
#right-search .input-field {
  margin-top: 0px;
}
#chat-out .collapsible-header {
  background-color: transparent;
  border: none;
  line-height: 45px;
  height: 45px;
  font-weight: 400;  
}
#chat-out .chat-out-list {
  padding: 5px;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
}
#chat-out .favorite-associate-list .circle {
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  border: 2px solid #999;
  padding: 3px;
  display: block;
}
#chat-out .favorite-associate-list .online-user {
  border: 2px solid #00e676;
}
#chat-out .recent-activity-list-icon {
  margin-top: 8px;
  font-size: 2rem;
}
#chat-out .recent-activity-list-text a {
  font-size: 0.8rem;
  padding: 0;
  font-weight: 600;
}
#chat-out .recent-activity-list-text p {
  font-size: 0.9rem;
  padding: 0;
}
#chat-out .favorite-associate-list p {
  padding: 0;
}
#chat-out .favorite-associate-list p.place {
  font-size: 0.8rem;
}
/* =================================================================================
    Content
================================================================================= */
/*----------------------------------------
    Breadcrumb
------------------------------------------*/

.breadcrumb {
  padding: 0px;
  margin: 15px 0px;
  list-style: none;
}
.breadcrumbs-title {
  font-size: 1.5rem;
  line-height: 1.804rem;
  margin: 18px 0px 0px 0px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb a {
  color: #00bcd4 !important;
}
.breadcrumb .active {
  font-weight: normal;
  color: #999;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
h5.breadcrumbs-header {
  font-size: 1.64rem;
  line-height: 1.804rem;
  margin: 1.5rem 0 0 0;
}
.breadcrumbs-nav {
  margin: 8px 0 9px 0;
}
/*----------------------------------------
    Cards
------------------------------------------*/
/*card-stats*/

#card-stats .card-content {
  text-align: center;
}
#card-stats .card-stats-title, #card-stats .card-stats-title i {
  font-size: 1.2rem;
}

#card-stats .card-stats-compare {
  font-size: 1.0rem;
}
#card-stats .card-stats-compare i{
  position: relative;
  top: 5px
}
#card-stats .card-stats-number {
  font-size: 1.8rem;
  line-height: 2.0rem;
  margin: 0.2rem 0 0.2rem 0;
  font-weight: 500;
}
/*work-collections*/

#work-collections .collection-header {
  font-size: 1.64rem;
  font-weight: 500;
}
#work-collections .collection-item.avatar {
  height: auto;
}
#work-collections p.collections-title {
  font-size: 1.0rem;
  padding: 0;
  margin: 0;
  font-weight: 500;
}
#work-collections p.collections-content {
  font-size: 0.9rem;
  padding: 0;
  margin: 0;
  font-weight: 400;
}
/*flight-card*/

#flight-card .card-header .card-title {
  padding: 20px;
}
#flight-card .flight-card-title {
  margin: 0;
  font-weight: 300;
}
#flight-card .flight-card-date {
  font-size: 1.0rem;
  margin: 0;
}
#flight-card .flight-state {
  padding-bottom: 15px;
}
#flight-card .flight-state-two {
  border-left: 1px dashed #9e9e9e;
}
#flight-card .flight-icon {
  font-size: 2.2rem;
  display: block;
  -webkit-transform: rotate(90deg);
  /* Safari */
  
  -moz-transform: rotate(90deg);
  /* Firefox */
  
  -ms-transform: rotate(90deg);
  /* IE */
  
  -o-transform: rotate(90deg);
  /* Opera */
  
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
  /* SASS Internet Explorer */
}
#flight-card .card-content-bg {
  background: url(../images/sample-1.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#flight-card .card-content {
  background: rgba(0, 0, 0, 0.25);
}
#flight-card .flight-state-wrapper {
  margin: 0 0 100px 0 !important;
}
/*task-card*/

#task-card label {
  display: block;
  color: rgba(0, 0, 0, 0.87);
  height: auto;
}
#task-card .task-card-title {
  margin: 0;
  color: #fff;
  font-weight: 300;
}
#task-card .task-card-date {
  font-size: 1.0rem;
  margin: 0;
  color: #fff;
}
#task-card .collection-header {
  padding: 20px;
}
#task-card .task-add{
  position: absolute;
  right: 10px;
  top: 76px;
}
#task-card .task-cat {
  padding: 2px 4px;
  color: #fff;
  margin-left: 37px;
  font-weight: 300;
  font-size: 0.8rem;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-clip: padding-box;
}
.task-cat {
  padding: 2px 4px;
  color: #fff;
  font-weight: 300;
  font-size: 0.8rem;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-clip: padding-box;
}
.collection .collection-item.avatar i.circle {
  font-size: 28px;
}
/* Profile Card */

#profile-card .card-image {
  height: 150px;
}
#profile-card .card-content p {
  font-size: 1.2rem;
  margin: 10px 0 12px 0;
}
#profile-card .card-profile-image {
  width: 70px;
  position: absolute;
  top: 110px;
  z-index: 1;
  cursor: pointer;
}
#profile-card .btn-move-up {
  position: relative;
  top: -40px;
  right: -18px;
  margin-right: 10px !important;
}
/*----------------------------------------
    Charts
------------------------------------------*/

#chart-dashboard {
  padding-top: 12px;
}
#chart-dashboard .card .card-content,
#card-stats .card .card-content,
#card-stats .card .card-action {
  padding: 10px 14px;  
}
#line-updated {
  /*background: #00bcd4;*/
}
.sample-chart-wrapper {
  width: 100%;
}
.chart-title {
  font-size: 1.6rem;
  font-weight: 300;
}
/* Revenue Chart */

.chart-revenue {
  float: right;
  text-align: center;
  padding: 8px;
  border-radius: 3px;
}
.chart-revenue .chart-revenue-total {
  font-size: 0.9rem;
  margin: 0;
}
.chart-revenue .chart-revenue-per {
  font-size: 0.8rem;
  margin: 0;
}
.chart-revenue .chart-revenue-per i{
  position: relative;
  top: 5px;
}
.chart-revenue-switch {
  padding-top: 28px;
  padding-right: 10px;
  color: #fff;
  text-align: right;
}

/* doughnut chart */
.doughnut-chart-status {
  position: relative;
  top: -75px;
  left: 0;
  font-size: 16px;
  font-weight: 500;
  height: 0px;
  text-align: center;
}
.doughnut-chart-status p {
  margin-top: -5px;
}
.doughnut-chart-legend li{
  padding: 2px 0;
  font-size: 0.9rem;
}
.doughnut-chart-legend li:before {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  float: left;
  margin-top: 6px;
  margin-right: 4px;
}
li.mobile:before {
  background: #F7464A;
}
li.kitchen:before {
  background: #46BFBD;
}
li.home:before {
  background: #FDB45C;
}
a.button-collapse.top-nav {
  position: absolute;
  left: 7.5%;
  top: 0;
  float: none;
  margin-left: 1.5rem;
  color: #fff;
  font-size: 32px;
  z-index: 2;
}
/* trending bar chart */

.trending-bar-chart-wrapper {
  width: 100%;
}
.btn-move-up {
  position: relative;
  top: -28px;
  right: -18px;
  margin-right: 10px !important;
}
/* Flot Chart*/

.flotchart-placeholder {
  width: 100%;
  height: 300px;
  font-size: 13px;
  line-height: 1.2em;
}
#flotchart table {
  position: absolute;
  top: 13px;
  right: 17px;
  font-size: smaller;
  color: #545454;
  width: 100px;
}
#flotchart td,
th {
  padding: 5px;
}
/* xCharts */

.xchart-placeholder {
  width: 90%;
  height: 300px;
}
/*Sparkline*/

.tooltip-class {
  overflow: hidden;
  color: #fff;
  height: 20px;
  width: 30px;
}

/**/
#ct2-chart .ct-series.ct-series-a .ct-area{
  fill: #00BCD4;
}
#ct2-chart .ct-series.ct-series-a .ct-point{
  stroke:#00BCD4;
}
#ct2-chart .ct-series.ct-series-a .ct-line{
  stroke: #54E2F4;
}
/*------------------
  Widget
--------------------*/

.socialbox .logo {
  color: #fff;
  font-size: 28px;
  left: 20px;
  bottom: 20px;
  position: absolute;
}
.socialbox .info {
  color: #fff;
  margin: 0;
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 15px;
  padding: 0;
}
/*----------------------------------------
    Calender
------------------------------------------*/

#full-calendar {
  padding-top: 30px;
}
#calendar h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 35px;
}
#calendar .fc-day-header {
  text-transform: uppercase;
  font-weight: 400;
}
#external-events {
  padding-top: 50px;
}
#external-events .fc-event {
  color: #fff;
  text-decoration: none;
  padding: 5px;
  margin-bottom: 10px;
  cursor: all-scroll;
  border: none;
}
.fc button {
  background: #fff;
}
.fc td,
.fc th {
  border-width: 0px !important;
}
.fc-state-active,
.fc-state-down {
  color: #ff4081 !important;
}
/*----------------------------------------
    Color Palette for css-color.html page
------------------------------------------*/

.dynamic-color .red,
.dynamic-color .pink,
.dynamic-color .purple,
.dynamic-color .deep-purple,
.dynamic-color .indigo,
.dynamic-color .blue,
.dynamic-color .light-blue,
.dynamic-color .cyan,
.dynamic-color .teal,
.dynamic-color .green,
.dynamic-color .light-green,
.dynamic-color .lime,
.dynamic-color .yellow,
.dynamic-color .amber,
.dynamic-color .orange,
.dynamic-color .deep-orange,
.dynamic-color .brown,
.dynamic-color .grey,
.dynamic-color .blue-grey {
  height: 55px;
  width: 100%;
  padding: 0 15px;
  line-height: 55px;
  font-weight: 500;
  font-size: 12px;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.dynamic-color .col {
  margin-bottom: 55px;
}
@media only screen and (max-width: 1024px) {
  tfoot {
    display: none;
  }
}
tr.group,
tr.group:hover {
  background-color: #ddd !important;
}
/*----------------------------------------
    Grid - Flat Site Mockup
------------------------------------------*/

#site-layout-example-left {
  background-color: #90a4ae;
  height: 300px;
}
#site-layout-example-right {
  background-color: #26a69a;
  height: 300px;
}
#site-layout-example-top {
  background-color: #E57373;
  height: 50px;
}
.flat-text-header {
  height: 35px;
  width: 80%;
  background-color: rgba(255, 255, 255, 0.15);
  display: block;
  margin: 27px auto;
}
.flat-text {
  height: 25px;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.15);
  display: block;
  margin: 27px auto;
}
.flat-text.small {
  width: 25%;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.15);
}
.flat-text.full-width {
  width: 100%;
}
.col.grid-example {
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  background-color: tomato;
  color: white;
  padding: 0px;
}
.col.grid-example span {
  font-weight: 200;
  line-height: 50px;
}
.waves-color-demo .collection-item {
  height: 57px;
  line-height: 57px;
}
/*----------------------------------------
    Chrome Browser Grid Example
------------------------------------------*/

.browser-window {
  text-align: left;
  width: 100%;
  height: auto;
  display: inline-block;
  -webkit-border-radius: 5px 5px 2px 2px;
  -moz-border-radius: 5px 5px 2px 2px;
  border-radius: 5px 5px 2px 2px;
  background-clip: padding-box;
  background-color: transparent;
  margin: 20px 0px;
  overflow: hidden;
}
.browser-window .top-bar {
  height: 30px;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-clip: padding-box;
  border-top: thin solid #eaeae9;
  border-bottom: thin solid #dfdfde;
  background: linear-gradient(#e7e7e6, #E2E2E1);
}
.browser-window .circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-color: white;
  margin-right: 1px;
}
#close-circle {
  background-color: #FF5C5A;
}
#minimize-circle {
  background-color: #FFBB50;
}
#maximize-circle {
  background-color: #1BC656;
}
.browser-window .circles {
  margin: 5px 12px;
}
.browser-window .content {
  margin: 0;
  width: 100%;
  display: inline-block;
  border-radius: 0 0 5px 5px;
  background-color: #fafafa;
}
.browser-window .row {
  margin: 0;
}
.clear {
  clear: both;
}
.promo i {
  color: #ee6e73;
  font-size: 6rem;
  display: block;
}
.promo-caption {
  font-size: 1.7rem;
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 0px;
}
/*----------------------------------------
    icon page
------------------------------------------*/

.icon-demo {
  line-height: 50px;
}
.icon-container i {
  font-size: 3em;
  display: block;
  margin-bottom: 10px;
}
.icon-container .icon-preview {
  height: 120px;
  text-align: center;
}
.icon-holder {
  display: block;
  text-align: center;
  width: 150px;
  height: 115px;
  float: left;
  margin: 0px 0px 15px 0px;
}
.icon-holder p {
  margin: 0px 0;
}
/*----------------------------------------
    Login Page
------------------------------------------*/

.login-form {
  width: 280px;  
}
.login-form-text{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
}
.profile-image-login{
  width: 100px;
  height: 100px !important;
}

.login-text {
  margin-top: -6px;
  margin-left: -6px !important;
}
/*----------------------------------------
    Error Page
------------------------------------------*/

.text-long-shadow {
  text-shadow: rgb(29, 125, 116) 1px 1px, rgb(29, 125, 116) 2px 2px, rgb(29, 125, 116) 3px 3px, rgb(29, 125, 116) 4px 4px, rgb(29, 125, 116) 5px 5px, rgb(29, 125, 116) 6px 6px, rgb(29, 125, 116) 7px 7px, rgb(29, 125, 116) 8px 8px, rgb(29, 125, 116) 9px 9px, rgb(29, 125, 116) 10px 10px, rgb(29, 125, 116) 11px 11px, rgb(29, 125, 116) 12px 12px, rgb(29, 125, 116) 13px 13px, rgb(29, 125, 116) 14px 14px, rgb(29, 126, 117) 15px 15px, rgb(29, 128, 119) 16px 16px, rgb(30, 130, 120) 17px 17px, rgb(30, 132, 122) 18px 18px, rgb(30, 133, 124) 19px 19px, rgb(31, 135, 125) 20px 20px, rgb(31, 137, 127) 21px 21px, rgb(32, 139, 129) 22px 22px, rgb(32, 141, 130) 23px 23px, rgb(32, 142, 132) 24px 24px, rgb(33, 144, 134) 25px 25px, rgb(33, 146, 135) 26px 26px, rgb(34, 148, 137) 27px 27px, rgb(34, 149, 139) 28px 28px, rgb(34, 151, 140) 29px 29px, rgb(35, 153, 142) 30px 30px, rgb(35, 155, 144) 31px 31px, rgb(36, 157, 145) 32px 32px, rgb(36, 158, 147) 33px 33px, rgb(36, 160, 149) 34px 34px, rgb(37, 162, 150) 35px 35px, rgb(37, 164, 152) 36px 36px, rgb(38, 166, 154) 37px 37px;
  background-color: rgb(38, 166, 154);
  /*height: 100%;*/  
  width: 100%;
  font-size: 10rem;
  color: #fff !important;
  text-align: center;
  padding: 20px 0 !important;
}
/*----------------------------------------
    Email Page
------------------------------------------*/

#mail-app hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e0e0e0;
  margin: 1em 0;
  padding: 0;
}
.email-unread .email-title {
  font-weight: 500;
}
#email-sidebar {
  min-height: 650px;
}
#email-sidebar li {
  padding: 10px 0;
  text-align: center;
}
#email-sidebar li i {
  padding: 12px;
  color: #272727;
}
#email-sidebar li i.active {
  background: #DDDDDD;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
#email-sidebar li i:hover {
  background: #DDDDDD;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
#mail-app #email-sidebar,
#mail-app #email-list,
#mail-app #email-details {
  margin-top: 0px;
}
#email-list {
  padding: 0;
}
#email-list .collection {
  margin: 0;
}
#email-list .collection .collection-item.avatar {
  height: auto;
  padding-left: 72px;
  position: relative;
}
#email-list .collection .collection-item:hover {
  background: #e1f5fe;
  cursor: pointer;
}
#email-list .collection .collection-item.selected {
  background: #e1f5fe;
  border-left: 4px solid #29b6f6;
}
#email-list .collection .collection-item.avatar .secondary-content {
  position: absolute;
  top: 10px;
  right: -4px;
}
#email-list .collection .collection-item.avatar .secondary-content.email-time {
  right: 8px;
}
#email-list .collection .collection-item.avatar .icon {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  top: 20px;
}
#email-list .collection .collection-item.avatar .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 300;
  padding: 10px;
}
#email-list .collection .collection-item.avatar img.circle {
  padding: 0px;
}
#email-list .attach-file {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  
  transform: rotate(90deg);
  color: #9e9e9e;
  font-size: 1.1rem;
}
#email-details {
  padding: 15px;
}
#email-details .email-subject {
  font-size: 1.2rem;
}
#email-details .email-subject i {
  font-size: 2.2rem;
}
#email-details .email-tag {
  padding: 3px;
  font-size: 0.9rem;
}
#email-details .collection {
  border: none;
}
#email-details .collection .collection-item.avatar {
  height: auto;
  padding-left: 72px;
  position: relative;
}
#email-details .collection .collection-item.selected {
  background: #e1f5fe;
  border-left: 4px solid #29b6f6;
}
#email-details .collection .collection-item.avatar .icon {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  top: 20px;
}
#email-details .collection .collection-item.avatar .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 300;
  padding: 10px;
}
#email-details .collection .collection-item.avatar img.circle {
  padding: 0px;
}
#email-details .email-actions {
  padding-top: 25px;
}
#email-details .email-actions a {
  color: #757575;
  padding: 5px;
}
.email-reply {
  padding-top: 20px;
}
.email-reply a {
  color: #757575;
}
.email-reply p {
  color: #757575;
  margin: 0;
}
.email-reply a i {
  font-size: 2rem;
}
#mail-app .modal .modal-content {
  padding: 0;
}
.model-email-content {
  padding: 24px;
}
/*----------------------------------------
    Invoice Page
------------------------------------------*/

.invoice-icon i {
  font-size: 2rem;
}
.invoice-table {
  padding-top: 40px;
}
.invoice-text{
  padding: 18px 0px;
}

/*----------------------------------------
    Blog
------------------------------------------*/

/* ----- Blog Card -----*/

.blog-card .card {
  margin:0px;
}
.blog-card ul.card-action-buttons{
  margin: -26px 10px 0px 0px;
  text-align: right;
}
.blog-card ul.card-action-buttons li{
  display: inline-block;
  padding-left: 5px;
}
.blog-card .card .card-content{
  padding: 5px 10px 5px 10px;
}
.blog-card .card .card-content .card-title,
.blog-card .card .card-reveal .card-title {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 400;
}

 /* -----Blogs Masonery Page----- */
.blog { 
  width: 20%; padding: 10px;
}
.blog-sizer {
  width: 20%; 
}
.blog .card {
  margin:0px;
}
.blog ul.card-action-buttons{
  margin: -26px 10px 0px 0px;
  text-align: right;
}
.blog ul.card-action-buttons li{
  display: inline-block;
  padding-left: 5px;
}
.blog .card .card-content{
  padding: 5px 10px 5px 10px;
}
.blog .card .card-content .card-title,
.blog .card .card-reveal .card-title {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 400;
}
.blog-post-content{
  padding-bottom: 10px;
}

/*  blog page media queries */
@media screen and (max-width: 2200px) {
  .blog-sizer { width: 20%; }
  .blog { width: 20%; }
}
@media screen and (max-width: 1800px) {
  .blog-sizer { width: 30%; }
  .blog { width: 30%; }
}
@media screen and (max-width: 1600px) {
  .blog-sizer { width: 33.33%; }
  .blog { width: 33.33%; }
}
@media screen and (max-width: 1224px) {
  .blog-sizer { width: 33.33%; }
  .blog { width: 33.33%; }
}
@media screen and (max-width: 980px) {
  .blog-sizer { width: 50%; }
  .blog { width: 50%; }
}
@media screen and (max-width: 720px) {
  .blog-sizer { width: 50%; }
  .blog { width: 50%; }
}

@media screen and (max-width: 480px) {
  .blog-sizer { width: 100%; }
  .blog { width: 100%; }
}

/* -----Blogs Page Full width 2----- */
#blog-post-full .card-title{
  text-shadow: 1px 1px 4px #000;
  font-weight: 300;
  font-size: 2rem;
}  
#blog-post-full .blog-post-full-cat{
  padding: 5px;
  margin: 25px;
  right: 0px;
  left: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;  
}
#blog-post-full .blog-post-full-cat a{  
  color: #fff;
  text-shadow:none;
}


/*----------------------------------------
    Products
------------------------------------------*/

/* ---- Product Card ----- */

.product-card .card {
  margin:0px;
}
.product-card ul.card-action-buttons{
  margin: -26px 10px 0px 0px;
  text-align: right;
}
.product-card ul.card-action-buttons li{
  display: inline-block;
  padding-left: 5px;
}
.product-card .card .card-content{
  padding: 5px 10px 5px 10px;
}
.product-card .card .card-content .card-title,
.product-card .card .card-reveal .card-title {
  font-size: 1.1rem;
  line-height: 1.6rem;
  font-weight: 400;
}
.product-card .card .btn-price{
  width: 65px;
  height: 65px;
  font-weight: 600;
  font-size: 1.0rem;
  line-height: 65px;
  margin: 10px;
  position: absolute;
  top: 0px;
  letter-spacing: 0px;
}
/* -----Products Masonery ----- */

.product { 
  width: 20%; padding: 10px;
}
.product-sizer {
  width: 20%; 
}
.product .card {
  margin:0px;
}
.product ul.card-action-buttons{
  margin: -26px 10px 0px 0px;
  text-align: right;
}
.product ul.card-action-buttons li{
  display: inline-block;
  padding-left: 5px;
}
.product .card .card-content{
  padding: 5px 10px 5px 10px;
}
.product .card .card-content .card-title,
.product .card .card-reveal .card-title {
  font-size: 1.1rem;
  line-height: 1.6rem;
  font-weight: 400;
}
.product .card .btn-price{
  width: 65px;
  height: 65px;
  font-weight: 600;
  font-size: 1.0rem;
  line-height: 65px;
  margin: 10px;
  position: absolute;
  top: 0px;
  letter-spacing: 0px;
}
/* eCommers product page media queries */
@media screen and (max-width: 2200px) {
  .product-sizer { width: 20%; }
  .product { width: 20%; }
}
@media screen and (max-width: 1800px) {
  .product-sizer { width: 30%; }
  .product { width: 30%; }
}
@media screen and (max-width: 1600px) {
  .product-sizer { width: 25%; }
  .product { width: 25%; }
}
@media screen and (max-width: 1224px) {
  .product-sizer { width: 33.33%; }
  .product { width: 33.33%; }
}
@media screen and (max-width: 980px) {
  .product-sizer { width: 50%; }
  .product { width: 50%; }
}
@media screen and (max-width: 720px) {
  .product-sizer { width: 50%; }
  .product { width: 50%; }
}

@media screen and (max-width: 480px) {
  .product-sizer { width: 100%; }
  .product { width: 100%; }
}


/*----------------------------------------
    Gallary  Page
------------------------------------------*/
.gallary-item img { 
  width: 20%;
}
.gallary-sizer {
  width: 20%; 
}

/* Gallary page media queries */
@media screen and (max-width: 2200px) {
  .gallary-sizer { width: 20%; }
  .gallary-item img { width: 20%; }
}
@media screen and (max-width: 1800px) {
  .gallary-sizer { width: 30%; }
  .gallary-item img { width: 30%; }
}
@media screen and (max-width: 1600px) {
  .gallary-sizer { width: 25%; }
  .gallary-item img { width: 25%; }
}
@media screen and (max-width: 1224px) {
  .gallary-sizer { width: 33.33%; }
  .gallary-item img { width: 33.33%; }
}
@media screen and (max-width: 980px) {
  .gallary-sizer { width: 50%; }
  .gallary-item img { width: 50%; }
}
@media screen and (max-width: 720px) {
  .gallary-sizer { width: 50%; }
  .gallary-item img { width: 50%; }
}

@media screen and (max-width: 480px) {
  .gallary-sizer { width: 100%; }
  .gallary-item img { width: 100%; }
}


/*----------------------------------------
    Contact Page (Map-card)
------------------------------------------*/

/* ---- Map card ----*/
.map-card #map-canvas {
    width: 100%;
    height: 342px;
}
.map-card .card .card-content .card-title, .map-card .card .card-reveal .card-title {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 400;
}
.map-card .btn-move-up{
    top: -38px;
}
/* ---- Map Contact Page ----*/
#map-canvas {
    width: 100%;
    height: 250px;
}

/*----------------------------------------
    Pricing Plan  Page
------------------------------------------*/
.plans-container .collection {
  border: none;
}
.plans-container .collection .collection-item {
  border-bottom: none;
  text-align: center;
  font-size: 1.07rem;
  line-height: 1.6em;
}
.plans-container .collection .collection-item:before {  
  font-size: 1.28rem;  
  line-height: 1.6em;
  color: #009315;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\e623";
  margin-right: 10px;
}
.plans-container .card .card-image {
  position: relative;
  width: 100%;
}
.plans-container .card .card-image .card-title {
  position: relative;
  font-size: 1.28rem;
  line-height: 1.6em;
  text-align: center;
  width: 100%;
  padding: 10px 15px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.1);
}
.plans-container .card .card-image .price {
  position: relative;
  font-size: 5rem;
  line-height: 1.6em;
  color: #fff;
  font-weight: 300;
  text-align: center;
}
.plans-container .card .card-image .price sup {
  font-weight: 100;
  font-size: 1.42rem;
  line-height: 1.6em;
  top: -35px;
}
.plans-container .card .card-image .price sub {
  font-weight: 100;
  font-size: 1.42rem;
  line-height: 1.6em;
  top: 0px;
}
.plans-container .card .card-image .price-desc {
  text-align: center;
  color: #fff;
  padding-bottom: 10px;
}
.plans-container .card .card-content {
  padding: 0;
}/*
@media screen and (min-width: 601px) {
  .plans-container .card {
    min-height: 550px;
  }
}*/


/*----------------------------------------
    Profile Page
------------------------------------------*/

#profile-page-header .card-image {
  height: 250px;
}
#profile-page-header .card-profile-image {
  width: 110px;
  position: absolute;
  top: 190px;
  z-index: 1;
  left: 40px;
  cursor: pointer;
  margin: 0;
}
#profile-page-header .card-content{
  margin-top: -40px;
}
#profile-page-header .card-content .card-title{
  margin-bottom: 0px;
}

/*profile-page-wall*/

#profile-page-wall .profile-image-post{
  width: 60px;
  margin: 30px 10px;
}
#profile-page-wall .tab-profile .tab i{
  font-size: 16px;
}
#profile-page-wall .tab-content{
  padding: 10px;
}
#profile-page-wall .share-icons{
  margin-top: 10px;
}
#profile-page-wall .share-icons i{
  padding: 0px 5px;
}


#profile-page-wall-posts .profile-small{
  height: 250px;
  overflow: hidden;
}
#profile-page-wall-posts .profile-medium{
  height: 350px;
  overflow: hidden;
}
#profile-page-wall-posts .profile-large{
  height: 450px;
  overflow: hidden;  
}
#profile-page-wall-posts .card-profile-title{
  font-size: 16px;
  padding: 20px;
  border-radius: 0 0 2px 2px;
}
#profile-page-wall-posts .card-action-share{
  padding: 16px;
}

/*----------------------------------------
    Shadow effect
------------------------------------------*/

.shadow-demo {
  background-color: #26a69a;
  width: 100px;
  height: 100px;
  margin: 20px auto;
}
.collapsible-header {
  font-weight: 500;
}
/*=================================================================================
    Footer
====================================================================================*/

footer.page-footer {
  padding-top: 0px;
}
/*----------------------------------------
    footer charts
------------------------------------------*/

#world-map-markers {
  height: 300px;
}
#polar-chart-holder {
  padding-top: 20px;
}

/*=================================================================================
    Media Queries
====================================================================================*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* STYLES GO HERE */
  .doughnut-chart-status{
    display: none;
  } 
}

 
/* For Tables ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* STYLES GO HERE */
  .doughnut-chart-status{
    display: none;
  }
  #card-stats .card-stats-compare{
      font-size: 0.8rem;
  }
}
.mdi-navigation-arrow-drop-down:before {
    content: "\e894";
}	
[class^="mdi-"]:before, [class*="mdi-"]:before {
    display: inline-block;
    speak: none;
    text-decoration: inherit;
}
ul#profile-dropdown {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 240px;
    max-height: 650px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    z-index: 999;
    will-change: width, height;
    left: 0px !important;
    top: 99px !important;
}
#content .container .row {
  margin-bottom: 0;
}
@media only screen and (min-width: 601px) {
  #side-navigation-container .container {
    width: 85%;
  }
}
@media only screen and (min-width: 993px) {
  #side-navigation-container .container {
    width: 70%;
  }
}
@media only screen and (max-width: 993px) {
  #main,
  footer {
    padding-left: 0px;
  }
}
.ps-scrollbar-x-rail,.ps-scrollbar-y-rail{
  z-index: 9999;
}

nav.nav-item {
    background-color: rgba(39, 39, 39, 0) !important;
    width: 100%;
    height: 64px;
    line-height: 64px;
    box-shadow:none !important;
} 
  
.item-prod {
    border-bottom: 1px solid #e0e0e0;
}  
nav.nav-item .nav-wrapper {
     text-align: left !important;
}  
nav.nav-item .nav-wrapper i {
    display: block;
    font-size: 1.4rem;  
}  

nav.nav-item  ul.valign-wrapper{
line-height: normal;
    height: 100%;

}
a.brand-title {
    position: absolute;
    color: #26a69a;
    display: inline-block;
    font-size: 1.1rem;
    padding: 0;
    white-space: nowrap;
    margin-left: 12px;
    text-align: left !important;
}
nav ul a.btn,nav ul a.btn-large,nav ul a.btn-large,nav ul a.btn-flat,nav ul a.btn-floating {
    margin-top: -2px;
    margin-left: 15px;
    margin-right: 15px;
}


ul.side-nav-m {
      z-index: 999;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: auto;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.orc-dashboard {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.side-nav-m li {
  float: none;
  line-height: 64px;
}

.side-nav-m a {
  color: #444;
  display: block;
  font-size: 1rem;
  height: 64px;
  line-height: 64px;
  padding: 0 30px;
}

.side-nav-m a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

li.lis > div#! {
  display: none;
}

li.lis > div#!:target {
  display: block;
}
.white-text {
  color: #FFFFFF !important; }

.transparent {
  background-color: transparent !important; }

.transparent-text {
  color: transparent !important; }

/*** Colors ***/
/*** Badges ***/
/*** Buttons ***/
/*** Cards ***/
/*** Collapsible ***/
/*** Dropdown ***/
/*** Fonts ***/
/*** Forms ***/
/*** Global ***/
/*** Navbar ***/
/*** SideNav ***/
/*** Tabs ***/
/*** Tables ***/
/*** Toasts ***/
/*** Typography ***/
/*** Collections ***/
/* Progress Bar */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0;
  }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
/* 1 */
html input[type="button"],
button,
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

ul {
  list-style-type: none; }

a {
  color: #039be5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; }

.valign-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }
  .valign-wrapper .valign {
    display: block; }

ul {
  padding: 0; }
  ul li {
    list-style-type: none; }

.clearfix {
  clear: both; }

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .pricing-button, .btn-floating, .dropdown-content, .collapsible, .side-nav {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.z-depth-1-half, .btn:hover, .btn-large:hover, .pricing-button:hover, .btn-floating:hover {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

.z-depth-2 {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.z-depth-3 {
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); }

.z-depth-4, .modal {
  -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); }

.z-depth-5 {
  -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); }

.divider, .divider-big {
  height: 1px;
  overflow: hidden;
  background-color: #e0e0e0; }

blockquote {
  margin: 20px 0;
  padding-left: 1.5rem;
  border-left: 5px solid #EF9A9A; }

i {
  line-height: inherit; }
  i.left {
    float: left;
    margin-right: 15px; }
  i.right {
    float: right;
    margin-left: 15px; }
  i.tiny {
    font-size: 1rem; }
  i.small {
    font-size: 2rem; }
  i.medium {
    font-size: 4rem; }
  i.large {
    font-size: 6rem; }

img.responsive-img,
video.responsive-video {
  max-width: 100%;
  height: auto; }

.pagination li {
  font-size: 1.2rem;
  float: left;
  width: 30px;
  height: 30px;
  margin: 0 10px;
  border-radius: 2px;
  text-align: center; }
  .pagination li a {
    color: #444; }
  .pagination li.active a {
    color: #fff; }
  .pagination li.active {
    background-color: #ee6e73; }
  .pagination li.disabled a {
    color: #999; }
  .pagination li i {
    font-size: 2rem;
    line-height: 1.8rem; }

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 500px; }

.parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; }
  .parallax img {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transform: translateX(-50%); }

.pin-top, .pin-bottom {
  position: relative; }

.pinned {
  position: fixed !important; }

/*********************
  Transition Classes
**********************/
ul.staggered-list li {
  opacity: 0; }

.fade-in {
  opacity: 0;
  transform-origin: 0 50%; }

/*********************
  Media Query Classes
**********************/
@media only screen and (max-width: 600px) {
  .hide-on-small-only, .hide-on-small-and-down {
    display: none !important; } }

@media only screen and (max-width: 992px) {
  .hide-on-med-and-down {
    display: none !important; } }

@media only screen and (min-width: 601px) {
  .hide-on-med-and-up {
    display: none !important; } }

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .hide-on-med-only {
    display: none !important; } }

@media only screen and (min-width: 993px) {
  .hide-on-large-only {
    display: none !important; } }

@media only screen and (min-width: 993px) {
  .show-on-large {
    display: initial !important; } }

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .show-on-medium {
    display: initial !important; } }

@media only screen and (max-width: 600px) {
  .show-on-small {
    display: initial !important; } }

@media only screen and (min-width: 601px) {
  .show-on-medium-and-up {
    display: initial !important; } }

@media only screen and (max-width: 992px) {
  .show-on-medium-and-down {
    display: initial !important; } }

@media only screen and (max-width: 600px) {
  .center-on-small-only {
    text-align: center; } }

footer.page-footer {
  margin-top: 20px;
  padding-top: 20px;
  background-color: #f5f5f5; }
  footer.page-footer .footer-copyright {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(51, 51, 51, 0.08); }

table, th, td {
  border: none; }

table {
  width: 100%;
  display: table; }
  table.bordered tr {
    border-bottom: 1px solid #d0d0d0; }
  table.striped tbody tr:nth-child(odd) {
    background-color: #f2f2f2; }
  table.hoverable tbody tr {
    -webkit-transition: background-color 0.25s ease;
    -moz-transition: background-color 0.25s ease;
    -o-transition: background-color 0.25s ease;
    -ms-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease; }
    table.hoverable tbody tr:hover {
      background-color: #f2f2f2; }
  table.centered thead tr th, table.centered tbody tr td {
    text-align: center; }

thead {
  border-bottom: 1px solid #d0d0d0; }

td, th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px; }

@media only screen and (max-width: 992px) {
  table.responsive-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    position: relative;
    /* sort out borders */ }
    table.responsive-table th,
    table.responsive-table td {
      margin: 0;
      vertical-align: top; }
    table.responsive-table th {
      text-align: left; }
    table.responsive-table thead {
      display: block;
      float: left; }
      table.responsive-table thead tr {
        display: block;
        padding: 0 10px 0 0; }
        table.responsive-table thead tr th::before {
          content: "\00a0"; }
    table.responsive-table tbody {
      display: block;
      width: auto;
      position: relative;
      overflow-x: auto;
      white-space: nowrap; }
      table.responsive-table tbody tr {
        display: inline-block;
        vertical-align: top; }
    table.responsive-table th {
      display: block;
      text-align: right; }
    table.responsive-table td {
      display: block;
      min-height: 1.25em;
      text-align: left; }
    table.responsive-table tr {
      padding: 0 10px; }
    table.responsive-table thead {
      border: 0;
      border-right: 1px solid #d0d0d0; }
    table.responsive-table.bordered th {
      border-bottom: 0;
      border-left: 0; }
    table.responsive-table.bordered td {
      border-left: 0;
      border-right: 0;
      border-bottom: 0; }
    table.responsive-table.bordered tr {
      border: 0; }
    table.responsive-table.bordered tbody tr {
      border-right: 1px solid #d0d0d0; } }
.collection {
  margin: 0.5rem 0 1rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  position: relative; }
  .collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0; }
    .collection .collection-item.avatar {
      height: 84px;
      padding-left: 72px;
      position: relative; }
      .collection .collection-item.avatar .circle {
        position: absolute;
        width: 42px;
        height: 42px;
        overflow: hidden;
        left: 15px;
        display: inline-block;
        vertical-align: middle; }
      .collection .collection-item.avatar i.circle {
        font-size: 18px;
        line-height: 42px;
        color: #fff;
        background-color: #999;
        text-align: center; }
      .collection .collection-item.avatar .title {
        font-size: 16px; }
      .collection .collection-item.avatar p {
        margin: 0; }
      .collection .collection-item.avatar .secondary-content {
        position: absolute;
        top: 16px;
        right: 16px; }
    .collection .collection-item:last-child {
      border-bottom: none; }
    .collection .collection-item.active {
      background-color: #26a69a;
      color: #eafaf9; }
  .collection a.collection-item {
    display: block;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    -ms-transition: 0.25s;
    transition: 0.25s;
    color: #26a69a; }
    .collection a.collection-item:not(.active):hover {
      background-color: #ddd; }
  .collection.with-header .collection-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 20px; }
  .collection.with-header .collection-item {
    padding-left: 30px; }

.secondary-content {
  float: right;
  color: #26a69a; }

span.badge {
  min-width: 3rem;
  padding: 0 6px;
  text-align: center;
  font-size: 1rem;
  line-height: inherit;
  color: #757575;
  position: absolute;
  right: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  span.badge.new {
    font-weight: 300;
    font-size: 0.8rem;
    color: #fff;
    background-color: #26a69a;
    border-radius: 2px; }
  span.badge.new:after {
    content: " new"; }

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }
  .video-container.no-controls {
    padding-top: 0; }
  .video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #acece6;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden; }
  .progress .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: #26a69a;
    -webkit-transition: width 0.3s linear;
    -moz-transition: width 0.3s linear;
    -o-transition: width 0.3s linear;
    -ms-transition: width 0.3s linear;
    transition: width 0.3s linear; }
  .progress .indeterminate {
    background-color: #26a69a; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      -moz-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      -ms-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      -o-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -moz-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -ms-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -o-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
      -moz-animation-delay: 1.15s;
      -ms-animation-delay: 1.15s;
      -o-animation-delay: 1.15s;
      animation-delay: 1.15s; }

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@-moz-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
@-moz-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
/*******************
  Utility Classes
*******************/
.hide {
  display: none !important; }

.left-align {
  text-align: left; }

.right-align {
  text-align: right; }

.center, .center-align {
  text-align: center; }

.left {
  float: left !important; }

.right {
  float: right !important; }

.no-select, input[type=range], input[type=range] + .thumb {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.circle {
  border-radius: 50%; }

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.no-padding {
  padding: 0 !important; }

@font-face {
  font-family: "Material-Design-Icons";
  src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("../font/material-design-icons/Material-Design-Icons.woff2") format("woff2"), url("../font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("../font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("../font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="mdi-"], [class*=" mdi-"] {
  font-family: "Material-Design-Icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }


#side-navigation-container.container {
  padding: 0 1.5rem;
  margin: 0 auto;
  max-width: 1280px;
  width: 90%; }

@media only screen and (min-width: 601px) {
  #side-navigation-container.container {
    width: 85%; } }
@media only screen and (min-width: 993px) {
  #side-navigation-container.container {
    width: 70%; } }
.container .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem; }

.section {
  padding-top: 1rem;
  padding-bottom: 1rem; }
  .section.no-pad {
    padding: 0; }
  .section.no-pad-bot {
    padding-bottom: 0; }
  .section.no-pad-top {
    padding-top: 0; }

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px; }
  .row:after {
    content: "";
    display: table;
    clear: both; }
  .row .col {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.75rem; }
    .row .col.s1 {
      width: 8.3333333333%;
      margin-left: 0; }
    .row .col.s2 {
      width: 16.6666666667%;
      margin-left: 0; }
    .row .col.s3 {
      width: 25%;
      margin-left: 0; }
    .row .col.s4 {
      width: 33.3333333333%;
      margin-left: 0; }
    .row .col.s5 {
      width: 41.6666666667%;
      margin-left: 0; }
    .row .col.s6 {
      width: 50%;
      margin-left: 0; }
    .row .col.s7 {
      width: 58.3333333333%;
      margin-left: 0; }
    .row .col.s8 {
      width: 66.6666666667%;
      margin-left: 0; }
    .row .col.s9 {
      width: 75%;
      margin-left: 0; }
    .row .col.s10 {
      width: 83.3333333333%;
      margin-left: 0; }
    .row .col.s11 {
      width: 91.6666666667%;
      margin-left: 0; }
    .row .col.s12 {
      width: 100%;
      margin-left: 0; }
    .row .col.offset-s1 {
      margin-left: 8.3333333333%; }
    .row .col.offset-s2 {
      margin-left: 16.6666666667%; }
    .row .col.offset-s3 {
      margin-left: 25%; }
    .row .col.offset-s4 {
      margin-left: 33.3333333333%; }
    .row .col.offset-s5 {
      margin-left: 41.6666666667%; }
    .row .col.offset-s6 {
      margin-left: 50%; }
    .row .col.offset-s7 {
      margin-left: 58.3333333333%; }
    .row .col.offset-s8 {
      margin-left: 66.6666666667%; }
    .row .col.offset-s9 {
      margin-left: 75%; }
    .row .col.offset-s10 {
      margin-left: 83.3333333333%; }
    .row .col.offset-s11 {
      margin-left: 91.6666666667%; }
    .row .col.offset-s12 {
      margin-left: 100%; }
    @media only screen and (min-width: 601px) {
      .row .col.m1 {
        width: 8.3333333333%;
        margin-left: 0; }
      .row .col.m2 {
        width: 16.6666666667%;
        margin-left: 0; }
      .row .col.m3 {
        width: 25%;
        margin-left: 0; }
      .row .col.m4 {
        width: 33.3333333333%;
        margin-left: 0; }
      .row .col.m5 {
        width: 41.6666666667%;
        margin-left: 0; }
      .row .col.m6 {
        width: 50%;
        margin-left: 0; }
      .row .col.m7 {
        width: 58.3333333333%;
        margin-left: 0; }
      .row .col.m8 {
        width: 66.6666666667%;
        margin-left: 0; }
      .row .col.m9 {
        width: 75%;
        margin-left: 0; }
      .row .col.m10 {
        width: 83.3333333333%;
        margin-left: 0; }
      .row .col.m11 {
        width: 91.6666666667%;
        margin-left: 0; }
      .row .col.m12 {
        width: 100%;
        margin-left: 0; }
      .row .col.offset-m1 {
        margin-left: 8.3333333333%; }
      .row .col.offset-m2 {
        margin-left: 16.6666666667%; }
      .row .col.offset-m3 {
        margin-left: 25%; }
      .row .col.offset-m4 {
        margin-left: 33.3333333333%; }
      .row .col.offset-m5 {
        margin-left: 41.6666666667%; }
      .row .col.offset-m6 {
        margin-left: 50%; }
      .row .col.offset-m7 {
        margin-left: 58.3333333333%; }
      .row .col.offset-m8 {
        margin-left: 66.6666666667%; }
      .row .col.offset-m9 {
        margin-left: 75%; }
      .row .col.offset-m10 {
        margin-left: 83.3333333333%; }
      .row .col.offset-m11 {
        margin-left: 91.6666666667%; }
      .row .col.offset-m12 {
        margin-left: 100%; } }
    @media only screen and (min-width: 993px) {
      .row .col.l1 {
        width: 8.3333333333%;
        margin-left: 0; }
      .row .col.l2 {
        width: 16.6666666667%;
        margin-left: 0; }
      .row .col.l3 {
        width: 25%;
        margin-left: 0; }
      .row .col.l4 {
        width: 33.3333333333%;
        margin-left: 0; }
      .row .col.l5 {
        width: 41.6666666667%;
        margin-left: 0; }
      .row .col.l6 {
        width: 50%;
        margin-left: 0; }
      .row .col.l7 {
        width: 58.3333333333%;
        margin-left: 0; }
      .row .col.l8 {
        width: 66.6666666667%;
        margin-left: 0; }
      .row .col.l9 {
        width: 75%;
        margin-left: 0; }
      .row .col.l10 {
        width: 83.3333333333%;
        margin-left: 0; }
      .row .col.l11 {
        width: 91.6666666667%;
        margin-left: 0; }
      .row .col.l12 {
        width: 100%;
        margin-left: 0; }
      .row .col.offset-l1 {
        margin-left: 8.3333333333%; }
      .row .col.offset-l2 {
        margin-left: 16.6666666667%; }
      .row .col.offset-l3 {
        margin-left: 25%; }
      .row .col.offset-l4 {
        margin-left: 33.3333333333%; }
      .row .col.offset-l5 {
        margin-left: 41.6666666667%; }
      .row .col.offset-l6 {
        margin-left: 50%; }
      .row .col.offset-l7 {
        margin-left: 58.3333333333%; }
      .row .col.offset-l8 {
        margin-left: 66.6666666667%; }
      .row .col.offset-l9 {
        margin-left: 75%; }
      .row .col.offset-l10 {
        margin-left: 83.3333333333%; }
      .row .col.offset-l11 {
        margin-left: 91.6666666667%; }
      .row .col.offset-l12 {
        margin-left: 100%; } }

nav {
  color: #fff;
  background-color: #ee6e73;
  width: 100%;
  height: 56px;
  line-height: 56px; }
  nav a {
    color: #fff; }
  nav .nav-wrapper {
    position: relative;
    height: 100%; }
    nav .nav-wrapper i {
      display: block;
      font-size: 2rem; }
  @media only screen and (min-width: 993px) {
    nav a.button-collapse {
      display: none; } }
  nav .button-collapse {
    float: left;
    position: relative;
    z-index: 1;
    height: 56px; }
    nav .button-collapse i {
      font-size: 2.7rem;
      height: 56px;
      line-height: 56px; }
  nav .brand-logo {
    position: absolute;
    color: #fff;
    display: inline-block;
    font-size: 2.1rem;
    padding: 0; }
    nav .brand-logo.center {
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%); }
    @media only screen and (max-width: 992px) {
      nav .brand-logo {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }
    nav .brand-logo.right {
      right: 0.5rem;
      padding: 0; }
  nav ul {
    margin: 0; }
    nav ul li {
      -webkit-transition: background-color 0.3s;
      -moz-transition: background-color 0.3s;
      -o-transition: background-color 0.3s;
      -ms-transition: background-color 0.3s;
      transition: background-color 0.3s;
      float: left;
      padding: 0; }
      nav ul li:hover, nav ul li.active {
        background-color: rgba(0, 0, 0, 0.1); }
    nav ul a {
      font-size: 1rem;
      color: #fff;
      display: block;
      padding: 0 15px; }
    nav ul.left {
      float: left; }
  nav .input-field {
    margin: 0; }
    nav .input-field input {
      height: 100%;
      font-size: 1.2rem;
      border: none;
      padding-left: 2rem; }
      nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid {
        border: none;
        box-shadow: none; }
    nav .input-field label {
      top: 0;
      left: 0; }
      nav .input-field label i {
        color: rgba(255, 255, 255, 0.7);
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        -o-transition: color 0.3s;
        -ms-transition: color 0.3s;
        transition: color 0.3s; }
      nav .input-field label.active i {
        color: #fff; }
      nav .input-field label.active {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }

.navbar-fixed {
  position: relative;
  height: 56px;
  z-index: 998; }
  .navbar-fixed nav {
    position: fixed; }

@media only screen and (min-width: 601px) {
  nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
    height: 64px;
    line-height: 64px; }

  .navbar-fixed {
    height: 64px; } }
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Thin.woff2") format("woff2"), url("../font/roboto/Roboto-Thin.woff") format("woff"), url("../font/roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 200; }
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Light.woff2") format("woff2"), url("../font/roboto/Roboto-Light.woff") format("woff"), url("../font/roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300; }
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Regular.woff2") format("woff2"), url("../font/roboto/Roboto-Regular.woff") format("woff"), url("../font/roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400; }
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Medium.woff2") format("woff2"), url("../font/roboto/Roboto-Medium.woff") format("woff"), url("../font/roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500; }
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Bold.woff2") format("woff2"), url("../font/roboto/Roboto-Bold.woff") format("woff"), url("../font/roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700; }
a {
  text-decoration: none; }

html {
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  }
  @media only screen and (min-width: 0) {
    html {
      font-size: 14px; } }
  @media only screen and (min-width: 992px) {
    html {
      font-size: 14.5px; } }
  @media only screen and (min-width: 1200px) {
    html {
      font-size: 15px; } }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit; }

h1 {
  font-size: 4.2rem;
  line-height: 4.62rem;
  margin: 2.1rem 0 1.68rem 0; }

h2 {
  font-size: 3.56rem;
  line-height: 3.916rem;
  margin: 1.78rem 0 1.424rem 0; }

h3 {
  font-size: 2.92rem;
  line-height: 3.212rem;
  margin: 1.46rem 0 1.168rem 0; }

h4 {
  font-size: 2.28rem;
  line-height: 2.508rem;
  margin: 1.14rem 0 0.912rem 0; }

h5 {
  font-size: 1.64rem;
  line-height: 1.804rem;
  margin: 0.82rem 0 0.656rem 0; }

h6 {
  font-size: 1rem;
  line-height: 1.1rem;
  margin: 0.5rem 0 0.4rem 0; }

em {
  font-style: italic; }

strong {
  font-weight: 500; }

small {
  font-size: 75%; }

.light, footer.page-footer .footer-copyright {
  font-weight: 300; }

.thin {
  font-weight: 200; }

.flow-text {
  font-weight: 300; }
  @media only screen and (min-width: 360px) {
    .flow-text {
      font-size: 1.2rem; } }
  @media only screen and (min-width: 0px) {
    .flow-text {
      line-height: 0.8rem; } }
  @media only screen and (min-width: 390px) {
    .flow-text {
      font-size: 1.224rem; } }
  @media only screen and (min-width: 30px) {
    .flow-text {
      line-height: 0.904rem; } }
  @media only screen and (min-width: 420px) {
    .flow-text {
      font-size: 1.248rem; } }
  @media only screen and (min-width: 60px) {
    .flow-text {
      line-height: 1.008rem; } }
  @media only screen and (min-width: 450px) {
    .flow-text {
      font-size: 1.272rem; } }
  @media only screen and (min-width: 90px) {
    .flow-text {
      line-height: 1.112rem; } }
  @media only screen and (min-width: 480px) {
    .flow-text {
      font-size: 1.296rem; } }
  @media only screen and (min-width: 120px) {
    .flow-text {
      line-height: 1.216rem; } }
  @media only screen and (min-width: 510px) {
    .flow-text {
      font-size: 1.32rem; } }
  @media only screen and (min-width: 150px) {
    .flow-text {
      line-height: 1.32rem; } }
  @media only screen and (min-width: 540px) {
    .flow-text {
      font-size: 1.344rem; } }
  @media only screen and (min-width: 180px) {
    .flow-text {
      line-height: 1.424rem; } }
  @media only screen and (min-width: 570px) {
    .flow-text {
      font-size: 1.368rem; } }
  @media only screen and (min-width: 210px) {
    .flow-text {
      line-height: 1.528rem; } }
  @media only screen and (min-width: 600px) {
    .flow-text {
      font-size: 1.392rem; } }
  @media only screen and (min-width: 240px) {
    .flow-text {
      line-height: 1.632rem; } }
  @media only screen and (min-width: 630px) {
    .flow-text {
      font-size: 1.416rem; } }
  @media only screen and (min-width: 270px) {
    .flow-text {
      line-height: 1.736rem; } }
  @media only screen and (min-width: 660px) {
    .flow-text {
      font-size: 1.44rem; } }
  @media only screen and (min-width: 300px) {
    .flow-text {
      line-height: 1.84rem; } }
  @media only screen and (min-width: 690px) {
    .flow-text {
      font-size: 1.464rem; } }
  @media only screen and (min-width: 330px) {
    .flow-text {
      line-height: 1.944rem; } }
  @media only screen and (min-width: 720px) {
    .flow-text {
      font-size: 1.488rem; } }
  @media only screen and (min-width: 360px) {
    .flow-text {
      line-height: 2.048rem; } }
  @media only screen and (min-width: 750px) {
    .flow-text {
      font-size: 1.512rem; } }
  @media only screen and (min-width: 390px) {
    .flow-text {
      line-height: 2.152rem; } }
  @media only screen and (min-width: 780px) {
    .flow-text {
      font-size: 1.536rem; } }
  @media only screen and (min-width: 420px) {
    .flow-text {
      line-height: 2.256rem; } }
  @media only screen and (min-width: 810px) {
    .flow-text {
      font-size: 1.56rem; } }
  @media only screen and (min-width: 450px) {
    .flow-text {
      line-height: 2.36rem; } }
  @media only screen and (min-width: 840px) {
    .flow-text {
      font-size: 1.584rem; } }
  @media only screen and (min-width: 480px) {
    .flow-text {
      line-height: 2.464rem; } }
  @media only screen and (min-width: 870px) {
    .flow-text {
      font-size: 1.608rem; } }
  @media only screen and (min-width: 510px) {
    .flow-text {
      line-height: 2.568rem; } }
  @media only screen and (min-width: 900px) {
    .flow-text {
      font-size: 1.632rem; } }
  @media only screen and (min-width: 540px) {
    .flow-text {
      line-height: 2.672rem; } }
  @media only screen and (min-width: 930px) {
    .flow-text {
      font-size: 1.656rem; } }
  @media only screen and (min-width: 570px) {
    .flow-text {
      line-height: 2.776rem; } }
  @media only screen and (min-width: 960px) {
    .flow-text {
      font-size: 1.68rem; } }
  @media only screen and (min-width: 600px) {
    .flow-text {
      line-height: 2.88rem; } }

.card-panel {
  padding: 20px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 2px;
  background-color: #fff; }

.card {
  position: relative;
  overflow: hidden;
  margin: 0.5rem 0 1rem 0;
  background-color: #fff;
  border-radius: 2px; }
  .card .card-title {
    color: #fff;
    font-size: 24px;
    font-weight: 300; }
    .card .card-title.activator {
      cursor: pointer; }
  .card.small, .card.medium, .card.large {
    position: relative; }
    .card.small .card-image, .card.medium .card-image, .card.large .card-image {
      overflow: hidden; }
    .card.small .card-content, .card.medium .card-content, .card.large .card-content {
      overflow: hidden; }
    .card.small .card-action, .card.medium .card-action, .card.large .card-action {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
  .card.small {
    height: 300px; }
    .card.small .card-image {
      height: 150px; }
    .card.small .card-content {
      height: 150px; }
  .card.medium {
    height: 400px; }
    .card.medium .card-image {
      height: 250px; }
    .card.medium .card-content {
      height: 150px; }
  .card.large {
    height: 500px; }
    .card.large .card-image {
      height: 330px; }
    .card.large .card-content {
      height: 170px; }
  .card .card-image {
    position: relative; }
    .card .card-image img {
      border-radius: 2px 2px 0 0;
      position: relative;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%; }
    .card .card-image .card-title {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 20px; }
  .card .card-content {
    padding: 20px;
    border-radius: 0 0 2px 2px; }
    .card .card-content p {
      margin: 0;
      color: inherit; }
    .card .card-content .card-title {
      line-height: 48px; }
  .card .card-action {
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 20px; }
    .card .card-action a {
      color: #ffab40;
      margin-right: 20px;
      -webkit-transition: color 0.3s ease;
      -moz-transition: color 0.3s ease;
      -o-transition: color 0.3s ease;
      -ms-transition: color 0.3s ease;
      transition: color 0.3s ease;
      text-transform: uppercase; }
      .card .card-action a:hover {
        color: #ffd8a6; }
  .card .card-reveal {
    padding: 20px;
    position: absolute;
    background-color: #FFF;
    width: 100%;
    overflow-y: auto;
    top: 100%;
    height: 100%;
    z-index: 1;
    display: none; }
    .card .card-reveal .card-title {
      cursor: pointer;
      display: block; }

#toast-container {
  display: block;
  position: fixed;
  z-index: 1001; }
  @media only screen and (max-width: 600px) {
    #toast-container {
      min-width: 100%;
      bottom: 0%; } }
  @media only screen and (min-width: 601px) and (max-width: 992px) {
    #toast-container {
      min-width: 30%;
      left: 5%;
      bottom: 7%; } }
  @media only screen and (min-width: 993px) {
    #toast-container {
      min-width: 8%;
      top: 10%;
      right: 7%; } }

.toast {
  border-radius: 2px;
  top: 0;
  width: auto;
  clear: both;
  margin-top: 10px;
  position: relative;
  max-width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #323232;
  padding: 0 25px;
  font-size: 1.1rem;
  font-weight: 300;
  color: #fff;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between; }
  .toast .btn, .toast .btn-large, .toast .pricing-button, .toast .btn-flat {
    margin: 0;
    margin-left: 3rem; }
  .toast.rounded {
    border-radius: 24px; }
  @media only screen and (max-width: 600px) {
    .toast {
      width: 100%;
      border-radius: 0; } }
  @media only screen and (min-width: 601px) and (max-width: 992px) {
    .toast {
      float: left; } }
  @media only screen and (min-width: 993px) {
    .toast {
      float: right; } }

.tabs {
  position: relative;
  height: 48px;
  background-color: #fff;
  margin: 0 auto;
  width: 100%;
  white-space: nowrap; }
  .tabs .tab {
    display: block;
    float: left;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0 20px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .8px;
    width: 15%; }
    .tabs .tab a {
      color: #ee6e73;
      display: block;
      width: 100%;
      height: 100%;
      -webkit-transition: color 0.28s ease;
      -moz-transition: color 0.28s ease;
      -o-transition: color 0.28s ease;
      -ms-transition: color 0.28s ease;
      transition: color 0.28s ease; }
      .tabs .tab a:hover {
        color: #f9c9cb; }
  .tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #f6b2b5;
    will-change: left, right; }

.tabs .tab {
  padding: 0; }

.material-tooltip {
  padding: 10px 8px;
  font-size: 1rem;
  z-index: 1000;
  background-color: transparent;
  border-radius: 2px;
  color: #fff;
  min-height: 36px;
  line-height: 1rem;
  opacity: 0;
  display: none;
  position: absolute;
  text-align: center;
  overflow: hidden;
  left: 0;
  top: 0;
  will-change: top, left; }

.backdrop {
  position: absolute;
  opacity: 0;
  display: none;
  height: 7px;
  width: 14px;
  border-radius: 0 0 14px 14px;
  background-color: #323232;
  z-index: -1;
  -webkit-transform-origin: 50% 10%;
  -moz-transform-origin: 50% 10%;
  -ms-transform-origin: 50% 10%;
  -o-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
  will-change: transform, opacity; }

.btn, .btn-large, .pricing-button, .btn-flat {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent; }

.btn.disabled, .disabled.btn-large, .disabled.pricing-button, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .pricing-button:disabled, .btn-large:disabled, .btn-floating:disabled {
  background-color: #DFDFDF;
  box-shadow: none;
  color: #9F9F9F;
  cursor: default; }
  .btn.disabled *, .disabled.btn-large *, .disabled.pricing-button *, .btn-floating.disabled *, .btn-large.disabled *, .btn:disabled *, .btn-large:disabled *, .pricing-button:disabled *, .btn-large:disabled *, .btn-floating:disabled * {
    pointer-events: none; }
  .btn.disabled:hover, .disabled.btn-large:hover, .disabled.pricing-button:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .pricing-button:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
    background-color: #DFDFDF;
    color: #9F9F9F; }

.btn i, .btn-large i, .pricing-button i, .btn-floating i, .btn-large i, .btn-flat i {
  font-size: 1.3rem;
  line-height: inherit; }

.btn, .btn-large, .pricing-button {
  text-decoration: none;
  color: #FFF;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  cursor: pointer; }
  .btn:hover, .btn-large:hover, .pricing-button:hover {
    background-color: #2bbbad; }

.btn-floating {
  display: inline-block;
  color: #FFF;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 37px;
  height: 37px;
  line-height: 37px;
  padding: 0;
  background-color: #26a69a;
  border-radius: 50%;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle; }
  .btn-floating i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #FFF;
    font-size: 1.6rem;
    line-height: 37px; }
  .btn-floating:before {
    border-radius: 0; }
  .btn-floating.btn-large {
    width: 55.5px;
    height: 55.5px; }
    .btn-floating.btn-large i {
      line-height: 55.5px; }

button.btn-floating {
  border: none; }

.fixed-action-btn {
  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998; }
  .fixed-action-btn ul {
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    bottom: 64px; }
    .fixed-action-btn ul li {
      margin-bottom: 15px; }
    .fixed-action-btn ul a.btn-floating {
      opacity: 0; }

.btn-flat {
  box-shadow: none;
  background-color: transparent;
  color: #343434;
  cursor: pointer; }
  .btn-flat.disabled {
    color: #b3b3b3;
    cursor: default; }

.btn-large {
  height: 54px;
  line-height: 56px; }
  .btn-large i {
    font-size: 1.6rem; }

.dropdown-content {
  background-color: #FFFFFF;
  margin: 0;
  display: none;
  min-width: 100px;
  max-height: 650px;
  overflow-y: auto;
  opacity: 0;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  will-change: width, height; }
  .dropdown-content li {
    clear: both;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
    text-transform: none; }
    .dropdown-content li:hover, .dropdown-content li.active {
      background-color: #eee; }
    .dropdown-content li > a, .dropdown-content li > span {
      font-size: 1.2rem;
      color: #26a69a;
      display: block;
      padding: 1rem 1rem; }

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */
.waves-effect, .pricing-button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }
  .waves-effect .waves-ripple, .pricing-button .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    pointer-events: none; }
  .waves-effect.waves-light .waves-ripple, .pricing-button .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45); }
  .waves-effect.waves-red .waves-ripple, .waves-red.pricing-button .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7); }
  .waves-effect.waves-yellow .waves-ripple, .waves-yellow.pricing-button .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7); }
  .waves-effect.waves-orange .waves-ripple, .waves-orange.pricing-button .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7); }
  .waves-effect.waves-purple .waves-ripple, .waves-purple.pricing-button .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7); }
  .waves-effect.waves-green .waves-ripple, .waves-green.pricing-button .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7); }
  .waves-effect.waves-teal .waves-ripple, .waves-teal.pricing-button .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7); }

.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important; }

.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom; }
  .waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1; }

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  -webkit-mask-image: none; }

.waves-block {
  display: block; }

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple, a.pricing-button .waves-ripple {
  z-index: -1; }

.modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  z-index: 1000;
  border-radius: 2px;
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  transform: translate(0);
  will-change: top, opacity; }
  @media only screen and (max-width: 992px) {
    .modal {
      width: 80%; } }
  .modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0; }
  .modal .modal-content {
    padding: 24px; }
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #ffffff;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
    .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .pricing-button, .modal .modal-footer .btn-flat {
      float: right;
      margin: 6px 0; }

#lean-overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 115%;
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity; }

.modal.modal-fixed-footer {
  padding: 0;
  height: 70%; }
  .modal.modal-fixed-footer .modal-content {
    position: fixed;
    max-height: 100%;
    padding-bottom: 64px;
    width: 100%;
    overflow-y: auto; }
  .modal.modal-fixed-footer .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0; }

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity; }

.collapsible {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0.5rem 0 1rem 0; }

.collapsible-header {
  display: block;
  cursor: pointer;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd; }
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    line-height: 3rem;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem; }

.collapsible-body {
  overflow: hidden;
  display: none;
  border-bottom: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .collapsible-body p {
    margin: 0;
    padding: 2rem; }

.side-nav .collapsible {
  border: none;
  box-shadow: none; }
  .side-nav .collapsible li {
    padding: 0; }
.side-nav .collapsible-header {
  background-color: transparent;
  border: none;
  line-height: inherit;
  height: inherit;
  margin: 0 1rem; }
  .side-nav .collapsible-header i {
    line-height: inherit; }
.side-nav .collapsible-body {
  border: 0;
  background-color: #FFF; }
  .side-nav .collapsible-body li a {
    margin: 0 1rem 0 2rem; }

.collapsible.popout {
  border: none;
  box-shadow: none; }
  .collapsible.popout > li {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transform: scaleX(0.92) translate3d(0, 0, 0);
    transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .collapsible.popout > li:hover {
      will-change: margin, transform; }
  .collapsible.popout > li.active {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    margin: 16px 0;
    transform: scaleX(1) translate3d(0, 0, 0); }

/* Remove Focus Boxes */
select:focus {
  outline: 1px solid #c9f3ef; }

button:focus {
  outline: none;
  background-color: #2ab7a9; }

label {
  font-size: 0.8rem;
  color: #9e9e9e; }

/***************************
   Text Inputs + Textarea
****************************/
::-webkit-input-placeholder {
  color: #d1d1d1; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #d1d1d1; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #d1d1d1; }

:-ms-input-placeholder {
  color: #d1d1d1; }
/*
input[type=text], input[type=password], input[type=email], input[type=url],
	input[type=time], input[type=date], input[type=datetime-local], input[type=tel],
	input[type=number], input[type=search], textarea.materialize-textarea {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #9e9e9e;
	border-radius: 0;
	outline: none;
	height: 3rem;
	width: 100%;
	font-size: 1rem;
	margin: 0 0 15px 0;
	padding: 0;
	box-shadow: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	transition: all .3s;
}
*/
input[type=text]:disabled, input[type=text][readonly="readonly"],
  input[type=password]:disabled,
  input[type=password][readonly="readonly"],
  input[type=email]:disabled,
  input[type=email][readonly="readonly"],
  input[type=url]:disabled,
  input[type=url][readonly="readonly"],
  input[type=time]:disabled,
  input[type=time][readonly="readonly"],
  input[type=date]:disabled,
  input[type=date][readonly="readonly"],
  input[type=datetime-local]:disabled,
  input[type=datetime-local][readonly="readonly"],
  input[type=tel]:disabled,
  input[type=tel][readonly="readonly"],
  input[type=number]:disabled,
  input[type=number][readonly="readonly"],
  input[type=search]:disabled,
  input[type=search][readonly="readonly"],
  textarea.materialize-textarea:disabled,
  textarea.materialize-textarea[readonly="readonly"] {
    color: rgba(0, 0, 0, 0.26);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26); }
  input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label,
  input[type=password]:disabled + label,
  input[type=password][readonly="readonly"] + label,
  input[type=email]:disabled + label,
  input[type=email][readonly="readonly"] + label,
  input[type=url]:disabled + label,
  input[type=url][readonly="readonly"] + label,
  input[type=time]:disabled + label,
  input[type=time][readonly="readonly"] + label,
  input[type=date]:disabled + label,
  input[type=date][readonly="readonly"] + label,
  input[type=datetime-local]:disabled + label,
  input[type=datetime-local][readonly="readonly"] + label,
  input[type=tel]:disabled + label,
  input[type=tel][readonly="readonly"] + label,
  input[type=number]:disabled + label,
  input[type=number][readonly="readonly"] + label,
  input[type=search]:disabled + label,
  input[type=search][readonly="readonly"] + label,
  textarea.materialize-textarea:disabled + label,
  textarea.materialize-textarea[readonly="readonly"] + label {
    color: rgba(0, 0, 0, 0.26); }
  input[type=text]:focus:not([readonly]),
  input[type=password]:focus:not([readonly]),
  input[type=email]:focus:not([readonly]),
  input[type=url]:focus:not([readonly]),
  input[type=time]:focus:not([readonly]),
  input[type=date]:focus:not([readonly]),
  input[type=datetime-local]:focus:not([readonly]),
  input[type=tel]:focus:not([readonly]),
  input[type=number]:focus:not([readonly]),
  input[type=search]:focus:not([readonly]),
  textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #26a69a;
    box-shadow: 0 1px 0 0 #26a69a; }
  input[type=text]:focus:not([readonly]) + label,
  input[type=password]:focus:not([readonly]) + label,
  input[type=email]:focus:not([readonly]) + label,
  input[type=url]:focus:not([readonly]) + label,
  input[type=time]:focus:not([readonly]) + label,
  input[type=date]:focus:not([readonly]) + label,
  input[type=datetime-local]:focus:not([readonly]) + label,
  input[type=tel]:focus:not([readonly]) + label,
  input[type=number]:focus:not([readonly]) + label,
  input[type=search]:focus:not([readonly]) + label,
  textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #26a69a; }
  input[type=text].valid, input[type=text]:focus.valid,
  input[type=password].valid,
  input[type=password]:focus.valid,
  input[type=email].valid,
  input[type=email]:focus.valid,
  input[type=url].valid,
  input[type=url]:focus.valid,
  input[type=time].valid,
  input[type=time]:focus.valid,
  input[type=date].valid,
  input[type=date]:focus.valid,
  input[type=datetime-local].valid,
  input[type=datetime-local]:focus.valid,
  input[type=tel].valid,
  input[type=tel]:focus.valid,
  input[type=number].valid,
  input[type=number]:focus.valid,
  input[type=search].valid,
  input[type=search]:focus.valid,
  textarea.materialize-textarea.valid,
  textarea.materialize-textarea:focus.valid {
    border-bottom: 1px solid #4CAF50;
    box-shadow: 0 1px 0 0 #4CAF50; }
  input[type=text].invalid, input[type=text]:focus.invalid,
  input[type=password].invalid,
  input[type=password]:focus.invalid,
  input[type=email].invalid,
  input[type=email]:focus.invalid,
  input[type=url].invalid,
  input[type=url]:focus.invalid,
  input[type=time].invalid,
  input[type=time]:focus.invalid,
  input[type=date].invalid,
  input[type=date]:focus.invalid,
  input[type=datetime-local].invalid,
  input[type=datetime-local]:focus.invalid,
  input[type=tel].invalid,
  input[type=tel]:focus.invalid,
  input[type=number].invalid,
  input[type=number]:focus.invalid,
  input[type=search].invalid,
  input[type=search]:focus.invalid,
  textarea.materialize-textarea.invalid,
  textarea.materialize-textarea:focus.invalid {
    border-bottom: 1px solid #F44336;
    box-shadow: 0 1px 0 0 #F44336; }

.input-field {
  position: relative;
  margin-top: 1rem; }
  .input-field label {
    color: #9e9e9e;
    position: absolute;
    top: 0.8rem;
    left: 0.75rem;
    font-size: 1rem;
    cursor: text;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out; }
  .input-field label.active {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    -moz-transform: translateY(-140%);
    -ms-transform: translateY(-140%);
    -o-transform: translateY(-140%);
    transform: translateY(-140%); }
  .input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -o-transition: color 0.2s;
    -ms-transition: color 0.2s;
    transition: color 0.2s; }
    .input-field .prefix.active {
      color: #26a69a; }
  .input-field .prefix ~ input,
  .input-field .prefix ~ textarea {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem); }
  .input-field .prefix ~ textarea {
    padding-top: .8rem; }
  .input-field .prefix ~ label {
    margin-left: 3rem; }
  @media only screen and (max-width: 992px) {
    .input-field .prefix ~ input {
      width: 86%;
      width: calc(100% - 3rem); } }
  @media only screen and (max-width: 600px) {
    .input-field .prefix ~ input {
      width: 80%;
      width: calc(100% - 3rem); } }

.input-field input[type=search] {
  display: block;
  line-height: inherit;
  padding-left: 4rem;
  width: calc(100% - 4rem); }
  .input-field input[type=search]:focus {
    background-color: #FFF;
    border: 0;
    box-shadow: none;
    color: #444; }
    .input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close {
      color: #444; }
  .input-field input[type=search] + label {
    left: 1rem; }
  .input-field input[type=search] ~ .mdi-navigation-close {
    position: absolute;
    top: 0;
    right: 1rem;
    color: transparent;
    cursor: pointer;
    font-size: 2rem;
    transition: .3s color; }

textarea {
  width: 100%;
  height: 3rem;
  background-color: transparent; }
  textarea.materialize-textarea {
    overflow-y: hidden;
    /* prevents scroll bar flash */
    padding: 1.6rem 0;
    /* prevents text jump on Enter keypress */
    resize: none;
    min-height: 3rem; }

.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem;
  /* prevents text jump on Enter keypress */ }

/***************
  Radio Buttons
***************/
/* Remove default Radio Buttons */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  visibility: hidden; }

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-transition: 0.28s ease;
  -moz-transition: 0.28s ease;
  -o-transition: 0.28s ease;
  -ms-transition: 0.28s ease;
  transition: 0.28s ease;
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */ }

[type="radio"] + label:before,
[type="radio"] + label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  -webkit-transition: 0.28s ease;
  -moz-transition: 0.28s ease;
  -o-transition: 0.28s ease;
  -ms-transition: 0.28s ease;
  transition: 0.28s ease; }

/* Unchecked styles */
[type="radio"]:not(:checked) + label:before {
  border-radius: 50%;
  border: 2px solid #5a5a5a; }

[type="radio"]:not(:checked) + label:after {
  border-radius: 50%;
  border: 2px solid #5a5a5a;
  z-index: -1;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0); }

/* Checked styles */
[type="radio"]:checked + label:before {
  border-radius: 50%;
  border: 2px solid transparent; }

[type="radio"]:checked + label:after {
  border-radius: 50%;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0;
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02); }

/* Radio With gap */
[type="radio"].with-gap:checked + label:before {
  border-radius: 50%;
  border: 2px solid #26a69a; }

[type="radio"].with-gap:checked + label:after {
  border-radius: 50%;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5); }

/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.26); }

[type="radio"]:disabled + label {
  color: rgba(0, 0, 0, 0.26); }

[type="radio"]:disabled:not(:checked) + label:hover:before {
  border-color: rgba(0, 0, 0, 0.26); }

/***************
   Checkboxes
***************/
/* CUSTOM CSS CHECKBOXES */
form p {
  margin-bottom: 10px;
  text-align: left; }

form p:last-child {
  margin-bottom: 0; }

/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px; }

[type="checkbox"] {
  /* checkbox aspect */ }
  [type="checkbox"] + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -khtml-user-select: none;
    /* webkit (konqueror) browsers */
    -ms-user-select: none;
    /* IE10+ */ }
  [type="checkbox"] + label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 2px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s; }
  [type="checkbox"]:not(:checked):disabled + label:before {
    border: none;
    background-color: rgba(0, 0, 0, 0.26); }

[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #26a69a;
  border-bottom: 2px solid #26a69a;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }
[type="checkbox"]:checked:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  border-bottom: 2px solid rgba(0, 0, 0, 0.26); }

/* Indeterminate checkbox */
[type="checkbox"]:indeterminate + label:before {
  left: -10px;
  top: -11px;
  width: 10px;
  height: 22px;
  border-top: none;
  border-left: none;
  border-right: 2px solid #26a69a;
  border-bottom: none;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }
[type="checkbox"]:indeterminate:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  background-color: transparent; }

[type="checkbox"].filled-in + label:after {
  border-radius: 2px; }
[type="checkbox"].filled-in + label:before,
[type="checkbox"].filled-in + label:after {
  content: '';
  left: 0;
  position: absolute;
  /* .1s delay is for check animation */
  transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
  z-index: 1; }
[type="checkbox"].filled-in:not(:checked) + label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 20% 40%;
  transform-origin: 100% 100%; }
[type="checkbox"].filled-in:not(:checked) + label:after {
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid #5a5a5a;
  top: 0px;
  z-index: 0; }
[type="checkbox"].filled-in:checked + label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }
[type="checkbox"].filled-in:checked + label:after {
  top: 0px;
  width: 20px;
  height: 20px;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0; }
[type="checkbox"].filled-in:disabled:not(:checked) + label:before {
  background-color: transparent;
  border: 2px solid transparent; }
[type="checkbox"].filled-in:disabled:not(:checked) + label:after {
  border-color: transparent;
  background-color: #BDBDBD; }
[type="checkbox"].filled-in:disabled:checked + label:before {
  background-color: transparent; }
[type="checkbox"].filled-in:disabled:checked + label:after {
  background-color: #BDBDBD;
  border-color: #BDBDBD; }

/***************
     Switch
***************/
.switch,
.switch * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none; }

.switch label {
  cursor: pointer; }

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0; }

.switch label input[type=checkbox]:checked + .lever {
  background-color: #84c7c1; }

.switch label input[type=checkbox]:checked + .lever:after {
  background-color: #26a69a; }

.switch label .lever {
  content: "";
  display: inline-block;
  position: relative;
  width: 40px;
  height: 15px;
  background-color: #818181;
  border-radius: 15px;
  margin-right: 10px;
  transition: background 0.3s ease;
  vertical-align: middle;
  margin: 0 16px; }

.switch label .lever:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: #F1F1F1;
  border-radius: 21px;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  left: -5px;
  top: -3px;
  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; }

input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1); }

input[type=checkbox]:not(:disabled) ~ .lever:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08); }

.switch label input[type=checkbox]:checked + .lever:after {
  left: 24px; }

.switch input[type=checkbox][disabled] + .lever {
  cursor: default; }

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
  background-color: #BDBDBD; }

/***************
  Select Field
***************/
.select-label {
  position: absolute; }

.select-wrapper {
  position: relative; }
  .select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0;
    display: block; }
  .select-wrapper .mdi-navigation-arrow-drop-down {
    color: initial;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 23px; }
    .select-wrapper .mdi-navigation-arrow-drop-down.disabled {
      color: rgba(0, 0, 0, 0.26); }
  .select-wrapper + label {
    position: absolute;
    top: -14px;
    font-size: 0.8rem; }

select {
  display: none; }

select.browser-default {
  display: block; }

select:disabled {
  color: rgba(0, 0, 0, 0.3); }

.select-wrapper input.select-dropdown:disabled {
  color: rgba(0, 0, 0, 0.3);
  cursor: default;
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -ms-user-select: none;
  /* IE10+ */
  border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

.select-wrapper i {
  color: rgba(0, 0, 0, 0.3); }

.select-dropdown li.disabled {
  color: rgba(0, 0, 0, 0.3);
  background-color: transparent; }

/*********************
      File Input
**********************/
.file-field {
  position: relative; }
  .file-field input.file-path {
    margin-left: 100px;
    width: calc(100% - 100px); }
  .file-field .btn, .file-field .btn-large, .file-field .pricing-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 3rem;
    line-height: 3rem; }
  .file-field span {
    cursor: pointer; }
  .file-field input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0); }

/***************
      Range
***************/
.range-field {
  position: relative; }

input[type=range], input[type=range] + .thumb {
  cursor: pointer; }

input[type=range] {
  position: relative;
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
  margin: 15px 0px;
  padding: 0; }

input[type=range] + .thumb {
  position: absolute;
  border: none;
  height: 0;
  width: 0;
  border-radius: 50%;
  background-color: #26a69a;
  top: 10px;
  margin-left: -6px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); }
  input[type=range] + .thumb .value {
    display: block;
    width: 30px;
    text-align: center;
    color: #26a69a;
    font-size: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg); }
  input[type=range] + .thumb.active {
    border-radius: 50% 50% 50% 0; }
    input[type=range] + .thumb.active .value {
      color: #fff;
      margin-left: -1px;
      margin-top: 8px;
      font-size: 10px; }

input[type=range]:focus {
  outline: none; }

input[type=range] {
  -webkit-appearance: none; }

input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background: #c2c0c2;
  border: none; }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: #26a69a;
  transform-origin: 50% 50%;
  margin: -5px 0 0 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s; }

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc; }

input[type=range] {
  /* fix for FF unable to apply focus style bug  */
  border: 1px solid white;
  /*required for proper track sizing in FF*/ }

input[type=range]::-moz-range-track {
  height: 3px;
  background: #ddd;
  border: none; }

input[type=range]::-moz-range-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #26a69a;
  margin-top: -5px; }

/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px; }

input[type=range]:focus::-moz-range-track {
  background: #ccc; }

input[type=range]::-ms-track {
  height: 3px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent; }

input[type=range]::-ms-fill-lower {
  background: #777; }

input[type=range]::-ms-fill-upper {
  background: #ddd; }

input[type=range]::-ms-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #26a69a; }

input[type=range]:focus::-ms-fill-lower {
  background: #888; }

input[type=range]:focus::-ms-fill-upper {
  background: #ccc; }

/***************************
   Text Inputs + Textarea
****************************/
select {
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  padding: 5px;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  height: 3rem; }

.side-nav {
  position: fixed;
  width: 240px;
  left: -105%;
  top: 0;
  margin: 0;
  height: 100%;
  height: calc(100% + 60px);
  height: -moz-calc(100%);
  padding-bottom: 60px;
  background-color: #FFF;
  z-index: 999;
  overflow-y: auto;
  will-change: left; }
  .side-nav.right-aligned {
    will-change: right;
    right: -105%;
    left: auto; }
  .side-nav .collapsible {
    margin: 0; }
  .side-nav li {
    float: none;
    padding: 0 15px; }
    .side-nav li:hover, .side-nav li.active {
      background-color: #ddd; }
  .side-nav a {
    color: #444;
    display: block;
    font-size: 1rem;
    height: 64px;
    line-height: 64px;
    padding: 0 15px; }

.drag-target {
  height: 100%;
  width: 10px;
  position: fixed;
  top: 0;
  z-index: 998; }

.side-nav.fixed a {
  display: block;
  padding: 0 15px;
  color: #444; }

.side-nav.fixed {
  left: 0;
  position: fixed; }
  .side-nav.fixed.right-aligned {
    right: 0;
    left: auto; }

@media only screen and (max-width: 992px) {
  .side-nav.fixed {
    left: -105%; }
    .side-nav.fixed.right-aligned {
      right: -105%;
      left: auto; } }
.side-nav .collapsible-body li.active,
.side-nav.fixed .collapsible-body li.active {
  background-color: #ee6e73; }
  .side-nav .collapsible-body li.active a,
  .side-nav.fixed .collapsible-body li.active a {
    color: #fff; }

#sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 997;
  will-change: opacity; }

/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px; }
  .preloader-wrapper.small {
    width: 36px;
    height: 36px; }
  .preloader-wrapper.big {
    width: 64px;
    height: 64px; }
  .preloader-wrapper.active {
    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite; }

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg); } }
@keyframes container-rotate {
  to {
    transform: rotate(360deg); } }
.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0; }

.spinner-blue,
.spinner-blue-only {
  border-color: #4285f4; }

.spinner-red,
.spinner-red-only {
  border-color: #db4437; }

.spinner-yellow,
.spinner-yellow-only {
  border-color: #f4b400; }

.spinner-green,
.spinner-green-only {
  border-color: #0f9d58; }

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-red {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-green {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
  /* durations: 4 * ARCTIME */
  opacity: 1;
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg); }
  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg); }
  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg); }
  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg); }
  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg); }
  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg); }
  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg); }
  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg); }
  /* 4   * ARCSIZE */ }
@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg); }
  /* 0.5 * ARCSIZE */
  25% {
    transform: rotate(270deg); }
  /* 1   * ARCSIZE */
  37.5% {
    transform: rotate(405deg); }
  /* 1.5 * ARCSIZE */
  50% {
    transform: rotate(540deg); }
  /* 2   * ARCSIZE */
  62.5% {
    transform: rotate(675deg); }
  /* 2.5 * ARCSIZE */
  75% {
    transform: rotate(810deg); }
  /* 3   * ARCSIZE */
  87.5% {
    transform: rotate(945deg); }
  /* 3.5 * ARCSIZE */
  to {
    transform: rotate(1080deg); }
  /* 4   * ARCSIZE */ }
@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1; }
  25% {
    opacity: 1; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }
@keyframes blue-fade-in-out {
  from {
    opacity: 1; }
  25% {
    opacity: 1; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }
@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0; }
  15% {
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  51% {
    opacity: 0; } }
@keyframes red-fade-in-out {
  from {
    opacity: 0; }
  15% {
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  51% {
    opacity: 0; } }
@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 1; }
  75% {
    opacity: 1; }
  76% {
    opacity: 0; } }
@keyframes yellow-fade-in-out {
  from {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 1; }
  75% {
    opacity: 1; }
  76% {
    opacity: 0; } }
@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0; }
  65% {
    opacity: 0; }
  75% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes green-fade-in-out {
  from {
    opacity: 0; }
  65% {
    opacity: 0; }
  75% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }

.gap-patch .circle {
  width: 1000%;
  left: -450%; }

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }
  .circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    /* STROKEWIDTH */
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; }
  .circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
    transform: rotate(129deg); }
  .circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
    transform: rotate(-129deg); }

.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg); } }
@keyframes left-spin {
  from {
    transform: rotate(130deg); }
  50% {
    transform: rotate(-5deg); }
  to {
    transform: rotate(130deg); } }
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg); } }
@keyframes right-spin {
  from {
    transform: rotate(-130deg); }
  50% {
    transform: rotate(5deg); }
  to {
    transform: rotate(-130deg); } }
#spinnerContainer.cooldown {
  /* duration: SHRINK_TIME */
  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); }

@-webkit-keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
/* Overrides */
.modal.modal-fixed-footer .modal-content {
  position: relative; }

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #ffffff;
  }

main {
  flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300; }

img.responsive {
  width: 100%; }

.relative {
  position: relative; }

.italic {
  font-style: italic; }

.bold {
  font-weight: bold; }

.serif {
  font-family: "Times New Roman", serif; }

.underline {
  text-decoration: underline; }

.btn-link {
  color: #039be5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border: none;
  padding: 0px; }

.btn-link:focus, .btn-link:active {
  background-color: transparent;
  border: none;
  padding: 0px; }

.btn.disabled, .disabled.btn-large, .disabled.pricing-button {
  opacity: 0.5; }

.nav-wrapper {
  padding: 0px; }

.narrow-row {
  max-width: 700px;
  margin-left: auto !important;
  margin-right: auto !important; }

.tab-header > i {
  top: 5px;
  position: relative;
  font-size: 160%;
  margin-left: 5px;
  margin-right: 5px; }

.tab-header > span {
  position: relative;
  margin-top: 5px; }

.tab-header.active span {
  display: inline-block !important; }

@media only screen and (max-width: 601px) {
  .tab-header.active > i {
    display: none; } }
#header-tabs {
  position: absolute;
  z-index: 100;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px #d0d0d0;
  padding-top: 6px; }

#top-spacer-for-small {
  height: 116px; }

#header-desktop-tabs {
  position: fixed;
  z-index: 100;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px #d0d0d0;
  min-height: 60px;
  line-height: 60px; }

#header-logo {
  position: relative;
  top: 5px;
  width: 32px;
  height: 32px; }

#header-logo-top {
  position: relative;
  top: 9px;
  left: 3px;
  width: 32px;
  height: 32px; }

#header-text {
  font-size: 1.3rem; }

#header-tabs-container {
  margin-top: 6px;
  margin-bottom: 15px; }

#header-list-name {
  position: relative;
  margin-left: 6px;
  top: 0px;
  font-size: 140%;
  line-height: 1.4em; }

#header-list-address {
  position: relative;
  margin-left: 3px; }

#header-mobile-links {
  top: 35px;
  position: relative;
  max-width: 370px;
  margin-left: auto;
  margin-right: auto; }

#header-mobile-links > div > a {
  color: #039be5;
  padding: 12px 24px; }

#header-mobile-links > div > a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

#header-mobile {
  margin: 25px 0px 25px 0px; }

#header-mobile-text {
  margin-left: 40px;
  line-height: 1.8em; }

#header-mobile-logo-top {
  position: relative;
  width: 32px;
  height: 32px;
  top: 1px; }

#header-mobile-list-name {
  font-size: 160%; }

#header-mobile-logout {
  position: relative;
  top: -48px;
  left: 10px;
  padding: 10px; }

.container-narrow {
  max-width: 1000px; }

@media only screen and (min-width: 960px) {
  .flow-text {
    font-size: 1.56rem; } }
.divider-big {
  margin: 8rem 0rem; }

/* Title */
.main-title {
  margin: 3rem 0rem 2rem 0rem; }



/* login-modal */
#login-modal {
  max-width: 500px; }

#login-button-panel {
  position: relative; }

#login-preloader {
  position: absolute;
  margin-left: 10px; }

#login-failed-panel {
  margin-top: 10px; }

.connect-btn {
  height: auto;
  min-width: 140px;
  padding: 0px;
  margin: 4px 0px; }

@media only screen and (min-width: 600px) {
  .connect-btn {
    height: auto;
    min-width: 140px;
    padding: 10px 40px;
    margin: 10px 10px; } }
.modal .modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

.button-google {
  color: white;
  background: #dd4b39; }

.button-google:hover {
  background: #f44d3c; }

.button-windows {
  color: white;
  background: #00bcf2; }

.button-windows:hover {
  background: #00c1f9; }

.button-facebook {
  color: white;
  background: #3b5998; }

.button-facebook:hover {
  background: #4072b6; }

@media only screen and (min-width: 600px) {
  .settings-label {
    text-align: right; } }
.settings-radio-label {
  margin-top: 16px; }

.settings-label-text {
  margin-top: 16px; }

.settings-label-readonly-value {
  margin-top: 16px; }

.settings-label-edit-value {
  margin-top: 5px; }

.settings-edit-save {
  margin-right: 15px; }

.manage-header-container {
  margin: 12px 0px 20px; }

.manage-title {
  font-size: 1.6em; }

#manage-list-name {
  line-height: 1.1em;
  transition-duration: 100ms;
  margin: 0px; }

#manage-list-email {
  line-height: 1.1em;
  transition-duration: 100ms;
  margin: 4px 0px; }

.main-title-email-link > i {
  opacity: 0.0;
  color: #039be5;
  transition-duration: 200ms;
  width: 0px;
  position: relative;
  top: -12px;
  left: -29px;
  display: inline-block; }

.main-title-email-link:hover > i {
  opacity: 1.0;
  top: 5px; }

@media only screen and (min-width: 600px) {
  .manage-title {
    font-size: 1.8em; }

  .main-title-email-link > i {
    top: -12px;
    left: -37px; }

  .main-title-email-link:hover > i {
    top: 6px; } }
@media only screen and (min-width: 992px) {
  .manage-title {
    font-size: 2.0em; }

  .main-title-email-link > i {
    top: -12px;
    left: -47px; }

  .main-title-email-link:hover > i {
    top: 7px; } }
.tab-top-text {
  text-align: center;
  margin: 1.5rem 0rem 0rem 0rem; }

.tab-top-text > .card {
  display: inline-block; }

.main-title-email-link {
  color: black;
  padding-bottom: 16px;
  border-bottom: 1px solid transparent;
  transition-duration: 200ms; }

.main-title-email-link:hover {
  color: #039be5;
  padding-bottom: 0px;
  border-bottom: 1px solid #039be5; }

.card-centered {
  display: inline-block; }

.card-centered > .card-content {
  padding: 20px 40px; }

.page-header {
  margin: 4rem 0rem; }

#login-btn {
  min-width: 200px; }

/* or divider */
.vertical-or {
  position: absolute;
  top: calc(50% - 23px);
  left: -11px;
  background: #ffffff;
  padding: 10px 0px;
  color: #9e9e9e; }

.or-divider {
  border-top: 1px solid #e0e0e0;
  color: #9e9e9e;
  text-align: center;
  margin: 2rem 0rem; }

.or-divider > span {
  position: relative;
  top: -10px;
  background: #ffffff;
  padding: 0px 10px; }

@media only screen and (min-width: 600px) {
  .right-or-column {
    border-left: 1px solid #e0e0e0;
    position: relative; } }

body {
  overflow-y: scroll;
  }

.container {
  padding: 0 0.5rem; }

#header-desktop-title {
  height: 0px;
  font-size: 1.4em;
  padding: 0px 80px 0px 40px;
  line-height: 1.3em;
  top: 19px;
  position: relative; }

.centered-header-logo {
  width: 32px;
  height: 32px;
  position: relative;
  top: 9px; }

#desktop-brand-logo > img {
  position: relative;
  top: 5px;
  width: 32px;
  height: 32px; }

/* Footer navigation */
#footer-navigation {
  position: fixed;
  bottom: 0px;
  z-index: 100;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px #c0c0c0;
  height: 60px;
  line-height: 60px; }

main {
  position: relative; }

@media only screen and (min-width: 993px) {
  #side-navigation-container.container {
    width: 85%; } }
#main-content {
  position: relative;
  padding-left: 240px; }

@media only screen and (min-width: 993px) {
  #main-content {
    padding-top: 74px;
    } }
@media only screen and (max-width: 992px) {
  #main-content {
    padding-left: 0; } }
#side-navigation-container {
 width: 100%;
    position: fixed;
    left: 154px;
    top: 164px;
    height: 100%;
    z-index: 99;
    pointer-events: none; }

#side-navigation {
  position: absolute;
  width: 210px;
  padding: 60px 0px;
  pointer-events: auto;
  text-align: center; }

#send-button {
  margin: 66px 0px 46px; }

#side-navigation li {
  text-align: center;
  line-height: 48px;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 10px 0px; }

#side-navigation li > a {
  color: #ee6e73 !important;
  padding: 10px 24px 10px 15px;
  border-bottom: 2px solid white;
  transition-duration: 200ms; }

#side-navigation li i {
  top: 5px;
  position: relative;
  font-size: 160%;
  margin-right: 5px; }

#side-navigation a.tab-header.active {
  padding: 0px 24px 8px 15px;
  border-bottom: 2px solid #f6b2b5; }

#manage-list-address-title {
  text-transform: uppercase; }

#manage-list-address {
  font-weight: 100; }

.tab-content {
  margin: 0px 0px; }

.tab-content-heading {
  color: #ee6e73;
  text-transform: uppercase; }

.tab-content-heading > i {
  margin-right: 6px;
  font-size: 120%;
  position: relative;
  top: 4px; }

/* Members table */
#members table tr > td:nth-child(4) {
  text-align: center; }

#email-column-header {
  width: 40%; }

#name-column-header {
  width: 40%; }

#actions-column-header {
  width: 20%; }

@media only screen and (min-width: 993px) {
  #actions-column-header {
    min-width: 200px; } }
.table-action {
  margin: 0px 10px; }

#members-new-section {
  margin-top: 1rem; }

#member-import-export-actions > a {
  margin: 0px 10px; }

.member-status {
  font-size: 135%;
  position: relative;
  display: block;
  height: 0px;
  left: -26px;
  font-weight: bold;
  top: -4px;
  width: 20px;
  text-align: center; }

.member-delivery-status {
  font-size: 135%;
  position: relative;
  display: block;
  height: 0px;
  left: -26px;
  font-weight: bold;
  top: -6px;
  width: 20px;
  text-align: center; }

.member-blocked-technical-label {
  min-width: 120px;
  display: inline-block; }

/* Messages */
#message-list > .collection-item {
  cursor: pointer; }

.search-clear-search {
  position: absolute;
  right: -20px;
  top: -3px;
  font-size: 160%;
  opacity: 0.2;
  transition-duration: 200ms;
  cursor: pointer;
  padding: 10px; }

.search-clear-search:hover {
  opacity: 1.0; }

#messages-query-found > p > span {
  font-weight: 400; }

.member-table-header-button {
  position: relative;
  top: 14px; }

#members-count {
  position: relative;
  top: 21px; }

#members-column-header {
  width: 100%; }

.member-status-column {
  padding: 0px 12px; }

#add-member-button, #member-cancel-add-member-button {
  width: 120px;
  margin: 4px 10px; }

.full-width-modal {
  width: 70%;
  height: 70%;
  max-height: 80%; }

@media only screen and (max-width: 992px) {
  .full-width-modal {
    width: 90%;
    height: 80%;
    max-height: 80%; } }
@media only screen and (max-width: 601px) {
  .full-width-modal {
    width: 100%;
    height: 80%;
    max-height: 80%; } }
.message-blank-slate-quote {
  font-size: 100%;
  max-width: 510px;
  margin-left: auto;
  margin-right: auto; }

#view-message-modal .modal-footer .btn, #view-message-modal .modal-footer .btn-large, #view-message-modal .modal-footer .pricing-button {
  min-width: 216px; }

.message-body-container {
  background: white;
  padding: 0px !important;
  -webkit-overflow-scrolling: touch; }

.message-attachment-icon {
  display: block;
  width: 0px;
  height: 0px;
  position: relative;
  left: -16px;
  top: -1px; }

.message-from {
  width: 25%;
  display: inline-block;
  padding-right: 10px; }

.message-subject {
  display: inline-block;
  width: calc(75% - 70px); }

.message-preloader {
  margin: 60px 0px; }

.message-frame {
  border: none;
  width: calc( 100% - 40px);
  margin: 20px; }

.open-message-header {
  margin: 20px 20px 0px 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0; }

.open-message-header > div {
  padding: 4px 0px; }

.open-message-label {
  text-align: left;
  width: 90px;
  display: inline-block; }

.open-message-value {
  margin-left: 10px; }

.open-message-attachment-value {
  margin-left: 8px; }

.pagination {
  display: inline-block; }

/* Delivery Report */
#delivery-report-view {
  margin: 0px 20px 20px 20px; }

#delivery-report-view td > i {
  font-size: 200%; }

/* Delivery Report For Member */
#delivery-report-for-member-view {
  margin: 0px 20px 20px 20px; }

/* Settings */
#settings-custom-domain-edit-container {
  margin-top: 20px; }

#settings-email {
  border: 1px solid #e0e0e0;
  text-align: left;
  padding: 15px; }

#settings-email-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0; }

.settings-email-field {
  padding: 4px 0px; }

.settings-email-field > span:nth-child(1) {
  min-width: 65px;
  display: inline-block; }

#settings-email-body {
  padding: 20px 0px; }

#settings-custom-footer-card {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto; }

.payment-button {
  height: auto;
  font-size: 1.3rem;
  line-height: 2rem;
  text-transform: none;
  padding: 0px;
  margin: 10px 0px; }

.payment-button > div {
  border: 1px solid white;
  padding: 20px 40px;
  margin: 4px; }

/* Bulk members */
#bulk-members-modal.modal .modal-footer {
  height: auto; }

#bulk-members-textarea {
  height: 10rem !important;
  padding: 0rem 0rem;
  overflow-y: auto; }

.members-table-small-cell-item {
  margin: 8px 0px; }

#expired-card > .card {
  box-shadow: none;
  border: 1px solid #ffecb3; }

#blankSlateModel {
  max-width: 570px; }

#messages-blank-slate .card {
  max-width: 680px; }

#blank-slate-title {
  font-size: 210%;
  line-height: 145%;
  font-weight: 300; }

/* Member */
#unsent-messages {
  color: #9e9e9e; }