@charset "utf-8";
/* FENNECORE FRAMEWORK */

/* BASE */

body, html 
{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	
	padding: 0;
	margin: 0 auto 0 auto;

	background: #EFEFEF;
	
	min-height: 100%;
	height: 100%;	

	
}

#fnc_wrapper 
{
    min-height: 100%;
    position: relative;
}

header
{
	background: #FFF;
	padding: 10px;
	
	width: auto;
	min-height: 80px;
	
	border-bottom: 1px solid #CCC;	
}

main
{
	width: auto;
	height: 30px;	
	
	padding-bottom: 80px;		
}

footer 
{
    width: 100%;
	height: 80px;
	
    position: relative;
    bottom: 0;
    left: 0;
}

footer .language
{
	padding: 30px;	
	float: right;
}

footer .copiright
{
	padding: 30px;	
	float: left;
}

/* LIBRARY */

.left_txt { text-align: left; }
.right_txt { text-align:right; }
.center_txt { text-align:center; }
.justify_txt { text-align:justify; }

.center_cont { margin: 0 auto 0 auto; }
.left_cont { float: left; }
.right_cont { float: right; }

.anchor { clear:both; }

/* THEME */

	a{ text-decoration: none; }

	.logo
	{
		background: url(../images/logo.png) center no-repeat;
		background-size: contain;
	}
	
	.slogan
	{
		background: url(../images/slogan.png) center no-repeat;
		background-size: contain;
	}

	.content
	{
		margin-top: 2px;
		background: #FFF;		
	}
	
	.menu
	{
		float: right;
		padding: 20px;	

		font-size: 14px;
		font-weight: bold;
	}

	.menu li
	{
		padding: 0px 10px;
		list-style: none;
		display: inline;
	}
	
	.menu a
	{
		color: #222;
	}

	.menu a:Hover
	{
		color:rgba(204,137,255,1.00);
	}

@media only screen and (min-width: 1100px) 
{
	
	.content
	{
		width: auto;
		padding: 20px 30px;			
	}
	
	.logo
	{
		float: left;

		width: 130px;		
		height: 80px;
	}
	
	.slogan
	{
		float: left;

		width: 230px;		
		height: 80px;
	}
	
}

@media only screen and (min-width: 980px) and (max-width: 1100px) 
{
	
	.content
	{
		width: auto;
		padding: 20px 30px;			
	}
	
	.logo
	{
		float: left;

		width: 130px;		
		height: 80px;
	}
	
	.slogan
	{
		float: left;

		width: 230px;		
		height: 80px;
	}
	
}

@media only screen and (min-width: 768px) and (max-width: 979px)
{
	
	.content
	{
		width: auto;
		padding: 20px 30px;			
	}
	
	.logo
	{
		float: left;

		width: 130px;		
		height: 80px;
	}
	
	.slogan
	{
		float: left;

		width: 230px;		
		height: 80px;
	}
	
}

@media only screen and (min-width: 481px) and (max-width: 767px) 
{
	
	.content
	{
		width: auto;
		padding: 20px 30px;			
	}
	
	.logo
	{
		float: left;

		width: 130px;		
		height: 80px;
	}
	
	.slogan
	{
		float: left;

		width: 230px;		
		height: 80px;
	}
	
}


@media only screen and (max-width: 480px) 
{
	
	.content
	{
		width: auto;
		padding: 20px 30px;			
	}
	
	.logo
	{
		float: left;

		width: 130px;		
		height: 80px;
	}
	
	.slogan
	{
		float: left;

		width: 230px;		
		height: 80px;
	}
	
}

/* Extra */
.main
{
	background: url(../images/main.jpg) right center no-repeat;	
}

.main .welcome
{
	margin-top: 200px;
	float: left;
}


.main .welcome h1
{
	font-size: 62px;
	color: #444;
}

.main .welcome h2
{
	font-size: 20px;
	color: #777;
}

.language
{
	padding: 0px 10px;
	float: right;	
}

.language a
{
	color: #222;
}

.img
{
	float: left;
	width: 400px;
}


.info
{
	float: right;
	width: calc(100% - 480px);	 /*460*/
}

