/* 
Theme Name: Etude André Harpes
Theme URI: http://www.hfa.lu
Author: Binar
Author URI: http://www.binar.lu
Version: 1.0
*/

@charset "UTF-8";
/* CSS Document */
/*-------Reset default browser CSS.------------------------------------------ */
body,header,footer,nav,p,ul,ol,form,input,h1,h2,h3,h4,h5,h6,textarea,fieldset,blockquote,dl,dt,dd,table,td,th,tr{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:22px;font-weight: normal;}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none;}
img,fieldset{border:0;}
img {display: block;}
hr{display:none;}
sup{vertical-align:super;font-size:.7em;line-height:.8em;}
sub{vertical-align:sub;font-size:.7em;line-height:.8em;}
address{font-style:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;}

*{box-sizing: border-box;-moz-box-sizing: border-box;}

/*-------General--------------------------------------------------------------*/
a, a:visited, a:hover {text-decoration: none;outline: 0;}
a {color: #036;}
a:hover {color: #666;}
.clear {clear:both;}
.gridcol {overflow: hidden;zoom: 1;}
.right {float: right;}
.left{float:left;}


/*-----layout-------------------------------------------------------------------------------------------------------------------------*/
body {background-color: #003366;color: #fff;}
#container {width: 900px;margin: 35px auto 0;}

/*-----Header-------------------------------------------------------------------------------------------------------------------------*/
header {width:900px;height:182px;text-align: center;background: #fff;padding: 20px 0 10px;}
#logo {display: block;}
#logo img {display: inline;}

/*-----Footer-------------------------------------------------------------------------------------------------------------------------*/
footer {height: 150px;background: #fff;}

/*-----Homepage-----------------------------------------------------------------------------------------------------------------------*/
#homepage {background: url('../images/background02.jpg') 0 0 no-repeat;background-size: cover;}
#homepage ul {width: 390px;overflow: hidden;margin: auto;height: 383px;}
#homepage ul li {float: left;}
#homepage ul li:nth-child(1), #homepage ul li:nth-child(2) {margin-top: -5px;}
#homepage ul li:nth-child(3), #homepage ul li:nth-child(4) {margin-top: -20px;}
#homepage ul li:nth-child(2), #homepage ul li:nth-child(4) {margin-left: -20px;}
#homepage ul li a {width: 200px;height: 200px;display: block;text-indent: -999px;}
#homepage ul li.aboutus a {background: url('../images/about01.png') 0 0 no-repeat;}
	#homepage ul li.aboutus:hover a {background: url('../images/about02.png') 0 0 no-repeat;}
#homepage ul li.services a {background: url('../images/services01.png') 0 0 no-repeat;}
	#homepage ul li.services:hover a {background: url('../images/services02.png') 0 0 no-repeat;}
#homepage ul li.links a {background: url('../images/links01.png') 0 0 no-repeat;}
	#homepage ul li.links:hover a {background: url('../images/links02.png') 0 0 no-repeat;}
#homepage ul li.contact a {background: url('../images/contact01.png') 0 0 no-repeat;}
	#homepage ul li.contact:hover a {background: url('../images/contact02.png') 0 0 no-repeat;}

/*-----Navigation-----------------------------------------------------------------------------------------------------------------------*/
nav {background: url('../images/background02.jpg') 0 center no-repeat;position: relative;}
nav>ul {overflow: hidden;}
nav>ul>li {float: left;margin-left: -20px;}
nav>ul>li:first-child {margin-left: 0px;}
nav>ul>li>a, nav>ul>li:hover>a {width: 150px;height: 150px;display: block;text-indent: -999px;}
nav>ul>li.aboutus>a {background: url('../images/about02.png') 0 0 no-repeat;background-size: 150px 150px;}
	nav>ul>li.aboutus:hover>a, nav>ul>li.aboutus.current-menu-item>a {background: url('../images/about03.png') 0 0 no-repeat;background-size: 150px 150px;}
nav>ul>li.services>a {background: url('../images/services02.png') 0 0 no-repeat;background-size: 150px 150px;}
	nav>ul>li.services:hover>a, nav>ul>li.services.current-menu-parent>a {background: url('../images/services03.png') 0 0 no-repeat;background-size: 150px 150px;}
nav>ul>li.links>a {background: url('../images/links02.png') 0 0 no-repeat;background-size: 150px 150px;}
	nav>ul>li.links:hover>a, nav>ul>li.links.current-menu-item a {background: url('../images/links03.png') 0 0 no-repeat;background-size: 150px 150px;}
nav>ul>li.contact>a {background: url('../images/contact02.png') 0 0 no-repeat;background-size: 150px 150px;}
	nav>ul>li.contact:hover>a, nav>ul>li.contact.current-menu-item a {background: url('../images/contact03.png') 0 0 no-repeat;background-size: 150px 150px;}

nav ul.sub-menu {position: absolute;top: 150px;left: 0;display: none;overflow: hidden;background: url('../images/servicebar.jpg') 0 0 no-repeat;width: 100%;height:40px;}
nav ul.sub-menu li {float: left;padding: 11px 0;margin: 0 11px;}
nav ul.sub-menu li:first-child {margin-left: 10px;}
nav ul.sub-menu li:last-child {margin-right: 10px;}
nav ul.sub-menu li a, nav ul.sub-menu li.current-menu-item a {text-indent: -999px;display: inline-block;height: 18px;}
nav .services.current-menu-parent {margin-bottom: 40px;}
nav .services.current-menu-parent ul.sub-menu {display: block;}

.realestate a {background: url('../images/realestate01.png') 0 0 no-repeat;width: 90px;}
	.realestate:hover a, .realestate.current-menu-item a {background: url('../images/realestate02.png') 0 0 no-repeat;width: 90px;}
.maritime a {background: url('../images/maritime01.png') 0 0 no-repeat;width: 67px;}
	.maritime:hover a, .maritime.current-menu-item a {background: url('../images/maritime02.png') 0 0 no-repeat;width: 67px;}
.vat a {background: url('../images/vat01.png') 0 0 no-repeat;width: 107px;}
	.vat:hover a, .vat.current-menu-item a {background: url('../images/vat02.png') 0 0 no-repeat;width: 107px;}
.estateplanning a {background: url('../images/general01.png') 0 0 no-repeat;width: 259px;}
	.estateplanning:hover a, .estateplanning.current-menu-item a {background: url('../images/general02.png') 0 0 no-repeat;width: 259px;}
.domiciliation a {background: url('../images/domiciliation01.png') 0 0 no-repeat;width: 104px;}
	.domiciliation:hover a, .domiciliation.current-menu-item a {background: url('../images/domiciliation02.png') 0 0 no-repeat;width: 104px;}
.truth a {background: url('../images/telling01.png') 0 0 no-repeat;width: 139px;}
	.truth:hover a, .truth.current-menu-item a {background: url('../images/telling02.png') 0 0 no-repeat;width: 139px;}

/*-----Content------------------------------------------------------------------------------------------------------------------------*/
.content {background: #fff;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 14px;line-height: 1.5;text-align: justify;color:#036;padding: 20px;}
.content h2 {font-size: 16px;margin-bottom: 20px;font-weight: bold;}
.content p {margin-bottom: 14px;}
.pics {margin: 60px 0 0 -20px;}

/*-----Contact------------------------------------------------------------------------------------------------------------------------*/
#address {float: left;padding-top:30px;text-align: center;width: 450px;font-family: 'Verdana', sans-serif;}
#map {float: right;cursor: pointer;border:1px solid #036;}
.popup {position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.3);width: 100%;height: 100%;display: none;}
.innerPopup {position: absolute;left: 50%;top: 50%;margin: -323px 0 0 -400px;width: 386px;height: 312px;}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {width: 100%;}
	#container {width: 100%;margin: 0 auto 0;display: inline-block;}

	/*Header*/
	header {width:100%;height:102px;}
	#logo {display: block;}
	#logo img {display: inline;width: 300px;height: auto;}

	/*Nav*/
	#homepage ul {width: 300px;height: 300px;background-position: center bottom;}
	#homepage ul li a {width: 160px;height: 160px;}
	#homepage>ul>li.aboutus>a, #homepage>ul>li.aboutus:hover>a, #homepage>ul>li.aboutus.current-menu-item>a, #homepage>ul>li.services>a, #homepage>ul>li.services:hover>a, #homepage>ul>li.services.current-menu-parent>a, #homepage>ul>li.links>a, #homepage>ul>li.links:hover>a, #homepage>ul>li.links.current-menu-item a, #homepage>ul>li.contact>a, #homepage>ul>li.contact:hover>a, #homepage>ul>li.contact.current-menu-item a {background-size: 160px 160px;}

	nav {text-align: center;}
	nav>ul {display: inline-block;}
	nav>ul>li {margin-left: 0px;}
	nav>ul>li>a, nav>ul>li:hover>a {width: 80px;height: 80px;}
	nav>ul>li.aboutus>a, nav>ul>li.aboutus:hover>a, nav>ul>li.aboutus.current-menu-item>a, nav>ul>li.services>a, nav>ul>li.services:hover>a, nav>ul>li.services.current-menu-parent>a, nav>ul>li.links>a, nav>ul>li.links:hover>a, nav>ul>li.links.current-menu-item a, nav>ul>li.contact>a, nav>ul>li.contact:hover>a, nav>ul>li.contact.current-menu-item a {background-size: 80px 80px;}

	nav ul.sub-menu {top: 80px;height:132px;background-size: cover;}
	nav ul.sub-menu li {position: static;display: block;padding: 0;float: none;margin: 2px 0;text-align: center;}
	nav ul.sub-menu li:first-child {margin-left: 0px;}
	nav ul.sub-menu li:last-child {margin-right: 0px;}
	nav ul.sub-menu li a, nav ul.sub-menu li.current-menu-item a {text-indent: -999px;display: inline-block;height: 18px;}
	nav .services.current-menu-parent {margin-bottom: 132px;}
	nav .services.current-menu-parent ul.sub-menu {display: block;}

	.content {font-size: 14px;line-height: 1.5;text-align: justify;color:#036;padding: 5%;}
	.content h2 {font-size: 16px;margin-bottom: 20px;font-weight: bold;}
	.content p {margin-bottom: 14px;}
	.pics {margin: 60px 0 0 -6%;}
	.pics img {width: 105.5%;height: auto;}

	#address {float: none;text-align: center;width: 280px;}
	#map {float: none;cursor: pointer;border:1px solid #036;}
	#map img {width: 280px;height: auto;}
	.popup {position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.3);width: 100%;height: 100%;display: none;}
	.innerPopup {position: absolute;left: 50%;top: 50%;margin: -160px 0 0 -160px;width: 320px;height: auto;}
	.innerPopup img {width: 100%;height: auto;}
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer 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: 100%;}

}