/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
      
}

@media screen and (max-width: 900px) {

	/* wrapper */
	#wrapper {
        padding-top:80px;
		padding-bottom: 0px; 
        overflow:hidden;
	}

	/* header */
	#header { height:80px!important; }
	#header #logo { top:0; left:0; width:200px; z-index:9; }
    #header #logo a { background-position:50% 55%; }

	/* header > menu */	
	#wrapper #header #menu-mobile {
		width: 40px; height: 40px;
		position: fixed; 
		right:20px; 
		top:20px;
		background-color: #ccd2e7;
		border-radius: 40px; 
		z-index: 9; 
		cursor: pointer;
		display: block;
	}
	#wrapper #header #menu-mobile svg {
		display: block;
		fill:#8c7bb5;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 16px;
		height: 16px;
		margin-left: -8px;
		margin-top: -8px;
	}
	#wrapper #header #menu {
		position: fixed; 
		left: 0; 
		top: 0!important;
		width: 100%; 
		height: 100%;
		background-color:#434f88;
		transform: none; 
		-webkit-transform: none;
		z-index: 9;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		transition: transform 300ms;
	}
	#wrapper #header #menu.active {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}	
	#wrapper #header #menu ul {
		position: relative; 
        top:0!important;
		left: 0; 
		width: 100%;
	}
	#wrapper #header #menu .center { position:absolute; top:50%; width:100%; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
    
	#wrapper #header #menu ul li {
		float: none; text-align: center;
	}
	#wrapper #header #menu ul li a {
		margin-left:0; font-family:"Belgrano"; font-size:21px!important;
    }


	/* if language is used */
	#langmenu {
	   position: fixed;
       top: 2em; left: 50%;
       transform: translateX(-50%); 
       -webkit-transform: translateX(-50%);
	   z-index: 9;
       border-radius: 3px;
       display: none;
    }
	#langmenu a:not(:last-child) {
        margin-right: 1em;
    }
	#menu.active ~ #langmenu {
	   display: block;
    }
    /* /if language is used */


	/* header image */
    #header-image { height:150px!important; }
    #header-image:after { top:0; }
    #header-image.homepage { height:250px!important; }
    #header-image .image img { position:relative; left:-20%; }
    #header-image .image span { bottom:25px; left:25px; font-size:14px; line-height:18px; z-index:1; }
    #header-image .image span br { display:block; }
    
    #header-image .arrow { bottom:-25px; width:50px; height:50px; pointer-events:none; }
    
    .c19-button,
    .c19-button.scroll { top: 28px; right: 0; transform: rotate(-10deg) scale(0.6); }
    
    #header-image-container .center { width:55%; }
    #header-image-container .center .quote span { margin-bottom:10px; font-size:16px; line-height:21px; }
    #header-image-container .center .quote span strong { font-size:30px; }
    #header-image-container .center .quote span strong:last-of-type { top:15px; }
    #header-image-container .center .quote .name { font-size:14px; }
    #header-image-container .center .ctas { display:none; }
    
    #header #menu ul.big li a:before { top: -1px; }
    
    
	/* submenu */
	#content #submenu.default {
		width: 100%; margin-top:-65px; margin-bottom: 2em;
	}
	#content #submenu-trigger { display: block; background-color:#efefef; }
	#content #submenu-trigger:after { position:absolute; top:0; right:0; width:49px; height:49px; content:""; -webkit-transform:none; transform:none; background-color:transparent; }
	#content #submenu-trigger.active:after { -webkit-transform:translateY(0) rotate(-180deg); transform:translateY(0) rotate(-180deg); }

	#content #submenu.default ul {
		display: none;
	}
	#content #submenu.default ul.active {
		display: block;
	}


	/* content *//* main layout */
    #content-container { margin-top:0; width:85%; }
    #content.homepage #content-container { padding:3em 0; }
    #content.homepage #content-container .page_content { min-height:0; }
    #content.homepage #content-container .page_content p { margin-bottom:20px; width:100%; }
    #content.homepage #content-container .page_content p:last-of-type { margin-bottom:40px; }
    
    #content.homepage #content-container .video { position:relative; top:0; bottom:0; right:0; }
    #content.homepage #content-container .video iframe { width:100%; height:auto; }
    #content.homepage #content-container .video span.text { position:absolute; bottom:-80px; right:10px; font-size:16px; }
    #content.homepage #content-container .video span.text:after { bottom:12px; right:-10px; width:35px; height:35px; }

    #content.homepage #content-container .keuzekrachtmethode { position:relative; top:0; width:100%; }
    

	#content .page_content,
	#content .page_content.hassubmenu,
	#content .page_content.hasmedia,
	#content .page_content.hassubmenu.hasmedia {
		width: 100%; margin:0; padding-left: 0; padding-right: 0;
	}
	#content .page_content h1 {
		font-size: 1.5em;
	}
	#wrapper #content .media {
        margin-top:30px;
		width: 100%;
	}

    #content.partners .page_content.hasmedia { width:100%; }
    #content.partners .media { margin-top:0!important; left:0; }
    #content.partners .media a { margin:2% 0; padding-bottom:calc(100% / 2 - 4% - 2px); width:calc(100% / 1); }
    #content.partners .media a img { max-height:65%; }
    
    #cta { margin-top:20px; width:100%; }
    

	/*news */
    .news-overview { left:0; width:100%; }
    .news-overview .item { margin:4% 0; width:calc(100%); }
	.news-overview .item .image {
		margin-left: 0;
		width: 100%;
	}
    #content.blog .page_content.news_item { margin-left:0; padding-right:0; width:100%; }
    
    #content.blog #submenu-trigger { display:none; }
    #content.blog #submenu { float:left; margin-top:30px; padding-top:40px; width:100%; border-top:1px solid #ddd; }


	/* contact */
    #content.contact .page_content .content { width:100%; }
    #content.contact .page_content .content p { margin-bottom:10px; }
    #content.contact #contact { margin-top:40px; width:100%; }
    #content.contact #contact:before { margin-bottom:20px; content:"Contactformulier"; font-family:"Belgrano"; font-size:21px; color:#e11221; }


    #polarsteps { margin:0; height:auto; }
    #polarsteps .background-curve { }
    #polarsteps .background-line { display:none; }
    #polarsteps #polarsteps-container { top:0; padding:25px; width:85%; height:auto; }
    #polarsteps #polarsteps-container span { position:relative; margin:0; margin-bottom:30px; font-size:16px; line-height:21px; }
    #polarsteps #polarsteps-container .blob { position:relative; right:0; }


	/* footer */
	#footer {
		position: relative;	
        height: auto;		
		padding-bottom: 30px;
		font-size: .8em;
	}	

    #footer #footer-container { padding:40px 0 20px 0; width:85%; }
    #footer #footer-container .item { margin-bottom:30px; padding:0!important; width:100%!important; }
    #footer #footer-container .item.logo { display:none; margin-top:10px; }
    
    #footer #footer-container .item ul li a br { display: none; }
    
    #footer-bottom-container { padding:30px 0 20px 0; width:85%; }
    #footer-bottom-container a { display:block; margin:0!important; }
    
	#wrapper #social-media-buttons { float:none; margin-top:20px; width:100%; }
    #wrapper #social-media-buttons a { margin-right:10px!important; }
    
	#footer #footer-container #social-media-buttons a {
		margin-left: 0;
		margin-right: 5px;
		width: 30px;
		height: 30px;
	}
	#footer #footer-container #social-media-buttons a svg {
		width: 10px;
		height: 10px;
		margin-left: -5px;
		margin-top: -5px;
	}

}