/* Colors */ @primary-color: #009fee; /* Fonts */ @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700); /* Normalize */ html, body { font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 16px; margin: 0; padding: 0; } body { transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); } h1 { font-size: 44px; } h2 { font-weight: 700; } h1 strong span, h2 strong span { font-weight: 700; } h1 span, h2 span { font-weight: 300; } span.clear { clear: left; display: block; } img { max-width:100%;width:auto;max-height:100%;height:auto; } hr { height: 1px;background: #ccc;border: 0; } /* Body smooth load (Bugs on IE, removed since v1.0)*/ /* #smooth-load { display: none; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; } */ /* Links */ .row a:link, .row a:visited { color: @primary-color; border-bottom: 1px dotted @primary-color; } .row a:hover { color: #000; border-bottom-color: #000; } /* Hover animations */ a, button, a:hover, button:hover, .accordion-toggle, .accordion-toggle:hover, form input, form input:hover, { -webkit-transition:.2s; -moz-transition:.2s; -ms-transition:.2s; -o-transition:.2s; transition:.2s; text-decoration: none; } /* Tables */ table { table-layout: fixed;border: 0;border-collapse: collapse; } table tr th { padding: 10px;text-align: left;border-bottom: 1px solid #ccc; } table, table tr { width: 100%; } table tr:nth-child(even) { background: #ededed; } table tr td { padding: 10px;border-bottom: 1px solid #ccc;vertical-align: top; } table tr td.base-color { color: @primary-color; } #prijzen table { max-width: 50%; } /* List items */ ul.stars, ul.stars li { display: block; padding: 0; margin: 0; } ul.stars li { padding-top: 10px; padding-left: 0; position: relative; } ul.stars li:before { color: @primary-color; } ul.stars li:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } ul.stars li:before { content: "\f005"; position: absolute; left: -55px; margin-top: 10px; font-size: 44px; } ul.ul-markup { display: block; padding: 0; margin-left: 15px; } ul.ul-markup li { display: block; position: relative; padding-left: 25px; } ul.ul-markup li:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } ul.ul-markup li:before { color: @primary-color; content: "\f00c"; position: absolute; left: 0; top: 5px; } ul.photo-gallery, ul.photo-gallery li { display: block; margin: 0; padding: 0; } ul.photo-gallery { padding: 0 0 80px; } ul.photo-gallery li { overflow: hidden; display: inline-block; width: ~"calc( 12.5% - 5px )"; } ul.photo-gallery li a { position: relative; display: block; margin-bottom: -5px; } ul.photo-gallery li a .overlay { background: rgba( 0, 0, 0, .5 ); position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } ul.photo-gallery li a .overlay::before { position: absolute; left: 50%; top: 50%; color: #a8a8a8; font-size: 44px; margin-left: -22px; margin-top: -22px; } ul.photo-gallery li:hover .overlay { opacity: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } ul.photo-gallery li img { -webkit-transition: all .2s ease; /* Safari and Chrome */ -moz-transition: all .2s ease; /* Firefox */ -ms-transition: all .2s ease; /* IE 9 */ -o-transition: all .2s ease; /* Opera */ transition: all .2s ease; } ul.photo-gallery li:hover img { -webkit-transform:scale(1.15); /* Safari and Chrome */ -moz-transform:scale(1.15); /* Firefox */ -ms-transform:scale(1.15); /* IE 9 */ -o-transform:scale(1.15); /* Opera */ transform:scale(1.15); } @media screen and (max-width: 850px) { ul.photo-gallery li { width: ~"calc( 16.66% - 5px )"; } } @media screen and (max-width: 650px) { ul.photo-gallery li { width: ~"calc( 25% - 5px )"; } } @media screen and (max-width: 450px) { ul.photo-gallery li { width: ~"calc( 33.33% - 5px )"; } } /* Element Classes */ .article { background: #fff; padding: 25px; padding-top: 0; margin-top: 40px; } .shadow { .box-shadow-light; } .row { overflow: hidden; } /* Buttons */ .default-btn, .wpcf7 form input[type="submit"] { background: @primary-color; border: 1px outset #2dbcff; color: #fff; font-size: 16px; font-weight: bold; padding: 15px 25px; outline: none; cursor: pointer; border-radius: 5px; } .default-btn:hover, .wpcf7 form input[type="submit"]:hover { background: #202020; border: 1px outset #565656; } /* Classes */ .section-title h1 { margin: 0; padding: 80px 0; } .inline-block { display: inline-block; vertical-align: top; } .container { max-width: 1170px; margin: 0 auto; box-sizing: border-box; } .relative { position: relative; } .float-left { overflow: hidden; } .float-left .column { float: left; } .float-left.equal .column, .table.equal .column { box-sizing: border-box; width: 50%; } .table.equal .column { display: table-cell; vertical-align: top; } .table.three-columns .column { display: table-cell; width: 33.33%; } @media screen and (max-width:746px) { .table.three-columns .column { display: inline-block; width: 50%; margin-left: -4px; } } @media screen and (max-width:525px) { .table.three-columns .column { display: block; width: 100%; } } .fullwidth { width: 100%; } .table { table-layout: fixed; display: table; } .table-row { display: table-row; } .center { text-align: center; } .right { text-align: right; } .float-right { float: right; margin-top: 2px; } .fa-star { color: #ffd400; } .absolute { position: absolute; } .padding-bottom-80 { padding-bottom: 80px; } .box-shadow { border-bottom: 0 !important; -webkit-box-shadow: 0px 0px 3px 0px #202020; -moz-box-shadow: 0px 0px 3px 0px #202020; box-shadow: 0px 0px 3px 0px #202020; } .box-shadow-light { -webkit-box-shadow: 1px 1px 2px 0px #ccc; -moz-box-shadow: 1px 1px 2px 0px #ccc; box-shadow: 1px 1px 2px 0px #ccc; } .box-shadow-dark { -webkit-box-shadow: 1px 1px 2px 0px #333; -moz-box-shadow: 1px 1px 2px 0px #333; box-shadow: 1px 1px 2px 0px #333; } .box-shadow-light-top { -webkit-box-shadow: 1px -5px 2px -5px #ccc; -moz-box-shadow: 1px -5px 2px -5px #ccc; box-shadow: 1px -5px 2px -5px #ccc; } /* id's */ #impressie h1 { margin: 80px 0; } /* Background images */ .background-image { background-repeat: no-repeat; background-size: cover !important; width: 100%; } .big-image { min-height: 550px; } .background-image-text { color: #fff; max-width: 1170px; margin: 0 auto; padding-top: 15%; } @media screen and (max-width:1235px) { .background-image-text { padding-left: 15px; padding-right: 15px; } } .background-image-text p { margin: 0; font-size: 54px; font-weight: bold; } .background-overlay { background: rgba( 0, 0, 0, .3 ); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .background-overlay-blue { background: rgba( 0, 0, 0, .3 ); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .background-cover { /*background: url(../images/cover.jpg) no-repeat; background-size: 50% 100%;*/ } /* Header */ header { background: #202020; position: relative; z-index: 999; padding: 15px; border-bottom: 3px solid @primary-color; } header .inline-block { vertical-align: middle; } /* Navigation */ #navigation { margin-left: 100px; } #navigation ul, #navigation ul li, #navigation ul li a { display: block; margin: 0; padding: 0; } #navigation ul { overflow: hidden; } #navigation ul li { float: left; } #navigation ul li a { color: #fff; padding: 15px; font-weight: bold; text-decoration: none; } #navigation ul li:hover a, #navigation ul li.current_page_item a { color: @primary-color; } #shiftnav-main, #shiftnav-toggle-main { background: #202020 !important; } #shiftnav-main .shiftnav-menu-title { display: none; } @media screen and (max-width:970px) { #navigation { display: none; } } /* Front page */ .metaslider .caption-wrap { background: rgba( 0, 0, 0, .7 ) !important; opacity: 1 !important; } .metaslider .caption-wrap .caption { max-width: 1270px !important; margin: 0 auto !important; } .metaslider .rslides_nav { background: #FFD400; color: #000; opacity: 0.8; font-size: 24px; padding: 15px; } @media screen and (max-width:850px) { .metaslider .caption-wrap .caption h1 { font-size: 24px; } } @media screen and (max-width:550px) { .metaslider .caption-wrap .caption h1 { font-size: 14px; } } #stars .column { vertical-align: middle; position: relative; padding: 40px 80px; display: table-cell; } #stars .column-1 { position: relative; background: @primary-color; color: #fff; } #stars .column-1:after { position: absolute; content: ""; width: 0; height: 0; border-top: 70px solid transparent; border-left: 40px solid @primary-color; border-bottom: 70px solid transparent; } #stars .column-1:after { z-index: 9999; top: 50%; right: -35px; margin-top: -70px; } #stars .column-2 { padding-left: 120px; background: #ededed; } #stars .column-2 .content { position: relative; } @media screen and (max-width:455px) { #stars .column-1 h1 { font-size: 24px; } } @media screen and (max-width:400px) { #stars .column-1 { padding: 20px !important; } #stars .column-1 .fa-star { font-size: 32px !important; } #stars .column-2 { padding: 40px 40px 40px 80px; } } #stars .column-1 .fa-star { font-size: 44px; padding: 15px 10px; } #schema .section-title h1 { color: #fff; } #winner { background: @primary-color; color: #fff; } #winner .content { text-align: center; padding: 20px 0 40px; } @media screen and (max-width:400px) { #winner .content h1 { font-size: 24px; } } #team { background: #ededed; } #team .three-columns { display: block; box-sizing: border-box; } #team .three-columns .column { display: inline-block; margin: 0 15px; width: ~"calc( 33% - 30px )"; box-sizing: border-box; } #team .table { background: #fff; padding: 25px 0; box-sizing: border-box; box-shadow: 1px 1px 2px #ccc; } #team h2 { color: @primary-color; margin: 0; } #team .team-member { border-radius: 50%; } @media screen and (max-width:690px) { #team .three-columns .column { width: ~"calc( 50% - 40px )"; } } @media screen and (max-width:548px) { #team .three-columns .column { width: ~"calc( 100% - 40px )"; } } #flexible { background-attachment: fixed !important; padding: 180px 0; } #flexible .section { background: #fff; padding: 30px 30px 0px 30px; } #flexible h1, #flexible h2, #flexible p { margin: 0; } #flexible h1, #flexible h2 { color: @primary-color; } #flexible .column-2 { padding-left: 40px; position: absolute; margin-top: -140px; } #flexible img { max-width: 100%; margin-top: -70px; } #panorama { position: relative; overflow: hidden; } #panorama [data-activate] { background: rgba(0, 0, 0, .7); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 99; -webkit-transition: all .5s ease; /* Safari and Chrome */ -moz-transition: all .5s ease; /* Firefox */ -ms-transition: all .5s ease; /* IE 9 */ -o-transition: all .5s ease; /* Opera */ transition: all .5s ease; } #panorama [data-activate]:hover { background: rgba(0, 0, 0, .7); -webkit-transform:scale(1.25); /* Safari and Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* IE 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); cursor: pointer; } #panorama .data-activate-content { position: relative; text-align: center; top: 50%; margin-top: -31px; color: #fff; } #panorama .data-activate-content span { display: block; } #panorama .data-activate-content span:first-child { font-size: 34px; font-weight: bold; } @media screen and (max-width: 1184px) { #stars .column-1 { padding: 40px 40px; } } @media screen and (max-width: 855px) { #stars .column { display: block; width: 100%; } #stars .column-1:after { display: none; } } @media screen and (max-width: 636px) { #flexible .section { padding: 30px 30px 30px 30px; } #flexible .table .column { display: block; width: 100%; } #flexible .table img { max-width: 100%; margin-top: 40px; } #flexible .table .column .absolute { position: relative; } #flexible .column-2 { padding-left: 0; position: relative; margin-top: 0; } } /* Sidebar */ .with-sidebar, .sidebar { box-sizing: border-box; } .sidebar { } .has-sidebar, .the-sidebar { float: left; box-sizing: border-box; } .has-sidebar { width: 65%; } .the-sidebar { width: 35%; padding: 40px 0 0 40px; } .the-sidebar .recensie-wrap h3 { color: @primary-color; } @media screen and (max-width: 1070px) { .sidebar { display: none; } .with-sidebar { width: 100% !important; } } @media screen and (max-width: 940px) { .has-sidebar, .the-sidebar { float: none; width: 100%; } .the-sidebar { .article; .box-shadow-light; padding: 25px; margin: 40px 0; } } /* Page builder */ #page-builder img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; padding: 5px; border: 1px solid #ccc; background: #ededed; border-radius: 3px; } .one-column { background: #fff; padding: 25px; box-sizing: border-box; .box-shadow-light; } .one-column h1 { margin: 0 0 15px; font-size: 28px; } .space { height: 25px; width: 100%; box-sizing: border-box; } /* Swiper Slider */ .swiper-row { background: url('http://we-fit.h2505194.stratoserver.net/wp-content/uploads/2016/07/Yoga-bij-FeelGoodClub-AeroFitt.jpg') no-repeat; background-size: cover; } .swiper-container { max-width: 1170px; height: 100%; padding: 40px; box-sizing: border-box; } .swiper-container .swiper-slide { text-align: center; background: #fff; padding: 25px; box-sizing: border-box; cursor: move; height: 280px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; /* Center slide text vertically */ .box-shadow-dark; } .swiper-slide h3 { color: @primary-color; } .swiper-slide i { font-size: 24px; } /* Schedule */ .class-schedule { background: #000000 url(img/class-schedule.png) 0 0 no-repeat; background-size: cover; background-attachment: fixed; } .class-schedule .section-title h2{ color: #ffffff; margin-bottom: 60px; } .class-schedule-wrap { -webkit-box-shadow: inset 3px -6px 5px -7px rgba(0,0,0,0.75); -moz-box-shadow: inset 3px -6px 5px -7px rgba(0,0,0,0.75); box-shadow: inset 3px -6px 5px -7px rgba(0,0,0,0.75); background: @primary-color; padding: 65px 50px; } .sidebar-class-schedule-wrap { -webkit-box-shadow: inset 0 0 0 0; -moz-box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 0; background: transparent; padding: 0; padding-top: 10px; } .class-schedule-wrap ul.nav-tabs { border: none; margin-bottom: 45px; padding: 0; } .class-schedule-wrap .nav-tabs { text-align: center; } .sidebar-class-schedule-wrap .nav-tabs { text-align: left; } .class-schedule-wrap .nav-tabs li { display: inline-block; float: inherit; margin: 0; } .class-schedule-wrap .nav-tabs li a { display: block; background: rgba( 0, 0, 0, .2 ); text-decoration: none; border: none; border-radius: 30px; color: #ffffff; margin-right: 10px; margin-bottom: 5px; padding: 15px 35px; text-transform: capitalize; } .sidebar-class-schedule-wrap .nav-tabs li a { background: #009fee; padding: 10px 25px; } .class-schedule-wrap .nav-tabs li.active a { background: #ffffff; color: #111111; border: none; } .sidebar-class-schedule-wrap .nav-tabs li.active a { background: #333; color: #fff; } .class-schedule-wrap .nav-tabs li.active a:hover, .class-schedule-wrap .nav-tabs li a:hover { background: #ffffff; color: #111111; border: none; } .sidebar-class-schedule-wrap .nav-tabs li.active a:hover, .sidebar-class-schedule-wrap .nav-tabs li a:hover { background: #333; color: #fff; border: none; } .class-schedule-wrap .nav-tabs li:last-child a { margin-right: 0; } .class-schedule-tab { padding-right: 35px; min-height: 390px; max-height: 390px; overflow: auto; } .class-schedule-tab ul { position: relative; margin-top: 3px; padding: 15px 0 15px 10px; } .sidebar-class-schedule-tab ul { padding: 10px 0 10px 10px; } .class-schedule-tab ul:nth-child(odd) { background: rgba( 0, 0, 0, .2 ); border-radius: 20px; } .class-schedule-tab ul:nth-child(even) { background: rgba( 0, 0, 0, .4 ); border-radius: 20px; } .sidebar-class-schedule-tab ul:nth-child(odd) { background: rgba( 0, 159, 238, .6 ); border-radius: 20px; } .sidebar-class-schedule-tab ul:nth-child(even) { background: rgba( 0, 159, 238, 1 ); border-radius: 20px; } .class-schedule-tab ul li { box-sizing: border-box; display: inline-block; color: #ffffff; font-size: 16px; width: 24.5%; } .sidebar-class-schedule-tab ul li { box-sizing: border-box; display: inline-block; color: #ffffff; font-size: 16px; width: 32.5%; } .class-schedule-tab ul li a.live { font-weight: bold; font-size: 16px; } .class-schedule-tab ul li a.live:hover { background: #fff !important; cursor: default !important; color: #111111 !important; } .class-schedule-tab ul li:nth-child(1){ padding-left: 20px; } .class-schedule-tab ul li:nth-child(2){ text-align: center; } .class-schedule-tab ul li:nth-child(3) { text-align: center; } .class-schedule-tab ul li:nth-child(4) { text-align: right; } .class-schedule-tab ul li:nth-child(4) a { background: #ffffff; border-radius: 30px; font-size: 15px; color: #666666; padding: 12px 20px; } .class-schedule-tab ul li:nth-child(4) a:hover { background: #202020; color: #ffffff; } .class-schedule-tab::-webkit-scrollbar { width: 5px; height: 5px; } .class-schedule-tab::-webkit-scrollbar-button { width: 0px; height: 0px; } .class-schedule-tab::-webkit-scrollbar-thumb { background: #005984; border: 0px none #ffffff; border-radius: 50px; } .class-schedule-tab::-webkit-scrollbar-thumb:hover { background: #005984; } .class-schedule-tab::-webkit-scrollbar-thumb:active { background: #005984; } .class-schedule-tab::-webkit-scrollbar-track { background: #007dbc; border: 0px none #ffffff; border-radius: 50px; } .class-schedule-tab::-webkit-scrollbar-track:hover { background: #007dbc; } .class-schedule-tab::-webkit-scrollbar-track:active { background: #007dbc; } .class-schedule-tab::-webkit-scrollbar-corner { background: transparent; } /* Sticker */ .sticker { position: relative; background: #FFD400; border-radius: 50%; width: 200px; height: 200px; box-shadow: 0px 0px 25px #333; } .sticker .sticker-content { position: absolute; vertical-align: middle; padding: 15px; left: 50%; top: 50%; margin-left: -80px; margin-top: -57px; -ms-transform: rotate(14deg); -webkit-transform: rotate(14deg); transform: rotate(14deg); } .sticker .sticker-content span { color: @primary-color; font-weight: 300; font-size: 29px; } /* Accordion */ #accordion { padding: 0 0 40px; } .accordion { overflow: hidden; } .accordion, .accordion li { display: block; margin: 0; padding: 0; } .accordion li { display: inline-block; vertical-align: top; margin-right: -5px; width: 50%; } .accordion li a { border-bottom: 0 !important; } #informatie #accordion .container { padding: 0; } #informatie .accordion li { float: none; width: 100%; } .accordion li .accordion-toggle { background: #ededed; color: #333; padding: 15px; margin: 5px; border-radius: 3px; } .accordion li .accordion-toggle:hover, .accordion li.active .accordion-toggle { background: @primary-color; cursor: pointer; color: #fff; } .accordion li .accordion-dropdown .accordion-content { width: 100%; padding: 0 15px 40px 0; box-sizing: border-box; } .accordion li .accordion-dropdown .accordion-content li { width: 100%; box-sizing: border-box; } .accordion li span { font-weight: bold; margin-left: 25px; } .accordion li ul { display: none; } @media screen and (max-width:600px) { .accordion li { float: none; width: 100%; } } /* CSS loader */ .css-loader { display: inline-block; width: 100%;height: 100%; vertical-align: middle; padding: 20%; box-sizing: border-box; } .sk-fading-circle { margin: 0 auto; width: 40px; height: 40px; position: relative; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: @primary-color; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Prijslijst */ #informatie { background: #ededed; padding-bottom: 40px; } #informatie h2 { } #informatie .contents-of-table { display: inline-block; margin-bottom: 10px; max-width: 100%; } #prijslijst .item-wrap { padding-left: 15px; } #prijslijst .item-wrap:nth-child(1) { padding-right: 15px; padding-left: 0px !important; } #prijslijst .wrap { background: #fff; box-shadow: 1px 1px 3px #ccc; } #prijslijst, #prijslijst li { display: block; padding: 0; margin: 0; } #prijslijst { padding: 40px 0; } #prijslijst li { display: inline-block; width: ~"calc( 25% - 4px )"; } #prijslijst .item-header { background: @primary-color; padding: 15px; color: #fff; border-bottom: 3px solid #007fba; } #prijslijst .item-content { padding: 15px; } #prijslijst .item-header h3 { margin: 0; } /* Lightgallery */ .lg-outer { z-index: 99999; } /* Lightbox */ .lightbox-wrap { background: rgba( 0, 0, 0, .5 ); display: table; position: fixed; top: 0;left: 0; z-index: 9999999; height: 100%; width: 100%; -webkit-animation: fadein .2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .2s; /* Firefox < 16 */ -ms-animation: fadein .2s; /* Internet Explorer */ -o-animation: fadein .2s; /* Opera < 12.1 */ animation: fadein .2s; } .lightbox-wrap .lightbox-inner { display: table-cell; vertical-align: middle; text-align: center; box-sizing: content-box; } .lightbox-wrap .lightbox-inner img { border: 40px solid transparent; box-sizing: border-box; max-width: 100% !important;max-height: 100vh !important; } .lightbox-wrap .lightbox-inner .lb-close { position: fixed; top: 40px;right: 40px; color: #fff; font-size: 44px; } .lightbox-wrap .lightbox-inner .lb-close:hover { color: @primary-color; cursor: pointer; } /* wpcf7 WordPress Contact Form 7 Plugin support */ .contact-page h1 { margin-top: 5px; } .contact-page .column { height: 100% !important; padding-top: 10px !important; padding-bottom: 25px !important; } .contact-page .column-2 { padding: 0px 40px 40px 120px; } .wpcf7 { width: 100%; } .wpcf7 form { padding-right: 30px; } .wpcf7 form input[type="text"], .wpcf7 form input[type="email"], .wpcf7 form input[type="name"], .wpcf7 form textarea { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; width: 100%; padding: 15px; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box; } .wpcf7 form input[type="text"]:focus, .wpcf7 form input[type="email"]:focus, .wpcf7 form input[type="name"]:focus, .wpcf7 form textarea:focus { border: 1px solid @primary-color; outline: none; box-shadow: 0 0 3px @primary-color; } .contact-page .column { vertical-align: top !important; } .contact-page .column-0 { padding: 40px 40px 40px 0; } @media screen and (max-width:616px) { .contact-page .column-1 { padding: 0 20px !important; width: 100% !important; display: block !important; } .contact-page .column-2 { width: 100% !important; display: block !important; padding: 0 40px 40px 20px !important; } } /* Page styles */ .informatie-page #team { background: #fff; .box-shadow-light-top; } .informatie-page #team .container { padding: 0 25px 80px; } /* Page builder */ .multiple-columns .column:nth-child(1) {margin-right: 10px;} .multiple-columns .column:nth-child(2) {margin-left: 10px;} .multiple-columns .column:nth-child(3) {margin-left: 10px;} .multiple-columns .column:nth-child(4) {margin-left: 10px;} /* Site footer */ #footer { background: #202020; color: #fff; } #footer .widgets aside { display: inline-block; vertical-align: top; width: 33%; padding: 25px 0; box-sizing: border-box; } #footer .widgets aside #fb-root { padding-top: 5px; } #footer .widgets aside:first-child { padding-left: 0; } #footer .widgets aside ._2ph- { display: none !important; } #footer .widgets aside p { margin: 0; color: #bcbcbc; text-shadow: 1px 1px #000; } #footer .widgets aside h3 { color: #ccc; text-shadow: 1px 1px #000; margin: 0; padding: 0 0 10px; } #footer .widgets #facebook-like { padding-top: 0; } #footer .widgets aside .fa-star { color: #ffd400; font-size: 34px; padding: 0 10px 0 0; margin-top: 15px; } #footer .widgets aside#text-6 .textwidget { padding-top: 15px; } #footer .widgets aside#text-6 h3 { padding: 0; } #footer .widgets aside#text-6 .fa { font-size: 24px; color: #fff; } #footer .widgets #sponsor { text-align: left; color: #fff; } #footer .widgets #sponsor a { color: @primary-color; border-bottom: 1px dotted @primary-color; } #footer .widgets #sponsor img { margin-top: 2px; max-width: 110px; } #footer #footer-nav ul, #footer #footer-nav ul li, #footer #footer-nav ul li a { display: block; margin: 0; padding: 0; } #footer #footer-nav ul { overflow: hidden; } #footer #footer-nav ul li { float: left; width: 50%; } #footer #footer-nav ul li a { color: #bcbcbc; text-shadow: 1px 1px #000; } #footer #footer-nav ul li a:hover { color: @primary-color; } #footer .copyright { background: @primary-color; } #footer .copyright p { color: #fff; margin: 0; padding: 15px 0; } #footer .copyright p, #footer .copyright a { color: #fff; } #footer .copyright a { color: #333; border-bottom: 1px dotted #333; } #footer .copyright a:hover { color: #000; border-bottom: 1px dotted #000; } /* Media Query's */ @media screen and (max-width: 1240px) { .one-column { padding: 0 15px; } .container { padding-left: 15px; padding-right: 15px; } /* Schedule wrap */ @media (max-width: 767px) { .class-schedule-wrap ul.nav-tabs { margin-bottom: 25px;} .class-schedule-wrap { padding: 30px 15px;} .class-schedule-wrap .nav-tabs li, .schedule-page .class-schedule-wrap .nav-tabs li { width: 48%;} .class-schedule-wrap .nav-tabs li a { margin-right: 3px; margin-bottom: 3px;} .class-schedule-tab ul li { width: 100%; text-align: center;} .class-schedule-tab ul li:nth-child(1) { padding-left: 0;} .class-schedule-tab ul li:nth-child(4) { text-align: center; margin-top: 20px; margin-bottom: 10px;} } /* Extra Small Devices, Phones */ @media(min-width: 320px) and (max-width: 480px){ .class-schedule .section-title h2, .what-client-area .section-title h2 { text-align: center;} .class-schedule-wrap .nav-tabs li a { padding: 10px 15px;} .class-schedule-tab ul { padding-left: 0;} } /* Medium Devices, Desktops */ @media(min-width: 768px) and (max-width: 1024px) { .class-schedule-tab ul li { font-size: 15px;} .class-schedule-wrap ul.nav-tabs { margin-bottom: 40px;} .classes-tab-area ul, .class-schedule-wrap ul.nav-tabs { margin-bottom: 25px;} .the-sidebar .class-schedule-wrap { padding-left: 0;padding-right: 0; } .class-schedule-wrap { padding-left: 40px; padding-right: 40px;} .class-schedule-wrap .nav-tabs li a { padding: 10px 12px; margin-right: 2px;} } /* Large Devices, Wide Screens */ @media(min-width: 1025px) and (max-width: 1200px) { .class-schedule-wrap ul.nav-tabs { margin-bottom: 30px;} .class-schedule-wrap .nav-tabs li a { padding: 12px 25px; margin-right: 5px;} } } @media screen and (max-width: 1215px) { #footer .widgets aside { width: 33%; } } @media screen and (max-width: 920px) { #footer .widgets aside { width: 49%; } #footer .widgets aside:first-child { width: 50%; } #footer .container { padding-top: 20px; padding-bottom: 40px; } } @media screen and (max-width: 550px) { #footer .widgets aside { width: 100%; } #footer .widgets aside:first-child { width: 100%; } } /* Keyframes */ @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }