/*
 Theme Name:   twentyseventeenNico
 Theme URI:    http://nicobonx.com
 Description:  Theme enfant
 Author:       Nicobonx
 Author URI:   http://nicobonx.com
 Template:     twentyseventeen
 Version:      1.0.0
*/


html body div#page.site header#masthead.site-header {
	height:250px;
}

.site-header {
  background-image: url("http://schulen.aiwtkf.com/wp-content/uploads/sites/2/2018/06/Background_FR.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position:center top;
  background-size: cover;
}

body {
	font-family: Arial, Verdana, Trebuchet, Helvetica, Futura, sans-serif; 
	font-size: 1em; 
}

.site-branding {
	top:150px;
}

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    display: none;
}

.site-content-contain {
	background-color: rgba(255,255, 255, 0.4) !important;
}

.site-content {
  	background-color: rgba(255, 255, 255, 0.6) !important;
}

.content-area {
	margin-bottom:0px;
}

.navigation-top { 
    width: 80%;
    margin: auto;
    z-index:10000;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.navigation-top div.wrap {
	padding-top: 0px;
	padding-bottom: 0px;
}

.navigation-top div.wrap button.menu-toggle * {
	width:30px;
	height:30px;
}

nav#site-navigation.main-navigation div.menu-menu-principal-container
{
	padding-top:0;
}


/* Menu principal Francais */
nav#site-navigation.main-navigation div.menu-menu-principal-container ul#top-menu.menu {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

nav#site-navigation.main-navigation div.menu-menu-principal-container ul#top-menu.menu li a {
	color: #ffcc00;
}

nav#site-navigation.main-navigation div.menu-menu-principal-container ul#top-menu.menu li a:hover {
	color: #ffcc00;
	font-style:italic;
}
/* Menu principal Allemand */
nav#site-navigation.main-navigation div.menu-hauptmenue-container ul#top-menu.menu {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

nav#site-navigation.main-navigation div.menu-hauptmenue-container ul#top-menu.menu li a {
	color: #ffcc00;
}

nav#site-navigation.main-navigation div.menu-hauptmenue-container ul#top-menu.menu li a:hover {
	color: #ffcc00;
	font-style:italic;
}

nav#site-navigation.main-navigation *.menu-scroll-down {
	display:none;
}

/* 02/09/2018 - read more => timelinegrid */
.timeline-grid .grid-items {
	color:#ffcc00;
}

.read_more {
	color: #ffcc00;;
}
.read_more a {
	color: #ffcc00;
}
.read_more a:hover {
	color: #ffcc00;
	font-style:italic;
}
/* FIN 02/09/2018 - read more => timelinegrid */

.site-content-contain 
{
	width: 80%;
    margin: auto;
    padding:0;
}
/*
.content-area {
	margin-bottom:0px;
}
*/

div#content.site-content   
{
	padding-top:0px;
}

div#content.site-content div.wrap   
{
	margin:auto;
	padding:0px;
	width:100%;
}

div#primary.content-area main#main.site-main  div.wrap 
{
	margin:0px;
	padding-left:25px;
	padding-right:40px;
	width:100%;
}

div#primary.content-area main#main.site-main article div.panel-content {
	width:100%;
}

div#primary.content-area main#main.site-main article div.panel-content div.wrap {
	margin:auto;
}

div#page.site div#content header.page-header {
	width:0%;
	display:none;
}

div#primary.content-area main#main header.entry-header {
	width:100%;
	margin-bottom:0;
	padding-botton:0;
}

div#primary.content-area main#main .entry-content {
	width:100%;
}

.has-sidebar #primary {
	width: 80% !important;
	padding-right: 10px;
}

/* NICO 26/08/2018 - remplace par bloc ci-dessous
.has-sidebar #secondary {
	width: 20% !important;
}
*/
/* 

	NICO 26/08/2018 - remplace bloc ci-dessus 
	Pour que le menu de droite reste a droite sur les ecran etroit.
	-> en lien avec la fin du fichier 
*/
.has-sidebar #secondary {
	width: 20% !important;
	display: block !important;
}
/* FIN NICO 26/08/2018 - remplace bloc ci-dessus */

aside#secondary.widget-area {
}

div#primary.content-area main#main .entry-content img.contourJaune
{
	border: 2px solid #ffcc00;
}

div#primary.content-area main#main .entry-content a img, .widget a img 
{
	-webkit-box-shadow: 0 0 0 0 #fff;
    box-shadow: 0 0 0 0 #fff;
	border: 2px solid #ffcc00;
}

div#primary.content-area main#main .entry-header h2
{
	font-size:1.6em;
	font-weight:normal;
}
div#primary.content-area main#main .entry-header h1 
{
	font-size:1.6em;
	font-weight:normal;
}

aside#secondary.widget-area a {
  	text-decoration: none !important;
  	box-shadow: none !important;
}

aside#secondary.widget-area a:hover {
  	font-weight:bold;
  	font-style:italic;
  	
  	color:#000000;
}

#reCaptchaID.reCaptchaClass
{
}

div#primary.content-area main#main .entry-header h1.entry-title
{
	color: #444444;
	font-weight:bold;
}

div#primary.content-area main#main div.panel-content div.wrap header.entry-header h2.entry-title
{
	color: #444444;
	font-weight:bold;
}

h2.widget-title
{
	color: #444444;
	font-size:1.2em;
}

div#primary.content-area 
{
	padding-left:10px;
}

.site-main {
	padding:0px;
	margin:0px;
	width:100%;
}

.site-footer {
	margin-top:0px;
}

#colophon.site-footer
{
	background-color: rgba(10, 10, 10, 0.6) !important;
}

#colophon.site-footer div.wrap nav
{
	margin:0px;
	text-align:center;
	width:100%;
}

#colophon.site-footer div#impressum 
{
	text-align:center;
	padding-bottom:15px;
}
#colophon.site-footer div#impressum a
{
	color: #ffcc00;
} 
#colophon.site-footer div#impressum a:hover
{
	color: #ffcc00;
	font-style:italic;
} 

.custom-header {
	z-index:0;
}

/* DEGRADEE ne se positionne pas correctement en bas de page
  si la hauteur de la page est trop grande ...
   ?! pas encore de solution ... sauf en desactivant 
   mais plus de degrade :(  */
.custom-header-media:before {
	background:none;
}

.jaune
{
	color: #ffcc00;
}
.jauneFonce
{
	color: #e2b500;
}
.rougeFonce
{
	color: #cc6600;
}
.vert
{
	color: #33cc66;
}
.vertFonce
{
	color: #339966;
}

.separation {
	margin-left: 244px;	
}

.separation-big {
	margin-left: 94px;	
}


/* MENU LATTERAL RESPONSIVE */

/* Pour que le menu lateral (media / contact) reste sur la 
	droite meme en petite resolution */
@media screen
and (min-width: 320px)
{
	#secondary {
		position: absolute;
		top: 0px;
		margin-left: auto;
		margin-right: auto;
		right: 0px;
	}
}
/* --  */


@media screen 
and (min-width: 769px) 
{
	#page {
		position: relative;
	}

	#secondary {
		position: absolute;
		top: 0px;
		margin-left: auto;
		margin-right: auto;
		right: 0px;
	}

	#masthead {
		padding-bottom: 300px;
	}
	
	.site-content-contain
	{
		font-size:1em;
	}
}

@media only screen 
and (min-width : 481px)
and (max-width : 768px) 
{
	.site-content-contain
	{
		font-size:1.8vw;
		/*border:1px solid red;*/
	}
	
	html body div#page.site header#masthead.site-header {
		/* content */
		height:0px;
		padding-bottom:145px;
		/* menu */
		top:50px;
		margin-bottom:70px;
		background:transparent;
	}
	
	/* A VOIR ?? *
	aside#secondary.widget-area 
	{
		float: left;
		width: 100%;
	}
	* ? ??? */

	/* 
	Sequences rajouter avec le custom css propre a chaque page (system)
	pour faire disparaite le menu lateral et etendre vers la droite la 
	partie contenu / texte
	**/
/*	
	.has-sidebar #primary {
		width: 100% !important;
		padding-right; 10px;
	}
	
	aside#secondary.widget-area section *
	{
		display: none;
		visibility:hidden;
	}
*/
}

@media only screen 
and (min-width : 321px) 
and (max-width : 480px) 
{
	html body div#page.site header#masthead.site-header  {
		/* content */
		/*height:100%;*/
		/* menu */
		top:100px;
		background:transparent;
	}
	
	.site-content-contain
	{
		font-size:3vw;
		/*border:1px solid yellow;*/
		top:-50px;
	}
	
	/* 
	Sequences rajouter avec le custom css propre a chaque page (system)
	pour faire disparaite le menu lateral et etendre vers la droite la 
	partie contenu / texte
	**/
/*
	.has-sidebar #primary {
		width: 100% !important;
		padding-right; 10px;
	}
	
	aside#secondary.widget-area section *
	{
		display: none;
		visibility:hidden;
	}
*/
}

@media only screen 
and (max-width : 320px) 
{
	.site-content-contain 
	{
		font-size:2vw;
		/*border:1px solid blue;*/
	}
	
	html body div#page.site header#masthead.site-header {
		/* content */
		height:0px;
		padding-bottom:145px;
		/* menu */
		top:50px;
		margin-bottom:70px;
		background:transparent;
	}
	
	/* 
	Sequences rajouter avec le custom css propre a chaque page (system)
	pour faire disparaite le menu lateral et etendre vers la droite la 
	partie contenu / texte
	**/
/*
	.has-sidebar #primary {
		width: 100% !important;
		padding-right; 10px;
	}

	aside#secondary.widget-area section *
	{
		display: none;
		visibility:hidden;
	}
*/
}
/* FIN MENU LATTERAL RESPONSIVE */

/* RGPD - COOKIE NOTICE - TARTEAUCITRON */
body:not(.tac) #tarteaucitronIcon {
  display: none !important;
}
#tarteaucitronAlertSmall {
  display: none !important;
}
/* Pour masquer l'icon recaptcha sur toute les pages sauf politique confidentialite */
body:not(.tac) .grecaptcha-badge {
  display: none !important;
}

#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronRoot #tarteaucitronPercentage,
#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotGreen {
  background: #E61071 !important;
}
#tarteaucitronAlertBig {
  background-color: rgba(0,0,0,0.8) !important;
}
#tarteaucitronDisclaimerAlert, #tarteaucitronDisclaimerAlert strong, #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  color: #fff !important;
}
#tarteaucitronAlertSmall {
  background-color: rgba(0,0,0,0.5) !important;
}
#tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  border-radius: 3px !important;
}
/* FIN RGPD - COOKIE NOTICE - TARTEAUCITRON */

.cacher_pour_schulen {
  display: none !important;
}