/**************************************************
COMMITTEE NAME - 2018 - Custom - Form - Theme

This file contains all the customizable features specific to each form within a theme. Committees can change:
 - fonts: Headings, Labels, Body Content
 - colors: Font, Backgrounds, Borders, Box Shadows
 - text alignment: Left, Right, Center
 - background images: Full Page and Mobile
 - position: Left, Center, Right

This can be customized for each form a committee creates. It is important to save this file according to the following convention:
committee shortcode_year_form name.css.

This file will be attached through EA under "Build" then "Advanced Options" at the bottom of the Build Page.

**************************************************/


/* Primary Font Stack */
body, .at.ngp-form {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #fff;
}

.at.ngp-form h1,.at.ngp-form h2,.at.ngp-form h3,.at.ngp-form h4,.at.ngp-form h5,.at.ngp-form h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
color: black;
}

.at.ngp-form h2, .at.ngp-form header.at-title {
  font-size: 32px;
  font-size: 2.75rem;
  letter-spacing: -0.77px;
  line-height: 1;
}

.at.ngp-form h3 {
  font-size: 22px;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

h3:after {
  content: '';
  display: block;
  margin-left: 1px;
  margin-top: 1.1rem;
  border-top: #009edb solid 3px;
  width: 25%;
}

ol.fund-supports {
  list-style: none;
  counter-reset: un-sg-counter;
}

ol.fund-supports li {
  counter-increment: un-sg-counter;
}

ol.fund-supports li::before {
  content: counter(un-sg-counter) " ";
  color: #333;
  font-weight: bold;
  padding-right: 10px;
}

/*******************************
 Hyperlink Styles and States
*******************************/

/* Hyperlink color */
.at.ngp-form a {color:rgba(0, 115, 207,1);} /* UNF Foundation Blue */

/* Hyperlink :focus color */
.at.ngp-form a:foucs {color:rgba(0, 115, 207,1);} /* UNF Foundation Blue */

/* Hyperlink :hover color */
.at.ngp-form a:hover {color:rgba(0, 53, 145,1);} /* UNF Deep Blue */

/* Hyperlink :active color */
.at.ngp-form a:active {color:rgba(0, 53, 145,1);} /* UNF Deep Blue */

/* Hyperlink :visited color */
.at.ngp-form a:visited {color:rgba(0, 149, 129,1);}

/* Bold Text Font */
strong var {font-family: 'Roboto Condensed', sans-serif;}


/********************************
 Page Header Styles
********************************/

/* Brand Bar */
#brand-bar {
  background: #f2f2f2;
  margin: 0;
  padding: 0;
  border: none !important;
  border-bottom: #009edb solid 5px !important;
  min-height: 40px;
}
/* Fixed Page Header */
header.branding {
  background-color: #fff; /* Page Header Background Color */
  border-bottom-color: #4D4D4D; /* Grey 70% Black */
  border-bottom-style: solid;
  border-bottom-width: 12px;
  width: 100%;
  height: auto; /* Auto Height Fluidly Adjust To Accomidate Content */
  margin: 0 0 5%; 
  padding: 2em 0;
  position: inherit;
  z-index: auto; /* Positions Header Above All Other Content */
}
header.branding figure {
  max-width:300px; /* Change To Adjust Logo Size */
  margin:1.2500em 2em; /* Left justified committee logo */
}

/******************************
 Page Footer Styles
******************************/
footer {
  border-top: #009edb solid 0.4rem;
  background: #333333;
  min-height: 80px;
}
/******************************
 Form Styles
******************************/

/* Form Position, Font Color, and Spacing from Window Edge */
body .at.ngp-form {
   color:#333; /* Body Font Color */
   float: none; /* Sets Form Position In Page */
   margin: 0 auto 5%; /* Sets Flexible Form Offset From Window Edge */
 }
 /* Form Background Color, Opacity, and Radius of corners */
 .at.ngp-form section.at-inner {
   background-color:rgba(255,255,255,.90);
   border-top-left-radius: 3px; /* rounded form corners */
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
/* Form Title Color and Font */
.at.ngp-form header.at-title {
  color:#4D4D4D; /* Grey 70% Black */
  font-family:"Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Form Heading Color and Font */
.at.ngp-form .at h1, .at.ngp-form .at h2, .at.ngp-form .at h3, .at.ngp-form .at h4, .at.ngp-form .at h5, .at.ngp-form .at h6 {
  color: black; /* Black 100% Black */
  font-family:"Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Form Legend Heading Font and Color */
.at.ngp-form fieldset legend {
  color:#4D4D4D; /* Grey 70% Black */
  font-family:"Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Form Label Font Color */
.at.ngp-form label {color:#4D4D4D;} /* Grey 70% Black */

/* Form Amount Label Font */
.at.ngp-form fieldset.ContributionInformation .label-amount,
.at.ngp-form fieldset.ContributionInformation .label-amount * {
  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Font For Input Fields */
.content form input[type="text"],
.content form input[type="password"],
.content form input[type="date"],
.content form input[type="datetime"],
.content form input[type="datetime-local"],
.content form input[type="month"],
.content form input[type="week"],
.content form input[type="email"],
.content form input[type="number"],
.content form input[type="search"],
.content form input[type="tel"],
.content form input[type="time"],
.content form input[type="url"],
.content form input[type="color"],
.content form textarea,
.content form select {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.at.ngp-form .at-recipient-info .at-title {color:#4D4D4D;}
.at.ngp-form .at-recipient-info > .RecipientInfoHeaderHtml {color:#333;}


/***********************************
  Submit Button Styles and States
***********************************/

/* Submit Button Background, Font, and Border Color */
.at.ngp-form .btn-at-primary,
.at.ngp-form .prevNext .btn-at,
.at.ngp-form .btn-at.prevStep {
  background-color: transparent;
  border-color:#009edb;
  color:#4D4D4D; /* Grey 70% Black */
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.at.ngp-form .btn-at:focus {
  box-shadow: 0 0 4px 0 #009edb; /* UN SG ACCENT COLOR */
}
.at.ngp-form .btn-at-primary:hover,
.at.ngp-form .hover.btn-at-primary {
  background-color: transparent;
  border-color: #009edb; /* Blue */
  color:#4D4D4D; /* Grey 70% Black */
}
.at .btn-at-primary:active, .at .active.btn-at-primary {
  background-color:  transparent;
  color: #4D4D4D;
}

/* Multi-Step Form Previous Button State Styles */
.at.ngp-form .btn-at.prevStep {
  background-color: transparent; 
}

.at.ngp-form .btn-at.prevStep:hover {background-color: transparent; border-color: #003591; color: #003591} /* UNF Deep Blue */

/* Form Footer Body Text Font and Color */
.at.ngp-form section.at-inner footer.FooterHtml {
  color:#777777;
  text-align: center;
}
/* Confirmation Page */
.at .at-form .thankYou {
  background-color: rgba(255,255,255,1);
}

/* Mobile Media Query */
@media screen and (max-width: 320px) {
  header.branding {
    padding:20px 0;
    margin: 0;
    position: relative;
  }

  header.branding figure {
    top:0; /* Committee Logo Position From Top / Left Window Corner */
  }
  body .at.ngp-form {
    margin:0; /* Positions EA Form Below Mobile Header Image */
    width: 100%;
    min-width: 300px;
  }
  .at.ngp-form section.at-inner {
    background-color: rgba(255,255,255,1); /* Opaque Form Background */
    border-top-left-radius: 0; /* Remove Top Left Border Radius */
    border-top-right-radius: 0; /* Remove Top Right Border Radius */
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .at.ngp-form header.HeaderHtml, .at.ngp-form form {
    font-size: 1em;
  }
}
@media screen and (max-width: 375px) and (min-width: 321px) {
  header.branding {
    padding:20px 0;
    margin: 0;
    position: relative;
  }

  header.branding figure {
    top:0; /* Committee Logo Position From Top / Left Window Corner */
  }
  body .at.ngp-form {
    margin:0; /* Positions EA Form Below Mobile Header Image */
  }
  .at.ngp-form section.at-inner {
    background-color: rgba(255,255,255,1); /* Opaque Form Background */
    border-top-left-radius: 0; /* Remove Top Left Border Radius */
    border-top-right-radius: 0; /* Remove Top Right Border Radius */
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .at.ngp-form header.HeaderHtml, .at.ngp-form form {
    font-size: 1em;
  }
}
@media screen and (max-width: 425px) and (min-width: 376px) {
  * {
    font-family: helvetica,arial,sans-serif;
    font-size:1em;
  }

  header.branding {
    padding:20px 0;
    margin: 0;
    position: relative;
  }

  header.branding figure {
    top:0; /* Committee Logo Position From Top / Left Window Corner */
  }
  body .at.ngp-form {
    margin:0; /* Positions EA Form Below Mobile Header Image */
  }
  .at.ngp-form section.at-inner {
    background-color: rgba(255,255,255,1); /* Opaque Form Background */
    border-top-left-radius: 0; /* Remove Top Left Border Radius */
    border-top-right-radius: 0; /* Remove Top Right Border Radius */
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  body .at.ngp-form, body .thankYou {
     color:#333;
     float:none; /* Sets Form Position In Page */
     min-width:320px;
     width:100%;
   }

  /* Confirmation Page */
  .at .at-form .thankYou {
    width:100%;
  }
}

/* Tablet Media Query */
@media screen and (max-width: 768px) and (min-width: 426px) {
  body {
    /*background-image: url(https://nvlupin.blob.core.windows.net/images/van/UNF/UNF/1/60813/images/img/bg-19-girl-writing-school.jpg);*/
  }

  .mobile-hero {
    display: none;
  }

  body .at.ngp-form, body .thankYou {
    float:none;
    margin:0 auto 5%;
  }

  .at.ngp-form section.at-inner {
    margin-top: 35%;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  body {
   /*background-image: url(https://nvlupin.blob.core.windows.net/images/van/UNF/UNF/1/60813/images/img/bg-19-girl-writing-school.jpg);*/
  }

  .mobile-hero {
    display: none;
  }

  body .at.ngp-form {
    margin: 25% 5% 5% 0; /* Sets Flexible Form Offset From Window Edge */
  }
}

/* Desktop Media Query */
@media screen and (min-width: 1025px) {
  body {
    /*background-image: url(https://nvlupin.blob.core.windows.net/images/van/UNF/UNF/1/60813/images/img/bg-19-girl-writing-school.jpg);*/
   }

  .mobile-hero {
    display: none;
  }
}