/* responsive css for gparents.com */
/* note: break: 480px; padding: 20px; content width: 440px; */

.registration-info.decorated.activity-show {
	  width: 462px;
	  height: 715px;
	  background: #fffae5;
	  border: none;
	  border-radius: 0px;
	  box-shadow: none;
	  margin: 0 auto;
	  padding: 0 0 0 0;
}
/*body {
	min-width: 480px;
  }*/
.registration-info.decorated.activity-show * {
	  display: none !important;
}

.registration-info.decorated.activity-show {
	  background-color: #fff;
	  background: url("https://d1hekt5vpuuw9b.cloudfront.net/assets/premium/217e356e1c31c8b93001dde206a3f97c_value-prop.jpg");
	  background-size: 100%;
	  background-repeat: no-repeat;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
}

.form.login {
	  -webkit-transition: top .2s ease-out;
	  -moz-transition: top .2s ease-out;
	  -o-transition: top .2s ease-out;
	  transition: top .2s ease-out;
}

.main-hd-wrap .login-info-wrap2 {
	  top: 1px;
}


/*
  @media screen and (max-width: 499px) and (min-width: 480px) {
	.registration-info.decorated.activity-show {
	-webkit-transition: top .2s ease-out;
	-moz-transition: top .2s ease-out;
	-o-transition: top .2s ease-out;
	transition: top .2s ease-out;
	height: 0px;
	width: 442px;
	background: url(/prem-benefits-prop-small-png);
	};
  }*/

@media screen and (max-width: 480px) {
	  
    /* for webkit, hide the scrollbars when in condensed/mobile view.. since they only detract from UI at this width */
    ::-webkit-scrollbar {
	  /*display: none;
		  nevermind. this is a problem in IE.. maybe later.
	    */
    }

    .registration-info.decorated.activity-show {
	      -webkit-transition: all .29s ease-in;
	      -moz-transition: all .29s ease-in;
	      -o-transition: all .29s ease-in;
	      transition: all .29s ease-in;
	      background-color: #fff;
	      background: url(/prem-benefits-prop-small-png);
	      background-repeat: no-repeat;
	      width: 442px;
	      height: 172px;
	      transition-iteration-count: 1;
	      transition: width .22s ease, height .75s ease;
    }

    .main-hd-wrap .login-info-wrap2 {
	      left: 208px;
    }

    .main-hd-wrap .inner-bg {
	      padding: 20px 20px;
    }

    .frontend-user-wrap {
	      padding: 0px;
	      padding-left: 0px;
    }

    .frontend-user-wrap.registration {
        padding-left: 0px;
    }

    /*.interior-content h1 a:first-of-type {
	    padding-left: 80px;
      }*/
    div.aga-logo {


    }
    .next-prev .links {
	      display: inline-block;
	      width: 100%;
        margin-top: 15px;
    }
    .next-prev .links a:before{
        content: '>>>';
        float: right;
        margin-right: 50px;
    }
    .interior-content > img {
	      width: 88%;
	      margin-left: 0px;
	      margin-right: 50px
    }
    .next-prev .aga-logo {
        margin-right: 0;
    }
    .bd {
	      /*-webkit-transition: all .29s ease-in;
	        -moz-transition: all .29s ease-in;
	        -o-transition: all .29s ease-in;
	        transition: top .29s ease-in;
	        transition-iteration-count: 1;*/
	      width: 480px;
	      margin-left: 0px;
    }

    .frontend-user-wrap .half input, .frontend-user-wrap .half select {
	      width: 179px;
	      -webkit-transition: width .29s ease-in;
	      -moz-transition: width .29s ease-in;
	      -o-transition: width .29s ease-in;
	      transition: width .29s ease-in;
	      transition-iteration-count: 1;
    }

    .frontend-user-wrap .gp-form input, .frontend-user-wrap .gp-form select {
	      -webkit-transition: width .29s ease-in;
	      -moz-transition: width .29s ease-in;
	      -o-transition: width .29s ease-in;
	      transition: width .29s ease-in;
	      transition-iteration-count: 1;
    }



    div.portlet {
	      padding-left: 20px;
	      padding-right: 20px;
	      padding-top: 10px;
    }

    .ft .footer-nav li, .ft .footer-nav li.first, .main-nav ul li {
	      padding-left: 20px;
	      -webkit-transition: padding .29s ease-in;
	      -moz-transition: padding .29s ease-in;
	      -o-transition: padding .29s ease-in;
	      transition: padding .29s ease-in;
    }

    .main-nav ul li a, .main-nav a.grandkids-color {
	      padding-left: 0px;
    }

    .ft {
	      width: 480px;
	  /*-webkit-transition: width .29s ease-in;
	    -moz-transition: width .29s ease-in;
	    -o-transition: width .29s ease-in;
	    transition: width .29s ease-in;*/
    }

    .ft .footer-bottom-wrap h3 {
	      padding-left: 0px;
	  /*-webkit-transition: padding .29s ease-in;
	    -moz-transition: padding .29s ease-in;
	    -o-transition: padding .29s ease-in;
	    transition: padding .29s ease-in;*/
    }

    .frontend-user-wrap a.facebook-login {
	      width: 100%;
	      background: url('/img/sprite.png') 11px -450px no-repeat;
    }

    .related-items .related-item {
	      width: 390px;
	      height: 370px;
	  /*-webkit-transition: all .29s ease-in;
	    -moz-transition: all .29s ease-in;
	    -o-transition: all .29s ease-in;
	    transition: all .29s ease-in;*/
    }

    .related-items .related-item img:first-of-type {
	      width: 100%;
	  /*-webkit-transition: all .29s ease-in;
	    -moz-transition: all .29s ease-in;
	    -o-transition: all .29s ease-in;
	    transition: width .29s ease-in;*/
    }

    .related-item > .button-container {
	      width: 390px;
    }

    .doc .featured img:first-of-type {
	      width: 100%;
    }

    .benefit-points .benefit {
	      width: 88%;
    }

    .doc.bd:not(.doc.bd.interior.deals) .description {
	      display: block;
	      height: 388px;
	      width: 390px;
    }

    .doc .description .button-container {
	      width: 391px;
			  /*right: auto;*/;
    }

    .benefit-points {
    }

    .doc .featured .description img:first-of-type {
	      height: 75px;
	      margin-left: 0;
	      top: 5px;
	      margin-top: 219px;
	      width: auto;
    }

    .doc .featured {
	      height: 388px;
	      width: 87%;
	  /*-webkit-transition: all .29s ease-in;
	    -moz-transition: all .29s ease-in;
	    -o-transition: all .29s ease-in;
	    transition: all .29s ease-out;*/
    }

    .featured a img:hover {
	      /*background: red !important;*/
	      opacity: .9 !important;
	      -webkit-box-shadow: inset 10px 10px 92px -10px rgba(0,0,0,0.75);
	      -moz-box-shadow: inset 10px 10px 92px -10px rgba(0,0,0,0.75);
	      box-shadow: inset 10px 10px 92px -10px rgba(0,0,0,0.75);
    }

    .button:active {
	      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        /* Plus vendor extensions */;
    }

    .benefits {
        margin-bottom: 5px;
    }

    .benefits .aga-logo {
        margin-top: 30px;
        margin-bottom: 0px;
        margin-right: 0;
        width: 50%;
    }

    .benefits .aga-logo img {
        max-width: 100%;
    }

    .benefits h1 {
        font-size: 20px !important;
        line-height: 25px !important;
    }

    .benefits p {
        display: none;
    }

    .benefit-points.single-row .login-popup {
        top: 60px;
    }

    .related-items .related-item .logos a img {
	      width: auto;
	      height: 65px;
	      margin-top: -15px;
    }

    .arrow-left {
	      display: none;
    }

    .next-prev .links a:before{
        content: '>>>';
        float: right;
        margin-right: 0px;
    }

    .next-prev .links {
        display: inline-block;
        width: 100%;
    }

    .next-prev {
	      margin: 0;
        padding: 0;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0;
        margin-right: 0px;
        width: auto; 
    }

    .interior {
        margin: 0;
        padding: 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0px;
        width: auto; 
    }
    .bd .interior .interior-content {
	      padding-left: 0px;
        padding-right: 0px;
        width: auto;
    }
    div.bd {
	      padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
        width: auto;
    }

    .doc .hd {
	      margin: 0;
        padding: 0;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0;
        margin-right: 0px;
        width: auto; 
    }
    .doc {
        margin: 0;
        padding: 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        margin-right: 0px;
        width: auto; 
    }
    .interior-content > img {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
    .interior-content h1 {
	      padding-bottom: 10px;
        border-bottom: 1px dotted #cfcbc6;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .next-prev {
	      margin: 0;
        padding: 0;
        padding-left: 0px;
        padding-right: 0px;
        width: auto; 
        margin-bottom: 10px;
    }

    .next-prev .aga-logo {
        width: 45%;
        display: inline-block;
        float: none;        
    }
    .next-prev h1 {
        position: relative;
        display: inline-block;
        font-size: 20px !important;
        line-height: 25px !important;      
        width: 54%;
    }
    

    div.thank-you {
	      padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        margin-left:00px;
    }

    /*doc.featured {
	    height: 388px;
      width: 100%;

}*/
    div.bd {
	      padding-left: 10px;
        padding-right: 10px;
    }
    .featured .description {
	      display: inline-block;
        height: inherit;
        width: 100%;
        top: 0px;
        right: 0px;
        text-align: center;
        float: left;
        clear: both;
    }
    .doc .featured .description img:first-of-type {
        height: auto;
        margin-left: 0;
        top: 0px;
        margin-top: 60%;
        padding: 0;
        width:40%
    }

    .benefits  p {
        padding-right:0px;
    }

    .featured .description p {
	      width:auto;
        margin-right: 40px;
        padding-right: 40px;
        right: 40px;
        left: 40px;
        position: relative;
        display: block;
        text-align: left;
    }
    .doc .description .button-container, .related-items .related-item {
	      width: 100%;
    }
    .related-items .related-item {
        position: relative;
        display: inline-block;
        margin-right: 9px;
        border: 1px solid #dedede;
        float: left;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-top:0px;
        height: inherit;
        padding-bottom: 80px
    }

    .doc .featured {
	      height: 388px;
        width: 100%;
        height: inherit;
        width: 100%;
        padding-bottom: 166px
    }
    .related-item > .button-container {
	      width: 100%;
    }
    .interior.deals .interior-content .top {
        height: auto;
    }
    .interior.deals .benefit-points .benefit .details {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 15px;
    }

    .interior.deals .benefit-points .benefit .details > .detail p
    {
	display: inline;
    }
    
    .interior.deals .benefit-points .benefit > p.description {
	      width: 360px;
    }
    .featured .description {
	      height: 100%;
    }
    .featured .description p {
	      display: none;
    }
    .interior.deals .interior-content h1 {
        display: none !important;
    }
    .interior-content h1 {
	      text-align: left;
    }

    .interior-content > .left {
        width: 100%;
        margin-right: 0;
        float: left;
        padding-left: 0;
    }

    .interior-content > .right {
        float: left;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-top: 10px;
    }


/*
  .bd {
	width: 100%;
	margin-left: 10px;
	margin-right: 10px;
  }
  .doc .description, .related-item > .button-container {
	width: 100%;
  }
  .doc .featured, .related-items .related-item {
	width: 94%;
  }
  .logos {
	height: 133px;
  }
  .doc .description,.doc .description .button-container {
	width: 100%;
  }
  div.thankyou {
	margin-left: 10px;
  margin-right: 10px;
  }*/

} /* @media max-width 480px */

.related-items .related-item .logos a img {
	  width: auto;
	  margin-top: -22px;
	  width: auto;
	  max-height: 61px;
	  margin-top: -5px;
	  max-width: 298px;
}

html, body {
	  overflow-x: auto;
}

img:hover {
	  /*
	    -o-transition-duration: .2s;
	    -o-transition-property: opacity;
	    -webkit-transition-duration: .2s;
	    -webkit-transition-property: all;
	    opacity: .9;*/;
}
/*.related-item > .button-container a:hover {
	
	}
	.doc .featured .description .button-container:hover, .related-item > .button-container:hover {
	background-color: #DDD;
	color: #555;
	cursor: pointer;
	transition: background-color .59s ease-out;
	filter: saturate(100%);
	-webkit-filter: saturate(100%);
	-moz-filter: saturate(100%);
	-o-filter: saturate(100%);
	-ms-filter: saturate(100%);
	transition: all .19s ease-out;
	}*/
.doc .featured .description .button-container a:hover, .related-item > .button-container a:hover {
		/*color: #555;*/
	  cursor: pointer;
	  transition: all .39s ease-out;
	  background: linear-gradient(to bottom, #69a1ca 0%,#89caf9 100%);
}

.featured > p:hover , .related-item > p  img:first-of-type:hover {
	  cursor: pointer;
	  -o-transition-duration: .2s;
	  -o-transition-property: all;
	  -webkit-transition-duration: .2s;
	  -webkit-transition-property: all;
	  -webkit-filter: sepia(70%);
};

.benefits {
	  margin-top: 10px;
	  margin-bottom: 0px;
	  padding-top: 15px;
}

@-webkit-keyframes fadeIn {
	  from {
		    opacity: 0;
	  }

	  to {
		    opacity: 1;
	  };
}

@-moz-keyframes fadeIn {
	  from {
		    opacity: 0;
	  }

	  to {
		    opacity: 1;
	  };
}

@keyframes fadeIn {
	  from {
		    opacity: 0;
	  }

	  to {
		    opacity: 1;
	  };
}

.fade-in {
	  opacity: 0;
    /* make things invisible upon start */
	  -webkit-animation: fadeIn ease-in .7s;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	  -moz-animation: fadeIn ease-in .7s;
	  animation: fadeIn ease-in .7s;
	  -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	  -moz-animation-fill-mode: forwards;
	  animation-fill-mode: forwards;
	  -webkit-animation-duration: .7s;
	  -moz-animation-duration: .7s;
	  animation-duration: .7s;
}

.fade-in.one {
	  -webkit-animation-delay: 0.35s;
	  -moz-animation-delay: 0.35s;
	  animation-delay: 0.35s;
}

.fade-in.two {
	  -webkit-animation-delay: .7s;
	  -moz-animation-delay: .7s;
	  animation-delay: .7s;
}

.fade-in.three {
	  -webkit-animation-delay: 1.2s;
	  -moz-animation-delay: 1.2s;
	  animation-delay: 1.2s;
}

.interior-content p.category {
	  margin-bottom: 10px;
}

.interior-content p.category {
	  font-weight: bold;
	  color: #083655;
	  font-family: 'Cutive', 'Times New Roman';
}