/* 
	SENIORWEB.NL STYLESHEET
	filename			: home.css
	description		: Specific styles only for homepage. Only use overrides or new styles!
*/
/* #region GREY LAYOUT */
/* new */
/* old -- still in use! */
/* #endregion */
/* #region BRAND COLORS */
/* for reference: old colors are behind every value in comments */
/*#0A665A;*/
/*#4AA89B;*/
/*#92CBC3;*/
/*#C6E2DE;*/
/*#DBEEEB;*/
/*#EBF7F5;*/
/*#D46124;*/
/*#FB9860;*/
/*#FDC19F;*/
/*#FEEADF;*/
/*#004878;*/
/*#4086B6;*/
/*#8CB6D3;*/
/*#D9E7F1;*/
/*#0084BD;*/
/*#40B7EA;*/
/*#8CD4F2;*/
/*#D9F1FB;*/
/*#A82623;*/
/*#DA6260;*/
/*#E9A19F;*/
/*#F8E0DF;*/
/*#71A133;*/
/*#AAD56F;*/
/*#CCE6A8;*/
/*#EEF7E2;*/
/*#D99800;*/
/*#FFC740;*/
/*#FFDD8C;*/
/*#FFF4D9;*/
/*#7A407A;*/
/*#B97FB9;*/
/*#D5B2D5;*/
/*#F1E6F1;*/
/*#A10541;*/
/*#D4447D;*/
/*#E58FB1;*/
/*#F7DAE5;*/
/* #endregion */
/* #region OTHER BRAND'S COLORS */
/* #endregion */
/* SEARCH COLORS */
/* #region GENERAL */
.page h2.large {
  line-height: 1em;
  padding: 0;
}
/* #endregion */
.hexagon {
  display: none;
}
@media screen and (min-width: 650px) {
  .hexagon {
    display: block;
    overflow: hidden;
    padding-bottom: 115.47344111px;
    position: absolute;
    visibility: hidden;
    width: 100px;
  }
  .hexagon.top-left {
    top: 2%;
    left: 2%;
    -webkit-transform: rotate(-80deg) skewY(30deg);
    -ms-transform: rotate(-80deg) skewY(30deg);
    transform: rotate(-80deg) skewY(30deg);
  }
  .hexagon.top-right {
    right: 52%;
    top: 2%;
    -webkit-transform: rotate(-40deg) skewY(30deg);
    -ms-transform: rotate(-40deg) skewY(30deg);
    transform: rotate(-40deg) skewY(30deg);
  }
  .hexagon.bottom-left {
    bottom: 2%;
    left: 2%;
    -webkit-transform: rotate(-80deg) skewY(30deg);
    -ms-transform: rotate(-80deg) skewY(30deg);
    transform: rotate(-80deg) skewY(30deg);
  }
  .hexagon.bottom-right {
    bottom: 2%;
    right: 52%;
    -webkit-transform: rotate(-40deg) skewY(30deg);
    -ms-transform: rotate(-40deg) skewY(30deg);
    transform: rotate(-40deg) skewY(30deg);
  }
  .hexagon > div {
    background: #FA752B;
    color: #FFFFFF;
    display: inline-flex;
    height: 100%;
    position: absolute;
    text-align: center;
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    visibility: visible;
    width: 100%;
  }
  .hexagon > div > div {
    font-size: 1.1em;
    margin: auto;
  }
}
/* #region CONTACT INFO / USP RIBBON */
#contact-info,
#usp-ribbon {
  background: #F9F9F9;
  padding: 0.3em 4%;
}
#contact-info strong,
#usp-ribbon strong {
  margin-right: 1em;
}
#contact-info ul,
#usp-ribbon ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
}
#contact-info li,
#usp-ribbon li {
  display: inline-block;
  margin: 0 0.9em 0 0;
}
#contact-info li:hover:before,
#usp-ribbon li:hover:before {
  color: #009EE3;
}
#contact-info li a,
#usp-ribbon li a {
  text-decoration: none;
}
#contact-info li a:hover,
#usp-ribbon li a:hover {
  text-decoration: underline;
}
#contact-info li:before,
#usp-ribbon li:before {
  color: #0E8B7A;
  margin-right: 0.2em;
}
/* #endregion */
/* #region MAIN CONTENT : NEWS, ARTICLES & TIPS */
.highlights {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  float: left;
  margin-right: 3%;
  width: 65.66667%;
}
.highlights h2,
.highlights .item,
.highlights .link-container {
  width: 48%;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.highlights h2 {
  font-size: 1.72em;
  line-height: 1.2;
  padding: 0 0 0.3em 0;
  border-bottom: 1px solid #E6E6E6;
}
.highlights .item {
  width: 48%;
  float: left;
  padding: 1.5em 0;
  border-bottom: 1px solid #E6E6E6;
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  display: block;
}
.highlights img {
  height: auto;
  border-radius: 5px;
  float: left;
  max-width: 100px;
  width: 30%;
}
.highlights .text {
  float: left;
  padding-left: 5%;
  width: 65%;
}
.highlights .title {
  font-weight: bold;
}
.highlights .title-news {
  -webkit-order: 1;
  order: 1;
}
.highlights .title-tips {
  -webkit-order: 2;
  order: 2;
}
.highlights .item-news-0 {
  -webkit-order: 3;
  order: 3;
}
.highlights .item-news-1 {
  -webkit-order: 5;
  order: 5;
}
.highlights .item-tips-0 {
  -webkit-order: 4;
  order: 4;
}
.highlights .item-tips-1 {
  -webkit-order: 6;
  order: 6;
}
.highlights .link-container {
  -webkit-order: 9;
  order: 9;
}
@media screen and (max-width: 900px) {
  .highlights {
    width: 100%;
  }
  .highlights h2,
  .highlights .item,
  .highlights .link-container {
    width: 100%;
  }
  .highlights .title-news,
  .highlights .title-tips,
  .highlights .item-news-0,
  .highlights .item-news-1,
  .highlights .item-tips-0,
  .highlights .item-tips-1,
  .highlights .link-container {
    -webkit-order: 0;
    order: 0;
  }
  .highlights .title-tips {
    margin-top: 1em;
  }
}
.no-flexbox .highlights .item-tips-1,
.no-flexbox .highlights .item-news-1 {
  margin-left: 4%;
  border-top: 1px solid #E6E6E6;
}
@media screen and (max-width: 900px) {
  .no-flexbox .highlights .item-tips-1,
  .no-flexbox .highlights .item-news-1 {
    border-top: 0;
  }
}
.no-flexbox .highlights .title-tips {
  margin-top: 1em;
}
#content #usp-ribbon h1 {
  display: inline;
  line-height: 1.6em;
  font-size: 17px;
}
/* #endregion */
/* #region FEATURED TIPS */
#featured-tips,
#featured-tips-duplicate {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#featured-tips .btn,
#featured-tips-duplicate .btn {
  white-space: nowrap;
  margin: 0.5em 0.3em 0 0;
}
#featured-tips .btn:before,
#featured-tips-duplicate .btn:before {
  color: #FFFFFF !important;
}
#featured-tips .banner img,
#featured-tips-duplicate .banner img {
  margin-top: 2em;
}
/* #endregion */
/* #region UNIQUE SELLING POINTS */
#usp {
  background: #FFFFFF;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em 4% 1em 4%;
}
#usp h2 {
  background: #FEEADF;
  padding: 1.5% 0 0 1.5% !important;
}
#usp .item {
  background: #feeadf;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1.5%;
  position: relative;
}
#usp .item:nth-of-type(3):before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-top: 60px solid #feeadf;
  border-right: 60px solid #FFFFFF;
}
#usp .item strong {
  display: block;
}
#usp .item img {
  float: right;
  margin: 0 0 0.5em 0.5em;
}
#usp .item span.icon {
  float: right;
  font-size: 4.5em;
  line-height: 1em;
  margin-left: 0.1em;
}
#usp .item span.icon:before {
  color: #fdc1a0;
  margin-right: 0;
}
#usp .item .linkbutton {
  background: #FFFFFF;
}
#usp .item ul {
  list-style-type: none;
  margin: 0;
}
#usp .item ul li {
  margin-bottom: 0.5em;
}
/* #endregion*/
@media screen and (max-width: 649px) {
  #featured-tips {
    clear: both;
    margin-top: 1.5em;
  }
  #featured-tips:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }
  #usp .item {
    margin-bottom: 1em;
  }
  #usp .item p {
    margin-bottom: 0.3em;
  }
  #useful-links .sw-table:nth-of-type(1) td:nth-of-type(1):before {
    content: "Handig";
  }
  #useful-links .sw-table:nth-of-type(2) td:nth-of-type(1):before {
    content: "Computer";
  }
  #useful-links .sw-table:nth-of-type(3) td:nth-of-type(1):before {
    content: "Computerveiligheid";
  }
  #useful-links .sw-table:nth-of-type(4) td:nth-of-type(1):before {
    content: "Hobby";
  }
  #useful-links .sw-table:nth-of-type(5) td:nth-of-type(1):before {
    content: "Gezondheid";
  }
  #useful-links .sw-table:nth-of-type(6) td:nth-of-type(1):before {
    content: "Geld en wonen";
  }
  #useful-links .sw-table:nth-of-type(7) td:nth-of-type(1):before {
    content: "Leren";
  }
  #useful-links .sw-table:nth-of-type(8) td:nth-of-type(1):before {
    content: "Seniorensites";
  }
  #useful-links .sw-table:nth-of-type(9) td:nth-of-type(1):before {
    content: "Samenleving";
  }
  #content #contact-info {
    display: none !important;
  }
  #cta-balk-wrapper + #contact-info {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 900px) {
  #usp .item {
    padding: 1em;
  }
  #usp .item:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }
  #featured-tips-duplicate {
    padding: 0 4%;
  }
}
@media screen and (min-width: 650px) {
  #usp-ribbon {
    text-align: center;
  }
  #content #main-content {
    padding: 0 3% 1.5em 4%;
    width: 50%;
    float: left;
  }
  #content #main-content.main-content-account {
    width: auto;
    float: none;
  }
  #usp {
    clear: none !important;
    float: right;
    padding: 0 4% 1em 0;
    width: 50%;
  }
  #usp .item {
    float: none;
    margin-bottom: 1em;
  }
  #usp .item .only_on_medium,
  #usp .item .not_on_small {
    display: inline !important;
  }
  #featured-tips-duplicate {
    margin-bottom: 1.5em;
  }
}
@media screen and (min-width: 900px) {
  #content #main-content {
    width: 100%;
    padding: 1em 4% 2em;
  }
  #content #main-content #featured-tips {
    float: left;
    margin-top: 0;
    margin-right: 3%;
    width: 31.333%;
  }
  #content #main-content #featured-tips .item {
    padding-top: 1.5em;
    margin: 1em 0;
    min-height: 108px;
  }
  #content #main-content #featured-tips .item:nth-of-type(2) {
    padding-bottom: 1em;
  }
  #content #main-content #featured-tips .item .item-body span.icon {
    display: block;
  }
  #content #main-content #featured-tips .item .item-body span.icon:after {
    float: right;
    margin-top: 0.3em;
    white-space: nowrap;
  }
  #content #main-content #featured-tips {
    margin-right: 0;
    padding-left: 1.5%;
  }
  #usp {
    display: flex;
    flex-wrap: wrap;
    padding: 1em 4%;
    width: 100%;
  }
  #usp h2 {
    width: 100%;
    padding-top: 17px !important;
  }
  #usp .item {
    float: left;
    min-height: 13em;
    width: 31.333%;
    padding-top: 1em;
    padding-bottom: 3em;
  }
  #usp .item:nth-of-type(2),
  #usp .item:nth-of-type(3) {
    padding-left: 4.5%;
    width: 34.333%;
  }
  #usp .item span {
    display: block;
    min-height: 131px;
    max-height: 140px;
    overflow: hidden;
  }
  #usp .item .linkbutton {
    bottom: 1em;
    display: block;
    position: absolute;
  }
  #usp .item .only_on_large,
  #usp .item .not_on_small,
  #usp .item .not_on_medium {
    display: inline !important;
  }
}
@media screen and (min-width: 1010px) {
  #usp-ribbon {
    text-align: left;
  }
}