/* LAST MODIFIED: 12-8-17 */

body{background-color:#fff;color:#4a4b51;font-family:"Open Sans", sans-serif;font-size:14px;}
.blue-bar{background-color:#007ac5;height:10px;}
.apaStyleHeader{height:60px;margin-left:35px;}
.apaStyleHeader img{padding-top:7px;margin:0 35px;}
.form-control{height:40px;} /* Bootstrap override: Making the input fields bigger than the Bootstrap 34px height default, since input text was chopped off */
a{text-decoration: underline;}

  
@media only screen and (max-width: 600px){
    .apaStyleHeader img{margin: 0 auto;padding-right:27px;}
}
@media only screen and (max-width: 330px){
    .apaStyleHeader img{padding-top:10px;}
}
@media only screen and (max-width: 290px){
    .apaStyleHeader img{padding-top:18px;}
}

.apaStyleHeader{height:100px;margin-left:35px;background-color:#fff;}
.apaStyleHeader img{max-height:70px;margin:10px 10px 30px;}

@media only screen and (max-width: 600px){
    .apaStyleHeader img{margin: 10px auto 15px;padding-right:27px;}
}
@media only screen and (max-width: 400px){
    .apaStyleHeader img{padding-right:40px;}
}


/* TRIAL REGISTRATION STYLES ADAPTED TO BS3 */
.middleContainer{margin:0 auto;max-width:1100px;padding:30px 40px 0;}
/* FOOTER - MODIFIED STYLE FROM APASTYLECENTRAL.APA.ORG */
.no-outline{outline:0 !important}
footer{background-color:#fff;padding:30px 50px;}
@media only screen and (max-width: 768px){
    .footer-contactinfo{margin-bottom:14px;}
}
.footer-privacy{border-top:10px solid #c1c1c1;padding:2px 0 0;text-align:center;}
@media only screen and (max-width: 768px){
    .footer-privacy{border-top:none;text-align:left;margin-bottom:10px;}
    .footer-privacy div{padding-bottom:10px;}
}
.footer-socialicons{text-align:right;}
@media only screen and (max-width: 768px){
    .footer-socialicons{text-align:center;margin-bottom:10px;}
}
@media only screen and (max-width: 500px){
    .footer-contactinfo{text-align:center;}
    .footer-privacy{text-align:center;}    
}
@media only screen and (max-width: 420px){
    .footer-contactinfo{font-size:12px;}  
}
@media only screen and (max-width: 350px){
    .footer-contactinfo{font-size:11px;}  
}
.social-apastyle{background:transparent url(../images/social/apastyle.png) center center no-repeat}
.social-apastyleblog{background:transparent url(../images/social/apastyleblog.png) center center no-repeat}
.social-facebook{background:transparent url(../images/social/facebook.png) center center no-repeat}
.social-twitter{background:transparent url(../images/social/twitter.png) center center no-repeat}
.social-googleplus{background:transparent url(../images/social/gplus.png) center center no-repeat}
.social-apastyle a,.social-apastyleblog a,.social-facebook a,.social-twitter a,.social-googleplus a{display:block;width:35px;height:35px}
/* CSS ADAPTED FROM APASTYLECENTRAL.APA.ORG */
.welcome-container{padding:10px;}
.welcome-container .welcome-heading p i{font-size:32px;font-weight:500;}
.welcome-container .welcome-heading p, .modal-title{line-height:1.15;font-size:30px;font-weight:600;margin-bottom:0;color:#0077C0;}
.welcome-container .intro-text{line-height:170%;font-size:15px;margin-top:10px;margin-bottom:20px;}
.welcome-container .intro-text ul{padding-top:10px;}
/* CUSTOM CSS - ADAPTED FROM MYAPA CUSTOM CSS */

#formContainer{background-color:#fff;border:1px solid #c1ddf3;margin:0 auto 40px;max-width:780px;min-height:200px;position:relative;color:#666;font-size:13px;padding:10px 10px 0;}
.formContainerHeading{color:#444;padding:0 10px;text-align:center;}
.formContainerHeading span{font-size:14px;}
#formSection{color:#666;font-size:13px;min-height:240px;padding:0 50px 30px;} /* for the split form design, this is the left side of login and register screens - there, the padding is padding:40px 360px 40px 50px; to make room for the right "register/log in with Google" button side */
#formContainer form label{color:#333;display:block;padding:16px 0 0;} /* Note: The original MyAPA Custom CSS had padding:10px 0 0; but it would be better to have the label closer to the relevant field, so increasing padding-top from 10 > 16px */
.form-control[disabled]{border:none;background-color:#fff;box-shadow:none;} 
#formContainer input[type="text"], #formContainer input[type="email"], #formContainer input[type="password"]{background:none repeat scroll 0 0 #fff;color:#666;font-size:13px !important;line-height:13px;padding:10px;max-width:600px;} /* NOTE: I took out this - :not(.form-control[disabled]) - and first replaced it with .form-control:not(.form-control[disabled]), but now taking it out all together - since the old code was breaking the layout with parsing errors - this is something to review in the MyAPA CSS to see if it's an issue there (on iphones at least) */
input[type="submit"]{font-family: FontAwesome, Arial, Helvetica, Sans-serif;} /* getting fontawesome next and previous icons inside form input "buttons" , then use http://fortawesome.github.io/Font-Awesome/cheatsheet/ for unicode inside input value */
#formContainer input[type="submit"], .customButton1{background:none repeat scroll 0 0 #c54b00;color:#fff;font-size:1em;border-radius:8px;font-weight:normal;text-transform:uppercase;margin-top:12px;padding:8px 24px;transition:all 0.1s ease 0s;}
#formContainer input[type="submit"]:hover, .customButton1:hover{background:none repeat scroll 0 0 #ac4100;color:#fff;border:1px solid #c54b00;}
#formContainer input[type=text] .has-error, #formContainer .has-error input[type=text],#formContainer input[type=email] .has-error, #formContainer .has-error input[type=email]  {border-color:#a94442 !important;}
#formContainer input[type=text], #formContainer textarea, #formContainer input[type=email], #formContainer input[type=password]{ -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; border: 2px solid #ccc;}
#formContainer input[type="text"]:focus, #formContainer textarea:focus, #formContainer input[type="email"]:focus, #formContainer input[type="password"]:focus, #formContainer input[type="tel"]:focus{box-shadow: 0 0 5px rgba(0, 151, 214, 0.8); border: 2px solid rgba(0, 151, 214, 0.8);}
#rememberMe{margin-top:16px;}
#formContainer label[for="rememberMe"]{color:#737373;font-size:12px;}
.socialButtons a:active{color:#fff;-webkit-transform:transform: scale(0.95);-moz-transform:transform: scale(0.95);-ms-transform:transform: scale(0.95);-o-transform:transform: scale(0.95);transform: scale(0.95);}
.googleButton{border-radius:2px;}
.socialButtons .googleButton{background:#c32f10;}
.socialButtons i{padding-right:12px;vertical-align:middle;}
.btn.focus, .btn:focus{color:#fff;}/* bootstrap override so isn't #333 */
.bottomFormLink{padding-top:10px;padding-bottom:10px;font-size:12px;}
.bottomFormLinkSmall{padding-top:5px;padding-bottom:5px;font-size:12px;}
#formContainer .registerText{color:#737373;font-size:12px;}
#formContainer .helpText{color:#737373;font-size:12px;line-height:16px;margin:0;padding:0 0 0 1px;}
#formContainer #disabledButtonMessage{color:#900;font-size:14px;padding-bottom:6px;}
.help-blockRegular{color:#737373;display:block;margin-bottom:10px;margin-top:5px;font-size:12px;} /* defining this since help-block being used by validation messages */
.help-block{font-weight:bold;} /* bolding the jValidate error messages to make them stand out more, which are using the BS help-block style/location */
/* responsive styles for form screen */
@media only screen and (max-width: 991px){
    #formContainer .helpText{padding-top:4px;}
}
@media only screen and (max-width: 767px){
    .middleContainer{margin:0 10px;}
    #formContainer #formSection{padding:10px;}
}
@media only screen and (max-width: 500px){
    .middleContainer{margin:0 5px}
    .formContainerHeading{padding:0;font-size:24px;}
    #formContainer input[type="submit"]{width:100%;}
}
/* for the hide/show password toggle button - this might already be part of another CSS file being used, so no need to duplicate if that's the case */
.my-toggle{-moz-appearance:none;background:transparent none repeat scroll 0 0;border: 0 none;border-radius:0.25em;color:#888;cursor:pointer;font-size:0.75em;font-weight:bold;margin-right:0.5em;padding:0.5em;text-transform:uppercase;}
.my-toggle:hover, .my-toggle:focus{background-color:#eee;color:#555;outline:medium none transparent;}
.hideShowPassword-toggle, .my-toggle{z-index: 3;}
/* for the must read terms of service section */
#notice, .alert-info{width:90%;margin:15px auto;padding:20px;border:1px solid #eee;border-left-width:5px;border-radius:3px;margin:0 auto;font-size:16px;font-weight:500;color:#8a6d3b;background-color:#fcf8e3;border-left-color:#8a6d3b;}
.smallerAlertText{font-size:14px !important;}
#rules{height:130px;padding:5px;}
/* making text area taller on small devices for easier scrolling */
@media only screen and (max-width: 500px){
    #rules{height:180px;}
}
/* custom alert styling - warning/error - used for emailOnFile section */
.customAlert1{width:100%;margin:15px auto;padding:10px;border:1px solid #ebcccc;border-left-width:5px;border-radius:3px;margin:0 auto;font-size:16px;font-weight:500;color:#a94442;background-color:#f7ecec;border-left-color:#a94442;}
.customAlert1 a, .alertLink{color:#014884;text-decoration:underline;}
.customAlert1 a:hover, .alertLink:hover{text-decoration:none;}
/* modal styling, note the modal-title is the same as .welcome-container .welcome-heading p */
.modal-body{font-size:16px;}
#modalContainer .modal-close,#modalContainer modal-close:hover{color:#808080; opacity:1}
/* custom responsive classes */
/* 350px breakpoint responsive switch - being used for LTIregistrationComplete modal "continue" button */
.screen-only350{display:block;}
.mobile-only350{display:none;}
@media screen and (max-width: 350px){
    .screen-only350{display:none;}
    .mobile-only350{display:block;}
}
/* *************** NEW CSS ADDED FOR LOGIN, REGISTER, LOOK UP ACCOUNT, and EDIT PROFILE SCREENS *************** */
#backgroundContainer{background-color:#f5f5f5;}
/* styling the .formContainerHeading differently on these screens since there is no "welcome" message for the h1 */
h1.formContainerHeading{font-size:25px;margin:10px 0;padding:0;text-align:left;}
/* making max-width increase from 780px to 900px to account for larger headings on desktop, used with #formContainer */
.formContainerLarger{max-width:900px !important;}
/* different padding here compared to #formSection, for better formatting with OpenID button(s) */
#sideBySideFormSection{color:#666;font-size:13px;min-height:240px;padding:40px 320px 40px 30px;} /* left side of login and register screens */
.rightSideBackground{background-color:#ebf4fb;} /* background color of right side where OpenID button(s) are */
#openIDSection{bottom:0;padding:140px 40px 40px;position:absolute;right:0;top:0;width:320px;} /* right side of login and register screens */
.googleButton{border-radius:8px;}
.socialButtons .googleButton{background:#c32f10;}
.socialButtons i{padding-right:12px;vertical-align:middle;}
.socialButtons a{color:#fff;opacity:0.9;text-decoration:none !important;text-transform:uppercase;transition:all 0.2s ease 0s;cursor:pointer;font-size:1em;font-weight:400;height:44px;line-height:44px;margin:0 0.5% 20px;padding: 0 10px 0 18px;text-align:left;}
.socialButtons a:hover{color:#fff;opacity:1.0;-webkit-transform:transform: scale(1.03);-moz-transform:transform: scale(1.03);-ms-transform:transform: scale(1.03);-o-transform:transform: scale(1.03);transform: scale(1.03);}
.socialButtons a:active{color:#fff;-webkit-transform:transform: scale(0.95);-moz-transform:transform: scale(0.95);-ms-transform:transform: scale(0.95);-o-transform:transform: scale(0.95);transform: scale(0.95);}
/* different widths of Google button needed for "Log in with Google" button text, "Sig Up with Google" button text, and "Link with Google" button text ; Also, min-width's for the Login and Create Account buttons */
section.loginForm .socialButtons a{min-width:190px;}
section.loginForm #logInSubmit{min-width:110px;}
section.createAccountForm .socialButtons a{min-width:220px;}
section.createAccountForm #registerSubmit{min-width:170px;}
section.editProfileForm #changePasswordButton{min-width:190px;}
section.editProfileForm .socialButtons a{min-width:190px;}
/* secondary ghost-like buttons */
.customButton2, .customButton2:focus{background:none repeat scroll 0 0 #fff;color:#333;font-size:16px;border-radius:8px;font-weight:normal;border:1px solid #777;margin-top:12px;padding:7px 10px 5px;transition:all 0.1s ease 0s;}
.customButton2:hover{background:none repeat scroll 0 0 #e8e8e8;color:#333;border:1px solid #333;}
.customButton2-small{background:none repeat scroll 0 0 #fff;color:#333;font-size:14px;border-radius:8px;font-weight:normal;border:1px solid #777;margin-top:12px;padding:5px 8px 3px;transition:all 0.1s ease 0s;}
.customButton2-small:hover{background:none repeat scroll 0 0 #e8e8e8;color:#333;border:1px solid #333;}
/* input-group-btn style, used in Look Up Account screen */
.customButton3{background:none repeat scroll 0 0 #c54b00;color:#fff;font-size:16px;border-radius:8px;font-weight:normal;margin:0;height:40px;padding:6px 10px;transition:all 0.1s ease 0s;} /* Note: customButton3 height matches the 40px height of .form-control override of 34px */
.customButton3:hover{background:none repeat scroll 0 0 #ac4100;color:#fff;border:1px solid #c54b00;}
/* "SAVE CHANGES" button, used in well on edit-profile screen */
.customButton4, input.customButton4{background:none repeat scroll 0 0 #c54b00;color:#fff;font-size:1.3em !important;border-radius:8px;font-weight:normal;text-transform:uppercase;margin-top:0 !important;padding:14px 24px !important;transition:all 0.1s ease 0s;border:none !important;}
.customButton4:hover, input.customButton4:hover{background:none repeat scroll 0 0 #ac4100;color:#fff;border:none !important;}
@media only screen and (max-width: 767px){
    .customButton4, input.customButton4{width:100%;}
}
/* "Change Password" button - secondary CTA type button with hover expand effect, like openID buttons */
/* adding btn-custom1 to use in both style and my edit profile pages */
.customButton5 i{padding-right:12px;vertical-align:middle;}
.customButton5, .btn-custom1 {background:none repeat scroll 0 0 #005b93;color:#fff;opacity:0.9;text-decoration:none !important;text-transform:uppercase;transition:all 0.2s ease 0s;cursor:pointer;font-size:1em;font-weight:400;height:44px;line-height:44px;margin:0 0.5% 20px;padding: 0 10px 0 18px;text-align:center;border-radius:8px;}
.customButton5:hover{background:none repeat scroll 0 0 #008adf;color:#fff;opacity:1.0;-webkit-transform:transform: scale(1.03);-moz-transform:transform: scale(1.03);-ms-transform:transform: scale(1.03);-o-transform:transform: scale(1.03);transform: scale(1.03);}
.customButton5:active{color:#fff;-webkit-transform:transform: scale(0.95);-moz-transform:transform: scale(0.95);-ms-transform:transform: scale(0.95);-o-transform:transform: scale(0.95);transform: scale(0.95);}
@media only screen and (max-width: 767px){
    .customButton5, input.customButton5{width:100%;}
}
.sectionSpacerVertical span{background:none repeat scroll 0 0 #666;color:#fff;display:block;font-style:italic;font-weight:700;margin-left:-60px;margin-top:-2.0em;padding:0;position:absolute;text-align:center;top:50%;width:40px;height:40px;line-height:40px;border-radius:50%;}
.sectionSpacerHorizontal span{background: none repeat scroll 0 0 #666;color:#fff;display:block;font-style:italic;font-weight:700;margin-left:150px;margin-top:-3.0em;padding:0;position:absolute;text-align:center;right:50%;width:40px;height:40px;line-height:40px;border-radius:50%;}
/* styles specific to Create an Account screen */
form#createAccountForm .helpText{margin-left:-20px;} /* moving over help text on Create an Account form so that it's one line on desktop */
section.createAccountForm .sectionSpacerVertical span{margin-top:-39.0em;} /* moving "or" circle up on Create an Account form desktop display */
/* styles specific to Look Up Account screen */
#topButtons{height:40px;margin-bottom:30px;}
#topButtons #leftButtons{width:50%;float:left;text-align:left;}
#topButtons #rightButtons{width:50%;float:right;text-align:right;}
/* adding padding to boxes with mostly text, like the Look Up Account screen and Edit Profile screen */
.textDisplayBox{padding:22px !important;}
.textDisplayBox h1{font-size:33px;}
.textDisplayBox h2{font-size:24px;}
.separatorLine{border-bottom:3px solid #eee;margin-top:30px;margin-bottom:20px;margin-left:0px;}
.containerFooter{margin:0 auto 50px;max-width:960px;position:relative;text-align:center;}

/* styles specific to Edit Profile screen */
h3.subheading{font-size:20px;}
.largeMiddleContainer{margin:0 auto;max-width:1200px;padding:30px 40px 0;}
.formContainerLargest{max-width:1200px !important;}
.form-indent{margin-left:30px;}
@media screen and (max-width: 767px){
    .form-indent{margin-left:20px;}
}
.headingBox{background-color:#ebf4fb;border-radius:3px;padding:5px;margin-bottom:14px;margin-top:24px;}
.headingBox h2{font-size:23px;margin:2px 0 2px 10px;}
.requiredAsterisk{color:#f00;font-size:10px;opacity:0.6;padding-left:4px;}
/* custom breakpoint text swap for Edit Profile "Professional Suffix" to "Prof. Suffix" in between 1200px and 992px, for layout reasons */
.screen-only1200to992{display:block;}
.mobile-only1200to992{display:none;}
@media screen and (max-width: 1200px) and (min-width:992px){
    .screen-only1200to992{display:none;}
    .mobile-only1200to992{display:block;}
}
/* custom breakpoint text swap for Edit Profile "Extension" to "Office Phone Extension" at 991px breakpoint, to give this field better context when form stacked */
.screen-only991{display:block;}
.mobile-only991{display:none;}
@media screen and (max-width: 991px){
    .screen-only991{display:none;}
    .mobile-only991{display:block;}
}
/* 430px breakpoint responsive switch - being used for "LINK APA ACCOUNT WITH GOOGLE" > "LINK WITH GOOGLE" button */
.screen-only430{display:block;}
.mobile-only430{display:none;}
@media screen and (max-width: 430px){
    .screen-only430{display:none;}
    .mobile-only430{display:block;}
}
/* *********** CTA ************ */
.bs-calltoaction{position:relative;width:auto;padding:15px 25px;border:1px solid #222;margin-top:10px;margin-bottom:50px;border-radius:5px;}
.bs-calltoaction > .row{display:table;width: calc(100% + 30px);}
.bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{float:none;display:table-cell;vertical-align:middle;}
.cta-contents{padding-top:10px;padding-bottom:10px;}
.cta-title{margin:0 auto 15px;padding:0;font-size:22px;}
.cta-desc{padding:0;}
.cta-desc p:last-child{margin-bottom:0;}
.cta-button{padding-top:10px;padding-bottom:10px;}
@media (max-width: 991px){
    .bs-calltoaction > .row{
        display:block;
        width: auto;
    }
    .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{float:none;display:block;vertical-align:middle;position:relative;}
    .cta-contents{text-align:center;}
}
.bs-calltoaction.bs-calltoaction-default{color:#333;background-color:#fff;border-color:#ccc;}
/* *********** Responsive Form Styles ************ */
@media only screen and (max-width: 991px){
    #sideBySideFormSection{padding:40px 370px 40px 30px;}
    section.createAccountForm .sectionSpacerVertical span{margin-top:-49.0em;} /* specific to Create an Account form */
}
/* the big stack breakpoint */
@media only screen and (max-width: 767px){
    .sectionSpacerVertical span{right:46%;margin-top:-9.4em;}
    section.createAccountForm .sectionSpacerVertical span{margin-top:-8.8em;} /* specific to Create an Account form */
    #sideBySideFormSection{padding:30px;}
    #formContainer{padding:0;margin-top:0;}
    #formContainer{margin-top:0;}
    #formContainer #formSection{padding:30px;}
    #formContainer #openIDSection{padding:34px;position:relative;width:100%;}
    #formContainer input[type="text"], #formContainer input[type="password"]{min-width:100%;width:100%;}
    .socialButtons{padding-top:16px;}
    .socialButtons a, #fullWidthContainer .socialButtons a{width:100%;text-align:center;}
    #openIDSection{margin-top:10px;}
    #topButtons{text-align:center;}
    #topButtons #leftButtons{display:none;width:0%;}
    #topButtons #rightButtons{width:100%;text-align:center;}
    #topButtons #rightButtons #createAnAccountButton{margin-bottom:6px;}
    #topButtons #rightButtons #loginButton{margin-bottom:6px;}
    #topButtons #rightButtons #loginButton a{width:50%;}
    #topButtons #rightButtons #createAnAccountButton a{width:50%;}
}
@media only screen and (max-width: 596px){
    #openIDSection{margin-top:10px;padding:30px;}
    .middleContainer{padding:30px 20px 0;}
}
@media only screen and (max-width: 516px){
    .sectionSpacerVertical span{right:44%;margin-top:-10.0em;}
    section.createAccountForm .sectionSpacerVertical span{margin-top:-9.5em;} /* specific to Create an Account form */
}
@media only screen and (max-width: 378px){
    .sectionSpacerVertical span{margin-top:-10.8em;}
}
@media only screen and (max-width: 360px){
    .sectionSpacerVertical span{margin-top:-10em;}
    .socialButtons a{padding:0;}
    #formContainer #openIDSection{padding:34px 14px;}
}
@media only screen and (max-width: 338px){
    .sectionSpacerVertical span{margin-top:-10.9em;}
}
/* 270px breakpoint responsive switch - being used for "Create an Account" to "Create Account" button text switch on register forms */
.screen-only270{display:block;}
.mobile-only270{display:none;}
@media screen and (max-width: 270px){
    .screen-only270{display:none;}
    .mobile-only270{display:block;}
}
/* not specific to style - also exists in myAPAcustomCss consider moving to common css page  */
#formContainer .alwaysHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}





.customAlert1 a, .alertLink {
    color: #337ab7;
}

/*header */
a{text-decoration:underline;color:#005499;}
.green-bar{background-color:#198731;height:10px;}
.apaStyleHeader {height:100px;margin-left:35px;background-color: #fff;}

/*awt trial register*/
#formContainer {
    background-color: #fff;
    border: 1px solid #c1ddf3;
    margin: 0 auto 40px;
    max-width: 780px;
    min-height: 200px;
    position: relative;
    color: #666;
    font-size: 13px;
    padding: 10px 10px 0;
}

.formContainerLarger {
    max-width: 900px !important;
}


/*footer */
@media only screen and (min-width: 896px) {
    .page-footer {
        background: #198731 none repeat scroll 0 0;
        height: 170px;
    }
}

@media only screen and (max-width: 895px) {
    .page-footer {
        margin-top: 950px
    }
}

.page-footer .contain {
    position: relative;
}

.page-footer .contain {
    position: relative;
}

.contain--xl {
    max-width: 1470px;
}

.page-footer__link--apa {
    height: 124px;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-apa-logo {
    position: absolute;
}

.page-footer__link--logo {
    float: none;
    margin: auto;
    text-align: center;
}

.page-footer__link--asc {
    float: right;
    margin-top: -55px;
}

.page-footer .copyright {
    float: right;
    margin-left: 0;
    margin-right: 0;
    text-align: right;
    width: 40%;
}

.page-footer .copyright a {
    display: inline-block;
    padding: 0 10px;
    border-right: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: underline;
}

.icon-logo-horz:before {
    color: #319645;
    content: "hello";
    height: 48px;
}

@media screen and (min-width: 768px) .page-footer__link--logo {
    float
    :none
    ;
       
    margin
    :auto
    ;
       
    max-width
    :
    260
     
    px
    ;
       
    text-align
    :center
    ;
      
}

@media screen and (min-width: 768px) .page-footer__link {
    margin-bottom
    :
    0;
      
}

.page-footer__link--logo {
    font-size: 5.25em;
}

.page-footer__link {
    display: block;
    color: #fff;
    margin-bottom: 18px;
}

.page-footer__link--apa {
    height: 124px;
    left: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.page-footer__link {
    margin-bottom: 0;
}

.page-footer__link--apa {
    font-size: 10em;
    height: 110px;
    width: 300px;
}

.page-footer__link {
    color: #fff;
    display: block;
}

.icon-apa-logo {
    position: absolute;
}

[class*=" icon-"], [class^="icon-"] {
    font-family: icomoon;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

.page-footer__link--asc {
    font-size: 1.6em;
    letter-spacing: .04em;
    font-weight: 400;
}

.page-footer a:hover {
    opacity: .6;
    color: #fff;
}

.page-footer a:focus {
    opacity: .6;
    color: #fff;
}
.access, .noreveal:active, .noreveal:focus, .noreveal:hover {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/****** Needed for .card within modal ******/
.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: 1px;
  --bs-card-border-color: #ccc;
  --bs-card-border-radius: 5px;
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(5px - 1px);
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(255,255,255, 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: #ffffff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  margin: 1rem 0.5rem;
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
  line-height: 1.5;
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}

.card-subtitle {
  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}
.card-title h4 {
    font-size: 1.75rem;
    padding-top: 1rem;
    padding-bottom: 0;
    font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.btn-custom2 {
    text-decoration: none !important;
    cursor: pointer;
    font-size: 1em;
    font-weight: 400;
    height: 44px;
    line-height: 44px;
    margin: 0 0.5% 20px;
    padding: 0 10px 0 10px;
    text-align: center;
    border-radius: 8px;
}
.card .btn {
    margin: 1.25rem 0 1rem 0;
    min-height: 42px;
}
.card .btn span {
    vertical-align: middle;
    text-align: center;
    text-transform: capitalize;
}