/*-----------------------------------------------------------------------------------

    Template Name: Babucare - Children Kindergarten Template
    Template URI: http://tf.itech-theme.com/babucare-preview
    Description: This is Children Kindergarten Template
    Author: itechtheme
    Author URI: https://themeforest.net/user/itechtheme/portfolio
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    1. Home One
        1.1 Header Area
        1.2 Hero Area
        1.3 About Area
        1.4 Course Area
        1.5 Team Area
        1.6 Event Area
        1.7 Feature Blog
        1.8 Testimonial Area
        1.9 Contact Area
       1.10 Footer Area
    2. Home Two
    3. About Us
    4. Teacher Single
    5. Course Details
    6. Event Details
    7. Blog

-----------------------------------------------------------------------------------*/


/*============================================
    1. Home One / 1.1 Header Area
*=============================================*/


/* header top */

#header {
    position: relative;
}

.header-top {
    padding: 8px 0;
}

.ht-social li {
    display: inline-block;
}

.ht-social li a:hover {
    color: #D50A8B;
}

.ht-social li a {
    color: #514f51;
    display: block;
    font-size: 15px;
    margin-right: 12px;
}

.ht-address {
    text-align: right;
}

.ht-address li {
    display: inline-block;
}

.ht-address li a {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #3a393a;
    letter-spacing: 0;
    margin-left: 38px;
}

.ht-address li a:hover {
    color: #D50A8B;
}

.ht-address li a i {
    margin-right: 10px;
}



/* header bottom */

.header-bottom {
    position: absolute;
    left: 0;
    z-index: 999;
    width: 100%;
    border-bottom: 4px solid #fff;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #D50A8B;
}

.sticky-header {
    position: fixed;
    top: 0;
}

.logo a {
    display: inline-block;
}

.main-menu {
    text-align: right;
}

.main-menu nav ul li {
    display: inline-block;
    position: relative;
}

.main-menu nav ul li a {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    padding: 25px 18px;
    position: relative;
    text-transform: capitalize;
}

.main-menu nav>ul>li>a:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 10px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top-color: transparent;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu nav ul li.active>a:before,
.main-menu nav ul li a:hover:before {
    opacity: 1;
    bottom: 0;
}

.main-menu nav .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 2;
    width: 220px;
    background: #fff;
    border-radius: 2px;
    padding: 8px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu nav ul li:hover>.submenu {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.main-menu nav .submenu li {
    display: block;
    text-align: left;
}

.main-menu nav .submenu li a {
    color: #444;
    padding: 6px 15px;
    position: relative;
    margin: 10px 0px;
    font-size: 14px;
}
.main-menu nav .submenu li a:before {
    content: '';
    position: absolute;
    left: 15px;
    bottom: 0;
    height: 2px;
    width: 10px;
    opacity: 0;
    background: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}



/* mobile menu slicknav*/

.slicknav_menu .slicknav_menutxt {
    display: none;
}

.slicknav_menu {
    background: transparent;
    margin-top: 21px;
}

.slicknav_menu .slicknav_icon-bar {
    background-color: #ffffff;
    height: 2px;
    width: 19px;
    margin: 3px 0px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.slicknav_btn {
    background-color: transparent;
    position: relative;
    margin-top: -42px;
    cursor: pointer;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(1px, 7px);
    transform: rotate(45deg) translate(1px, 7px);
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateY(-6px);
    transform: rotate(-45deg) translateY(-6px);
}

.slicknav_menu {
    margin: 10px 0;
    padding: 0;
}

.slicknav_nav {
    background: #202020;
    margin: 0;
    padding: 0;
}

.slicknav_nav a:hover {
    background: #fefefe;
    border-radius: 0;
}

.slicknav_nav a {
    font-size: 14px;
    letter-spacing: 0.01em;
}

.slicknav_nav .slicknav_arrow {
    float: right;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row:hover .slicknav_arrow {
    border-radius: 0;
    background-color: #3c3333;
}



/*============================================
    END Header Area
*=============================================*/


/*============================================
    1.2 Hero Area
*=============================================*/

.hero-area {
    height: 370px;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 72px;
    background: url(/i/logomatten.png) center/cover no-repeat;
}
.hero-area:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background: #272727;
}
.hero-content h2 {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    line-height: 64px;
    margin-bottom: 27px;
}

.hero-content p {
    font-size: 16px;
    color: #fff;
}

.dft_btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    padding: 12px 42px;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    margin-bottom:5px;
}

.dft_btn:hover {
    color: #fff;
}

.dft_btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.dft_btn:hover:after {
    background: #444;
}

.hero-content a {
    margin-top: 50px;
}

/*============================================
    END Hero Area
*=============================================*/


/*============================================
    1.3 About Area
*=============================================*/

.section-title {
    margin-bottom: 50px;
    position: relative;
}

.section-title h2 {
    font-size: 35px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 23px;
}

.section-title h2 span {
    color: #D50A8B;
    font-family: 'Rubik', sans-serif;
}

.section-title p {
    font-size: 17px;
    font-weight: 400;
    color: #3f3e3f;
}

.abt-content a {
    margin-top: 30px;
}
.abt-content table{width:100%}

.abt-content p{
    margin-bottom: 20px;
}

.abt-img {
    margin-top: 0;
    max-width: 315px;
}

.abt-content ul li {font-size: 14px;line-height: 28px;font-weight:normal;letter-spacing:0}

.abt-content ul li:before, .post-content ul li:before {
    content: "\f00c";
    font-family: FontAwesome;
    color: #d50a8b; /* or whatever color you prefer */
    margin-right: 4px;
}

/*============================================
    END About Area
*=============================================*/


/*============================================
    1.4 Course Area
*=============================================*/

.course-single {
    margin-bottom: 40px;
}

.course-single h2 a {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    line-height: 29px;
    margin-bottom: 6px;
}

.course-single h2 a:hover {
    color: #D50A8B;
}

.cs-thumb {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.course-single .cs-thumb img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.course-single:hover .cs-thumb img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.course-content {
    background: #fff;
    padding: 20px;
    border: 1px solid #efefef;
    border-top: none;
    border-radius: 0 0 0 9px;
}

.course-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -55px 0 20px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.course-details p {
    padding: 10px 0;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    background: #fff;
    -ms-flex-preferred-size: calc(100% * (1/3) - 7px);
    flex-basis: calc(100% * (1/3) - 7px);
    position: relative;
    z-index: 1;
    border-radius: 3px 3px 0 0;
}

.course-details p:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.course-details p:hover:after {
    background: #444;
}

.course-details p span {
    display: block;
    line-height: 21px;
}

.course-content>p {
    font-size: 14px;
    color: #5a5959;
    line-height: 25px;
}

.course-content>span {
    display: block;
    font-size: 14px;
    color: #5a5959;
    letter-spacing: 0;
    line-height: 25px;
    margin-bottom: 15px;
    color: #444;
}

.course-content a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #D50A8B;
    letter-spacing: 0;
    margin-top: 14px;
}

.course-content a:hover {
    color: #000;
}

.course-content a i {
    margin-left: 3px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.course-content a:hover i {
    margin-left: 6px;
}



/*============================================
    END Course Area
*=============================================*/


/*============================================
    1.5 Team Area
*=============================================*/

.single-team {
    border-radius: 10px 10px 3px 3px;
    overflow: hidden;
    border: 3px solid #D50A8B;
    margin-bottom: 40px;
}

.tm-thumb {
    position: relative;
}

.tm-thumb:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-team:hover .tm-thumb:before {
    opacity: 0.65;
}

.tm-social {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tm-social li {
    display: inline-block;
}

.tm-social li a {
    display: block;
    font-size: 18px;
    color: #fff;
    margin: 0 6px;
    opacity: 0;
}

.tm-social li a:hover {
    color: #444;
}

.single-team:hover .tm-social li a {
    margin: 0 4px;
    opacity: 1;
}

.tm-content {
    background: #D50A8B;
    padding: 16px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.tm-content h2 a {
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 23px;
    margin-bottom: 4px;
}

.tm-content h2 a:hover {
    color: #3e3939;
}

.tm-content p {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}



/*============================================
    END Team Area
*=============================================*/


/*============================================
    1.6 Event Area
*=============================================*/

.event-single {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
}

.event-content {
    position: absolute;
    left: 0;
    bottom: -30px;
    background: rgba(255, 189, 10, 0.87);
    padding: 30px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.event-single:hover .event-content {
    bottom: 0;
}

.event-content h2 a {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 5px;
    display: inline-block;
}

.event-content h2 a:hover {
    color: #444;
}

.event-content strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    font-style: italic;
    margin-bottom: 14px;
}

.event-content p {
    color: #fff;
    font-size: 14px;
    line-height: 26px;
}

.event-content>a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    margin-top: 15px;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.event-single:hover .event-content a {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.event-content a i {
    color: #ddd;
    margin-left: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.event-content a:hover i {
    color: #fff;
    -webkit-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
}



/*============================================
    END Event Area
*=============================================*/


/*============================================
    1.7 Feature Blog
*=============================================*/

.single-blog {
    margin-bottom: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.post-thumb {
    position: relative;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.post-thumb img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-blog:hover .post-thumb img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.post-time {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2;
    background: #D50A8B;
    padding: 11px 10px;
    border-radius: 2px;
}

.post-time span {
    display: block;
    text-align: center;
    line-height: 26px;
    color: #fff;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 13px;
}

.post-time span:last-child {
    font-size: 34px;
    line-height: 33px;
    font-weight: 700;
    margin-top: 5px;
}

.post-content {
    padding: 18px 25px 40px;
}

.blog-meta {
    margin-bottom: 12px;
}

.blog-meta li {
    display: inline-block;
    font-size: 14px;
    color: #635f5f;
    letter-spacing: 0;
    margin-right: 16px;
    font-weight: 500;
}
.blog-meta li span{
    color: #FF0000;
}

.blog-meta li i {
    margin-right: 4px;
}

.post-content h2 a {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    line-height: 34px;
    margin-bottom: 15px;
}

.post-content h2 a:hover {
    color: #D50A8B;
}

.post-content p {
    color: #777;
}

.post-content>a {
    margin-top: 40px;
}



/*============================================
    END Feature Blog
*=============================================*/


/*============================================
    1.8 Testimonial Area
*=============================================*/

.testimonial-area {
    position: relative;
    z-index: 1;
}

.testimonial-area:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.95;
    background: #D50A8B;
}

.tst-item {
    text-align: center;
    border: 1px solid #fff;
    padding: 0 30px 60px;
    margin-top: 45px;
}

.tst-thumb {
    height: 90px;
    width: 90px;
    margin: -45px auto 20px;
    border-radius: 50%;
    overflow: hidden;
}

.tst-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    margin-bottom: 2px;
}

.tst-item span {
    display: block;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    font-style: italic;
    margin-bottom: 19px;
    font-family: 'Rubik', sans-serif;
}

.tst-item p {
    font-size: 14px;
    color: #ffffff;
    line-height: 26px;
}


.ttl-white h2 span {
    color: #fff;
}

.ttl-white p {
    color: #fff;
}

.ttl-white span.ttl {
    color: #fff;
}

.ttl-white span.ttl:before {
    background-color: #fff;
}



/*============================================
    END Testimonial Area
*=============================================*/


/*============================================
    1.9 Contact Area
*=============================================*/

.contact-form h4 {
    font-size: 24px;
    font-weight: 700;
    color: #d50a8b;
    letter-spacing: 0;
    margin-bottom: 12px;
}

.contact-form p {
    font-size: 20px;
    font-weight: 700;
    color: #646464;
    margin-bottom: 50px;
}

.contact-form form input,
.contact-form form textarea,
.contact-form form button {
    height: 50px;
    width: 100%;
    margin-bottom: 20px;
    padding-left: 15px;
    letter-spacing: 0;
    border: 1px solid;
    color: #444;
}

.contact-form form textarea {
    height: 164px;
    padding-top: 12px;
}

.contact-form form button {
    margin-bottom: 0;
    padding: 0;
    height: 56px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    width: 208px;
    background: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    border-radius:3px;
}

.contact-form form button:hover {
    background: #646464;
}

.contact-address {
    padding-left: 40px;
}

.cnt-single {
    margin-bottom: 35px;
}

.cnt-single h4 {
    font-size: 21px;
    font-weight: 700;
    color: #D4138E;
    letter-spacing: 0;
    margin-bottom: 10px;
}

.cnt-single h4 i {
    font-size: 15px;
    height: 30px;
    width: 30px;
    background: #D4138E;
    color: #fff;
    text-align: center;
    line-height: 30px;
    margin-right: 14px;
}

.cnt-single p {
    font-size: 15px;
    font-weight: 400;
    color: #646464;
}

.cnt-single p span.line_break {
    display: block;
}



/*============================================
    END Contact Area
*=============================================*/


/*============================================
    1.10 Footer Area
*=============================================*/

.footer-top {
    position: relative;
    z-index: 1;
}

.widget {
    margin-bottom: 50px;
}

.footer-top .widget {
    margin-bottom: 0px;
}

.footer-top:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    background: #000;
}

.widget-company a {
    display: inline-block;
    margin-bottom: 26px;
}

.widget-company ul li {
    font-size: 16px;
    color: #fcfcfc;
    letter-spacing: 0;
    margin: 17px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 28px;
}

.widget-company ul li a {color:#FFF}

.widget-company ul li i {
    min-width: 26px;
    margin-top: 6px;
}

.widget-company form {
    position: relative;
    margin-top: 35px;
}

.widget-company form input {
    height: 60px;
    background: #4f4f4f;
    color: #fff;
    letter-spacing: 0;
    padding-left: 15px;
    border: none;
    width: 100%;
}

.widget-company form input::-webkit-input-placeholder {
    color: #fff;
}

.widget-company form input::-moz-placeholder {
    color: #fff;
}

.widget-company form input:-ms-input-placeholder {
    color: #fff;
}

.widget-company form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 70px;
    background: #D50A8B;
    border: none;
    color: #fff;
    outline: none;
}

.fwidget-title {
    font-size: 23px;
    font-weight: 700;
    color: #fcfcfc;
    letter-spacing: 0;
    line-height: 38px;
    margin: 7px 0 37px;
}

.twt-post {
    border: 1px solid #2b2c2c;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.twt-post p {
    color: #ffffff;
    line-height: 26px;
}

.twt-post a {
    color: #D50A8B;
    letter-spacing: 0;
    display: inline-block;
}

.twt-post span {
    display: block;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0;
    margin-top: 5px;
}

.twt-post span i {
    margin-right: 8px;
}

.ft-list-item li a {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #fcfcfc;
    letter-spacing: 0;
    margin: 22px 0;
    position: relative;
    padding-left: 15px;
}

.ft-list-item li a:hover {
    color: #D50A8B;
}

.ft-list-item li a:before {
    content: '\f105';
    position: absolute;
    left: 0;
    top: 1px;
    font-family: fontawesome;
    font-size: 19px;
    -webkit-transition: left 0.3s ease 0s;
    transition: left 0.3s ease 0s;
}

.ft-list-item li a:hover:before {
    left: 2px;
}

.footer-bottom {
    padding: 20px 0;
    background: #201f1f;
}

.footer-bottom p {
    color: #fffefe;
    font-size: 15px;
}

.fb-social {
    text-align: right;
}

.fb-social li {
    display: inline-block;
}

.fb-social li a {
    display: block;
    font-size: 16px;
    margin-left: 17px;
    color: #fff;
}



/*============================================
    END Footer Area
*=============================================*/


/*============================================
    2. Home Two
*=============================================*/

.ht-s2 {
    background: #414042;
    position: relative;
    z-index: 12;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.ht-s2 .ht-social {
    text-align: right;
}

.ht-s2 .ht-address {
    text-align: left;
}

.ht-s2 .ht-address li a {
    margin-left: 0;
}

span.search {
    display: inline-block;
    float: right;
    font-size: 18px;
    height: 33px;
    width: 33px;
    background: #fff;
    color: #D50A8B;
    text-align: center;
    line-height: 33px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

span.search:hover {
    background-color: #D50A8B;
    color: #fff;
}



/* header-middle */

.header-middle {
    padding: 24px 0 15px;
}

.h-address-s2 {
    text-align: right;
}

.h-address-s2 li {
    text-align: left;
    display: inline-block;
    margin-left: 90px;
}

.h-address-s2 li:first-child {
    margin-left: 0;
}

.h-address-s2 li i {
    float: left;
    font-size: 39px;
    color: #D50A8B;
    margin-right: 15px;
    margin-top: 9px;
}

.h-address-s2 li h2 {
    overflow: hidden;
    font-size: 21px;
    font-weight: 500;
    color: #414042;
    letter-spacing: 0;
}

.h-address-s2 li h2 span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #414042;
    letter-spacing: 0;
    margin-top: 4px;
}



/* hb-style2 */


.hb-style2 {
    background: #D50A8B;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 11;
}

.hb-style2.sticky-header {
    position: fixed;
    animation: fadeinheader 800ms ease-in-out forwards;
}

@keyframes fadeinheader{
    0%{
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

.header-middle {
    padding: 9px 0 1px;
}

.header-middle ul.ht-social {
    margin-top: 14px;
}
.header-middle .ht-social li a {
    font-size: 18px;
}

/* hero-s2 */

.hero-s2 {
    height: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url(../images/bg/slider-bg2.jpg) center/cover no-repeat;
    position: relative;
    z-index: 1;
}

.hero-s2:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background: #5a5757;
}

.hero-s2 .hero-content {
    text-align: center;
}
.hero-s2 .hero-content h2,
.hero-s2 .hero-content p{
    color: #fff;
}
.hero-s2 .hero-content a {
    margin-top: 54px;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 14px 34px;
    background: #D50A8B;
    color: #fff;
}

.hero-s2 .hero-content a:hover {
    color: #D50A8B;
    background: #ffffff;
}



/* feature service */

.feature-service {
    position: relative;
    margin-top: -132px;
    z-index: 1;
}

.fsvc-single {
    text-align: center;
    box-shadow: 0 9px 38px rgba(0, 0, 0, 0.06);
    padding: 50px 20px;
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg);
    background: #fff;
}

.fsvc-inner {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
}

.fsvc-single .icon {
    height: 105px;
    width: 105px;
    border: 1px solid #D50A8B;
    border-radius: 50%;
    text-align: center;
    line-height: 105px;
    font-size: 44px;
    color: #D50A8B;
    margin: 0 auto 30px;
}

.fsvc-single h2 {
    font-size: 20px;
    font-weight: 500;
    color: #50504e;
    letter-spacing: 0;
    padding-right: 25px;
}


/*about two*/
.abt-s2 .abt-img{
    margin-top: 0;
}


/* contact-address-s2 */

.contact-address-s2 .cnt-single {
    margin-bottom: 60px;
}

.contact-address-s2 .cnt-single:last-child {
    margin-bottom: 0;
}

.cnt-single .icon {
    height: 45px;
    width: 45px;
    text-align: center;
    line-height: 45px;
    border: 1px solid #D50A8B;
    color: #D50A8B;
    float: left;
    margin-right: 40px;
    margin-top: 10px;
    font-size: 22px;
}

.cnt-single p {
    overflow: hidden;
}

.contact-form-s2 {
    padding: 40px;
    box-shadow: 0px 0px 32px 0px rgba( 0, 0, 0, 0.05);
    margin-bottom: -500px;
    position: relative;
    background: #fff;
    z-index: 2;
}

.contact-form-s2 form input,
.contact-form-s2 form textarea {
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
    padding-left: 20px;
    border: 1px solid #D50A8B;
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form input::-webkit-input-placeholder {
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form input::-moz-placeholder {
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form input:-ms-input-placeholder {
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form textarea {
    height: 170px;
    padding-top: 15px;
}

.contact-form-s2 form button {
    width: 100%;
    height: 70px;
    border: none;
    background: #D50A8B;
    letter-spacing: 0;
    font-size: 18px;
    color: #fff;
}



/* footer two */

.ft-s2 {
    padding-top: 200px;
}



/*============================================
    END Home Two
*=============================================*/


/*============================================
    3. About Us
*=============================================*/

.crumbs-area {
    position: relative;
    z-index: 1;
    height: 425px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 100px;
    background: url(../images/bg/crumbs-bg.jpg) center/cover no-repeat;
}

.crumbs-area:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background: #272727;
}

.crumbs-content h2 {
    font-size: 43px;
    font-weight: 700;
    color: #f9f9f9;
    letter-spacing: 0;
    line-height: 47px;
    margin-bottom: 31px;
}

.crumbs-content ul li {
    display: inline-block;
}

.crumbs-content ul li {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-transform: capitalize;
}

.crumbs-content ul li a {
    color: #fff;
    display: block;
    margin-right: 20px;
    position: relative;
}

.crumbs-content ul li a:hover {
    color: #201f1f;
}

.crumbs-content ul li a:before {
    content: '\f105';
    position: absolute;
    right: -18px;
    top: 0;
    font-family: fontawesome;
    color: #fff;
}

.crumbs-content ul li span {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    background: #D50A8B;
    margin-left: 19px;
    padding: 13px 15px;
    display: inline-block;
}

.about-area .section-title{
    margin-bottom: 30px;
}


/*============================================
    END About Us
*=============================================*/


/*============================================
    4. Teacher Single
*=============================================*/

.tdl-img {
    padding: 0 15px 15px 0;
    position: relative;
}

.tdl-img:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border: 1px solid #D50A8B;
    border-top: none;
    border-left: none;
    border-radius: 0 0 13px 0;
}

.tdr-content .section-title h2 {
    margin-bottom: 13px;
}

.tdr-content .section-title {
    margin-bottom: 25px;
}

.tdr-content>p {
    font-size: 16px;
    font-weight: 400;
    color: #484747;
    margin-bottom: 23px;
}

.tdr-content ul.td-address li {
    display: inline-block;
    color: #D50A8B;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    margin-right: 25px;
    font-family: 'Rubik', sans-serif;
}

.tdr-content ul.td-address li span {
    color: #484747;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    font-size: 15px;
}

.teacher-social {
    margin-top: 12px;
}

.teacher-social li {
    display: inline-block;
}

.teacher-social li a {
    display: block;
    font-size: 16px;
    color: #484747;
    margin-right: 12px;
}

.teacher-social li a:hover {
    color: #D50A8B;
}

.teacher-skill {
    margin-top: 50px;
}

.teacher-skill h2 {
    font-size: 24px;
    font-weight: 700;
    color: #D50A8B;
    letter-spacing: 0;
    margin-bottom: 34px;
}

.edu-single {
    margin-bottom: 20px;
    border: 1px solid #2c2c2c;
}

.edu-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    background: #3b393a;
    padding-left: 16px;
    height: 100%;
    padding-top: 7px;
}

.edu-desc p {
    font-size: 15px;
    color: #484747;
    padding: 8px 15px;
}



/* skill-progress-bar */

.skill-progress-bar {
    margin-top: 30px;
}

.progress_bar {
    margin-bottom: 30px;
}

.progress_bar h5 {
    font-size: 18px;
    font-weight: 500;
    color: #4c4c4c;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.pr-area {
    border: 1px solid #6e6e6e;
    border-radius: 20px;
    height: 13px;
    padding: 3px;
}

.pr-bar {
    height: 100%;
    background: #D50A8B;
    border-radius: 20px;
    position: relative;
}

.pr-bar span {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #D50A8B;
    position: absolute;
    right: 0;
    bottom: 19px;
    padding: 0 9px;
    letter-spacing: 0;
}

.pr-bar span:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -18px;
    border: 9px solid #D50A8B;
    border-bottom-color: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}



/*============================================
    END Teacher Single
*=============================================*/


/*============================================
    5. Course Details
*=============================================*/

.csd-thumb {
    border: 2px solid #D50A8B;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 35px;
}
.csd-content h2 a {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 15px;
}
.csd-content h2 a:hover{
    color: #D50A8B;
}

.csd-content>span {
    font-size: 18px;
    font-weight: 500;
    color: #5d5a5a;
    letter-spacing: 0;
    margin-bottom: 32px;
    display: block;
}

.csd-content p {
    font-size: 15px;
    color: #5a5959;
    margin-bottom: 19px;
}

.csd-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin: 37px 0 20px;
}

.csd-content ul li a {
    display: block;
    font-size: 16px;
    color: #5a5959;
    letter-spacing: 0;
    font-style: italic;
    font-weight: 400;
    margin: 14px 0;
}

.csd-content ul li a i {
    color: #444;
    margin-right: 10px;
}



/* sidebar */

.sidebar .widget {
    background: #f5f4f5;
    padding: 30px;
}

.widget.widget-search {
    padding: 0;
}

.sidebar .widget:last-child {
    margin-bottom: 0px;
}

.widget-search form {
    position: relative;
}

.widget-search form input {
    height: 50px;
    width: 100%;
    padding-left: 15px;
    letter-spacing: 0;
    border: 1px solid #D50A8B;
    color: #222;
    border-radius: 2px;
}

.widget-search form input::-webkit-input-placeholder {
    color: #999;
}

.widget-search form input::-moz-placeholder {
    color: #999;
}

.widget-search form input:-ms-input-placeholder {
    color: #999;
}

.widget-search form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background: transparent;
    border: none;
    background: #fff;
    border: 1px solid #D50A8B;
    color: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.widget-search form button:hover {
    background: #D50A8B;
    color: #fff;
}

.sidebar .widget-feature {
    background: #484747;
}

h2.widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #353535;
    letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 18px;
}

.widget-feature h2.widget-title {
    color: #fff;
}

.widget-feature .list li a {
    color: #fff;
    border-top: 1px solid #464343;
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 15px;
}

.widget-feature .list li:first-child a {
    border: none;
}

.list li a {
    display: block;
    font-size: 14px;
    color: #292828;
    letter-spacing: 0;
    margin: 18px 0;
}

.list li a:hover {
    color: #D50A8B;
}

.list li a span {
    float: right;
}

.list li a i {
    margin-right: 10px;
}



/*============================================
    END Course Details
*=============================================*/


/*============================================
    6. Event Details
*=============================================*/

.evd-thumb {
    margin-bottom: 50px;
}

.evd-content h2 a {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 15px;
}

.evd-content h2 a span {
    color: #D50A8B;
}

.evd-content>span {
    font-size: 18px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 32px;
    display: block;
}

.evd-content p {
    font-size: 14px;
    color: #505050;
    margin-bottom: 16px;
}

.evd-content ul {
    margin-top: 40px;
}

.evd-content ul li {
    display: block;
    font-size: 14px;
    color: #505050;
    letter-spacing: 0;
    margin: 18px 0;
}

.evd-content ul li span {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #D50A8B;
    letter-spacing: 0;
    width: 150px;
    font-family: 'Rubik', sans-serif;
}

.evd-content ul li a {
    font-size: 15px;
    color: #3d3d3d;
    margin-right: 10px;
}

.evd-content ul li a:hover {
    color: #D50A8B;
}



/*============================================
    END Event Details
*=============================================*/


/*============================================
    7. Blog
*=============================================*/

.widget-recent-post ul li {
    display: block;
    overflow: hidden;
    margin-bottom: 30px;
}

.widget-recent-post ul li img {
    float: left;
    max-width: 70px;
    margin-right: 15px;
}

.widget-recent-post .content {
    overflow: hidden;
}

.widget-recent-post .content h2 a {
    display: block;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    color: #444;
    margin-bottom: 6px;
}

.widget-recent-post .content h2 a:hover {
    color: #D50A8B;
}

.widget-recent-post .content p {
    font-size: 13px;
    line-height: 21px;
}



/* widget-tags */

.widget-tags ul li {
    display: inline-block;
}

.widget-tags ul li a {
    display: block;
    background: #484747;
    color: #fff;
    padding: 8px 13px;
    margin-bottom: 5px;
    letter-spacing: 0;
    font-weight: 300;
    border-radius: 2px;
    font-size: 13px;
}

.widget-tags ul li a:hover {
    background-color: #D50A8B;
}

.pagination_area {
    margin-top: 20px;
}

.pagination_area ul li {
    display: inline-block;
}

.pagination_area ul li a {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #D50A8B;
    border: 1px solid #D50A8B;
    padding: 10px 17px;
    font-weight: 700;
    margin-right: 4px;
}

.pagination_area ul li.active a,
.pagination_area ul li a:hover {
    background: #D50A8B;
    color: #fff;
}

.post-d-text p {
    color: #5e5d5d;
    margin-bottom: 19px;
}

.post-d-text blockquote {
    border-left: 3px solid #f2f2f2;
    padding: 20px 30px 20px;
}

.post-d-text blockquote p {
    margin: 0;
}

.blog-share {
    margin-top: 40px;
}

.blog-share span {
    font-size: 18px;
    font-weight: 700;
    color: #D50A8B;
    letter-spacing: 0;
    margin-right: 25px;
    font-family: 'Rubik', sans-serif;
}

.blog-share a {
    font-size: 16px;
    color: #514f51;
    margin-right: 7px;
}



/*comment area*/

.comment-area {
    overflow: hidden;
    margin-top: 50px;
}

h4.comment-title {
    font-size: 24px;
    font-weight: 700;
    color: #D50A8B;
    letter-spacing: 0;
    margin-bottom: 30px;
}

h4.comment-title span {
    margin-left: 7px;
}

.comment-info-inner article {
    overflow: hidden;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.comment-thumb {
    float: left;
}

.comment-thumb img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.comment-content {
    overflow: hidden;
    background: #f9f9f9;
    padding: 30px;
}

.comment-content .meta-data h2 {
    font-size: 18px;
    color: #444;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 5px;
}

.comment-content .meta-data span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #565353;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.comment-content .meta-data span i {
    margin-right: 8px;
}

.comment-content p {
    font-size: 14px;
    font-weight: 400;
    color: #5f5a5a;
    letter-spacing: 0;
    line-height: 23px;
    margin-top: 16px;
}

.comment-content a {
    margin-top: 12px;
    display: inline-block;
    color: #D50A8B;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 14px;
}

.comment-content a i {
    margin-right: 8px;
}

.comment-content a:hover {
    color: #000;
}

.children {
    padding-left: 60px;
}



/*leave-comment-area*/

.leave-comment-area form input,
.leave-comment-area form textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding-left: 15px;
    letter-spacing: 0;
    font-weight: 500;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.leave-comment-area form input:focus,
.leave-comment-area form textarea:focus {
    border-color: #D50A8B;
}

.leave-comment-area form textarea {
    height: 120px;
    padding-top: 12px;
}

.leave-comment-area form #c_submit {
    margin-bottom: 0;
    max-width: 120px;
    background-color: #D50A8B;
    text-align: center;
    padding-left: 0;
    color: #fff;
    outline: none;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.leave-comment-area form #c_submit:hover {
    background-color: #333;
}

#google_map {
    height: 550px;
}

#customsize {display:none}
.expand {display:none !important}

#stap1box:checked ~ #stap1 .content {max-height:470px;height:auto;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1 s ease-in-out;}
#stap2box:checked ~ #stap2 .content {max-height:470px;height:auto;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1 s ease-in-out;}
#stap3box:checked ~ #stap3 .content {max-height:770px;height:auto;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1 s ease-in-out;}
.aantalstuks {text-align:center;width:4em}

.expand ~ #stap1 .content, .expand ~ #stap2 .content, .expand ~ #stap3 .content {max-height:0px;overflow:hidden;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.block .button {clear:all;background:#19B81E;font-size:1em;line-height:2em;text-align:center;display:inline-block;width:5em;margin-right:1em}
label {cursor:pointer}

#colors input {display:none;visibility:hidden}
#colors label {color:transparent;background:#FF0000;display:inline-block;width:4em;margin-right:0.75em;font-size:0.5em;text-align:center;border:1px solid #000;}
#colors input[type="radio"]:checked+label {border:1px solid #D50A8B;color:#000;transform: rotateY(360deg);transition: all 1s ease;webkit-transition: all 1s ease}

#orientatie input[type="radio"] {display:none;visibility:hidden}
#orientatie label {border:5px solid #000;background:#FF0000;color:#FFF;font-size:0.5em;display:inline-block;text-align:center;vertical-align:middle;opacity:0.5;filter: alpha(opacity=50);}
#orientatie .vierkant {height:8em;width:8em;line-height:8em}
#orientatie .horizontaal {height:8em;width:10em;line-height:8em}
#orientatie .verticaal {height:10em;width:8em;line-height:10em}
#orientatie input[type="radio"]:checked+label {color:#000;opacity:1;filter: alpha(opacity=100);}
#matvb, #matvbquick {object-fit:scale-down;margin:0px auto;padding:auto;width:120px;height:160px;background:#000000;border:5px solid #000}
#preview {line-height:579px;overflow:hidden;background:url("/i/indoor.png");display:block;width:389px;height:579px;vertical-align:middle}
.offerteproduct {height:3em;border-bottom:1px solid #CCC}

input[type="file"], input[type="submit"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
#error {
 content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: #D50A8B;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

[type="file"] + label, [type="button"] + label {
  background-color: #000;
  border-radius: 4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  height: 4rem;
  line-height: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  transition: background-color 0.3s;
}
[type="file"]:focus + label,
[type="file"] + label:hover {
    background-color: #f15d22;
}

[type="file"]:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

#productlijst tr:nth-child(2n+1) {background:#EEE;}
table tr:first-child {margin-left:0.25em}
table tr th {background:#D50A8B;height:3em;font-weight:bolder;color:#FFF}
#verzendkosten td:nth-child(5), #verzendkosten td:nth-child(6) {border-bottom:1px solid #CCC}
#productlijst tr td input {width:3em;text-align:center;margin-left:0.25em}
select {text-align:center;height:2.25em}
table tr:last-child, #verzendkosten, table tr {background:#FFF;height:3em}

#offset {margin-top:3em}

.pricing{
  display: block;
        overflow-x: auto;
        white-space: nowrap;
}

#totalemat, #logo {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}

input[name='orientatiecheck']:checked ~ #totalemat {
    transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

input[name='orientatiecheck'] ~ #totalemat #logo {
   margin: 0px;
   color:#FFF;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

input[name='orientatiecheck']:checked ~ #totalemat #logo {
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}


.pricing th {text-align:center}
.pricing td {width:54em;padding:0 0.5em}
.pricing td {border-right:1px solid #CCC}
.pricing td:last-child {border-right:none}
.pricing tr:hover td {background:#EEE}
#layer {display:none;left:0;top:0;position:fixed;width:100%;height:100%;z-index:10000;background-color:rgba(0,0,0,0.5)}
#box {background-color:#FFF;width:96vw;height:90vh;max-width:48vw;margin:10px auto}
#box > div {margin:10px}
#centered {text-align:center;overflow:hidden;margin:0px auto}
#matvbquick {display:inline-block;background:url('/i/textuur.png') #000;text-align:center;-webkit-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;display: table-cell; vertical-align: middle;}
#matvbquickamt {text-align:center;width:60px}
#lengtetxt {transform: rotate(90deg);transform: rotate(90deg);margin-left: 100px;top: 100px;position: relative}
#breedtetxt {width:120px}
#totalemat {width:170px}
#shippinglogo {height:2em}

@media only screen and (max-width: 480px) {
#offset {margin-top:-2em}
#box {background-color:#FFF;width:100%;height:100%;max-width:100%;margin:0px auto}
#box > div {margin:0px 10px 10px 10px;border-bottom:100px solid #FFF}
#layer {position:absolute;top:0;left:0}
}

#voorbeeldaanvraag .label {display:inline-block;width:8em}
#box div h2 {padding-top:10px}

.delete {color:#d50a8b}
.delete:hover {color:#000}
.bubble {background:#d50a8b;border-radius:3px;color:#FFFFFF;line-height:2em;padding:0 0.5em}
.bubble * {color:#FFFFFF}
.bubble:hover {color:#FFFFFF}
.bubble span {color:#FFFFFF}
.bubble span:hover {color:#FFFFFF}
.abt-content .nawblok {width:auto}
.uploadlabel {padding:0px 12px}