/* cmsms stylesheet: Bedrijfspresentatie modified: 05/20/17 10:04:35 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "museo-sans";
    font-size: 16px;
}
#main-content {
    width: 100%;
    height: 100%;
    position: relative;
}
.rhenoy-radial {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0093d3+0,0078d3+100 */
    background: rgb(0,147,211); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,147,211,1) 0%, rgba(0,120,211,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,147,211,1) 0%,rgba(0,120,211,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0,147,211,1) 0%,rgba(0,120,211,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0093d3', endColorstr='#0078d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */     
}
.appr_green-radial {
    background: #01a93d;
    background: -moz-radial-gradient(center, ellipse cover,  #01a93d 0%, #01813d 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #01a93d 0%,#01813d 100%);
    background: radial-gradient(ellipse at center,  #01a93d 0%,#01813d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01a93d', endColorstr='#01813d',GradientType=1 );
}
.autoparts-radial {
    background: #ef7d00;
    background: -moz-radial-gradient(center, ellipse cover,  #ef7d00 0%, #ee6000 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #ef7d00 0%,#ee6000 100%);
    background: radial-gradient(ellipse at center,  #ef7d00 0%,#ee6000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef7d00', endColorstr='#ee6000',GradientType=1 );
}
.tsc-radial {
    background: #009e4c;
    background: -moz-radial-gradient(center, ellipse cover,  #009e4c 0%, #007d4c 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #009e4c 0%,#007d4c 100%);
    background: radial-gradient(ellipse at center,  #009e4c 0%,#007d4c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009e4c', endColorstr='#007d4c',GradientType=1 );
}
#top-wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 20%;
    z-index: 1;
}
#company-name-wrapper {
    background-color: #1e1d1d;
    position: absolute;
    color: #fff;
    font-weight: 900;
    left: 0;
    top: 0;
    width: 96%;
    height: 60%;
    text-align: right;
    padding: 0 2%;
    font-size: 250%;
    line-height: 300%;
    animation: bounceInDown 850ms 0s forwards;
}
#keypoints-wrapper {
    position: absolute;
    left: 0;
    top: 60%;
    height: 40%;
    width: 96%;
    padding: 0 2%;
    border-bottom: 1px solid #cbc1cb;
    text-align: right;
    font-size: 140%;
    background-color: #fff;
    opacity: 0;
    animation: bounceInDown 600ms 200ms forwards;
}
#keypoints-wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.keypoint-check:before {
    margin-right: 6px;
    color: #30ce19;
    font-size: 130%;
    vertical-align: baseline;
}
.keypoint {
    display: inline-block;
    vertical-align: middle;
}
.keypoint:after {
    display: inline-block;
    content: "";
    margin: 0 10px;
}
.keypoint:last-child:after {
    display: none;
}
#logo-wrapper {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    left: 5%;
    top: 5%;
    width: 350px;
    height: 350px;
    text-align: center;
    -webkit-box-shadow: 0px 0px 50px -13px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 0px 50px -13px rgba(0,0,0,0.6);
    box-shadow: 0px 0px 50px -13px rgba(0,0,0,0.6);
    
    opacity: 0; /* Start out hidden, let animation take care of the rest */
    animation: zoomInLeft 300ms 900ms forwards;
}
#logo-wrapper:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-right: -0.25em;
}
#logo {
    height: 70%;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.center-wrapper {
    position: absolute;
    width: 100%;
    height: 70%;
    left: 0;
    top: 20%;
    text-align: center;
    overflow: hidden;
    z-index: 0;
}
.center-wrapper:before,
.center-text:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.center-text {
    vertical-align: middle;
    display: inline-block;
    color: #fff;
    padding: 3%;
    width: 80%;
    height: 60%;
    overflow: hidden;
    position: relative;
}
.center-text:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 12px;
    width: 100%;
    background-color: #fff;
    /* Aninamtion declared in template */
}
.center-text-wrapper {
    display: inline-block;
    vertical-align: middle;
    width: 99%;
    transform: translateY(-1000px);
    font-size: 400%;
    font-weight: 900;
}
/* .center-text.active .center-text-wrapper: active states are set in template to be able to use user settings */
@keyframes fadeinoutbottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}
@keyframes stretchOut {
    85%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);        
    }
    from, 7% {
        animation-timing-function: cubic-bezier(0.175, 0.735, 0.000, 1.005)
    }
    from {
        transform: scale(0, 1);
    }
    7%, 85% {
        transform: scale(1,1);
    }
    to {
        transform: translateY(-1000px);
    }
}
@keyframes stretchOutOnce {
    85%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);        
    }
    from, 7% {
        animation-timing-function: cubic-bezier(0.175, 0.735, 0.000, 1.005)
    }
    from {
        transform: scale(0, 1);
    }
    7%, 85% {
        transform: scale(1,1);
    }
    to {
        transform: scale(1,1);
        transform: translateY(0);
    }
}
@keyframes slideInOutBottom {
    from, 10%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);        
    }
    from {
        transform: translateY(3000px);
    }
    10% {
        transform: translateY(0);
    }
    85% {
        transform: translateY(0) scale(1,1);
    }
    90% {
        transform: translateY(0) scale(1,0);
    }
    to {
        transform: translateY(-1000px) scale(1,0);
    }
}
@keyframes slideInBottom {
    from, 10%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);        
    }
    from {
        transform: translateY(3000px);
    }
    10% {
        transform: translateY(0);
    }
    85% {
        transform: translateY(0) scale(1,1);
    }
    90% {
        transform: translateY(0) scale(1,1);
    }
    to {
        transform: translateY(0) scale(1,1);
    }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes shrinkFromBottom {
    from {
        transform: scale(1, 1);
    }    
    to {
        transform: scale(1, 0);
    }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  
  to {
      opacity: 1;
  }
}