/* --------------------------------------------------------------------- */
/* ---------------------   FONTS DECLARATIONS   ------------------------ */
/* --------------------------------------------------------------------- */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova/proxima-nova-light.woff2') format('woff2'),
         url('../fonts/proxima-nova/proxima-nova-light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova/proxima-nova-regular.woff2') format('woff2'),
         url('../fonts/proxima-nova/proxima-nova-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova/proxima-nova-semi-bold.woff2') format('woff2'),
         url('../fonts/proxima-nova/proxima-nova-semi-bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova/proxima-nova-bold.woff2') format('woff2'),
         url('../fonts/proxima-nova/proxima-nova-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proxima-nova/proxima-nova-extra-bold.woff2') format('woff2'),
         url('../fonts/proxima-nova/proxima-nova-extra-bold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}


/* --------------------------------------------------------------------- */
/* ------------------------   COMMON STYLE   --------------------------- */
/* --------------------------------------------------------------------- */
:root {
  --background-color: #EEEDF1;
}


body{background-color: var(--background-color); font-family: Proxima Nova, Arial; font-size: 16px;}
h1, h2, h3{font-weight: normal; font-family: Proxima Nova, Arial; font-size: 1rem; color: black; margin-top: 8px; margin-bottom: 16px; white-space: nowrap; overflow: hidden;}
h1{text-align: center; text-transform: uppercase; letter-spacing: 1rem; font-weight: 300; margin-bottom: 10px; margin-top: 100px;}
h1:after{content: ""; display: block; height: 2px; width: 50px; background-color: #000; margin: 24px auto 10px auto;}
div{font-size: 0.875rem; color: #111;}











.page-area{max-width: 942px; margin: 0 auto; padding: 16px; text-align: center;}
#logo{width: 230px; height: auto; margin: 40px auto 60px auto; display: block;}
#logo-footer{width: 70px; height: auto; margin: 0 auto; display: block; position: absolute; bottom: 40px; left: 0; right: 0;}
.section{width: 50%; margin: 40px auto;}
.section>div{box-shadow: 0 6px 8px rgba(102,119,136,.03), 0 1px 2px rgba(102,119,136,.3), 0 8px 12px rgba(67, 58, 203, 0.1);}
.section>div>a{display: block; border-top: solid 1px rgba(102,119,136,.05); overflow: hidden; overflow-x: auto; background: #fff; line-height: 1.5; padding: 12px 20px; font-family: And, Proxima Nova, Arial; text-decoration: none; color: #111;
	-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.section>div>a:hover{background-color: #f8f9fa; transform: scale(1.05); position: relative; z-index: 1; color: #000;
	box-shadow: 0 6px 8px rgba(102,119,136,.03), 0 1px 2px rgba(102,119,136,.3), 0 8px 12px rgba(67, 58, 203, 0.1);
}


/* --------------------------------------------------------------------- */
/* ------------------   SMALL LINK TILES DISPLAY   --------------------- */
/* --------------------------------------------------------------------- */
.group-link-tile{display: inline-block; margin: 20px;}
.link-tile{display: inline-block; vertical-align: middle; margin: 20px; width: 300px; height: 80px; background-color: #fff; cursor: pointer; text-align: left; position: relative; color: #000; border-radius: 20px; overflow: hidden;
    box-shadow: 0 6px 8px rgba(102,119,136,.03), 0 1px 2px rgba(102,119,136,.3), 0 8px 12px rgba(67, 58, 203, 0.1);
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.link-tile.full {width: 100%; max-width: 645px;}
.link-tile:hover{transform: scale(1.05); position: relative; z-index: 1; color: #000;
    box-shadow: 0 6px 8px rgba(102,119,136,.03), 0 1px 2px rgba(102,119,136,.3), 0 8px 12px rgba(67, 58, 203, 0.1);
}
.link-tile:hover .pic-icon {background-color: #09ad9d;}
.link-tile:hover .pic-icon.pic-go-to:after {opacity: 1;}

.link-tile:before, .link-tile span, .link-tile .pic-icon{display: inline-block; vertical-align: middle;}
.link-tile:before, .link-tile .pic-icon{width: 80px; height: 100%;}
.link-tile:before{background-repeat: no-repeat; background-position: center; background-size: 38px auto; content: '';}
.link-tile.laptop:before{background-image: url(../img/laptop.svg);}
.link-tile.adp-company:before{background-image: url(../img/health-company-care-logo.svg);}
.link-tile.adp-broker:before{background-image: url(../img/broker-logo.svg); background-size: 30px auto}
.link-tile.life-broker:before{background-image: url(../img/life-care-logo.svg); background-size: 30px auto}
.link-tile.adp-insured:before{background-image: url(../img/health-care-logo.svg);}
.link-tile.iard:before{background-image: url(../img/iard-phone-logo.svg);}
.link-tile.fleet:before{background-image: url(../img/fleet-company-logo.svg);}
.link-tile.pc-unity:before{background-image: url(../img/pc-unity-logo.svg);}
.link-tile.cleva-design-system:before{background-image: url(../img/cleva-logo.svg);}
.link-tile.oncare-design-system:before{background-image: url(../img/ui-kit-logo.svg);}
.pic-icon.pic-go-to{background-image: url(../img/go-to.svg); background-size: 16px; background-repeat: no-repeat; background-position: center;}
.pic-icon.pic-go-to:after{background-image: url(../img/go-to-white.svg); background-size: 16px; background-repeat: no-repeat; background-position: center; width: 16px; height: 16px; content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0;
    -webkit-transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.link-tile.cleva-design-system:hover .pic-icon {background-color: #02aaa8;}


.link-tile .pic-icon{position: absolute; right: 0; background-color: rgba(4, 27, 47, .04); font-size: 14px; text-align: center;
    -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.link-tile .pic-icon:before{
   line-height: 80px;
   height: 80px;
   display: block;
   -webkit-transition: padding-left 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: padding-left 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: padding-left 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: padding-left 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.link-tile:hover .pic-icon:before{padding-left: 10px;}

.link-tile span b{display: block;}











/* ===================================================================================================*/
/* ====================================   1280  &  1024 ==============================================*/
/* ===================================================================================================*/
@media screen and (max-width: 1099px) and (min-width: 769px) {
	.section{width: 75%;}
    .link-tile.full {max-width: 300px;}
}
@media screen and (max-width: 768px) and (min-width: 0) {
	.section{width: 90%;}
    .link-tile.full {max-width: 300px;}
}