/*   
Theme Name: De Zagerij Klantomgeving
Author: De Zagerij ontwerpbureau
Template: esteem
Version: 1.0
*/

/* Apply basic typography styles */
@import url('../esteem/style.css');
@import url('responsive.css');

/* Import font */
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900);


/* Algemene lay-out aanpassingen
----------------------------------------------- */
.icon-search {
	display:none !important;
}

#masthead {
	background: url(images/zaagtand.png) repeat-x;
	background-position: bottom;
	background-color: transparent;
	border-bottom: 0; 
	min-height: 125px;
}

#masthead {
    -ms-transform: skewY(-1.5deg); /* IE 9 */
    -webkit-transform: skewY(-1.5deg); /* Safari */
    transform: skewY(-1.5deg); /* Standard syntax */
    margin-top: -35px;
}

#masthead .inner-wrap {
    -ms-transform: skewY(1.5deg); /* IE 9 */
    -webkit-transform: skewY(1.5deg); /* Safari */
    transform: skewY(1.5deg); /* Standard syntax */
    margin-top: 35px;
}

#main {
    padding-top: 50px;
}

.page-title-bar {
	display: none;
	border: 0
}

#promo-box {
	display: none;
	border: 0
}

#page {
	box-shadow: none;
}

body {
	background-color: #ffffff;
}

.header-logo-image {
	padding-bottom: 30px;
}

/* Navigatie
----------------------------------------------- */
.main-navigation ul li {
    font-size: 16px;
    letter-spacing: 0.01em;
}

.main-navigation a:hover {
	color: #ffffff !important;
}

.main-navigation ul ul a:hover {
	color: #66bbcc !important;
}

/* Dropdown naast items met submenu */
.menu-item-has-children > a:after {
   content: ' ▾';
}

.main-navigation ul ul {
	border-top: 4px solid #66bbcc !important;
}

.main-navigation ul ul a {
	background-color: #eaeaea;
	border-bottom: 1px solid #66bbcc;
    border-left: none;
    border-right: none;
}
	
/* Actief menu */
.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current-menu-ancestor > a {
    color: #ffffff !important;
}

/* Actief submenu */
.main-navigation ul ul .current_page_item > a, .main-navigation ul ul .current-menu-item > a, .main-navigation ul ul .current-menu-ancestor > a {
    color:  #66bbcc !important;
}

.menu-toggle::before {
	color: #ffffff !important;
}


/* Typografie
----------------------------------------------- */
body, .service-title, h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', serif;
	font-weight: 400;
	color: #4d4d4d;
	font-size: 16px;
}

h1 {
    font-size: 25px;
    line-height: 30px;
    text-transform: uppercase;
    padding-bottom: 25px;
    font-weight: 600;
}

h2 {
	font-size: 17px;
	line-height: 20px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 25px 0 15px 0;
}

h6 {
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.home .site-content {
	padding-top: 20px !important;
}

.intro {
	font-size: 26px;
}

.marker {
	border-bottom: solid 2px #66bbcc;
}

.intro-contact h1 {
	padding-top: 15px;
}

.intro-contact {
	font-size: 26px;
	padding-bottom: 55px;
}

#content a {
	color: #66bbcc;
	text-decoration: underline;
}

#content a:hover {
	color: #4d4d4d;
}

.kolom-no-kader a {
	background: #ffffff !important;
	text-decoration: none !important;
	border: 1px solid #66bbcc;
	padding: 5px 8px;
	line-height: 40px;
}

.kolom-no-kader a:hover {
	border: 1px solid #4d4d4d !important;
}

blockquote {
    border: 0 !important;
}

blockquote {
	background: #e6ebec;
	font-style: italic;
    font-size: 20px;
    padding: 20px 20px 10px 20px;
    margin: 10px 0;
}


/* Contact
----------------------------------------------- */
#secondary a {
	color: #66bbcc !important;
	text-decoration: underline;
}

#secondary a:hover {
	color: #4d4d4d !important;
}

#secondary {
    padding-top: 35px;
}


/* Footer
----------------------------------------------- */
#colophon {
    background-color: #ffffff;
    border-top: none !important;
}

#site-generator {
    border-top: 0;
}


/* 404
----------------------------------------------- */
.error-404.not-found h2 {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 25px;
    padding-top: 0;
    margin-top: -10px;
    text-transform: uppercase;
    text-align: left;
}

#primary .error-404.not-found  {
	padding-top: -10px;
}


/*Video
----------------------------------------------- */
.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-bottom: 20px;
}

.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}