body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;

}


.wrapper {
  background-color: #fff;
  color:#444;
  padding: 0;
  border-radius: 4px;
}

a,
a:link,
a:visited,
a:active {
color: #002147;

}


a[target="_blank"]:After {
content:" ";
padding: 2px 16px;
height: 16px;
  background-image: url("../images/external-link.png");
  background-position: center top;
  background-repeat: no-repeat;

}


 header, footer, section, nav {
     display: block;

}
 html, body {
     height: 100%;
     font-size: 16px;

}

 a:link, a:visited {
     text-decoration: none;
     color: #222222;

}
 p a:link, p a:visited {
     text-decoration: underline;

}

a:hover,
a:focus{
  text-decoration: underline;

}

 img {
     max-width: 100%;
     margin-bottom: 12px;
}
/* improve spacing of text elements */
 p, ul {
     margin: 0.1em 0 1.5em 0;
}
 ul {
     margin-left: 1.2em;
}
 h1, h2, h3, h4, h5, h6 {
     margin: 0 0 0.2em 0;
}



 h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
     clear: both;
}
 h1 {
     font-size: 1.4rem;
     margin: 0 0 1rem 0;
     clear: both;
}


 h2 {
     font-size: 1.3rem;
}
 h3 {
     font-size: 1.2rem;
}
 h4 {
     font-size: 1.1rem;
}





header {
    padding: 0;
    min-height: 32px;
    margin: 0 0 32px 0;
    border-radius: 4px 4px 0 0 ;

}



header img {
    margin: 0px auto ;
    display: inline-block;
}

.oxcrest{
margin-right: 32px;
margin-top: 16px;
width: 80px;
height: inherit;
}

#servicename {

  padding-top: 16px;
}

@media screen and (max-width: 540px){
  #servicename {

    max-width: 180px;
    height:auto;
    padding-top: 0px;

  }
  .oxcrest{
  margin-right: 8px;

}


}





h1, .column {


}


.explanation {

  font-size: 0.9rem;
}

header,
.explanation,
#multi-factor-authentication,
.disambiguation {
  background-color: rgba(255, 255, 255, 1);

}

.disambiguation,
 #multi-factor-authentication{

   padding-bottom: 8px;
 }

#actions,
#multi-factor-authentication {

  /*
  background-color: rgba(255, 255, 255, 0.5);
  */

  margin: 0 ;
  border-top: 1px solid #E0E7EF;


}

ul#actions {

font-size: 2rem;
font-weight: bold;
margin-left: -2rem;
}

ul#actions li {
max-width: 28%;
width: 28%;
float: left;
margin: 0 16px;
height: 10rem;
border: 1px solid #f2f2f2;
}


ul#actions li a{

font-size: 0.9rem;
font-weight: normal;
line-height: 1rem;
}

ul#actions li a span{

display: inline-block;
font-size: 1.1rem;
}


#actions a {
  background-color: rgba(255, 255, 255, 0.5);

  width: 100%;
  border-top: 1px solid rgba(1, 103, 184, 0.25);
  border-bottom: 10px solid rgba(1, 103, 184, 0.25);
  padding: 0 24px 0 8px;
  min-height: 8rem;
  margin:  0;
  line-height: 0;
  border-radius: 2px;
  box-shadow: 0 4px 4px 0 rgba(47, 64, 94,  0.08), 0 4px 4px 0 rgba(47, 64, 94,  0.05);
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
  box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
  display: block;

  }


  @media screen and (min-width: 540px){
    #actions a {

      width: 42%;
      margin: 0 16px 8px 0;
      float: left;
      min-height: 10rem;
    }
    #actions a.option-b,
    #actions a.option-d,
    #actions a.option-f {
      margin-right: 0;
    }
  }

  @media screen and (min-width: 768px){
    #actions a {

      min-height: 8rem;
      margin-right: 32px;
    }
  }
  @media screen and (min-width: 992px){
    #actions a {

      width: 414px;
      margin: 0 32px 8px 0;
      float: left;
    }

    #actions a{
      min-height: 8rem;
    }

    #actions a.option-d,
{
      min-height: 11rem;
    }

  }


#actions a:hover,
#actions a:focus  {

  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.75);
color: #000;
border-color: #AAB300 ;

border-color: rgba(1, 103, 184, 0.5);

box-shadow: 0 4px 4px 0 rgba(47, 64, 94,  0.18), 0 4px 4px 0 rgba(47, 64, 94,  0.15);

-webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.2);
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.2);

}

#actions a *{
color:#444;
line-height: 1.4em;

}


span.option-text {

  font-size: 1.4rem;

}

span.option-info {
display: block;
  font-size: 0.9rem;
  margin-top: 0.3em;
}



hr.clear {

  clear: both;
  color: transparent;
  border-color: transparent;

}
/*------------------ user messaging starts -------------*/

 .user-messages {
     clear: both;
     margin: 0px auto;
    /* goin' 50/50...  width: 251px; */
 font-size: 1.2rem;
     color: #333;
}

.success{
  color: #058A00;
  color:#315E5E;

}

.success a{

  color:#315E5E;
  font-weight: bold;

}

ul.failures li, .form-error , .user-messages p.problem{
    color: #AA2200;
    color:#834457;
    color: rgba(135, 36, 52, 1) ;
}

ul.failures li a,
.form-error a,
.user-messages p.problem a{
    color:#834457;
    font-weight: bold;
}



 ul.failures, ul.failures li {
     padding-left: 0px;
     list-style: none;
}

 .user-messages ul {
     margin-left: 0;
}
 .user-messages ul li{
     margin-bottom: 0.5em;
}

.destinationService {

  margin-bottom: 1rem;
}

.destinationService span{

font-style: italic;
}

aside ul{

  padding-left: 0;
}
/*------------------ user messaging ends -------------*/


aside {
  padding-top: 32px;

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

  aside {
    border-top: 2px solid #E0E7EF;
  }
}

/*------------------ form stuff starts -------------*/
 form {
     padding-bottom: 16px;
}
 form label {
     font-weight: normal;
     font-style: italic;
     font-size: 0.95rem;
     color:rgba(1,16,34,0.6);
}

 form legend {
     font-size:1.2em;
     margin-bottom: 8px;
}
 fieldset {
     padding: 8px;
     border: 1px solid rgba(255, 255, 255, 0.5);
     background-color: rgba(255, 255, 255, 0.25);
}
 .form-element-wrapper {
     margin-bottom: 16px;
}
 .form-element {
     width: calc(100% - 18px);
    /* padding: 12px 8px;
     */
     padding: 12px 8px;
     border: none;
     border-radius: 1px;
     -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
}
.form-field {
 background-color: #F5F7F9;
 background-color:rgba(255, 255, 255, 0.9);
 border: 1px solid rgba(0, 33, 71, 0.4);

 border-radius: 2px;
}

.form-field:focus {
 background-color:rgba(255, 255, 255, 1);

}



 select, input[type="text"], input[type="password"]{
     font-size: 1.2rem;
     padding: 12px 8px;
}
 .form-field-focus, .form-field:focus, input[type="text"]:focus {
     color: #333333;
     border-color: #999999;
}

input.submit
 , .form-button {

  color: #fff;
    background-color: #0167B8;
    box-sizing: content-box;
    -moz-box-sizing: content-box;

    cursor: pointer;



    font-size: 1.5rem;
    border-radius: 4px;
    text-decoration: none;
}

input.submit:hover,
  .form-button:hover,
  input.submit:focus,
    .form-button:focus {
     background-color: #005096;
}


 .actions .priotiy-2 p a {
     background: #f3f3f3;
     color: #444;
     border: 1px solid #f2f2f2;
}

 .form-error {
     padding: 0;
}
 .form-help {
     color: #555;
     font-style: italic;
}
 .form-button.secondary {
     background: #CBD7E1;
     color:#394D5B;
     border: 1px solid #BCCDDA;
     font-size: 1.25rem;
     padding: 8px;
     margin-top: 16px;
}
 .form-button.secondary:hover,
 .form-button.secondary:focus {
     background: #CFE0ED;
}
 .inline-buttons {
     margin-top: 32px;
}

 .inline-x§ input:last-child{
     margin-right: 0;
}
 .list-help {
    /* margin-top: 40px;
     */
    /* offset padding on first anchor - why?*/
     margin-top: 0.75rem;
     list-style: none;
}
 .list-help-item a {
     display: block;
     padding: 6px 0;
}
 .item-marker {
     color: #be0000;
}




 legend {
     font-weight: bold;
}
fieldset.dob select {
    height: 48px;
}


#dob_dd{

  max-width: 2rem;
}

#dob_yyyy{

  max-width: 4rem;
}

#set_challenge_form .form-element-wrapper{




}


/*------------------ form stuff ends -------------*/



/*------------------ footer stuff starts -------------*/


 body footer {
     clear: both;
     margin:  0 ;
     padding: 32px;
     border-top: 1px solid #E0E7EF;
     background-color: transparent);

}
 footer * {
     font-size: 0.9rem;
     color: #666;
}
 .footer-links a:link, .footer-links a:visited {
     color: #444444;
     font-weight: bold;
}
 .footer-links a:after {
     content: "\00a0\00a0\00a0|\00a0\00a0";
}
 .footer-links a.last:after {
     content: "";
}



footer ul {

list-style: none;
padding: 0;
margin: 0;

}

footer ul li{


margin-bottom: 0.25rem;

}




@media screen and (min-width: 768px)
{
  footer {
    min-height: 179px;
  }
  footer img.oxcrest {

  margin-right: 64px;
  float: left;
  }

  footer ul {


  margin-top: 16px;

  }

}
/*------------------ footer stuff starts -------------*/




/* Screenreader support stuff */
 .sr-only {
     border: 0 !important;
     clip: rect(1px, 1px, 1px, 1px) !important;
    /* 1 */
     -webkit-clip-path: inset(50%) !important;
     clip-path: inset(50%) !important;
    /* 2 */
     height: 1px !important;
     margin: -1px !important;
     overflow: hidden !important;
     padding: 0 !important;
     position: absolute !important;
     width: 1px !important;
     white-space: nowrap !important;
    /* 3 */
}





/* - -- --- -------------- homepage styles start ------------- --- -- - */

 body#home h1 {
   font-size: 2rem;
     width: 100%;
     clear: both;
     padding-top: 1rem;
}
 body#home p {
     margin: 4px auto ;
}


  .actions p {
     margin: 0 0 16px 0;
     display:block;
     width: 100%;
     font-style: italic;
}

 .actions p a{
  /*  font-size: 1.4rem;
     padding: 16px 56px 8px 8px;
*/
    font-size: 1.2rem;
    padding: 16px 8px 8px 8px;
     display: block;
     margin: 0 0 8px 0 ;
     min-height: 2em;
     background: transparent url("../images/chevron-right.png") no-repeat right center ;
     text-align: left;
     text-decoration: none;
      position: relative;
}

 .actions p a:hover, .actions p a:focus{
    color: #182700;
}

#actions a span.item-letter{
color: #0167B8;
font-weight: bold;
font-size: 2rem;
text-transform: uppercase;
opacity: 1;
}





/*
***
*****
HOMEPAGE RESPONSIVENESS STUFF STARTS
*****
***
*/

 @media only screen and (min-width: 768px) {



      .actions p {
         width: 309px;
         width: 400px;
         width: 49%;
         float: left;
           min-height: 12rem;
    }

     .actions p {

          min-height: 12rem;
   }

     .actions p a{
       padding: 16px 16px 8px 24px;
         margin: 0 8px 8px 0 ;
         min-height: 6rem;

    }

    .actions   p a{

       padding-top: 32px;
  }

 span.option-text{
    padding-top: 8px;

}
  .priority-1 span.option-text{

    padding-top: 16px;

}

.option-e span.option-text,
.option-f span.option-text{

  padding-top: 0px;

}

.option-b span.option-text{

  padding-top: 16px;

}


  .item-letter {
  /*  top: 28%;
*/
  }


}
/* larger desktop homepage */
 @media only screen and (min-width: 1200px) {
      .actions p {
         width: 32%;
    }
     .actions p a{
         font-size: 1.2rem;
         background-size: 64px;
         padding-top: 16px;


    }

    .actions div.priority-1  p a{

       min-height: 4rem;
  }

  ul.column-list {
      column-count: 6;
  }

  div.the-others {
      width: 251px;
 }
 .option-d span.option-text{

   padding-top: 16px;

 }

}

 @media only screen and (min-width: 640px) {
     div.the-others {
         float: left;
         width: calc(50% - 32px);
    }

}

/*
***
*****
HOMEPAGE RESPONSIVENESS STUFF ENDS
*****
***
*/

 .actions {
     margin: 16px 0 0 0 ;
     clear: both;
}
 .actions p {
     text-align: left;
}

 ul.column-list {
     column-count: 2;
     list-style-type: none;
     padding-left: 0;
     margin-left: 0;
}
 ul.column-list li{
     font-style: italic;
     margin-bottom: 0.7em;
}

#home h2 {
     border-bottom: 1px solid #f3f3f3;
     font-size: 1.8rem;
     margin: 1rem 0 ;
     clear: both;
}
 .disambiguation h3 {
     font-size: 1.4rem;
}
 .fo .actions p:last-child {
     margin: 0 ;
}
 .actions {
     clear: both;
}

header,
 section {
     margin: 0 16px;
}
 div.the-others {

     margin-right: 32px;
     margin-bottom:2em;
     min-height: 10em;

     position: relative;
}

@media only screen and (min-width: 1200px) {
    div.the-others {

min-height: 8em;
   }

 }
 div.the-others:last-child {
     margin-right: 0;
}
div.the-others a.further-info{
    background: transparent url("../images/chevron-right.png") no-repeat right center ;
    background-size: 24px;
    padding-right: 24px;
    position: absolute;
    bottom: 0px;
    color:#555;
    font-style: italic;
}

div.the-others a.further-info:hover,
div.the-others a.further-info:focus{
    color:#000;
}


/* - -- --- -------------- homepage styles end ------------- --- -- - */



.one-of-two {

    margin-bottom: 1rem;
}


/*
***
*****
CHANGE IS THE ONLY CONSTANT: HERE IS MY RESPONSE (...IVENESS...)
*****
***
*/




/*
***
*****
TABLET / v SMALL DESKTOP STUFF STARTS
*****
***
*/





@media only screen and (min-width: 640px) {
    header img {
      clear: none;
      float: left;
  /*    margin: 16px 32px 64px 0;
*/
}


    .one-of-two {
        width: 42%;
        float: left;
        margin-right: 1rem;
   }

   /* horizontally align the date of birth fields */
    fieldset.dob .form-element-wrapper {
        display: inline-block;
        width: 130px;
        vertical-align: top;
        margin-right: 16px;
   }
    fieldset.dob .form-element-wrapper:last-child {
        margin-right: 0px;
   }
    fieldset.dob .form-element-wrapper label{
        display: block;
        margin-bottom: 8px;
   }
    .two-for-one p, .two-for-one .form-element-wrapper{
        display: inline-block;
        vertical-align: top;
        width: 46%;
        margin-right: -1%;
   }
    .two-for-one .form-element-wrapper input{
        width: calc(100% - 18px);
   }
    .two-for-one p{
        width: 8%;
        text-align: center;
        padding-top: 1.5rem;
        font-style: italic;
        font-size: 1.5rem;
   }

  }


@media only screen and (min-width: 540px) {

    body{
      background-color: #002147;
      background-color: rgba(68, 104,125,1);
      background-image: url("../images/rad-cam.jpg");
      background-image: url("../images/ox-aad-bg.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }

    .wrapper{
      background-color: rgba(255, 255, 255, 0.9);
      -webkit-box-shadow: 0px 0px 32px 0px rgba(47,64,94,0.04);
      -moz-box-shadow: 0px 0px 32px 0px rgba(47,64,94,0.04);
      box-shadow: 0px 0px 32px 0px rgba(47,64,94,0.04);

    }




    .wrapper section,
    .wrapper footer,
    .wrapper header{

    padding:  32px;

    }



    h1 {
    clear: both;
    }

    header,
    .column,
    footer {
    /*  max-width: 623px;
    */
    margin: 32px auto;

    }

    header {
      margin:  0;

      }

    .user-messages {
    /* min-height: 96px;
    */
    margin: 0px ;
    width: auto;

    }

    section {
    margin:  0;

    }

    .column {
    float: left;
    margin: 0px 32px 32px 0px;

    }


    .column.one {
    width: calc(55% - 64px);

    }

    .column.two {
    width: calc(45% - 64px);

    }

}


@media only screen and (min-width: 992px) {


  .wrapper {
  margin: 64px auto;

  }
  h1 {
      margin: 1rem 0 1rem 0;
      padding-top: <1rem;></1rem;>
 }

#servicename {

  padding-top: 32px;
}


.oxcrest{

width: auto;
}



  ul.column-list {
  column-count: 4;
  margin-top: 2rem;
  }

  h1 {
  font-size: 1.6rem;
  }

  h2 {
  font-size: 1.45rem;
  }
  h3 {
  font-size: 1.3rem;
  }
  h4 {
  font-size: 1.15rem;
  }

  .wrapper,
  header,
  footer {
  max-width: 992px;
  }

  section {
      margin: 0 32px;
      margin: 0;
 }

 header{
   margin: 0;
 }
}

/*
***
*****
SMALL DESKTOP STUFF ENDS
*****
***
*/




/*
***
*****
LARGE DESKTOP STUFF STARTS
*****
***
*/


@media only screen and (min-width: 1200px) {



  header {
       padding:  32px 0;
       margin: 0;
  }







   body#verify .column.one {


   }


header img#webauth {
/*  margin-right: 120px;
*/  }



}


@media only screen and (min-width: 1400px) {

.wrapper {
margin: 142px auto;
padding: 0;

}



}
/*
***
*****
LARGE DESKTOP STUFF ENDS
*****
***
*/







/* layout-specific instruction hide/show stuff  */
@media only screen and (min-width: 540px) {
  .one-col-only {

  display: none;

  }
}

@media only screen and (max-width: 540px) {
  .two-col-only {

  display: none;

  }
}



/* - -- --- -------------- av styles start ------------- --- -- - */

.not_received {
  margin-top: 8px;
}
/* - -- --- -------------- av styles start ------------- --- -- - */

/* - -- --- -------------- password strength styles ------------- --- -- - */


/* Password meter bar */
#pwmetercontainer {width: 100%; height:1em; padding: 0; margin: 0;


  border: 1px solid #EDF0F4;
  background-color: rgba(68, 104, 125, 0.1);
   overflow: hidden; line-height: 0;}
#pwmeter {height: 1em; display: inline-block; padding: 0; margin: 0;}

/* Password box highlighting */
.pwm0 {width: 7%; background-color: rgba(199, 45, 77, 0.9)  /* red */;}
.pwm1 {width: 24%; background-color: rgba(199, 45, 77, 0.9)  /* red */;}
.pwm2 {width: 46%; background-color: rgba(199, 45, 77, 0.9)  /* red */;}
.pwm3 {width: 73%; background-color: rgba(249, 180, 42, 0.9)  /* orange */;}
.pwm4 {width: 100%; background-color: rgba(144, 208, 59, 0.9) /* green */;}

#pwhints {color: #000; font-weight: bold;}
#pwhintwarn {color: #7B0000; font-weight: bold;}
#pwhintsuggest {color: #000; font-style: italic;}

#pwdfeedback {

  margin-bottom: 1rem;
}

/* - -- --- -------------- password strength styles end ------------- --- -- - */