/* ==========================================================================
   General styles
   ========================================================================== */


body {
    font-size: 1em;
    line-height: 1.4;
	margin: 0;
}

::-moz-selection {
    background: #514b58;
    text-shadow: none;
}

::selection {
    background: #514b58;
    text-shadow: none;
}

h1, h2, .title {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

p, h1, h2, body {
    font-family: 'Trebuchet MS', Helvetica, Helvetica Neue, Arial;
}

.main, .wrapper {
    width: 90%;
    margin: 0 5%;
}

.header-container{
		display:inline-block;
		width:100%;
		height: 20%;
}

.map { width: 35em; }

.map img { max-width: 100% }

.map a {border:none;}
.map a:hover {border:none;}
.map a:visited {border:none;}

h1 {
	font-size: 460%; 
	line-height: 50%;
}

h2{
	font-size: 300%; 
	line-height: 80%;
}

p{ font-size: 1em; line-height: 50%;}

a, a:hover, a:visited { text-decoration: none; }

/* ===================
    ALL: grey Theme
   =================== */

.header-container,
.footer-container{
    background: #362f3a;
}

.aside {
    background-color: transparent;
}

header{
	background-color: #362f3a;
}

.pt {
	color: white;
	font-size: 2.1em;
}

.eng {
	color: #9e99a5;
	font-size: 1.8em;
}

p, h1{
	color: #362f3a;
}

h2 {
	color: #514b58;
}

a, a:visited{ color: #514b58; }
a:hover{ color: #d2202d; }
/* ==============
    MOBILE: 
   ============== */
header{
	width: 100%;
	margin-left: 5%;
	margin-top: 2%;
	padding-bottom: 3%;
}

	.logo-container {
	max-width:100%;
	margin-top: -7%;
	margin-right: 5%;
	float: right;
	position:relative;
	z-index: 1;
	}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 5%;
	margin-left: 5%;
	margin-top: 2%;
}


.aside {
	border: 2px white solid;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
}

.aside {
		margin-right: 5%;
		margin-top: 4%;
		padding: 0;
		clear:none;
	}
	
	.aside .img-container{
		border-width: 2px;
		border-color: white;
		width: 20em;
		padding: 0;
        -webkit-box-shadow: 0 0px 10px #aaa;
           -moz-box-shadow: 0 0px 10px #aaa;
		   	 -o-box-shadow: 0 0px 10px #aaa;
                box-shadow: 0 0px 10px #aaa;
	}
	
	.aside .img-container img { 
		max-width:100%;
		padding: 0;		
	}


/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 0;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Header
   ==================== */

	header{
	width: 50%;
	margin-left: 10%;
	margin-top: 2%;
	padding-bottom: 3%;
	}


}

@media only screen and (max-width: 1024px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    .header-container{
        -webkit-box-shadow: 0 5px 10px #aaa;
           -moz-box-shadow: 0 5px 10px #aaa;
                box-shadow: 0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ */

    .title {
        float: left;
    }
	
	header{
	width: 50%;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 7%;
	padding-bottom: 5%;
	}
	
/* ============
    WIDE: Main
   ============ */

    .main{
        float: left;
        width: 80%;
    }

    .aside {
        float: left;
        width: 80%;
		margin-left: 15%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

	 .main{
        float: left;
        width: 40%;
    }

    .aside {
        float: right;
    }

    .wrapper {
        width: inherit; /* 1140px - 10% for margins */
        margin: 0;
    }
	
	header{
	width: 50%;
	margin-left: 10%;
	margin-top: 4%;
	padding-bottom: 3%;
	}
	
	.aside .img-container{
		border-width: 5px 5px 1px 5px;
	}

}