/*Now the maximum size for everything is optimized on a screen width of 1440px.
The minimum size is optimized for a screen width of 800px. Thus everything has a min and max size according to these widths.
For example the body is 90% of the screen width. The max size is thus 90% of 1440 and the min size is 90% of 800.
I can always decide to build a seperate layout for the smaller screen sizes later on! For exaple no spacings and thus a larger text 
area*/

/*Resetting all margins*/
* { margin: 0; padding: 0; border: none; }

/*media dependent style properties. Neccesary because the font-size cannot be putted to a min of max value*/
/*I make 3 seperate layouts for screens <800px, 800-1440px and above 1440px, this is because:
- there is no min or max for font-sizes so otherwise the letters become too large for the navigation on small screens and the
letters continue growing on large screens whereas the navigations stops growing
- I want eventually smaller files for the background image, navigation images etc for smart phones (to reduce loading/data usage)
- If I put some of the values in a media dependent statement and some not the code will become less structured. Therefore I rather
have some of the values twice or three times but all in working seperate layouts.*/

/*The banner, navigation buttons amd background image are optimized for a screenwidth of 1440. (This is the max resolution
for this @media and this means the files are smaller than with a very high res which makes loading on 800-1024px tablets better*/
@media screen and (min-width: 800px) and (max-width: 1440px) {
	/*General style properties html*/
	html {
		
		/*background color shown in case the background image needs to load*/
		background-color: #ffeaa5;		
	
		/*background image*/
		/*later on need to look if this needs to be putted at */
		background-image: url('Images/Pagina_Achtergrond/Achtergrond_Boom_1440x1440_lowampling.jpg');    
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-attachment: fixed;   
    	background-size: 100vw 100vw;
    	   	
		height: 100%;  
		height: auto;
		
		margin-top: 0;	
		margin-left: 0;
		padding-top: 0;		
  	
	} 

	/*Style properties whole content webpage*/
	/*I want the webpage to be 90% of the screenwidth, all the other divs are this one such that everything is rescaled
	at once when neccesarry*/
	body{
	
		position: relative;
		margin-top: 0;
		padding-top: 0;
		width: 90%;	
		margin: 0 auto;
		background-color: transparent;
		height: 97vh;	
	
		max-width: 1296px; /*90% of 1440px (my res)*/	
		min-width: 720px; /*90% of 800px*/
	
	}
	
	/*Style properties of the header*/
	header{
		position: fixed;
		top: 0;
		padding-top: 0;
		margin: 0 auto;		
		z-index: 9999;
		height: 15.5vw; /*height banner + main nav + 2.5% extra space (for sub nav and reading space).*/		
		background-color: transparent;	
		width: 90%; /*percentage of screen width*/
	
		max-width: 1296px; /*90% of 1440px (my res)*/
		min-width: 720px; /*90% of 800px*/
		
		background-image: url('Images/Pagina_Achtergrond/Achtergrond_Boom_1440x1440_lowampling.jpg');
		background-repeat: no-repeat;
	    background-position: center top;    
	   	background-size: 100vw 100vw;/*Because it is fixed this is also in terms of the screenwidth*/

	}


	/*Style properties logo on top of page*/
	#banner_logo{		
		
		position: relative;	
		left: 18%;/*same as block 1 + spacing 1*/
		width: 64%; /*58% of total screen width = 64% of the header width which is 90% of the screen width.*/			
		background-color: transparent;
	}

	#social_buttons{
		position: relative;
		left: 18%;
		width: 64%;
		
		max-width: 835.2px; /*58% of 1440px, see banner_logo*/
		min-width: 464px; /*58% of 800px, see banner_logo*/		
		
		max-height: 28px;
		min-height: 15.2px; /*1.9% of 800 =15.2*/
		
		background-color: transparent;
		
	}
	
	#share_fb{		
		display: inline-block;
		position: relative;	
		right: 0vw;
		top: 0vw;	
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		
		height: 1.9vw; /*I want 28px height at 1440. This is 1.9vw the image is 390x143 px */
		width: 5.3vw;/*the image is 390x143px thus with a height of 28px this means a width of 76px = 5.3vw*/
		
		max-height: 28px;
		min-height: 15.2px;/*1.9% of 800 =15.2*/
		
		max-width: 76px;
		min-width: 42.2px; /*5.3% of 800 =42.2*/

		
		
	}
	
	#share_tw{	
		display: inline-block;
		position: relative; 
		right: 0vw;
		top: 0vw;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		
		height: 1.9vw; /*the image is 333x115 px */
		width: 5.6vw;/*the image is 333x115px thus with a height of 28px this means a width of 81px = 5.6vw*/
		
		max-height: 28px;
		min-height: 15.2px;/*1.9% of 800 =15.2*/
		
		max-width: 81px;
		min-width: 44.8px; /*5.6% of 800 =44.8*/



	}
	
	#follow_tw{	
		display: inline-block;	
		position: relative; 
		right: 0vw;
		top: 0vw;	
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		
		height: 1.9vw; /*the image is 165x51 px */
		width: 6.3vw;/*the image is 165x51px thus with a height of 28px this means a width of 90px = 6.3vw*/
		
		max-height: 28px;
		min-height: 15.2px;/*1.9% of 800 =15.2*/
		
		max-width: 90px;
		min-width: 50.4px; /*6.3% of 800 =50.4*/

		


	}
	
	#follow_yt{		
		/*background-image: url('Images/Subscribe/youtube-subscribe-button.png');	*/
		display: inline-block;	
		position: relative; /*is now placed within banner logo*/
		right: 0vw;
		top: 0vw;	
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		   
		height: 1.9vw; /*the image is 2400x600 px */
		width: 7.7vw; /*the image is 2400x600px thus with a height of 28px this means a width of 112px =7.7vw*/
		
		max-height: 28px;
		min-height: 15.2px;/*1.9% of 800 =15.2*/
		
		max-width: 112px;
		min-width: 61.6px; /*7.7% of 800 =61.6*/

		

	}

	/*Style properties main navigation bar*/
	#main_nav{
		/*style properties for div id created to set the style of the whole navigation*/
		position: relative;
		top: 0%;/*percentage of header height*/
		padding: 0; 	
		left: 18%;/*same as block_1+ spacing_1, precentage of header width*/
		width: 82%; /*percentage of header width, 100%-left margin*/		
		background-color: transparent;		
		height: auto; /*This is around 50px on 1440px viewwidth*/
		
		min-width: 590; /*82% of 90% of the screenwidth at 800px (73.8%)*/
		min-height: 26; /*3.33vw of 800px screen width*/	
	
		max-width: 1063px; /*82% of 90% of the screenwidth at 1440px (73.8%)*/
		max-height: 50px; /*50px = 3.33vw of 1440px screen width*/		
		
	}

	nav.main_nav_nav{
		/*nav tag style properties for HTML 5*/	
		display: block;
		
	}

	ul.main_nav_ul{
		/*ul style properties for the navigation when the nav tag does not work*/	
		list-style-type: none;
	
	}

	a.main_nav_a {
		display: inline-block;
	}

	#nav_Home_Active, #nav_Animations_Active, #nav_Contact_Active,#drop_nav_Crochet_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
	   	
	   	display: inline-block;		
		overflow: hidden;	
		width: 10vw;
		height: 3.33vw;	
		
		font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#nav_Home_nonActive, #nav_Animations_nonActive, #nav_Contact_nonActive,#drop_nav_Crochet_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
		display: inline-block;		
		overflow: hidden;				
		width: 10vw;
		height: 3.33vw;
		
		font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}
	
	/*Style properties of drop down menu on main nav*/
		
	li{
	
		float: left;
		list-style-type: none;
	
	}
	
	li a, .dropbtn {
    	display: inline-block;
    	color: white;
    	text-align: center;    	
    	text-decoration: none;
	}

	li a:hover, .dropdown:hover .dropbtn {
    	background-color: transparent;
    	
	}

	li.dropdown {
	    display: inline-block;
	}

	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: transparent;	   
	}

	.dropdown-content a {
		background-image: url('Images/Navigation/LeadNav_UnPressed_150x50_backgr_invisible.png');	
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;		   	  	
   
	    display: block;	
	    overflow: hidden;	
		width: 10vw;
		height: 3.33vw;
    
	    font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;	

	}

	.dropdown-content a:hover {
		background-color: transparent;
		
		
	}
	
	.dropdown:hover .dropdown-content {
	    display: block;
	}
	
	#drop_nav_Animations_Active,#drop_nav_Meditation_Active,#drop_nav_Seasonal_Active, #drop_nav_Octo_Active,#drop_nav_CrochetProj_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
	   	
	   	display: block;		
		overflow: hidden;	
		width: 10vw;
		height: 3.33vw;	
		
		font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#drop_nav_Animations_nonActive,#drop_nav_Meditation_nonActive,#drop_nav_Seasonal_nonActive, ,#drop_nav_Octo_nonActive,#drop_nav_CrochetProj_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
		display: block;		
		overflow: hidden;				
		width: 10vw;
		height: 3.33vw;
		
		font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}

	/*Style properties SIDE navigation bar*/
	#side_nav{
		/*style properties for div id created to set the style of the whole navigation*/
		position: fixed;
		top: 24vw;/*percentage of header height (15.5vw) + main_nav height + project header height (5vw)*/
		padding: 0; 	
		left: 10%;/*block 1 = 14% */
		width: 18%; /*percentage of header width, 100%-left margin*/		
		background-color: transparent;		
		height: auto; /*This is around 50px on 1440px viewwidth*/
		
		min-width: 590; /*82% of 90% of the screenwidth at 800px (73.8%)*/
		min-height: 26; /*3.33vw of 800px screen width*/	
	
		max-width: 1063px; /*82% of 90% of the screenwidth at 1440px (73.8%)*/
		max-height: 50px; /*50px = 3.33vw of 1440px screen width*/		
		
	}

	nav.side_nav_nav{
		/*nav tag style properties for HTML 5*/	
		display: block;
		
	}

	ul.side_nav_ul{
		/*ul style properties for the navigation when the nav tag does not work*/	
		list-style-type: none;
	
	}

	a.side_nav_a {
		display: inline-block;
	}

	#nav_2018_Active, #nav_ProjGallery_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
	   	
	   	display: inline-block;		
		overflow: hidden;	
		width: 10vw;
		height: 3.33vw;	
		
		font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#nav_2018_nonActive, #nav_ProjGallery_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
		display: inline-block;		
		overflow: hidden;				
		width: 10vw;
		height: 3.33vw;
		
		font-size: 1.5vw;
		line-height: 3.33vw;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}

	
	
	
	/*Style poperties of the wrapper containing the containers for avertisement, spacings and content.*/
	#wrapper{
				
		/*About the top margin:
		The top margin should be the same as the height of the header. The header consists of the banner, the main nav and
		sub nav. Calculating total height in terms of vw:
		banner: 2559x423px thus height/width~6.05
		banner-width=58%of screenwidth, banner-height= (1/6)*banner-width~9.6% of screenwidth
		main-navigation: height=3.33% of viewwidth
		Thus total height~13% of view width */
		margin-top: 15.5vw; /*height of header (13vw see above) + 2.5% extra space*/
		background-color: transparent;
		width: 100%;
		max-width: 1296px; /*90% of 1440px (my res)*/
		min-width: 720px; /*90% of 800px*/
		left: 5%;
		right: 5%;
		min-height: 97%;
		height: auto !important;
		padding-bottom: 3%;

		
		/*position: relative;/*Al positions relative to the body container*/
		/*top: 50%;	
			
		/*Making sure it doesn't overlap with the footer and the footer is pushed to the bottom no matter the content length*/	
		/*min-height: 73%;/*100%-header height-footer height = 100-24-3=73*/
		/*min-height: 75%; /*100% - header height - footer height*/ /*change in px for low res*/	
		/*height: auto !important;	
		/*overflow: none;*/
		/*padding-bottom: 3%;*/
		/*background: yellow;*/
			
	}
	
	#block_1{
		
		display: inline-block;
		vertical-align: top;
		width: 14%;
		background-color: transparent;
			
		/*display: inline-block;
		position: relative;	
		margin-left: 0;
		top: 0;
		width: 14%; /*14% of the 90% of the screen width ~13% of the screen width*/	
		/*background-color: olive;
		height: 100%;
		height: auto;*/	

	
	}
	
	#spacing_1{
	
		display: inline-block;
		vertical-align: top;
		width: 4%;
		background-color: transparent;
		z-index: 9999;	
		
		
		/*display: inline-block;
		position: absolute;	
		left: 14%; /*same as block_1 width*/
		/*width: 4%; /*(100-64-14-14)/2 = 4*/
		/*top: 0;
		background-color: black;
		height:100%;
		height: auto;*/
	
	}
	
	#content{
	
		display: inline-block;
		vertical-align: top;
		width: 64%; /*64% of body width ~58%of screen width which is the width I want to obtain 800px text widt at 1366px total width*/

		background-color: transparent;	
		
	
		/*display: inline-block;
		position: absolute;	
		left: 18%; /*14% of the 90% of the screen width ~13% of the screen width*/
		/*width: 64%;/*64% of body width ~58%of screen width which is the width I want to obtain 800px text widt at 1366px total width*/
		/*top: 0;
		background-color: teal;
		height: 100%;
		height: auto;*/
	}
	
	#spacing_2{
		
		display: inline-block;
		vertical-align: top;
		width: 4%;
		background-color: transparent;
		top:24%;
		
	
	
		/*display: inline-block;
		position: absolute;	
		left: 82%; /*64+14+4=82*/
		/*width: 4%; /*(100-64-14-14)/2 = 4*/
		/*top: 0%;
		background-color: aqua;
		height: 100%;
		height: auto;
		z-index: 9999;*/
		
		
	}
	
	#advertisement_block{	
	
		display: inline-block;
		vertical-align: top;
		width: 14%;
		background-color: green;
		
	}
	
	
	/*Style properties of the footer*/
	footer {   	
	   
	   	bottom: 0;
	   	height: 3%;
	   	text-align: center;
	   	font-size: 1.2vw;		
	   	
	}
	
	/*Style properties of content parts*/	
	
	/*Style properties of movie and text containers for the home page*/
	#container_movie_main{
		width: 90%; /*Percentage of content width (thus 90% of 58% of screenwidth*/
		margin: 0 auto;
		background-color: transparent;
	}
		
	#container_logo_gif{
		background-image: url('Images/Home/Welcome_AnimatedGif/Logo_20fps_2s_wwvar_753x424.gif');
		background-repeat: no-repeat;
		background-position: center center;    
		background-size: 100% 100%;
	}
		
	#container_logo_gif:hover{
		cursor: pointer;		
		background-image: url('Images/Home/Welcome_AnimatedGif/Logo_20fps_2s_wwvar_753x424_inf.gif');
		background-repeat: no-repeat;
		background-position: center center;    
		background-size: 100% 100%;
			
	}	
	
	
	#container_text_homePag{
		width: 80%;
		margin: 0 auto;
		margin-top: 1vw; /*~14px on 1440*/ 		
	}
		
	/*Style properties of normal text on the web page*/
	/*The normal text should be 16px at least at 1024 screenwidth (most tablets), this is 1.5vw*/
	p.left_normalSize{
		text-align: left;
		font-size: 1.2vw;		
		line-height: 1.8vw;
		margin-bottom: 2vw;
	}
	
	p.date_name{
		text-align: center;
		font-size: 1.2vw;
		line-height: 1.8vw;
		margin-bottom: 2vw;
		color: gray;
	}
	
	/*
	.container_text_margins_centered{
		width: 80%;
		margin: 0 auto;		
	}
	*/


	#container_responsive_billboard_ad {
		width: 100%;
		margin: 0 auto;
		margin-top: 1vw;/*~14px on 1440*/ 
		margin-bottom: 1vw;/*~14px on 1440*/
	
	}

	.ad_resp_kleur2 {		
		width: 728px;
		height: 90px;
		margin: 0 auto;
}

	
	/*Style properties of the animation thumbnails on the animation-main page*/
	/*Container for the thumbnail*/
	#container_thumbnails_animationsHomePag{
		width: 100%; /*% of content width= 58vw*/		
		margin: 0 auto;
		margin-bottom: 1vw;
		margin-top: -1vw;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;

	}

	#container_single_thumbnail_animationsHomePag{
		display: inline-block;
		width: 33%; /*33% of #container_thumbnails_animationsHomePag width = 33% content width = 19.3vw*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}
	
	#container_halfspacing_thumbnail_animationsHomePag{
		display: inline-block;
		width: 16.5%; /*The thumbs are large now, (1/3)*content width. Need spacings at each side of half the width of a container to have two buttons at one line (33%/2=16.5%)*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}


	a.animation_category_thumbnail_meditation{		
		
		background-image: url('Images/AnimationHome_CategoryThumbnails/Button_Anim_meditatie_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 100%; /*% of container width = 33% of content width = 19.3vw*/
		height: 11.5vw; /*It is an image of 1000x600px the width = 100%container width = 19.3vw (see line above) thus height = 11.5vw =166px*/
						
		font-size: 2vw;
		line-height: 11.5vw;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-indent: 1.7vw; /*1.5vw*/	
		text-decoration: none;			
		color: #191970;

	
	}

	a.animation_category_thumbnail_Seasonal{
		background-image: url('Images/AnimationHome_CategoryThumbnails/Button_Anim_seasonal_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 100%; /*% of container width = 25% of content width = 14.5vw*/
		height: 11.5vw; /*It is an image of 1000x600px the width = 100%container width = 14.5vw (see line above) thus height = 8.6vw =125px*/
				
		font-size: 2vw; 
		line-height: 11.5vw;		
		font-weight: 700;	
		text-align: center;
		text-indent: 1.7vw; /*1.5vw*/			
		text-decoration: none;			
		color: #191970; /*CCFFCC #006400  , hiervoor was het #98FB98*/
	
	}

	/*Style properties of the crochet thumbnails on the crochet-main page*/
	/*Container for the thumbnail*/
	#container_thumbnails_crochetHomePag{
		width: 100%; /*% of content width= 58vw*/		
		margin: 0 auto;
		margin-bottom: 1vw;
		margin-top: -1vw;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;

	}

	#container_single_thumbnail_crochetHomePag{
		display: inline-block;
		width: 33%; /*33% of #container_thumbnails_animationsHomePag width = 33% content width = 19.3vw*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}
	
	#container_halfspacing_thumbnail_crochetHomePag{
		display: inline-block;
		width: 16.5%; /*The thumbs are large now, (1/3)*content width. Need spacings at each side of half the width of a container to have two buttons at one line (33%/2=16.5%)*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}


	a.crochet_category_thumbnail_octo{		
		
		background-image: url('Images/CrochetHome_CatergoryThumbs/Button_Crochet_Octo_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 100%; /*% of container width = 33% of content width = 19.3vw*/
		height: 11.5vw; /*It is an image of 1000x600px the width = 100%container width = 19.3vw (see line above) thus height = 11.5vw =166px*/
						
		font-size: 2vw;
		line-height: 11.5vw;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-indent: 1.7vw; /*1.5vw*/	
		text-decoration: none;			
		color: #191970;

	
	}

	a.crochet_category_thumbnail_projects{
		background-image: url('Images/CrochetHome_CatergoryThumbs/Button_Crochet_Proj_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 100%; /*% of container width = 25% of content width = 14.5vw*/
		height: 11.5vw; /*It is an image of 1000x600px the width = 100%container width = 14.5vw (see line above) thus height = 8.6vw =125px*/
				
		font-size: 2vw; 
		line-height: 11.5vw;		
		font-weight: 700;	
		text-align: center;
		text-indent: 1.7vw; /*1.5vw*/			
		text-decoration: none;			
		color: #191970; /*CCFFCC #006400  , hiervoor was het #98FB98*/
	
	}


	/*Properties Octopus gallery images (3 images on one line - left aligned)*/
	#container_images_Three_OneLine{
		width: 100%; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 1vw; /*1vw=14.4px*/
		margin-top: -1vw;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
	}
	
	#container_ImageText_Three{		
		display: inline-block;
		width: 32%; /*(1/3) of the OneLine container = 33%. Downscale with 1%. This is 32% of 58vw = 18.56vw. */
		height: 22vw; /*Height of image (14.4vw) + 4x line height (4*1.8vw) = 14,4+4*1.8 = 21.6vw upscaled to 22vw*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_Three{
		display: inline-block;
		width: 100%; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
		overflow: hidden;		
	
	}
	
	#container_Text_Three{
		display: inline-block;
		width: 100%; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}

	p.center_normalSize{
		text-align: center;
		font-size: 1.2vw;		
		line-height: 1.8vw;
		margin-bottom: 2vw;	
		margin-right: 2vw;

	}
	
	/*Properties Gallery images (1 or 2 images centered)*/
	/*1 image centered*/
	#container_images_One_OneLine{
		width: 100%; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 1vw; /*1vw=14.4px*/
		margin-top: -1vw;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	#container_ImageText_One{		
		display: inline-block;		
		width: 46.4vw; /*80% of the Oneline container (= 80% of 58vw = 46.4 vw = 668px)*/
		height: 42vw; /*Image = 1000x750 px. If width is 46.4vw then height is 46.4*0.75=34.8vw.  Plus 4x line height = 34.8 + 4x line height (4*1.8vw) = 34.8+4*1.8 = 42vw*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_One{
		display: inline-block;
		width: 100%; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			
		overflow: hidden;		
	
	}
	
	#container_Text_One{
		display: inline-block;
		width: 100%; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}
	
	/*2 images centered*/
	#container_images_Two_OneLine{
		width: 100%; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 1vw; /*1vw=14.4px*/
		margin-top: -1vw;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
		padding-left: 10%; /*The images inside have a widt of 40% so 20% is left in total. At each side this is 10%*/
		padding-right: 10%; /*The images inside have a widt of 40% so 20% is left in total. At each side this is 10%*/
	}
	
	#container_ImageText_Two{		
		display: inline-block;
		margin: auto;
		width: 40%; /*40% of the Oneline container (= 40% of 58vw = 23.2 vw ~23vw)*/
		height: 25vw; /*Image = 1000x750 px. If width is 23vw then height is 23*0.75=17.25vw.  Plus 4x line height = 17.25 + 4x line height (4*1.8vw) = 17.25+4*1.8 = 24.45vw~25vw*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_Two{
		display: inline-block;
		width: 100%; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			
		overflow: hidden;		
	
	}
	
	#container_Text_Two{
		display: inline-block;
		width: 100%; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}




	
	
	

	
	/*Style properties of animation pages, category header, animation container etc.*/
	
	h1.animation_pageHeader_Meditation{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png') ;
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 100%; /*% of container width = 100% of content width = 58vw*/
		height: 5vw; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 4vw;
		line-height: 5vw;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	h1.animation_pageHeader_Seasonal{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 100%; /*% of container width = 100% of content width = 58vw*/
		height: 5vw; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 4vw;
		line-height: 5vw;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;


	
	}

	h1.animation_category_relaxation{
		background-image: url('Images/Headers_Animation_Categories/Relaxation/Header_relaxation_830x36_3_3D.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	font-size: 2vw;
    	height: 2.5vw;
    	padding-top: 0.25vw;
    	padding-bottom: 0.25vw;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;
    	color:white;
    	text-align: center;  	
    	
	
	}
	
	h1.animation_category_Xmas{
		background-image: url('Images/Headers_Animation_Categories/Seasonal/Header_Seasonal_830x36_3_3D.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	font-size: 2vw;
    	height: 2.5vw;
    	padding-top: 0.25vw;
    	padding-bottom: 0.25vw;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;
    	color: #fac400;/*#300000 #fac400 met rood*/
    	text-align: center;  	
    	
	
	}


	/*Style properties container for the single animations, with title, embedded video and explanation text*/
	.container_animation{
		width: 100%; /*% of content width= 58vw*/
		margin-top: 2vw;
		background-color: transparent;
	}	
	
	h1.animation_title{
		display: block;		
    	font-size: 1.2vw;
    	line-height: 1.8vw;
    	margin-top: 0.5vw;
    	margin-bottom: 0.5vw;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;  	
	}
	
	.container_animation_thumbnail{
		display: inline-block;
		vertical-align: top;
		width: 50%; /*percentage of animation container width. 50% of container width = 100%/2 content width = 58/2vw=29vw*/	
		height: 16vw; /*From youtube the animation is 560x315px. I putted the width of this container to 29vw so the height is ~16vw*/	
		background-color: transparent;
	}
		
	.container_animation_explanation{
		display: inline-block;
		vertical-align: top;
		margin-left: 1%;
		width: 49%; /*percentage of animation container width.*/
		background-color: transparent;
	}
	
	p.animation_explanation{
		text-align: left;
		font-size: 1.1vw;
		line-height: 1.5vw;
		margin-bottom: 0.5vw;
	}
		
	.container_advertisement_content_height250_centered{
		position: relative;
		display: block;
		vertical-align: top;
		width: 100%;
		height: 250px;
		background-color: transparent;
		
	}	
	.container_advertisement_300x350_centered{
		margin: 0 auto;
		width: 300px;
		height: 250px;
		background-color: green;
	}
	
	
	/*Style properties for the chrochet pages*/
		
	h1.crochet_pageHeader_octo{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png') ;
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 100%; /*% of container width = 100% of content width = 58vw*/
		height: 5vw; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 4vw;
		line-height: 5vw;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	h1.crochet_pageHeader_projects{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 100%; /*% of container width = 100% of content width = 58vw*/
		height: 5vw; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 4vw;
		line-height: 5vw;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;


	
	}
	
	/*Centered header*/
	h1.centered_heading{	
		
	    background-position: center center;    
	   	background-size: 100% 100%;		
    	font-size: 2vw;
    	height: 2.5vw;
    	padding-top: 0.25vw;
    	padding-bottom: 0.25vw;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;    	
    	text-align: center;  	
    	color: #191970;

	}


}
	
	


/*At larger screens the max width and height should be taken, so the max width is 1440px*/
/*Later on I can create a fluid layout for these resolutions as well (larger images etc)*/
@media screen and (min-width: 1441px) {
	/*General style properties html*/
	html {
		
		/*background color shown in case the background image needs to load*/
		background-color: #ffeaa5;
	
		/*background image*/
		/*later on need to look if this needs to be putted at */
		background-image: url('Images/Pagina_Achtergrond/Achtergrond_Boom_2732x2732.jpg');    
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-attachment: fixed;   
    	background-size: 1440px 1440px;	
   	
		height: 100%;  
		height: auto;
		
		margin-top: 0;	
		margin-left: 0;
		padding-top: 0;		
  	
	} 

	/*Style properties whole content webpage*/
	/*I want the webpage to be 90% of the screenwidth, all the other divs are this one such that everything is rescaled
	at once when neccesarry*/
	body{
	
		position: relative;
		margin-top: 0;
		padding-top: 0;
		width: 1296px; /*90% of 1440px (my res)*/		
		margin: 0 auto;
		background-color: transparent;
		height: 97vh;	
	
	}

	/*Style properties of the header*/
	header{
		position: fixed;
		top: 0;
		padding-top: 0;
		margin: 0 auto;		
		z-index: 9999;
		height: 223px;		
		background-color: transparent;	
		width: 1296px; /*90% of 1440px (my res)*/	
		
		background-image: url('Images/Pagina_Achtergrond/Achtergrond_Boom_1440x1440_lowampling.jpg');
		background-repeat: no-repeat;
	    background-position: center top;    
	   	background-size: 1440px 1440px;
	

	}


	/*Style properties logo on top of page*/
	#banner_logo{
		position: relative;	
		left: 233px;/*same as block1+spacing1. it was 18% of the header width (which is 90% of screenwidth). 0.18*0.9*1440=233*/
		width: 836px; /*58% of 1440, 58% of total screen width = 64% of the header width which is 90% of the screen width.*/
		
	
	}
	
	#social_buttons{
		position: relative;
		left: 233px;
		width: 836px;
		height: 28px;		
		
		background-color: transparent;
		
	}
	
	#share_fb{		
		display: inline-block;
		position: relative;	
		right: 0px;
		top: 0px;	
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		
		height: 28px; /*I have 36px but the normal size of the buttons is 28 px so I just choose 28px. the image is 390x143 px */
		width: 76px;/*the image is 390x143px thus with a height of 28px this means a width of 76px*/

		
		
	}
	
	#share_tw{	
		display: inline-block;
		position: relative; 
		right: 0px;
		top: 0px;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		
		height: 28px; /*the image is 333x115 px */
		width: 81px;/*the image is 333x115px thus with a height of 28px this means a width of 81px*/



	}
	
	#follow_tw{	
		display: inline-block;	
		position: relative; 
		right: 0px;
		top: 0px;	
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		
		height: 28px; /*the image is 165x51 px */
		width: 90px;/*the image is 165x51px thus with a height of 28px this means a width of 90px*/

		


	}
	
	#follow_yt{		
		/*background-image: url('Images/Subscribe/youtube-subscribe-button.png');	*/
		display: inline-block;	
		position: relative; /*is now placed within banner logo*/
		right: 0px;
		top: 0px;	
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent; 
		   
		height: 28px; /*the image is 2400x600 px */
		width: 112px; /*the image is 2400x600px thus with a height of 28px this means a width of 112px*/

		

	}


	/*Style properties navigation bar*/
	#main_nav{
		/*style properties for div id created to set the style of the whole navigation*/
		position: relative;
		top: 0%;/*percentage of header height*/
		padding: 0; 	
		left: 233px;/*same as block1+spacing1. it was 18% of the header width (which is 90% of screenwidth). 0.18*0.9*1440=233*/
		width: 1063px; /*percentage of header width, 100%-left margin, thus 100-18=82%. 0.82*0.9*1440=1063, 82% of 90% of the screenwidth at 1440px (73.8%)*/		
		background-color: transparent;
		height: 50px;	
		
	}

	main_nav.nav{
		/*nav tag style properties for HTML 5*/	
		display: block;
		
	}

	main_nav.ul{
		/*ul style properties for the navigation when the nav tag does not work*/	
		list-style-type: none;
	
	}

	main_nav.a {
		display: inline-block;
	}

	#nav_Home_Active, #nav_Animations_Active, #nav_Contact_Active,#drop_nav_Crochet_Active{
		background-image: url('Images/Navigation/LeadNav_Pressed_600x200_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
	   	
	   	display: inline-block;		
		overflow: hidden;	
		width: 150px;
		height: 50px;	
		
		font-size: 22px;
		line-height: 50px;	
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#nav_Home_nonActive, #nav_Animations_nonActive, #nav_Contact_nonActive,#drop_nav_Crochet_nonActive {	
		background-image: url('Images/Navigation/LeadNav_UnPressed_600x200_backgr_invisible_PNG.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
		display: inline-block;		
		overflow: hidden;				
		width: 150px;
		height: 50px;	
		
		font-size: 22px;
		line-height: 50px;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}


	/*Style properties of drop down menu on main nav*/		
	li{
	
		float: left;
		list-style-type: none;
	
	}
	
	li a, .dropbtn {
    	display: inline-block;
    	color: white;
    	text-align: center;    	
    	text-decoration: none;
	}

	li a:hover, .dropdown:hover .dropbtn {
    	background-color: transparent;
    	
	}

	li.dropdown {
	    display: inline-block;
	}

	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: transparent;	   
	}

	.dropdown-content a {
		background-image: url('Images/Navigation/LeadNav_UnPressed_150x50_backgr_invisible.png');	
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;		   	  	
   
	    display: block;	
	    overflow: hidden;	
		width: 150px;
		height: 50px;
    
	    font-size: 22px;
		line-height: 50px;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;	

	}

	.dropdown-content a:hover {
		background-color: transparent;
		
		
	}
	
	.dropdown:hover .dropdown-content {
	    display: block;
	}
	
	#drop_nav_Animations_Active,#drop_nav_Meditation_Active,#drop_nav_Seasonal_Active, #drop_nav_Octo_Active,#drop_nav_CrochetProj_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
	   	
	   	display: block;		
		overflow: hidden;	
		width: 150px;
		height: 50px;	
		
		font-size: 22px;
		line-height: 50px;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#drop_nav_Animations_nonActive,#drop_nav_Meditation_nonActive,#drop_nav_Seasonal_nonActive, ,#drop_nav_Octo_nonActive,#drop_nav_CrochetProj_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_150x50_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
		display: block;		
		overflow: hidden;				
		width: 150px;
		height: 50px;
		
		font-size: 22px;
		line-height: 50px;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}
	
	/*Style properties SIDE navigation bar*/
	#side_nav{
		/*style properties for div id created to set the style of the whole navigation*/
		position: fixed;
		top: 330px;/*height of header (223px) + 'projects' title header height (36 +2*4px padding) = 223+36+8 = 267px + extra*/
		padding: 0 0 0 50px; 			
		width: 150px; /*the width of the leave (see above)*/		
		background-color: transparent;		
		height: 50px;	
		
	}

	nav.side_nav_nav{
		/*nav tag style properties for HTML 5*/	
		display: block;
		
	}

	ul.side_nav_ul{
		/*ul style properties for the navigation when the nav tag does not work*/	
		list-style-type: none;
	
	}

	a.side_nav_a {
		display: inline-block;
	}

	#nav_2018_Active, #nav_ProjGallery_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_600x200_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
	   	
	   	display: inline-block;		
		overflow: hidden;	
		width: 150px;
		height: 50px;	
		
		font-size: 22px;
		line-height: 50px;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;
		
	}
	
	#nav_2018_nonActive, #nav_ProjGallery_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_600x200_backgr_invisible_PNG.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	   	
		display: inline-block;		
		overflow: hidden;				
		width: 150px;
		height: 50px;
		
		font-size: 22px;
		line-height: 50px;		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;		

	}




	/*Style poperties of the wrapper containing the containers for avertisement, spacings and content.*/
	#wrapper{
				
		/*About the top margin:
		The top margin should be the same as the height of the header. The header consists of the banner, the main nav and
		sub nav. Calculating total height in terms of vw:
		banner: 2559x423px thus height/width~6.05
		banner-width=58%of screenwidth, banner-height= (1/6)*banner-width~9.6% of screenwidth
		main-navigation: height=3.33% of viewwidth
		Thus total height~13% of view width */
		margin-top: 223px; /*height of header (13vw see above) + 2.5% extra space. Thus now 15.5% of 1440px = 223px*/
		background-color: transparent;
		width: 1296px;/*90% of 1440px (my res)*/
		
		left: 72px; /*5% of 1440px = 72px*/
		right: 72px;/*5% of 1440px = 72px*/	
		
		min-height: 97%;
		height: auto !important;
		padding-bottom: 3%;

	}
	
	#block_1{
		
		display: inline-block;
		vertical-align: top;
		width: 181px; /*14% of the 90% of the screen width ~13% of the screen width, 0.14*0.9*1440 = 181*/	

		background-color: transparent;	
	
	}
	
	#spacing_1{
	
		display: inline-block;
		vertical-align: top;
		width: 52px; /*4% of the 90% of the screen width: 0.04*0.9*1440=52*/	

		background-color: transparent;
		z-index: 9999;			
	
	}
	
	#content{
	
		display: inline-block;
		vertical-align: top;
		width: 830px; /*64% of body width ~58%of screen width which is the width I want to obtain 800px text widt at 1366px total width. 64% of 90% of 1440 = 830*/

		background-color: transparent;	
		
	
		/*display: inline-block;
		position: absolute;	
		left: 18%; /*14% of the 90% of the screen width ~13% of the screen width*/
		/*width: 64%;/*64% of body width ~58%of screen width which is the width I want to obtain 800px text widt at 1366px total width*/
		/*top: 0;
		background-color: teal;
		height: 100%;
		height: auto;*/
	}
	
	#spacing_2{
		
		display: inline-block;
		vertical-align: top;
		width: 52px;
		background-color: transparent;	
		
	}
	
	#advertisement_block{	
	
		display: inline-block;
		vertical-align: top;
		width: 181px;
		background-color: transparent;
		
	}
	
	
	/*Style properties of the footer*/
	footer {   	
	   
	   	bottom: 0;
	   	height: 27px;/*3% of 900 screenheight = 27*/
	   	text-align: center;
	   	font-size: 15px;
	   	
	}
	
	/*Style properties of content parts*/	
	
	/*Style properties of movie and text containers for the home page*/
	#container_movie_main{
		width: 752px; /*Percentage of content width (thus 90% of 58% of 1440*/
		margin: 0 auto;
	}
	
	#container_logo_gif{
		background-image: url('Images/Home/Welcome_AnimatedGif/Logo_20fps_2s_wwvar_753x424.gif');
		background-repeat: no-repeat;
		background-position: center center;    
		background-size: 752px 424px;
	}

	
	#container_logo_gif:hover{
		cursor: pointer;		
		background-image: url('Images/Home/Welcome_AnimatedGif/Logo_20fps_2s_wwvar_753x424_inf.gif');
		background-repeat: no-repeat;
		background-position: center center;    
		background-size: 100% 100%;
			
	}	


	#container_text_homePag{
		width: 668px; /*Percentage of content width (thus 80% of 58% of 1440*/
		margin: 0 auto;
		margin-top: 14px; /*~14px on 1440*/ 		
	}
		
	/*Style properties of normal text on the web page*/
	p.left_normalSize{
		text-align: left;
		font-size: 17px;		
		line-height: 26px;
		margin-bottom: 29px;
	}
	
	p.date_name{
		text-align: center;
		font-size: 17px;
		line-height: 26px;
		margin-bottom: 29px;
		color: gray;
	}

	
	/*
	.container_text_margins_centered{
		width: 80%;
		margin: 0 auto;		
	}
	*/
		
	#container_responsive_billboard_ad {
		width: 830px; /*same as content width*/
		margin: 0 auto;
		margin-top: 14px;/*was 1vw which is~14px on 1440*/ 	
		margin-bottom: 14px;/*was 1vw which is~14px on 1440*/ 		
	
	}
	
	.ad_resp_kleur2 {
		width: 728px;
		height: 90px;
		margin: 0 auto;
}


	
	/*Style properties of the animation thumbnails on the animation-main page*/
	/*Container for the thumbnail*/
	#container_thumbnails_animationsHomePag{
		width: 830px; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 14px;/*was 1vw wich is~14px*/
		margin-top: -14px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;

	}

	#container_single_thumbnail_animationsHomePag{
		display: inline-block;
		width: 278px; /*33% of #container_thumbnails_animationsHomePag width = 33% content width = 19.3vw=278px*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}
	
	#container_halfspacing_thumbnail_animationsHomePag{
		display: inline-block;
		width: 138px; /*The thumbs are large now, (1/3)*content width. Need spacings at each side of half the width of a container to have two buttons at one line (278/2=139, downscaled with 1px)*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}


	a.animation_category_thumbnail_meditation{		
		
		background-image: url('Images/AnimationHome_CategoryThumbnails/Button_Anim_meditatie_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 278px; /*100% of container width = (1/3) of content width = 19.3vw=278px*/
		height: 166px; /*11.5vw*/
						
		font-size: 29px;/*was 2vw~28.8px at 1440*/
		line-height: 166px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;	
		text-indent: 25px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970; 

	
	}

	a.animation_category_thumbnail_Seasonal{
		background-image: url('Images/AnimationHome_CategoryThumbnails/Button_Anim_seasonal_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 278px; /*100% of container width = (1/3) of content width = 19.3vw=278px*/
		height: 166px; /*11.5vw*/
				
		font-size: 29px;/*was 2vw~28.8px at 1440*/
		line-height: 166px;/*Same as height of image to put it in the middle of the vertical space*/			
		font-weight: 700;	
		text-align: center;		
		text-indent: 25px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970; /*CCFFCC #006400 was hiervoor #98FB98 */
	
	}
	
	/*Style properties of the crochet thumbnails on the crochet-main page*/
	/*Container for the thumbnail*/
	#container_thumbnails_crochetHomePag{
		width: 830px; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 14px;/*was 1vw wich is~14px*/
		margin-top: -14px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;

	}

	#container_single_thumbnail_crochetHomePag{
		display: inline-block;
		width: 278px; /*33% of #container_thumbnails_animationsHomePag width = 33% content width = 19.3vw=278px*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}
	
	#container_halfspacing_thumbnail_crochetHomePag{
		display: inline-block;
		width: 138px; /*The thumbs are large now, (1/3)*content width. Need spacings at each side of half the width of a container to have two buttons at one line (278/2=139, downscaled with 1px)*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}


	a.crochet_category_thumbnail_octo{		
		
		background-image: url('Images/CrochetHome_CatergoryThumbs/Button_Crochet_Octo_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 278px; /*100% of container width = (1/3) of content width = 19.3vw=278px*/
		height: 166px; /*11.5vw*/		
						
		font-size: 29px;/*was 2vw~28.8px at 1440*/
		line-height: 166px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;	
		text-indent: 25px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970; 

	
	}

	a.crochet_category_thumbnail_projects{
		background-image: url('Images/CrochetHome_CatergoryThumbs/Button_Crochet_Proj_500x300_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 278px; /* (1/3) of container width = 25% of content width = 14.5vw=207.5px*/
		height: 166px; /*11.5vw*/
				
		font-size: 29px;/*was 2vw~28.8px at 1440*/
		line-height: 166px;/*Same as height of image to put it in the middle of the vertical space*/			
		font-weight: 700;	
		text-align: center;		
		text-indent: 25px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970; /*CCFFCC #006400 was hiervoor #98FB98 */
	
	}

	/*Properties Octopus gallery images (3 images on one line - left aligned)*/
	#container_images_Three_OneLine{
		width: 830px; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 14.4px; /*1vw=14.4px*/
		margin-top: -14.4px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
	}
	
	#container_ImageText_Three{		
		display: inline-block;
		width: 267px; /*(1/3) of the OneLine container = 33%. Downscale with 1%. This is 32% of 58vw = 18.56vw.= 267px of 1440px */
		height: 320px; /*Height of image (14.4vw=207px) + 4x line height (207+4*26px) = 311px upscaled to 320 px*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_Three{
		display: inline-block;
		width: 267px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
		overflow: hidden;		
	
	}
	
	#container_Text_Three{
		display: inline-block;
		width: 267px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}

	p.center_normalSize{
		text-align: left;
		font-size: 17px;		
		line-height: 26px;
		margin-bottom: 29px;
		margin-right: 13px;

	}	
	
	/*Properties Gallery images (1 or 2 images centered)*/
	/*1 image centered*/
	#container_images_One_OneLine{
		width: 830px; /*100% of content width= 58vw=830px*/		
		margin: auto;
		margin-bottom: 14.4px; /*1vw=14.4px*/
		margin-top: -14.4px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
		padding-left: 81px;
		padding-right: 81px;
	}
	
	#container_ImageText_One{		
		display: inline-block;		
		width: 668px; /*80% of the Oneline container (= 80% of 58vw = 46.4 vw = 668px)*/
		height: 605px; /*Image = 1000x750 px. If width is 46.4vw then height is 46.4*0.75=34.8vw.  Plus 4x line height = 34.8 + 4x line height (4*1.8vw) = 34.8+4*1.8 = 42vw = 605px*/					
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_One{
		display: inline-block;
		width: 668px; /*Full width of the Image/Text container*/
		margin: auto;			
		background-color: transparent;
		vertical-align: middle;			
		overflow: hidden;		
	
	}
	
	#container_Text_One{
		display: inline-block;
		width: 668px; /*Full width of the Image/Text container*/
		margin: auto;			
		background-color: transparent;
		vertical-align: middle;		

	}
	
	/*2 images centered*/
	#container_images_Two_OneLine{
		width: 830px; /*100% of content width= 58vw=830px*/		
		margin: 0 auto;
		margin-bottom: 14.4px; /*1vw=14.4px*/
		margin-top: -14.4px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
		padding-left: 83px;
		padding-right: 83px;
	}
	
	#container_ImageText_Two{		
		display: inline-block;
		margin: 0 auto;
		width: 332px; /*40% of the Oneline container. 40%van 830px = 332px*/
		height: 360px; /*Image = 1000x750 px. If width is 332 then height is 332*0.75=249px.  Plus 4x line height = 249 + 4x line height (4*1.8vw = 4*26px) = 249+4*26 = 353px*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_Two{
		display: inline-block;
		width: 332px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			
		overflow: hidden;		
	
	}
	
	#container_Text_Two{
		display: inline-block;
		width: 332px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}


	
	
	/*Style properties of animation pages, category header, animation container etc.*/
	
	h1.animation_pageHeader_Meditation{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 830px; /*% of container width = 100% of content width = 58vw=830px*/
		height: 72px; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 57px;/*4vw of 1440 is 57.6px*/
		line-height: 72px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	h1.animation_pageHeader_Seasonal{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 830px; /*% of container width = 100% of content width = 58vw=830px*/
		height: 72px; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 57px;/*4vw of 1440 is 57.6px*/
		line-height: 72px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}

	h1.animation_category_relaxation{
		background-image: url('Images/Headers_Animation_Categories/Relaxation/Header_relaxation_830x36_3_3D.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 830px 36px;
	
		display: block;
    	font-size: 29px;
    	height: 36px;
    	padding-top: 4px;
    	padding-bottom: 4px;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;
    	color:white;
    	text-align: center;      	
	
	}
	
	h1.animation_category_Xmas{
		background-image: url('Images/Headers_Animation_Categories/Seasonal/Header_Seasonal_830x36_3_3D.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	font-size: 29px;/*2vw = 29px*/
    	height: 36px;/*2.5vw =36px*/
    	padding-top: 4px;/*0.25vw = 4 px*/
    	padding-bottom: 4px;/*0.25vw = 4 px*/
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;
    	color: #fac400;/*#300000 #fac400 met rood*/
    	text-align: center;  	
    	
	
	}
	
	
	/*Style properties container for the single animations, with title, embedded video and explanation text*/
	.container_animation{
		width: 835px; /*% of content width= 58vw of 1440*/
		margin-top: 29px;
		background-color: transparent;
	}	
	
	h1.animation_title{
		display: block;		
    	font-size: 17px;
    	line-height: 26px;
    	margin-top: 7px;
    	margin-bottom: 7px;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;  	
	}
	
	.container_animation_thumbnail{
		display: inline-block;
		vertical-align: top;
		width: 417px; /*percentage of animation container width. 50% of container width = 100%/2 content width = 58/2vw=29vw*/	
		height: 230px; /*From youtube the animation is 560x315px. I putted the width of this container to 29vw so the height is ~16vw*/	
		background-color: transparent;
	}
		
	.container_animation_explanation{
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
		width: 405px; /*percentage of animation container width.*/
		background-color: transparent;
	}
	
	p.animation_explanation{
		text-align: left;
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 7px;
	}
	
		/*Style properties of crochet pages*/
	
	h1.crochet_pageHeader_octo{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 830px; /*% of container width = 100% of content width = 58vw=830px*/
		height: 72px; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 57px;/*4vw of 1440 is 57.6px*/
		line-height: 72px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	h1.crochet_pageHeader_projects{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_830x72_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 830px; /*% of container width = 100% of content width = 58vw=830px*/
		height: 72px; /*It is a image of 830x72 px. width = 100%container width = 58vw. Thus height = (58/830)*72~5vw */
						
		font-size: 57px;/*4vw of 1440 is 57.6px*/
		line-height: 72px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 700;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	/*Centered header*/
	h1.centered_heading{	
		
	    background-position: center center;    
	   	background-size: 100% 100%;		
    	font-size: 2vw;
    	height: 2.5vw;
    	padding-top: 0.25vw;
    	padding-bottom: 0.25vw;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;    	
    	text-align: center;  	
    	color: #191970;

	}



}




/*At smaller screens:
- optimized for 600 screenwidth!
- page = full 600px (so not 90%)
- no spacings.
- smaller font size
- later on: smaller sized image files to improve loading*/
@media screen and (max-width: 799px) {
	/*General style properties html*/
	html {
		
		/*background color shown in case the background image needs to load*/
		background-color: #ffeaa5;
	
		/*background image*/
		/*later on need to look if this needs to be putted at */
		background-image: url('Images/Pagina_Achtergrond/Achtergrond_Boom_600x600.jpg');    
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-attachment: fixed;   
    	background-size: 600px 600px;	    	
   	
		height: 100%;  
		height: auto;
		
		margin-top: 0;	
		margin-left: 0;
		padding-top: 0;	
		
		font-size: 10px; /*The standard font size*/	
  	
	} 

	/*Style properties whole content webpage*/
	/*I want the webpage to be 90% of the screenwidth, all the other divs are this one such that everything is rescaled
	at once when neccesarry*/
	body{
	
		position: relative;
		margin-top: 0;
		padding-top: 0;
		width: 600px;	
		margin: 0 auto;
		background-color: transparent;
		height: 97vh;
			
	}

	/*Style properties of the header*/
	header{
		position: relative;
		top: 0;
		padding-top: 0;
		left: 0;	
		z-index: 9999;
		height: 109px;/*bannerheight + main nav height + 2.5% of 600px*/			
		background-color: transparent;	
		width: 600px; /*fixed width*/	
		
		/* Here no header background is needed as the header is non fixed
		background-image: url('Images/Pagina_Achtergrond/Achtergrond_Boom_600x600.jpg');    
    	background-repeat: no-repeat;
    	background-position: center top;    	
    	background-size: 600px 600px;	
    	*/ 

	}


	/*Style properties logo on top of page*/
	#banner_logo{
		position: relative;	
		left: 88px;	/*same as block_1+ spacing_1, precentage of header width, 13%+10pxof 600px = 78+10*/	
		width: 424px; /*100vw-13vw-13vw = 74vw-10px-10px from 600px*/
	
	}
	
	#social_buttons{
		position: relative;
		left: 88px;
		width: 424px;
		height: 12px;				
		
		background-color: transparent;
		
	}

	
	#share_fb{		
		display: inline-block;
		position: relative; 		
		right: 0px;
		top: 0px;	
		background-repeat: no-repeat;
		background-position: center center;

		
		height: 12px; /*take 2%of 600px as height (28p=1.9% of 1440) = 12px */
		width: 33px;/*the image is 390x143px thus with a height of 12px this means a width of 33px*/
		
	}
	
	#share_tw{	
		display: inline-block;
		position: relative; 
		right: 0px;
		top: 0px;
		background-repeat: no-repeat;
		background-position: center center;

		
		height: 12px; /*the image is 333x115 px */
		width: 35px;/*the image is 333x115px thus with a height of 12px this means a width of 35px*/

	}
	
	#follow_tw{	
		display: inline-block;	
		position: relative; 
		right: 0px;
		top: 0px;	
		background-repeat: no-repeat;
		background-position: center center;

		
		height: 12px; /*the image is 165x51 px */
		width: 39px;/*the image is 165x51px thus with a height of 12px this means a width of 39px*/

	}
	
	#follow_yt{		
		/*background-image: url('Images/Subscribe/youtube-subscribe-button.png');	*/
		display: inline-block;	
		position: relative; /*is now placed within banner logo*/
		right: 0px;
		top: 0px;	
		background-repeat: no-repeat;
		background-position: center center;
		   
		height: 12px; /*the image is 2400x600 px */
		width: 48px; /*the image is 2400x600px thus with a height of 12px this means a width of 48px*/
	}
	



	/*Style properties navigation bar*/
	#main_nav{
		/*style properties for div id created to set the style of the whole navigation*/
		position: relative;
		top: 0%;/*percentage of header height*/
		padding: 0; 	
		left: 88px;/*same as block_1+ spacing_1, precentage of header width, 13%+10pxof 600px = 78+10*/
		width: 512px; /*100vw-13vw-10px = 87vw from 600px*/		
		background-color: transparent;
		height: 20px; /*~3.33vw of 600px screen width*/		
		
	}

	main_nav.nav{
		/*nav tag style properties for HTML 5*/	
		display: block;
		
	}

	main_nav.ul{
		/*ul style properties for the navigation when the nav tag does not work*/	
		list-style-type: none;
	
	}

	main_nav.a {
		display: inline-block;
	}

	#nav_Home_Active, #nav_Animations_Active, #nav_Contact_Active,#drop_nav_Crochet_Active{
		background-image: url('Images/Navigation/LeadNav_Pressed_60x20_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;	   	
	   	
	   	display: inline-block;		
		overflow: hidden;	
		width: 60px; /*3*width*/
		height: 20px; /*3.33vw of 600px and the height is 3*width*/	
		
		font-size: 10px;
		line-height: 20px;
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#nav_Home_nonActive, #nav_Animations_nonActive, #nav_Contact_nonActive,#drop_nav_Crochet_nonActive {	
		background-image: url('Images/Navigation/LeadNav_UnPressed_60x20_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;
	   	
		display: inline-block;		
		overflow: hidden;				
		width: 60px;
		height: 20px;	
		
		font-size: 10px;
		line-height: 20px;
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}


	/*Style properties of drop down menu on main nav*/
		
	li{
	
		float: left;
		list-style-type: none;
	
	}
	
	li a, .dropbtn {
    	display: inline-block;
    	color: white;
    	text-align: center;    	
    	text-decoration: none;
	}

	li a:hover, .dropdown:hover .dropbtn {
    	background-color: transparent;
    	
	}

	li.dropdown {
	    display: inline-block;
	}

	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: transparent;	   
	}

	.dropdown-content a {
		background-image: url('Images/Navigation/LeadNav_UnPressed_60x20_backgr_invisible.png');	
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;		   	  	
   
	    display: block;	
	    overflow: hidden;	
		width: 60px;
		height: 20px;
    
	    font-size: 10px;
		line-height: 20px;		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;	

	}

	.dropdown-content a:hover {
		background-color: transparent;
		
		
	}
	
	.dropdown:hover .dropdown-content {
	    display: block;
	}
	
	#drop_nav_Animations_Active,#drop_nav_Meditation_Active,#drop_nav_Seasonal_Active, #drop_nav_Octo_Active,#drop_nav_CrochetProj_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_60x20_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;
	   	
	   	
	   	display: block;		
		overflow: hidden;	
		width: 60px;
		height: 20px;	
		
		font-size: 10px;
		line-height: 20px;		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;	
		
	}
	
	#drop_nav_Animations_nonActive,#drop_nav_Meditation_nonActive,#drop_nav_Seasonal_nonActive,#drop_nav_Octo_nonActive,#drop_nav_CrochetProj_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_60x20_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;
	   	
		display: block;		
		overflow: hidden;				
		width: 60px;
		height: 20px;
		
		font-size: 10px;
		line-height: 20px;		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;
	}
	
	/*Style properties SIDE navigation bar*/
	#side_nav{
		/*style properties for div id created to set the style of the whole navigation*/
		position: relative;
		top: 70px;/*spacing + project header height (5vw)*/
		padding: 0; 	
		left: 15px;/*block 1 = 78px */
		width: 60px; /*the width of the leaf (see above)*/		
		background-color: transparent;		
		height: 20px; /*the height of the leaf (see above)*/
		
	}

	nav.side_nav_nav{
		/*nav tag style properties for HTML 5*/	
		display: block;
		
	}

	ul.side_nav_ul{
		/*ul style properties for the navigation when the nav tag does not work*/	
		list-style-type: none;
	
	}

	a.side_nav_a {
		display: inline-block;
	}

	#nav_2018_Active, #nav_ProjGallery_Active {
		background-image: url('Images/Navigation/LeadNav_Pressed_60x20_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;
	   	
	   	
	   	display: inline-block;		
		overflow: hidden;	
		width: 60px;
		height: 20px;	
		
		font-size: 10px;
		line-height: 20px;		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #FFF000;

	}
	
	#nav_2018_nonActive, #nav_ProjGallery_nonActive {
	
		background-image: url('Images/Navigation/LeadNav_UnPressed_60x20_backgr_invisible.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 60px 20px;
	   	
		display: inline-block;		
		overflow: hidden;				
		width: 60px;
		height: 20px;
		
		font-size: 10px;
		line-height: 20px;		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;
		color: #CCFFCC;	
		
	}


	/*Style poperties of the wrapper containing the containers for avertisement, spacings and content.*/
	#wrapper{
				
		/*About the top margin:
		The top margin should be the same as the height of the header. The header consists of the banner, the main nav and
		sub nav. Calculating total height in terms of vw:
		banner: 2559x423px thus height/width~6.05
		banner width = 444px thus its height is 73.4px
		the height of the main nav is 20px. Normally i did a 2.5vw extra spacing for the subnav.
		2.5% of 600 is: 15px.
		thus total height is: 73.4+20+15=108.4px, thus take 109px*/		
		margin-top: 1px; /*when choosing the height of the header, there is a very large space between the header*/
		background-color: transparent;
		width: 600px;
		left: 30px;
		right: 30px;	
		
		min-height: 97%;
		height: auto !important;
		padding-bottom: 3%;		
	
	
		
		

		
	}
	
	#block_1{
		
		display: inline-block;
		/*margin-top: 0px;*/
		vertical-align: top;
		width: 78px; /*14% of the 90% of the screen width ~13% of the screen width, 13vw of 600*/	

		background-color: transparent;	
	
	}
	
	#spacing_1{
	
		display: inline-block;
		vertical-align: top;
		width: 10px;
		background-color: transparent;
		z-index: 9999;		
	
	}
	
	#content{
	
		display: inline-block;
		vertical-align: top;
		width: 424px;/*100-13-13=74% of 600, -2*10px of the spacings*/
		background-color: transparent;	
				
		
	}
	
	#spacing_2{
		
		display: inline-block;
		vertical-align: top;
		width: 10px;
		background-color: transparent;				
		
	}
	
	#advertisement_block{	
	
		display: inline-block;
		vertical-align: top;
		width: 78px;
		background-color: transparent;	
		
	}
	
	
	/*Style properties of the footer*/
	footer {   	
	   
	   	bottom: 0;
	   	height: 3%;
	   	text-align: center;   
	   	
	}
	
	/*Style properties of content parts*/	
	
	/*Style properties of movie and text containers for the home page*/
	#container_movie_main{
		width: 382px; /*90% of the 424 px content width*/
		margin: 0 auto;
	}
	
	#container_logo_gif{
		background-image: url('Images/Home/Welcome_AnimatedGif/Logo_20fps_2s_wwvar_382x215.gif');
		background-repeat: no-repeat;
		background-position: center center;    
		background-size: 382px 215px;
	}	
	
	#container_logo_gif:hover{
		cursor: pointer;		
		background-image: url('Images/Home/Welcome_AnimatedGif/Logo_20fps_2s_wwvar_382x215_inf.gif');
		background-repeat: no-repeat;
		background-position: center center;    
		background-size: 100% 100%;
			
	}	


	
	#container_text_homePag{
		width: 340px; /*80% of 424 px content width*/
		margin: 0 auto;
		margin-top: 6px; /*1vw thus 1% of 600*/ 		
	}
		
	/*Style properties of normal text on the web page*/
	/*The normal text should be 16px at least at 1024 screenwidth (most tablets), this is 1.5vw*/
	p.left_normalSize{
		text-align: left;
		font-size: 10px;/*10px*/		
		line-height: 15px; /*15px*/
		margin-bottom: 15px; /*same as line height*/
	}
	
	p.date_name{
		text-align: center;
		font-size: 10px;
		line-height: 15px;
		margin-bottom: 15px;
		color: gray;
	}

	
	/*
	.container_text_margins_centered{
		width: 80%;
		margin: 0 auto;		
	}
	*/
	
	
	#container_responsive_billboard_ad {
		width: 320px;/*content width = 424px. de ad die past is 320px dus om het goed te centeren zeg ik 320px.*/
		margin: 0 auto;
		margin-top: 6px;/*1vw of 600*/ 		
		margin-bottom: 6px;/*1vw of 600*/ 	
	
	}
	
	
	.ad_resp_kleur2 {
		width: 320px;
		height: 100px;
		margin: 0 auto;
}
	
	/*Style properties of the animation thumbnails on the animation-main page*/
	/*Container for the thumbnail*/
	#container_thumbnails_animationsHomePag{
		width: 424px; /*100% of content width= 424px*/		
		margin: 0 auto;
		margin-bottom: 6px;/*1vw of 600*/ 
		margin-top: -6px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;

	}

	#container_single_thumbnail_animationsHomePag{
		display: inline-block;
		width: 140px; /*33% of content width = 33% of #container_thumbnails_animationsHomePag width = 424*0.33=140*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}
	
	#container_halfspacing_thumbnail_animationsHomePag{
		display: inline-block;
		width: 69px; /*The thumbs are large now, (1/3)*content width. Need spacings at each side of half the width of a container to have two buttons at one line (140/2=70, downscaled with 1px)*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}


	a.animation_category_thumbnail_meditation{		
		
		background-image: url('Images/AnimationHome_CategoryThumbnails/Button_Anim_meditatie_250x150_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 140px; /*100% of container width = 140px*/
		height: 84px; 
						
		font-size: 12px;/*2vw of 600*/
		line-height: 84px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;	
		text-indent: 13px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970;	
	}

	a.animation_category_thumbnail_Seasonal{
		background-image: url('Images/AnimationHome_CategoryThumbnails/Button_Anim_seasonal_250x150_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 140px; /*100% of container width = 140px*/
		height: 84px; 
				
		font-size: 12px;/*2vw of 600*/
		line-height: 84px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;		
		text-indent: 13px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970; /*CCFFCC #006400  */
	
	}
	
	/*Style properties of the crochet thumbnails on the crochet-main page*/
	/*Container for the thumbnail*/
	#container_thumbnails_crochetHomePag{
		width: 424px; /*100% of content width= 424px*/		
		margin: 0 auto;
		margin-bottom: 6px;/*1vw of 600*/ 
		margin-top: -6px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;

	}

	#container_single_thumbnail_crochetHomePag{
		display: inline-block;
		width: 140px; /*33% of content width = 33% of #container_thumbnails_animationsHomePag width = 424*0.33=140*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}
	
	#container_halfspacing_thumbnail_crochetHomePag{
		display: inline-block;
		width: 69px; /*The thumbs are large now, (1/3)*content width. Need spacings at each side of half the width of a container to have two buttons at one line (140/2=70, downscaled with 1px)*/	
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			

	}


	a.crochet_category_thumbnail_octo{		
		
		background-image: url('Images/CrochetHome_CatergoryThumbs/Button_Crochet_Octo_250x150_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 140px; /*100% of container width = 140px*/
		height: 84px; 
						
		font-size: 12px;/*2vw of 600*/
		line-height: 84px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;	
		text-indent: 13px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970;

	
	}

	a.crochet_category_thumbnail_projects{
		background-image: url('Images/CrochetHome_CatergoryThumbs/Button_Crochet_Proj_250x150_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: inline-block;		
		overflow: hidden;				
		width: 140px; /*100% of container width = 106px*/
		height: 84px; 
				
		font-size: 12px;/*2vw of 600*/
		line-height: 84px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;		
		text-indent: 13px; /*1.7vw zie excel bestand met plaatjes groottes*/	
		text-decoration: none;			
		color: #191970; /*CCFFCC #006400  */
	
	}


	/*Properties Octopus gallery / projects gallery images (3 images on one line)*/
	#container_images_Three_OneLine{
		width: 424px; /*100% of content width= 424px*/		
		margin: 0 auto;
		margin-bottom: 6px; /*1vw of 600px = 6px*/
		margin-top: -6px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
	}
	
	#container_ImageText_Three{		
		display: inline-block;
		width: 300px; /*(1/3) of the OneLine container = 33%. Downscale with 1%. This is 32% of 58vw = 18.56vw. */
		height: 290px; /*Height of image (14.4vw=86px) + 4x line height (4*15px) = 86+4*15 = 146px upscaled to 155px */
		margin: 0 62px auto 62px;	/*424-300=124. 124/2=62px */		
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_Three{
		display: inline-block;
		width: 300px; /**/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
		overflow: hidden;		
	
	}
	
	#container_Text_Three{
		display: inline-block;
		width: 300px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;				

	}

	p.center_normalSize{
		text-align: left;
		font-size: 10px;/*10px*/		
		line-height: 15px; /*15px*/
		margin-bottom: 15px; /*same as line height*/
		margin-right: 15px;		

	}	
	
	/*Properties Gallery images (1 or 2 images centered)*/
	/*1 image centered*/
	#container_images_One_OneLine{
		width: 424px; /*100% of content width= 424px*/		
		margin: 0 auto;
		margin-bottom: 6px; /*1vw=6px*/
		margin-top: -6px;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
		padding-left: 42.4px; /*10% of 424px = 42.4px */
		padding-right: 42.4px;
	}
	
	#container_ImageText_One{		
		display: inline-block;		
		width: 340px; /*80% of the Oneline container (= 80% 424px = 340px)*/
		height: 315px; /*Image = 1000x750 px. If width is 340px then height is 340*0.75=255px.  Plus 4x line height = 255 + 4x line height (4*15px) = 255+4*15= 315px*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_One{
		display: inline-block;
		width: 340px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			
		overflow: hidden;		
	
	}
	
	#container_Text_One{
		display: inline-block;
		width: 340px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}
	
	/*2 images centered*/
	#container_images_Two_OneLine{
		width: 424px; /*100% of content width= 424px*/		
		margin: 0 auto;
		margin-bottom: 1vw; /*1vw=14.4px*/
		margin-top: -1vw;/*The text paragraph has a bottom margin of 2vw, This div looks better when a bit closer*/		
		background-color: transparent;
		overflow: auto;
		padding-left: 43px; /*(424-(2*169))/2*/
		padding-right: 43px;

	}
	
	#container_ImageText_Two{		
		display: inline-block;
		margin: auto;
		width: 169px; /*40% of the Oneline container*/
		height: 186px; /*Image = 1000x750 px. If width is 169 then height is 169*0.75=126px.  Plus 4x line height = 126 + 4x line height (4*15px) = 126+4*15 = 186px*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		
	}
	
	#container_Image_Two{
		display: inline-block;
		width: 169px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;			
		overflow: hidden;		
	
	}
	
	#container_Text_Two{
		display: inline-block;
		width: 169px; /*Full width of the Image/Text container*/
		margin: 0 auto;			
		background-color: transparent;
		vertical-align: middle;		

	}


	/*Style properties of animation pages, category header, animation container etc.*/
	
	h1.animation_pageHeader_Meditation{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_424x37_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 424px; /*100% of container width = 100% of content width = 424px*/
		height: 37px; /*Original is 830x72 px. Thus with width of 424px gives height=36.7px~37px */
						
		font-size: 24px;/*4vw of 600*/
		line-height: 37px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	h1.animation_pageHeader_Seasonal{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_424x37_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 424px; /*% of container width = 100% of content width = 424px*/
		height: 37px; /*Original is 830x72 px. Thus with width of 424px gives height=36.7px~37px */
						
		font-size: 24px;/*4vw of 600*/
		line-height: 37px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}

	h1.animation_category_relaxation{
		background-image: url('Images/Headers_Animation_Categories/Relaxation/Header_relaxation_346x15_3_3D.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 346px 15px;
	
		display: block;
    	font-size: 12px; /*2vw of 600*/
    	height: 15px; /*2.5vw of 600*/
    	padding-top: 2px; /*0.25vw of 600*/
    	padding-bottom: 2px; /*0.25vw of 600*/
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;
    	color:white;
    	text-align: center;  	
    		
	}
	
	h1.animation_category_Xmas{
		background-image: url('Images/Headers_Animation_Categories/Seasonal/Header_Seasonal_346x15_3_3D.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	font-size: 12px; /*2vw of 600*/
    	height: 15px; /*2.5vw of 600, same as image height*/
    	padding-top: 2px; /*0.25vw of 600*/
    	padding-bottom: 2px; /*0.25vw of 600*/
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;
    	color: #fac400;/*#300000 #fac400 met rood*/
    	text-align: center;  	
    		
	}
	
	/*Style properties container for the single animations, with title, embedded video and explanation text*/
	.container_animation{
		width: 424px; /*100% of content width= 58vw = 424px*/
		margin-top: 12px; /*2vw of 600*/
		background-color: transparent;
	}	
	
	h1.animation_title{
		display: block;		
    	font-size: 10px; /*10 px*/
    	line-height: 15px; /*15px*/
    	margin-top: 3px; /*0.5vw of 600*/
    	margin-bottom: 3px; /*0.5vw of 600*/
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;  	
	}
	
	.container_animation_thumbnail{
		display: inline-block;
		vertical-align: top;
		width: 212px; /*50% of animation container width. 50% of container width = 100%/2 content width = 58/2vw=29vw*/	
		height: 119px; /*From youtube the animation is 560x315px. (315/560)*212=~119px */	
		background-color: transparent;
	}
		
	.container_animation_explanation{
		display: inline-block;
		vertical-align: top;
		margin-left: 4px; /*1% of 424*/
		width: 208px; /*50%-1% of 424px*/
		background-color: transparent;
	}
	
	p.animation_explanation{
		text-align: left;
		font-size: 10px; /*10px*/
		line-height: 15px; /*15px*/
		margin-bottom: 3px; /*0.5vw of 600px*/
	}
	
	/*Style properties of crochet pages*/
	
	h1.crochet_pageHeader_octo{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_424x37_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 424px; /*100% of container width = 100% of content width = 424px*/
		height: 37px; /*Original is 830x72 px. Thus with width of 424px gives height=36.7px~37px */
						
		font-size: 24px;/*4vw of 600*/
		line-height: 37px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	h1.crochet_pageHeader_projects{
		background-image: url('Images/AnimCroch_PageHeaderBackgr/General_header_424x37_v2.png');
		background-repeat: no-repeat;
	    background-position: center center;    
	   	background-size: 100% 100%;
	
		display: block;
    	overflow: hidden;				
		width: 424px; /*% of container width = 100% of content width = 424px*/
		height: 37px; /*Original is 830x72 px. Thus with width of 424px gives height=36.7px~37px */
						
		font-size: 24px;/*4vw of 600*/
		line-height: 37px;/*Same as height of image to put it in the middle of the vertical space*/		
		font-weight: 500;	
		text-align: center;		
		text-decoration: none;			
		color: #191970;
	
	}
	
	/*Centered header*/
	h1.centered_heading{	
		
	    background-position: center center;    
	   	background-size: 100% 100%;		
    	font-size: 2vw;
    	height: 2.5vw;
    	padding-top: 0.25vw;
    	padding-bottom: 0.25vw;
    	margin-left: 0;
    	margin-right: 0;
    	font-weight: bold;
    	background-color:transparent;    	
    	text-align: center;  	
    	color: #191970;

	}

	

}

/*Speciaal voor de billboard ad (die moet vanaf 1224px breedte al de kleine worden)*/
@media screen and (max-width: 1224px) {

	.ad_resp_kleur2 {
		width: 320px;
		height: 100px;
		margin: 0 auto;
	}


}