@charset "utf-8";

@media screen and (max-width : 992px){
}
@media screen and (max-width : 768px){
}
@media screen and (max-width : 640px){
}
@media screen and (max-width : 480px){
}
@media screen and (max-width : 320px){
}

html, body {width:100%; height:100%}
body {
	font-family: 'Comic Neue 300',sans-serif;
	color: #231f20;
	font-size:105%;
	line-height:1.4}
	
/* COULEUR --- vert 1 # - teal #00b8b8 / rgba(0,184,184,1) - gris #231f20 - rouge #ed1c24  */

*	{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box}
a		{text-decoration:none; color:#00b8b8;}
a:hover	{color:#999999;}

h1			{
	font-size: 2em;
	color:#00b8b8;
	text-align:center; 
	font-weight: bold;
	font-style: italic;
	margin:20px auto 40px;
	line-height: 1.2;
	text-transform:uppercase;
	position:relative;
	overflow:hidden;
	}
	

/* DIVIDER */
h1:before, h1:after {
    content: "";
    display: inline-block;
    height: 5px;
    position: relative;
    vertical-align: middle;
    width: 50%;
	border-bottom: 1px solid #c9c9c9;
	border-top: 1px solid #c9c9c9;}
h1:before {right: 0.5em;margin-left: -50%}
h1:after {left: 0.5em;margin-right: -50%}	
	
h2	{
	color:#00b8b8;
	font-size:1.5em;
	margin:0 0 5px; 
	font-weight:bold;
	line-height:1.2;}
h3	{font-style:italic;margin:10px 0 5px; color:#00b8b8;border-bottom: 1px solid #00b8b8;}
h4	{font-size:0.937em;font-weight:normal;color:#ffffff; background-color:#00b8b8; padding:7px; margin:5px 0}
h5	{
	font-size:0.925em;
	margin: 0 0 2px;
	color: #fcfcfc;
	font-weight: bold;
	border-bottom: 1px solid #777;
	text-transform:uppercase;}
h6			{font-size:1.250em; color:#00b8b8; font-weight:bold}

p			{margin:0 0 15px}
ul			{list-style:none}
img			{border:0; max-width:100%}
sub, sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline}
sub {bottom: -.25em}
sup {top: -.5em}
.b			{font-weight:bold}
.i			{font-style:italic}
.tleft		{text-align:left !important}
.tcenter	{text-align:center !important}
.tright		{text-align:right !important}
.fleft		{float:left}
.fright		{float:right}
.fnone		{float:none}
.block		{display:block}
.inline-block {display:inline-block}
.clear 		{clear: both}

.show		{display:block}
.hide		{display:none}


.cie		{font-weight:bold; color:#00b8b8;}
hr, .hr		{
	border-bottom:1px solid #cccccc; 
	height:1px; 
	width:50%; 
	border-top:0; 
	border-left:0; 
	margin:10px auto; 
	display:block}
.pad-10		{padding:10px}
.pad-top-6 	{padding:6px 0 0}
.marg-left-15 {margin:0 0 0 15px}
@media screen and (max-width : 768px){
	body	{font-size:98%;line-height: 1.3}
	h1		{
		font-size: 1.75em;
		margin:20px auto 40px;
		line-height: 1.2}
	h2		{font-size:1.25em;margin:10px 0 5px;}
}
@media screen and (max-width : 640px){
	body	{font-size:95%;margin:0}
	h1		{font-size: 1.75em;margin:25px auto 20px;}
	
	h2, h3, h5 {padding:0}
	h3		{margin:4px 0}
	h5		{margin:4px 0}
	p		{margin:0 0 10px 0}
	hr		{margin:8px auto;}
}
@media screen and (max-width : 480px){
	body	{font-size:90%;margin:0}
	h1		{font-size:1.5em}
}
@media screen and (max-width : 320px){
	h2		{text-align:center}
	h2, h3, h4, h5, h6 {padding:0}
	h6 		{text-align:left}
}

/* GRID */
/*.row-full		{width: 100%}
.row-full [class*="col-"] {padding:0}*/
.row {padding: 0 -8px}
.row .row {width: auto;max-width: none;margin: 0 -15px;}
[class*="col-"] {float: left;padding: 0 15px;}
[class*="col-"] > [class*="col-"] {padding:0 2px}
.col-00	{width:0%}
.col-01 {width:8.33333%}
.col-02 {width:16.66667%}
.col-03 {width:25%}
.col-04 {width:33.33333%}
.col-05 {width:41.66667%}
.col-06 {width:50%}
.col-07 {width:58.33333%}
.col-08 {width:66.66667%}
.col-09 {width:75%}
.col-10 {width:83.33333%}
.col-11 {width:91.66667%}
.col-12 {width:100%}
.col-13 {width:20%}
.col-14 {width:80%}
.col-last {
    margin-right: 0 !important;
    float: right;
    clear: right;}

.col-equal {width:33.3333%; display:table-cell; float:left}
.col-equal:nth-of-type(3n)	{display:block}
/*.row 	{*zoom:1}*/
.row:before,.row:after {content: ""; display: table;}
.row:after {clear: both}
@media screen and (max-width : 768px){
	.row {padding: 0 -10px}
	[class*="col-"] {padding:0 10px}
	.m-col-00 {display:none}
	.m-col-01 {width:8.33333%}
	.m-col-02 {width:16.66667%}
	.m-col-03 {width:25%}
	.m-col-04 {width:33.33333%}
	.m-col-05 {width:41.66667%}
	.m-col-06 {width:50%}
	.m-col-07 {width:58.33333%}
	.m-col-08 {width:66.66667%}
	.m-col-09 {width:75%}
	.m-col-10 {width:83.33333%}
	.m-col-11 {width:91.66667%}
	.m-col-12 {width:100%}
	.m-col-13 {width:20%}
	.m-col-14 {width:80%}
}
@media screen and (max-width : 640px){
/*	[class*="col-"] + [class*="col-"].end { float: none}*/
	.s-col-00 {display:none}
	.s-col-01 {width:8.33333%}
	.s-col-02 {width:16.66667%}
	.s-col-03 {width:25%}
	.s-col-04 {width:33.33333%}
	.s-col-05 {width:41.66667%}
	.s-col-06 {width:50%}
	.s-col-07 {width:58.33333%}
	.s-col-08 {width:66.66667%}
	.s-col-09 {width:75%}
	.s-col-10 {width:83.33333%}
	.s-col-11 {width:91.66667%}
	.s-col-12 {width:100%}
	.s-col-13 {width:20%}
	.s-col-14 {width:80%}
}
@media screen and (max-width : 480px){
	.xs-col-00 {display:none}
	.xs-col-01 {width:8.33333%}
	.xs-col-02 {width:16.66667%}
	.xs-col-03 {width:25%}
	.xs-col-04 {width:33.33333%}
	.xs-col-05 {width:41.66667%}
	.xs-col-06 {width:50%}
	.xs-col-07 {width:58.33333%}
	.xs-col-08 {width:66.66667%}
	.xs-col-09 {width:75%}
	.xs-col-10 {width:83.33333%}
	.xs-col-11 {width:91.66667%}
	.xs-col-12 {width:100%}
	.xs-col-13 {width:20%}
	.xs-col-14 {width:80%}
}
@media screen and (max-width : 320px){
	.xxs-col-00 {display:none}
	.xxs-col-01 {width:8.33333%}
	.xxs-col-02 {width:16.66667%}
	.xxs-col-03 {width:25%}
	.xxs-col-04 {width:33.33333%}
	.xxs-col-05 {width:41.66667%}
	.xxs-col-06 {width:50%}
	.xxs-col-07 {width:58.33333%}
	.xxs-col-08 {width:66.66667%}
	.xxs-col-09 {width:75%}
	.xxs-col-10 {width:83.33333%}
	.xxs-col-11 {width:91.66667%}
	.xxs-col-12 {width:100%}
	.xxs-col-13 {width:20%}
	.xxs-col-14 {width:80%}
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block}

.quotes:before, .quotes:after	{position:relative; top:-0.25em; font-size:0.75em}
.quotes:before	{content: "\275D"; padding-right:5px}
.quotes:after	{content: "\275E"; padding-left:5px}

.v-align-middle {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 0%;
    -moz-transform: translate(0%, -50%);
    -transform: translate(0%, -50%);
    transform: translate(0%, -50%);}
	
/* HEADER */	
.header-top		{
	position:relative; 
	width:100%;
	background-color:#00b8b8;
	color:#ffffff !important}
.header-bottom		{}
.top-navbar			{font-size: 0.913em;color:#ffffff; padding:6px; display:inline-block; width:100%; text-align:right}
.top-navbar 		{display:block; float:left;}
.top-navbar a 	{margin:0;display: inline-block;padding: 0 2px;color:#ffffff !important;}
.top-navbar a:hover {color: #999999 !important;}
.top-navbar .fa		{padding:0 0 0 30px; color:#ffffff}
.top-navbar .fa:before {padding:0 5px 0 0}


.logo 		{float:left}
.logo img	{display:block;height:60px; margin:20px 0}

@media screen and (max-width : 768px){
	.header-top	{padding:3px 0}
	.top-navbar {display:none}
	.logo img	{height:50px; margin:15px 0}	
}
@media screen and (max-width : 640px){
	.logo img	{height:45px; margin:15px 0}	
}
@media screen and (max-width : 480px){
	.logo img	{height:40px; margin:10px 0}	
}

/* MENU */ 
#nav	{float:right;}
#nav .main-nav 	{display:block; width:100%; margin:0;}
#nav ul {margin: 0 0 0 10px;position: relative; float:right}
#nav li {display:inline-block;float: left;}
#nav li > a {
	display:block;
	font-size:1.125em;
	color:#777777;
	padding: 30px 10px 30px 0;
	-webkit-transition: background-color 300ms linear;
	-moz-transition: background-color 300ms linear;
	transition: background-color 300ms linear;}
#nav li > a:hover {color:#999999;}
#nav li > a.active	{ color:#00b8b8; font-style:italic}
#nav li:last-child a { margin:0}	

#nav .menu-btn {display: none;}
#nav .menu-btn:checked ~ .menu {display:block}
#nav .menu-btn:checked ~ .menu-icon .navicon {background: transparent}

input[type="checkbox"] + label.menu-icon::before { display:none}

@media screen and (max-width : 768px){	
	#nav 			{width:100%; float:none; position:absolute; padding:0; height:65px}
	#nav .main-nav 	{display:block; margin:0;}	
	#nav ul 		{position: relative;width:100%; display:none;background-color:#00b8b8;border-bottom:1px solid #00b8b8; float:none}
	#nav li 		{display:inline-block;float: left;}		
	#nav li a 	{
		background-color:#ffffff;
		color:#00b8b8;
		border:0 0 1px 0; 
		border-color:transparent transparent rgba(0,0,0,0.1); 
		-moz-border-radius:0;
		display:block;
		text-align: left;
		font-size:1.25em;
		padding:5px;
		margin:0}
	#nav li > a.active {background-color: rgba(0,184,184,1);color:#ffffff;
		border-color:transparent transparent  rgba(0,0,0,0.1);}
	#nav li > a:hover, #nav li > a.active:hover 	{
		background-color:rgba(0,184,184,0.6); 
		color:#ffffff;
		border-color:transparent transparent  rgba(0,0,0,0.1); }
		
	#nav .menu-icon 			{cursor: pointer;display: inline-block;float: right;padding: 20px 20px;position: relative; z-index:100}
	#nav .menu-icon .navicon 	{
		background: #000066;
		display: block;
		height: 2px;
		position: relative;
		transition: background .2s ease-out;
		-moz-transition: background .2s ease-out;
		-webkit-transition: background .2s ease-out;
		width: 18px;}
		
	#nav .menu-icon .navicon:before, #nav .menu-icon .navicon:after		{
		background: #000066;
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-webkit-transition: all .2s ease-out;
		width: 100%;
	}
	#nav .menu-icon .navicon:before {top: 5px}
	#nav .menu-icon .navicon:after {top: -5px}	
	#nav .menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg)}

	#nav .menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg)}

	#nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	#nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		top: 0}	
		
	#nav .menu {
		margin:70px 0 0;
		position: fixed;
		top:0;
		background-color: #ffffff;;
		z-index:10;
		padding:0;
		bottom:0;
		width:100%;
		}
	#nav li {margin-bottom: 0}
	#nav ul li, #nav li a {width:100%}
	#nav .menu-icon {display:block}
}
@media screen and (max-width : 640px){	
	#nav				{float:none; height:50px}
	#nav .menu-icon 	{padding: 15px 10px}
	#nav .menu 			{margin:55px 0 0}
	#nav ul li			{}
	#nav li a			{padding:7px 0;text-align:center}
}
@media screen and (max-width : 480px){
}


/********* SLIDESHOW ***********/
/*.slideshow			{
	position:relative; 
	overflow: hidden;
	background-size:cover;
	background-position:center center}*/
#myslideFrame	{width:100%;margin: 0 auto;height:350px;position:relative; overflow:hidden}
#myslideFrame:before {content: ""}
#myslideFrame .mySlides					{background:no-repeat center center; background-size:cover}/**/
#myslideFrame .mySlides:nth-of-type(1)	{background-image: url('../img/top-01.jpg');}
#myslideFrame .mySlides:nth-of-type(2)	{background-image: url('../img/top-02.jpg');}
#myslideFrame .mySlides:nth-of-type(3)	{background-image: url('../img/top-03.jpg');}
#myslideFrame .mySlides:nth-of-type(4)	{background-image: url('../img/top-04.jpg');}
#myslideFrame .mySlides:nth-of-type(5)	{background-image: url('../img/top-05.jpg');}
#myslideFrame .mySlides		{width:100%;display: block;height:350px;}
#myslideFrame .mySlides img	{width:max-content}

.slideshow-content	{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	text-align:center; 
	width:auto; 
	background-color:rgba(0,0,0,0.2);}
	
.slideshow-overlayer	{
	color:#ffffff;
	position:absolute;
	width:100%;
    top: 50%;
	left:0;
    -moz-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
	text-align: center;
	padding:0 15px;}
.slideshow-title	{
	display:block;
	font-size:2.7em;;
	font-style:italic;
	line-height:1;
	margin:5px 0;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.slideshow-txt		{
	display:inline-block;
	font-size:1.5em;
	font-style:italic;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}	

.controls		{width:100%;text-align:center;position: absolute;top:0;z-index:1;opacity:0; height:100%; display:none}
.controls:hover	{opacity:0.5}
.prev, .next	{
	display:inline-block;
	color:#fff;
	background-color:#000;
	overflow:hidden;
	border-radius:10px;
	cursor:pointer;
	font-size:20px;
	padding:20px 15px;
	font-weight:bold;
	position: absolute;
	top:calc(50% - 34px);
}
.prev:hover, .next:hover	{color:#ffffff;background-color:#616161; opacity:1}
.prev	{float:left; left:0}
.next	{float:right; right:0}

.markers	{text-align:center; margin:14px 0; font-size:16px; color:#ffffff;position:absolute;left:0;bottom:0; width:100%; z-index:1; display: none}
.marker-nav	{
	cursor:pointer;
	height:16px;width:16px;
	padding:0;
	background-color: transparent;
	color:#ffffff;
	display:inline-block;
	text-align:center;
	border-radius:50%;
	border:1px solid #fff}
.marker-nav:hover 	{color:#000000;background-color:rgba(255,255,255,0.6)}
.marker-nav-auto	{border-color:#ffffff; background-color:#ffffff;}
@media screen and (max-width : 768px){
	#myslideFrame, #myslideFrame .mySlides	{height:300px;} 
	.slideshow-title	{font-size:2.5em}
	.slideshow-txt		{font-size:1.45em}	
	.markers	{margin:10px 0; font-size:10px;}
}

@media screen and (max-width : 640px){	
	#myslideFrame, #myslideFrame .mySlides	{height:250px;} 
	.slideshow-title	{font-size:2.25em}
	.slideshow-txt		{font-size:1.25em}	
	.prev, .next	{
		margin:0 5px;
		font-size:20px;
		padding:5px;
		top: calc(50% - 25px);
		border:2px solid #fff;
		width:40px;
		height:40px;}
	.markers	{margin:10px 0; font-size:10px;}
	.marker-nav	{height:10px;width:10px;}
}

@media screen and (max-width : 480px){
	#myslideFrame, #myslideFrame .mySlides	{height:200px}
	.slideshow-title	{font-size:2em}
	.slideshow-txt		{font-size:1.25em}	
	.controls, .markers	{display:none}
}

/*******************/
/* BANNIÈRE  HAUT */
.banner			{
	position:relative;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height:350px;
	overflow: hidden}
.banner-bg-01 {background-image:url(../img/top-01.jpg)}	
.banner-bg-02 {background-image:url(../img/top-02.jpg)}	
.banner-bg-03 {}	
.banner-bg-04 {}	
.banner-bg-05 {}	
.banner-bg-06 {background-image:url(../img/top-06.jpg)}	
.banner-bg-07 {background-image:url(../img/top-07.jpg); background-position:right}	
.banner-content	{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	text-align:center; 
	width:auto; 
	background-color:rgba(0,0,0,0.2);}
	
.banner-overlayer	{
	color:#ffffff;
	position:absolute;
	width:100%;
    top: 50%;
	left:0;
    -moz-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
	text-align: center;
	padding:0 15px;}
.banner-title	{
	display:block;
	font-size:2.7em;
	font-style:italic;
	line-height:1;
	margin:5px 0;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.banner-txt		{
	display:inline-block;
	font-size:1.5em;
	font-style:italic;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
	
.banner-txt2 		{display: inline-block;text-align: left; margin:0 0 0 20px}	
.banner-txt2 div	{font-size:2.7em; margin:0 auto;display: inline-block;font-weight:bold}
.banner-txt2 span	{font-size: 1.5em;font-style: italic;display: block;}

@media screen and (max-width : 768px){	
	.banner		{height:300px}
	.banner-title	{font-size:2.5em}
	.banner-txt		{font-size:1.45em}	
}
@media screen and (max-width : 640px){
	.banner		{height:250px}		
	.banner-title	{font-size:2.25em}
	.banner-txt		{font-size:1.25em}	
}
@media screen and (max-width : 480px){
	.banner		{height:200px}		
	.banner-title	{font-size:2em}
	.banner-txt		{font-size:1.25em}	
}

/* CONTENT */
#content {margin:40px 0 0}
.container-full {width:100%}
/*section {margin-bottom:20px}*/
.section 		{position:relative; margin-bottom:30px}
.container 		{max-width: 1100px; margin:0 auto}
.home-section {}
.about-section {}
.team-section {}
.reservation-section {}
.contact-section {}

@media screen and (max-width : 992px){
	.container 	{max-width: 960px}
}
@media screen and (max-width : 768px){
	.container 	{max-width: 740px}
	#content 	{margin:25px 0 0}
	.section 	{margin-bottom:20px}
}
@media screen and (max-width : 640px){
	.container 	{max-width: 620px}
}
@media screen and (max-width : 480px){
	.container 	{max-width: 460px}
	#content {margin:15px 0 0}
}
@media screen and (max-width : 320px){
	.container 	{max-width: 300px}
}

/* GOOGLE MAP */
.map {
	text-align:center; 
	padding:0; 
	border:1px solid #cccccc;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px;
	margin:0;
	height:276px}
.map iframe			{width:100%; height:100%; margin:0}
@media screen and (max-width : 768px){			
	.map			{height:264px}
}
@media screen and (max-width : 640px){				
	.map			{height:266px}	
}
@media screen and (max-width : 480px){		
}
@media screen and (max-width : 320px){			
	.map			{height:266px}		
}


/* FOOTER */
footer 	{ 
	background: #000000;
	color: #acacac;
	margin: 45px 0 0 0;
	border-top:rgba(255,255,255,0.3) 4px solid; /**/
	width:100%;
	display:block}
footer a 		{color:#acacac}
footer a:hover 	{color:#cfcfcf}
.footer-top {background-color:#231f20;padding: 40px 0 30px;font-size:0.913em;}
/*.footer-top span {display:block}*/
.footer-top-block	{margin:0 15px 15px 0}
.footer-bottom {
	font-size: 0.850em;
	border-top:#444444 1px solid;
	padding: 15px 0;
	text-align:center}
/*.footer-bottom span {display:inline-block}*/
.footer- 	{ 
}
.footer-logo 	{ max-width:200px}
.list-bullet-footer 	{margin-left: 1em;}	
.list-bullet-footer li > a {position: relative; padding:0 0 10px}
.list-bullet-footer li > a:before {
    position: absolute;
    left: -1em;
    width: 1em;
	content: "\00203A";
	font-weight:bold;
	top:-3px;}
	
.liens, .infoettre, .contact {} 
.copyright, .conception	{padding:0 5px}
.copyright	{border-right:4px double  rgba(255,255,255,0.4)}
@media screen and (max-width : 768px){
	footer 	{margin: 30px 0 0 0; border-top-width:3px}
	.footer-top		{padding: 25px 0}
	.footer-bottom	{padding: 15px 0;}
}
@media screen and (max-width : 480px){
	
	footer 	{margin: 20px 0 0 0; border-top-width:3px}
	.footer-top		{padding: 20px 0;}
	.footer-bottom	{padding: 15px 0;}
	.copyright	{border-right:0}
	.copyright, .conception	{ display:block}
}
@media screen and (max-width : 320px){
}

#back2Top {
    font-size: 1.5em;
    width: 40px;
    line-height: 40px;
	padding:0 0 3px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    color: #ffffff;
    text-align: center;
	border-radius:5px 0 0 5px;}
#back2Top:hover {background-color: #00b8b8;}
@media screen and (max-width : 480px){
	#back2Top {
		font-size: 1.25em;
		width: 30px;
		line-height: 30px;
		padding:0 0 3px;
		bottom: 30px;
		border-radius:5px 0 0 5px;}
}

/* BOXES */
.box {
	display:inline-block;
	position:relative;
	width: 100%;
	margin:0 0 10px;
	border-radius: 5px;}	
.box-icon-pad50		{padding-left:50px}
.box h3 			{padding:5px 5px;margin:0}
.box-content > div	{padding:5px 5px}
.box-icon 			{padding:0 10px;position: absolute;top: 0;bottom: 0;}	
.box-icon i {
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: #fff;
	width: 1.5em;
	height: 1.5em;
	font-size: 1.25em;
	line-height: 1.4em;
	text-align: center;
	position: relative;
	top: calc(50% - .75em);
	margin-top:calc(50% - 50%)}	

.box-light 		{background-color:#eaeaea;color:#676767;border:1px solid #aaaaaa}
.box-light h3 	{background-color:#ccc;color:#515151;border-bottom:1px solid #9d9d9d}

.box-dark 		{background-color:#cccccc;color:#231f20;border:1px solid #111111;}
.box-dark h3 	{background-color:#444444;color:#cccccc;border-bottom:1px solid #222222;}
	
.box-danger 				{background-color:#e6b6b9;color:#b55354;border:1px solid #ab3a3b;}
.box-danger .box-icon 		{background-color:#d24248;color:#ab3a3b;border-right:1px solid #ab3a3b;}
.box-danger .box-icon i 	{border: 2px solid #ab3a3b}	
.fa-times:before			{margin: -1px 0 0px;display: block;}
.box-danger .box-link:hover {background-color:#;}
.box-danger h3 				{background-color:#e2a2a3;color:#ab3a3b;border-bottom:1px solid #db969b}

.box-warning 					{background-color:#edd4ae;color:#c49744;border:1px solid #bc8929;}
.box-warning .box-icon 			{background-color:#e8aa45;color:#bc8929;border-right:1px solid #bc8929;}
.box-warning .box-icon i		{border: 2px solid #bc8929}	
.box-warning .box-link:hover	{background-color:#;}
.box-warning h3 				{background-color:#ebce98;color:#bc8929;border-bottom:1px solid #e5c08b}
	
.box-info 					{background-color:#bfd6ff;color:#5f91ff;border:1px solid #487eff;}
.box-info .box-icon 		{background-color:#6596ff;color:#487eff;border-right:1px solid #487eff;}
.box-info .box-icon i 		{border: 2px solid #487eff}	
.box-info .box-link:hover 	{background-color:#;}
.box-info h3 				{background-color:#afc9ff;color:#487eff;border-bottom:1px solid #a0c3f6}

.box-success 					{background-color:#c0dcc1;color:#67a16b;border:1px solid #519456;}
.box-success .box-icon 			{background-color:#6aaf6d;color:#519456;border-right:1px solid #519456;}
.box-success .box-icon i 		{border: 2px solid #519456}	
.box-success .box-link:hover	{background-color:#;}
.box-success h3 				{background-color:#afd5b2;color:#519456;border-bottom:1px solid #9dc99d}

@media screen and (max-width : 768px){
}
@media screen and (max-width : 640px){
.box 				{margin:0 0 10px;border-radius: 5px;}	
.box-icon-pad50		{padding-left:50px}
.box h3 			{padding:5px 5px;margin:0}
.box-content > div	{padding:5px 5px}
.box-icon 			{padding:0 10px;}	
.box-icon i {
	border: 1px solid transparent;
	width: 1.5em;
	height: 1.5em;
	font-size: 1.25em;
	line-height: 1.4em;}	
}
@media screen and (max-width : 480px){
}
@media screen and (max-width : 320px){
}

/* LIST */
.list-2col li	{float:left; width:50%}
.list-3col li	{float:left; width:33.33%}
.list-4col li	{float:left; width:25%}
.list-bullet 	{margin-left: 1.5em;}	
.list-bullet > li {position: relative; padding:0 0 10px}
.list-bullet > li:before {
    position: absolute;
    left: -1.25em;
    width: 1.25em;
	content: "\0025c6";
	color: #00b8b8;
	top:-1px;}
	
.list-bullet-rcarret > li a:before {
	content: "\00203A"}

.list-icon > li {position: relative; padding:1px 0 1px 1.5em}	
.list-icon > li .fa {}
.list-icon > li .fa:before {
    position: absolute;
    left: 0;
    width: 1em;
	color: #00b8b8;
	top:2px;
	font-size:1.125em;}
	

@media screen and (max-width : 768px){
	.list-2col li, .list-3col li, .list-4col li	{
		float:left; width:50%}
}
@media screen and (max-width : 640px){
	.list-2col li, .list-3col li, .list-4col li	{
		float:left; width:100%}
}
@media screen and (max-width : 480px){
}
@media screen and (max-width : 320px){
}


/* DIVIDER */
.divider-01 {overflow: hidden;text-align: center}
.divider-01:before, .divider-01:after {
    content: "";
    display: inline-block;
    height: 3px;
    position: relative;
    vertical-align: middle;
    width: 50%;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
.divider-01:before {right: 0.5em;margin-left: -50%}
.divider-01:after {left: 0.5em;margin-right: -50%}	

.divider-02 {
	text-align: center;
    content: "";
    display: block;
    height: 3px;
    width: 310px;
	border-bottom: 1px dotted #ccc;
	border-top: 1px dotted #ccc;
	margin:5px auto;
}

@media screen and (max-width : 480px){
	.divider-02 {width: 100%;}
}


/* Lightbox */
.picture-frame {
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.5);
	box-shadow: 0 0 4px rgba(0,0,0,0.5);
	padding: 10px;
	background-color: #ffffff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;}
.team-member 		{margin: 0 auto}
.team-member-img	{position: relative}
.team-member-img > a, .team-member-img > a img {
	display: block}
.team-member-img > a {
	width: 100%;
	height: 100%;
	position: relative;
	overflow:hidden;}
.team-member-img > a img {
	width:100%;}
.team-member-img > a span {
	position: absolute;
	width: 100%;
	text-align: center;
	color: rgba(255,255,255,1);
	font-size: 20px;
	background: rgba(0,0,0,0.8);
	transition: bottom 0.3s ease-in-out;
	top:auto;
	left: 0;
	right: 0;
	bottom: -100%;
	padding:10px 0;
	overflow: hidden;
	height: auto;
	max-height: 100%;}
.team-member-img > a:hover span {
	bottom: 0;}
	 
.team-member-overlay {
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	text-align: center;
	background: rgba(0,0,0,0.7);}
.team-member-overlay > div {
	position: absolute;
	color: rgba(255,255,255,0.8);
	width: 70%;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	top: 55%;
	left: 50%;
	-moz-transform: translate(-50%, -55%);
	-webkit-transform: translate(-50%, -55%);
	transform: translate(-50%, -55%);}
.team-member-overlay div h3 {font-size:2em;text-align: center; color:#ffffff; margin:0; border:none}
.team-member-overlay a.team-member-close {
	z-index: 1001;
	color: rgba(255,255,255,0.5);
	position: absolute;
	top: 5%;
	right: 2%;
	font-size: 2em;
	overflow: hidden;
	opacity: 0;
	filter: alpha(opacity=0);}
.team-member-overlay a.team-member-close:before { content:'\2715'; display:block; font-weight:bold}
.team-member-overlay a.team-member-close:hover {color: rgba(255,255,255,0.9);}
.team-member-overlay img {
	max-height: 550px;
	max-width:550px;
	width:100%;
	opacity: 0;
	filter: alpha(opacity=0);}
.team-member-prev, .team-member-next {
	position: absolute;
	color: rgba(255,255,255,0.5);
	font-size:6em;
	top: 50%;
	transform: translate(0%, -50%);
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}
.team-member-prev:hover, .team-member-next:hover {
	color: rgba(255,255,255,0.9)}
.team-member-prev			{left:2%}
.team-member-prev:before	{content:'\2039'; display:block;}
.team-member-next			{right:2%}
.team-member-next:before	{content:'\203A'; display:block; font-weight:bold}


.team-member-overlay:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
	padding: 0;}
.team-member-overlay:target img, .team-member-overlay:target a.team-member-close {
	-moz-opacity:1;
	-webkit-opacity: 1;
	opacity: 1;
	filter: alpha(opacity=99);}
	
@media screen and (max-width : 768px){
	.team-section .section	{margin-bottom:0}
	.team-member-img		{margin: 10px 0}
	.team-member-img > a span {padding:8px 0}
	.team-member-overlay div h3 {font-size:2em}
}
@media screen and (max-width : 640px){
	.team-member-img > a span {font-size: 1.25em;padding:8px 0;}
	.team-member-overlay div h3 {font-size:1.75em}
	.team-member-overlay img {padding: 8px}
}
@media screen and (max-width : 480px){
	.team-member-img	{margin: 5px 0}
	.team-member-prev, .team-member-next {font-size:5em}
}
@media screen and (max-width : 320px){
	.team-member-overlay div h3 {font-size:1.5em}
}


/* Standard Forms */
.important {color: #ff0000;margin: 0 0 0 0.5%;}
.required:after	{color:#ff0000; content:"*";}

.row form .row { margin: 0 -6px }
.form-content { display:inline-block; width:100%}
.form-group {width:100%; margin:0 0 5px}
input[type="text"], select, textarea {
	padding:8px 5px;
	border: 1px solid #cccccc;
	background-color:#efefef;
	color:#999999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;}
input[type="text"], select, textarea {width:100%}
.form-field-trans {
	border: 0px !important;
	background-color: transparent !important}
/*input[type="text"]:valid {border: 1px solid #cccccc;}
input[type="text"]:invalid {border: 1px solid #cccccc;}*//* #ff0000 */
	
placeholder, ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
	color:#777777 !important}
/*
input[type="text"]:focus, textarea:focus, select:focus, input[type="checkbox"]:focus, input[type="radio"]:focus 
	{border-color:rgba(0, 171, 188, 0.75);}
	*/
	
/* FORM - CHECKBOX RADIO */
input[type=radio], input[type='checkbox'] {
  display: none;}
input[type=radio] + label {
  display: block;}
input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 8px;
  width: 20px;}
input[type=radio] + label:before {
  content: "\f10c"} /* Radio Unchecked */

input[type=radio]:checked + label:before {
  content: "\f192"} /* Radio Checked */

input[type="checkbox"] + label:before {
  content: "\f096"} /* Checkbox Unchecked */

input[type="checkbox"]:checked + label:before {
  content: "\f046"} /* Checkbox Checked */



/* BUTTON */
.btn  {
	display:inline-block;
	font-size:0.85em;
	width:130px;	
	text-align:center;
	font-weight:bold;
	margin: 3px 5px;
	padding:8px;
	cursor:pointer;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	-moz-transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	-webkit-transition: background-color .25s ease, color .25s ease, border-color .25s ease;}

.btn-dark:hover, .btn-light  {
	color:#00b8b8;
	border:1px solid #00b8b8;
	background-color: #ffffff;}

.btn-dark, .btn-light:hover  {
	color:#ffffff;
	border:1px solid #00b8b8;
	background-color:#00b8b8;}

.btn-white  {
	color:#ffffff;
	border:1px solid #ffffff;
	background-color: transparent;}

.btn-white:hover  {
	color:#666666;
	border:1px solid #ffffff;
	background-color:#ffffff;}
	

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
	overflow:hidden;
}

/* Modal Content/Box */
.modal-content {
    width: 300px;
	border: 2px solid #666666;
	background-color:#ffffff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	position:absolute;
	top:50%;
	left:50%;
	-moz-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);}
.modal-body > div {
	padding:15px;}
	
.modal-title {
	font-size:1.25em;
	line-height:1; 
	padding:8px 0;
	background-color:#666666; 
	color:#ffffff;
	text-align:center;
	margin:0;}	

                
/* The Close Button (x) */
.modal-close {
	position: absolute;
	right: 5px;
	top: 18px;
	color: #ffffff;
	font-size: 2.125em;
	line-height:0;}
.modal-close:hover {color: #00b8b8;cursor: pointer;}
.modal-close-container {position: absolute; right:0; top:0}

.modal-content {border: 2px solid #00b8b8 !important;}
.modal-title {background-color:#00b8b8 !important;}


	
/* ANIMMATION - FADE IN - FADE OUT */
.FadeInAndOut {
   -webkit-animation: fadeinout 4s linear forwards;
   -moz-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards}

@keyframes fadeinout {
  0%   {opacity:0}
  25%  {opacity:1}
  75%  {opacity:1}
  100% {opacity:0}
}
@-moz-keyframes fadeinout{
  0%   {opacity:0}
  25%  {opacity:1}
  75%  {opacity:1}
  100% {opacity:0}
}
@-webkit-keyframes fadeinout{
  0%   {opacity:0}
  25%  {opacity:1}
  75%  {opacity:1}
  100% {opacity:0}
}   

.FadeIn {
   -webkit-animation: fadein 4s linear forwards;
   -moz-animation: fadein 4s linear forwards;
    animation: fadein 4s linear forwards}

@keyframes fadein {
  0%   {opacity:0}
  25%  {opacity:1}
  100% {opacity:1}
}
@-moz-keyframes fadein{
  0%   {opacity:0}
  25%  {opacity:1}
  100% {opacity:1}
}
@-webkit-keyframes fadein{
  0%   {opacity:0}
  25%  {opacity:1}
  100% {opacity:1}
} 

.FadeOut {
   -webkit-animation: fadeout 4s linear forwards;
   -moz-animation: fadeout 4s linear forwards;
    animation: fadeout 4s linear forwards}

@keyframes fadeout {
  0%   {opacity:1}
  75%  {opacity:1}
  100% {opacity:0}
}
@-moz-keyframes fadeout{
  0%   {opacity:1}
  75%  {opacity:1}
  100% {opacity:0}
}
@-webkit-keyframes fadeout{
  0%   {opacity:1}
  75%  {opacity:1}
  100% {opacity:0}
}   

@keyframes fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  24%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
}

@-moz-keyframes fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  24%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

@-webkit-keyframes fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  24%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}


#myslideFrame .anim-fadein { position:relative; width:100%;}
#myslideFrame .anim-fadein {position:absolute; width:100%; opacity:0; animation-name: fade; animation-duration: 40s; animation-iteration-count: infinite; }
#myslideFrame .anim-fadein:nth-of-type(1) { animation-delay: 0s;  }
#myslideFrame .anim-fadein:nth-of-type(2) { animation-delay: 8s;  }
#myslideFrame .anim-fadein:nth-of-type(3) { animation-delay: 16s;  }
#myslideFrame .anim-fadein:nth-of-type(4) { animation-delay: 24s;  }
#myslideFrame .anim-fadein:nth-of-type(5) { animation-delay: 32s;  }	

/*#myslideFrame .mySlides:nth-of-type(1)	{background-image: url('../img/top-01.jpg');}*/
/* keyframes #anim_slides */
/*@-webkit-keyframes anim_slides {
    0%	 {opacity:0}
    6%	 {opacity:1}
    24%  {opacity:1}
    30%  {opacity:0}
    100% {opacity:0}
}
@-moz-keyframes anim_slides {
    0%	 {opacity:0}
    6%	 {opacity:1}
    24%  {opacity:1}
    30%  {opacity:0}
    100% {opacity:0}
}
@keyframes anim_slides {
    0%	 {opacity:0}
    6%	 {opacity:1}
    24%  {opacity:1}
    30%  {opacity:0}
    100% {opacity:0}
}
*/
/*
#myslideFrame .mySlides {
    opacity:0;
    position:absolute;
    top:0;
*/

    /* css3 animation */
/*    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 40.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 40.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    animation-name: anim_slides;
    animation-duration: 40.0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;
}*/

/* css3 delays */
/*.slides ul  li:nth-child(2) {}*/
/*#myslideFrame :nth-of-type(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
	animation-delay: 0s;
}
#myslideFrame .mySlides:nth-of-type(2) {
    -webkit-animation-delay: 8.0s;
    -moz-animation-delay: 8.0s;
	animation-delay: 8.0s;
}
#myslideFrame .mySlides:nth-of-type(3) {
    -webkit-animation-delay: 16.0s;
    -moz-animation-delay: 16.0s;
	animation-delay: 16.0s;
}
#myslideFrame .mySlides:nth-of-type(4) {
    -webkit-animation-delay: 24.0s;
    -moz-animation-delay: 24.0s;
	animation-delay: 24.0s;
}
#myslideFrame .mySlides:nth-of-type(5) {
    -webkit-animation-delay: 32.0s;
    -moz-animation-delay: 32.0s;
	animation-delay: 32.0s;
}
#myslideFrame .mySlides div {
    display:block;
}	*/

/*
#myslideFrame .mySlides:nth-of-type(1) {
  animation: xfade ease-in-out 25s -0s infinite;
}

#myslideFrame .mySlides:nth-of-type(2) {
  animation: xfade ease-in-out 25s -5s infinite;
}

#myslideFrame .mySlides:nth-of-type(3) {
  animation: xfade ease-in-out 25s -10s infinite;
}

#myslideFrame .mySlides:nth-of-type(4) {
  animation: xfade ease-in-out 25s -15s infinite;
}

#myslideFrame .mySlides:nth-of-type(5) {
  animation: xfade ease-in-out 25s -20s infinite;
}*/

/*@keyframes xfade{
     0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    80% {opacity: 1;}
    100% {opacity: 1;}
}*/
/*
#myslideFrame .mySlides:nth-of-type(1)	{background-image: url('../img/top-01.jpg');}
#myslideFrame .mySlides:nth-of-type(2)	{background-image: url('../img/top-02.jpg');}
#myslideFrame .mySlides:nth-of-type(3)	{background-image: url('../img/top-03.jpg');}
#myslideFrame .mySlides:nth-of-type(4)	{background-image: url('../img/top-04.jpg');}
#myslideFrame .mySlides:nth-of-type(5)	{background-image: url('../img/top-05.jpg');}*/
