/*
#####################################################################
LAKER Version 1.1 – http://www.lakercompendium.com
#####################################################################
#####################################################################
This file contains a modified version of the LESS CSS Framework
(http://www.lessframework.com). 

See www.lakercompendium.com for more details.
#####################################################################
#####################################################################
#####################################################################
*/
@charset "UTF-8";
/*	Imports
	------	*/
@import url('fonts.css');
@import url('typography.css');
@import url('structure.css');
@import url('media.css');
@import url('nav.css');
@import url('soundbox.css');
@import url('slideshow.css');
@import url('card-flip.css');

/*Turn on the visual grid view, by deleting the "/*"...
@import url('display-grid.css');
*/


/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/
	
/*	Resets
	------	*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,hr,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,hgroup,menu,footer,header,nav,section,summary,time,mark,audio,video {     }

img::-moz-selection {    background: transparent }
img::selection {    background: transparent }

article,aside,canvas,figure,figure img,figcaption,hgroup,footer,header,nav,section,audio,video {    display: block }
a img {    border: 0 }
body {    overflow-x: hidden }

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 11; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.demo-iframe-holder {
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 500px;
  width: 100%;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}


.dossier-headline-arrow {
    position: relative;
    margin-top: -38px; margin-bottom: -15px; margin-left: 440px;
	z-index: 10
}
.dossier-headline-arrow img {
    width: 30px; height: 30px
}

.input-table {
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
	color: #555555;
	border: 0px;
	background-color: transparent !important;

}

.wrapper {
  width:100%;
  max-width:1357px;
  height:100%;
  margin:0 auto;
}

.h_iframe {
  position:relative;
  padding-top: 45%;
}

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

.table-icons {
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
	color: #555555;
	border: 1px solid black;

}

.styling-table-input table{
	border-collapse: collapse;
	text-transform: uppercase;
	width: 100%;

}

.styling-table-input td, th{
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
    margin-bottom: 15px;
    color: #555555;
    line-height: 1.50em;

}

.input-text {
	text-align: center;
	vertical-align: middle;
	font-family: 'PTSerifRegular';
	color: #555555;
	font-size: 1em;

}

.input-number {
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
	color: #555555;
	border: 1px solid black;

}

.crossword-style td, th {
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
    margin-bottom: 15px;
    color: #555555;
    line-height: 1.50em;

}

.nav-arrows td, th {
	border: 1px solid #75b76e;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
    margin-bottom: 15px;
    color: #555555;
    line-height: 1.50em;
    background-color: #a1e29a;

}

.nav-arrows a {
    display:block;
    width:100%;
    border-bottom:none;
}

.nav-arrows td:hover, th:hover {
	color: #fff;
	border: 1px solid #a1e29a;
    background-color: #75b76e;

}

.crossword-style table {
	border-collapse: collapse;
	text-transform: uppercase;
	width: 100%;
	
}

.crossword-style span{
	 border: 0px;
	 background-color: transparent !important;
}

.crossword-style2 table {
	border-collapse: collapse;
	width: 100%;
	
}

.crossword-style2 td, th {
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	font-size: 1.188em;
	font-family: 'PTSerifRegular';
    margin-bottom: 15px;
    color: #555555;
    line-height: 1.50em;

}

.crossword-style2 input[type=text]{
	 border: 0px;
	 background-color: transparent !important;
}

/* Selection colours (easy to forget) */
::selection {    background: #d3f9f2 }
::-moz-selection {    background: #d3f9f2 }
body {
    margin: auto;
    -webkit-tap-highlight-color: #d3f9f2
}


/*
##########################################################################
##########################################################################
		Default Layout: 952px.
		Content-Element width: 952px.
		Gutters: 24px.
		Outer content margins: 28px.
		Leftover space for scrollbars @1024px: 32px.
##########################################################################
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    
##########################################################################
##########################################################################
*/

body {
    width: 952px;
    padding: 0px;
    background-color: #EEFFF6; color: rgb(60,60,60);
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

.portrait {    display: none }
.browser-only {    display: block }
.ipad-only,
.iphone-only,
.ios-only {    display: none }


/*
##########################################################################
##########################################################################
		Tablet Layout: 768px.
		Content-Element width: 712px.
		Gutters: 24px.
		Outer content margins: 28px.
		Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    
##########################################################################
##########################################################################
*/

@media only screen and (min-width: 768px) and (max-width: 991px) { 
	body {
	    width: 768px;
	    padding-right: 0px; padding-bottom: 0px; padding-left: 0px !important;
	    margin: auto
	}
	
	.dossier-headline-arrow {  margin-left: 350px; }

	.demo-iframe-holder {
	  height: 350px;
	  -webkit-overflow-scrolling: touch;
	  overflow-y: scroll;
	}

	.demo-iframe-holder iframe {
	  height: 350px;
	  width: 100%;
	}
	
}


/*
##########################################################################
##########################################################################
		iPad Layout Portrait: 768px.
		Content-Element width: 712px.
		Gutters: 24px.
		Outer content margins: 28px.
		Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712   
##########################################################################
##########################################################################
 */
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
	body {
	    width: 100%;
	    margin: 0px; padding: 0px
	}
	.portrait {    display: block }
	.landscape {    display: none }
	.browser-only {    display: none }
	.ipad-only,
	.ios-only {    display: block }

	.demo-iframe-holder {
	  height: 500px;
	  -webkit-overflow-scrolling: touch;
	  overflow-y: scroll;
	}

	.demo-iframe-holder iframe {
	  height: 100%;
	  width: 100%;
	}

	#espirografoOnline {
		display:none;
	}
}


/*
##########################################################################
##########################################################################
		iPad Layout Landscape: 1024px.
		Content-Element width: 896px.
		Gutters: 24px.
		Outer content margins: 64px.
		Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    
##########################################################################
##########################################################################
*/

@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
	body {
	    width: 100%;
	    margin: auto; padding: 0px
	}
	.portrait {    display: none }
	.landscape {    display: block }
	.browser-only {    display: none }
	.ipad-only,
	.ios-only {    display: block; }
	.dossier-headline-arrow {  margin-left: 405px; }

	.demo-iframe-holder {
	  height: 500px;
	  -webkit-overflow-scrolling: touch;
	  overflow-y: scroll;
	}

	.demo-iframe-holder iframe {
	  height: 100%;
	  width: 100%;
	}

}


/*
##########################################################################
##########################################################################
		Mobile Layout: 320px.
		Content-Element width: 292px.
		Gutters: 24px.
		Outer content margins: 14px.
		Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3
px      68    160    252    
##########################################################################
##########################################################################
*/

@media only screen and (max-width: 767px) { 
	body {
	    width: 370px;
		  max-width: 90%;
	    margin: auto; padding: 0px;
		  background-color: #fff;
	}
	.portrait {    display: block }
	.landscape {    display: none }
	.browser-only,
	ipad-only {    display: none }
	.iphone-only,
	.ios-only {    display: block }
	.dossier-headline-arrow {    margin-left: 160px }

	.crossword-style td, th {
		font-size: 0.8em;

	}

	#espirografoOnline {
		display:none;
	}

	.demo-iframe-holder {
	  height: 300px;
	  -webkit-overflow-scrolling: touch;
	  overflow-y: scroll;
	}

	.demo-iframe-holder iframe {
	  height: 300px;
	  width: 100%;
	}
}


/*		
##########################################################################
##########################################################################
		Wide Mobile Layout: 480px.
		Content-Element width: 436px.
		Gutters: 24px.
		Outer content margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
#########################################################################
cols    1     2      3      4      5
px      68    160    252    344    436    
##########################################################################
##########################################################################
*/

@media only screen and (min-width: 480px) and (max-width: 767px) { 
	body {
	    width: 480px;
		  
	    padding: 0px
	}
	.portrait {    display: none }
	.landscape {    display: block }
	.dossier-headline-arrow {    margin-left: 225px }

	#espirografoOnline {
		display:none;
	}

	.demo-iframe-holder {
	  height: 300px;
	  -webkit-overflow-scrolling: touch;
	  overflow-y: scroll;
	}

	.demo-iframe-holder iframe {
	  height: 300px;
	  width: 100%;
	}
}


/*		
##########################################################################
##########################################################################
	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
######################################################################### 
##########################################################################
*/

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { 
	
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}