File: D:/HostingSpaces/SBogers42/tandartsmaas.nl/wwwroot/css/style_161222.css
.clear {
clear: both; }
#content:after, .row:after, form .input-holder:after, footer .top-row:after, header.main:after, nav.main ul:after, .panel:after, .contact .text-panel:after {
content: " ";
display: table;
clear: both; }
/* |--------------------------------------------------------------------------
* | Raleway
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Roboto Slab
* |-------------------------------------------------------------------------- */
.table {
display: table; }
@media only screen and (max-width: 900px) {
.table {
display: block;
width: 100%; } }
#content .table {
position: relative; }
.table-cell {
display: table-cell;
vertical-align: top; }
@media only screen and (max-width: 900px) {
.table-cell {
display: block;
width: 100%; } }
.column.table-cell, .column.table.no-float {
float: none; }
.svg .button::after, .svg .button.white:hover::after, .svg .facebook-holder .facebook-button, .facebook-holder .svg .facebook-button, .svg footer .contact .logo.krt, footer .contact .svg .logo.krt, .svg footer .contact .logo.knmt, footer .contact .svg .logo.knmt, .svg footer .contact .logo.krm, footer .contact .svg .logo.krm, .svg footer .bottom-row .komma .logo, footer .bottom-row .komma .svg .logo, .svg .home header.main .logo-holder .logo, .home header.main .logo-holder .svg .logo, .svg .home header.main .appointment .clock, .home header.main .appointment .svg .clock, .svg header.main .emergency .cross, header.main .emergency .svg .cross, .svg .icon.chair, .svg .icon.wave, .svg .notification .icon, .notification .svg .icon, .svg .panel.redirects .teeth-top, .panel.redirects .svg .teeth-top, .svg .panel.redirects .teeth-bottom, .panel.redirects .svg .teeth-bottom, .svg .panel.redirects .arrow, .panel.redirects .svg .arrow, .svg .aboutSwiper .swiper-button-prev .plane .arrow, .aboutSwiper .swiper-button-prev .plane .svg .arrow, .svg .aboutSwiper .swiper-button-next .plane .arrow, .aboutSwiper .swiper-button-next .plane .svg .arrow, .svg .review .star, .review .svg .star, .svg .review.write .avatar, .review.write .svg .avatar {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg .button::after, .no-svg .button.white:hover::after, .no-svg .facebook-holder .facebook-button, .facebook-holder .no-svg .facebook-button, .no-svg footer .contact .logo.krt, footer .contact .no-svg .logo.krt, .no-svg footer .contact .logo.knmt, footer .contact .no-svg .logo.knmt, .no-svg footer .contact .logo.krm, footer .contact .no-svg .logo.krm, .no-svg footer .bottom-row .komma .logo, footer .bottom-row .komma .no-svg .logo, .no-svg .home header.main .logo-holder .logo, .home header.main .logo-holder .no-svg .logo, .no-svg .home header.main .appointment .clock, .home header.main .appointment .no-svg .clock, .no-svg header.main .emergency .cross, header.main .emergency .no-svg .cross, .no-svg .icon.chair, .no-svg .icon.wave, .no-svg .notification .icon, .notification .no-svg .icon, .no-svg .panel.redirects .teeth-top, .panel.redirects .no-svg .teeth-top, .no-svg .panel.redirects .teeth-bottom, .panel.redirects .no-svg .teeth-bottom, .no-svg .panel.redirects .arrow, .panel.redirects .no-svg .arrow, .no-svg .aboutSwiper .swiper-button-prev .plane .arrow, .aboutSwiper .swiper-button-prev .plane .no-svg .arrow, .no-svg .aboutSwiper .swiper-button-next .plane .arrow, .aboutSwiper .swiper-button-next .plane .no-svg .arrow, .no-svg .review .star, .review .no-svg .star, .no-svg .review.write .avatar, .review.write .no-svg .avatar {
background-image: url(/images/structure/sprite_maas.png); }
/* | Centering in the Unknown
* | https://css-tricks.com/centering-in-the-unknown/
*/
.valign-parent {
white-space: nowrap;
text-align: center; }
.valign-parent::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; }
.valign-child {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
white-space: normal; }
@if($center == null) {
.valign-child {
text-align: left; } }
.valign-child.centered {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
white-space: normal; }
@if($center == null) {
.valign-child.centered {
text-align: left; } }
body {
color: #6E6175;
background: #E6E6EC url(/images/structure/pattern_bg.png);
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 400;
font-size: 18px;
line-height: 1.77778; }
@media only screen and (max-width: 1280px) {
body {
font-size: 16px; } }
@media only screen and (max-width: 1024px) {
body {
font-size: 15px; } }
h1 {
margin-top: 0;
color: #5B4E63;
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 1.77778em;
font-weight: 300;
line-height: 1.125; }
h2 {
color: #FF8767;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600;
font-size: 1.33333em;
line-height: 1.125; }
p {
margin-top: 0;
margin-bottom: 1.3333em; }
a {
color: #109FDD;
outline: 0; }
a:hover {
color: #005CFF; }
::-moz-selection {
background-color: #9CE7A3; }
::selection {
background-color: #9CE7A3; }
.no-wrap {
white-space: nowrap; }
.blue {
background: #95CFE7; }
.green {
background: #9CE7A3; }
.gums {
background: #FF8767; }
.yellow {
background: #F5EC82; }
.column {
position: relative;
float: left;
width: 8.33333%;
/* |--------------------------------------------------------------------------
* | Width: Columns
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Width: Percentages
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Height: Percentages
* |-------------------------------------------------------------------------- */ }
.column.w2 {
width: 16.66667%; }
@media only screen and (max-width: 900px) {
.column.w2 {
width: 100%;
float: none;
clear: both; } }
.column.w3 {
width: 25%; }
@media only screen and (max-width: 900px) {
.column.w3 {
width: 100%;
float: none;
clear: both; } }
.column.w4 {
width: 33.33333%; }
@media only screen and (max-width: 900px) {
.column.w4 {
width: 100%;
float: none;
clear: both; } }
.column.w5 {
width: 41.66667%; }
@media only screen and (max-width: 900px) {
.column.w5 {
width: 100%;
float: none;
clear: both; } }
.column.w6 {
width: 50%; }
@media only screen and (max-width: 900px) {
.column.w6 {
width: 100%;
float: none;
clear: both; } }
.column.w7 {
width: 58.33333%; }
@media only screen and (max-width: 900px) {
.column.w7 {
width: 100%;
float: none;
clear: both; } }
.column.w8 {
width: 66.66667%; }
@media only screen and (max-width: 900px) {
.column.w8 {
width: 100%;
float: none;
clear: both; } }
.column.w9 {
width: 75%; }
@media only screen and (max-width: 900px) {
.column.w9 {
width: 100%;
float: none;
clear: both; } }
.column.w10 {
width: 83.33333%; }
@media only screen and (max-width: 900px) {
.column.w10 {
width: 100%;
float: none;
clear: both; } }
.column.w11 {
width: 91.66667%; }
@media only screen and (max-width: 900px) {
.column.w11 {
width: 100%;
float: none;
clear: both; } }
.column.w12 {
width: 100%; }
@media only screen and (max-width: 900px) {
.column.w12 {
width: 100%;
float: none;
clear: both; } }
.column.wp33 {
width: 33.33333%; }
.column.wp37h {
width: 37.5%; }
.column.wp44 {
width: 44.44444%; }
.column.wp50 {
width: 50%; }
@media only screen and (max-width: 900px) {
.column.wp50 {
width: 100%;
float: none;
clear: both; } }
.column.wp66 {
width: 66.66666%; }
.column.wp75 {
width: 75%; }
.column.wp100 {
width: 100%;
float: none;
clear: both; }
.column.hp100 {
height: 100%; }
#content-mask {
position: relative;
overflow: hidden;
margin: 0 auto;
max-width: 1680px; }
#content {
position: relative;
z-index: 10;
overflow: hidden;
background: #fff;
-webkit-transition: height 400ms ease-out;
-moz-transition: height 400ms ease-out;
transition: height 400ms ease-out; }
.center {
float: none;
margin: 0 auto; }
.text-panel {
padding: 80px 14.28571%;
max-width: 900px; }
.text-panel.less-gutter-left {
padding-left: 14.28571%; }
.text-panel.less-gutter-right {
padding-right: 14.28571%; }
@media only screen and (max-width: 480px) {
.text-panel {
padding-top: 40px;
padding-bottom: 40px; } }
@media only screen and (max-width: 1680px) {
.text-panel {
padding-left: 14.28571%;
padding-right: 14.28571%; }
.text-panel.less-gutter-left {
padding-left: 7.14286%; }
.text-panel.less-gutter-right {
padding-right: 7.14286%; } }
.text-panel.small {
padding-left: 25%;
padding-right: 25%; }
@media only screen and (max-width: 1680px) {
.text-panel.small {
padding-left: 12.5%;
padding-right: 12.5%; } }
.text-panel.h1-padding {
margin-top: 3.15em; }
.text-panel ul, .text-panel ol {
padding-left: 0.83333em; }
.text-panel ul li, .text-panel ol li {
padding-left: 30px; }
.text-panel ul li {
list-style: disc; }
.text-panel ol li {
list-style: decimal; }
.text-panel .article-logo {
display: inline-block;
max-height: 60px;
margin-right: 20px; }
.text-panel .article-logo.nen {
position: relative;
top: -15px;
left: 0;
max-height: 30px; }
.main-shadow {
position: fixed;
top: 0;
left: 50%;
margin-left: -840px;
width: 1680px;
height: 100%;
background: #fff;
-webkit-box-shadow: 0 0 15px -3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 15px -3px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 15px -3px rgba(0, 0, 0, 0.4); }
.image-holder {
position: relative;
overflow: hidden;
height: 100%;
vertical-align: middle; }
img.max-width-800 {
max-width: 800px; }
img.fit-horizontal {
width: 100%; }
img.fill {
position: absolute; }
img.preload {
opacity: 0;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
transition: opacity 300ms ease-out; }
img.preload.loaded {
opacity: 1; }
html[data-useragent*='MSIE 10.0'] .image-holder img.fill, html[data-useragent*='Edge/12'] .image-holder img.fill {
top: auto !important; }
header, footer, nav, article, section, div, ul, li, span, a, input, form, label, figure {
box-sizing: border-box; }
body {
margin: 0; }
img {
display: block;
border: none; }
ul, li {
margin: 0;
padding: 0;
list-style: none; }
a {
text-decoration: none; }
input[type="submit"] {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer; }
figure {
margin: 0; }
.button {
display: inline-block;
position: relative;
padding: 0 60px 0 20px;
height: 60px;
border-radius: 8px;
color: #fff;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 800;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.15em;
text-transform: uppercase;
white-space: nowrap;
text-align: center;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out; }
.button::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; }
@media only screen and (max-width: 1680px) {
.button {
padding: 0 50px 0 15px;
height: 50px;
font-size: 13px; } }
@media only screen and (max-width: 1024px) {
.button {
padding: 0 40px 0 10px;
height: 40px;
font-size: 12px;
letter-spacing: 0.07em; } }
.button::after {
content: "";
position: absolute;
top: 50%;
right: 26px;
margin-top: -6px;
width: 12px;
height: 10px;
background-position: -420px -50px;
background-size: 640px 340px; }
.no-svg .button::after {
width: 12px;
height: 10px;
background-position: -420px -50px;
background-size: 640px 340px; }
@media only screen and (max-width: 1024px) {
.button::after {
right: 20px; } }
.button.purple {
background-image: -webkit-linear-gradient(0deg, #52405B 50%, #63526D 50%);
background-image: linear-gradient(0deg, #52405B 50%, #63526D 50%); }
.no-cssgradients .button.purple {
background: #52405B; }
.button.gums {
background-image: -webkit-linear-gradient(0deg, #E7785D 50%, #FF8767 50%);
background-image: linear-gradient(0deg, #E7785D 50%, #FF8767 50%); }
.no-cssgradients .button.gums {
background: #E7785D; }
.button.white {
background-image: -webkit-linear-gradient(0deg, #FFFFFF 50%, #ECECEC 50%);
background-image: linear-gradient(0deg, #FFFFFF 50%, #ECECEC 50%);
color: #FF8767; }
.no-cssgradients .button.white {
background: #FFFFFF; }
.button.white::after {
width: 12px;
height: 10px;
background-position: -440px -50px;
background-size: 640px 340px; }
.no-svg .button.white::after {
width: 12px;
height: 10px;
background-position: -440px -50px;
background-size: 640px 340px; }
.button:hover {
color: #fff; }
.button:hover.purple {
background-image: -webkit-linear-gradient(0deg, #E7785D 50%, #FF8767 50%);
background-image: linear-gradient(0deg, #E7785D 50%, #FF8767 50%); }
.button:hover.gums {
background-image: -webkit-linear-gradient(0deg, #52405B 50%, #63526D 50%);
background-image: linear-gradient(0deg, #52405B 50%, #63526D 50%); }
.button:hover.white {
background-image: -webkit-linear-gradient(0deg, #52405B 50%, #63526D 50%);
background-image: linear-gradient(0deg, #52405B 50%, #63526D 50%); }
.button:hover.white::after {
width: 12px;
height: 10px;
background-position: -420px -50px;
background-size: 640px 340px; }
.no-svg .button:hover.white::after {
width: 12px;
height: 10px;
background-position: -420px -50px;
background-size: 640px 340px; }
.button .label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
white-space: normal; }
@if($center == null) {
.button .label {
text-align: left; } }
input[type="submit"].button {
padding: 0 20px; }
@media only screen and (max-width: 1680px) {
input[type="submit"].button {
padding: 0 15px; } }
@media only screen and (max-width: 1024px) {
input[type="submit"].button {
padding: 0 10px; } }
.panel.cta {
height: 320px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
margin: 0 auto;
max-width: 1680px;
text-align: center; }
@media only screen and (max-width: 1280px) {
.panel.cta {
height: 280px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 1024px) {
.panel.cta {
height: 240px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
.panel.cta .cta {
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 1.77778em;
line-height: 1.125; }
.panel.cta .button {
margin: 40px auto 0; }
.facebook-holder {
position: relative;
width: 87.5%;
overflow: hidden; }
.facebook-holder .title {
margin-bottom: 1.33333em;
color: #fff;
text-transform: uppercase;
font-size: 0.77778em;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 800; }
.facebook-holder .title a {
text-decoration: underline;
color: #fff; }
.facebook-holder .facebook-button {
position: absolute;
top: 0;
left: -50px;
display: inline-block;
width: 32px;
height: 32px;
background-position: -480px -50px;
background-size: 640px 340px; }
.no-svg .facebook-holder .facebook-button {
width: 32px;
height: 32px;
background-position: -480px -50px;
background-size: 640px 340px; }
form {
margin-bottom: 2.66666em; }
form .input-holder {
display: block;
margin-bottom: 10px; }
form .input-holder label {
display: block;
float: left;
width: 30%;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600;
font-size: 0.88889em; }
form .input-holder input:not([type="radio"]) {
display: block;
float: left;
width: 70%;
height: 30px; }
form .input-holder.error input {
border: 1px red solid; }
form input[type="submit"] {
margin-top: 30px; }
form .message {
display: block;
float: left;
width: 70%;
margin-left: 30%; }
form .message.error {
color: red;
font-size: 0.88889em; }
footer {
position: relative;
z-index: 10;
width: 100%;
background: #5B4E63;
color: #E6E6EC;
font-size: 0.88889em;
line-height: 1.5; }
footer .top-row {
padding: 80px 0; }
@media only screen and (max-width: 900px) {
footer .top-row {
padding: 80px; } }
@media only screen and (max-width: 500px) {
footer .top-row {
padding: 40px; } }
footer a {
color: #E6E6EC; }
footer a.active {
color: #fff;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600; }
footer a:hover {
color: #fff; }
footer ul {
margin-bottom: 1.3333em; }
footer .title {
display: block;
margin-bottom: 1.3333em;
padding-bottom: 3px;
width: 87.5%;
border-bottom: 2px solid #706578;
color: #fff;
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 1.25em; }
@media only screen and (max-width: 900px) {
footer .title {
width: 100%; } }
footer .contact {
margin-left: 12.5%; }
@media only screen and (max-width: 900px) {
footer .contact {
margin-left: 0; } }
@media only screen and (max-width: 500px) {
footer .contact {
margin-top: 1.3333em; } }
footer .contact a {
color: #fff; }
footer .contact .logo {
display: inline-block;
margin: 50px 20px 0 0; }
footer .contact .logo.krt {
width: 70px;
height: 58px;
background-position: -420px -100px;
background-size: 640px 340px; }
.no-svg footer .contact .logo.krt {
width: 70px;
height: 58px;
background-position: -420px -100px;
background-size: 640px 340px; }
footer .contact .logo.knmt {
position: relative;
top: -14px;
left: 0;
width: 110px;
height: 40px;
background-position: -520px -100px;
background-size: 640px 340px; }
.no-svg footer .contact .logo.knmt {
width: 110px;
height: 40px;
background-position: -520px -100px;
background-size: 640px 340px; }
footer .contact .logo.krm {
width: 85px;
height: 65px;
background-position: -10px -260px;
background-size: 640px 340px; }
.no-svg footer .contact .logo.krm {
width: 85px;
height: 65px;
background-position: -10px -260px;
background-size: 640px 340px; }
footer .hours {
float: left;
width: 50%;
margin-bottom: 1.3333em; }
@media only screen and (max-width: 500px) {
footer .hours {
width: 100%;
float: none;
margin-bottom: 0; } }
footer .bottom-row {
clear: both;
height: 80px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
background: #E6E6EC;
color: #5B4E63;
font-size: 0.88889em; }
@media only screen and (max-width: 500px) {
footer .bottom-row {
height: 120px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
padding-top: 40px; } }
footer .bottom-row a {
color: #5B4E63; }
footer .bottom-row a:hover .text {
text-decoration: underline; }
footer .bottom-row .copyright {
float: left;
margin: 28px 0 0 40px; }
@media only screen and (max-width: 500px) {
footer .bottom-row .copyright {
display: block;
float: none;
margin: 0 0 0 60px; } }
footer .bottom-row .komma {
float: right;
margin: 28px 40px 0 0; }
@media only screen and (max-width: 500px) {
footer .bottom-row .komma {
display: block;
float: none;
margin: 5px 0 0 40px; } }
footer .bottom-row .komma .logo {
display: inline-block;
margin-right: 6px;
width: 24px;
height: 24px;
background-position: -480px -180px;
background-size: 640px 340px; }
.no-svg footer .bottom-row .komma .logo {
width: 24px;
height: 24px;
background-position: -480px -180px;
background-size: 640px 340px; }
footer .bottom-row .komma .text {
position: relative;
top: -8px;
left: 0; }
header.main {
position: relative;
z-index: 10;
height: 200px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
background: #6E6175;
-webkit-transition: height 300ms ease-out;
-moz-transition: height 300ms ease-out;
transition: height 300ms ease-out;
/* |--------------------------------------------------------------------------
* | Logo panels
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Animating panel
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Animating panels - Appointment
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Animating panels - Sign Up
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Animating panels - Emergency
* |-------------------------------------------------------------------------- */ }
@media only screen and (max-width: 480px) {
header.main {
display: none; } }
.home header.main {
height: 560px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ }
@media only screen and (max-width: 1024px) {
.home header.main {
height: 400px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 480px) {
.home header.main {
display: block;
height: 240px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
header.main .logo-holder {
height: 100%;
background: #95CFE7;
text-align: center; }
header.main .logo-holder .logo {
width: 190.2px;
height: 84px;
background-position: 0 0;
background-size: 384px 204px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out; }
.no-svg header.main .logo-holder .logo {
width: 317px;
height: 140px;
background-position: 0 0;
background-size: 640px 340px; }
.svg header.main .logo-holder .logo {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg header.main .logo-holder .logo {
background-image: url(/images/structure/sprite_maas.png); }
.home header.main .logo-holder .logo {
width: 317px;
height: 140px;
background-position: 0 0;
background-size: 640px 340px; }
.no-svg .home header.main .logo-holder .logo {
width: 317px;
height: 140px;
background-position: 0 0;
background-size: 640px 340px; }
@media only screen and (max-width: 1024px) {
.home header.main .logo-holder .logo {
width: 221.9px;
height: 98px;
background-position: 0 0;
background-size: 448px 238px; }
.no-svg .home header.main .logo-holder .logo {
width: 317px;
height: 140px;
background-position: 0 0;
background-size: 640px 340px; }
.svg .home header.main .logo-holder .logo {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg .home header.main .logo-holder .logo {
background-image: url(/images/structure/sprite_maas.png); } }
@media only screen and (max-width: 900px) {
header.main .logo-holder {
display: none; } }
header.main .animate {
-webkit-transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
-moz-transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out; }
header.main .header-panel {
text-align: center; }
header.main .header-panel .above-button {
display: block;
height: 60px; }
.home header.main .header-panel .above-button {
height: auto; }
@media only screen and (max-width: 1280px) {
header.main .header-panel .above-button {
height: auto; } }
header.main .header-panel .button {
margin: 0 auto;
vertical-align: bottom;
-webkit-transition: margin-top 300ms ease-out;
-moz-transition: margin-top 300ms ease-out;
transition: margin-top 300ms ease-out; }
.home header.main .header-panel .button {
margin-top: 20px; }
@media only screen and (max-width: 480px) {
.home header.main .header-panel .button {
margin-top: 0; } }
header.main .appointment {
position: absolute;
top: 0;
left: 0;
width: 33.34%;
height: 100%; }
@media only screen and (max-width: 1280px) {
header.main .appointment {
height: 50%;
width: 66.67%; } }
.home header.main .appointment {
width: 66.67%;
height: 50%; }
@media only screen and (max-width: 1680px) {
.home header.main .appointment {
width: 50%; } }
@media only screen and (max-width: 480px) {
.home header.main .appointment {
height: 33.34%;
width: 100%; } }
header.main .appointment .clock {
display: inline-block;
width: 42px;
height: 42px;
background-position: -238px 0;
background-size: 448px 238px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out; }
.no-svg header.main .appointment .clock {
width: 60px;
height: 60px;
background-position: -340px 0;
background-size: 640px 340px; }
.svg header.main .appointment .clock {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg header.main .appointment .clock {
background-image: url(/images/structure/sprite_maas.png); }
@media only screen and (max-width: 1280px) {
header.main .appointment .clock {
display: none; }
.home header.main .appointment .clock {
display: inline-block; } }
@media only screen and (max-width: 1280px) and (max-width: 480px) {
.home header.main .appointment .clock {
display: none; } }
.home header.main .appointment .clock {
margin-top: 20px;
width: 60px;
height: 60px;
background-position: -340px 0;
background-size: 640px 340px; }
.no-svg .home header.main .appointment .clock {
width: 60px;
height: 60px;
background-position: -340px 0;
background-size: 640px 340px; }
@media only screen and (max-width: 1024px) {
.home header.main .appointment .clock {
width: 42px;
height: 42px;
background-position: -238px 0;
background-size: 448px 238px; }
.no-svg .home header.main .appointment .clock {
width: 60px;
height: 60px;
background-position: -340px 0;
background-size: 640px 340px; }
.svg .home header.main .appointment .clock {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg .home header.main .appointment .clock {
background-image: url(/images/structure/sprite_maas.png); } }
header.main .sign-up {
position: absolute;
top: 0;
left: 33.33333%;
width: 33.34%;
height: 100%;
text-align: center;
line-height: 1.3; }
header.main .sign-up.striped {
background-size: 66.86667% 100%; }
@media only screen and (max-width: 1280px) {
header.main .sign-up {
top: 50%;
left: 0;
height: 50%;
width: 66.67%; }
header.main .sign-up.striped {
background-size: 33.53333% 100%; } }
@media only screen and (max-width: 480px) {
header.main .sign-up.striped {
background-size: 66.86667% 100%; } }
.home header.main .sign-up {
top: 50%;
left: 0;
width: 66.67%;
height: 50%; }
@media only screen and (max-width: 1680px) {
.home header.main .sign-up {
width: 50%; } }
@media only screen and (max-width: 480px) {
.home header.main .sign-up {
top: 33.33333%;
height: 33.34%;
width: 100%; } }
header.main .sign-up .text {
display: inline-block;
max-width: 400px;
padding: 0 40px; }
@media only screen and (max-width: 1280px) {
header.main .sign-up .text {
display: none; }
.home header.main .sign-up .text {
display: inline-block; } }
@media only screen and (max-width: 1280px) and (max-width: 480px) {
.home header.main .sign-up .text {
display: none; } }
header.main .sign-up .table-child {
padding: 0 30px; }
header.main .sign-up .question {
display: none; }
.home header.main .sign-up .question {
display: inline; }
header.main .emergency {
position: absolute;
top: 0;
right: 0;
width: 33.33333%;
height: 100%;
color: #FFD7CB;
text-align: center; }
header.main .emergency a:not(.button) {
color: #fff; }
@media only screen and (max-width: 1680px) {
.home header.main .emergency {
width: 50%; } }
@media only screen and (max-width: 480px) {
.home header.main .emergency {
top: 66.64%;
right: auto;
left: 0;
height: 35%;
width: 100%; } }
header.main .emergency .cross {
display: inline-block;
width: 42px;
height: 42px;
background-position: -420px 0;
background-size: 640px 340px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out; }
.no-svg header.main .emergency .cross {
width: 42px;
height: 42px;
background-position: -420px 0;
background-size: 640px 340px; }
@media only screen and (max-width: 1024px) {
header.main .emergency .cross {
width: 29.4px;
height: 29.4px;
background-position: -294px 0;
background-size: 448px 238px; }
.no-svg header.main .emergency .cross {
width: 42px;
height: 42px;
background-position: -420px 0;
background-size: 640px 340px; }
.svg header.main .emergency .cross {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg header.main .emergency .cross {
background-image: url(/images/structure/sprite_maas.png); } }
@media only screen and (max-width: 480px) {
.home header.main .emergency .cross {
display: none; } }
header.main .emergency .text {
display: none;
line-height: 1.5; }
.home header.main .emergency .text {
display: block;
padding: 0 40px; }
@media only screen and (max-width: 480px) {
.home header.main .emergency .text {
display: none; } }
header.main .emergency .text .comment {
display: block;
margin-top: 5px;
color: #fff;
font-size: 0.8em;
font-weight: 600;
line-height: 1; }
header.main .emergency strong {
color: #fff; }
.hours .day {
width: 40px;
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-weight: 700; }
.hours .from {
width: 53px; }
.hours .dash {
width: 14px; }
.icon {
display: inline-block; }
.icon.centered {
display: block;
margin: 50px auto 0; }
.icon.chair {
width: 80px;
height: 53px;
background-position: -540px 0;
background-size: 640px 340px; }
.no-svg .icon.chair {
width: 80px;
height: 53px;
background-position: -540px 0;
background-size: 640px 340px; }
.icon.wave {
width: 22px;
height: 5px;
background-position: -420px -80px;
background-size: 640px 340px; }
.no-svg .icon.wave {
width: 22px;
height: 5px;
background-position: -420px -80px;
background-size: 640px 340px; }
nav.main {
position: relative;
z-index: 10;
width: 100%;
height: 80px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
background: #fff; }
@media only screen and (max-width: 1024px) {
nav.main {
height: 60px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 900px) {
nav.main {
display: none; } }
nav.main ul {
height: 100%;
border-bottom: 1px solid #DAD7DC; }
nav.main li {
position: relative;
overflow: hidden;
float: left;
width: 16.66667%;
border-right: 1px solid #DAD7DC;
line-height: 80px;
/* +respond-to(medium)
* line-height: nth($value,2) * $factor
* +respond-to(large)
* line-height: nth($value,3) * $factor */
height: 80px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
text-align: center;
-webkit-transition: line-height 100ms ease-out, background 100ms ease-out;
-moz-transition: line-height 100ms ease-out, background 100ms ease-out;
transition: line-height 100ms ease-out, background 100ms ease-out; }
@media only screen and (max-width: 1024px) {
nav.main li {
line-height: 60px;
/* +respond-to(medium)
* line-height: nth($value,2) * $factor
* +respond-to(large)
* line-height: nth($value,3) * $factor */
height: 60px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
nav.main li:last-child {
border-right: none; }
nav.main li a {
display: block;
color: #52405B;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 800;
font-size: 0.77778em;
text-transform: uppercase;
letter-spacing: 0.15em; }
@media only screen and (max-width: 1280px) {
nav.main li a {
font-size: 0.72222em;
letter-spacing: 0.1em; } }
@media only screen and (max-width: 1024px) {
nav.main li a {
font-size: 0.66667em;
letter-spacing: 0.05em; } }
nav.main li.active, nav.main li:hover {
background: #f7f7f7;
line-height: 76px;
/* +respond-to(medium)
* line-height: nth($value,2) * $factor
* +respond-to(large)
* line-height: nth($value,3) * $factor */ }
@media only screen and (max-width: 1024px) {
nav.main li.active, nav.main li:hover {
line-height: 52px;
/* +respond-to(medium)
* line-height: nth($value,2) * $factor
* +respond-to(large)
* line-height: nth($value,3) * $factor */ } }
nav.main li.active .wave, nav.main li:hover .wave {
top: 65%; }
nav.main li.active {
background: #52405B; }
nav.main li.active a {
color: #fff; }
nav.main .wave {
display: block;
position: absolute;
top: 110%;
left: 50%;
margin-left: -11px;
-webkit-transition: top, 100ms ease-out;
-moz-transition: top, 100ms ease-out;
transition: top, 100ms ease-out; }
@media only screen and (max-width: 900px) {
body {
padding-top: 60px; } }
.mobile-navigation {
display: none; }
@media only screen and (max-width: 900px) {
.mobile-navigation {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%; } }
.mobile-navigation header {
position: relative;
width: 100%;
height: 60px;
background: #52405B; }
.mobile-navigation .mobile_btn {
position: relative;
width: 60px;
height: 100%;
cursor: pointer; }
.mobile-navigation .mobile_btn .icon {
display: block;
position: absolute;
top: 50%;
left: 50%; }
.mobile-navigation .mobile_btn.nav {
float: left;
border-right: 1px solid #6E6175; }
.mobile-navigation .mobile_btn.nav .icon {
margin: -7px 0 0 -9px;
width: 18px;
height: 15px;
background-position: -10px -40px;
background-size: 150px 70px;
background-image: url(/images/structure/sprite_mobile.svg); }
.mobile-navigation .mobile_btn.nav:hover:not(.selected) .icon {
background-position: -10px -10px; }
.mobile-navigation .mobile_btn.contact {
float: right;
border-left: 1px solid #575765; }
.mobile-navigation .mobile_btn.contact .icon {
margin: -10px 0 0 -10px;
width: 20px;
height: 20px;
background-position: -70px -40px;
background-size: 150px 70px;
background-image: url(/images/structure/sprite_mobile.svg);
background-position: -70px -40px; }
.mobile-navigation .mobile_btn.contact:hover:not(.selected) .icon {
background-position: -70px -10px; }
.mobile-navigation .mobile_btn.selected .icon {
background-position: -40px -10px;
margin-top: -6px; }
.mobile-navigation .mobile_btn.selected .icon:hover .icon {
background-position: -40px -10px;
margin-top: -6px; }
.mobile-navigation .logo {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -65px;
width: 130px;
height: 30px;
width: 124.8px;
height: 36px;
background-position: -144px -108px;
background-size: 384px 204px; }
.no-svg .mobile-navigation .logo {
width: 208px;
height: 60px;
background-position: -240px -180px;
background-size: 640px 340px; }
.svg .mobile-navigation .logo {
background-image: url(/images/structure/sprite_maas.svg); }
.no-svg .mobile-navigation .logo {
background-image: url(/images/structure/sprite_maas.png); }
.mobile-navigation .mb_content {
position: relative;
overflow-y: scroll; }
.mobile-navigation .mb_content nav {
position: relative;
overflow: hidden;
height: 0; }
.mobile-navigation .mb_content nav ul {
display: block;
width: 100%;
background: #F7F8F9; }
.mobile-navigation .mb_content nav ul li {
display: block;
position: relative;
width: 100%; }
.mobile-navigation .mb_content nav ul li .title {
display: block;
position: relative;
padding: 0 0 0 60px;
width: 100%;
height: 59px;
border-bottom: 1px solid #DFE5E9;
color: #575766;
font-size: 1.14286em;
font-weight: 600;
line-height: 60px;
box-sizing: border-box;
cursor: pointer; }
.mobile-navigation .mb_content nav ul li .title:hover {
background: #fff; }
.mobile-navigation .mb_content nav ul li .title .dd_arrow {
display: block;
position: absolute;
top: 50%;
left: 30px;
margin: -2px 0 0 -5px;
width: 10px;
height: 6px;
background-position: -100px -10px;
background-size: 150px 70px;
background-image: url(/images/structure/sprite_mobile.svg); }
.mobile-navigation .mb_content nav ul li.selected .title {
color: #FF8767; }
.mobile-navigation .mb_content nav ul li.selected .title .dd_arrow {
background-position: -100px -24px; }
.mobile-navigation .mb_content nav ul li.mb_dropdown {
display: block; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul {
display: block;
position: relative;
overflow: hidden;
padding: 0;
height: 0; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li .title {
padding-left: 90px;
background: #fff;
color: #9999A2;
font-weight: 400; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li .title .dd_arrow {
left: 65px;
background-position: -100px -10px; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li .title:hover {
background: #FBFBFC; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li.selected .title {
color: #FF8767; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li.selected .title .dd_arrow {
background-position: -100px -24px; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li.mb_dropdown {
display: block; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul {
display: block;
position: relative;
overflow: hidden;
padding: 0;
height: 0; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title {
padding-left: 120px;
height: 39px;
border-bottom: 1px solid #fff;
background: #EAEAEA;
color: #575765;
font-weight: 300;
line-height: 40px; }
.mobile-navigation .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover {
background: #F7F8F9; }
.mobile-navigation .mb_content #mobile_contact {
position: relative;
overflow: hidden;
height: 0;
background: #fff;
font-size: 1.14286em; }
.mobile-navigation .mb_content #mobile_contact .inner {
padding: 60px;
box-sizing: border-box; }
.mobile-navigation .mb_content #mobile_contact .inner .title {
display: block;
margin-bottom: 1em;
color: #FF8767;
font-size: 1.375em; }
.mobile-navigation .mb_content #mobile_contact .inner .data_title {
display: inline-block;
width: 60px;
color: #FF8767;
font-weight: 600;
font-size: 0.875em;
text-transform: uppercase; }
.mobile-navigation .blur {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
background: #FF8767;
opacity: 0; }
.mobile-navigation.phone .mb_content nav ul li .title:hover {
background: none; }
.mobile-navigation.phone .mb_content nav ul li.mb_dropdown ul li .title:hover {
background: #fff; }
.mobile-navigation.phone .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover {
background: #EAEAEA !important; }
.notification {
position: relative;
padding: 15px 0 20px 40px;
z-index: 900;
width: 100%;
line-height: 1.6;
color: #fff;
font-size: 0.9em;
background: #372b3d; }
.notification a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
color: #fff;
background: #372b3d;
-webkit-transition: background 300ms ease-out;
-moz-transition: background 300ms ease-out;
transition: background 300ms ease-out; }
.notification a:hover {
background: #2a202e; }
.notification .read-more {
display: inline-block;
margin-left: 10px;
font-weight: 600; }
.notification .icon {
display: inline-block;
position: relative;
top: 6px;
left: 0;
margin-right: 20px;
width: 27px;
height: 27px;
background-position: -580px -60px;
background-size: 640px 340px; }
.no-svg .notification .icon {
width: 27px;
height: 27px;
background-position: -580px -60px;
background-size: 640px 340px; }
/* Make clicks pass-through */
#nprogress {
pointer-events: none; }
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px; }
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px); }
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px; }
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite; }
.nprogress-custom-parent {
overflow: hidden;
position: relative; }
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute; }
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.panel {
width: 100%;
background: #fff; }
.panel.title {
height: 80px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
line-height: 80px;
/* +respond-to(medium)
* line-height: nth($value,2) * $factor
* +respond-to(large)
* line-height: nth($value,3) * $factor */
background: #FF8767;
text-align: center; }
.panel.title h2 {
margin: 0;
color: #fff;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 800;
font-size: 0.77778em;
text-transform: uppercase;
letter-spacing: 0.15em; }
.quote-holder .quote {
display: block;
text-align: left;
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 1.33333em;
line-height: 2; }
.quote-holder .name {
display: block;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.15em;
text-align: left; }
.panel.redirects .column {
height: 100%;
text-align: center;
overflow: hidden;
height: 320px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ }
@media only screen and (max-width: 1280px) {
.panel.redirects .column {
height: 280px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 1024px) {
.panel.redirects .column {
height: 240px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 900px) {
.panel.redirects .column {
display: block;
width: 100%; } }
.panel.redirects .column.pattern {
background: #9CE7A3 url(/images/structure/pattern.png) center center;
background-size: cover; }
.panel.redirects .column.striped {
background-size: 33.53333% 100%; }
.panel.redirects .column:hover .teeth-top {
top: 20px; }
.panel.redirects .column:hover .teeth-bottom {
bottom: 20px; }
.panel.redirects .column:hover .bg {
opacity: 1; }
.panel.redirects .column:hover .arrow {
opacity: 1;
left: 10px; }
.panel.redirects .valign-child {
position: relative;
z-index: 5; }
.panel.redirects .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #6E6175;
opacity: 0;
-webkit-transition: opacity 200ms ease-out;
-moz-transition: opacity 200ms ease-out;
transition: opacity 200ms ease-out; }
.panel.redirects .teeth-top {
display: inline-block;
position: absolute;
top: -70px;
left: 50%;
width: 217px;
height: 60px;
background-position: 0 -180px;
background-size: 640px 340px;
margin-left: -108px;
-webkit-transition: top 200ms ease-out;
-moz-transition: top 200ms ease-out;
transition: top 200ms ease-out; }
.no-svg .panel.redirects .teeth-top {
width: 217px;
height: 60px;
background-position: 0 -180px;
background-size: 640px 340px; }
.panel.redirects .teeth-bottom {
display: inline-block;
position: absolute;
bottom: -70px;
left: 50%;
width: 208px;
height: 60px;
background-position: -240px -180px;
background-size: 640px 340px;
margin-left: -104px;
-webkit-transition: bottom 200ms ease-out;
-moz-transition: bottom 200ms ease-out;
transition: bottom 200ms ease-out; }
.no-svg .panel.redirects .teeth-bottom {
width: 208px;
height: 60px;
background-position: -240px -180px;
background-size: 640px 340px; }
.panel.redirects .title {
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
color: #fff;
font-size: 1.77778em; }
.panel.redirects .arrow {
display: inline-block;
position: relative;
top: -4px;
left: 0;
width: 12px;
height: 10px;
background-position: -420px -50px;
background-size: 640px 340px;
opacity: 0;
-webkit-transition: opacity 200ms ease-out, left 200ms ease-out;
-moz-transition: opacity 200ms ease-out, left 200ms ease-out;
transition: opacity 200ms ease-out, left 200ms ease-out; }
.no-svg .panel.redirects .arrow {
width: 12px;
height: 10px;
background-position: -420px -50px;
background-size: 640px 340px; }
.striped.blue {
background: -webkit-linear-gradient( left , #95CFE7, #95CFE7 50%, #b0dbed 50%, #b0dbed);
background: linear-gradient(to right, #95CFE7, #95CFE7 50%, #b0dbed 50%, #b0dbed); }
.striped.yellow {
background: -webkit-linear-gradient( left , #F5EC82, #F5EC82 50%, #f8f1a1 50%, #f8f1a1);
background: linear-gradient(to right, #F5EC82, #F5EC82 50%, #f8f1a1 50%, #f8f1a1); }
.submenu {
background: #52405B;
text-align: center;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 300;
height: 100%; }
.submenu .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background: url(/images/structure/chairBackground.jpg) center center;
background-size: cover; }
.submenu .height-pusher {
position: relative;
width: 100%;
min-height: 800px; }
@media only screen and (max-width: 900px) {
.submenu {
display: none; } }
.submenu .table {
width: 100%;
height: 100%; }
.submenu a {
color: #fff;
font-size: 1.33333em;
line-height: 2.33333; }
.submenu .active a {
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600; }
#submenuList {
position: absolute;
top: 170px;
left: 0;
width: 100%;
text-align: center; }
#submenuList.practice {
top: 220px; }
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1; }
.swiper-container-no-flexbox .swiper-slide {
float: left; }
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column; }
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
box-sizing: content-box; }
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0); }
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-fles-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto; }
.swiper-slide {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative; }
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000; }
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y; }
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x; }
.aboutSwiper {
/* |--------------------------------------------------------------------------
* | Images
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Buttons
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Navigation
* |-------------------------------------------------------------------------- */
/* |--------------------------------------------------------------------------
* | Story
* |-------------------------------------------------------------------------- */ }
.aboutSwiper .panel {
height: 640px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ }
.aboutSwiper .images {
position: relative;
overflow: hidden;
height: 480px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ }
@media only screen and (max-width: 1280px) {
.aboutSwiper .images {
height: 400px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 1024px) {
.aboutSwiper .images {
height: 320px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 900px) {
.aboutSwiper .images {
height: 480px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 640px) {
.aboutSwiper .images {
height: 320px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 480px) {
.aboutSwiper .images {
height: 240px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
.aboutSwiper .images .swiper-image-holder {
height: 100%; }
.aboutSwiper .images .swiper-container-visible {
overflow: visible; }
.aboutSwiper .images .swiper-container-visible .valign-parent {
position: absolute;
top: 0;
left: 40px;
z-index: 10;
opacity: 0;
height: 480px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
width: 50%; }
@media only screen and (max-width: 1280px) {
.aboutSwiper .images .swiper-container-visible .valign-parent {
height: 400px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 1024px) {
.aboutSwiper .images .swiper-container-visible .valign-parent {
height: 320px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */ } }
@media only screen and (max-width: 480px) {
.aboutSwiper .images .swiper-container-visible .valign-parent {
display: none; } }
.aboutSwiper .images .swiper-container-visible .valign-parent.animating {
-webkit-transition: opacity 500ms ease-out;
-moz-transition: opacity 500ms ease-out;
transition: opacity 500ms ease-out; }
.aboutSwiper .images .swiper-container-visible .valign-parent.active {
opacity: 1; }
.aboutSwiper .images .swiper-slide {
overflow: hidden;
width: 50% !important;
height: 50% !important; }
.aboutSwiper .images .swiper-slide.swiper-slide-active {
width: 100% !important;
height: 100% !important; }
.aboutSwiper .images .swiper-slide.animate {
-webkit-transition: width 500ms ease-out, height 500ms ease-out;
-moz-transition: width 500ms ease-out, height 500ms ease-out;
transition: width 500ms ease-out, height 500ms ease-out; }
.aboutSwiper .swiper-button {
position: relative;
height: 100%;
z-index: 10;
cursor: pointer;
-webkit-transition: background 500ms ease-out;
-moz-transition: background 500ms ease-out;
transition: background 500ms ease-out; }
@media only screen and (max-width: 900px) {
.aboutSwiper .swiper-button {
display: none; } }
.aboutSwiper .swiper-button .plane {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
text-align: center;
-webkit-transition: background 500ms ease-out;
-moz-transition: background 500ms ease-out;
transition: background 500ms ease-out; }
.aboutSwiper .swiper-button .plane .arrow {
position: absolute;
bottom: 50%;
left: 50%;
margin: -15px 0 0 -18px;
-webkit-transition: opacity 500ms ease-out, -webkit-transform 200ms ease-out;
-moz-transition: opacity 500ms ease-out, -moz-transform 200ms ease-out;
transition: opacity 500ms ease-out, transform 200ms ease-out; }
.aboutSwiper .swiper-button.green {
background: rgba(156, 231, 163, 0.5); }
.aboutSwiper .swiper-button.green .plane {
background: #9CE7A3; }
.aboutSwiper .swiper-button.green:not(.disabled) .plane:hover {
background: #73dd7d; }
.aboutSwiper .swiper-button.blue {
background: rgba(149, 207, 231, 0.5); }
.aboutSwiper .swiper-button.blue .plane {
background: #95CFE7; }
.aboutSwiper .swiper-button.blue:not(.disabled) .plane:hover {
background: #6bbcde; }
.aboutSwiper .swiper-button.disabled {
cursor: default;
background: #52405B; }
.aboutSwiper .swiper-button.disabled .plane {
background: #52405B; }
.aboutSwiper .swiper-button.disabled .plane .arrow {
opacity: 0; }
.aboutSwiper .swiper-button-prev .plane .arrow {
width: 36px;
height: 30px;
background-position: -520px -180px;
background-size: 640px 340px; }
.no-svg .aboutSwiper .swiper-button-prev .plane .arrow {
width: 36px;
height: 30px;
background-position: -520px -180px;
background-size: 640px 340px; }
.aboutSwiper .swiper-button-prev .plane:hover .arrow {
-webkit-transform: translateX(-10px);
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-o-transform: translateX(-10px);
transform: translateX(-10px); }
.aboutSwiper .swiper-button-next .plane .arrow {
width: 36px;
height: 30px;
background-position: -580px -180px;
background-size: 640px 340px; }
.no-svg .aboutSwiper .swiper-button-next .plane .arrow {
width: 36px;
height: 30px;
background-position: -580px -180px;
background-size: 640px 340px; }
.aboutSwiper .swiper-button-next .plane:hover .arrow {
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px); }
.aboutSwiper .navigation {
height: 100%;
background: #E6E6EC; }
@media only screen and (max-width: 900px) {
.aboutSwiper .navigation {
display: none; } }
.aboutSwiper .navigation .title {
display: block;
padding: 0 40px;
height: 80px;
/* +respond-to(medium)
* height: nth($value,2) * $factor
* +respond-to(large)
* height: nth($value,3) * $factor */
width: 100%;
background: #5B4E63;
color: #fff;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600;
text-transform: uppercase;
font-size: 0.88889em;
letter-spacing: 0.15em;
line-height: 80px;
/* +respond-to(medium)
* line-height: nth($value,2) * $factor
* +respond-to(large)
* line-height: nth($value,3) * $factor */ }
@media only screen and (max-width: 1280px) {
.aboutSwiper .navigation .title {
font-size: 0.83333em;
letter-spacing: 0.1em; } }
@media only screen and (max-width: 1024px) {
.aboutSwiper .navigation .title {
font-size: 0.77778em; } }
.aboutSwiper .navigation li {
padding: 12px 40px;
display: block;
height: auto;
line-height: 1.22222;
cursor: pointer;
-webkit-transition: background 200ms ease-out;
-moz-transition: background 200ms ease-out;
transition: background 200ms ease-out; }
.aboutSwiper .navigation li.active {
background: #C5C2CB; }
.aboutSwiper .navigation li:not(.active):hover {
background: #D7D6DD; }
@media only screen and (max-width: 1280px) {
.aboutSwiper .navigation li {
padding: 8px 40px;
height: auto; } }
.aboutSwiper .navigation .name {
display: block;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600; }
.aboutSwiper .navigation .function {
display: block; }
.aboutSwiper .swiper-container {
height: 100%; }
.aboutSwiper .person {
padding: 80px 0 80px 4.16667%;
line-height: 2.11111; }
@media only screen and (max-width: 900px) {
.aboutSwiper .person {
width: 100%;
padding-left: 14.28571%;
padding-right: 14.28571%;
padding-bottom: 1.33333em; } }
@media only screen and (max-width: 480px) {
.aboutSwiper .person {
padding-top: 40px; } }
.aboutSwiper .person .name {
display: block;
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 2.11111em;
line-height: 1; }
.aboutSwiper .person .function {
display: block;
margin-top: 5px;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.8em; }
.aboutSwiper .story {
padding: 80px 0; }
@media only screen and (max-width: 900px) {
.aboutSwiper .story {
width: 100%;
padding-top: 0;
padding-left: 14.28571%;
padding-right: 14.28571%; } }
.contact h2 {
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 1.33333em; }
.contact .text-panel {
padding-left: 12.5%;
padding-right: 12.5%; }
.contact .maps_holder {
position: absolute;
top: 0;
right: 0;
height: 100%;
overflow: hidden; }
@media only screen and (max-width: 900px) {
.contact .maps_holder {
display: none; } }
.contact #map_canvas {
width: 100%;
height: 110%; }
.contact #map_canvas .info-window-content {
padding: 30px;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-size: 18px; }
.contact #map_canvas .info-window-content .title {
margin-bottom: 10px;
color: #52405B;
font-family: Roboto Slab, serif;
text-rendering: optimizeLegibility;
font-weight: 300;
font-size: 24px; }
.reviews-list li {
float: left;
width: 33.33333%;
border-bottom: 1px solid #DAD7DC; }
@media only screen and (max-width: 900px) {
.reviews-list li {
width: 50%; } }
@media only screen and (max-width: 640px) {
.reviews-list li {
width: 100%; } }
.review {
position: relative;
padding: 40px 12.5% 40px 25%; }
.review .avatar {
display: block;
position: absolute;
top: 40px;
left: 12.5%;
overflow: hidden;
margin: 0 0 0 -25px;
width: 50px;
height: 50px;
border-radius: 25px;
background: #6E6175; }
.review .name {
display: block;
margin-bottom: 0.66667em;
font-size: 1.11111em;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 600; }
.review .name .small {
font-size: 0.77778em;
font-family: Raleway, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-ms-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
-moz-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
font-weight: 400; }
.review .date {
font-size: 0.77778em;
color: #C0BAC2; }
.review .story {
display: block;
margin-bottom: 1.33333em;
font-size: 0.88889em; }
.review .stars {
display: inline-block;
margin-right: 20px; }
.review .star {
display: inline-block;
width: 17px;
height: 16px;
background-position: -450px -70px;
background-size: 640px 340px; }
.no-svg .review .star {
width: 17px;
height: 16px;
background-position: -450px -70px;
background-size: 640px 340px; }
.review .star.empty {
opacity: 0.4; }
.review .button {
margin-top: 30px; }
.review.write {
background: #FAFAFB; }
.review.write .avatar {
width: 50px;
height: 50px;
background-position: -460px -210px;
background-size: 640px 340px;
border-radius: 0;
background-color: transparent; }
.no-svg .review.write .avatar {
width: 50px;
height: 50px;
background-position: -460px -210px;
background-size: 640px 340px; }
.reviews .line {
position: absolute;
top: 0;
width: 1px;
z-index: 5;
height: 100%;
background: #DAD7DC; }
.reviews .line.one {
left: 33.32%; }
@media only screen and (max-width: 900px) {
.reviews .line.one {
left: 50%; } }
@media only screen and (max-width: 640px) {
.reviews .line.one {
display: none; } }
.reviews .line.two {
left: 66.62%; }
@media only screen and (max-width: 900px) {
.reviews .line.two {
display: none; } }
/*# sourceMappingURL=style.css.map */