/*
Theme Name: Value Friday
Theme URI: http://valuefriday.nl
Author: Bakker CrossMedia
Author URI: https://bakkercrossmedia.nl/
Description: Value Friday, Business Coaching
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Business, coaching, 
Text Domain: vf
*/

/***** GENERAL CSS *****/

img {width: 100%; height: auto;}
p {font-size: 1.5rem;}

/***** Header homepage *****/

div.container-fluid.homepage {background-color: #E30613; height: 200px;}
div.headerrow {position: relative;}
div.headertext {display: block; position: absolute; top: 30px; left: 100px;}
div.headertext div.kop {color: #fff; font-size: 6rem;}
div.headertext div.subtext {color: #fff;}
div.kop {font-family: 'DINProBold', sans-serif; }
div.subtext {font-family: 'DINProLight', sans-serif; font-size: 4rem;}

/***** Content *****/
div.container.content div.row {padding: 25px 0;}

/***** downloadbutton ****/
button.downloadbtn {color: #fff; background-color: #E30613; border-radius: 20px; padding: 5px 20px; font-weight: 700; margin-bottom: 20px;}


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

	  p {font-size: 2rem;}
	  div.headertext {position:initial;}

}



@media(min-width:992px){
	nav.navbar {margin-bottom: 0;}
	nav.navbar-default {background-color: #fff; border: none;border-radius: 0;}
    nav.main-nav > ul { list-style: none; padding: 0; float: right; margin-top: 40px;}
    nav.main-nav > ul > li { float: left; }
    nav.main-nav > ul > li > a { text-transform: uppercase;  color: #000; padding-right: 1rem; padding-left: 1rem; border-right: 2px solid #e74c3c; font-size: 1.8rem; line-height: 1.4rem; height: 1.4rem; display: block; font-weight: 700; }
    nav.main-nav > ul > li > a:hover,
    nav.main-nav > ul > li > a:active,
    nav.main-nav > ul > li > a:focus { font-size: 1.8rem; color: #E30613; text-decoration: none;}
    nav.main-nav > ul > li:last-child > a { border-right: none; }
   
	/**** submenu - dropdown ****/
	nav.main-nav ul.nav-drop { opacity: 0; visibility: hidden; transform: translateY(-5px); position: absolute; list-style: none; padding: 0; margin-top: 5px; z-index: 999; overflow: hidden; transition: all 0.2s ease-in-out; /*background-color:rgba(255,255,255,0.1) ;*/}
    nav.main-nav > ul > li:hover > ul.nav-drop { opacity: 1; visibility: visible; transform: translateY(0px); }
    nav.main-nav ul.nav-drop > li > a { color: #FFF; text-transform: uppercase; padding: 0.5rem 1rem; display: block;  font-size: 1.8rem; font-weight: 600; background-color:rgba(231,76,60,0.9); text-align: left;}
    nav.main-nav ul.nav-drop > li > a:hover,
    nav.main-nav ul.nav-drop > li > a:active,
    nav.main-nav ul.nav-drop > li > a:focus { font-size: 1.8rem; text-decoration: none; text-align: left; color: rgba(149, 188, 204, 1);}
    nav.main-nav ul.nav-drop > li:first-child > a { padding-top: 0rem; margin-top: 38px; background-color:rgba(231,76,60,0.9); text-align: left; }
    nav.main-nav ul.nav-drop > li:last-child > a { padding-top: 0.5rem;  padding-bottom: 1rem; background-color:rgba(231,76,60,0.9) ;}
	
	

    }



/******** Lettertypes **********/


body { font-family: 'DINProRegular', sans-serif; }
div.single h1 {font-size: 28px; font-weight: 700;}

h1, h2, h3, h4 { font-family: 'DINProBold', sans-serif; }
h2 {font-size: 24px; font-weight: 700; color: #E30613; }
h4 {font-size: 18px; font-weight: 700; color: #5b9bd5; border: 3px solid; display: inline-block; padding: 10px; border-radius: 20px;}


@font-face {
    font-family: 'DINProRegular';
    src: url('fonts/DINProRegular.eot');
    src: url('fonts/DINProRegular.eot') format('embedded-opentype'),
         url('fonts/DINProRegular.woff2') format('woff2'),
         url('fonts/DINProRegular.woff') format('woff'),
         url('fonts/DINProRegular.ttf') format('truetype'),
         url('fonts/DINProRegular.svg#DINProRegular') format('svg');
}


@font-face {
    font-family: 'DINProLight';
    src: url('fonts/DINProLight.eot');
    src: url('fonts/DINProLight.eot') format('embedded-opentype'),
         url('fonts/DINProLight.woff2') format('woff2'),
         url('fonts/DINProLight.woff') format('woff'),
         url('fonts/DINProLight.ttf') format('truetype'),
         url('fonts/DINProLight.svg#DINProLight') format('svg');
}


@font-face {
    font-family: 'DINProBold';
    src: url('fonts/DINProBold.eot');
    src: url('fonts/DINProBold.eot') format('embedded-opentype'),
         url('fonts/DINProBold.woff2') format('woff2'),
         url('fonts/DINProBold.woff') format('woff'),
         url('fonts/DINProBold.ttf') format('truetype'),
         url('fonts/DINProBold.svg#DINProBold') format('svg');
}



@font-face {
    font-family: 'Aller_Rg';
    src: url('fonts/Aller_Rg.eot');
    src: url('fonts/Aller_Rg.eot') format('embedded-opentype'),
         url('fonts/Aller_Rg.woff2') format('woff2'),
         url('fonts/Aller_Rg.woff') format('woff'),
         url('fonts/Aller_Rg.ttf') format('truetype'),
         url('fonts/Aller_Rg.svg#Aller_Rg') format('svg');
}


@font-face {
    font-family: 'Aller_It';
    src: url('fonts/Aller_It.eot');
    src: url('fonts/Aller_It.eot') format('embedded-opentype'),
         url('fonts/Aller_It.woff2') format('woff2'),
         url('fonts/Aller_It.woff') format('woff'),
         url('fonts/Aller_It.ttf') format('truetype'),
         url('fonts/Aller_It.svg#Aller_It') format('svg');
}

@font-face {
    font-family: 'Aller_Bd';
    src: url('fonts/Aller_Bd.eot');
    src: url('fonts/Aller_Bd.eot') format('embedded-opentype'),
         url('fonts/Aller_Bd.woff2') format('woff2'),
         url('fonts/Aller_Bd.woff') format('woff'),
         url('fonts/Aller_Bd.ttf') format('truetype'),
         url('fonts/Aller_Bd.svg#Aller_Bd') format('svg');
}