@font-face {
 font-family: "Nunito Sans Light";
 src: url('https://pierrrysoftware.github.io/gymboree-frontend/jj/fonts/NunitoSans-Light.ttf') format('truetype');
 font-weight: 300;
 font-style: normal;
}
@font-face {
 font-family: "Nunito Sans Regular";
 src: url('https://pierrrysoftware.github.io/gymboree-frontend/jj/fonts/NunitoSans-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: "Nunito Sans Semi Bold";
 src: url('https://pierrrysoftware.github.io/gymboree-frontend/jj/fonts/NunitoSans-SemiBold.ttf') format('truetype');
 font-weight: 600;
 font-style: normal;
}
@font-face {
 font-family: "Sackers Heavy Gothic";
 src: url('https://pierrrysoftware.github.io/gymboree-frontend/jj/fonts/Monotype-Sackers-Heavy-Gothic.ttf') format('truetype');
 font-weight: 900;
 font-style: normal;
}

.container{
 width: 95%;
 max-width: 1200px;
 margin: 0 auto;
}

.pref-center-main-title{
 font-family: "Sackers Heavy Gothic", sans-serif;
 color: #1b375d;
 text-transform: uppercase;
 margin-top: 15px;
 margin-bottom: 25px;
}
.pref-center-title{
 font-family: "Sackers Heavy Gothic", sans-serif;
 color: #1b375d;
 text-transform: uppercase;
}

.pref-center-subtitle{
 font-family: "Nunito Sans Semi Bold", sans-serif;
 color: #63666a;
}

.blue-text{
 color: #1b375d;
}

.text-center{
 text-align: center;
}

.box-container{
 border: 1em solid #efefef;
 padding: 0.5rem 2em 2rem;
 margin: 0 auto 1em;
 max-width: 600px;
}

.box-container hr{
 border-width: 0;
 border-top: 1px solid #e1e1e1;
 margin-bottom: 1.25rem;
}

.email-input{
 border:1px solid #e1e1e1;
 padding:1rem;
 max-width: 520px;
 width:100%;
 text-align: center;
 font-size: 0.9rem;
 box-sizing: border-box;
 margin-top: 6px;
}

.button{
 box-sizing: border-box;
 cursor: pointer;
 display: inline-block;
 text-align: center;
 transition: all 0.3s ease;
 border: none;
 border-radius: 0;
 line-height: 2.25rem;
 padding: 0 1.875rem;
 margin-bottom: 0.9375rem;
 width: auto;
 font-family: "Nunito Sans Light", sans-serif;
 font-weight:300;
 font-size: 0.9rem;
 letter-spacing: 0.02em;
 text-decoration: none;
 text-transform: uppercase;
 background: #1b375d;
 color: #fff;
 outline: 0;
}
.update-preference-btn{
 margin-top:10px;
}
.button:hover{
 background: #071d36;
 color: #fff;
}
.button:focus{
 box-shadow: none;
}
.button:active, .button:hover {
 outline: 0;
}
.field-wrapper{
 max-width: 280px;
 margin: 0 auto;
 text-align:left;
}

.gray-bg{
 background-color: #f3f3f3;
 padding: 0.25rem 1.5rem 0.5rem;
 max-width: 700px;
 margin: 1rem auto 0;
}

/* Radio Styling */
input[type="checkbox"],
input[type="radio"] {
 opacity: 0;
 position: absolute;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
 position: relative;
 font-family: "Nunito Sans Regular", sans-serif;
 color: #63666a;
 text-transform: uppercase;
 font-size:10px;
}
@media (min-width: 350px) {
 input[type="checkbox"]+label,
 input[type="radio"]+label {
  font-size:12px;
 }
}
@media (min-width: 410px) {
 input[type="checkbox"]+label,
 input[type="radio"]+label {
  font-size:16px;
 }
}

input[type="checkbox"]+label span,
input[type="radio"]+label span {
 display: block;
 margin-left: 10px;
}

input[type="checkbox"]+label::before,
input[type="radio"]+label::before {
 content: "";
 background: #fff;
 border: 1px solid #e1e1e1;
 box-sizing: border-box;
 display: inline-block;
 float: left;
 vertical-align: text-bottom;
 width: 1.875rem;
 height: 1.875rem;
 margin-right: 0.5rem;
 text-align: center;
 position: relative;
 top: 1px;
}

@media only screen and (min-width: 768px) {
 input[type="checkbox"]+label::before,
 input[type="radio"]+label::before {
  width: 1.5625rem;
  height: 1.5625rem;
 }
}

.label-inline input[type="checkbox"]+label::before,
.label-inline input[type="radio"]+label::before {
 float: none;
}

input[type="checkbox"]+label>span,
input[type="radio"]+label>span {
 display: inline-block;
 position: relative;
 top: -5px;
}
@media only screen and (min-width: 410px) {
 input[type="checkbox"]+label>span,
 input[type="radio"]+label>span {
  top: 0px;
 }
}
@media only screen and (min-width: 768px) {
 input[type="checkbox"]+label>span,
 input[type="radio"]+label>span {
  top: 2px;
 }
}

input[type="checkbox"]:checked+label::before {
 background: url("../images/svg-icons/Checkbox_Checked.svg") no-repeat center;
}

input[type="radio"]+label {
 display: block;
 clear: both;
 margin-bottom: 15px;
}

.options-inline input[type="radio"]+label {
 display: inline;
 clear: none;
}

.options-inline input[type="radio"]+label:nth-of-type(n+2)::before {
 margin-left: 2rem;
}

input[type="radio"]+label::before {
 border-radius: 50%;
 float: none;
 position: relative;
 top: 2px;
}

input[type="radio"]:checked+label::before {
 background: url("https://gymboree.com/on/demandware.static/Sites-Gymboree-Site/-/en_US/v1499438296128/images/svg-icons/Radio_Selected.svg") no-repeat center;
 background-size: 30px;
 border-color: #003057;
}

@media only screen and (min-width: 768px) {
 input[type="radio"]:checked+label::before {
  background-size: 25px;
 }
}


.pref-center-main-title .mail-icon{
 height:33px;
 width:33px;
 position: relative;
 top: 9px;
 margin-right:10px;
}

.logo-wrapper{
 margin-top: 3rem;
 text-align:center;
}
.logo-wrapper a{
 display: inline;
}
.jj-logo{
 max-width: 390px;
 display: inline;
}
.header-container hr{
 border-color: #e1e1e1;
 border-width: 0;
 border-bottom-width: 1px;
}
.header-link-wrapper{

}
.header-link-wrapper ul{
 text-align:center;
 padding-left: 0;
 margin-bottom: 0;
}
.header-link-wrapper ul li{
 display: inline-block;
 padding: 10px 15px 10px;
}
.header-link-wrapper ul li a{
 font-family: "Sackers Heavy Gothic";
 text-transform: uppercase;
 color:#63666a;
 text-decoration: none;
 font-size: 14px;
}
.header-link-wrapper ul li a:hover{
 color:#1b375d;
}
