/*
Theme Name: Mash-up
Theme URI: http://www.verzeilberg.nl/wordpress/theme
Author: Sander Verzeilberg
Author URI: http://www.verzeilberg.nl
Description: Css styles for my love
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: mashup

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@font-face {
    font-family: 'bebas_kairegular';
    src: url('fonts/bebaskai-webfont.woff2') format('woff2'),
        url('fonts/bebaskai-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html, body {
    background-color:#343a40 !important;
}

.container-fluid.content {
    background-color: #fff;
    padding-bottom:5px;
}

.customFont {
    font-family: 'bebas_kairegular';
}


.bg-pink {
    background-color: #333399 !important;
}

.bg-blue {
    background-color: #333399 !important; 
}

.bg-orange {
    background-color: #ff9933 !important;
}

.text-pink {
    color: #333399 !important;
}

.text-blue {
    color: #333399 !important; 
}

.text-orange {
    color: #ff9933 !important;
}

h2 {
    color: #ff6699 !important;
    font-family: 'bebas_kairegular' !important;
    text-transform: uppercase;
}

h3 {
    font-family: 'bebas_kairegular' !important;
    text-transform: uppercase;
}

h3.headerImageTitle {
    font-size:35px;
}

h4 {
    color: #000;
    font-family: 'bebas_kairegular' !important;
    text-transform: uppercase;
}

.wpcf7-submit {
    background-color: #ff9933 !important;
    border: none !important;
    padding:5px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    color:#fff;
    font-family: 'bebas_kairegular';
}

nav.navbar {
    padding-top: 20px;
    padding-bottom: 20px;
}

ul.navbar-nav li.nav-item a.nav-link {
    color:#fff;
    font-size:18px;
}

ul.navbar-nav li.nav-item a.nav-link:hover { 
color: #ff9933;
}


label {
    width:100%;
    font-family: 'bebas_kairegular';
}

#contactformulier textarea {
    resize:none;
}


.contact-btn {
  font-family: 'bebas_kairegular'; 
  font-size:18px !important;
}

/*
 * Footer
 */
footer h5 {
    color:#ffffff;
    font-family: 'bebas_kairegular';
    margin-bottom:0;
}

footer a {
    font-size:18px;
}

footer p {
    font-family: 'bebas_kairegular';
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    #contactformulier input, #contactformulier label {
        width:100% !important;
    }
    
    nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    #contactformulier input, #contactformulier label {
        width:100% !important;
    }
    
        nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
#contactformulier input, #contactformulier label {
        width:100% !important;
    }
    
        nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
    a#logo-mash-up {
        position:absolute;
        left:5%;
        bottom:-49px;
        padding:0 !important;
        margin:0 !important;
    }
    
    #contactformulier {
        width:50%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    a#logo-mash-up {
        position:absolute;
        left:5%;
       bottom:-65px;
        padding:0 !important;
        margin:0 !important;
    }
    
    #contactformulier {
        width:50%;
    }
}