@keyframes dropHeader {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideMessage {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fadeHeader {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
/*Global styles*/
*{
    box-sizing: border-box;
}

[class*="col-"] {float: left; padding: 1px;}
#logo {content:url("/static/images/mtrp_logo_mob.png");}
 
.row::after { content: ""; clear: both; display: table;}

body {
    color: #000;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 12px;
    background-color: #e5d9ca;
}

.margin{ background-color: #e5d9ca;}

#watermark {
  width: 100%; height: 100%;
  background-color: white;
  position: fixed;
  pointer-events: none;
  opacity: 0.15;
  font-size: 10em;
  display: flex;
  align-items: center;
  justify-content: centerline-height: 100%;
  -ms-transform: rotate(-30deg); /* IE 9 */ -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */ transform: rotate(-30 deg);
}

section{ width:auto; display: table;}
label{font-weight: bold;}

.heading1{font-size: 18px;color:#997;}

.heading2
{
    font-size: 12px;
    color:#997;
}
.para{font-size: 10px;  color:#997;}

main, #content-main{
    padding: 0;margin: 0;
    background-image: url('/static/images/desktopinterfacebackgroundblue.jpg');
    background-position: -150px, -550px;
    height: auto; min-height: 800px;
    border-radius: 8px;
}

/*---------------------*/
/*Header style elements*/
/*---------------------*/

header{
	background-color: #1d1d1a;
    background: #bb3e3f; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top,#bb3e3f, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #bb3e3f, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #bb3e3f, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #bb3e3f, yellow); /* Standard syntax */
    color: #fff;
    height: 75px; padding: 0;
    vertical-align: middle;
    border-radius: 8px;
}

#comp_logo{ margin: 0; padding: 0;}

#comp_logo img{ width: 70px; height: 70px; padding: 0 0.5em 0 0; margin: 0;}

#title{height: 75px;  }

#assoc_name{ font-size:1.5em; font-style: verdana; font-weight: bold; color: #fff;  margin: 0;}

#school_name { font-size:1.1em; font-style: verdana; font-weight: bold; color: #000; margin-bottom: 0; }

#environment{font-size: 10px; font-family: sans-serif; font-weight: lighter;}

#logged_in_user{font-size: 10px; padding: 1em 0 0 0 ; float:right;}

#logged_in_user input{border-radius: 8px;}
#logged_in_user form {margin: 1em 1em auto auto; }
#logged_in_user input[type="submit"]{background-color: #fff; border: none;}
#logged_in_user button { float: right;margin: auto;}

#logged_in_user p{padding: 0; margin: 0; color:#000;}

#btn_logged_in_user {color: #000; background-color: #fff;margin-top: 1em;	}

/*---------------------*/
/*Message style elements*/
/*---------------------*/
#messages{margin: 0;width:40%;clear:both;}

#messages{ position: absolute;
          margin-left: auto;margin-right: auto;
          top: 0;left: 0;right: 0;
          background-color: #dfd;border-radius: 0 0 20px 20px;}
          
#messages.error{background-color: #fdd;}

#messages.visible{visibility: visible; height: 6em; transition: opacity 0.4s ease-in-out;}

#messages.hidden{opacity: 0;transition: opacity 0.4s ease-in-out;}

.warning{color: #f60;}

.error{color: #f00;}

.success{color: #8f8;}

/*---------------------*/
/*Footer style elements*/
/*---------------------*/
footer{
    background: #eee;
    border-radius: 8px;
    font-size: 1em;
    height: 5%;
    margin: 0 ; padding: 0 1em 0 1em;
}

#facebook a{text-decoration: none;color: #5f5 !important;font-size: 0.7em;}

#email a {text-decoration: none; color: #bb3e3f; font-size: 0.7em;}

#contact_us{
    top:50%;
    height:2em;
    margin-top:0.5em;
    font-variant: small-caps;
    font-size: 1.25em;
}
#facebook a{ color: #5f5;}

#copyright{
    float:right;
    top:50%;
    height:2em;
    margin-top:0.5em
}

input{
    border: none;
}
select{
    border: none;
}
section {
	margin: 1.5em;
}
#home_link{float: left; padding: 5px 0; vertical-align: middle;}

#claim{
    font-size:10px;
    color: #000;
    float:right;  
}

/*---------------*/
/* Login styles  */
/*---------------*/
#login-form{ padding:0; margin:0;}

#login_error_blank {
    background-color: #000;
    height: 100%; width: 100%;
    padding: 30px;
    opacity: 0.8;
    visibility:  visible;
    position: fixed;left: 0;top: 0;
    z-index: 9;
}
#login_error_popup {
    z-index: 10;
    border: 5px solid #666666; border-radius: 0.6em;
    background-color: #eee;
    margin:  0, auto; padding: 15px;
    width: auto; height: auto;
    min-width: 600px;
    opacity: 1.0;
    position: absolute;
    color: black;
    visibility: visible;
}
/*--------------------------------*/
/* Popup/Overlay dialogue styles  */
/*--------------------------------*/
#blank {
    z-index: 9;
    height: 100%;  width: 100%;
    padding: 30px;
    background-color: rgba(54, 24, 24, .8);
 
    visibility:  hidden;
    position: fixed;left: 0; top: 0; 
}

#popup{   z-index: 10;
          border: 5px solid #bb3e37;border-radius: 0.6em;
          background-color:#eee;
          box-shadow: 20px 20px 20px #888888;
          margin-top:  15% ; margin-left: auto; margin-right: auto;
          height: auto;  width: 90%;
          color: black;
           position: relative;
          visibility: hidden;
          -webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 1000ms ease-in 1s; transition: opacity 1000ms  ease-in 1s ;
}
#popup_content{ background-color: #eee;}
#popup_header p, img{
  float:left;
}
#popup_header p{
  width: 60%;
  font-size: 0.8em;
}
#popup_content header{
	height: 50px;
  color: black;
  font-weight: bold;
  background: linear-gradient(to bottom right, #f00, yellow);
}
#popup_content form{padding: 0; background-color: #eee;}

#popup_content  h2{padding: 0 0 0 1em; margin:  0 0 0 1em; background-color: #eee;}

#popup_content h3 {padding: 0.25em; margin:  0.25em; background-color: #eee;}

#popup-close {
    background-image: url("/static/images/close_overlay.png");
    cursor: pointer;
    height: 18px; width: 18px;
    position: absolute;
    right: 7px;top: 7px;
}
#tabs{ z-index: 0;}
#aaa{background-color: #eee;}

label{font-weight: bold;}

.heading1{font-size: 18px;color:#997;}

.heading2
{
    font-size: 12px;
    color:#997;
}
.para{font-size: 10px;  color:#997;}
/*--------------------------------*/
/* Table styles                   */
/*--------------------------------*/
table{ font-size: 12px;  border: 1px black solid; }

thead{ color: #444;  border: solid 1px black;}

tr{ border: solid 1px #888;}

tbody tr:nth-child(odd) {  background-color: #ccc;}

th{background-color: #bb3e37;  color:white;}

#id_email_group{ visibility: hidden;}

.error{ color:#f88; font-size: .8em;}

.fieldWrapper-left.errors  > input, .fieldWrapper-left.errors  >select, .fieldWrapper-left.errors  > textarea{
  border-color: #f88;
  }


#frm_show_event{ background-color: #fff; border: double, thick, black;}

.jqte{margin: 10 0;}

p{ margin: 10 0 0 0;
  background-color: #f1f2f3;background: rgb(f1, f2, f3); background: rgba(54, 25, 25, 0); }

.time_input{	width: 50px;}

.errorlist{	font-size: 0.8em;	color: #f66;	list-style-type: none;}

.error input, .error select { border: 2px red solid;}

input, select{ border:1px solid #ddd;}

#associated_docs{	border: 1px solid;	background-color: #ddd;}

.custom_jqte_tool{
	background: rgba(0, 0, 0, 0) url("/static/images/photo_upload.jpg") no-repeat scroll 0 0;
  display: block;
  height: 22px; width: 22px;
}

span {display: inline;} 
#frm_sign_up{
  margin: 5px; padding:  1px; 
	float:right;
	background-color: rgba(ff,ff,ff, 0);
}

#email_sign_up {
	background-color: #bb3e37;
	border: none; border-radius: 4px; margin: auto;
	color: white;
	font-weight: bolder;font-size: 1.2em;
}    
.small_prompt{
	padding:0; margin:0;
	font-size: 0.9em; font-family: sans-serif;
	color: #bb3e37;
}

#frm_sign_up p{padding:0; margin:0;}

#AddToCalender{
	background-color: #bb3e37;
	border: none; border-radius: 8px; margin:1em; padding: 0.5em;
	color: #eee;
	font-size: larger; font-weight: bolder;
}

#frm_volunteer{width: 25em;}

#frm_volunteer button{
	border-color: #bb3e37;border-radius: 4px;border-style: solid;
	background-color: #888;
	color: #FFF;
}

.help_text{
	font-size:.75em;
}
.module th, .results th{
  background-color: #bbbbbb; 
	color:white;
}
   
@media only screen and (min-width: 675px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 1000px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    [class*="col-"] {float: left; padding: 1px;}

    #logo {content:url("/static/images/mtrp_logo.png");}
    #comp_logo img{ width: 100px; height: 100px; padding: 0 0.5em 0 0; margin: 0;}
    #title{height: 100px;}
    header{  height: 105px;}
    
    #assoc_name{ font-size:2em; font-style: verdana; font-weight: bold; color: #fff;  margin: 0;}
    
    #school_name { font-size:1.5em; font-style: verdana; font-weight: bold; color: #000; margin-bottom: 0; }
    #popup{ width: 60%;}
}