/*-------------------------------------------------*/
/* MAIN */
/*-------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #555555;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

.clearfix {zoom: 1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.link {
    text-decoration: none;
}

.inline-link {
    color: #555;
}

h1 {
    font-size: 400%;
}

h2 {
    font-size: 200%;
}

h3 {
    font-size: 100%;
    text-transform: uppercase; 
}



/*-------------------------------------------------*/
/* NAVIGATION */
/*-------------------------------------------------*/

.navigation {
    width: 100%;
    background-color: #ffffff;
    height: 80px;
    display: inline-block;
    position: fixed;
    z-index: 10;
}

.bwm-nav-menu {
    height: 50px;
    width: 50px;
    background-color: #008ecf;
    float: right;
    margin: 15px 15px 0px 0px;
    cursor: pointer;
    display: none;
}

.nav-line {
    height: 2px;
    width: 30px;
    background-color: #fff;
    margin: 11px 0px 0px 10px;
}

.main-nav {
    float: right;
    margin-right: 15px;
}

.bwm-logo {
    height: 50px;
    width: 157px;
    width: auto;
    float: left;
    margin: 15px 0px 0px 15px;
}

.main-nav li {
    display: inline-block;
    margin-left: 15px;
    margin-top: 15px;
}

.main-nav li a {
    display: inline-block;
    padding: 16px 16px 15px 16px;
    color: #555;
    text-decoration: none;
    text-transform: uppercase;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
}

.main-nav li a:hover,
.main-nav li a:focus,
.main-nav li a:active {
    background-color: #008ecf;
    color: #fff;
}




/*-------------------------------------------------*/
/* SECTIONS */
/*-------------------------------------------------*/

section {
    height: 600px; 
    text-align: center;
    padding-top: 221px;
}

.bwm-section-text {
    display: inline-block;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 80%;
    max-width: 500px;
    margin: 0px 20px 0px 20px;
    border: 10px solid #fff;
    color: #fff;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
}

.bwm-section-text:hover,
.bwm-section-text:focus,
.bwm-section-text:active {
    background-color: #fff;
}

.bwm-section-text.over:hover,
.bwm-section-text.over:focus,
.bwm-section-text.over:active {
    color: rgba(0, 0, 0, 0.8);
}

.bwm-section-text.werk:hover,
.bwm-section-text.werk:focus,
.bwm-section-text.werk:active {
    color: rgba(29, 68, 23, 0.8);
}

.bwm-section-text.contact:hover,
.bwm-section-text.contact:focus,
.bwm-section-text.contact:active {
    color: rgba(87, 2, 41, 0.8);
}

.bwm-section-text.koffie:hover,
.bwm-section-text.koffie:focus,
.bwm-section-text.koffie:active {
    color: rgba(87, 2, 41, 0.8);
}

.header-section,
.about-section,
.work-section,
.contact-section,
.coffee-section {
    background-size: cover;
    background-position: center;
    height: 600px;
}

/*-------------------------------------------------*/
/* HEADER SECTION */
/*-------------------------------------------------*/

.header-section {
    margin-top: 80px;
    background-image: linear-gradient(left, rgba(0, 142, 207, 0.8), rgba(0, 142, 207, 0.8)), url(img/hero-min.jpg);
    background-image: -webkit-linear-gradient(left, rgba(0, 142, 207, 0.8), rgba(0, 142, 207, 0.8)), url(img/hero-min.jpg);
    background-image: -moz-linear-gradient(left, rgba(0, 142, 207, 0.8), rgba(0, 142, 207, 0.8)), url(img/hero-min.jpg);

}

.bwm-hero-text {
    color: #fff;
    margin: 0px 20px;
}

/*-------------------------------------------------*/
/* ABOUT SECTION */
/*-------------------------------------------------*/

.about-section {
    background-image: linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(img/over-min.jpg);
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(img/over-min.jpg);
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(img/over-min.jpg);
}

/*-------------------------------------------------*/
/* WORK SECTION */
/*-------------------------------------------------*/

.work-section {
    background-image: linear-gradient(left, rgba(29, 68, 23, 0.8), rgba(29, 68, 23, 0.8) ), url(img/werk-min.jpg);
    background-image: -webkit-linear-gradient(left, rgba(29, 68, 23, 0.8), rgba(29, 68, 23, 0.8) ), url(img/werk-min.jpg);
    background-image: -moz-linear-gradient(left, rgba(29, 68, 23, 0.8), rgba(29, 68, 23, 0.8) ), url(img/werk-min.jpg);
}

.sub-page-work {
    padding-top: 0px;
    overflow: hidden;
    height: 100%;
    background-color: #000;
}

.work-project {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.work-project.brandt-kaarsen {
    background-image: linear-gradient(left, rgba(49, 49, 49, 0.8), rgba(49, 49, 49, 0.8) ), url(img/brandt-kaarsen.png);
    background-image: -webkit-linear-gradient(left, rgba(49, 49, 49, 0.8), rgba(49, 49, 49, 0.8) ), url(img/brandt-kaarsen.png);
    background-image: -moz-linear-gradient(left, rgba(49, 49, 49, 0.8), rgba(49, 49, 49, 0.8) ), url(img/brandt-kaarsen.png);
}

.work-project.leefblog {
    background-image: linear-gradient(left, rgba(180, 221, 200, 0.8), rgba(180, 221, 200, 0.8) ), url(img/leefblog.png);
    background-image: -webkit-linear-gradient(left, rgba(180, 221, 200, 0.8), rgba(180, 221, 200, 0.8) ), url(img/leefblog.png);
    background-image: -moz-linear-gradient(left, rgba(180, 221, 200, 0.8), rgba(180, 221, 200, 0.8) ), url(img/leefblog.png);
}

.work-project.karstenmedia {
    background-image: linear-gradient(left, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.8) ), url(img/karstenmedia.png);
    background-image: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.8) ), url(img/karstenmedia.png);
    background-image: -moz-linear-gradient(left, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.8) ), url(img/karstenmedia.png);
}

.work-project.superfoodclub {
    background-image: linear-gradient(left, rgba(51, 200, 0, 0.8), rgba(51, 200, 0, 0.8) ), url(img/superfoodclub.png);
    background-image: -webkit-linear-gradient(left, rgba(51, 200, 0, 0.8), rgba(51, 200, 0, 0.8) ), url(img/superfoodclub.png);
    background-image: -moz-linear-gradient(left, rgba(51, 200, 0, 0.8), rgba(51, 200, 0, 0.8) ), url(img/superfoodclub.png);
}

.work-project.walhalla-design {
    background-image: linear-gradient(left, rgba(155, 24, 40, 0.8), rgba(155, 24, 40, 0.8) ), url(img/walhalla-design.png);
    background-image: -webkit-linear-gradient(left, rgba(155, 24, 40, 0.8), rgba(155, 24, 40, 0.8) ), url(img/walhalla-design.png);
    background-image: -moz-linear-gradient(left, rgba(155, 24, 40, 0.8), rgba(155, 24, 40, 0.8) ), url(img/walhalla-design.png);
}

.work-project.buurtkadoos {
    background-image: linear-gradient(left, rgba(0, 139, 199, 0.8), rgba(0, 139, 199, 0.8) ), url(img/buurtkadoos.png);
    background-image: -webkit-linear-gradient(left, rgba(0, 139, 199, 0.8), rgba(0, 139, 199, 0.8) ), url(img/buurtkadoos.png);
    background-image: -moz-linear-gradient(left, rgba(0, 139, 199, 0.8), rgba(0, 139, 199, 0.8) ), url(img/buurtkadoos.png);
}

.work-project.flight-simulator {
    background-image: linear-gradient(left, rgba(255, 146, 1, 0.8), rgba(255, 146, 1, 0.8) ), url(img/flight-simulator.png);
    background-image: -webkit-linear-gradient(left, rgba(255, 146, 1, 0.8), rgba(255, 146, 1, 0.8) ), url(img/flight-simulator.png);
    background-image: -moz-linear-gradient(left, rgba(255, 146, 1, 0.8), rgba(255, 146, 1, 0.8) ), url(img/flight-simulator.png);
}

.work-project.dealdichtbij {
    background-image: linear-gradient(left, rgba(233, 79, 61, 0.8), rgba(233, 79, 61, 0.8) ), url(img/dealdichtbij.png);
    background-image: -webkit-linear-gradient(left, rgba(233, 79, 61, 0.8), rgba(233, 79, 61, 0.8) ), url(img/dealdichtbij.png);
    background-image: -moz-linear-gradient(left, rgba(233, 79, 61, 0.8), rgba(233, 79, 61, 0.8) ), url(img/dealdichtbij.png);
}

.work-project.inspiratiekadoos {
    background-image: linear-gradient(left, rgba(0, 153, 220, 0.8), rgba(0, 153, 220, 0.8) ), url(img/inspiratiekadoos.png);
    background-image: -webkit-linear-gradient(left, rgba(0, 153, 220, 0.8), rgba(0, 153, 220, 0.8) ), url(img/inspiratiekadoos.png);
    background-image: -moz-linear-gradient(left, rgba(0, 153, 220, 0.8), rgba(0, 153, 220, 0.8) ), url(img/inspiratiekadoos.png);
}

.work-project.visagie-hair {
    background-image: linear-gradient(left, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) ), url(img/visagie-hair.png);
    background-image: -webkit-linear-gradient(left, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) ), url(img/visagie-hair.png);
    background-image: -moz-linear-gradient(left, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) ), url(img/visagie-hair.png);
}

.work-project-text {
    display: inline-block;
    padding: 20px;
    border: 10px solid #fff;
    color: #fff;
    margin-top: 108px;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
}

.work-project-text:hover,
.work-project-text:focus,
.work-project-text:active {
    background-color: #fff;
    color: #555;
}

/*-------------------------------------------------*/
/* CONTACT SECTION */
/*-------------------------------------------------*/

.contact-section {
    background-image: linear-gradient(left, rgba(87, 2, 41, 0.8), rgba(87, 2, 41, 0.8) ), url(img/contact-min.jpg);
    background-image: -webkit-linear-gradient(left, rgba(87, 2, 41, 0.8), rgba(87, 2, 41, 0.8) ), url(img/contact-min.jpg);
    background-image: -moz-linear-gradient(left, rgba(87, 2, 41, 0.8), rgba(87, 2, 41, 0.8) ), url(img/contact-min.jpg);
}

.coffee-section {
    background-image: linear-gradient(left, rgba(63, 46, 22, 0.8), rgba(63, 46, 22, 0.8) ), url(img/koffie-min.jpg);
    background-image: -webkit-linear-gradient(left, rgba(63, 46, 22, 0.8), rgba(63, 46, 22, 0.8) ), url(img/koffie-min.jpg);
    background-image: -moz-linear-gradient(left, rgba(63, 46, 22, 0.8), rgba(63, 46, 22, 0.8) ), url(img/koffie-min.jpg);
    padding-top: 85px;
}

.signup-form-section {
    text-align: center;
    margin-bottom: 24px;
}

.signup-form {
    display: inline-block;
    width: 100%;
    max-width: 600px;
    padding: 0px 15px;
}

.name,
.email,
.phone,
.comment {
    color: #fff;
    width: 100%;
    border: none;
    border-bottom: solid 10px #fff;
    height: 60px;
    background-color: transparent;
    margin-bottom: 15px;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    outline: none;
}

.name.error {
    border-bottom: solid 10px red;
}

.comment {
    height: 98px;
    overflow: auto;
    margin-bottom: 25px;
}

textarea {
    resize: none;
    padding-top: 15px;
}

input[type=text],
input[type=email],
input[type=textarea] {
    color: #fff;
}

.send {
    width: 100%;
    height: 60px;
    border: none;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    background-color: #fff;
    color: #555;
}

.send:active,
.send:focus,
.send:hover {
    background-color: #23b0e6;
    color: #fff;
    border: none;
}

input-placeholder {color: #fff; opacity: 0.5;}
::-webkit-input-placeholder {color: #fff; opacity: 0.5;}
:-moz-placeholder {color: #fff; opacity: 0.5;}
::-moz-placeholder {color: #fff; opacity: 0.5;}
:-ms-input-placeholder {color: #fff; opacity: 0.5;}

.message {
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-block;
}

.success {
    background-color: green;
    color: #ffffff;
}

.error {
    background-color: red;
    color: #ffffff;
}

.message-text {
    padding: 23px;
}

/*-------------------------------------------------*/
/* PROJECTS PAGE */
/*-------------------------------------------------*/

.sub-page-projects {
    padding-top: 80px;
    overflow: hidden;
    height: 100%;
    background-color: #fff;
}

.project {
    width: 100%;
    overflow: hidden;
    margin-bottom: -5px;
}

.project-container {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    padding: 100px 20px;
}

.project-container.brandt-kaarsen {
    background-color: #171717;
}

.project-container.leefblog {
    background-color: #99c9b0;
}

.project-container.karstenmedia {
    background-color: #e34141;
}

.project-container.superfoodclub {
    background-color: #7fe45d;
}

.project-container.walhalla-design {
    background-color: #c1273a;
}

.project-container.buurtkadoos {
    background-color: #2ab7f5;
}

.project-container.flight-simulator {
    background-color: #ffc26f;
}

.project-container.dealdichtbij {
    background-color: #ef6f60;
}

.project-container.inspiratiekadoos {
    background-color: #54c7fa;
}

.project-container.visagie-hair {
    background-color:  #9d9d9d;
}

.project-example-image {
    max-width: 700px;
    height: auto;
    width: 100%;
}

.project-title {
    color: #fff;
    margin: 50px 0px 15px 0px;
}

.project-subtitle {
    color: #fff;
}

.project-info {
    color: #fff;
    max-width: 700px;
    margin: 15px 0px 30px 0px;
    display: inline-block;
    line-height: 1.5;
}

.project-text {
    display: inline-block;
    text-decoration: none;
    padding: 20px;
    border: 10px solid #fff;
    color: #fff;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
}

.project-text:hover,
.project-text:focus,
.project-text:active {
    background-color: #fff;
    color: #555;
    text-decoration: none;
}



/*-------------------------------------------------*/
/* FOOTER */
/*-------------------------------------------------*/

.footer-section {
    height: 130px;
    padding: 15px 15px;
    background: linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    overflow: hidden;
}

.footer-content {
    padding: 30px 0px;
    text-align: center;
    color: #fff;
    border: 10px solid #fff;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    margin-bottom: 15px;
}

.footer-content:hover,
.footer-content:focus,
.footer-content:active {
    background-color: #fff;
    color: #555;
}

.footer-content.middle {
    margin-left: 15px;
    margin-right: 15px;
}

/*-------------------------------------------------*/
/* SUBPAGE STYLING */
/*-------------------------------------------------*/

.sub-page-section {
    height: auto;
    margin-top: 80px;
    padding: 210px 15px;
    text-align: center;
    color: #555;
    background-color: #efefef;
}

.about-subpage-section {
    height: auto;
    padding: 210px 15px;
    color: #555;
    text-align: center;
}

.about-subpage-image {
    width: 100%;
    height: auto;
    margin: 25px 0px;
}

.about-what-image {
    width: 60px;
    height: 60px;
    display: inline-block;
    float: left;
}

.about-what-service {
    margin: 7px 0px 25px 20px;
    display: inline-block;
}

.about-subpage-container {
    display: inline-block;
    width: 100%;
    max-width: 1400px;
    text-align: center;
}


.bwm-header-text {
    display: inline-block;
    padding: 20px 50px;
    border: 10px solid #555;
    color: #555;
}

.bwm-subheader-text {
    display: inline-block;
    padding: 20px 50px;
    border: 10px solid #555;
    color: #555;
}

.about-what-container,
.about-who-container {
    width: 100%;
    padding: 0px 50px;

}

.about-what-info,
.about-who-info {
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: left;
    line-height: 1.5;
}

h2 {
    color: #555;
}

p {
    padding: 20px;
    max-width: 550px;
    display: inline-block;
    position: relative;
    line-height: 1.5;
}

/*-------------------------------------------------*/
/* RESPONSIVE */
/*-------------------------------------------------*/

@media (max-width: 768px) {
h1 { font-size: 200%; }
h2 { font-size: 150%; }
.h2-text { margin: 0px 30px;}
section { padding-top: 241px; }
.bwm-section-text { max-width: 400px; }
.bwm-nav-menu { display: block; }
.main-nav { display: none; }
.about-who-container, .about-what-container { width: 100%; padding: 10px; }
}

@media (max-width: 900px) {
.footer-section { height: 360px; }
.footer-content.middle {margin-left: 0px; margin-right: 0px;}
.work-example-image { opacity: 1;}
}


@media (max-width: 1300px) {
.projects-example-image { width: 100%; height: auto; }
.projects-details { padding: 20px 20px 50px 20px;}
.about-what-container { margin-bottom: 50px; }
}


/*------------- RESPONSIVE 2 COLUMNS --------------*/

.col { display: block; float: left;}
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table;}
.group:after { clear:both; }
.span_1_of_2 { width: 50%; }
@media only screen and (max-width: 1000px) { .span_1_of_2 { width: 100%; } }


/*------------- RESPONSIVE 3 COLUMNS --------------*/

.col { display: block; float: left; }
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both; }
.span_1_of_3 { width: 33.33333333%; }
@media only screen and (max-width: 900px) { .span_1_of_3 { width: 100%; } }

/*------------- RESPONSIVE 3A COLUMNS -------------*/

.col { display: block; float: left; }
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both; }
.span_1_of_3a { width: 33.33333333%; }

@media only screen and (max-width: 768px) { .span_1_of_3a { width: 100%; } }


/*------------- RESPONSIVE 4 COLUMNS -------------*/

.col { display: block; float: left; }
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both; }
.span_1_of_4 { width: 25%; }
@media only screen and (max-width: 1000px) { .span_1_of_4 { width: 50%; } }
@media only screen and (max-width: 700px) { .span_1_of_4 { width: 100%; } }