/*
* Title: Responsive
* Author: Aldasoro
* Template: Masala
* Version: 4.1
* Copyright 2016 Masala Consultancy Engineering
* www: http://www.masalaconsultors.com
* mail: info masalaconsultors.com


Taula de continguts
-------------------
 1.Max-width: 1600px
 2.Max-width: 1279px
 3.Max-width: 1024px
 4.Max-width:  991px
 5.Max-width:  767px
 6.Max-width:  440px
 7.Menu responsive
*/


/* ----- 1.Superiors a 1600px ----- */
@media (max-width: 1600px) {

}
/* ----- 2.Superiors a 1279px ----- */
@media (max-width: 1279px) {
	.portfolio-box.five-col .project-post{
	    width: 24.98%;
	}
}

/* ----- 3.Superiors a 1024px ----- */
@media (max-width: 1024px) {
	.menu-box{
		display:block;
	}
}

/* ----- 4.Superiors a 991px ----- */
@media (max-width: 991px) {
	.logo-box, .social-box, .copyright-box{
	    padding-right:20px;
	}
	.languages{
		padding-right: 15px;
	}
	.logo img{
		width:100px;
	}
	ul.menu-list > li > a {
	    padding-right: 20px;
    	font-size: 0.8em;
	}
	.header-foot{
		font-size: 0.8em;
	}
	.media-relative{
		display:none;
	}

/* ----- 5.Superiors a 767px ----- */
@media (max-width: 767px) {
	/* amagar barra lateral */
	header, .flex-control-nav{
		display:none;
	}
	#content{
    	margin-left: 0;
	}
	#slider .flexcaption.center{
		top:35%;
	}
	.responsive-header{
		display:inline-flex;
		position:absolute;
		z-index:5;
		background-color:rgba(255,255,255,1.0);
		box-shadow: 0px 0px 1px #bcbcbc;
		width:100%;
		height:60px;
		text-align: center;
	}
	.responsive-header .left{
		float:left;
		margin-left:10px;
	}
	.responsive-header .right{
		float:right;
		margin-right:10px;
	}
	.responsive-header .icon{
		width:10%;
		font-size: 1.4em;
		margin-top: 15px;
	}
	.icon a, a:hover{
		color:#1e3264;
	}
	.responsive-header .center{
		width:80%;
	}
	.responsive-header .logo{
		margin-top:20px;
		height: 20px;
		text-transform: uppercase;
		color:#1e3264;
		font-size: 1em;
		font-weight: 500;
	}
	#projectes-button{
		display:inherit;
		position:absolute;
		width:100%;
		bottom:0;
		margin-bottom:50px;
		text-align:center;
		z-index:5;	
	}
	#projectes-button a{
		color:#1e3264;
		font-size: 0.8em;
		text-transform: uppercase;
		background:rgba(255,255,255,0.75);
		padding:20px;
	}
	#slider .flexcaption h1 {
	    font-size: 2em;
	}
	#slider .flexcaption h1:after {
	    position: relative;
	    content: '';
	    width: 100px;
	    height: 2px;
	    background: #fff;
	    bottom: 0;
	    left: 50%;
	    margin-left: -50px;
	}
	#slider .flexcaption p {
	    font-size: 1.5em;
	}
	/* pàgina de projectes */
	.portfolio-box{
		top:60px;
	}
	.filtre-masala{
		display:none;
	}
	.project-post .hover-box{
		display:none;
	}
	.separator{
		height: 1px;
	    border-top: 1px;
	    margin-top: 50px;
	    background-color: #fff;
	    border: none;
	}
	.menu-responsive small a{
		margin-left:10px;
		margin-right:10px;
	}

	/* pàgina de contacte */
	.map{
		display:none;
	}
	.contact-box{
	    right: 0px;
	    bottom: 0px;
	    top:20px;
	    position: relative;
	    background: #fff;
	    padding: 40px 40px 20px;
	    width: 100%;
	}
	.contact-box h1{
		display:none;
	}
	.contact-page h4{
		font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 400;
	}
	.contact-box p{
		font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 300;
		padding-bottom:10px;
	}
	.contact-box .telefon{
		display: none;
	}
	.contact-page input[type="text"],
	.contact-page textarea {
		font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	    font-weight: 300;
	}
	.contact-page textarea {
    	height: 120px;
	}
	.contact-page input[type="submit"]{
	    color: #fff;
	    font-size: 1em;
		font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	    font-weight: 300;
	    border: 1px solid transparent;
	    outline: none;
	    width: 100%;
	    padding: 8px 13px;
	    display: block;
	    margin-bottom: 10px;
	    background: #1e3264;
	    -webkit-appearance: none;
	}
}

/* ----- 6.Superiors a 440px ----- */
@media (max-width: 440px) {
	
}

/* ------- 7.Menu responsive ----- */
.menu-responsive li{
	list-style:none;
    text-transform: uppercase;
 	font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:white;
    font-size:1.2em;
    padding-top:30px;
    padding-bottom:30px;
}
.menu-responsive li a{
    color:white;
    font-weight: 400;
}
.menu-responsive small{
	font-size:0.8em;
}
.separator{
	height:1px; 
	border-top:1px;
	margin-top:50px;
	background-color:#fff; 
   	border:none; 
}