@import url('https://fonts.googleapis.com/css?family=Montserrat:100,400,500,600,700,800|Open+Sans&display=swap');
@font-head: 'Montserrat', sans-serif;
@main-color: #9d1e2d;
@main-color-dark: #820000;
@sec-color: #1B75BC;
@background: #f5f5f5;
@wit: #fff;
@dark:  #010103;

i.fa.fa-phone {

        transform: rotateY(180deg);

}


/* Algemene Styling */
h1, h2, h3{margin:0; padding:0; font-family:@font-head;}
body{    line-height: 24px;     font-size: 16px;color: #797979;font-family: Open Sans, sans-serif;}


/* Topbar */
.topbar{
background-color:@main-color; position: absolute; width: 65%;  z-index: 1; display: block;  top: 0px; height: 40px;}
.topbar:after {content: ""; position: absolute; top: 0; right: -3%; background: @main-color; width: 60px; height: 40px; -webkit-transform: skew(-40deg); 
-moz-transform: skew(-40deg); -o-transform: skew(-40deg);  z-index: 0;}

/* rowzero - Header top CTA */
.rowzero{background-color:@sec-color;padding:0px;}
.rowzero #column-1-0{z-index:10;  padding-top: 11px; padding-bottom: 11px;}
.rowzero h3, .rowzero a{margin:0px;font-weight:600;font-size: 13px;line-height: 18px;}
.rowzero h3{z-index: 999;  color: @wit;}
.rowzero #column-1-1{text-align:right; padding-top: 8px; padding-bottom: 8px;}
.rowzero a {color: @wit;}
.rowzero a:hover {text-decoration:underline;}

/* rowone - Header */
.rowone{box-shadow: none; padding: 10px 0px 20px; height: 125px; left: 0; position: relative; top: 0; width: 100%; z-index: 99;}
.rowone #column-2-0{;height:90px; display: table;  -webkit-transition: all 400ms ease; transition: all 400ms ease; margin: 0;}
.rowone .logo {max-height: 75px;}
.rowone .feature-box-holder .fa{float: left; color:@dark; display: block;  background: none;  line-height: 1;  font-size: 24px;  
margin-right: 10px; margin-left: 10px;  -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;  
transition: all 0.3s ease; height: 50px; width: 50px; border: 2px solid @main-color; border-radius: 50%; text-align: center; padding-top: 10px; padding-left: 2px;}
.rowone #column-2-1, .rowone #column-2-2, .rowone #column-2-3{padding-top: 20px; color: @dark;}
.rowone .feature-box-holder h4{font-size: 13px; line-height: 10px; padding-top: 8px; margin-top: 0px; font-weight: 600; color:@dark;}
.rowone .feature-box-holder h4 a{color:@dark;}
.rowone .feature-box-holder p{font-size: 12.2px; line-height: 11px;  font-weight: 400;  margin: 0 0 10px;}

/* rowtwo - CTA Bottom header */
.rowtwo{background: linear-gradient(90deg, transparent 50%, @main-color 50%);  height: 50px;  z-index: 99999;  position: absolute;  width: 100%;  margin-top: -20px;}
.rowtwo #column-3-1{ background-color: @main-color;  height: 50px;   text-align: center; color:@wit;}
.rowtwo #column-3-1:before { content: "";   position: absolute;  top: 0;  left: -2%;  background: @main-color;  width: 120px;  height: 50px;
 -webkit-transform: skew(-40deg); -moz-transform: skew(-40deg);  -o-transform: skew(-40deg);  z-index: 0;}
.rowtwo h3{font-size: 22px; font-weight: 500;   text-transform: none;  line-height: 50px;}

/* rowthree CTA Banner */
.rowthree{background: url("https://www.grondwerkenschagen.nl/lp/resources/images/verhuisserviceveenendaal.nl/portfolio-verhuisservice-verhaaf-002.jpg");
padding: 200px 0px; margin:0px;  background-repeat: no-repeat;  background-size: cover;   background-position: 50% 50%;
}
.rowthree #column-4-0 .rowthree-cta{padding:40px;  background-color: rgba(50,55,60,0.85);  margin-right: 0px;  margin-bottom: 10px;  margin-left: 0px;    border-left: 3px solid @main-color;}
.rowthree #column-4-0 .rowthree-cta h4{font-family: 'Montserrat', sans-serif;  font-size: 24px ; font-weight: 800; color: @wit; line-height: 24px;  
text-transform: uppercase; letter-spacing: 0px;  margin: 0px 0px 10px;}
.rowthree #column-4-0 .rowthree-cta h1{font-family: 'Montserrat', sans-serif; font-size: 60px;  font-weight: 800; color: @wit; line-height: 60px; 
letter-spacing: 0px; margin: 0px 0px 10px;  padding: 0px;}
.rowthree #column-4-0 .rowthree-cta h1 span{color:@main-color;}
.rowthree #column-4-0 .rowthree-cta p{ font-size: 16px;  color: @wit;  line-height: 24px;  text-transform: none;  max-width: 90%;}
.rowthree #column-4-0 .btn{ transition: all 0.3s ease 0s;  min-height: 0px; min-width: 0px;  line-height: 17px;  border-width: 0px; margin: 10px 0px;
padding: 15px 24px 14px; letter-spacing: 2px; font-size: 12px; color: @wit; background-color: @main-color;  text-transform: uppercase; font-weight: 700;}
.rowthree #column-4-0 .btn:hover{background-color: @dark;    color: @wit;}

/* rowfour - Feature items */
.rowfour{color:@wit;}
.rowfour .col-md-4{padding: 50px 50px 0px;}
.rowfour #column-5-0{background-color:@main-color-dark;}
.rowfour #column-5-1{background-color:@main-color-dark;}
.rowfour #column-5-2{background-color:@main-color-dark;}
.rowfour .feature-box-holder .fb-icon{display:inline-block; float:left; padding: 0px 15px; margin-bottom: 140px;}
.rowfour .feature-box-holder .fb-icon i{line-height: 50px; font-size: 50px;}
.rowfour .feature-box-holder .fb-title h3{font-size: 36px; line-height: 44px; font-family: @font-head; margin: 0px; margin-top: 0px;  margin-bottom: 7px;}
.rowfour .feature-box-holder .fb-title:after{position: absolute;  content: ""; height: 2px; width: 35px; margin-left: 0px; background: @wit;}
.rowfour .feature-box-holder .fb-text{margin-top:25px;width:70%;}
.rowfour .feature-box-holder .fb-text{}

/* rowfive - CTA form */
.rowfive{background-color:@dark; color:@wit; }
.rowfive #column-6-0{padding-top:20px; padding-bottom:20px;}
.rowfive #column-6-0 h3 {font-family:@font-head; padding-bottom:12px; line-height:30px;}
.rowfive #column-6-0 h3 span{font-weight:500;}
.rowfive #column-6-0 p, .rowfive #column-6-2 p{font-size: 16px;  line-height: 14px; font-weight: 100;}
.rowfive #column-6-1{background-color:@main-color; padding-top:43px; padding-bottom:43px;}
.rowfive #column-6-2{background-color:@main-color; padding-top:45px; padding-bottom:45px;}
.rowfive #column-6-1 .feature-box i{font-size: 36px; line-height:50px;}
.rowfive #column-6-1 .feature-box .fb-icon.hidden-xs{display:block!important}
.rowfive #column-6-1 .feature-box{border-right:1px solid @wit;}
.rowfive #column-6-2 h3{font-size:20px; font-weight: 500;}

/* Rowsix - Form */
.rowsix #column-7-0, .rowsix .contact-formulier{padding-top:40px; padding-bottom:40px;}
.rowsix #column-7-0 h3{font-weight: 600!important;  font-size: 28px!important;  line-height: 28px!important;  color: #4A4A4A;margin-bottom:20px;}
.rowsix #column-7-0 .small-width{       font-family:@font-head; margin-top: 0px; font-size: 20px; line-height: 25px; font-weight: 400; width:80%; margin-bottom:30px;}
.rowsix #column-7-1{background-color:#f4f6f8; padding-left:0px; padding-right:0px;}
.rowsix .formheader{display:none;}
.rowsix .contact-formulier{padding-left:15px; padding-right:15px;}
.rowsix .contact-formulier .col-xs-3, .rowsix .contact-formulier h3{display:none;}
.rowsix .contact-formulier .col-xs-9{width:100%}
.rowsix .contact-formulier input, .rowsix .contact-formulier textarea{
    display: block;
    height: 34px;
    width: 100%;
    border-radius: 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #e1e3e5!important;
    padding: 25px 10px!important;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.rowsix .contact-formulier textarea{ height: 160px; margin-bottom: 20px;}
.rowsix .contact-formulier .btn{    width: 100%;
    background: #32373c;padding: 14px 24px 14px;
    height: 50px;
    border: none;
    margin-top: 15px;
    font-size: 16px;
    line-height: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;}
.rowsix .contact-formulier .btn:hover{background-color:@main-color;}

/* Rowseven CTA */
.rowseven{padding-top:50px; padding-bottom:50px;background-image: -webkit-linear-gradient(-40deg, @main-color 60%, @sec-color 35%); color:@wit;}
.rowseven .btn{    transition: all 0.3s ease 0s;
    min-height: 0px;
    min-width: 0px;
    line-height: 17px;
    border-width: 0px;
    margin: 10px 0px;
    padding: 14px 24px 14px;
    letter-spacing: 2px;
    font-size: 12px;
    color: @wit;
    background-color: @main-color;
    text-transform: uppercase;
    font-weight: 700;    border-radius: 0px;}
.rowseven .btn:hover{background-color:@dark;}

/* Roweight Header */
.roweight{text-align:center; padding-top:100px;}
.roweight h3{width:60%;margin-left:auto; margin-right:auto; color: @dark; font-weight: 700; font-size: 34px; line-height: 36px;  margin-bottom: 10px;}
.roweight h3:after{    content: "";
    position: absolute;
    width: 60px;
    height: 1px;
    bottom: 0;
    left: calc(50% - 30px);
    border-bottom: 2px solid @main-color;
    bottom: 0px;}

/* Rownine Tekst */
.rownine{margin-top:60px;padding-bottom:100px;}
.rownine h3{color: @dark;margin-bottom:10px; font-weight:600;}

/* Rowten Tekst */
.rowten{padding-top:100px; padding-bottom:100px; background:@background;}
.rowten h3{color: @dark;margin-bottom:10px; font-weight:600;}

/* Roweleven Footer */
.roweleven{background-color:@dark; color:@wit;padding-top: 60px;padding-bottom:60px; }
.roweleven h4{    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 20px;
    font-weight: 600!important;}
.roweleven .feature-box-holder .fa{float: left; color:@wit; display: block;  background: @main-color;  line-height: 1;  font-size: 24px;  
margin-right: 10px; margin-left: 10px;  -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;  
transition: all 0.3s ease; height: 50px; width: 50px; border: 2px solid @sec-color; border-radius: 50%; text-align: center; padding-top: 10px; padding-left: 2px;}
.roweleven #column-2-1, .rowone #column-2-2, .rowone #column-2-3{padding-top: 20px; color: @dark;}
.roweleven .feature-box-holder h5{font-size: 13px; line-height: 10px; padding-top: 8px; margin-top: 0px; font-weight: 600; color:@wit;}
.roweleven .feature-box-holder h5 a{color:@wit;}
.roweleven .feature-box-holder h5 a:hover{text-decoration:underline;}
.roweleven .feature-box-holder h6{font-size: 12.2px; line-height: 11px;  font-weight: 400;  margin: 0 0 10px;}
.roweleven .feature-box-holder {
    margin-bottom: 25px;
}

/* Rowtwelve Copyright */
.rowtwelve{text-align:center; background:@main-color;    padding: 20px 0;}
.rowtwelve a, footer{color:@wit;}
.rowtwelve a:hover{text-decoration:@wit;}

@media(max-width:1200px){
.rowone .feature-box-holder .fa{display:none;}
.rowfive #column-6-1 { padding-top: 54px; padding-bottom: 54px;}
.rowfour .col-md-4 {width: 100%;}
.rowfour .feature-box-holder .fb-icon {  margin-bottom: 50px;}
.rowseven{background-image:none; background-color:@sec-color;}
.rowseven .col-md-10{width:70%;}
.rowseven .col-md-2{width:30%;}
}

@media(max-width:992px){
.rowzero #column-1-0{width:70%}
.rowzero #column-1-1{width:30%;}
.rowone{height:100px;}
.rowone #column-2-0{width: 33.33333333%;}
.rowone #column-2-1{width: 16.66666667%;padding-top:10px;}
.rowone #column-2-2{width: 25%;padding-top:10px;}
.rowone #column-2-3{width: 25%;padding-top:10px;}
.rowtwo #column-3-0, .rowfive #column-6-1, .rowfive #column-6-2{display:none;}
.rowsix .formheader{display:block; background-color:@main-color; color:@wit;padding:45px 15px; }
.rowsix{    padding-bottom: 40px;}
.roweight{padding-top: 80px;}
.rownine{padding-bottom: 80px;}
.rowten{padding-top:80px; padding-bottom:80px;}
.rowten #column-12-0{margin-bottom:40px;}
}
@media(max-width:721px){
.rowzero,.topbar{display:none;}
.rowone{height:170px;}
.rowone #column-2-0 {width:100%}
.rowone #column-2-1{width: 29%;}
.rowone #column-2-2{width: 39%;}
.rowone #column-2-3{width: 32%;}
.hidden-xs, .rowone .feature-box-holder .fa {display: block!important;}
.rowtwo{display:none;}
.rowseven .col-md-10, .rowseven .col-md-2, .roweight h3{width:100%;}
}
@media(max-width:642px){
.rowfour .feature-box-holder .fb-title h3{}
.rowone #column-2-1, .rowone #column-2-2, .rowone #column-2-3{display:none;}
.rowone { height: 100px;}
.rowthree #column-4-0 .rowthree-cta h1{font-size:32px; line-height:32px;}
.rowthree #column-4-0 .rowthree-cta h4{font-size:20px; line-height:20px;}
.rowfour .feature-box-holder .fb-text{width:100%;}
.rowfour .feature-box-holder .fb-icon {margin-bottom: 75px;}
}

@media(max-width:450px){
.rowfour .feature-box-holder .fb-title h3 {
    font-size: 30px;
    line-height: 26px;}
.rowsix #column-7-0 .small-width{width:100%;}
}