/*###########################################################################*/
/*################################### Reset #################################*/
/*###########################################################################*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
html{ /* Remove 300 ms delay on touchscreens - IE */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
address{
font-style: normal;
}
body {
line-height: 1;
-webkit-text-size-adjust: none; /* avoid automatic text adjustement in safari on mobiles */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* remove clicked menu hightlight in iphone */
-webkit-font-smoothing: antialiased; /* Fix Font Flickering With Slideshow, CSS and JS Animations */
}
ul{
padding:0px;
}
ul li{
list-style-type: none;
}
a:link, a:visited{
text-decoration:none;
}
a img{
border:none;
}
a{
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
iframe{
display:block;
}
/*###########################################################################*/
/*################################## Fonts ##################################*/
/*###########################################################################*/
/*@font-face {
font-family: 'Open';
src: url('img/fonts/opensans-regular.woff2') format('woff2'),
url('img/fonts/opensans-regular.woff') format('woff');
}*/
/*@font-face {
font-family: 'PT';
src: url('img/fonts/pt_sans-caption-web-regular.woff2') format('woff2'),
url('img/fonts/pt_sans-caption-web-regular.woff') format('woff');
}*/
/*@font-face {
font-family: 'Anton';
src: url('img/fonts/anton-regular-webfont.woff2') format('woff2'),
url('img/fonts/anton-regular-webfont.woff') format('woff');
}*/
@font-face {
font-family: 'Lexend';
src: url('img/fonts/lexend-v19-latin-300.woff2') format('woff2');
}
@font-face {
font-family: 'Lexend';
src: url('img/fonts/lexend-v19-latin-800.woff2') format('woff2');
font-weight:bold;
}
/*###########################################################################*/
/*################################# Sprites #################################*/
/*###########################################################################*/
.collapsible div,
.inputWrap .label div,
.labelRadio div,
.labelCheck div,
#imagelightbox-close,
.moButton div,
.moArrowR,
.moArrowL,
.spriteIcon,
#offMenuButton div,
.inlineIcon,
.biggerIcon,
.XLIcon,
.overlayClose{
background: url('img/sprite.png');
background-size:800px 800px;
background-repeat: no-repeat;
}
/*.spriteIcon{
width: 25px; height: 25px;
background-position: -75px -25px;
}*/
/*###########################################################################*/
/*################################ Preloader ################################*/
/*###########################################################################*/
#preloadingPage,
#contentPreloader{
width: 80px;
height: 80px;
margin-top:-40px;
margin-right:-40px;
position: fixed;
z-index: 999;
right: 50%;
top: 50%;
animation: bounce 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
visibility:collapse;
}
#preloadingPage svg,
#contentPreloader svg{
width:100%;
height:auto;
display:block;
fill:#e8e8e8;
}
#preloadingPage.activity{
/*display:block;*/
visibility:visible;
}
#contentPreloader{
visibility:visible;
z-index: 0;
position: absolute;
}
@keyframes spin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes bounce {
0% {transform:scale(1);}
50% {transform:scale(0.7);}
}
/*###########################################################################*/
/*################# Graphic Acceleration, Font Flickering ###################*/
/*###########################################################################*/
/*.touchscreen .slice
.site-wrap,
#offCanevas{
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}*/
/*###########################################################################*/
/*################################## Grid ###################################*/
/*###########################################################################*/
.megaContainer{
max-width:1920px;
margin:0 auto;
position:relative;
}
.touchScreen .megaContainer{ /* Any Touch Screens */
overflow:hidden; /* Avoid horizontal touch scroll on mobiles (with off canevas menu opened) */
}
#contentStartAnchor{
display:block;
position:absolute;
width:10px;
height:10px;
}
.displayNone{
display:none;
}
/* ----- container */
.container{
width:100%;
float:left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*overflow:hidden; /* for shadow effect on entire container */
}
.slice{
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.slice:after{ /* Fix float parent collapsing */
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.limited{
/*max-width:1300px;*/
/* max-width:1190px; /* for testing purpose */
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
max-width:1174px; /* 1191 - scoll bar width 17px */
}
.limitedLarge{
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
max-width:1400px; /* 1191 - scoll bar width 17px */
}
.limitedSmall{
max-width:850px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
.limitedMedium{
max-width:980px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
.limitedTiny{
max-width:600px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.limited{
max-width:963px; /* 980 - scoll bar width 17px */
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ----------------------------------------- Flex Column System - Equal Height */
.flexCol{
display: flex;
align-items: stretch;
flex-flow:row wrap;
}
.flexCol > div{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flexCol.twoCol > div{
width:50%;
}
/*.flexCol.threeCol > div{
width:33%;
}
.flexCol.threeCol > div:nth-child(2){
width:34%;
}*/
#sectorLayer .flexCol{
align-items: stretch;
flex-flow:row wrap;
justify-content:center;
}
.flexCol.threeCol > div{
width:33%;
}
.flexCol.fourCol > div{
width:25%;
}
/* Demo */
#columnLayout .flexCol > div:nth-child(1){
background-color: #009966;
}
#columnLayout .flexCol > div:nth-child(2){
background-color: #006699;
}
#columnLayout .flexCol > div:nth-child(3){
background-color: #996666;
}
#columnLayout .flexCol > div:nth-child(4){
background-color: #CC9933;
}
/* Special Cases */
#imgGal > div:nth-child(1){
width:60%; /* 300px */
}
#preFooterF > div:nth-child(1){
width:60%; /* 300px */
}
#preFooterG > div:nth-child(2){
width:60%; /* 300px */
}
#preFooterF > div:nth-child(2),
#imgGal > div:nth-child(2),
#preFooterG > div:nth-child(1),
#preFooterG > div:nth-child(3){
flex: 1;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.flexCol.fourCol > div{
width:50%;
}
.flexCol.threeCol > div{
width:40%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.flexCol.fourCol > div{
width:50%;
}
.flexCol.threeCol > div{
width:50%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.flexCol.twoCol > div,
.flexCol.threeCol > div,
.flexCol.threeCol > div:nth-child(2),
.flexCol.fourCol > div,
#imgGal > div:nth-child(1){
width:100%;
}
#imgGal > div:nth-child(1),
#preFooterF > div:nth-child(1),
#preFooterG > div:nth-child(2),
#preFooterG > div{
width:100%;
}
}
/* ----------------------------------------- CSS3 Column System - Text and inline elements */
#cssColumnLayout{
text-align:left;
}
.cssCol{
column-gap: 60px;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-rule: 1px solid lightblue;
-webkit-column-rule: 1px solid lightblue;
-moz-column-rule: 1px solid lightblue;
text-align:left;
}
.cssCol.twoCol{
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.cssCol.threeCol{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}
.cssCol.fourCol{
column-count: 4;
-webkit-column-count: 4;
-moz-column-count: 4;
}
.cssCol > h2 {
-webkit-column-span: all;
column-span: all;
/* Not supported in Firefox */
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.cssCol.twoCol,
.cssCol.threeCol,
.cssCol.fourCol{
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.cssCol.twoCol,
.cssCol.threeCol,
.cssCol.fourCol{
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
}
/*###########################################################################*/
/*################################ Global Styles ############################*/
/*###########################################################################*/
body{
font-family: 'Lexend', sans-serif;
font-size: 1.1em;
line-height: 1.8;
color: #585858;
background-color: #fff;
overflow-x:hidden; /* Fix bug in IE */
}
/* --------------------------- typo + paragraphs */
.headingContent a,
#footer a{
color: #e25cab;
}
.headingContent a:hover,
#footer a:hover{
color: #eb69b6;
text-decoration:underline;
}
a,
.collapsible{
color: #c1188d;
}
a:hover,
.collapsible:hover{
color: #c1188d;
text-decoration:underline;
}
p{
margin-bottom:1em;
}
h1, h2, h3, h4{
font-size:1.8em;
font-weight:bold;
font-family: 'Nunito', sans-serif;
}
h2{
font-size:1.6em;
}
h3{
font-size:1.4em;
line-height:1.4;
}
h4{
font-size:1.2em;
}
/* --------------------------- dough */
/* Columns dough */
.doughCol{
padding:0 30px;
}
/* Double dough (with color change from one slice to the next) */
.doubleDoughH1{
padding:20px 0 80px 0;
}
.doubleDoughH2{
padding:50px 0 80px 0;
}
.doubleDough{
padding:80px 0;
}
/* Single dough (just regular spacing between slices) */
.singleDough{
padding:80px 0 0 0; /* better at top for auto-scrolling buttons */
}
.singleDoughBottom{
padding:0 0 80px 0;
}
.singleDoughH2{
padding:50px 0 0 0;
}
.singleDoughH1{
padding:20px 0 0 0;
}
/* Latteral dough (default latteral margin starts on mobiles) */
.latDough{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.latDough{
padding-left:30px;
padding-right:30px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.latDough{
padding-left:30px;
padding-right:30px;
}
.doughCol{
padding:0;
}
}
/* ------ special mobile */
.mobOnly{ /* usage:
*/
display:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.noTab{ /* usage:
*/
display:none;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.mobOnly{
display:inline-block;
}
.noMob{ /* usage:
*/
display:none;
}
}
/*###########################################################################*/
/*######################## Page to Page Transitions #########################*/
/*###########################################################################*/
/* --- content + transitions */
#main{
position:relative;
}
#main .ctTemp{
position: absolute;
top: 0;
left: 0;
margin-top:0px;
opacity:1;
width: 100%;
height:100%;
right:0;
bottom:0;
z-index: 2;
transform:translate(0,0);
/*-webkit-transition: opacity 1s cubic-bezier(0.55, 0.09, 0.68, 0.53); /* use the exact name of the animated property -> fix IE bug flickering during transitions */
transition: all 0.5s cubic-bezier(0.76, 0.01, 1, 1); /* easeInQuad cubic-bezier(0.550, 0.085, 0.680, 0.530) */
}
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*####################################################### Frame + Persistent Elements ########################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/* ------------------------------------------------------------------------------ Logo */
.logo{
width: 140px;
/*margin: auto;*/
display:block;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
transform: translate3d(0, 0, 0);
line-height:0;
position:absolute;
top:30px;
left:30px;
}
.logo svg,
.mobileLogo svg{
width: 100%;
height:auto;
fill:#ffffff;
overflow:visible;
}
.logo svg #text,
.mobileLogo svg #text{
fill:#ffffff;
}
.logo svg #circle,
.mobileLogo svg #circle{
fill:#19B7EA;
}
.logo svg #topRays,
.mobileLogo svg #topRays{
fill:#B5CBE9;
}
.logo svg #bottomRays,
.mobileLogo svg #bottomRays{
fill:#017DC3;
}
[data-body="data-white-logo"] .logo svg #circle,
[data-body="data-white-logo"] .mobileLogo svg #circle{
fill:#ffffff;
}
[data-body="data-white-logo"] .logo svg #topRays,
[data-body="data-white-logo"] .mobileLogo svg #topRays{
fill:#ffffff;
}
[data-body="data-white-logo"] .logo svg #bottomRays,
[data-body="data-white-logo"] .mobileLogo svg #bottomRays{
fill:#ffffff;
}
[data-body="data-dark-logo"] .logo svg #text{
fill:#017dc3;
}
[data-body="data-dark-logo"] .logo svg #circle{
fill:#017dc3;
}
[data-body="data-dark-logo"] .logo svg #topRays{
fill:#017DC3;
}
[data-body="data-dark-logo"] .logo svg #bottomRays{
fill:#017DC3;
}
[data-body="data-dark-logo"] .scrolledPage .logo svg #text{
fill:#ffffff;
}
.scrolledPage .logo svg #circle{
fill:#19B7EA;
}
.scrolledPage .logo svg #topRays{
fill:#B5CBE9;
}
.scrolledPage .logo svg #bottomRays{
fill:#017DC3;
}
/* special page */
.videopage .logo,
.imagepage .logo,
.homepage .logo{
/*width: 280px;*/
}
/* when scrolled */
.scrolledPage .logo,
.imagepage .scrolledPage .logo,
.videopage .scrolledPage .logo,
.homepage .scrolledPage .logo{
width:120px;
top:20px;
}
/* ---- On mobiles */
.mobileLogo{
width: 160px;
display: none;
position: absolute;
top: 140px;
left: 50%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%, 0);
z-index:800;
}
/* special page */
.imagepage .mobileLogo{
width: 280px;
top: 130px;
}
.videopage .mobileLogo{
}
.homepage .mobileLogo{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.logo{
/*display:none;*/
}
.mobileLogo{
/*display:block;*/
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.logo{
display:none;
}
.mobileLogo{
display:block;
max-width:120px;
top: 130px;
}
.imagepage .mobileLogo{
top: 80px;
}
}
/* ------------------------------------------------------------------------------ Header */
#header{
position: fixed;
z-index: 999; /* need a high Z-index to avoid repaint on page change */
transform: translate3d(0, 0, 0);
/*padding: 20px 0;*/
}
#header .headerContainer{
max-width:1920px;
margin:0 auto;
position:relative;
height:80px;
}
/* special page */
.homepage #header{
/*padding-top: 50px;*/
}
.videopage #header{
/*padding-top: 100px;*/
}
.imagepage #header{
padding-top: 130px;
}
.headerBg{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(45deg, #451e6d 11%, #532c81 35%, #613795 71%, #451e6d);
transform:translate(0,-360px);
transition: all 400ms ease;
}
/* when scrolled */
#header.scrolledPage,
.imagepage #header.scrolledPage,
.videopage #header.scrolledPage,
.homepage #header.scrolledPage{
/* padding: 5px 0; */
overflow:hidden;
}
#header.scrolledPage .headerBg{
transform:translate(0,0);
}
/* social buttons */
.socialTop{
position:absolute;
top:50%;
right:20px;
transform:translate(0,-51%);
transition:transform 0.3s ease;
}
.socialTop a{
display:inline-block;
width: 41px; height: 41px;
background-position: -324px -424px;
margin:0 0 0 10px;
}
.socialTop a.faceb{
background-position: -375px -425px;
}
.socialTop a.tripa{
width: 69px; height: 41px;
background-position: -426px -425px;
}
.socialTop a[dataOverlay]{
width: 41px;
height: 41px;
background-position: -375px -524px;
}
.socialTop a[dataOverlay='mainMenu']{
display:block;
width: 40px;
height: 40px;
background-position: -216px -425px;
}
.menuTop{
position:absolute;
top:50%;
right:73px;
transform:translate(0,-50%);
transition:transform 0.3s ease;
}
.menuTop a{
color:#ffffff;
border:1px solid rgba(255, 255, 255, 1);
border-radius:3px;
padding:6px 12px;
font-size:1rem;
margin:0 6px;
}
.menuTop a:hover{
text-decoration:none;
background-color:rgba(255, 255, 255, 0.2);
}
.blinkingGreen{
color: #c1188d;
animation: greenBlink 1.5s ease-in-out infinite;
margin:0 5px 0 0;
font-size:1.2rem;
}
[data-body="data-white-logo"] .blinkingGreen{
color:#ffffff;
}
@keyframes greenBlink {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#header{
min-height: 60px;
/*background-color: #000033;*/
padding:0;
}
/*.imagepage #header{
padding-top: 0px;
background-color: #000033;
}*/
/* special page */
.homepage #header,
.videopage #header,
.imagepage #header{
padding-top: 0;
}
.menuTop{
transform:translate(0,-10%);
}
.scrolledPage .menuTop{
transform:translate(0,-50%);
}
.socialTop{
transform:translate(0,-16%);
}
.scrolledPage .socialTop{
transform:translate(0,-51%);
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#header{
min-height: 60px;
/*background-color: #000033;*/
padding:0;
}
/*.imagepage #header{
padding-top: 0px;
background-color: #000033;
}*/
/* special page */
}
/* ------------------------------------------------------------------------------ Main (Frame) */
#main{
}
.homePage #main{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#main{
/*margin-top:80px;*/
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#main{
/*margin-top:80px;*/
}
}
/* ------------------------------------------------------------------------------ Sector Layer */
#sectorLayer{
background-color:white;
padding:100px 0 100px 0;
position:relative;
}
#sectorLayer > div > div{
text-align:center;
}
/*#sectorLayer .flexCol.threeCol > div{
text-align:right;
padding-right:60px;
}
#sectorLayer .flexCol.threeCol > div:nth-child(2){
text-align:left;
padding-left:60px;
}*/
#sectorLayer a{
display:inline-block;
width:auto;
text-align:center;
position:relative;
text-decoration:none;
}
#sectorLayer a:hover{
text-decoration:none;
}
#sectorLayer h3{
display:inline-block;
font-size:2.5rem;
position:relative;
color:#613795;
}
#sectorLayer h3.shortening{
line-height:2;
font-size:2.2rem;
}
#sectorLayer a span{
display:inline-block;
font-size:1.1rem;
color:#585858;
max-width:300px;
margin:0;
position:relative;
}
#sectorLayer h3:after{
content:'';
display:none;
position:absolute;
bottom:0px;
height:4px;
width:100%;
background-color:#1db76e;
}
#sectorLayer .bgShape{
position:absolute;
width:320px;
top:140px;
left:50%;
transform:translate(-50%,-50%);
}
/*#sectorLayer > div > div:nth-child(2) .bgShape{
transform:translate(-50%,-50%) rotate(60deg);
}*/
#sectorLayer .symbol{
display:inline-block;
width:170px;
position:relative;
}
#sectorLayer .bgShape svg,
#sectorLayer .symbol svg{
width:100%;
height:auto;
}
#sectorLayer .symbol svg{
fill:#613795;
}
#sectorLayer .bgShape svg{
fill:#fcf4ff;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#sectorLayer h3.shortening,
#sectorLayer h3{
font-size:1.8rem;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#sectorLayer h3.shortening,
#sectorLayer h3{
font-size:1.8rem;
}
#sectorLayer a{
margin:30px 0;
}
#sectorLayer {
padding: 50px 0;
}
}
/* ------------------------------------------------------------------------------ Footer */
#footer{
/*background-color:#105ca6;
background-image: linear-gradient(210deg,#0c2c4a,#0b468e 35%,#176eb1 71%,#19b7ea );
padding: 0 0 100px 0;*/
text-align:center;
position:relative;
color:#ffffff;
}
#footer .footerTransition{
/*background: linear-gradient(-185deg, #0b4b9b,#218ec6);*/
background: linear-gradient(-190deg,#451e6d 2%,#200f46 35%,#200f46 71%,#451e6d);
padding: 0 0 150px 0;
}
#footer .footerTransition svg{
width:100%;
height:auto;
}
#footerMenu{
margin:50px auto 0 auto;
}
#realFooter{
padding:40px 0 0 0;
line-height:1.2;
}
#realFooter a{
}
#realFooter a:hover{
}
#sitemapMenu{
display: flex;
align-items: stretch;
flex-flow:row wrap;
padding:0px 0 100px 0;
}
#sitemapMenu > div{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:20%;
text-align:left;
box-sizing:border-box;
padding:0 0 0 0;
}
#sitemapMenu > div:nth-child(1){
width:40%;
}
#sitemapMenu h4{
font-size:1.5rem;
}
address{
display:inline-block;
max-width:200px;
font-size:1rem;
}
a.phoneNum{
/*font-size:1.4rem;
color:#ffffff;*/
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
#sitemapMenu > div:nth-child(1){
padding-left:40px;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#sitemapMenu > div,
#sitemapMenu > div:nth-child(1){
width:50%;
padding:100px 0 0px 100px;
/*text-align:center;*/
}
#sitemapMenu{
padding:0px 0 100px 0;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#sitemapMenu > div,
#sitemapMenu > div:nth-child(1){
width:100%;
padding:60px 0 0px 0px;
text-align:center;
}
#sitemapMenu > div:nth-child(1){
padding-top:30px;
}
#sitemapMenu{
padding:0px 0 50px 0;
}
#footer .footerTransition svg{
width:250%;
height:auto;
transform:translate(-40%,0);
}
#realFooter{
padding:40px 30px;
}
#footer .footerTransition{
padding: 0 0 50px 0;
}
}
/* ------------------------------------------------------------------------------ Overlay Pages */
.overlayPage{
position:fixed;
top:0;
right:0;
height:100vh;
width:400px;
max-width:100%;
min-height:700px;
background-color: #412e80;
transition: transform 400ms ease;
transform: translate(100vw, 0);
z-index:999;
overflow: hidden;
overflow-y: auto;
/*margin-right:-17px;*/
}
.overlayPage.open{
transform: translate3d(0, 0, 0);
}
.overlayPage .fg{
min-width:100%;
min-height:100%;
background: radial-gradient(ellipse at center, rgba(86, 12, 105, 0.48) 0%,rgb(74, 10, 90) 80%);
}
.overlayClose{
position:absolute;
top:20px;
right:20px;
width: 40px;
height: 40px;
background-position: -266px -425px;
/*border: 1px solid #ffffff;*/
}
.touchScreen .overlayPage{
right:0;
}
/*.overlayMask{
top:0;
left:0;
position:fixed;
height:100vh;
width:100vw;
background-color:rgba(255, 255, 255, 0.59);
z-index:999;
display:none;
}
.overlayMask.open{
display:block;
}*/
/* ------------------------------- Overlay Top */
.overlayTop{
position:fixed;
top:0;
right:0;
width:100%;
}
.overlayTop .overlayTopContainer{
margin:0 auto;
position:relative;
height:200px;
width:100%;
max-width:1920px;
background-color:#200f46;
/*background:linear-gradient(to bottom right, #0b569b, #45d2ff);*/
/*background: linear-gradient(-185deg,#19b7ea,#ffffff);*/
/*background: linear-gradient(10deg,#c2f7df 5%,#218ec6 35%,#0b4b9b 71%,#0c2c4a);*/
text-align:center;
}
#header,
.megaContainer{
transform:translate(0, 0);
transition: transform 200ms ease;
}
#header.overlayTopOpen,
.megaContainer.overlayTopOpen{
transform:translate(0, 200px);
}
#header.overlayTopOpen.scrolledPage{
transform:translate(0, 0);
}
#header.overlayTopOpen .headerBg{
/* transform:translate(0, -360px); */
}
#header.overlayTopOpen.scrolledPage .headerBg{
transform:translate(0, 0px);
}
.overlayTopContainer{
}
.overlayTopContainer .headingLink{
display:inline-block;
color:#ffffff;
text-decoration:none;
position:absolute;
top:50%;
left:50%;
box-sizing:border-box;
width:100%;
padding:30px;
transform:translate(-50%,-50%);
max-width:700px;
font-size:1rem;
}
.overlayTopContainer .headingLink h3{
font-size:1.4rem;
}
.overlayTopContainer .headingLink span{
}
.overlayTop .overlayTopContainer.Green{
/*background: linear-gradient(-185deg,#1db76e 11%,#33ceb8 35%,#218ec6 100%,#c2f7df);*/
background-color:#a12377;
}
.overlayTop .overlayTopContainer.Emergency{
background-color:#dd6565;
}
.readMoreTop{
display:inline-block;
background-color:#ffffff;
padding:0 10px;
margin:0 0 0 10px;
border-radius:3px;
color: #200f46;
animation: buttonWhite 2s ease-in-out infinite;
}
.overlayTop .overlayTopContainer.Green .readMoreTop{
color:#a12377;
}
.overlayTop .overlayTopContainer.Emergency .readMoreTop{
color:#dd6565;
}
@keyframes buttonWhite{
0% {background-color: rgb(255, 255, 255);}
50% {background-color: rgba(255, 255, 255, 0.5);}
100% {background-color: rgb(255, 255, 255);}
}
.extraButtonTop{
background-color:#17a562;
display:block;
color:#ffffff;
transition:all 0.4s ease;
padding:5px 0;
box-sizing:border-box;
}
.extraButtonTop:hover{
text-decoration:none;
color:#ffffff;
background-color:#118f54;
}
.extraButtonTop span{
display:inline-block;
vertical-align:middle;
margin:0 0 0 10px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.overlayTop .overlayTopContainer{
height:250px;
}
.overlayTopContainer .headingLink h3{
font-size:1.2rem;
line-height:1.4;
}
.overlayTopContainer .headingLink span{
}
#header.overlayTopOpen,
.megaContainer.overlayTopOpen{
transform:translate(0, 250px);
}
}
/* ------------------------------------------------------------------------------ Main Menu */
#mainMenu > nav{
transform:translate(200px,0);
transition:all 0.5s ease-out;
transition-delay:0.2s;
padding:40px;
}
#mainMenu.open > nav{
transform:translate(0px,0);
}
.menuSection a{
background-color:#c1188d;
color:#ffffff;
padding:8px 16px;
display:inline-block;
border-radius:3px;
margin:0 15px 15px 0;
}
.menuSection a:hover{
text-decoration:none;
}
.menuSection a div,
.menuSection a span{
vertical-align:middle;
}
.menuSection a span{
margin-left:10px;
}
.sectorMenu a:hover{
background-color:#a12377;
}
.consumerMenu a{
/*background-color:transparent;
border:1px solid #ffffff;*/
/*background-color:#2e2260;*/
}
.consumerMenu a:hover{
background-color:#a12377;
}
.generalMenu{
margin:40px 0 0 0;
}
.generalMenu a{
padding:6px 15px;
margin:0 15px 15px 0;
background-color:#2e2260;
width:220px;
}
.generalMenu a:hover{
background-color:#200f46;
}
.generalMenu a span{
margin-left:5px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ------------------------------------------------------------------------------ Accordion Menu */
.accordionMenu li{
display:block;
overflow:hidden;
}
.accordionMenu ul{
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
display:block;
}
/* color handles */
.accordionMenu a{
display:block;
padding:12px 22px;
color:#FFF;
border-top-color: #6e3dab;
border-bottom-color: #4e2a7b;
border-top-style: solid;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #613795;
position:relative;
}
.accordionMenu a:hover{
background-color:#4f2b7a;
border-top-color: #6e3dab;
border-bottom-color: #4e2a7b;
text-decoration:none;
}
/*.accordionMenu a.menuActive,
.accordionMenu a.menuActive:hover{
background-color: #19b7ea;
border-top-color: #20bff3;
border-bottom-color: #1aafdf;
}*/
/* level 2 */
.accordionMenu ul li a{
background-color: #c1188d;
border-bottom-color: #910e69;
border-top-color: #d6169c;
}
.accordionMenu ul li a:hover{
background-color:#ac117d;
border-top-color: #990f6f;
border-bottom-color: #bd1389;
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################# In-Pages Styles ##############################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/* ------------------------------------------------------------------------------ Typical Pages */
.ctWrapper{
background-color: #ffffff;
}
.pageHeading{
padding-top: 160px; /* Size of the header when not scrolled down */
/*background-image: url(conti/sample/02646_iridescent_2560x1600.jpg);
background-size: cover;
background-position: center center;*/
color: #FFFFFF;
/*background-color:#1364ab;*/
}
/* bgPics heading variations */
/*.typographypage .pageHeading{
background-image: url(conti/blury/bg-4.jpg);
}
.templatepage .pageHeading{
background-image: url(conti/blury/bg-4.jpg);
}
.contactpage .pageHeading{
background-image: url(conti/blury/bg-4.jpg);
}*/
.regularPage{
text-align: center;
/*min-height: 600px;*/
}
/* titles */
.regularPage h1,
.regularPage h2,
.regularPage h3,
.regularPage h4{
color: #666666;
}
.regularPage h1{
width: 100%;
font-size: 2.3em;
font-weight: bold;
margin: 40px 0 30px 0;
}
.pageHeading h1,
.pageHeading h2{
margin: 0;
color: #FFFFFF;
}
/* font sizes */
.smallerInfo{
font-size:0.9em;
}
.tinyInfo{
font-size:0.8em;
}
sup{
font-size: 0.7em;
vertical-align: super;
}
sub{
font-size: 0.7em;
vertical-align: sub;
}
/* paragraph alignement */
.textAlignLeft{
text-align:left;
}
.textAlignRight{
text-align:right;
}
.textAlignCenter{
text-align:center;
}
/* buttons */
a.inPageButtons,
a.inPageButtonsB,
a.inPageButtonsC{
display:inline-block;
padding: 12px 20px;
border-radius: 3px;
background-color: #c1188d;
color: #FFFFFF;
margin:20px 10px 0 10px;
line-height:1.6;
}
a.inPageButtons span,
a.inPageButtonsB span,
a.inPageButtonsC span{
vertical-align:middle;
margin-left:10px;
}
a.inPageButtons:hover,
a.inPageButtonsB:hover,
a.inPageButtonsC:hover{
text-decoration: none;
background-color: #b01480;
color: #FFFFFF;
}
.homepage .headingContent a.inPageButtons,
.homepage .headingContent a.inPageButtonsB{
width:180px;
margin-top:0px;
}
#footer a.inPageButtons,
#footer a.inPageButtonsB,
#footer a.inPageButtonsC,
#footer a.inPageButtons:hover,
#footer a.inPageButtonsB:hover,
#footer a.inPageButtonsC:hover{
color: #FFFFFF;
text-decoration:none;
}
a.inPageButtonsB{
background-color: transparent;
border:solid 1px #ffffff;
}
a.inPageButtonsB:hover{
background-color:rgba(255, 255, 255, 0.2);
}
a.inPageButtonsC{
background-color: #c1188d;
}
a.inPageButtonsC:hover{
background-color: #c81c93;
}
a.inPageButtons.slimButton,
a.inPageButtonsB.slimLeftButton,
a.inPageButtonsC.slimLeftButton{
padding: 6px 15px;
}
a.inPageButtons.alignLeftButton,
a.inPageButtonsB.alignLeftButton,
a.inPageButtonsC.alignLeftButton{
margin:20px 20px 0 0;
}
a.inPageButtons.alignRightButton,
a.inPageButtonsB.alignRightButton,
a.inPageButtonsC.alignRightButton{
margin:20px 0 0 20px;
}
a.inPageButtons.fullWidthButton,
a.inPageButtonsB.fullWidthButton,
a.inPageButtonsC.fullWidthButton{
width:100%;
max-width:250px;
}
/* icons */
.inlineIcon{
display: inline-block;
vertical-align:middle;
margin: 0 0 0 0;
width: 26px;
height: 26px;
background-position: -3px -621px;
}
.inlineIcon.b1{ background-position: -35px -621px;}
.inlineIcon.c1{ background-position: -66px -621px;}
.inlineIcon.d1{ background-position: -97px -621px;}
.inlineIcon.e1{ background-position: -128px -621px;}
.inlineIcon.f1{ background-position: -159px -621px;}
.inlineIcon.g1{ background-position: -190px -621px;}
.inlineIcon.h1{ background-position: -221px -621px;}
.inlineIcon.i1{ background-position: -252px -621px;}
.inlineIcon.j1{ background-position: -284px -621px;}
.inlineIcon.k1{ background-position: -315px -621px;}
.inlineIcon.l1{ background-position: -346px -621px;}
.inlineIcon.a2{ background-position: -3px -651px;}
.inlineIcon.b2{ background-position: -34px -651px;}
.inlineIcon.c2{ background-position: -65px -650px;}
.inlineIcon.d2{ background-position: -96px -650px;}
.inlineIcon.e2{ background-position: -128px -650px;}
.inlineIcon.f2{ background-position: -159px -650px;}
.inlineIcon.g2{ background-position: -190px -650px;}
.inlineIcon.h2{ background-position: -221px -650px;}
.inlineIcon.i2{ background-position: -252px -650px;}
.inlineIcon.j2{ background-position: -283px -650px;}
.inlineIcon.k2{ background-position: -314px -650px;}
.inlineIcon.l2{ background-position: -346px -650px;}
.inlineIcon.a3{ background-position: -3px -680px;}
.inlineIcon.b3{ background-position: -34px -680px;}
.inlineIcon.c3{ background-position: -65px -680px;}
.inlineIcon.d3{ background-position: -96px -680px;}
.inlineIcon.e3{ background-position: -128px -680px;}
.inlineIcon.f3{ background-position: -159px -680px;}
.inlineIcon.g3{ background-position: -190px -680px;}
.inlineIcon.h3{ background-position: -221px -680px;}
.inlineIcon.i3{ background-position: -252px -680px;}
.inlineIcon.j3{ background-position: -283px -680px;}
.inlineIcon.k3{ background-position: -314px -680px;}
.inlineIcon.l3{ background-position: -346px -680px;}
.inlineIcon.a4{ background-position: -3px -710px;}
.inlineIcon.b4{ background-position: -35px -710px;}
.inlineIcon.c4{ background-position: -65px -710px;}
.inlineIcon.d4{ background-position: -97px -710px;}
.inlineIcon.e4{ background-position: -128px -710px;}
.inlineIcon.f4{ background-position: -159px -710px;}
.inlineIcon.g4{ background-position: -191px -710px;}
.inlineIcon.h4{ background-position: -222px -710px;}
.inlineIcon.i4{ background-position: -253px -710px;}
.inlineIcon.j4{ background-position: -284px -710px;}
.inlineIcon.k4{ background-position: -315px -710px;}
.inlineIcon.l4{ background-position: -347px -710px;}
.inlineIcon.a5{ background-position: -3px -740px;}
.inlineIcon.b5{ background-position: -35px -740px;}
.inlineIcon.c5{ background-position: -66px -740px;}
.inlineIcon.d5{ background-position: -97px -740px;}
.inlineIcon.e5{ background-position: -128px -740px;}
.inlineIcon.f5{ background-position: -159px -740px;}
.inlineIcon.g5{ background-position: -191px -740px;}
.inlineIcon.h5{ background-position: -222px -740px;}
.inlineIcon.i5{ background-position: -253px -740px;}
.inlineIcon.j5{ background-position: -284px -740px;}
.inlineIcon.k5{ background-position: -315px -740px;}
.inlineIcon.l5{ background-position: -347px -740px;}
/*.inlineIcon.a5{ background-position: -3px -771px;}
.inlineIcon.b5{ background-position: -35px -771px;}
.inlineIcon.c5{ background-position: -66px -771px;}
.inlineIcon.d5{ background-position: -97px -771px;}
.inlineIcon.e5{ background-position: -128px -771px;}
.inlineIcon.f5{ background-position: -159px -771px;}
.inlineIcon.g5{ background-position: -190px -771px;}
.inlineIcon.h5{ background-position: -222px -771px;}
.inlineIcon.i5{ background-position: -253px -771px;}
.inlineIcon.j5{ background-position: -284px -771px;}
.inlineIcon.k5{ background-position: -315px -771px;}
.inlineIcon.l5{ background-position: -346px -771px;}*/
.biggerIcon{
display:inline-block;
vertical-align:middle;
margin:0 0 0 0;
width: 36px; height: 36px;
background-position: -425px -603px;
}
.biggerIcon.b1{ background-position: -467px -603px;}
.biggerIcon.c1{ background-position: -509px -603px;}
.biggerIcon.d1{ background-position: -550px -603px;}
.biggerIcon.a2{ background-position: -425px -643px;}
.biggerIcon.a2{ background-position: -425px -643px;}
.biggerIcon.b2{ background-position: -467px -643px;}
.biggerIcon.c2{ background-position: -509px -643px;}
.biggerIcon.d2{ background-position: -550px -643px;}
.biggerIcon.a3{ background-position: -425px -682px;}
.biggerIcon.b3{ background-position: -467px -682px;}
.biggerIcon.c3{ background-position: -509px -682px;}
.biggerIcon.d3{ background-position: -550px -682px;}
.biggerIcon.a4{ background-position: -425px -722px;}
.biggerIcon.b4{ background-position: -467px -722px;}
.biggerIcon.c4{ background-position: -509px -722px;}
.biggerIcon.d4{ background-position: -550px -722px;}
.biggerIcon.a5{ background-position: -425px -761px;}
.biggerIcon.b5{ background-position: -467px -761px;}
.biggerIcon.c5{ background-position: -509px -761px;}
.biggerIcon.d5{ background-position: -550px -761px;}
.biggerIcon.e1{ background-position: -6px -25px;}
.biggerIcon.f1{ background-position: -48px -25px;}
.biggerIcon.g1{ background-position: -90px -25px;}
.biggerIcon.h1{ background-position: -131px -25px;}
.biggerIcon.e2{ background-position: -6px -64px;}
.biggerIcon.f2{ background-position: -48px -64px;}
.biggerIcon.g2{ background-position: -90px -64px;}
.biggerIcon.h2{ background-position: -131px -64px;}
.biggerIcon.e3{ background-position: -6px -104px;}
.biggerIcon.f3{ background-position: -48px -104px;}
.biggerIcon.g3{ background-position: -90px -104px;}
.biggerIcon.h3{ background-position: -131px -104px;}
.biggerIcon.e4{ background-position: -6px -143px;}
.biggerIcon.f4{ background-position: -48px -143px;}
.biggerIcon.g4{ background-position: -90px -143px;}
.biggerIcon.h4{ background-position: -131px -143px;}
.biggerIcon.e5{ background-position: -6px -183px;}
.biggerIcon.f5{ background-position: -48px -183px;}
.biggerIcon.g5{ background-position: -90px -183px;}
.biggerIcon.h5{ background-position: -131px -183px;}
.XLIcon{
display:inline-block;
vertical-align:middle;
margin:0 0 0 0;
width: 53px; height: 53px;
background-position: -625px -600px;
}
.XLIcon.b1{ background-position: -684px -600px;}
.XLIcon.c1{ background-position: -743px -599px;}
.XLIcon.a2{ background-position: -625px -661px;}
.XLIcon.b2{ background-position: -685px -661px;}
.XLIcon.c2{ background-position: -744px -661px;}
.XLIcon.a3{ background-position: -625px -721px;}
.XLIcon.b3{ background-position: -685px -722px;}
.XLIcon.c3{ background-position: -744px -722px;}
.XLIcon.d1{ background-position: -206px -21px;}
.XLIcon.e1{ background-position: -265px -21px;}
.XLIcon.f1{ background-position: -324px -21px;}
.XLIcon.d2{ background-position: -206px -83px;}
.XLIcon.e2{ background-position: -266px -83px;}
.XLIcon.f2{ background-position: -325px -83px;}
.XLIcon.d3{ background-position: -206px -721px;}
.XLIcon.e3{ background-position: -266px -722px;}
.XLIcon.f3{ background-position: -325px -722px;}
.XLIcon.a4{ background-position: -625px -249px;}
.XLIcon.a5{ background-position: -625px -307px;}
.XLIcon.a6{ background-position: -625px -365px;}
.XLIcon.b4{ background-position: -683px -249px;}
.XLIcon.b5{ background-position: -683px -307px;}
.XLIcon.b6{ background-position: -683px -364px;}
.XLIcon.c4{ background-position: -740px -248px;}
.XLIcon.c5{ background-position: -739px -306px;}
.XLIcon.c6{ background-position: -741px -364px;}
.iconNumber{
display:inline-block;
/*border:5px solid #585858;*/
background-color:#b5b5b5;
border-radius:50%;
width:40px;
height:40px;
vertical-align:bottom;
margin-right:3px;
position:relative;
}
.iconNumber span{
display:block;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
color:#ffffff;
}
/* standalone images */
.toTheRight,
.toTheLeft{
transform: translate(150px,0);
}
.toTheLeft{
transform: translate(-150px,0);
}
.standAloneImg{
width:700px;
margin: 80px 0;
}
.noMarginImage{
margin:0;
}
.smallMarginTopImage{
margin-top:20px;
}
.standAloneImg.inlineImage{
max-width:100%;
width:450px;
margin:0;
}
.standAloneImg img{
max-width:100%;
display:block;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.standAloneImg{
width:100%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.standAloneImg{
width:100%;
}
.pageHeading{
padding-top:230px; /* Size to include the mobile logo */
}
.toTheRight,
.toTheLeft{
transform: translate(0px,0);
}
.toTheLeft{
transform: translate(0px,0);
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.standAloneImg{
width:100%;
}
.pageHeading{
padding-top:230px; /* Size to include the mobile logo */
}
.toTheRight,
.toTheLeft{
transform: translate(0px,0);
}
.toTheLeft{
transform: translate(0px,0);
}
.homepage .headingContent a.inPageButtons,
.homepage .headingContent a.inPageButtonsB{
width:100%;
margin-top:0px;
box-sizing:border-box;
margin:0;
margin-top:20px;
}
a.inPageButtons,
a.inPageButtonsB,
a.inPageButtonsC,
a.inPageButtons.alignLeftButton,
a.inPageButtonsB.alignLeftButton,
a.inPageButtonsC.alignLeftButton,
a.inPageButtons.alignRightButton,
a.inPageButtonsB.alignRightButton,
a.inPageButtonsC.alignRightButton{
margin:10px 0;
width:100%;
max-width:100%;
box-sizing:border-box;
}
#footer a.inPageButtons{
width:auto;
}
}
/* ------------------------------------------------------------------------------ Home Page (Default Slider) */
#homeSlider .slideContent{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
#homeSlider,
#homeSlider .slideBackground{
min-height:600px;
max-height:900px;
height:100vh;
}
#homeSlider .slideBackground{
width: 100%;
background-size:cover;
}
#homeSlider .slideBackground:nth-child(1){
background-image:url(conti/sample/02646_iridescent_2560x1600.jpg)
}
/* ------------------------------------------------------------------------------ Consumer Page */
.headingSlice{
/*background-color:#0b569b;*/
/*background:linear-gradient(to bottom right, #0b569b, #45d2ff);*/
background: linear-gradient(-185deg,#0c2c4a 11%,#0b4b9b 35%,#218ec6 71%,#c2f7df);
}
/* ------------------------------------------------------------------------------ About Page */
/* ------------------------------------------------------------------------------ Organigram */
.organigram{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* --------------------------------------------------------------------------------- Provider Locator Page */
#mapLocatorContainer{
margin-top:-80px;
z-index:2;
}
#providerMenu{
margin:0 auto;
width:100%;
max-width:400px;
padding:0 0 80px 0;
}
#providerMenu > li:first-child{
border-radius:3px 3px 0 0;
}
#providerMenu > li:last-child{
border-radius:0 0 3px 3px;
}
#providerMenu > li.dropedDown:last-child{
border-radius:0;
}
#providerMenu > li:last-child li:last-child{
border-radius:0 0 3px 3px;
}
#providers{
height:800px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#providerMenu{
padding:0 0 30px 0;
}
}
/* --------------------------------------------------------------------------------- Contact Map */
#smallMapLocatorContainer{
margin-top:-270px;
text-align:center;
}
#smallMapLocatorContainer .google-map{
/*border:5px #f4f4f4 solid;*/
box-sizing:border-box;
width:100%;
max-width:1100px;
float:none;
display:inline-block;
/*border-radius:3px;*/
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
#mapLocatorContainer{
margin-top:-50px;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#mapLocatorContainer{
margin-top:-40px;
}
#providers{
height:900px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#mapLocatorContainer{
margin-top:-120px;
}
#smallMapLocatorContainer{
margin-top:-130px;
}
}
/* ------------------------------------------------------------------------------ Listings */
.mainSection .container.articleList,
.mainSection .container.articleList:first-child{
padding:0;
}
.articleList .listingsContainer{
display: flex; /* flex, inline-flex */
/* flex-direction: row; /* row, column, row-reverse, column-reverse */
/* flex-wrap: wrap; /* wrap ( multi line, left to right), nowrap (force single line, left to right), wrap-reverse (multi line, right to left) */
flex-flow: row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: baseline; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
align-content: flex-end; /* flex-start, flex-end, center, space-between, space-around, stretch (on multi lines -> the way multilines are packed ) */
}
.listingItem{
width: 100%;
position:relative;
background-color:#f4f4f4;
box-sizing:border-box;
padding:50px;
display: flex;
align-items: stretch;
flex-flow: row wrap;
margin:50px 0;
color:inherit;
border-radius:6px;
}
/* color Themes */
.listingItem.Emergency{
background-color:#dd6565;
color:#ffffff;
}
.listingItem.Emergency:hover{
background-color:#f37070;
color:#ffffff;
}
.listingItem.Green{
/*background: linear-gradient(-185deg,#1db76e 11%,#33ceb8 35%,#218ec6 100%,#c2f7df);*/
background-color:#a12377;
color:#ffffff;
}
.listingItem.Green:hover{
background-color:#c1188d;
color:#ffffff;
}
.mainSection .listingItem.Green h2,
.mainSection .listingItem.Emergency h2{
color:#ffffff;
}
.listingItem.Green .date,
.listingItem.Emergency .date {
color: #ffffff;
}
.listingItem.Green .blinkingGreen,
.listingItem.Emergency .blinkingGreen {
color: #ffffff;
}
.listingItem.Emergency .readMore{
background-color: #ffffff;
color:#dd6565;
}
.listingItem.Green .readMore{
background-color: #ffffff;
color: #a12377;
}
.listingItem:hover{
background-color:#ededed;
text-decoration:none;
color:inherit;
}
/* item content */
.listingItem .subContainer{
padding: 0 30px 0 30px;
text-align:left;
}
.listingItem > div{
width:100%;
box-sizing: border-box;
}
.listingItem.hasIllustration > div{
width:50%;
}
.listingItem .illustration{
display:none;
}
.listingItem.hasIllustration .illustration{
display:block;
}
.listingItem .illustration img{
width:100%;
display:block;
}
.mainSection .listingItem h2{
/*font-family: 'Anton', sans-serif;*/
line-height:1.4;
font-size:1.8em;
margin:0;
}
.listingItem .date{
font-size:1rem;
color:#532c81;
margin:10px 0;
}
.listingItem .shortDescription{
}
.listingItem .readMore{
display:inline-block;
color:#ffffff;
border-radius:3px;
background-color: #c1188d;
padding: 6px 15px;
margin: 20px 10px 10px 0px;
}
.pagination{
text-align:center;
padding:60px 0 10px 0;
}
.paginationButton{
display:inline-block;
background-color:#c1188d;
color:#ffffff;
padding:2px 12px;
margin:8px;
border-radius:3px;
}
.paginationButton.current,
.paginationButton.current:hover{
background-color:#5d348f;
cursor:initial;
}
.paginationButton:hover{
background-color:#a12377;
color:#ffffff;
text-decoration:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.listingItem{
width: 90%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.listingItem{
width: 90%;
}
.listingItem.hasIllustration > div{
width:100%;
}
.listingItem.hasIllustration .illustration{
margin-bottom:40px;
}
.listingItem .subContainer{
padding: 0;
text-align:left;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.listingItem{
width: 90%;
padding:30px;
margin:20px 0;
}
.listingItem.hasIllustration > div{
width:100%;
}
.listingItem.hasIllustration .illustration{
margin-bottom:40px;
}
.listingItem .subContainer{
padding: 0;
text-align:left;
}
.mainSection .listingItem h2{
line-height:1.4;
font-size:1.4em;
margin:0;
}
.pagination{
padding:30px 30px 0px 30px;
}
}
/* ------------------------------------------------------------------------------ Publication Template Page */
.publication .pageHeading{
position:relative;
padding:0;
overflow:hidden;
}
.publication #bgImage > div.colorMask{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(-185deg,#200f46 11%,#451e6d 35%,#451e6d 71%,#200f46);
opacity:0.7;
}
.publication.Emergency #bgImage > div.colorMask{
background:none;
background-color:#dd6565;
opacity:1;
}
.publication.Green #bgImage > div.colorMask{
background:none;
/*background: linear-gradient(-185deg,#1db76e 11%,#1db76e 35%,#218ec6 100%,#c2f7df);*/
background: linear-gradient(-185deg,#631649 11%,#a12377 35%,#a12377 71%,#0d0209);
opacity:0.7;
}
.publication #bgImage > div.imgContent{
width:100%;
height:400px;
overflow:hidden;
}
.publication #bgImage img{
display:inline-block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:120%;
filter: blur(20px) grayscale(100%);
}
.publication .topTitle{
position:absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
}
.publication .topTitle h1{
line-height:1.2;
}
.publication .pubDate{
margin:10px 0 0 0;
font-size:1rem;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.publication #bgImage > div.imgContent{
height:500px;
}
.publication .topTitle{
top:60%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.publication #bgImage > div.imgContent{
height:600px;
}
.publication .topTitle{
top:70%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.publication #bgImage > div.imgContent{
height:550px;
}
.publication .topTitle{
top:400px;
}
.publication .topTitle h1{
font-size:1.8rem;
line-height:1.2;
}
}
/* ------------------------------------------------------------------------------ Provider Locator Page */
.provider-locatorpage .mainSection .container:first-child{
padding-top:0;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ------------------------------------------------------------------------------ Specific Page */
/* ------------------------------------------------------------------------------ Typorgaphy Page */
/* ------------------------------------------------------------------------------ Video Page */
.videoContainer{
position:relative;
overflow:hidden;
/*width:600px;
height:400px;
display:inline-block;*/
/*min-height:600px;
max-height:900px;
height:100vh;*/
}
.scrollDownButton{
position: absolute;
bottom: 30px;
left: 50%;
width: 88px;
height: 50px;
background-position: -50px -425px;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
background-color: rgba(255,102,0,0.6);
}
.scrollDownButton:hover{
}
.videoMask{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color:rgba(255, 255, 255, 0.4);
}
video.bgvid{
/*position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
background-size: cover; */
}
video.bgvid.alignTop{
bottom: auto;
top:0;
}
.novideo video.bgvid{
display:none;
}
/* --------------- Overlay Content */
.vidOverlayContent{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
font-size:2em;
}
/* -------------- Alt Slideshow */
.novideo .videoContainer #contentPreloader{
display:none;
}
.novideo .videoContainer .altPhoto{
position:absolute;
opacity:0;
height:100%;
min-width:100%;
top:50%; /* keep image centered */
left:50%; /* keep image centered */
transform: translate(-50%, -50%); /* keep image centered */
-webkit-transform: translate(-50%, -50%);
animation:round 16s infinite; /* timing depends on the amount of pics */
-webkit-animation:round 16s infinite;
}
.novideo .videoContainer .altPhoto:nth-child(4){
-webkit-animation-delay:0s;
animation-delay:0s;
}
.novideo .videoContainer .altPhoto:nth-child(3){
-webkit-animation-delay:4s;
animation-delay:4s;
}
.novideo .videoContainer .altPhoto:nth-child(2){
-webkit-animation-delay:8s;
animation-delay:8s;
}
.novideo .videoContainer .altPhoto:nth-child(1){
-webkit-animation-delay:12s;
animation-delay:12s;
}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
@-webkit-keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.videoContainer{
height:600px;
}0
}
/* ------------------------------------------------------------------------------ Particles */
.waves{
position:absolute;
top:-50px;
opacity:0.5;
display:block;
}
/* ------------------------------------------------------------------------------ Particles */
.particles {
position:absolute;
height:600px;
width:100%;
opacity:0.5;
}
.glow {
z-index: -1;
position: fixed;
top: 50%;
left: 50%;
background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
}
.glow-1 {
width: 150vw;
height: 150vh;
margin-top: -75vh;
margin-left: -75vw;
animation: glow-1-move 25s linear infinite both;
}
@keyframes glow-1-move {
from {
transform: translate(-100%, 100%);
}
to {
transform: translate(100%, -100%);
}
}
.glow-2 {
width: 100vw;
height: 100vh;
margin-top: -50vh;
margin-left: -50vw;
animation: glow-2-move 25s linear 8.3333333333s infinite both;
}
@keyframes glow-2-move {
from {
transform: translate(-100%, 0%);
}
to {
transform: translate(100%, 100%);
}
}
.glow-3 {
width: 120vw;
height: 120vh;
margin-top: -60vh;
margin-left: -60vw;
animation: glow-3-move 25s linear 16.6666666667s infinite both;
}
@keyframes glow-3-move {
from {
transform: translate(100%, 100%);
}
to {
transform: translate(0%, -100%);
}
}
/**/
#videoPlayer{
background-color:white;
}
/* ------------------------------------------------------------------------------ Ken Burns Page */
/*.kenburnspage .regularPage,
#kbImages{
min-height:750px;
}*/
#kbImages{
position:relative;
min-height:650px;
max-height:800px;
overflow:hidden;
height:100vh;
}
#kbImages a{
position:absolute;
height:100%;
top:0;
left:0;
opacity:0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
#kbImages.kbActivated a{
-webkit-transition-property: all, -webkit-transform;
transition-property: all, transform;
-webkit-transition-duration: 8s, 8s;
transition-duration: 8s, 8s;
}
#kbImages a img{
height:115%; /* set to fit width on large screens - because of gap created by ken burns */
}
#kbImages a:nth-child(1){
-webkit-transform-origin: top right;
transform-origin: top right;
}
#kbImages a:nth-child(2){
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
left:auto;
right:0;
}
#kbImages a:nth-child(3){
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
#kbImages a.fx{
opacity:1;
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.kbContent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
text-align: center;
padding: 0 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kbContent h1{
margin: 0;
color: #FFFFFF;
}
/* Rotating */
.rotating #kbImages a{
-webkit-transform: scale(1.2) rotate(5deg);
transform: scale(1.2) rotate(5deg);
}
.rotating #kbImages a.fx,
.rotating #kbImages a:nth-child(2).fx{
-webkit-transform: scale(1);
transform: scale(1);
}
.rotating #kbImages a:nth-child(2){
-webkit-transform: scale(1.05) rotate(-5deg);
transform: scale(1.05) rotate(-5deg);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#kbImages{
max-height:400px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#kbImages{
max-height:400px;
}
}
/* ------------------------------------------------------------------------------ General Page */
.headingSlice{
/*background-color:#0b569b;*/
/*background:linear-gradient(to bottom right, #0b569b, #45d2ff);*/
background: linear-gradient(-185deg,#402d7f 11%,#200f46 35%,#200f46 71%,#402d7f);
}
.slim .headingContent{
/*padding:140px 0 100px 0;*/
}
.headingContent{
/*position: absolute;
top: 150px;
left: 50%;
width:600px;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
text-align: center;*/
padding:140px 0 180px 0;
position:relative;
z-index:1;
color:#ffffff;
}
.homepage .headingContent{
padding:250px 0 200px 0;
}
.headingTransition{
/*transform:translate(0,-25%);*/
position:absolute;
bottom:0;
}
.headingTransition svg{
display:block;
}
.headingContent h2,
.headingContent h1{
font-weight: normal;
color: #ffffff;
font-size: 2.4rem;
margin: 0;
line-height:2;
}
.headingContent h1 span{
margin-left:10px;
}
.headingContent h1 span,
.headingContent h1 div{
vertical-align:middle;
}
.homepage .headingContent h2,
.homepage .headingContent h1{
font-size: 2rem;
margin: 0;
line-height:1.4;
font-family: 'Lexend', sans-serif;
}
.homepage .headingContent h2{
font-size: 2.4rem;
color:white;
}
.sectionMenu{
margin:0 auto;
}
.sectionMenu > div{
text-align:left;
}
.sectionMenu > div:nth-child(2){
text-align:left;
padding-left:40px;
}
.mainSection{
width:100%;
float:left;
background-color:#ffffff;
}
.mainSection .container{
position:relative;
padding:100px 0;
overflow:hidden;
}
/*.mainSection > div.container{
padding:0;
}*/
.mainSection .container:first-child{
/* padding-top:95px; */
}
.mainSection .container.dark{
background-color:#f8f8f8;
}
.bgDecoration{
position:absolute;
bottom:0;
right:0;
width:60%;
transform:translate(10%,10%);
}
.bgDecoration svg{
width:100%;
height:auto;
fill:rgba(248, 248, 248, 0.6);
}
.mainSection h2{
color: #613795;
margin-bottom:50px;
}
.mainSection h2 div{
margin:-8px 10px 0 0;
}
.mainSection h2 span{
display:inline-block;
/*vertical-align:middle;*/
font-size:2rem;
line-height:1.4;
}
/* document button */
.documentLink{
display:inline-block;
background-color:#f1f1f1;
color:inherit;
position:relative;
padding:6px 10px 6px 45px;
border-radius:6px 0px 0px 0px;
width:100%;
box-sizing:border-box;
}
.documentLink:hover{
color:inherit;
background-color:#e6e6e6;
}
.documentLink > div.inlineIcon{
position:absolute;
top:50%;
left:10px;
transform:translate(0,-50%);
}
.documentLink span.mainTitle{
display:inline-block;
vertical-align:middle;
}
.documentLink span.lastMod{
width:100%;
display:block;
position:absolute;
left:0px;
bottom:0;
transform:translate(0,100%);
background-color:#ededed;
font-size:0.75rem;
padding:3px 14px;
box-sizing:border-box;
border-radius:0 0 6px 6px;
}
.documentLink:hover span.lastMod{
background-color:#e1e1e1;
}
.linkContainer{
display:inline-block;
width:100%;
margin:0 0 70px 0;
position:relative;
}
a[data-copy-clipboard]{
display:inline-block;
position:absolute;
top:0;
right:0;
transform:translate(0,-100%);
background-color:#ededed;
font-size:0.7rem;
color:#585858;
padding:4px 20px;
border-radius:6px 6px 0 0;
}
a[data-copy-clipboard].copied,
a[data-copy-clipboard]:hover{
background-color:#c1188d;
color:#ffffff;
text-decoration:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.slim .headingContent{
padding:150px 0 100px 0;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.imageContainer{
max-height:600px;
}
.homepage .headingContent{
padding:220px 30px 140px 30px;
}
.homepage .headingContent h2,
.homepage .headingContent h1{
font-size: 1.4rem;
}
.homepage .headingContent h2{
font-size: 1.8rem;
}
.headingContent{
padding:160px 0 100px 0;
}
.slim .headingContent{
padding:140px 0 80px 0;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.headingContainer{
max-height:none;
line-height:1.6;
}
.headingContent,
.slim .headingContent{
padding:240px 30px 100px 30px;
}
.homepage .headingContent{
padding:240px 30px 0px 30px;
}
.homepage .headingContent h2,
.homepage .headingContent h1,
.headingContent h2,
.headingContent h1{
font-size: 1.4rem;
line-height:1.6;
}
.headingContent h1{
margin-bottom:20px;
}
.headingTransition svg{
width:250%;
transform:translate(-50%,0);
}
.sectionMenu > div:nth-child(2) {
padding-left: 0px;
}
.mainSection .container{
padding:60px 0px;
}
.mainSection .container:first-child{
padding-top:40px;
}
.mainSection h2 span{
font-size:1.8rem;
}
}
/* ------------------------------------------------------------------------------ */
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*############################ Inline Videos ################################*/
/*###########################################################################*/
.vid-container{
display:flex;
flex-wrap: wrap;
gap: 1rem;
}
.embedded-vid iframe{
aspect-ratio:0.56;
}
.embedded-vid{
width:calc(50% - 2rem);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.vid-container{
gap: 1rem 0;
}
.embedded-vid{
width:100%;
}
}
/*###########################################################################*/
/*####################### Youtube Video Embedding ###########################*/
/*###########################################################################*/
#videoSection .videoWrapper{
transform:translate(0,-200px);
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*###########################################################################*/
/*#################################### Cards ################################*/
/*###########################################################################*/
/* ------------------------------------------------------------------------------ Cards Layer */
#cardsLayer{
background-color: #FFFFFF;
padding: 0; /*background: radial-gradient(ellipse at center, #ffffff 0%,#363C41 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*background-image:url(conti/blury/bg-26.jpg);
background-size:cover;*/
background-image: url(img/60-lines.png);
}
.cleargrey{
background-color: #707A85;
}
.darkgrey{
background-color: #474E54;
}
.blue{
background-color: #67CCF7;
}
.flexCard{
display: flex; /* flex, inline-flex */
/* flex-direction: row; /* row, column, row-reverse, column-reverse */
/* flex-wrap: wrap; /* wrap ( multi line, left to right), nowrap (force single line, left to right), wrap-reverse (multi line, right to left) */
flex-flow:row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: flex-start; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
align-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, stretch (on multi lines -> the way multilines are packed ) */
}
.flexCard > a{ /* default - "justify-content", "flex-wrap", "" can influence size of items */
width: 25%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*margin: 0.5%;
/*margin: 1.7vw 2% 1.7vw 2%;*/
/*border-radius:4px;*/
text-decoration:none;
color:inherit;
background-image: url(img/60-lines.png);
}
.flexCard > a:nth-child(9){
display:none;
}
.flexCard > a .imgCt img{
width:100%;
max-width:100%;
/*border-top-left-radius:4px;
border-top-right-radius:4px;*/
}
.flexCard > a:hover .imgCt img{
opacity:0.8;
}
.flexCard > a .textCt{
padding:25px 30px;
height:180px;
display:flex;
align-items: center;
}
/* colors + styles */
.flexCard{
color:#FFFFFF;
}
.flexCard h2{
/*font-family: 'Anton', sans-serif;*/
font-size: 2.4em;
font-weight: normal;
line-height: 1.4;
text-transform: uppercase;
}
@media only screen and (min-width: 1191px) and (max-width: 1450px) { /* Normal Screens */
/*.flexCard > a .textCt{
height:340px;
}*/
.flexCard > a{
width: 33.33%;
}
.flexCard > a:nth-child(9){
display:block;
}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
/*.flexCard > a .textCt{
height:340px;
}*/
.flexCard > a{
width:46%;
}
.flexCard > a:nth-child(9){
display:block;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.flexCard > a{
width:46%;
}
.flexCard > a:nth-child(9){
display:block;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.flexCard > a{
width:100%;
margin: 60px 0 0 0;
}
.flexCard > a:nth-child(9){
display:block;
}
}
/*###########################################################################*/
/*#################################### Tiles ################################*/
/*###########################################################################*/
/* grid */
.tiles{
display: flex; /* flex, inline-flex */
/* flex-direction: row; /* row, column, row-reverse, column-reverse */
/* flex-wrap: wrap; /* wrap ( multi line, left to right), nowrap (force single line, left to right), wrap-reverse (multi line, right to left) */
flex-flow:row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: flex-start; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
align-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, stretch (on multi lines -> the way multilines are packed ) */
}
.tiles > a{ /* default - "justify-content", "flex-wrap", "" can influence size of items */
width: 33.3%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
text-decoration:none;
color:inherit;
position:relative;
}
.tiles > a img{
width:100%;
max-width:100%;
display:block;
}
.tiles > a .txtCt{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items: flex-start; /* center */
/*transition: opacity 1s ease, visibility 0.01s linear;
-webkit-transition: opacity 1s ease, visibility 0.01s linear;*/
}
.tiles > a.pic .txtCt{
opacity:0;
}
.tiles > a:hover .txtCt{
background-color:rgba(0,0,0,0.8);
opacity:1;
}
/* text formatting */
.tiles > a .txtCt div{
width:inherit;
padding:25px 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
}
.tiles > a .txtCt div h2{
/*font-family: 'Anton', sans-serif; /* Google Font Imported */
font-size:2.4em;
font-weight:normal;
line-height:1;
margin:10px 0;
}
/* colors + styles */
.tiles{
color:#FFFFFF;
}
.tiles h2{
color:#FFFFFF;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.tiles > a{
width: 50%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.tiles > a{
width: 100%;
}
}
/*###########################################################################*/
/*################################## Diamonds ###############################*/
/*###########################################################################*/
/* grid positionning */
.diamonds > a{
float: left;
width: 23.57022604%;
margin: -6.90355937% 4.88155365% 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 23.57022604%;
text-decoration:none;
color:inherit;
position:relative;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
overflow:hidden;
}
.diamonds > a:nth-child(1),
.diamonds > a:nth-child(2),
.diamonds > a:nth-child(3) {
margin-top: 0;
}
.diamonds > a:nth-child(5n+4),
.diamonds > a:nth-child(5n+5) {
margin-top: -6.90355937%;
}
.diamonds > a:nth-child(5n+4) {
margin-left: 21.54822031%;
}
.diamonds > a:nth-child(5n+6) {
clear: left;
}
/* diamonds content */
.diamonds > a img{
width:145%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(-45deg);
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
}
.diamonds > a .txtCt{
position:absolute;
width:100%;
height:100%;
z-index:1;
}
.diamonds > a.pic .txtCt{
opacity:0;
}
.diamonds > a:hover .txtCt{
background-color:rgba(0,0,0,0.8);
opacity:1;
}
/* text formatting */
.diamonds > a .txtCt div{
width:inherit;
padding:25px 30px;
text-align:center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(-45deg);
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
}
.diamonds > a .txtCt div h2{
/*font-family: 'Anton', sans-serif; /* Google Font Imported */
font-size:2.4em;
font-weight:normal;
line-height:1;
margin:10px 0;
}
/* colors + styles */
.diamonds{
color:#FFFFFF;
}
.diamonds h2{
color:#FFFFFF;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
/* reset */
.diamonds > a:nth-child(5n+6) {
clear: none;
}
/* new rules */
.diamonds > a,
.diamonds > a:nth-child(3n+4),
.diamonds > a:nth-child(3n+5),
.diamonds > a:nth-child(3n+3){
width: 34.95%;
margin: -10.4% 7.525% 0;
padding-bottom: 34.95%;
}
.diamonds > a:nth-child(1),
.diamonds > a:nth-child(2){
margin-top: 0;
}
.diamonds > a:nth-child(3n+3){
margin-left: 32.5%;
}
.diamonds > a:nth-child(3n+4){
clear: left;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
/* reset */
.diamonds > a:nth-child(5n+6) {
clear: none;
}
/* new rules */
.diamonds > a,
.diamonds > a:nth-child(n+2){
width: 46%;
margin: -13.5% 11% 0;
padding-bottom: 46%;
}
.diamonds > a:nth-child(1){
margin-top: 0;
}
.diamonds > a:nth-child(2n+2){
margin-left: 43.5%;
}
.diamonds > a:nth-child(n+2){
clear:left;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
/* reset */
.diamonds > a:nth-child(5n+6) {
clear: none;
}
/* new rules */
.diamonds > a,
.diamonds > a:nth-child(n+2),
.diamonds > a:nth-child(2n+2){
width: 90%;
margin: 37% 5% 0;
padding-bottom: 90%;
}
.diamonds > a:nth-child(1){
margin-top: 0;
}
.diamonds > a:nth-child(2n+2){
}
.diamonds > a:nth-child(n+2){
clear:left;
}
}
/*###########################################################################*/
/*################################## Tables #################################*/
/*###########################################################################*/
.horizontalScrollContainer{
width:100%;
}
table{
width:100%;
border-left-style:solid;
border-left-color: #CDCFD6;
border-left-width: 1px;
border-top-style:solid;
border-top-color: #CDCFD6;
border-top-width: 1px;
font-size:0.9em;
}
table td{
text-align:left;
padding:30px;
border-right-style:solid;
border-right-color: #CDCFD6;
border-right-width: 1px;
border-bottom-style:solid;
border-bottom-color: #CDCFD6;
border-bottom-width: 1px;
text-align:center;
vertical-align:middle;
}
table tr td:first-child{
background-color: #ececec;
}
table tr:first-child td{
background-color: #e0e0e0;
text-align: center;
}
table tr td:nth-child(2) {
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.horizontalScrollContainer{
overflow-x: scroll;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.horizontalScrollContainer{
overflow-x: scroll;
}
}
/*###########################################################################*/
/*################################## Tabs ###################################*/
/*###########################################################################*/
.tabContainer{
float:left;
position:relative;
width:100%;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
overflow:hidden;
height:0;
margin:0;
}
.menuTabs, .ctTabs{
position:absolute;
/*top:100px;*/
left:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity:0;
/*transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;*/
width:100%;
z-index:-1;
}
.displaying{
opacity:1;
top:0px;
z-index:1;
}
/*###########################################################################*/
/*############################## Google Maps ################################*/
/*###########################################################################*/
/* --------------- Map General -------------- */
.google-map{
width:100%;
height:650px;
float:left;
}
.mapControls{ /* Controls Positioning */
display:block;
position:absolute;
right:0px;
}
/* -------------- Info Windows ------------- */
.google-map .gm-style,
.google-map .gm-style .gm-style-iw,
.google-map .gm-style .gm-style-iw a,
.google-map .gm-style .gm-style-iw span,
.google-map .gm-style .gm-style-iw label,
.google-map .gm-style .gm-style-iw div{ /* Prevent "Roboto" font default loading + Reset from Google Maps default settings */
font-family:inherit;
font-weight:normal;
font-size:inherit;
}
/*.google-map .gm-style .gm-style-iw div{
padding-top:0;
}*/
.google-map .gm-style .gm-style-iw div.infoWindow{
font-size:0.9em;
}
.google-map .infoWindow{
padding: 0px 12px 12px 0; /* px fix scroll bar in IE */
min-width: 200px; /* px fix width in IOS */
max-width: 260px;
color: inherit;
}
/* ------- Title & Paragraph */
.google-map .infoWindow h1{
font-size:1.2em;
margin:0;
}
.google-map .infoWindow p{
margin-top:0.5em;
margin-bottom:0;
display:block;
}
/* -------- Links */
/*.google-map .infoWindow a{
color: #19b7ea;
}
.google-map .infoWindow a:hover{
color: #0099EC;
}*/
/* ----------- Zoom Buttons */
.google-map div.zoomButton{
display:inline-block;
padding: 8px 16px;
border-radius: 4px;
background-color: #a12377;
color: #FFFFFF;
margin:20px 15px 0 0px;
cursor:pointer;
}
.google-map div.zoomButton:hover{
text-decoration: none;
background-color: #c1188d;
}
.gm-style-iw-chr button{
position:absolute !important;
top:0;
right:0;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.google-map{
height:600px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.google-map{
height:600px;
}
}
/*###########################################################################*/
/*########################## Collapsible Elements ###########################*/
/*###########################################################################*/
.collapsible{
text-align:left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #F4F4F4;
padding:20px 30px;
display:block;
border-radius:3px;
}
a.collapsible.active:hover{
background-color: #F4F4F4;
}
a.collapsible.active{
border-radius:3px 3px 0 0;
}
a.collapsible:hover{
text-decoration:none;
background-color: #ededed;
}
.collapsible + div {
text-align:left;
/*-webkit-box-sizing: border-box;
box-sizing: border-box;*/
visibility: hidden;
transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out 0.2s;
-webkit-transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out 0.2s;
opacity: 0;
background-color: #F4F4F4;
padding:0 30px;
margin:0 0 40px 0;
border-radius:0 0 3px 3px;
}
.collapsible + div.display{
visibility:visible;
opacity:1;
padding:0 30px 40px 30px;
}
/* ----- Bullets */
.collapsible div{
display:inline-block;
vertical-align:middle;
margin:0 0.5em 0 0;
width: 26px; height: 26px;
background-position: -221px -680px;
}
.collapsible.active div{
background-position: -252px -680px;
}
/* ---- Services Tree */
/* container */
#services{
}
#services h2{
font-size:2.6em;
line-height:1.2;
margin:0 0 10px 0;
}
/* tree */
.tree > div:nth-child(1){
padding:40px 25px 10px 0;
border-right:solid 5px #FFFFFF;
text-align:right;
}
.tree > div:nth-child(2){
padding: 40px 0 10px 25px;
border-left:solid 5px #FFFFFF;
text-align:left;
}
.tree > div:nth-child(1) .collapsible + div{
text-align:right;
}
.tree .collapsible + div {
background-color: transparent;
padding:0;
margin:10px 0 40px 0;
}
.tree .collapsible + div.display{
padding:0;
}
/* button */
.tree .collapsible{
display:inline-block;
padding: 8px 16px;
border-radius:4px;
}
.tree .collapsible:hover{
text-decoration:none;
}
.tree .collapsible div{
display:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#services{
text-align:left;
}
/* tree */
.tree > div:nth-child(1),
.tree > div:nth-child(2){
padding: 50px 0 0 30px;
border-right:none;
border-left:solid 10px #FFFFFF;
text-align:left;
}
.tree > div:nth-child(2){
padding: 0px 0 10px 30px;
}
.tree > div:nth-child(1) .collapsible + div{
text-align:left;
}
.collapsible + div {
margin:0 0 30px 0;
}
}
/*###########################################################################*/
/*################################ Forms ####################################*/
/*###########################################################################*/
/* ---------- Blocks */
.form{
display: inline-block;
text-align:left;
}
.legend{
display:inline-block;
font-style: italic;
font-size:0.8em;
margin:10px 20px 0px 0;
}
.hiddenForm,
#cellCont{ /* Honey Pot - Anti Spam */
display:none;
}
/* ------------- Inputs */
input[type=text],
textarea,
input[type=submit],
.trigger,
.activetrigger{
line-height:1.5; /* mini bug - can't be 1 */
padding: 9px 14px;
font-family:inherit;
font-size:inherit;
border: 2px solid;
-webkit-appearance: none;
margin:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius:0px;
}
input[type=text],
textarea{
width:100%;
}
textarea{
height:180px;
resize: none;
overflow: auto;
display:block;
}
input[type=submit]{
cursor:pointer;
padding:9px 14px;
background-color: #c1188d;
border-color: #c1188d;
color: #FFF;
margin:10px 20px 10px 0;
border-radius: 4px;
}
input[type=submit]:hover{
background-color: #b01480;
border-color: #b01480;
}
/* On Focus */
input[type=text]:focus,
textarea:focus{
outline: none;
}
/* ----------- Ckeck Boxes / Radio / Form Box / File */
.labelRadio,
.labelCheck{
display:inline-block;
cursor:pointer;
position:relative;
margin:10px 20px 10px 0;
}
.labelRadio span,
.labelCheck span{
/*display: inline-block;*/
line-height:1;
vertical-align: middle;
}
.labelRadio div,
.labelCheck div{
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
.labelRadio input,
.labelCheck input{
position:absolute;
top:0;
left:0;
z-index:-1; /* Forces IE 8 to behave - instead of hidden */
}
.labelRadio div{
background-position: -200px -351px;
}
.labelRadio.checked div{
background-position: -250px -351px;
}
.labelCheck div{
background-position: -100px -351px;
}
.labelCheck.checked div{
background-position: -150px -351px;
}
/* ----------------- Wrappers */
.inputWrap{
width:100%;
max-width:260px;
display:inline-block;
margin: 10px 20px 10px 0;
position:relative;
vertical-align:top;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
}
/* Labeling */
.inputWrap .label{
display:block;
text-align:left;
padding:3px 10px;
}
.inputWrap .label,
.labelRadio,
.labelCheck{
padding:8px 12px;
}
.formDate{
max-width:220px;
}
.formPeople{
max-width:200px;
}
.formPhone{
max-width:180px;
}
.formEmail{
max-width:220px;
}
.formComment{
max-width:460px;
}
.inputWrap .label div{
display:inline-block;
vertical-align:middle;
margin:0 2px 0 0;
width: 26px; height: 26px;
background-position: -325px -350px;
}
.inputWrap .label span{
display: none;
vertical-align: middle;
margin-left:4px;
}
.formPeople .label div{
background-position: -375px -250px;
}
.formEmail .label div{
background-position: -375px -300px;
}
.formPhone .label div{
background-position: -100px -300px;
}
.formComment .label div{
background-position: -375px -350px;
}
.formDate .label div{
background-position: -325px -300px;
}
.formBirthM .label div{
background-position: -175px -300px;
}
.formCrowd .label div{
background-position: -275px -300px;
}
.formAddress .label div{
background-position: -225px -300px;
}
.formCCard .label div,
.ccExpirationM .label div,
.ccExpirationY .label div{
background-position: -425px -225px;
}
.formCVV .label div{
background-position: -425px -325px;
}
.formChunk{
margin:50px 0 0 0;
}
/* File Input */
input[type=file] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
input[type=file] + label {
display: inline-block;
cursor: pointer;
cursor: pointer;
padding: 9px 14px;
background-color: #b5b5b5;
border-color: #b5b5b5;
color: #FFF;
margin: 10px 20px 10px 0;
border-radius: 3px;
}
input[type=file] + label:hover{
background-color: #ababab;
border-color: #ababab;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.inputWrap{
margin: 20px 0 0 0;
}
}
/*###########################################################################*/
/*############################## Select List ################################*/
/*###########################################################################*/
.inputWrap a,
.inputWrap a:hover{
text-decoration:none;
color:inherit;
}
.trigger,
.activetrigger{
text-align:left;
display: block;
position: relative;
background-color: #FFFFFF;
}
[data-darkText]{
}
.activetrigger:active {
background-color: #FFFFFF;
}
.dropcontainer ul{
width: 100%;
position: absolute;
border: 2px solid;
border-top: none;
background: #fff;
list-style-type: none;
margin: 0;
z-index: 100;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
background-color: #EAEAEA;
}
.dropcontainer ul li {
padding: 5px 10px;
}
.dropcontainer ul li:hover {
outline: none;
background-color: #C1C1C1;
}
.dropcontainer ul li:first-child {
display: none;
}
.dropdownhidden {
display: none;
}
.dropdownvisible {
height: 200px;
overflow-y: scroll;
}
/*###########################################################################*/
/*##################### glDatePicker (Date Picker) ##########################*/
/*###########################################################################*/
.gldp-default {
position: absolute;
font-family: inherit;
margin-top:-1px !important;
font-size:0.95em;
}
/* Core style for every cell */
.gldp-default .core {
box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
float: left;
padding: 0;
margin: 0;
text-align: center;
cursor: pointer;
font-size:0.95em;
background: #ffffff;
color: #5B5B5B;
}
/* Cell border */
.gldp-default .core.border {
border-style: solid;
border-width: 0;
border-radius: 0;
}
/* Month / Year text and select */
.gldp-default .monyear,
.gldp-default .monyear select {
font-size: 1em !important;
}
/* Month / Year text */
.gldp-default .monyear span {
margin: 0 5px 0 5px;
}
/* Prev / Next arrows */
.gldp-default .prev-arrow,
.gldp-default .next-arrow {
text-decoration: none;
color: #C1C1C1;
}
.gldp-default .prev-arrow:active,
.gldp-default .next-arrow:active {
}
.gldp-default .prev-arrow-off,
.gldp-default .next-arrow-off {
}
/* Days of the week */
.gldp-default .dow {
color: #FFF;
}
/* Weekdays */
.gldp-default .mon,
.gldp-default .tue,
.gldp-default .wed,
.gldp-default .thu,
.gldp-default .fri {
}
/* Weekend days */
.gldp-default .sat,
.gldp-default .sun {
}
/* Selectable days that are outside of current month being shown */
.gldp-default .outday {
color: #CCC;
}
/* Hover + Currently selected day */
.gldp-default .mon:hover,
.gldp-default .tue:hover,
.gldp-default .wed:hover,
.gldp-default .thu:hover,
.gldp-default .fri:hover,
.gldp-default .sat:hover,
.gldp-default .sun:hover,
.gldp-default .today:hover,
.gldp-default .border.selected {
background-color: #C1C1C1;
color: #FFF;
/*border-right-color: #C1C1C1;
border-bottom-color: #C1C1C1;*/
}
/* Non-Selectable days */
.gldp-default .noday {
color: #666;
font-weight: normal;
cursor:default !important;
}
/* Today */
.gldp-default .today {
}
/* Special */
.gldp-default .special {
}
/*###########################################################################*/
/*######################### Auto Complete Field #############################*/
/*###########################################################################*/
[hidden] { display: none; }
.visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
div.awesomplete {
/*display: inline-block;*/
position: relative;
}
div.awesomplete > ul {
position: absolute;
left: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
border-radius: 3px;
margin: 5px 0 0;
border: none;
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
text-shadow: none;
background-color: #EAEAEA;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
display: none;
}
/* Pointer */
div.awesomplete > ul:before {
content: "";
position: absolute;
top: -5px;
left: 1em;
width: 0;
height: 0;
padding: 0.4em;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #EAEAEA;
}
div.awesomplete > ul > li {
position: relative;
padding: 8px 12px;
cursor: pointer;
text-align: left;
color: #333333;
font-size: 0.9em;
}
div.awesomplete > ul > li > span {
font-size: 0.8em;
font-style: italic;
}
div.awesomplete > ul > li[aria-selected="true"],
div.awesomplete > ul > li:hover,
div.awesomplete mark,
div.awesomplete li:hover mark,
div.awesomplete li[aria-selected="true"] mark {
background-color: #C1C1C1;
}
div.awesomplete > ul > li:first-child{
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
div.awesomplete > ul > li:last-child{
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom:none;
}
/*###########################################################################*/
/*############## Form Colors Quick Handle + Error Handling ##################*/
/*###########################################################################*/
input[type=text],
textarea,
.gldp-default .border,
.trigger[data-darkText],
.activetrigger[data-darkText],
.trigger[data-darkText]:hover,
.activetrigger[data-darkText]:hover,
.dropcontainer ul{
border-color: #b5b5b5;
color: inherit;
border-radius: 0 0 3px 3px;
}
input[type=text].emptyField,
textarea.emptyField,
.trigger,
.activetrigger{
border-color: #b5b5b5;
color: #fff;
}
.labelRadio,
.labelCheck,
.inputWrap .label,
.gldp-default .dow,
.gldp-default .noday{
background-color: #b5b5b5;
color: inherit;
border-radius: 3px;
color:#ffffff;
}
.labelCheck a{
color:#ffffff;
}
.inputWrap .label{
border-radius: 3px 3px 0 0;
}
/* ---------------------- Errors Handling */
input[type=text].error,
textarea.error,
.error,
div.inputWrap.error .trigger{
background-color: #FFA466;
border-color: #F60;
color: #B74900;
}
input[type=file] + label.error,
div.inputWrap.error .label{
background-color: #F60;
color: #FFF;
}
.errors{
color: #FFA466;
font-size:0.95em;
}
.displayErrorMargins{
margin:10px 10px 10px 0;
}
#noProviderComplaint{
margin-top:15px;
background-color: #FFA466;
color: #B74900;
border: 2px solid #F60;
padding:20px;
box-sizing:border-box;
border-radius:3px;
}
#noProviderComplaint a{
color: #B74900;
text-decoration:underline;
}
/* -------------------------- Customizations */
/* -------- Search Form*/
#searchForm{
width:auto;
max-width:100%;
display:inline-block;
}
#searchForm input[type=text]{
max-width:185px;
color:#585858;
display:inline-block;
border-radius:3px 0 0 3px;
border-color:#ffffff;
padding: 12px 14px;
}
#searchForm input[type=submit]{
color:#ffffff;
display:inline-block;
width:90px;
border-radius:0 3px 3px 0;
margin:0;
padding: 12px 14px;
}
a.listingSearch{
display:inline-block;
margin:30px 0;
}
a.listingSearch span.searchListingTitle{
}
a.listingSearch span.searchListingDate{
color:#585858;
display:inline-block;
font-size:1rem;
}
a.listingSearch span.searchListingContext{
display:inline-block;
color:#c1188d;
font-size:1rem;
font-style:italic;
}
a.listingSearch span.searchListingContext b{
background-color:#f9e7ff;
padding:0 5px;
}
/* -------- birth date */
.formBirth input{
float:left;
width:25%;
border-radius:0 0 0 3px;
}
.formBirth input:nth-of-type(2){
border-left:none;
border-radius:0;
}
.formBirth input:nth-of-type(3){
border-left:none;
width:50%;
border-radius:0 0 3px 0;
}
/* ---------------------------------------------------- CC Form */
#ccForm .formPeople,
#ccForm .formAddress,
#ccForm .formCCard{
max-width: 280px;
}
textarea#ccaddress{
height:140px;
}
.ccExpiration{
max-width:10em;
}
.ccExpiration input{
float:left;
width:50%;
border-radius: 0 0 0 3px;
}
.ccExpiration input:nth-of-type(2){
border-left:none;
border-radius: 0 0 3px 0;
}
/*###########################################################################*/
/*############################ Viewport Effects #############################*/
/*###########################################################################*/
#mySuperImg[data-viewportevent],
#mySuperBlock[data-viewportevent],
#superText[data-viewportevent]{
transform:scale(0.8);
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
#mySuperImg[data-viewportevent].inViewport,
#mySuperBlock[data-viewportevent].inViewport,
#superText[data-viewportevent].inViewport{
transform:scale(1);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*######################## Isotope Customization ############################*/
/*###########################################################################*/
.isotope{
background-color: #0CF;
}
/* -------- Elements */
.isotope .isotope-item{
width: 31.3%;
margin: 1%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #09F;
text-decoration:none;
color:inherit;
}
.isotope .isotope-item img{
max-width:100%;
display:inline-block;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.isotope .isotope-item{
width: 48%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.isotope .isotope-item{
width: 48%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.isotope .isotope-item{
width: 100%;
margin: 0%;
}
}
/*###########################################################################*/
/*################################# Main Menu ###############################*/
/*###########################################################################*/
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*######################### Social Menu Mobile ##############################*/
/*###########################################################################*/
#topSocMob{
position: fixed;
top: 13px;
right: 13px;
z-index: 9999;
background-color: #003399;
display:none;
}
#topSocMob a{
display:inline-block;
width: 34px;
height: 34px;
}
#topSocMob a.fb{
background-position: -550px -425px;
}
#topSocMob a.tw{
background-position: -550px -475px;
}
#topSocMob a.ta{
width:57px;
background-position: -592px -425px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#topSocMob{
display:block;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#topSocMob{
display:block;
}
}
/*########################################################################################*/
/*##################################### Flickity #########################################*/
/*########################################################################################*/
/*! Flickity v2.0.5
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/* big buttons, no circle */
.flickity-prev-next-button {
width: 80px;
height: 80px;
background: transparent;
}
.flickity-prev-next-button:hover {
background: transparent;
}
/* arrow color */
.flickity-prev-next-button .arrow {
fill: rgba(255, 255, 255, 0.7);
}
.flickity-prev-next-button:hover .arrow {
fill: rgba(255, 255, 255, 1);
}
.flickity-prev-next-button.no-svg {
color: white;
}
.flickity-prev-next-button.next{
right:0px;
}
.flickity-prev-next-button.previous{
left:0;
}
/* hide disabled button */
.flickity-prev-next-button:disabled {
display: none;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}
/* Default elements styling */
.flickity-slider > a,
.flickity-slider > div{
display:block;
width:100%;
}
.flickity-slider > a img,
.flickity-slider > a img{
display:block;
width:100%;
}
.imgGal .flickity-slider > a,
.imgGal .flickity-slider > div{
width:40%;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.imgGal .flickity-slider > a,
.imgGal .flickity-slider > div{
width:60%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.imgGal .flickity-slider > a,
.imgGal .flickity-slider > div{
width:70%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.imgGal .flickity-slider > a,
.imgGal .flickity-slider > div{
width:100%;
}
}
/*###########################################################################*/
/*################################ Lightbox #################################*/
/*###########################################################################*/
/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox{
cursor: pointer;
position: fixed;
z-index: 10000;
-ms-touch-action: none;
touch-action: none;
}
/* WITH ACTIVITY INDICATION (Preloader) */
#imagelightbox-loading,
#imagelightbox-loading div{
-webkit-border-radius: 50%;
border-radius: 50%;
}
#imagelightbox-loading{
width: 20px; /* 40 */
height: 20px; /* 40 */
position: fixed;
z-index: 10003;
top: 50%;
left: 50%;
padding: 10px; /* 10 */
margin: -20px 0 0 -20px; /* 20 */
/*box-shadow: 0 0 40px rgba( 0, 0, 0, .75 ); /* 40 */
}
#imagelightbox-loading div{
width: 20px; /* 20 */
height: 20px; /* 20 */
-webkit-animation: imagelightbox-loading .5s ease infinite;
-moz-animation: imagelightbox-loading .5s ease infinite;
-o-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading{
from { opacity: .5; -o-transform: scale( .75 ); }
50% { opacity: 1; -o-transform: scale( 1 ); }
to { opacity: .5; -o-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading{
from { opacity: .5; transform: scale( .75 ); }
50% { opacity: 1; transform: scale( 1 ); }
to { opacity: .5; transform: scale( .75 ); }
}
/* WITH OVERLAY */
#imagelightbox-overlay{
position:absolute;
background-color: #fff;
background-color: rgba( 255, 255, 255, .9 );
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* WITH "CLOSE" BUTTON */
#imagelightbox-close{
width: 40px;
height: 40px;
text-align: left;
text-indent: -9999px;
position: fixed;
z-index: 10002;
top: 30px;
right: 30px;
opacity:0.6;
background-position: -265px -475px;
}
#imagelightbox-close:hover{
opacity:1;
}
/* WITH CAPTION */
#imagelightbox-caption{
text-align: center;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
}
#imagelightbox-caption span{
display:inline-block;
padding: 1em; /* 10 */
background-color: #FFF;
}
/***************************** Lightbox Customization Handles ***************/
#imagelightbox-loading{
background-color: rgba(255, 255, 255, 0.4);
}
#imagelightbox-loading div{
background-color: #FFFFFF;
}
#imagelightbox-overlay{
background-color: rgb(83 44 129 / 72%);
}
#imagelightbox-caption span{
background-color: rgb(69 30 110);
color: #FFF;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#imagelightbox-close{
top: 10px;
right: 10px;
}
.imagelightbox-arrow{
left: 10px;
}
.imagelightbox-arrow-right{
left:auto;
right:10px;
}
}
/*###########################################################################*/
/*############################# Thumbnail Gallery ###########################*/
/*###########################################################################*/
/* ----- Gallery row and columns */
lightbox{
display: flex; /* flex, inline-flex */
flex-flow:row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: flex-start; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
align-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, stretch (on multi lines -> the way multilines are packed ) */
}
.thumbNail{
display:inline-block;
padding:1%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.thumbNail img{
width:100%;
}
.imgPerLine2 .thumbNail{
width:49%;
}
.imgPerLine3 .thumbNail{
width:33%;
}
.imgPerLine1 .thumbNail{
width:100%;
}
.tbCaption{
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #003366;
padding: 8px;
display:inline-block;
width:100%;
color: #00CCFF;
/*margin-top:-7px;*/
}
a.thumbNail:hover > .tbCaption{
text-decoration: none;
background-color: #000033;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.imgPerLine3 .thumbNail{
width:49%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.imgPerLine3 .thumbNail,
.imgPerLine2 .thumbNail{
width:100%;
padding:0;
}
}
/*###########################################################################*/
/*################################## Timeline ###############################*/
/*###########################################################################*/
ul.timeline{
display:inline-block;
width:100%;
}
ul.timeline li{
margin: 0;
padding-left: 3.6em;
margin-left: 18em; /************ handle *******/
border-left-color: #F1CA24;
border-left-style: solid;
border-left-width: 10px;
padding-bottom: 2em;
position: relative;
text-align: left;
}
ul.timeline li:before{
content: '';
width: 20px;
height: 20px;
border-radius: 15px;
position: absolute;
top: -2px;
left: -20px;
background-color: #FFFFFF;
border-color: #F1CA24;
border-width: 5px;
border-style: solid;
}
ul.timeline li .eventDate{
display: block;
position: absolute;
top: -2px;
left: -14em; /************ handle *******/
width: 10em;
text-align: right;
color: #FFFFFF;
font-weight: bold;
}
ul.timeline li .eventDetails{
display:inline-block;
}
ul.timeline li .eventInfo{
display: inline-block;
background-color: #525252;
position: relative;
padding: 20px;
margin-top: -1em;
border-radius: 3px;
background-image: url(img/60-lines.png);
color: #FFFFFF;
text-decoration: none;
}
ul.timeline li .eventInfo:before{
content:'';
position:absolute;
top:20px;
left:-17px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:17px solid #525252;
}
.eventImage{
display:inline-block;
}
.eventImage img{
max-width:100%;
margin:0 0 15px 0;
}
ul.timeline li h2{
margin:0 0 15px 0;
}
ul.timeline li h2 a,
ul.timeline li h2 a:hover{
text-decoration: none;
color: #FFFFFF;
}
/* Buttons */
ul.timeline li h2 a,
ul.timeline li h2 a:hover{
text-decoration:none;
}
/* One line */
ul.timeline li.oneLine .eventInfo{
margin-top:-0.5em;
}
ul.timeline li.oneLine .eventInfo:before{
top:9px;
}
/* Separator */
ul.timeline li.separator{
padding-top:4em;
}
ul.timeline li.separator .eventDate{
font-size: 1.6em;
left: -12.4em; /************ handle *******/
font-weight: bold;
color: #F1CA24;
top: 10px;
}
ul.timeline li.separator .eventInfo,
ul.timeline li.separator:before{
display:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
ul.timeline li{
margin-left:16em; /************ handle *******/
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
ul.timeline li{
margin-left:16em; /************ handle *******/
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
ul.timeline li{
margin-left:0.5em;
}
ul.timeline li.separator .eventDate{
left:2.5em;
top:1.5em;
text-align:left;
margin-bottom:0;
}
ul.timeline li .eventDate{
position:static;
text-align: left;
font-weight:bold;
margin-bottom:0.5em;
width:auto;
}
ul.timeline li .eventInfo,
ul.timeline li.oneLine .eventInfo{
margin-top:0;
}
ul.timeline li .eventInfo:before,
ul.timeline li.oneLine .eventInfo:before{
display:none;
}
ul.timeline li{
padding-left:1.5em;
}
}
/*###########################################################################*/
/*################################ Social Stream ############################*/
/*###########################################################################*/
.dcsns-content {
position: relative;
padding: 0;
}
/* Stream Boxes */
.stream p {
/*margin: 0;
padding: 0;*/
}
.stream li a {
/*color: #2DB6E8;*/
}
ul.stream li.isotope-item{
background-color: #FFFFFF;
position: relative;
padding: 0;
color: #333;
overflow:hidden;
}
.stream li .inner {
padding: 1.5em;
display:block;
float:left;
padding-top:3em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:100%;
}
/*.stream li .icon {
position: absolute;
left: 3px;
bottom: 0;
z-index: 3;
}*/
.stream li .section-intro {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0.6em;
color: #FFF;
padding-left:3em;
text-align:left;
}
.stream li .clear {
clear: both;
}
.stream li > a {
display: block;
position: absolute;
top: 4px;
left: 4px;
width: 2.4em;
height: 2.4em;
}
.stream li > a img{
width:100%;
}
/* Content blocks */
.stream li .inner > span {
display: block;
float:left;
width:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.stream li .section-intro a {
color: #FFF;
text-decoration: underline;
margin-right:0.5em;
}
.stream li .section-title {
margin-top:1em;
}
.stream li .section-title a {
}
.stream li .section-title a:hover {
}
.stream li .section-thumb {
margin-top:1em;
}
.stream li .section-thumb img {
}
.stream li .section-text {
margin-top:1em;
}
.stream li .section-text br {
}
.stream li .section-user {
margin-top:1em;
}
.stream li .section-user:before {
content:'Author:';
margin-right:0.3em;
}
.stream li .section-share {
}
/* ------------------------------------ Sharing Buttons */
.stream li .section-share a {
display: block;
width: 20px;
height: 20px;
float: left;
margin: 0 2px 0 0;
background-color: #413A33;
}
/* --------------------------- Toolbar */
.dcsns-toolbar {
padding: 0;
width: 100%;
position: relative;
}
/* ------------------------- Filter */
.dcsns-toolbar .filter {
padding: 40px 0 33px 0;
width:100%;
text-align:center;
}
.dcsns-toolbar .filter li {
display:inline-block;
padding: 0;
margin:0 10px;
}
.dcsns-toolbar ul.filter li:before{
display:none;
}
.dcsns-toolbar .filter .link-all {
color: #fff;
text-align: center;
padding-top:0.7em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.dcsns-toolbar .filter li a {
width: 50px;
height: 50px;
display: block;
float: left;
background-color: #484848;
border-radius: 3px;
}
.dcsns-toolbar .filter li img{
width:40px;
margin:5px 0 0 0;
}
/* ------------------------------------------------------ Feeds network specific styles */
.dcsns-toolbar .filter a.link-all:hover {
background-color: #FF9800;
text-decoration:none;
}
.stream li.dcsns-rss .section-intro, .filter .f-rss a:hover {
background-color: #FF9800;
}
.stream li.dcsns-flickr .section-intro, .filter .f-flickr a:hover {
background-color: #f90784;
}
.stream li.dcsns-delicious .section-intro, .filter .f-delicious a:hover {
background-color: #3271CB;
}
.stream li.dcsns-twitter .section-intro, .filter .f-twitter a:hover {
background-color: #4ec2dc;
}
.stream li.dcsns-facebook .section-intro, .filter .f-facebook a:hover {
background-color: #3b5998;
}
.stream li.dcsns-google .section-intro, .filter .f-google a:hover {
background-color: #2d2d2d;
}
.stream li.dcsns-youtube .section-intro, .filter .f-youtube a:hover {
background-color: #DF1F1C;
}
.stream li.dcsns-pinterest .section-intro, .filter .f-pinterest a:hover {
background-color: #CB2528;
}
.stream li.dcsns-lastfm .section-intro, .filter .f-lastfm a:hover {
background-color: #C90E12;
}
.stream li.dcsns-dribbble .section-intro, .filter .f-dribbble a:hover {
background-color: #F175A8;
}
.stream li.dcsns-vimeo .section-intro, .filter .f-vimeo a:hover {
background-color: #4EBAFF;
}
.stream li.dcsns-stumbleupon .section-intro, .filter .f-stumbleupon a:hover {
background-color: #EB4924;
}
.stream li.dcsns-deviantart .section-intro, .filter .f-deviantart a:hover {
background-color: #EB4924;
}
.stream li.dcsns-tumblr .section-intro, .filter .f-tumblr a:hover {
background-color: #365472;
}
.stream li.dcsns-instagram .section-intro, .filter .f-instagram a:hover {
background-color: #413A33;
}
/* ---------------------------------------------- Facebook */
.stream li.dcsns-facebook .section-text img {
margin: 0;
float: left;
border: none;
padding: 0;
width: 48%;
margin-right: 2%;
margin-bottom: 2%;
}
/*.stream li.dcsns-facebook .section-text a:first-of-type img {
width: 100%;
max-width: 100%;
margin-right: 0;
}*/
.stream li.dcsns-facebook .section-text .fbBigImageReplaced{
width: 100%;
max-width: 100%;
margin-right: 0;
}
/* ---------------------------------------------- Tumblr */
.stream li.dcsns-tumblr figure {
margin-bottom:1em;
}
/* -------------------------------------------- Twitter */
.stream li.dcsns-twitter .section-thumb{
display:none;
}
.stream li.dcsns-twitter .section-user {
padding: 0;
background: none;
}
.stream li.dcsns-twitter .section-text img {
width:100%;
margin-top:1em;
}
.stream li.dcsns-twitter a {
color: #38AEAE;
}
/*.stream li.dcsns-twitter a:nth-last-child(2) {
display:none;
}*/
.stream li.dcsns-twitter .section-intro span a {
text-decoration: none;
}
.stream li.dcsns-twitter .section-intro a{
color: #FFF;
}
.stream li.dcsns-twitter a:hover {
text-decoration: underline;
}
.stream li.dcsns-twitter .twitter-user { /* Hack to remove the author */
display:none;
}
.stream li.dcsns-twitter .twitter-user a {
display:inline-block;
margin-right:1em;
}
.stream li.dcsns-twitter .twitter-user a:hover {
}
.stream li.dcsns-twitter .twitter-user a strong{
}
.stream li.dcsns-twitter .twitter-user a:hover strong {
}
/* --------------------------------------------- Google */
.stream li.dcsns-google .section-title {
}
.dcsns .stream li.dcsns-google .section-thumb img {
}
.stream li.dcsns-google .meta span.plusones {
}
/* ------------------------------------------------- Rss */
.stream li.dcsns-rss .section-text img {
}
/* ------------------------------------------------- Stumbleupon */
.dcsns .stream li.dcsns-stumbleupon .section-title {
}
.dcsns .stream li.dcsns-stumbleupon .section-thumb img {
}
/* -------------------------------------------- Youtube */
.stream li.dcsns-youtube .section-thumb img {
width: 100%;
}
/* ---------------------------------------------- Vimeo */
.stream li.dcsns-vimeo .section-thumb img {
width: 100%;
}
.dcsns .stream li.dcsns-vimeo .section-title {
display: block;
clear: both;
}
.stream li.dcsns-vimeo .section-text {
}
.stream li.dcsns-vimeo .section-text .meta {
}
.stream li.dcsns-vimeo .logo {
}
/* --------------------------------------------- Flickr */
.stream li.dcsns-flickr .section-thumb {
}
.stream li.dcsns-flickr .section-thumb img{
}
/* --------------------------------------------- Pinterest */
.stream li.dcsns-pinterest .section-thumb {
display: block;
}
.stream li.dcsns-pinterest .section-text {
clear: both;
}
.stream li.dcsns-pinterest .section-thumb img {
width: 100%;
}
/* ------------------------------------------ Dribbble */
.stream li.dcsns-dribbble .inner img {
}
/* -------------------------------------------- Lastfm */
.stream li.dcsns-lastfm .section-title {
}
/* -------------------------------------------- Deviantart */
.stream li.dcsns-deviantart .section-thumb {
}
.stream li.dcsns-deviantart .section-thumb img {
}
/* ------------------------------------------ Tumblr */
.stream li.dcsns-tumblr .section-text img {
}
.stream li.dcsns-tumblr .track {
}
/* ------------------------------------------ Instagram */
.stream li.dcsns-instagram .section-thumb img {
width: 100%;
max-width: 100%;
margin-right: 0;
}
/*###########################################################################*/
/*####################### [data-original] Animations ########################*/
/*###########################################################################*/
[data-original]{
filter: blur(10px);
-webkit-filter: blur(10px);
transition: 0.5s all linear;
}
[data-original].inViewport{
filter: blur(0px);
-webkit-filter: blur(0px);
}
/******************************************* End Of CSS ********************************************/