/*
 * Globals
 */

body{ font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6{ font-weight:600; }
h1{ font-size:2rem; }
h1 small{ font-size:60%; display:block; text-transform:uppercase; }
h1 span{ display:block; }
h2{ font-size:1.75rem; }
h3{ font-size:1.5rem; }
h4{ font-size:1.25rem; }
h5,h6{ font-size:1.15rem; }
h2,h3,h4,h5,h6{ color:#231f20; }
p { line-height: 2rem; }
strong{ font-weight:600; }
.section{ padding-top:3rem; padding-bottom:3rem; padding-left: 1rem; padding-right: 1rem; }

a,
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating){ color:rgba(123,123,123,1); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
a:hover,
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover{ color:rgba(123,123,123,.7); }

a.btn,
a.white-text{ color:rgba(255,255,255,1) !important; transition:color 0.5s ease; }
a.btn:hover,
a.white-text:hover{ color:rgba(255,255,255,.7) !important; }

.btn-large{ font-size:24px; }

a.grey-text{ color:rgba(158,158,158,1) !important; transition:color 0.5s ease; }
a.grey-text:hover{ color:rgba(158,158,158,.7) !important; }

hr{ border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); }

.tcslogo{ max-width:200px; }

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

.no-margin-top{ margin-top:0; }
.no-margin-bottom{ margin-bottom:0; }

.mb-15{ margin-bottom:-15px; }
.mt10{ margin-top:10px; }
.mb10{ margin-bottom:10px; }
.mr10{ margin-right:10px; }
.mbr10{ margin-bottom:10px; margin-right:10px; }
.mtb10{ margin-bottom:10px; margin-top:10px; }
.mt20{ margin-top:20px; }
.mb20{ margin-bottom:20px; }
.mr20{ margin-right:20px; }
.mbr20{ margin-bottom:20px; margin-right:20px; }
.mtb20{ margin-bottom:20px; margin-top:20px; }
.mt40{ margin-top:40px; }
.mb40{ margin-bottom:40px; }
.ml20{ margin-left:20px; }
.ml40{ margin-left:40px; }
.mr40{ margin-right:40px; }
.mt60{ margin-top:60px; }
.mb60{ margin-bottom:60px; }
.mt80{ margin-top:80px; }
.mb80{ margin-bottom:80px; }
.mt100{ margin-top:100px; }
.mb100{ margin-bottom:100px; }
.mt120{ margin-top:120px; }
.mb120{ margin-bottom:120px; }
.ml-100{ margin-left:-100px;}

.p10{ padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; }
.p20{ padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; }
.p40{ padding-top:40px; padding-right:40px; padding-bottom:40px; padding-left:40px; }
.pt10{ padding-top:10px; }
.pb10{ padding-bottom:10px; }
.ptb10{ padding-top:10px; padding-bottom:10px; }
.plr10{ padding-left:10px; padding-right:10px; }
.pt20{ padding-top:20px; }
.pb20{ padding-bottom:20px; }
.ptb20{ padding-top:20px; padding-bottom:20px; }
.pbrl20{ padding-bottom:20px; padding-right:20px; padding-left:20px; }
.pl20{ padding-left:20px; }
.pr20{ padding-right:20px; }
.pr40{ padding-right:40px; }
.pb40{ padding-bottom:40px; }
.pt40{ padding-top:40px; }
.pt60{ padding-top:60px; }
.pb60{ padding-bottom:60px; }
.pt80{ padding-top:80px; }
.pb80{ padding-bottom:80px; }
.pt100{ padding-top:100px; }
.pb100{ padding-bottom:100px; }

.relative{ position:relative; }
.inline{ display:inline-block; }
.block{ display:block; }
.button-collapse { color: #26a69a; }
.icon-shadow{ text-shadow: 0 4px 5px rgba(255,255,255,0.14), 0 1px 10px rgba(255,255,255,0.12), 0 2px 4px rgba(255,255,255,0.3); }

big{ line-height:2.1rem; font-weight:300; font-size:1.5rem;  display:block; }

blockquote{ border-color:#8bc34a; }
blockquote small{ display:block; font-style:italic; color:#9E9E9E; }

.uppercase{ text-transform:uppercase; }
.capitalize{ text-transform:capitalize; }

.main-header{ background-color:#e0483b; }

.rounded{ border-radius:4px 4px 4px 4px; }
.rounded-blr{ border-radius:0 0 4px 4px; }
.rounded-bl{ border-radius:0 0 0 4px; }
.rounded-br{ border-radius:0 0 4px  0; }
.rounded-tlr{ border-radius:4px 4px 0 0; }
.rounded-tl{ border-radius:4px 0 0 0; }
.rounded-tr{ border-radius:0 4px 0 0; }


/* inputs/form stuff */

#results #success,
#results #fail{ display:none; }
#results #success .valign-wrapper,
#results #fail .valign-wrapper{ justify-content: center }

input{ color:rgba(51,51,51,1); border-color:rgba(51,51,51,1); !important; }
input:focus{ border-color:rgba(51,51,51,1); !important; }

input:not([type]):focus:not([readonly]),
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 rgba(51,51,51,1); box-shadow: 0 1px 0 0 rgba(51,51,51,1); }

input:not([type]):focus:not([readonly]) + label,
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:rgba(51,51,51,1);  }

input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea{
	border-bottom: 1px solid rgba(51,51,51,.47);
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(51,51,51,.67);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(51,51,51,.67);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(51,51,51,.67);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(51,51,51,.67);
}

/*
 * Outline buttons
 */
.outline.deep-orange.white-text,
.outline.white-text{ border:1px solid rgba(255,255,255,1); background-color:transparent !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.outline.white-text:hover{ border:1px solid rgba(255,255,255,.87); background-color:rgba(255,255,255,.5) !important; }
.outline.deep-orange.white-text:hover{ border:1px solid rgba(254,87,34,.5); background-color:rgba(228,66,60,8) !important; color:rgba(255,255,255,1) !important; }


/*
 * input changing colors
 */
/* label color */
.input-field label { color: rgba(51,51,51,1); }
/* label focus color */
.select-wrapper input.select-dropdown:focus,
.input-field input[type=text]:focus + label { color: rgba(51,51,51,1); }
/* label underline focus color */
.select-wrapper input.select-dropdown:focus,
.input-field input[type=text]:focus { border-bottom: 1px solid rgba(51,51,51,.8); box-shadow: 0 1px 0 0 rgba(51,51,51,1); }
/* valid color */
.select-wrapper input.select-dropdown.valid,
.input-field input[type=text].valid { border-bottom: 1px solid rgba(51,51,51,.8); box-shadow: 0 1px 0 0 rgba(51,51,51,1); }
/* invalid color */
.select-wrapper input.select-dropdown.invalid,
.input-field input[type=text].invalid { border-bottom: 1px solid rgba(51,51,51,.8); box-shadow: 0 1px 0 0 rgba(51,51,51,1); }
/* icon prefix focus color */
.input-field .prefix.active { color: rgba(51,51,51,1); }

label.error,
.input-field input[type=text]:focus + label.error{ color:#F44336; font-weight:bold; font-size:12px; top:3.25rem; transform:none;}

.input-field label.active.error{ transform: none; }

.modal.bottom-sheet{ max-height:90vh; }
.modal.bottom-sheet .modal-footer{ padding:4px 24px !important; }
.modal.bottom-sheet .modal-footer .btn{ margin-left:10px !important; }

.relative{ position:relative; }

/*
 * Homepage
 */
/* home hero area */
.hero{ height:auto; }
.flex.hero {
  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  height:100vh;
  width:100vw;
}

/*
 * Cards
 */
.card .card-top-content{ padding-top:5px; padding-bottom:5px; padding-left:20px; }
.card .card-top-content .card-title{ font-weight:300; }

.products .card .card-image{ padding:20px 10px; }
.products .card .card-image img{ max-width:295px; margin:0 auto; }

.product-types .card .card-image img{ max-width:175px; margin:0 auto; padding-top:20px; }


/*
 * Footer Area
 */

/* footer brands */
footer.page-footer { margin: 0; }
footer.page-footer .footer-copyright ul,
footer.page-footer .footer-copyright ul li{ display:inline-block; }
footer.page-footer .footer-copyright ul li{ margin:0 4px; }

footer .footer-nav a{ }
footer .footer-nav ul a{ font-size:.9rem; }
footer .footer-nav ul li a,
footer .footer-copyright a { color:rgba(255,255,255,.87) !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; padding:12px 15px; }
footer .footer-nav ul li a:hover,
footer .footer-copyright a:hover{ background:transparent; color:rgba(255,255,255,1) !important; }
footer .footer-copyright{ font-size:.875rem; }
footer .footer-copyright a{ padding:12px 2px; font-size:.875rem; }

footer .branding-wrap .logo-title{ margin:20px 0 0 20px; line-height:2.5rem; font-size:2rem; }
.search_area .search-wrapper button{ position:absolute; top:0px; right:10px; cursor: pointer; }
.search_area{ height:200px; padding:20px 0; display: flex; justify-content: center; align-items: center; }


/* desktops */
/* pretty large */
@media only screen and (min-width : 1710px) {

}
/* large */
@media only screen and (min-width : 1500px)  and (max-width : 1710px) {

}

/* little bit large */
@media only screen and (min-width : 1200px) and (max-width : 1500px) {

}

/* not-so-large */
@media only screen and (min-width : 992px) and (max-width : 1200px) {

}

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

}

/* tablets */
@media only screen and (max-width : 992px) {

}

/* phones */
@media only screen and (max-width : 600px) {

}

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

}


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

}
@media only screen and (max-width : 360px) {

}
@media only screen and (max-width : 320px) {

}