/*
// ·S·
*/

/* VARIABLES ESTILS ROOT 00 Base */
:root {	
	/* Marges */
	--marge-quart: 5px;
	--marge-mig: 10px;
	--marge: 20px;
	--marge-doble: 40px;
	/* Colors */
	--color-fons: #222222;
	--color-fons-op: #22222270;
	--color-text: #f2f2f2;
	--color-primer: #cccc00;
	--color-segon: #cccc99;
	--color-gris-fosc: #666666;
	--color-gris-clar: #cccccc;
	/* Colors METEO */
	--cel: #0088cc;
	--cel2: #4bc3ff;
	--sol: #cccc00;
	--sol2: #ff8c1a;
	--albada: #c8612d;
	--posta: #c82d64;
	--nit: #333874;
	--nuvol-nit: #4F5271;
	--nuvol-dia: #759aba;
	--neu-dia: #d5eAec;
	--neu-nit: #788995;
	/* Transició */
	--transicio: 0.2s;
}

/* OSWALD WEBFONT */
@font-face {
    font-family: 'Oswald Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Regular'), url('../fonts/Oswald-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Regular';
    font-style: italic;
    font-weight: normal;
    src: local('Oswald Regular'), url('../fonts/Oswald-RegularItalic.woff') format('woff');
}

@font-face {
    font-family: 'Oswald ExtraLight';
    font-style: italic;
    font-weight: normal;
    src: local('Oswald ExtraLight'), url('../fonts/Oswald-Extra-LightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Oswald ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald ExtraLight'), url('../fonts/Oswald-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Light';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Light'), url('../fonts/Oswald-Light.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Light';
    font-style: italic;
    font-weight: normal;
    src: local('Oswald Light'), url('../fonts/Oswald-LightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Medium'), url('../fonts/Oswald-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Medium';
    font-style: italic;
    font-weight: normal;
    src: local('Oswald Medium'), url('../fonts/Oswald-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Oswald DemiBold';
    font-style: italic;
    font-weight: bold;
    src: local('Oswald DemiBold'), url('../fonts/Oswald-Demi-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Oswald DemiBold';
    font-style: normal;
    font-weight: bold;
    src: local('Oswald DemiBold'), url('../fonts/Oswald-DemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Bold';
    font-style: normal;
    font-weight: bold;
    src: local('Oswald Bold'), url('../fonts/Oswald-Bold.woff') format('woff');
 }

@font-face {
    font-family: 'Oswald Bold';
    font-style: italic;
    font-weight: bold;
    src: local('Oswald Bold'), url('../fonts/Oswald-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Heavy';
    font-style: normal;
    font-weight: heavy;
    src: local('Oswald Heavy'), url('../fonts/Oswald-Heavy.woff') format('woff');
}

@font-face {
    font-family: 'Oswald Heavy';
    font-style: italic;
    font-weight: heavy;
    src: local('Oswald Heavy'), url('../fonts/Oswald-HeavyItalic.woff') format('woff');
}
    
@font-face {
    font-family: 'Oswald Stencil Bold';
    font-style: stencil;
    font-weight: normal;
    src: local('Oswald Stencil Bold'), url('../fonts/Oswald-Stencil.woff') format('woff');
}


/* Estils generals */
@media all{
	
	body {
		display: flex;
		flex-direction: column;
		font-family: 'Oswald ExtraLight';
		margin: 0;
		padding: 0;
			height: 100%;
			background-repeat: no-repeat;
			background-attachment: fixed;
		font-size: 14px;
		line-height: 26px;
		letter-spacing: 2px;
		color: var(--color-text);
		background-color: var(--color-fons);
		background-image: linear-gradient(142deg, var(--color-fons), var(--color-gris-fosc));
		transition: var(--transicio);
	}
	a { color: var(--color-primer); text-decoration:none; }
	a:link { color: var(--color-primer); text-decoration:none; }
	a:visited { color: var(--color-primer); text-decoration:none; }
	a:active { color: var(--color-gris-clar); text-decoration:none; }
	a:hover { color: var(--color-gris-clar); text-decoration:none; }
	
	.actiu{ opacity: 1; }
	.inactiu{ opacity: 0.4; }
	.ocult{ display: none; }
	
	header {
		padding: var(--marge);
		font-size: 28px;
		line-height: 26px;
		text-align: center;
	}
	
	nav {
		padding: var(--marge);
		background-color: var(--color-primer);
	}
	
	main{
		display: flex;
		flex-flow: column;
		align-items: center;
	}
	
	article{
		display: flex;
		flex-flow: row;
		flex: 100%;
		max-width: 860px;
		width: 100%;
	}
	
	meteo {
		flex: 23%;
		display: inline-block;
		margin: var(--marge) 0 0 0;
		padding: var(--marge);
		text-align: center;
	}
		meteo p {
			margin: 0;
			padding: 0;
		}
		#ciutat00 {
			font-family: 'Oswald Bold';
			min-height: 38px;
			font-size: 30px;
			line-height: 34px;
		}
		#coord00 {
			min-height: 46px;
			line-height: 18px;
		}
		#meteo00 {
			height: 140px;
		}
			#meteo00 img{
				width: 120px;
				height: 120px;
			}
		#temp00 {
			height: 50px;
			font-size: 35px;
			line-height: 34px;
		}
		
		.dst{
			font-size: 10px;
		}
	
	hores {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		flex: 77%;
		padding: 0;
	}
	hores div {
		float: left;
		padding: 0 var(--marge);
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	hores div div {
		margin: var(--marge-quart);
		padding: var(--marge-quart);
	}
		#hores00 img{
			width: 30px;
			height: 30px;
		}
	
	
	#hora00{
		padding: var(--marge-mig) var(--marge);
		font-family: 'Oswald Light';
		font-size: 30px;
		align-items: left;
		justify-content: left;
		text-align: left;
	}	
	#info00{
		padding: var(--marge-mig) var(--marge);
		align-items: left;
		justify-content: left;
		text-align: left;
	}
	
	#missatge00{
		font-family: 'Oswald Light';
	}
		
		
	
	aside{
		flex: 30%;
		padding: var(--marge);
	}
	
	footer {
		padding-top: var(--marge-doble);
		display: flex;
		flex-flow: row;
		flex: 100%;
		max-width: 860px;
		width: 100%;
	}
	footer p {
		font-size: 12px;
		line-height: 24px;
		color: var(--color-text);
		margin: 0;
		padding: var(--marge);
	}

	hr {
		border: 1px solid var(--color-gris-fosc);
	}
	
}




@media all and (max-width: 816px){
	body {
		overflow-x: hidden;
		overflow-y: scroll;
	}
	
}







@media all and (max-width: 576px){
	.mobilNo {
		display: none;
	}
	
	article{
		flex-direction: column;
		flex: 100%;
	}
	
	meteo {
		flex: 100%;
	}
	
	#hora00{
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	hores {
		flex: 100%;
	}
	
	#info00{
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	footer {
		flex-direction: column;
		align-items: left;
		justify-content: left;
		text-align: left;
	}
}






@media all and (max-width: 440px){

}