/*================================================================================================*/

@charset "UTF-8";

/*

ANIMATE
TOOLBAR
MENUBAR
STATUSBAR
FOOTBAR

*/

/*================================================================================================*/
/* ANIMATE
/*================================================================================================*/

@-webkit-keyframes bganimate 
{
	from 
	{
		background-position: 0 0;
	}
	to 
	{
		background-position: 2000px 0;
	}
}
 
@keyframes bganimate
{
	from 
	{
		background-position: 0 0;
	}
	to 
	{
		background-position: 2000px 0;
	}
}

/*================================================================================================*/
/* TOOLBAR
/*================================================================================================*/

#toolbar
{
	position:   relative;
	z-index:    3;
	width:      100%;
	height:     120px;
	background: #fff url(../img/layout/bg90x120.png) repeat-x;
	
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow:    0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow:         0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	
	-webkit-animation: 40s linear 0s normal none infinite bganimate;
	-moz-animation:    40s linear 0s normal none infinite bganimate;
	-ms-animation:     40s linear 0s normal none infinite bganimate;
	-o-animation:      40s linear 0s normal none infinite bganimate;
	animation:         40s linear 0s normal none infinite bganimate;
}

#toolbar .logo-container
{
	position: relative;
	display:  inline-block;
	height:   90px;
	margin:   15px 0;
}

#toolbar .logo-container > a
{
	position: relative;
	display:  inline-block;
	height:   90px;
}

#toolbar .logo-texte
{
	position: relative;
	display:  inline-block;
	height:   70px;
	margin:   10px 0;
}

#toolbar .logo,
#toolbar .logo-texte,
#toolbar h1
{
	float: left;
}

#toolbar .logo
{
	display:    inline-block;
	width:      90px;
	height:     90px;
	margin:     0 0 0 20px;
	background: url(../img/apple-touch-icon-114x114.png) center no-repeat;
	
	background-size: contain;
}

#toolbar h1
{
	margin:       0;
	color:        #808223;
	font-family: 'Roboto Condensed', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:  35px;
	font-weight:  400;
}

/*================================================================================================*/
/* MENUBAR
/*================================================================================================*/

#menubar
{
	position:    relative;
	z-index:     4;
	width:       auto;
	float:       right;
	height:      80px;
	margin-top: -80px;
	text-align:  right;
	background:  transparent;
}

#menubar.fixed
{
	position:   fixed; 
	width:      100%; 
	float:      none;
	top:        0;
	left:       0;
	margin-top: 0;
	background: #fff; 
	border:     0;
	
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow:    0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow:         0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	
	background:        #fff url(../img/layout/bg60x80.png) repeat-x;
	-webkit-animation: 40s linear 0s normal none infinite bganimate;
	-moz-animation:    40s linear 0s normal none infinite bganimate;
	-ms-animation:     40s linear 0s normal none infinite bganimate;
	-o-animation:      40s linear 0s normal none infinite bganimate;
	animation:         40s linear 0s normal none infinite bganimate;
}

#menubar .logo-container
{
	display: none;
}

#menubar.fixed .logo-container,
#menubar.fixed .logo-container > a,
#menubar.fixed .logo-texte
{
	position: relative;
	display:  inline-block;
	height:   80px;
}

#menubar.fixed .logo-container,
#menubar.fixed .logo,
#menubar.fixed .logo-texte,
#menubar.fixed h3
{
	float: left;
}

#menubar.fixed .logo
{
	display:    inline-block;
	width:      60px;
	height:     60px;
	margin:     10px 0 10px 20px;
	background: url(../img/../img/apple-touch-icon-76x76.png) center no-repeat;
	
	background-size: contain;
}

#menubar.fixed .logo-texte
{
	margin: 10px 0;
}

#menubar.fixed h3
{
	font-family: 'Roboto Condensed', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin:       0;
	color:        #808223;
	font-weight:  400;
	font-size:   24px;
	line-height: 30px;
	height:      30px;
}

#menubar > ul.menu
{
	position: relative;
	display:  inline-block;
	float:    right;
	height:   80px;
	margin:   0 20px;
}

#menubar > ul.menu > li
{
	position: relative;
	display:  inline-block;
	height:   80px;
	margin:   0 10px;
}

#menubar > ul.menu > li > .tb-button
{
	position:   relative;
	width:      80px;
	height:     80px;
	text-align: center;
}

#menubar > ul.menu > li > .tb-button > a,
#menubar > ul.menu > li > .tb-button > a:link,
#menubar > ul.menu > li > .tb-button > a:visited,
#menubar > ul.menu > li > .tb-button > a:focus,
#menubar > ul.menu > li > .tb-button > a:active,
#menubar > ul.menu > li > .tb-button > a:hover
{
	display: block;
	color:   #999;
	
	-webkit-transition: 0.33s all ease-out;
	-o-transition:      0.33s all ease-out;
	transition:         0.33s all ease-out;
  
	-webkit-transform: scale(1);
	-moz-otransform:   scale(1);
	-o-transform:      scale(1);
	-ms-transform:     scale(1);
	transform:         scale(1);
}

#menubar > ul.menu > li > .tb-button:hover > a,
#menubar > ul.menu > li > .tb-button > a:hover,
#menubar > ul.menu > li > .tb-button > a.active
{
	color: #808223;
	
	text-decoration: none;
}

#menubar > ul.menu > li > .tb-button > a.scale:hover
{
	-webkit-transform: scale(1.1);
	-moz-transform:    scale(1.1);
	-o-transform:      scale(1.1);
	-ms-transform:     scale(1.1);
	transform:         scale(1.1);
}

#menubar > ul.menu > li > .tb-button > a > i
{
	position:    relative;
	display:     inline-block;
	width:       40px;
	height:      40px;
	line-height: 40px;
	font-size:   30px;
}

#menubar > ul.menu > li > .tb-button > a > span
{
	position:    relative;
	display:     block;
	height:      40px;
	line-height: 15px;
	font-size:   13px;
	overflow:    hidden;
}

#menubar > ul.menu > li.nzsocial .tb-button > a > div
{
	position:    relative;
	display:     inline-block;
	width:       40px;
	height:      40px;
	line-height: 40px;
	padding-top: 0.2em; padding-bottom: 0.2em;
}

#menubar > ul.menu > li.nzsocial .tb-button > a > div > .fa-stack-2x
{
	font-size: 1.6em;
}

#menubar > ul.menu > li.nzsocial .tb-button > a > div > .fa-stack-1x
{
	margin-left: -1px;
	font-size:    0.8em;
	line-height:  2em;
}

#menubar > ul.menu > li:first-child
{
	display: none;
}

#menubar > ul.menu > li:first-child,
#menubar > ul.menu > li:nth-child(2)
{
	margin-left: 0;
}

#menubar > ul.menu > li:first-child,
#menubar > ul.menu > li:last-child
{
	margin-right: 0;
}

#menubar > ul.menu > li > .tb-button > ul.dropdown
{
	z-index:     99999;
	position:    absolute;
	display:     block;
	padding:     20px 30px;
	top:         100%;
	text-align:  left;
	visibility:  hidden;
	opacity:     0;
	filter:      alpha(opacity=0);
	border-top:  3px solid #808223;
	width:       250px;
	left:       -85px;
   
	background-color: #fff;
	
	-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.12), 3px 4px 8px 0 rgba(0, 0, 0, 0.11);
	-moz-box-shadow:    0 0 0 rgba(0, 0, 0, 0.12), 3px 4px 8px 0 rgba(0, 0, 0, 0.11);
	box-shadow:         0 0 0 rgba(0, 0, 0, 0.12), 3px 4px 8px 0 rgba(0, 0, 0, 0.11);
	
	-webkit-transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
	-moz-transition:    visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
	-o-transition:      visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
	transition:         visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
	
	-webkit-transform: translateY(50px);
	-moz-transform:    translateY(50px);
	-o-transform:      translateY(50px);
	-ms-transform:     translateY(50px);
	transform:         translateY(50px);
}

#menubar > ul.menu > li > .tb-button > ul.dropdown:after
{
	content:        '';
	position:       absolute;
	left:           50%;
	top:           -12px;
	width:          0;
	height:         0;
	margin-left:   -8px;
	border-left:    8px solid transparent;
	border-right:   8px solid transparent;
	border-bottom:  12px solid #808223;
}

#menubar > ul.menu > li > .tb-button > ul.dropdown > li
{
	position: relative;
	display:  block;
	padding:  10px 0;
}

#menubar > ul.menu > li > .tb-button > ul.dropdown > li > a
{
	position:      relative;
	display:       block;
	color:         #999;
	padding-right: 20px;
	white-space:   nowrap;
	font-size:     14px;
	line-height:   1;
}

#menubar > ul.menu > li > .tb-button > ul.dropdown > li.active > a,
#menubar > ul.menu > li > .tb-button > ul.dropdown > li:hover > a
{
	color:           #808223;
	text-decoration: none;
	padding-right:   0;
	padding-left:    20px;
}

#menubar > ul.menu > li > .tb-button > ul.dropdown > li > a > i
{
	position:     absolute;
	display:      inline-block;
	top:          0;
	left:        -6px;
	line-height:  1;
	color:        inherit;
	opacity:      0;
	filter:       alpha(opacity=0);
	visibility:   hidden;
	
	-webkit-transition: 0.5s all ease;
	-moz-transition:    0.5s all ease;
	-o-transition:      0.5s all ease;
	transition:         0.5s all ease;
}

#menubar > ul.menu > li > .tb-button > ul.dropdown > li.active > a > i,
#menubar > ul.menu > li > .tb-button > ul.dropdown > li:hover > a > i
{
	color:      #808223;
	left:       0;
	opacity:    1;
	filter:     alpha(opacity=100);
	visibility: visible;
}

#menubar > ul.menu > li > .tb-button:hover > ul.dropdown
{
	visibility: visible;
	opacity:    1;
	filter:     alpha(opacity=100);
	
	-webkit-transition: visibility 0s linear 0s, opacity 0.3s, transform 0.3s;
	-moz-transition:    visibility 0s linear 0s, opacity 0.3s, transform 0.3s;
	-o-transition:      visibility 0s linear 0s, opacity 0.3s, transform 0.3s;
	transition:         visibility 0s linear 0s, opacity 0.3s, transform 0.3s;
	
	-webkit-transform: translateY(0);
	-moz-transform:    translateY(0);
	-o-transform:      translateY(0);
	-ms-transform:     translateY(0);
	transform:         translateY(0);
}

/*------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1100px)
{
	#toolbar
	{
		z-index:    5;
		text-align: center;
		box-shadow: none;
	}
}

@media only screen and (max-width: 960px)
{	
	#toolbar
	{
		z-index:    3;
		text-align: left;
		
		-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		-moz-box-shadow:    0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		box-shadow:         0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	}
}

@media only screen and (max-width: 479px)
{
	#toolbar
	{
		z-index:    5;
		text-align: center;
		box-shadow: none;
	}
	
	#toolbar h1
	{
		font-size: 20px;
	}
}

@media only screen and (max-width: 400px)
{
	#toolbar h1
	{
		font-size: 18px;
	}
}

/*------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1100px)
{
	#menubar
	{
		margin-top:  0;
		margin-left: 0;
		text-align:  center;
		background:  #fff;
		width:       100%;
		float:       none;
		
		-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		-moz-box-shadow:    0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		box-shadow:         0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	}
	
	#menubar ul.menu
	{
		float: none; 
	}
	
	#menubar.fixed ul.menu
	{
		float: right; 
	}
	
	#menubar.fixed
	{
		margin-top: 0;
	}
}

@media only screen and (max-width: 1040px)/*1040px)*/
{
	#menubar.fixed ul.menu > li
	{
		display: none;
	}
	
	#menubar.fixed ul.menu > li:first-child
	{
		display: inline-block;
	}
	
	#menubar.fixed
	{
		z-index:     4;
		margin-top:  0;
		background:  #fff; text-align: right;
	}
	
	#menubar.fixed ul.menu
	{
		padding-top: 10px;
	}
}

@media only screen and (max-width: 960px)
{	
	#menubar ul.menu > li
	{
		display: none;
	}
	
	#menubar ul.menu > li:first-child
	{
		display: inline-block;
	}
	
	#menubar
	{
		z-index:     4;
		margin-top: -80px;
		background:  transparent; text-align: right;
		
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
	}
}

@media only screen and (max-width: 479px)
{
	#menubar
	{
		margin-top:  0;
		margin-left: 0;
		text-align:  center;
		background:  #fff;
		
		-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		-moz-box-shadow:    0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		box-shadow:         0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);	
	}
	
	#menubar.fixed
	{
		margin: 0;
	}
	
	#menubar ul.menu > li:first-child
	{
		margin: 0;
		float:  none;
	}
}

@media only screen and (max-width: 435px)
{
	#menubar.fixed h3
	{
		font-size: 20px;
	}
}

@media only screen and (max-width: 400px)
{
	#menubar.fixed h3
	{
		font-size: 18px;
	}
}

@media only screen and (max-width: 375px)
{
	#menubar.fixed h3
	{
		font-size: 16px;
	}
	
	#menubar.fixed .logo
	{
		margin-left: 0;
	}
	
	#menubar.fixed ul.menu
	{
		margin-left:  0;
		margin-right: 10px;
	}
}

/*================================================================================================*/
/* STATUSBAR
/*================================================================================================*/

#statusbar
{
	position:       relative;
	z-index:        2;
	width:          100%;
	height:         40px;
	line-height:    40px;
	vertical-align: middle;
	text-align:     center;
	font-size:      13px;
	background:     #fff;
	border-top:     2px solid #abadb3;
}

#statusbar.fixed
{
	position: fixed;
	bottom:   0;
	left:     0;
}

#statusbar br
{
	display: none;
}

/*------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 479px)
{
	#statusbar
	{
		line-height: 20px;
	}
	
	#statusbar br
	{
		display: block;
	}
}

/*================================================================================================*/
/* FOOTBAR
/*================================================================================================*/

#footbar
{
	position:         relative;
	background-color: rgba(128, 130, 35, 0.25);
	border-top:       2px solid #abadb3;
	padding:          20px 0;
}

#footbar .col320 
{ 
	min-height: 300px !important;
	height:     300px;
}

#timezones
{
	padding: 10px;
}

#footbar .col411 > .hero
{
	width:   100%;
	height:  100%;
	margin:  0;
	padding: 0;
}

#timezones .dtville,
#timezones .dtdate
{
	font-size: 1.4rem;
}

#timezones .hero-circle
{
	border-color: #808223;
}

#timezones .hero-hour,
#timezones .hero-minute,
#timezones .hero-second
{
	background-color: #808223;
}

/*------------------------------------------------------------------------------------------------*/

#sunsetsunrise .hero,
#facebook .hero,
#legalnotice .hero
{
	position: relative;
	width:    100%;
	height:   100%;
	margin:   0;
	padding:  0;
}

#sunsetsunrise .hero-circle,
#facebook .hero-circle,
#legalnotice .hero-circle
{
	position: relative;
	width:    180px;
	height:   180px;
	margin:   0 auto;
	border:   8px solid #808223;
	overflow: hidden;
	
	-webkit-border-radius: 50%;
	-moz-border-radius:    50%;
	border-radius:         50%;
	
	-webkit-box-shadow: 0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3);
	-moz-box-shadow:    0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3);
	box-shadow:         0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3);
}

#sunsetsunrise .hero-face,
#facebook .hero-face,
#legalnotice .hero-face
{
	width:  100%;
	height: 100%;
}

#sunsetsunrise .dt-sunrise,
#sunsetsunrise .dt-sunset,
#facebook .dt-sunrise,
#facebook .dt-sunset,
#legalnotice .dt-sunrise,
#legalnotice .dt-sunset
{
	position:    absolute;
	left:        0;
	right:       0;
	height:      85px;
	text-align:  center;
	font-size:   1.4rem;
	font-weight: bold;
}

#sunsetsunrise .dt-sunrise
{
	top:              0;
	padding-top:      24px;
	background-color: #fff;
	border-bottom:    1px solid #808223;
}

#facebook .dt-sunrise,
#legalnotice .dt-sunrise
{
	top:              0;
	background-color: #fff;
	font-size:        32px;
	padding-top:      20px;
}

#facebook .dt-sunrise i
{
	display:      inline-block;
	margin-left: -8px;
}

#sunsetsunrise .dt-sunset
{
	bottom:           0;
	padding-top:      16px;
	background-color: #ccc;
}

#facebook .dt-sunset,
#legalnotice .dt-sunset
{
	bottom:           0;
	padding-top:      16px;
	background-color: #fff;
}

#sunsetsunrise .dt-sunrise span,
#sunsetsunrise .dt-sunset span,
#facebook .dt-sunrise span,
#facebook .dt-sunset span,
#legalnotice .dt-sunrise span,
#legalnotice .dt-sunset span
{
	display:     block;
	font-weight: normal;
}

#facebook a,
#legalnotice a
{
	color:           inherit;
	text-decoration: none;
}

#facebook a:hover,
#legalnotice a:hover
{
	color:           #d3072b;
	text-decoration: none;
}

/*================================================================================================*/