@charset "UTF-8";

.tccButtonRound {
background-color: black;
background-color: transparent;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 600;
padding: 15px 30px;
text-align: center;
text-decoration: none;
white-space: normal;
width: auto;
color: white !important;
}
.tccButtonRound:hover {
background-color: black;
color: white !important;
}
.zwart .button {
border: 0.2rem solid black;
padding: 1rem;
font-weight: 600;
color: black;
transition: all 0.5s ease-in-out;
background-color: transparent;
cursor: pointer;
padding: 0.5rem 1rem 0.7rem;
border-radius: 0;
color: white;
border-color: white;
}
.zwart .button:hover {
background-color: black;
color: white !important;
}
.zwart .button:hover {
background-color: white;
color: black !important;
}
.wrapper.textBlock {
padding-top: 8rem !important;
padding-bottom: 8rem !important;
}
@media only screen and (max-width: 860px) {
.wrapper.textBlock {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
}
@media only screen and (min-width: 861px) {
.wrapper.textBlock.choke {
max-width: 70rem !important;
margin-left: auto;
margin-right: auto;
}
}
.wrapper.textBlock .pageData {
min-height: 0 !important;
max-width: 110rem;
margin: auto;
}
.wrapper.textBlock h2 {
font-size: 4.5rem !important;
}
@media only screen and (max-width: 860px) {
.wrapper.textBlock h2 {
font-size: 2.5rem !important;
}
}
.wrapper.textBlock h3 {
font-size: 2.75rem !important;
}
@media only screen and (max-width: 860px) {
.wrapper.textBlock h3 {
font-size: 2rem !important;
}
}
.text ul li {
display: block;
margin-left: 0;
margin-bottom: 0.5rem;
}
.text ul li:before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-right: 1rem;
background-color: black;
display: inline-block;
position: relative;
top: -0.3ex;
}
.galleryblockwrapper.wrapper {
padding: 0 !important;
}
.galleryblockwrapper.wrapper.whiteDots .slick-dots li button:before {
color: white;
}
.galleryblockwrapper.wrapper .galWrapper {
width: 100%;
transition: all 0.5s ease-in-out;
}
.galleryblockwrapper.wrapper .galWrapper .single-item {
margin: 0 auto;
padding: 0;
}
.galleryblockwrapper.wrapper .galWrapper .galPhoto {
width: 100%;
height: 50vw;
min-height: 50rem;
font-size: 0;
max-width: none;
margin: 0;
}
.galleryblockwrapper.wrapper .galWrapper .galPhoto img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.more {
position: absolute;
right: 3rem;
display: block;
display: block;
text-decoration: none;
top: calc(50% - 3rem);
transition: opacity 0.5s ease-in-out;
right: 0;
opacity: 1;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
padding: 1rem;
}
.more ion-icon {
font-size: 3rem;
}
.more.back {
right: inherit;
left: 0;
}
.sliderBlock {
position: relative;
}
.sliderBlock .tns-controls button span, .sliderBlock .tns-controls button div {
position: absolute;
top: 48%;
}
.sliderBlock .tns-controls button span {
left: 5%;
}
.sliderBlock .tns-controls button div {
right: 5%;
}
.sliderBlock .sliderArrow {
width: 0;
height: 0;
position: absolute;
top: calc(50% - 30px);
cursor: pointer;
}
.sliderBlock .slider-prev {
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 20px solid white;
left: 2rem;
}
.sliderBlock .slider-next {
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid white;
right: 2rem;
}
.wrapper.tworowswrapper {
padding: 0 !important;
}
.wrapper.tworowswrapper .rowImage {
height: 60vh;
width: 100%;
font-size: 0;
}
@media only screen and (max-width: 860px) {
.wrapper.tworowswrapper .rowImage {
height: 30vh;
}
}
@media only screen and (max-width: 860px) and (orientation: landscape) {
.wrapper.tworowswrapper .rowImage {
height: auto;
}
}
.wrapper.tworowswrapper .rowImage img {
width: 100%;
height: 101%;
-o-object-fit: cover;
object-fit: cover;
}
.wrapper.tworowswrapper .rowText {
padding: 12vh 5%;
}
@media only screen and (max-width: 860px) {
.wrapper.tworowswrapper .rowText {
padding: 4rem;
}
}
.wrapper.tworowswrapper .rowText .content {
max-width: 110rem;
margin: auto;
}
.wrapper.tworowswrapper .rowText .content h2 {
font-size: 4.5rem !important;
}
@media only screen and (max-width: 860px) {
.wrapper.tworowswrapper .rowText .content h2 {
font-size: 2.5rem !important;
}
}
.wrapper.tworowswrapper .rowText .content h3 {
font-size: 2.75rem !important;
}
@media only screen and (max-width: 860px) {
.wrapper.tworowswrapper .rowText .content h3 {
font-size: 2rem !important;
}
.wrapper.tworowswrapper .rowText .content h3:first-of-type {
margin-top: 0;
}
}
.twocolumnwrapper {
padding: 0 !important;
background-color: black;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0rem;
grid-row-gap: 0rem;
}
.twocolumnwrapper:after {
content: "";
display: table;
clear: both;
float: none;
}
@media only screen and (min-width: 861px) {
.twocolumnwrapper {
padding: 0;
}
}
.twocolumnwrapper.ruimt {
padding: 4rem 8rem 4rem !important;
grid-column-gap: 4rem;
}
@media only screen and (max-width: 960px) {
.twocolumnwrapper.ruimt {
padding: 3rem !important;
}
}
@media only screen and (max-width: 960px) {
.twocolumnwrapper.ruimt .columnBg {
margin-bottom: 2rem;
}
}
.twocolumnwrapper.ruimt .pageData.column {
padding: 0rem !important;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.twocolumnwrapper.ruimt h2 {
font-size: 3.2rem;
}
.twocolumnwrapper.ruimt p:last-of-type {
margin-bottom: 0;
}
@media only screen and (max-width: 860px) {
.twocolumnwrapper {
display: block;
}
}
.twocolumnwrapper.zwart .wpcf7 .wpcf7-submit {
background-color: white;
color: black;
}
.twocolumnwrapper.grijs .wpcf7 .wpcf7-submit {
background-color: black;
color: white;
}
.twocolumnwrapper .column.mobile {
display: none;
}
@media only screen and (max-width: 860px) {
.twocolumnwrapper .column.mobile {
display: block;
}
}
@media only screen and (max-width: 860px) {
.twocolumnwrapper .column.desktop {
display: none;
}
}
.twocolumnwrapper .columnBg.column {
width: 100%;
position: relative;
font-size: 0;
width: 100%;
}
@media only screen and (max-width: 860px) and (orientation: landscape) {
.twocolumnwrapper .columnBg.column {
height: auto;
}
}
@media only screen and (min-width: 861px) {
.twocolumnwrapper .columnBg.column .colBgWrap {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
}
.twocolumnwrapper .columnBg.column img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
max-width: none;
}
.twocolumnwrapper .pageData.column {
width: 100%;
text-align: left;
padding: 4rem !important;
min-height: 0 !important;
}
@media only screen and (min-width: 861px) {
.twocolumnwrapper .pageData.column {
padding: 6rem !important;
width: 50%;
}
}
@media only screen and (max-width: 860px) {
.twocolumnwrapper .pageData.column h2 {
margin-top: 0;
}
}
.twocolumnwrapper .pageData.column .afterText {
margin-top: 3rem !important;
}
.twocolumnwrapper .pageData.column .contentWrapper p {
color: white;
}
.twocolumnwrapper.wit {
background-color: white;
}
.twocolumnwrapper.wit .content p, .twocolumnwrapper.wit .content h2, .twocolumnwrapper.wit .content h3, .twocolumnwrapper.wit .content h4, .twocolumnwrapper.wit .content h5, .twocolumnwrapper.wit .content h6 {
color: black !important;
}
.twocolumnwrapper.grijs {
background-color: #f2f2f2;
}
.twocolumnwrapper.grijs .content p, .twocolumnwrapper.grijs .content h2, .twocolumnwrapper.grijs .content h3, .twocolumnwrapper.grijs .content h4, .twocolumnwrapper.grijs .content h5, .twocolumnwrapper.grijs .content h6 {
color: black !important;
}
@media only screen and (min-width: 861px) {
.twocolumnwrapper.right .columnBg.column {
left: inherit;
right: 0;
}
}
@media only screen and (min-width: 861px) {
.twocolumnwrapper.right .pageData.column {
margin-left: 0%;
margin-right: 50%;
}
}
.instagramblockWrapper {
padding: 0 !important;
display: block;
}
.instagramblockWrapper .sectionGallery { display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 900px) {
.instagramblockWrapper .sectionGallery {
grid-template-columns: repeat(2, 1fr);
}
}
.instagramblockWrapper .instaPhoto { }
.instagramblockWrapper .instaPhoto.cols3 {
width: 33.33vw;
height: 33.33vw;
}
@media only screen and (max-width: 900px) {
.instagramblockWrapper .instaPhoto {
width: 50vw;
height: 50vw;
}
}
.instagramblockWrapper .instaPhoto img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover; aspect-ratio: 1/1;
}
.instagramblockWrapper .instaPhoto .instaText {
display: none;
background-color: rgba(0, 0, 0, 0.7);
color: white;
position: relative;
opacity: 0;
width: 100%;
height: 100%;
transition: all 0.5s ease-in-out;
overflow: scroll;
}
.instagramblockWrapper .instaPhoto .instaText .content {
padding: 1rem;
text-align: left;
font-size: 1.2rem;
}
@media only screen and (min-width: 1100px) {
.instagramblockWrapper .instaPhoto .instaText .content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
.instagramblockWrapper .instaPhoto:hover .instaText {
opacity: 1;
}
@media only screen and (max-width: 860px) {
.instagramblockWrapper .instaPhoto:hover .instaText {
display: none;
}
}
.scrollHeader {
padding: 0 !important;
margin: 0;
margin-top: 5rem;
text-align: center;
}
.scrollHeader li {
display: block;
margin-bottom: 2rem;
}
.scrollHeader li a {
text-decoration: none;
font-family: "Didot";
font-weight: normal;
font-size: 2rem;
}
.ionIcon.arrow {
display: block;
background-image: url(//mio.training/wp-content/themes/miotheme/assets/arrowdown.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 1.5rem;
height: 6.5rem;
margin: 3rem auto 4rem;
}
.wrapper.zwart .ionIcon.arrow {
background-image: url(//mio.training/wp-content/themes/miotheme/assets/arrowdown_ehite.png);
}
.videoBlock .videoWrapper {
background: black;
position: relative;
display: block;
top: inherit;
left: inherit;
width: 100%;
overflow: hidden;
height: auto;
padding: 0 !important;
padding-top: 41.5% !important;
}
.videoBlock .videoWrapper:hover .playBtnWrapper {
background-color: rgba(255, 255, 255, 0.5);
}
.videoBlock .videoWrapper .playBtnWrapper {
border: 0.2rem solid white;
border-radius: 50%;
display: inline-block;
width: 7rem;
height: 7rem;
text-align: center;
background-color: transparent;
transition: all 0.5s ease-in-out;
margin-top: 0;
position: absolute;
top: calc(50% - 4rem);
left: calc(50% - 4rem);
transform: none !important;
animation-name: none;
opacity: 1;
z-index: 1;
}
@media only screen and (max-width: 860px) {
.videoBlock .videoWrapper .playBtnWrapper {
width: 5rem;
height: 5rem;
top: calc(50% - 2.5rem);
left: calc(50% - 2.5rem);
}
}
.videoBlock .videoWrapper .playBtnWrapper.fade {
opacity: 0;
}
.videoBlock .videoWrapper .playBtnWrapper .playBtn {
width: 0;
height: 0;
border: 0;
border-top: 1.75rem solid transparent;
border-bottom: 1.75rem solid transparent;
border-left: 1.75rem solid white;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
left: 0.25ex;
transition: border-left-color 0.5s ease-in-out;
background-color: transparent !important;
padding: 0;
}
@media only screen and (max-width: 860px) {
.videoBlock .videoWrapper .playBtnWrapper .playBtn {
border-top: 1.5rem solid transparent;
border-bottom: 1.5rem solid transparent;
border-left: 1.5rem solid white;
left: 0.3ex;
}
}
.videoBlock .videoWrapper video {
position: absolute;
top: 0;
left: 0;
}
.videoBlock .videoWrapper video[poster] {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.videoBlock .videoWrapper .player:focus {
outline: 0;
}
#referentiesWrapper .refSlideWrapper {
background: black;
width: 100vw;
}
@media only screen and (min-width: 861px) {
#referentiesWrapper .refSlideWrapper {
display: flex;
flex-direction: row;
height: calc(100vh - 4rem);
}
}
#referentiesWrapper .referentie {
margin: 0;
text-align: center;
position: relative;
height: auto;
background-color: black;
cursor: pointer;
opacity: 1;
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .referentie {
background-color: white;
}
}
@media only screen and (min-width: 861px) {
#referentiesWrapper .referentie:hover img {
opacity: 0.7;
}
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .referentie {
padding-bottom: 2rem;
}
}
@media only screen and (min-width: 861px) {
#referentiesWrapper .referentie {
flex: 1;
max-width: 100rem;
transform: none;
max-height: 100vh;
transition: all 0.5s ease-in-out;
}
}
#referentiesWrapper .referentie.seePic {
flex: 20;
opacity: 1;
cursor: auto;
}
#referentiesWrapper .referentie.seePic img {
opacity: 1;
}
#referentiesWrapper .referentie.seePic .refContent {
opacity: 1;
z-index: 1;
}
#referentiesWrapper .referentie img {
-o-object-fit: contain;
object-fit: contain;
width: 100%;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
@media only screen and (min-width: 861px) {
#referentiesWrapper .referentie img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
#referentiesWrapper .referentie .refContent {
z-index: -1;
text-align: left;
background-color: white;
transition: all 0.5s ease-in-out;
padding: 2rem 2rem 1rem;
}
@media only screen and (min-width: 861px) {
#referentiesWrapper .referentie .refContent {
position: absolute;
right: 5%;
bottom: 5%;
width: 80%;
opacity: 0;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0.5rem;
padding: 1rem 2rem;
}
}
#referentiesWrapper .referentie .refContent .refContentTitle {
color: white;
font-size: 2rem;
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .referentie .refContent .refContentTitle {
color: black;
}
}
#referentiesWrapper .referentie .refContent p {
color: white;
font-size: 1.6rem;
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .referentie .refContent p {
color: black;
}
}
#referentiesWrapper .referentie .refContent .closeSquare {
position: absolute;
top: -0.1rem;
right: 0.95rem;
font-size: 2rem;
color: white;
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .referentie .refContent .closeSquare {
display: none;
}
}
#referentiesWrapper .closeBtn {
position: absolute;
right: 3rem;
z-index: 0;
font-size: 2rem;
opacity: 1;
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 0.3rem;
right: 1.5rem;
font-size: 2rem;
color: white;
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .closeBtn {
right: 1rem;
top: -5rem;
}
}
#referentiesWrapper .specialMenu {
z-index: 101;
padding: 1rem;
background: transparent;
position: relative;
}
#referentiesWrapper .specialMenu .nav-icon4 {
width: 20px;
height: 20px;
position: relative;
margin: 0px auto;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
will-change: transform;
}
#referentiesWrapper .specialMenu .nav-icon4 span {
display: block;
position: absolute;
height: 1px;
width: 100%;
background: white;
opacity: 1;
left: 0;
border-radius: 1px;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
@media only screen and (max-width: 860px) {
#referentiesWrapper .specialMenu .nav-icon4 span {
height: 2px;
}
}
#referentiesWrapper .specialMenu .nav-icon4 span:nth-child(1) {
top: 0px;
}
#referentiesWrapper .specialMenu .nav-icon4 span:nth-child(2), #referentiesWrapper .specialMenu .nav-icon4 span:nth-child(3) {
top: 6px;
}
#referentiesWrapper .specialMenu .nav-icon4 span:nth-child(4) {
top: 13px;
}
#referentiesWrapper .nav-icon4.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#referentiesWrapper .nav-icon4.open span:nth-child(2) {
transform: rotate(45deg);
}
#referentiesWrapper .nav-icon4.open span:nth-child(3) {
transform: rotate(-45deg);
}
#referentiesWrapper .nav-icon4.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.page-template-media .entry {
margin-bottom: 0;
}
.page-template-media #videoWrapper {
background: black;
width: 100vw;
padding: 0;
overflow: scroll;
}
@media only screen and (min-width: 861px) {
.page-template-media #videoWrapper {
display: flex;
flex-direction: row;
top: 0;
left: 0;
}
}
.page-template-media #videoWrapper .mediaItem {
margin: 0;
text-align: center;
position: relative;
opacity: 1;
}
@media only screen and (min-width: 861px) {
.page-template-media #videoWrapper .mediaItem {
flex: 1;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
height: 100%; }
}
@media only screen and (min-width: 861px) and (min-width: 861px) {
.page-template-media #videoWrapper .mediaItem:hover img {
opacity: 0.7;
}
}
.page-template-media #videoWrapper .mediaItem .closeBtn {
position: absolute;
right: 2rem;
top: 3rem;
z-index: 1;
font-size: 2rem;
border-radius: 50%;
opacity: 0;
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .mediaItem .closeBtn {
right: 1rem;
top: 1rem;
}
}
.page-template-media #videoWrapper .mediaItem .specialMenu {
z-index: 101;
padding: 1rem;
background: transparent;
position: relative;
transition: 0.5s ease-in-out;
top: 0.4rem;
left: 0;
}
.page-template-media #videoWrapper .mediaItem .specialMenu .nav-icon4 {
width: 20px;
height: 20px;
position: relative;
margin: 0px auto;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
will-change: transform;
}
.page-template-media #videoWrapper .mediaItem .specialMenu .nav-icon4 span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: white;
opacity: 1;
left: 0;
border-radius: 1px;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.page-template-media #videoWrapper .mediaItem .specialMenu .nav-icon4 span:nth-child(1) {
top: 0px;
}
.page-template-media #videoWrapper .mediaItem .specialMenu .nav-icon4 span:nth-child(2), .page-template-media #videoWrapper .mediaItem .specialMenu .nav-icon4 span:nth-child(3) {
top: 6px;
}
.page-template-media #videoWrapper .mediaItem .specialMenu .nav-icon4 span:nth-child(4) {
top: 13px;
}
.page-template-media #videoWrapper .mediaItem .nav-icon4.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
.page-template-media #videoWrapper .mediaItem .nav-icon4.open span:nth-child(2) {
transform: rotate(45deg);
}
.page-template-media #videoWrapper .mediaItem .nav-icon4.open span:nth-child(3) {
transform: rotate(-45deg);
}
.page-template-media #videoWrapper .mediaItem .nav-icon4.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.page-template-media #videoWrapper .mediaItem.seePic {
flex: 20;
opacity: 1;
}
.page-template-media #videoWrapper .mediaItem.seePic .refContent {
opacity: 1;
}
.page-template-media #videoWrapper .mediaItem.seePic img {
opacity: 1;
}
.page-template-media #videoWrapper .mediaItem.seePic .closeBtn {
opacity: 1;
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .mediaItem.seePic .closeBtn.closePic {
display: none;
}
}
.page-template-media #videoWrapper .mediaItem.seePic .playBtnWrapper {
opacity: 1;
display: block;
}
.page-template-media #videoWrapper .mediaItem .videoElement {
height: calc(100vh - 4rem);
position: relative;
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .mediaItem .videoElement {
height: 60vw;
}
}
.page-template-media #videoWrapper .mediaItem .videoElement .videoBg {
height: 100%;
}
.page-template-media #videoWrapper .mediaItem img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
-o-object-position: 50% 50%;
object-position: 50% 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.page-template-media #videoWrapper .mediaItem .playBtnWrapper {
border: 0.3rem solid white;
border-radius: 50%;
display: inline-block;
width: 8rem;
height: 8rem;
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
background-color: transparent;
transition: all 0.5s ease-in-out;
margin: auto;
margin-top: 0;
opacity: 0;
display: none;
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .mediaItem .playBtnWrapper {
width: 7rem;
height: 7rem;
border: 0.2rem solid white;
display: block;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
}
}
.page-template-media #videoWrapper .mediaItem .playBtnWrapper .playBtn {
width: 0;
height: 0;
border: 0;
border-top: 1.75rem solid transparent;
border-bottom: 1.75rem solid transparent;
border-left: 1.75rem solid white;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
left: 0.25ex;
transition: border-left-color 0.5s ease-in-out;
background-color: transparent !important;
padding: 0;
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .mediaItem .playBtnWrapper .playBtn {
border-top: 1.5rem solid transparent;
border-bottom: 1.5rem solid transparent;
border-left: 1.5rem solid white;
left: 0.3ex;
}
}
.page-template-media #videoWrapper .mediaItem .playBtnWrapper:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.page-template-media #videoWrapper .mediaItem .refContent {
position: absolute;
right: 5%;
bottom: 5%;
text-align: left;
padding: 0rem 1.5rem;
border-radius: 0.5rem;
width: auto;
background-color: rgba(0, 0, 0, 0.5);
}
@media only screen and (min-width: 861px) {
.page-template-media #videoWrapper .mediaItem .refContent {
opacity: 0;
transition: opacity 1s ease-in-out;
padding: 1rem 2rem;
}
}
.page-template-media #videoWrapper .mediaItem .refContent p {
color: white;
}
.page-template-media #videoWrapper .mediaItem .closeSquare {
position: absolute;
top: 0.75rem;
right: 1rem;
font-size: 2rem;
color: white;
}
.page-template-media #videoWrapper .videoElement {
cursor: pointer;
}
.page-template-media #videoWrapper .videoElement .refContentTitle {
color: white;
font-size: 2rem;
margin: 0;
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .videoElement .refContentTitle {
font-size: 1.5rem;
}
}
.page-template-media #videoWrapper .videoElement .playerWrapper {
opacity: 0;
position: fixed;
z-index: 1;
transition: all 0.5s ease-in-out;
transform: translateY(-100vh);
top: 4rem;
left: 0;
width: 100vw;
height: 0;
background: black;
will-change: transform;
display: block;
}
.page-template-media #videoWrapper .videoElement .playerWrapper.active {
transform: none;
opacity: 1;
height: calc(100vh - 4rem);
z-index: 2;
padding: 0 3vw 3vw;
}
.page-template-media #videoWrapper .videoElement .playerWrapper.active .closeBtn {
opacity: 1;
}
.page-template-media #videoWrapper .videoElement .playerWrapper .videoInner {
width: 100%;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
@media only screen and (max-width: 860px) {
.page-template-media #videoWrapper .videoElement .playerWrapper .videoInner {
width: 100%;
}
}
.page-template-media #videoWrapper .videoElement .playerWrapper .videoInner video:focus {
outline: 0;
}
.page-template-media #videoWrapper .videoElement .playerWrapper .videoInnerMobile {
margin-bottom: 6rem;
}
@media only screen and (min-width: 861px) {
.page-template-media #videoWrapper .videoElement .playerWrapper .videoInnerMobile {
display: none;
}
}
.page-template-media #videoWrapper .videoElement .playerWrapper video[poster] {
height: 100% !important;
width: 100% !important;
-o-object-fit: cover !important;
object-fit: cover !important;
}
.page-template-media #videoWrapper .videoElement .playerWrapper .player:focus {
outline: 0;
}
.variableColumnsWrapper .variableColumns {
display: flex;
align-items: flex-start;
}
@media only screen and (max-width: 960px) {
.variableColumnsWrapper .variableColumns {
flex-wrap: wrap;
}
}
.variableColumnsWrapper .variableColumns .column {
padding: 0 2.5%;
text-align: inherit;
}
@media only screen and (min-width: 961px) {
.variableColumnsWrapper .variableColumns .column:first-of-type {
padding-left: 0;
}
.variableColumnsWrapper .variableColumns .column:last-of-type {
padding-right: 0;
}
}
@media only screen and (max-width: 960px) {
.variableColumnsWrapper .variableColumns .column {
width: 100% !important;
padding: 0 0 5%;
}
.variableColumnsWrapper .variableColumns .column:last-of-type {
padding-bottom: 0 !important;
}
}
.singleImageWrapper.wrapper {
padding: 8rem 0;
}
@media only screen and (max-width: 860px) {
.singleImageWrapper.wrapper {
padding: 4rem 3rem;
}
}
.singleImageWrapper.wrapper.fullscreen {
padding: 0;
}
@media only screen and (min-width: 861px) {
.singleImageWrapper.wrapper.fullscreen .singleImage {
height: 100vh;
width: 100vw;
}
.singleImageWrapper.wrapper.fullscreen img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
.singleImageWrapper.wrapper.fullscreen img {
width: 100%;
}
.singleImageWrapper.wrapper img {
width: 100%;
max-width: none;
}
#animation {
width: 100vw;
height: auto;
opacity: 1;
background-color: transparent;
text-align: center;
transition: opacity 0.5s ease-in-out;
position: relative;
padding: 8rem 0 4rem;
}
@media only screen and (max-width: 860px) {
#animation {
padding: 3rem 5%;
transition: opacity 0.5s ease-in-out;
}
}
#animation a {
color: black;
text-decoration: none;
font-size: 1.4rem;
font-weight: 500;
transition: all 0.35s ease-in-out;
text-indent: 0rem;
}
@media only screen and (max-width: 860px) {
#animation a {
font-size: 2rem;
font-weight: 400;
}
}
#animation.active .circleDataWrapper {
opacity: 1 !important;
}
#animation.active .circle-path--background circle {
stroke-dashoffset: 0;
}
@media only screen and (max-width: 860px) {
#animation.active .circleCenterContent {
display: none !important;
}
}
#animation.active .circleCenterContent .circleItem {
opacity: 1;
text-indent: 0;
}
@media only screen and (max-width: 860px) {
#animation.active .circleCenterContentMobile {
display: block;
height: auto;
}
}
#animation.active .circleCenterContentMobile .circleItemMobile {
border: 0;
margin: 1rem auto;
display: block;
text-transform: uppercase;
}
#animation.active .circleCenterContentMobile .circleItemMobile:first-of-type {
margin-top: 0;
}
#animation .circleCenterContentMobile {
display: none;
}
#animation .backPhotos {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.8;
background: black;
z-index: -1;
}
#animation .backPhotos .backPhoto {
background: #292929;
}
#animation .backPhotos img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
#animation .videoBg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
@media only screen and (max-width: 860px) {
#animation .videoBg {
display: none;
}
}
#animation .videoBg video {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
#animation h2 {
color: black;
font-size: 4rem;
margin: 0;
}
@media only screen and (max-width: 860px) {
#animation h2 {
color: white;
font-size: 2.2rem;
margin-bottom: 1rem;
}
}
#animation .circleBlock {
position: relative;
}
@media only screen and (max-width: 860px) {
#animation .circleBlock {
margin-top: 0;
}
}
#animation .circleBlock svg {
width: 60rem;
margin: auto;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform-origin: center;
}
@media only screen and (max-width: 860px) {
#animation .circleBlock svg {
display: none;
}
}
#animation .circleBlock svg .circle-outside {
transition: all 0.5s ease-in-out;
transition-delay: 0.75s;
}
#animation .circleBlock svg .circle-center {
transition: all 0.5s ease-in-out;
transition-delay: 0.75s;
}
#animation .circleBlock svg .circlefill-:nth-child(7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-0:nth-child(7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-0:nth-child(-n+7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-1:nth-child(7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-1:nth-of-type(-n+3) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-2:nth-child(7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-2:nth-of-type(-n+4) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-3:nth-child(7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-3:nth-of-type(-n+5) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-4:nth-child(7) circle {
opacity: 1 !important;
}
#animation .circleBlock svg .circlefill-4:nth-of-type(-n+6) circle {
opacity: 1 !important;
}
#animation .circleBlock .circleDataWrapper {
opacity: 0;
transition-delay: 0.5s;
transition: all 0.75s ease-in-out;
}
#animation .circleBlock .circleData, #animation .circleBlock .circleDataStartContent {
text-align: center;
margin: auto;
left: calc(50% - 20rem);
color: white !important;
display: none;
transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 861px) {
#animation .circleBlock .circleData, #animation .circleBlock .circleDataStartContent {
position: absolute;
top: 7.5rem;
width: 40rem;
height: 45rem;
display: block;
opacity: 0;
transition: all 0.35s ease-in-out;
z-index: -1;
}
#animation .circleBlock .circleData.selectedItem, #animation .circleBlock .circleDataStartContent.selectedItem {
opacity: 1;
z-index: 1;
}
}
#animation .circleBlock .circleData h3, #animation .circleBlock .circleDataStartContent h3 {
margin-bottom: 2rem;
color: white !important; font-size: 4rem;
}
#animation .circleBlock .circleData .dataContent, #animation .circleBlock .circleDataStartContent .dataContent {
color: white !important;
}
@media only screen and (min-width: 861px) {
#animation .circleBlock .circleData .dataContent, #animation .circleBlock .circleDataStartContent .dataContent {
position: relative;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
@media only screen and (max-width: 860px) {
#animation .circleBlock .circleData .dataContent, #animation .circleBlock .circleDataStartContent .dataContent {
margin-bottom: 4rem;
}
}
#animation .circleBlock .circleData .dataContent h2, #animation .circleBlock .circleDataStartContent .dataContent h2 {
margin-bottom: 3rem;
color: white !important; }
@media only screen and (max-width: 960px) {
#animation .circleBlock .circleData .dataContent h2, #animation .circleBlock .circleDataStartContent .dataContent h2 {
font-size: 1.4rem;
}
}
#animation .circleBlock .circleData .dataContent .excerpt, #animation .circleBlock .circleDataStartContent .dataContent .excerpt {
margin-bottom: 4rem;
color: white !important;
}
#animation .circle-path--background {
opacity: 0.4; stroke: white;
transition: all 0.75s ease-in-out;
transition-delay: 0.7s;
}
#animation .circle-path--background circle {
stroke-dasharray: 2644;
stroke-dashoffset: 2644;
transition: all 0.75s ease-in-out;
transition-delay: 0.7s;
}
#animation .circle-path.circle-path--fill {
opacity: 1;
stroke-dasharray: 2800;
transition: stroke-dashoffset 0.35s ease-in-out;
stroke: white; stroke-dashoffset: 2800;
}
#animation .circle-path.circle-path--fill.fill-0 {
stroke-dashoffset: 0;
}
#animation .circle-path.circle-path--fill.fill-1 {
stroke-dashoffset: 2277;
}
#animation .circle-path.circle-path--fill.fill-2 {
stroke-dashoffset: 1745;
}
#animation .circle-path.circle-path--fill.fill-3 {
stroke-dashoffset: 1215;
}
#animation .circle-path.circle-path--fill.fill-4 {
stroke-dashoffset: 695;
}
#animation .circle-path circle {
fill: none;
fill: rgba(0, 0, 0, 0.1);
stroke-width: 3;
stroke: #fff;
stroke-miterlimit: 10;
}
#animation .circle-dot {
position: relative;
cursor: pointer;
pointer-events: none;
}
#animation .circle-dot .circle-outside {
fill: none;
stroke-width: 2;
stroke: #fff;
opacity: 0;
stroke-miterlimit: 10;
}
#animation .circle-dot .circle-center {
fill: #fff;
stroke: none;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
#animation .button {
color: white !important;
border-color: white !important;
}
#animation .button:hover {
background-color: rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 960px) {
#animation .button {
padding: 0.5rem 1rem 0.7rem !important;
font-size: 16px !important;
}
}
@media only screen and (min-width: 861px) {
#animation .circleCenterContent .circleItems:hover .circleItem a {
opacity: 0.3;
text-indent: -3rem;
}
#animation .circleCenterContent .circleItems .circleItem a:hover {
opacity: 1;
text-indent: 0rem;
}
}
#animation .circleCenterContent .circleItem {
opacity: 0;
text-indent: -3rem;
transition: all 1s ease-in-out;
transition-delay: 0.35s !important;
display: block;
margin: 0;
margin-bottom: 2rem;
color: white !important;
}
@media only screen and (min-width: 861px) {
#animation .circleCenterContent .circleItem {
position: absolute;
}
#animation .circleCenterContent .circleItem:nth-child(1) {
top: -3rem;
text-align: center;
transition-delay: 0.8s;
width: 100%;
left: 0;
}
#animation .circleCenterContent .circleItem:nth-child(2) {
top: 19.5rem;
left: calc(50% + 30rem);
transition-delay: 1s;
}
#animation .circleCenterContent .circleItem:nth-child(3) {
top: 54rem;
left: calc(50% + 19rem);
transition-delay: 1.2s;
}
#animation .circleCenterContent .circleItem:nth-child(4) {
top: 54rem;
right: calc(50% + 19rem);
text-align: right;
transition-delay: 1.4s;
}
#animation .circleCenterContent .circleItem:nth-child(5) {
top: 19.5rem;
right: calc(50% + 30rem);
text-align: right;
transition-delay: 1.6s;
}
}
#animation .circleCenterContent .circleItem a {
font-size: 1.6rem;
font-weight: 600;
text-indent: 0rem;
color: white !important;
}
#animation .circleCenterContent .circleItem a:focus {
outline: 0;
}
#animation .circleCenterContent .circleItem a:hover {
animation-name: glow;
animation-duration: 0.75s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#animation .circleCenterContentMobile {
position: relative;
}
@media only screen and (max-width: 860px) {
#animation .circleCenterContentMobile .dataContent {
margin-bottom: 4rem;
}
#animation .circleCenterContentMobile .dataContent.startContentMobile p {
display: none;
}
}
#animation .tns-outer {
height: 100%;
}
#animation .tns-outer .tns-inner {
height: 100%;
}
#animation .tns-outer .tns-inner .slider {
height: 100%;
}
#animation .tns-outer .tns-inner .slider .backPhoto {
height: 100%;
}
#animation .tns-outer .tns-inner .slider img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#animation .mute {
width: 4rem;
height: 4rem;
position: absolute;
bottom: 3rem;
left: 3rem;
display: block;
display: block;
border-radius: 50%;
text-decoration: none;
background-image: url(//mio.training/wp-content/themes/miotheme/assets/Mute_Icon_white.png);
background-size: 2rem;
background-position: center;
background-repeat: no-repeat;
opacity: 0.7;
}
@media only screen and (max-width: 860px) {
#animation .mute {
display: none;
}
}
#animation .mute:focus {
outline: 0;
}
#animation .mute.unmuted {
background-image: url(//mio.training/wp-content/themes/miotheme/assets/Speaker_Icon_white.png);
}
@keyframes glow {
from {
opacity: 1;
}
to {
opacity: 0.4;
}
}
.numberedList .listHeader {
margin-bottom: 4rem;
}
.numberedList .listHeader:after {
content: "";
display: table;
clear: both;
float: none;
}
.numberedList .listHeader li {
display: list-item;
text-align: left;
width: 25%;
float: left;
font-size: 1.4rem;
padding-right: 2rem;
margin: 0;
margin-bottom: 1rem;
box-sizing: border-box;
}
@media only screen and (max-width: 1024px) {
.numberedList .listHeader li {
width: 33%;
}
}
@media only screen and (max-width: 860px) {
.numberedList .listHeader li {
width: 50%;
}
}
@media only screen and (max-width: 700px) {
.numberedList .listHeader li {
width: 100%;
}
}
.numberedList .listBody {
text-align: left;
}
.numberedList .listBody li {
display: list-item;
font-size: 1.4rem;
}
.numberedList .listBody li h6 {
font-size: 1.4rem;
margin-bottom: 1rem;
}
@media only screen and (max-width: 860px) {
.numberedList .listBody li {
margin-left: 0;
margin-right: 0;
}
}
.numberedList .listList {
font-size: 1.4rem;
}
.numberedList .listList p {
font-size: 1.4rem;
}
.numberedList .listList ul {
list-style-type: disc;
}
.numberedList .listList ul li {
display: list-item;
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.blogsWrapper {
padding-top: 0 !important;
}
.blogsWrapper .blogArticle {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 4rem;
position: relative;
width: 100%;
align-items: center;
min-height: 0;
margin-bottom: 8rem !important;
}
@media only screen and (max-width: 960px) {
.blogsWrapper .blogArticle {
display: block;
margin-bottom: 4rem !important;
}
}
@media only screen and (max-width: 960px) {
.blogsWrapper .blogArticle .rowText {
margin-top: 2rem;
}
}
.blogsWrapper .blogArticle .rowText h2 {
font-size: 3.2rem;
}
@media only screen and (max-width: 960px) {
.blogsWrapper .blogArticle .rowText h2 {
font-size: 2.2rem;
}
}
.blogsWrapper .blogArticle:nth-of-type(even) .rowText {
grid-area: 1;
}
.blogsWrapper .blogArticle .button {
margin-bottom: 0;
}
.hero {
position: relative;
}
@media only screen and (min-width: 961px) {
.hero {
min-height: calc(100vh - 4rem);
}
}
.hero .heroBg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-color: white;
}
.hero .heroBg img {
width: 100%;
height: 100%;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
@media only screen and (max-width: 860px) {
.hero .heroBg img {
-o-object-position: 72%;
object-position: 72%;
opacity: 0.5;
}
}
.hero .heroTextWrapper {
padding: 1rem 5%;
display: grid;
grid-template-columns: 6rem 63%;
grid-column-gap: 4rem;
grid-row-gap: 1rem;
min-height: calc(100vh - 7rem);
align-items: center;
}
@media only screen and (max-width: 960px) {
.hero .heroTextWrapper {
grid-template-columns: 1fr;
grid-template-rows: 4rem 1fr;
width: 80%;
}
}
.hero .heroTextWrapper .heroSocial {
text-align: center;
}
.hero .heroTextWrapper .heroSocial:before, .hero .heroTextWrapper .heroSocial:after {
content: "";
height: 8rem;
border-left: 0.2rem solid black;
width: 0.2rem;
margin: auto;
display: block;
}
@media only screen and (max-width: 960px) {
.hero .heroTextWrapper .heroSocial:before, .hero .heroTextWrapper .heroSocial:after {
display: none;
}
}
@media only screen and (min-width: 961px) {
.hero .heroTextWrapper .heroSocial:before {
margin-bottom: 2rem;
}
.hero .heroTextWrapper .heroSocial:after {
margin-top: 2.8rem;
}
}
@media only screen and (max-width: 960px) {
.hero .heroTextWrapper .heroSocial .links { display: none;
}
}
.hero .heroTextWrapper .heroSocial .links a {
display: block;
font-family: "wpzoom-socicon" !important;
background: transparent;
font-size: 3rem;
text-decoration: none;
color: black;
margin: 2rem auto;
}
.hero .heroTextWrapper .heroSocial .links a.socicon-facebook:hover {
color: #1877F2;
}
.hero .heroTextWrapper .heroSocial .links a.socicon-instagram:hover {
color: #E4405F;
}
.hero .heroTextWrapper .heroSocial .links a.socicon-linkedin:hover {
color: #0077B5;
}
.hero .heroTextWrapper .heroSocial .links a.socicon-youtube:hover {
color: #ff0000;
}
@media only screen and (max-width: 960px) {
.hero .heroTextWrapper .heroSocial .links a {
margin: 0;
margin-right: 2rem;
}
}
@media only screen and (min-width: 961px) {
.hero .heroTextWrapper .heroSocial .links a.socicon-facebook {
margin-bottom: -0.4rem;
}
}
.hero .heroTextWrapper .herotext {
color: black;
}
@media only screen and (max-width: 960px) {
.hero .heroTextWrapper .herotext {
align-self: flex-start;
}
}
.hero .heroTextWrapper .herotext h1, .hero .heroTextWrapper .herotext p {
text-align: inherit;
color: black;
}
.hero .heroTextWrapper .herotext a {
color: black;
text-decoration: none;
}
.hero .heroTextWrapper .herotext .button {
background-color: black;
color: white;
}
.hero .heroTextWrapper .herotext .button:hover {
background-color: transparent !important;
color: black !important;
}
.typewritter .stringsWrapper {
text-align: center;
font-size: 3rem;
}
@media only screen and (max-width: 960px) {
.typewritter .stringsWrapper {
height: 10rem;
}
}
.typewritter #typed {
text-align: center;
font-size: 3rem;
}
@media only screen and (max-width: 860px) {
.typewritter #typed {
font-size: 2.4rem;
}
}
.columnsWithBg {
display: grid;
grid-column-gap: 0rem;
grid-row-gap: 0rem;
}
@media only screen and (max-width: 960px) {
.columnsWithBg {
grid-template-columns: 1fr !important;
}
}
.columnsWithBg .colWithBg {
position: relative;
padding: 2rem;
text-align: center;
min-height: 90vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.columnsWithBg .colWithBg .colBg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
opacity: 0.95;
transition: all 0.5s ease-in-out;
}
@media only screen and (max-width: 960px) {
.columnsWithBg .colWithBg .colBg {
opacity: 0.6;
}
}
.columnsWithBg .colWithBg .colBg img {
width: 100%;
height: 100%;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
}
.columnsWithBg .colWithBg h3 {
font-size: 3rem;
}
.columnsWithBg .colWithBg .coltext {
padding-top: 4rem;
}
@media only screen and (min-width: 961px) {
.columnsWithBg .colWithBg .coltext {
padding-top: 10rem;
}
}
.columnsWithBg .colWithBg .coltext .colContent {
transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 961px) {
.columnsWithBg .colWithBg .coltext .colContent {
max-height: 0;
overflow: hidden;
}
}
.columnsWithBg .colWithBg .coltext .ctaWrapper {
margin-top: 4rem;
margin-bottom: 4rem;
}
.columnsWithBg .colWithBg .coltext .button {
color: white;
border-color: white;
}
.columnsWithBg .colWithBg .coltext .button:hover {
background-color: white;
color: black !important;
}
.columnsWithBg .colWithBg:hover .colBg {
opacity: 0.6;
}
.columnsWithBg .colWithBg:hover .colContent {
max-height: 50rem;
}
.referralsWrapper .referrals .slick-arrow {
display: none !important;
}
.referralsWrapper .referrals .item {
display: grid;
grid-template-columns: 40rem 1fr;
grid-column-gap: 8rem;
grid-row-gap: 4rem;
}
@media only screen and (max-width: 960px) {
.referralsWrapper .referrals .item {
grid-template-columns: 1fr;
align-items: center;
}
}
.referralsWrapper .referrals .item .referralImage {
width: 40rem;
height: 40rem;
border-radius: 50%;
overflow: hidden;
margin: auto;
}
@media only screen and (max-width: 960px) {
.referralsWrapper .referrals .item .referralImage {
width: 30rem;
height: 30rem;
}
}
.referralsWrapper .referrals .item .referralImage img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.referralsWrapper .slick-dots {
padding-top: 2rem;
}
.referralsWrapper .ctaWrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.referralsWrapper .ctaWrapper .button {
margin: 0 auto;
}
.multipleButtons {
padding-bottom: 0 !important;
}
.multipleButtons .buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 860px) {
.multipleButtons .buttons .callToAction {
width: 100%;
}
.multipleButtons .buttons .callToAction:last-of-type .tccButton {
margin-bottom: 0;
}
}
.multipleButtons .buttons .callToAction .tccButton {
margin: 0 2rem 2rem 0;
}
@media only screen and (max-width: 860px) {
.multipleButtons .buttons .callToAction .tccButton {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.faqs.zwart .faqContent:after {
background-color: white !important;
}
.faqs.grijs div, .faqs.wit div {
color: black !important;
}
.faqs .faqItemsWrapper {
display: grid;
grid-template-columns: 1fr;
gap: 5rem;
}
@media only screen and (min-width: 961px) {
.faqs .faqItemsWrapper {
grid-template-columns: 1fr 1fr;
gap: 8rem;
}
}
@media only screen and (max-width: 960px) {
.faqs .faqItemsWrapper {
margin-bottom: 2rem;
}
}
.faqs .faqIntro {
margin-bottom: 7rem;
}
.faqs .faqItem.active .tccMore {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
z-index: -1;
}
.faqs .faqItem.active .faqHiddenContent {
max-height: 100rem;
margin-top: 2.8rem;
}
@media only screen and (max-width: 960px) {
.faqs .faqItem.active .faqHiddenContent {
max-height: 200rem;
}
}
.faqs .faqItem.active .tccLess {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
z-index: 0;
}
.faqs .faqItem .faqContent {
padding-left: 4rem;
position: relative;
}
.faqs .faqItem .faqContent:after {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 6px;
width: 2px;
background-color: black;
}
.faqs .faqItem .faqContent .faqTitle {
margin-bottom: 0;
}
.faqs .faqItem .faqContent p:last-of-type {
margin-bottom: 0;
}
.faqs .faqItem .faqBtns {
position: relative;
min-height: 27px;
}
.faqs .faqItem .faqBtns span { transition: all 0.9s ease-in-out;
display: block;
position: absolute;
top: 0;
left: 0;
font-style: italic;
cursor: pointer;
padding-right: 0.5rem;
font-weight: bold;
}
.faqs .faqItem .faqHiddenContent {
max-height: 0;
overflow: hidden;
transition: all 0.5s ease-in-out;
transition-delay: 0.25s;
margin-bottom: 1rem;
}
.faqs .faqItem .tccMore {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
z-index: 0;
}
.faqs .faqItem .tccLess {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
z-index: -1;
}
@font-face {
font-family: "Didot";
src: url(//mio.training/wp-content/themes/miotheme/fonts/Didot.woff2) format("woff2"), url(//mio.training/wp-content/themes/miotheme/fonts/Didot.woff) format("woff"), url(//mio.training/wp-content/themes/miotheme/fonts/Didot.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Didot";
src: url(//mio.training/wp-content/themes/miotheme/fonts/Didot-Bold.woff2) format("woff2"), url(//mio.training/wp-content/themes/miotheme/fonts/Didot-Bold.woff) format("woff"), url(//mio.training/wp-content/themes/miotheme/fonts/Didot-Bold.ttf) format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Didot";
src: url(//mio.training/wp-content/themes/miotheme/fonts/Didot-Italic.woff2) format("woff2"), url(//mio.training/wp-content/themes/miotheme/fonts/Didot-Italic.woff) format("woff"), url(//mio.training/wp-content/themes/miotheme/fonts/Didot-Italic.ttf) format("truetype");
font-weight: normal;
font-style: italic;
}
html {
font-size: 62.5%;
}
html div, html section {
box-sizing: border-box;
}
html .site-inner {
max-width: none;
padding: 0;
padding-top: 4rem;
}
html .site-inner #genesis-content {
width: 100%;
}
html .site-inner #genesis-content .content {
width: 100%;
}
body {
margin: 0;
padding: 0;
background: black;
color: white;
}
body .post-edit-link, body .genesis-skip-link {
display: none;
}
#app {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#app #appWrapper {
position: relative;
}
h1, h2 {
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
}
h1 {
font-size: 4rem;
font-weight: bold;
}
@media only screen and (max-width: 860px) {
h1 {
font-size: 3rem;
}
}
h1:last-child {
margin-bottom: 0;
}
h2 {
font-size: 4.2rem;
}
@media only screen and (max-width: 860px) {
h2 {
font-size: 3rem;
}
}
h3 {
font-size: 2.8rem;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
}
h4, h5, h6 {
font-size: 1.8rem;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.8rem;
}
.text:last-child h2 {
margin-bottom: 0;
}
.slick-slider .slick-arrow {
z-index: 2; }
.slick-slider .slick-arrow:before {
font-size: 3rem;
}
.slick-slider .slick-arrow {
background-color: rgba(0, 0, 0, 0.7);
color: white;
width: 5rem;
height: 6rem;
border-radius: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 960px) {
.slick-slider .slick-arrow {
width: 4rem;
height: 4rem;
}
}
.slick-slider .slick-arrow:before {
font-family: dashicons;
display: inline-block;
line-height: 1;
font-weight: 400;
font-style: normal;
speak: never;
text-decoration: inherit;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 3rem;
height: 3rem;
font-size: 20px;
vertical-align: top;
text-align: center;
transition: color 0.1s ease-in;
font-size: 3rem;
z-index: 2;
}
.slick-slider .slick-arrow.slick-prev {
left: 0;
}
.slick-slider .slick-arrow.slick-prev:before {
content: "\f340";
}
.slick-slider .slick-arrow.slick-next {
right: 0;
}
.slick-slider .slick-arrow.slick-next:before {
content: "\f344";
}
.slick-slider .slick-dots {
padding-left: 0 !important;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: white;
}
a:focus {
outline: 0;
}
.button {
border: 0.2rem solid black;
padding: 1rem;
font-weight: 600;
color: black;
transition: all 0.5s ease-in-out;
background-color: transparent;
cursor: pointer;
padding: 0.5rem 1rem 0.7rem;
border-radius: 0;
}
.button:hover {
background-color: black;
color: white !important;
}
p {
font-size: 1.8rem;
line-height: 1.4;
}
.site-header {
background-color: black;
color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 4;
}
.site-header .wrap {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
.site-header .wrap .title-area {
padding-top: 0;
padding-top: 0.8rem;
padding-bottom: 0;
}
@media only screen and (max-width: 960px) {
.site-header .wrap .title-area {
padding-top: 1.7rem;
}
}
.site-header .wrap .title-area a {
color: white;
}
.site-header .wrap .nav-primary {
padding-top: 0;
padding-bottom: 0;
}
@media only screen and (max-width: 1200px) {
.site-header .wrap .nav-primary .wrap .menu-item {
margin: 0;
}
}
.site-header .wrap .nav-primary .wrap .menu-item a {
color: white;
outline: 0 !important;
}
@media only screen and (max-width: 960px) {
.site-header .wrap .nav-primary .wrap .menu-item a {
font-size: 1.7rem;
}
}
@media only screen and (min-width: 961px) {
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu-toggle {
display: inline-block;
visibility: visible;
color: white;
right: -1.4rem;
font-size: 1rem;
top: 1ex;
pointer-events: none;
}
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu-toggle:before {
font-size: 1.4rem;
}
}
@media only screen and (min-width: 961px) {
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu {
top: 3.5rem;
padding-top: 0.5rem;
border-top: 0;
}
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu .menu-item:first-child a {
border-top: 1px solid white !important;
}
}
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu .menu-item {
margin: 0;
}
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu .menu-item a {
background-color: black;
}
@media only screen and (min-width: 961px) {
.site-header .wrap .nav-primary .wrap .menu-item .sub-menu .menu-item a:hover {
background-color: white;
color: black;
}
}
@media only screen and (min-width: 960px) {
.site-header .wrap .nav-primary .wpml-ls-current-language .sub-menu-toggle {
display: inline-block;
visibility: visible;
color: white;
right: -1.4rem;
font-size: 1rem;
top: 1ex;
pointer-events: none;
}
.site-header .wrap .nav-primary .wpml-ls-current-language .sub-menu-toggle:before {
font-size: 1.4rem;
}
}
.site-header .menu-toggle {
color: white;
padding: 0.8rem 0;
}
.site-header .sub-menu-toggle {
color: white;
}
.wp-custom-logo .title-area {
max-width: 8rem;
padding-bottom: 1rem;
padding-top: 1rem;
width: 100%;
}
.site-inner article {
margin-bottom: 0 !important;
}
body:not(.has-no-blocks) .startContent {
display: none;
}
.innerPage {
top: 0;
left: 0;
z-index: 4; }
.innerPage:after {
content: "";
display: table;
clear: both;
float: none;
}
.innerPage .startArrow {
position: absolute;
bottom: 12rem;
left: calc(50% - 2rem);
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 960px) {
.innerPage .startArrow {
bottom: 2rem;
}
}
@media only screen and (max-width: 860px) {
.innerPage .startArrow {
display: none;
}
}
.innerPage .startArrow:before {
content: "\f347";
font-family: dashicons;
display: inline-block;
line-height: 1;
font-weight: 400;
font-style: normal;
speak: never;
text-decoration: inherit;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 3rem;
height: 3rem;
font-size: 20px;
vertical-align: top;
text-align: center;
transition: color 0.1s ease-in;
font-size: 3rem;
z-index: 2;
position: relative;
top: 0.05ex;
}
.innerPage li {
font-size: 1.8rem;
}
.innerPage .pageTitle {
text-align: center;
font-family: Didot, serif;
font-weight: 100;
}
.innerPage .flexCols {
background-color: black;
}
.innerPage article {
width: 100vw;
position: relative;
}
@media only screen and (min-width: 861px) {
.innerPage article {
min-height: 90vh;
}
.innerPage article.mediaPage {
min-height: 100vh;
}
}
.innerPage h1 {
font-size: 5.5rem;
}
@media only screen and (max-width: 860px) {
.innerPage h1 {
font-size: 3.5rem;
}
}
.innerPage h1.pageTitle {
text-align: center;
}
.innerPage .pageBg {
font-size: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.innerPage .pageBg img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
transition: height 0.5s ease-in-out;
}
.innerPage .pageBg img.hide {
height: 0;
}
.innerPage .pageBg img.map {
height: 0;
}
.innerPage .pageBg img.map.showMap {
height: 100%;
}
.innerPage .pageBg img.doubleBg {
width: 50%;
}
.innerPage .pageData {
padding-left: 5%;
padding-right: 5%;
margin: auto;
}
@media only screen and (max-width: 860px) {
.innerPage .pageData {
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (max-width: 860px) {
.innerPage .pageData h3 {
text-align: left !important;
}
.innerPage .pageData h3:first-of-type {
margin-top: 0;
}
}
.innerPage .pageData p:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 860px) {
.innerPage .pageData p {
text-align: left !important;
}
}
.innerPage .flexibleLayoutWrapper.thumbnailBg {
background-color: black;
}
.innerPage .flexibleLayoutWrapper .layout {
position: relative;
}
.innerPage .flexibleLayoutWrapper .wrapper {
padding: 8rem;
background-color: black;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .wrapper {
padding: 4rem;
padding: 3rem;
}
}
.innerPage .flexibleLayoutWrapper .wrapper.wit {
background-color: white;
}
.innerPage .flexibleLayoutWrapper .wrapper.wit h1, .innerPage .flexibleLayoutWrapper .wrapper.wit h2, .innerPage .flexibleLayoutWrapper .wrapper.wit h3, .innerPage .flexibleLayoutWrapper .wrapper.wit h4, .innerPage .flexibleLayoutWrapper .wrapper.wit h5, .innerPage .flexibleLayoutWrapper .wrapper.wit h6, .innerPage .flexibleLayoutWrapper .wrapper.wit p, .innerPage .flexibleLayoutWrapper .wrapper.wit a, .innerPage .flexibleLayoutWrapper .wrapper.wit span, .innerPage .flexibleLayoutWrapper .wrapper.wit li {
color: black;
}
.innerPage .flexibleLayoutWrapper .wrapper.wit .button {
color: black;
text-decoration: none;
font-weight: normal;
background-color: white;
background-color: transparent;
border-color: black;
}
.innerPage .flexibleLayoutWrapper .wrapper.wit .button:hover {
color: white !important;
background-color: black !important;
}
.innerPage .flexibleLayoutWrapper .wrapper.grijs {
background-color: #f2f2f2;
}
.innerPage .flexibleLayoutWrapper .wrapper.grijs h1, .innerPage .flexibleLayoutWrapper .wrapper.grijs h2, .innerPage .flexibleLayoutWrapper .wrapper.grijs h3, .innerPage .flexibleLayoutWrapper .wrapper.grijs h4, .innerPage .flexibleLayoutWrapper .wrapper.grijs h5, .innerPage .flexibleLayoutWrapper .wrapper.grijs h6, .innerPage .flexibleLayoutWrapper .wrapper.grijs p, .innerPage .flexibleLayoutWrapper .wrapper.grijs a, .innerPage .flexibleLayoutWrapper .wrapper.grijs span, .innerPage .flexibleLayoutWrapper .wrapper.grijs li {
color: black;
}
.innerPage .flexibleLayoutWrapper .wrapper.grijs .button {
color: black;
text-decoration: none;
font-weight: normal;
background-color: #f2f2f2;
background-color: transparent;
border-color: black;
}
.innerPage .flexibleLayoutWrapper .wrapper.grijs .button:hover {
color: white !important;
background-color: black;
}
.innerPage .flexibleLayoutWrapper .wrapper .button {
color: white;
text-decoration: none;
border: 0.1rem solid white;
font-weight: normal;
background-color: black;
background-color: transparent;
transition: all 0.5s ease-in-out;
margin: 1rem auto 2rem;
display: inline-block;
border: 0.2rem solid white;
padding: 0.5rem 1rem 0.7rem;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .wrapper .button {
margin-bottom: 0;
}
}
.innerPage .flexibleLayoutWrapper .wrapper .button:hover {
color: black !important;
background-color: white;
}
.innerPage .flexibleLayoutWrapper .pageBg {
background-color: white;
background-position: center;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .pageBg {
background-color: #cccccc;
}
}
.innerPage .flexibleLayoutWrapper .pageBg.singleBg {
background-size: cover;
background-repeat: no-repeat;
}
.innerPage .flexibleLayoutWrapper p, .innerPage .flexibleLayoutWrapper h1, .innerPage .flexibleLayoutWrapper h2, .innerPage .flexibleLayoutWrapper h3, .innerPage .flexibleLayoutWrapper h4, .innerPage .flexibleLayoutWrapper h5, .innerPage .flexibleLayoutWrapper span, .innerPage .flexibleLayoutWrapper div {
color: white;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout {
position: relative;
transition: all 0.5s ease-in-out; }
.innerPage .flexibleLayoutWrapper .flexibleLayout:after {
content: "";
display: table;
clear: both;
float: none;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent {
opacity: 1;
margin-top: 0;
background: black;
padding: 0 4rem;
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent {
min-height: calc(100vh - 7rem);
padding-top: 0;
}
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent .pageData {
padding: 4rem 0rem;
}
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent .pageBg {
background-color: transparent;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent .pageData {
background-color: transparent;
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent .pageData {
padding-bottom: 0;
}
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.startContent .pageData h1 {
margin: auto;
padding: 6rem 0;
text-transform: uppercase;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.singleImageWrapper {
padding: 0;
}
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.singleImageWrapper .wrapper {
font-size: 0;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.singleTextLine {
background-color: white;
color: black;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.twoRows {
padding: 0 !important;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.twoRows h2, .innerPage .flexibleLayoutWrapper .flexibleLayout.twoRows h3 {
text-align: left !important;
}
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.twoRows p:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.twoRows p {
text-align: left !important;
}
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .flexibleLayout.twoColumnform {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.addressBlock {
padding: 0 !important;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.videoBlock {
background: black;
}
.innerPage .flexibleLayoutWrapper .flexibleLayout.codeBlock.seen path, .innerPage .flexibleLayoutWrapper .flexibleLayout.codeBlock.seen polyline {
animation: dash 8s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.innerPage .flexibleLayoutWrapper .pageData {
padding: 0rem;
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.innerPage .flexibleLayoutWrapper .twoColumn {
padding: 0;
}
.innerPage .flexibleLayoutWrapper .twoColumn:after {
content: "";
display: table;
clear: both;
float: none;
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .fourCorners .pageData .cornerBlock {
width: 46%;
position: absolute;
}
.innerPage .flexibleLayoutWrapper .fourCorners .pageData .topLeft {
top: 0;
left: 0;
}
.innerPage .flexibleLayoutWrapper .fourCorners .pageData .topRight {
top: 0;
right: 0;
}
.innerPage .flexibleLayoutWrapper .fourCorners .pageData .bottomLeft {
bottom: 4rem;
left: 0;
}
.innerPage .flexibleLayoutWrapper .fourCorners .pageData .bottomRight {
bottom: 4rem;
right: 0;
}
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .middleBlock .pageData {
height: 100vh;
min-height: 60rem;
}
}
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h1 {
margin-top: 0;
}
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h2 {
font-size: 6rem;
font-weight: 600;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h2 {
font-size: 3rem;
}
}
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h3 {
font-size: 4rem;
font-weight: normal;
}
@media only screen and (max-width: 860px) {
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h3 {
font-size: 2.5rem;
}
}
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h4 {
font-size: 3rem;
font-weight: normal;
}
.innerPage .flexibleLayoutWrapper .middleBlock .pageData h5 {
font-size: 2rem;
font-weight: normal;
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .middleBlock .pageData .topContent {
position: absolute;
top: 0;
}
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .middleBlock .pageData .middleContent {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
@media only screen and (min-width: 861px) {
.innerPage .flexibleLayoutWrapper .middleBlock .pageData .bottomContent {
position: absolute;
bottom: 0;
}
}
.innerPage .flexibleLayoutWrapper .galleryBlock {
position: relative;
}
.innerPage .flexibleLayoutWrapper .galleryBlock:after {
content: "";
display: table;
clear: both;
float: none;
}
.wpcf7 .wpcf7-response-output {
background-color: white;
color: black !important;
text-align: center;
margin-top: 0;
}
.wpcf7-form {
margin-bottom: 2rem;
}
.wpcf7-form label, .wpcf7-form span {
font-size: 1.3rem;
}
.wpcf7-form textarea, .wpcf7-form .wpcf7-form-control {
width: 100%;
padding: 0.5rem;
font-size: 1.3rem;
box-sizing: border-box;
}
.wpcf7-form .wpcf7-submit {
background-color: black;
color: white;
transition: all 0.5s ease-in-out;
padding: 1rem 2rem;
display: inline-block;
}
.logo {
position: absolute;
left: 2rem;
bottom: 2rem;
width: 10rem;
height: 6rem;
background-size: contain;
background-image: url(//mio.training/wp-content/themes/miotheme/css/assets/logo_notext.png);
background-repeat: no-repeat;
}
.hidden {
opacity: 0;
}
.fade-in {
animation: fade-in 1.4s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.homePageWrapper {
width: 100vw;
position: fixed;
background: black;
transition: all 0.5s ease-in-out;
}
@media only screen and (max-width: 860px) {
.homePageWrapper {
height: auto;
}
}
.homePageWrapper.activeCircle {
background: white;
}
.homePageWrapper li {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.innerPages .pageData ul li {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.innerPages .pageData ul li:before {
content: "•"; color: white; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }
img {
max-width: 100%;
height: auto;
}
div {
box-sizing: border-box;
}
.specialMenu {
z-index: 101;
padding: 1.1rem 0.8rem 0rem;
padding: 0.9rem 0.8rem 0rem;
background: transparent;
position: fixed;
top: 0.5rem;
left: 0.7rem;
transition: 0.5s ease-in-out;
}
.specialMenu #nav-icon3 {
width: 20px;
height: 20px;
position: relative;
margin: 0px auto;
margin-bottom: 5px;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
will-change: transform;
}
.specialMenu #nav-icon3 span {
display: block;
position: absolute;
height: 1px;
width: 100%;
background-color: white;
opacity: 1;
left: 0;
border-radius: 1px;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
@media only screen and (max-width: 860px) {
.specialMenu #nav-icon3 span {
height: 2px;
}
}
.specialMenu #nav-icon3 span:nth-child(1) {
top: 0px;
}
.specialMenu #nav-icon3 span:nth-child(2) {
top: 6px;
}
.specialMenu #nav-icon3 span:nth-child(3) {
top: 6px;
}
.specialMenu #nav-icon3 span:nth-child(4) {
top: 12px;
}
.wit .specialMenu #nav-icon3 span {
background-color: black;
}
#nav-icon3.open span {
background-color: white !important;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.siteNameSmall {
position: absolute;
left: 2rem;
bottom: 2rem;
width: auto;
color: white;
font-size: 1rem;
}
#sound {
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes glow {
from {
opacity: 1;
}
to {
opacity: 0.8;
}
}
.innerPages:after {
content: "";
display: table;
clear: both;
float: none;
}
.homeWrapper footer {
display: none;
}
footer {
color: white;
background-color: black;
display: block;
padding: 3rem 1rem;
position: relative;
animation-name: fadeIn;
animation-duration: 1.5s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
footer.wit {
color: black;
background-color: white;
}
footer.wit div, footer.wit p, footer.wit a, footer.wit span {
color: black !important;
}
footer.wit .button {
border: 0.1rem solid black;
font-weight: normal;
background-color: white;
}
footer.wit .button:hover {
color: white !important;
background-color: black;
}
footer div, footer p, footer a, footer span {
color: white !important;
}
footer p {
margin: 0 auto;
}
footer .social {
margin-bottom: 1rem;
}
footer .button {
text-decoration: none;
font-weight: normal;
background-color: black !important;
display: inline-block;
border: 0.05rem solid white;
padding: 0.3rem 1rem 0.5rem;
}
footer .button:hover {
color: black !important;
background-color: white;
}
footer .icon {
width: 42px;
font-size: 32px;
font-family: "Ionicons";
display: inline-block;
text-decoration: none;
}
footer .icon:before {
display: block;
}
footer .facebook:before {
content: "\f236";
}
footer .instagram:before {
content: "\f23e";
}
footer .linkedin:before {
content: "\f240";
}
.whatsappme {
position: fixed;
z-index: 99;
right: 20px;
bottom: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 26px;
color: #262626;
transform: scale3d(0, 0, 0);
transition: transform 0.3s ease-in-out;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.whatsappme svg path {
fill: currentColor !important;
}
.whatsappme--show {
transform: scale3d(1, 1, 1);
transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.whatsappme__button {
position: absolute;
z-index: 2;
bottom: 8px;
right: 8px;
height: 60px;
min-width: 60px;
max-width: 95vw;
background-color: #25d366;
color: #fff;
border-radius: 30px;
box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24);
cursor: pointer;
transition: background-color 0.2s linear;
-webkit-tap-highlight-color: transparent;
}
.whatsappme__button:hover {
background-color: #128c7e;
transition: background-color 1.5s linear;
}
.whatsappme--dialog .whatsappme__button {
transition: background-color 0.2s linear;
}
.whatsappme__button:active {
background-color: #075e54;
transition: none;
}
.whatsappme__button svg {
width: 36px;
height: 36px;
margin: 12px 12px;
}
.whatsappme__badge {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: #e82c0c;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
box-shadow: none;
opacity: 0;
pointer-events: none;
}
.whatsappme__badge.whatsappme__badge--in {
animation: badge--in 0.5s cubic-bezier(0.27, 0.9, 0.41, 1.28) 1 both;
}
.whatsappme__badge.whatsappme__badge--out {
animation: badge--out 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 1 both;
}
.whatsappme--dialog .whatsappme__button {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.whatsappme--dialog .whatsappme__button svg {
margin: 12px 10px 12px 14px;
}
#wa_ico, .whatsappme--dialog #send_ico {
display: block;
}
#send_ico, .whatsappme__box {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: calc(100vw - 40px);
max-width: 400px;
min-height: 280px;
padding-bottom: 60px;
border-radius: 32px;
background: #ede4dd url(//mio.training/wp-content/themes/miotheme/css/assets/background.png) center repeat-y;
background-size: 100% auto;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
overflow: hidden;
transform: scale3d(0, 0, 0);
transition: opacity 0.4s ease-out, transform 0s linear 0.3s;
}
.whatsappme--dialog .whatsappme__box {
transition: opacity 0.2s ease-out, transform 0s linear;
}
.whatsappme__header {
display: block;
position: static;
width: 100%;
height: 70px;
padding: 0 26px;
margin: 0;
background-color: #2e8c7d;
color: rgba(255, 255, 255, 0.5);
}
.whatsappme__header svg {
height: 100%;
}
.whatsappme__close {
display: flex;
position: absolute;
top: 18px;
right: 24px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #000;
color: #fff;
text-align: center;
opacity: 0.4;
cursor: pointer;
transition: opacity 0.3s ease-out;
-webkit-tap-highlight-color: transparent;
}
.whatsappme__close:hover {
opacity: 0.6;
}
.whatsappme__close svg {
display: block;
width: 12px;
height: 12px;
margin: auto;
}
.whatsappme__message {
position: relative;
min-height: 80px;
padding: 20px 22px;
margin: 34px 26px;
border-radius: 32px;
background-color: #fff;
color: #4a4a4a;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.whatsappme__message:before {
content: "";
display: block;
position: absolute;
bottom: 30px;
left: -18px;
width: 18px;
height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA1CAYAAADlE3NNAAAEr0lEQVRo3t2aT0gjVxzHf++9mcn8zWhW6bpELWzcogFNaRar7a4tBNy2WATbHpacpdZ6redeZE+9CL02B1ktXsRD/xwsilhoSwsqag/xYK09hCQlmCiTf28vGRnGmZhE183MFx5vmGQy7zO/P/P7PYLAHUIAQCqDAwDPxMREG3IpHL+zs/MZcgkYAgAMAIwOl8lkYm6xGgYAFgAEAGgZHx9/vVwun7nJJTkAEAGgdW9v73NKKXWLSzIA4AEAGQDazs/P/3ALnNEl1a2trY9oRW6wmu6SEgC0ZrPZn9wCp2dIHgCU1dXVtymlZafDIatEksvlfqYGueG9xgOAcnBw8JSa5GR3vIi1aDTaUSwWj5wOZ3RHPUN6U6nUN9RCTnZHDwDI+/v745TSkpPhrOpHcWlpqbdcLieojZwGpseZMDo66svn87/RKnIaGAsAfCAQ8J6dnX1Pr5DjwABAzmazMVqDHAd2enr6La1RjgGLRCJqLpeL0TrUjFDGrMgCAD8/P38vn8//QutUs1pLT/fC5ubmQKFQOKANqNmspbuhBwDEZDL5BaX0lDaoZoK62NxZXFzs1DRthV5TrxrKGFue/v5+KZ1Of1kul5P0BtQUUAAgxOPx9wuFwl/0BvWq3O8C6vDw8F1N036gL0G3ZaVLUEdHRxFN036kL1E3DWMHxAEAPzc3dyedTk+XSqUdegu6CRijy5mBPLOzs2oikfhU07RFSmmG3qKuaxkdxuhy/MzMjDeRSHyiadrz2wYyClUBMh9bzRfAu7u7PX6//z1RFB9zHBcBALUZKoRqUMgEgyvHeHt7+353d/cjQRBGWJZ9jBDqaMYKHKpYBAEAXltbawsGg2FFUd7iOO4hIeQhQuiOEzpdOzCSTCaftLS0fEUIGXbiHiBjU5njVCr1sc/nW6wkDcduS1u1HKRUKv2KMR4ABwvbAWKMA+BwYbsasFgs/uMWuEtxd3x8/J3b4C4Ag8Hg83g8/iyfz//n5IRi1eZzla00HgA8oijyDMNwlFJCCGH0axiGQQAAXq+XyLLMeL1eRlEURpZlRpIkhud5oigK297eLvl8Prm1tVVSFEWSJEkWRVESBMGrqupriqLcFQThLsaYu612n6vUip4KMFv5HJssjhooEi5laoZh0NjYWNvw8PC9np6ejkAg8MDv9w+oqnrfxsNqhgNTh2wE1MGYChyyWGA9RYJVFWTM3MhwjMPhsDw9PT0QDocHOjs731RV9Y1rv+cMlb4Oiy3garWW1b2sPMfceZgHmZqa6pycnPywr6/vA47jfPXAWbU0xOCOqE44u2K8Wl9oBUfMa+rq6hIWFhbGBwcHn9pBohogcRWwRiCRTUiACQ6ZYpxY9JAkFAopy8vLM4FAYKyRrgA1GGf1JperLGgEM4cNG4vF3olGo18TQkT9JsRmAdQw66NsGlbn7Ibdd0um2XzOblz6/ZWVlX8JIb8PDQ090gFJDU+e2sBeZ1hBU9NcqvIQzDMFALq+vp7GGP85MjLyBCHE1tPO1LP4eq4FG/hqnlGyeSiwsbHxfygUOu7t7Y00059JUY3ZHFm8k1lT0cGfnJw8c0ojepWFzd6CMpnM3y8AJPEkZ9khO4IAAAAASUVORK5CYII=);
background-size: 100%;
}
.whatsappme__copy {
position: absolute;
bottom: 4px;
left: 40px;
color: #2e8c7d;
font-size: 11px;
letter-spacing: 0.2px;
opacity: 0.4;
transition: opacity 0.25s;
}
.whatsappme--left .whatsappme__copy {
left: auto;
right: 40px;
}
.whatsappme__copy:hover {
opacity: 0.8;
transition: opacity 0.5s ease-out 0.5s;
}
.whatsappme__copy a, .whatsappme__copy a:active, .whatsappme__copy a:hover {
color: inherit;
text-decoration: none;
}
.whatsappme__copy svg {
width: 40px;
height: 10px;
vertical-align: inherit;
}
.whatsappme--left {
right: auto;
left: 20px;
}
.whatsappme--left .whatsappme__button {
right: auto;
left: 8px;
}
.whatsappme--left .whatsappme__box {
right: auto;
left: 0;
}
@media (max-width: 480px) {
.whatsappme {
bottom: 6px;
right: 6px;
}
.whatsappme--left {
right: auto;
left: 6px;
}
.whatsappme__box {
width: calc(100vw - 12px);
min-height: 0;
}
.whatsappme__header {
height: 55px;
}
.whatsappme__close {
top: 13px;
width: 28px;
height: 28px;
}
.whatsappme__message {
padding: 14px 20px;
margin: 15px 21px 20px;
line-height: 24px;
}
}
@keyframes badge--in {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes badge--out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
@media only screen and (min-width: 861px) {
.whatsappme {
right: 22px !important;
}
}
.whatsappme__button {
height: 40px;
min-width: 40px;
width: 40px;
}
.whatsappme__button svg {
width: 20px;
height: 20px;
margin: 10px 11px 12px 10px !important;
}
#startButton.hide {
display: none;
}
.whatsappme__box {
opacity: 0 !important;
transition: all 0.5s ease-in-out;
transform: scale3d(0, 0, 0);
}
.whatsappme__box.active {
opacity: 1 !important;
transform: scale3d(1, 1, 1);
}
.whatsappme__header svg {
float: left;
}
.whatsappme__message {
text-align: left;
}
.showBox .whatsappme__button {
display: block;
}
.showBox .whatsappme__button svg {
display: block;
position: relative;
}
.showBox #send_ico {
opacity: 1 !important;
transform: inherit;
overflow: visible;
}
@media only screen and (max-width: 960px) {
.home .wpcf7 {
margin-top: -5rem;
}
}
@media only screen and (max-width: 960px) {
.variableColumns .column-2 .wpcf7 {
margin-top: -5rem;
}
}
.active-enter,
.active-leave-to {
opacity: 0;
z-index: -1;
position: fixed;
}
.active-enter-to,
.active-leave {
opacity: 1;
z-index: 2;
position: relative;
}
.active-enter-active,
.active-leave-active {
transition: all 1s ease-in-out;
will-change: transform;
}
.siteLogo {
background-image: url(//mio.training/wp-content/themes/miotheme/css/assets/logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 18rem;
height: 12rem;
margin: 3rem auto 0;
}
@media only screen and (max-width: 860px) {
.siteLogo {
margin: 0 auto;
width: 26rem;
height: 15rem;
}
}
.cta {
position: absolute;
top: calc(50% - 12rem);
text-align: center;
animation-name: fadeIn;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
animation-iteration-count: 1;
left: 5%;
width: 90%;
}
@media only screen and (max-width: 860px) {
.cta {
top: calc(50% - 14rem);
}
}
.cta a {
color: white;
display: block;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
transition: all 0.5s ease-in-out;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
}
.cta .tagline {
font-size: 5.5rem;
text-decoration: none;
}
@media only screen and (max-width: 860px) {
.cta .tagline {
font-size: 4.5rem;
text-align: center;
display: none;
}
}
.cta .siteName {
color: white;
font-size: 1.8rem;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
text-align: left;
}
@media only screen and (max-width: 860px) {
.cta .siteName {
text-align: center;
}
}
.playBtnWrapper {
display: block;
text-align: center;
background-color: transparent;
transition: background-color 0.5s ease-in-out;
margin: auto;
margin-top: 6rem;
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
opacity: 0;
}
@media only screen and (max-width: 860px) {
.playBtnWrapper {
margin-top: 6rem;
}
}
.playBtnWrapper .playBtn {
border: 0.2rem solid black;
padding: 1rem;
font-weight: 600;
color: black;
transition: all 0.5s ease-in-out;
background-color: transparent;
cursor: pointer;
padding: 0.5rem 1rem 0.7rem;
border-radius: 0;
margin: auto;
display: inline-block;
transition: all 0.5s ease-in-out;
animation-name: glow;
animation-duration: 0.7s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
font-size: 1.8rem;
font-weight: 600;
border-color: white;
background-color: white;
padding: 0.4rem 0.8rem 0.5rem;
font-weight: 400;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.playBtnWrapper .playBtn:hover {
background-color: black;
color: white !important;
}
.playBtnWrapper .playBtn:hover {
color: white !important;
background-color: black;
}
#sound {
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes glow {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
.footerHome {
position: absolute;
bottom: 0;
left: 3rem;
}
@media only screen and (max-width: 860px) {
.footerHome {
left: 0;
width: 100%;
text-align: center;
display: none;
}
}
.footerHome a {
font-size: 1.4rem;
}
@media only screen and (max-width: 860px) {
.footerHome a {
font-size: 1rem;
}
}
.footerHome .tel {
margin-left: 2rem;
text-decoration: none;
margin-bottom: 1rem;
}
.footerHome .tel:before {
content: "";
background-image: url(//mio.training/wp-content/themes/miotheme/css/assets/phone_white.png);
background-size: contain;
background-repeat: no-repeat;
height: 1.5rem;
width: 1.5rem;
display: inline-block;
position: relative;
margin-right: 0.5rem;
top: 0.4ex;
}
@media only screen and (max-width: 860px) {
.footerHome .tel:before {
top: 0.85ex;
}
}
.footerHome .email {
text-decoration: none;
}
.footerHome .email:before {
content: "";
background-image: url(//mio.training/wp-content/themes/miotheme/css/assets/email_icon_white.png);
background-size: contain;
background-repeat: no-repeat;
height: 1.5rem;
width: 1.5rem;
display: inline-block;
position: relative;
margin-right: 0.5rem;
top: 0.45ex;
}
@media only screen and (max-width: 860px) {
.footerHome .email:before {
top: 0.8ex;
}
}
.site-footer {
display: none;
}
body.grey-footer .footer-widgets {
background-color: #f2f2f2;
}
.footer-widgets {
color: black;
padding-left: 0;
padding-right: 0;
}
.footer-widgets .tccButton, .footer-widgets .tccButtonRound {
background-color: black !important;
}
.footer-widgets p, .footer-widgets a, .footer-widgets div {
color: black;
text-decoration: none;
}
.footer-widgets .strong {
font-weight: bold;
}
.footer-widgets .widget_nav_menu li {
display: block;
margin-left: 0;
margin-bottom: 0;
}
.footer-widgets .widget_nav_menu li.strong {
margin-bottom: 1rem;
}
.footer-widgets .wrap {
max-width: none;
}
@media only screen and (min-width: 1060px) {
.footer-widgets .footer-widgets-1 {
padding-left: 10%;
}
}
.footer-widgets .footer-widgets-1 .widget_media_image img {
width: 13rem;
}
@media only screen and (max-width: 960px) {
.footer-widgets .footer-widgets-1 .widget_media_image img {
width: 16rem;
}
}
@media only screen and (min-width: 1060px) {
.footer-widgets .footer-widgets-3 {
padding-right: 10%;
}
}
.footer-widgets .footer-widgets-4 {
width: 100%;
margin-top: 6rem;
margin-bottom: -6rem;
padding: 0;
display: none;
}
.footer-widgets .footer-widgets-4 .widget_text {
margin-bottom: 0 !important;
}
@media only screen and (max-width: 960px) {
.footer-widgets .footer-widgets-4 .widget_text:first-child {
display: none;
}
}
@media only screen and (min-width: 961px) {
.footer-widgets .footer-widgets-4 .widget_text:last-child {
display: none;
}
}
.footer-widgets .footer-widgets-4 img {
margin: 0 auto;
width: 100%;
}
.entry-footer {
display: none;
}
.single-post .wrapper .innerWrapper {
max-width: 90rem !important;
margin-left: auto !important;
margin-right: auto !important;
}
.page-id-43 .footer-widgets-4, .page-id-1443 .footer-widgets-4 {
display: block !important;
}
.zoom-social_icons-list__item:first-of-type {
margin-left: 0 !important;
}
@media only screen and (max-width: 960px) {
.zoom-social_icons-list__item span {
font-size: 2.6rem !important;
padding: 1rem !important;
}
}
.joinchat--show {
z-index: 9901 !important;
}
.grecaptcha-badge {
display: none !important;
}
@media only screen and (max-width: 1360px) and (min-width: 781px) {
.wp-block-columns.early-break {
flex-wrap: wrap !important;
gap: 1rem;
}
.wp-block-columns.early-break > .wp-block-column {
flex-basis: 100% !important;
}
}