/*
TEMPLATE FOR MEDIA QUERIES
	@media screen and (min-width:1320px) {}                         --------> full layout 
    @media screen and (min-width:1150px) and (max-width:1319px) {}    --------> monitor pequeno 
    @media screen and (min-width:860px) and (max-width:1149px) {}    --------> layout content_narrow fixed width 
    @media screen and (min-width:600px) and (max-width:859px) {}    --------> content_narrow is fluid 
    @media screen and (max-width:599px) {} 						--------> main menu collapses to a button

INDEX
	- PAGE RESET
	- STRUCTURE
	- FX_4
	- FX_3
	*/
	/*-----------------------------------------------------------  PAGE RESET   --------------------*/
	* {
		padding: 0;
		margin: 0;
		border: 0;
		text-decoration: none;
	}

	body {
		font-family: 'Noto Sans', sans-serif;
		font-size: 16px; 
	}

	article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

	input {
		-webkit-appearance: none;
		border-radius: 0;
	}

	.clear { clear: both; }

	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.flexC {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.fx_2, .fx_3, .fx_4 { position: relative; }

	.hide { display:none; }

	@media screen and (min-width:480px) { .hide_desktop { display:none!important; } }

	@media screen and (max-width:479px) { .hide_mobile { display:none!important; } }

	*[class^="fx_"] img.imgC { max-width: 100%; }

	img { max-width: 100%; }
	.floatL { float: left; }
	.floatR { float: right; }

	.txtC { text-align: center!important; }
	.txtR { text-align: right!important; }

	/*-----------------------------------------------------------  STRUCTURE  ----------------------*/
	@media screen and (min-width:1320px) {
		header, section, footer { 
			width: 1280px;
			margin: 0 auto;
			position: relative;
		}

		.content_narrow {
			width: 795px;
			padding: 0 50px;
			float: left;
		}

		aside {
			width: 335px;
			float: right;
			margin:  0 50px 0 0;
		}
	}
	
	@media screen and (min-width:1150px) and (max-width:1319px) {
		header, section, footer { 
			width: 1090px;
			margin: 0 auto;
			position: relative;
		}

		.content_narrow {
			width: 735px;
			padding: 0 30px 0 0;
			float: left;
		}

		aside {
			width: 325px;
			float: right;
			margin:  0;
		}
	}

	@media screen and (min-width:860px) and (max-width:1149px) {
		header, section, footer, .content_wide, .content_narrow {
			width: 810px;
			margin: 0 auto;
		}

		aside {
			display: flex;
			flex-wrap: wrap;		
		}
	}

	@media screen and (max-width:859px) {
		header, section, footer { margin: 0 15px; }

		aside {
			display: flex;
			flex-wrap: wrap;		
		}
	}

	#scrollToTop:hover {
		cursor: pointer;
		text-decoration: none;
		opacity: 1;
	}
	#scrollToTop {
		font-size: 40px;
		text-align: center;
		border-radius: 50%;
		width: 55px;
		height: 55px;
		position: fixed;
		bottom: 15px;
		right: 15px;
		display: none;
		background-color: #f2663a;
		color: #fff;
		opacity: 0.15;
		-webkit-transition: opacity .25s;
	}

	/*-----------------------------------------------------------  FX_4   --------------------------*/
	@media screen and (min-width:800px) {
		.fx_4:nth-child(1n), 
		.fx_4:nth-child(2n), 
		.fx_4:nth-child(3n) {
			width: calc(25% - 10px);
			margin: 0 10px 10px 0;
		}

		.fx_4:nth-child(4n) {
			width: 25%;
			margin: 0 0 10px 0;
		}
	}

	@media screen and (min-width:690px) and (max-width:799px) {
		.fx_4:nth-child(1n) {
			width: calc(100%/2 - 10px);
			margin: 0 10px 10px 0;
		}

		.fx_4:nth-child(2n) {
			width: calc(100%/2);
			margin: 0 0 10px 0;
		}
	}


	@media screen and (max-width:689px) {
		.fx_4 {
			width: 100%;
			margin: 0 0 10px 0;
		}
	}

	/*-----------------------------------------------------------  FX_3   --------------------------*/
	@media screen and (min-width:1150px) { aside div.fx_3 { width: 100% !important; } }

	@media screen and (min-width:595px) {
		.fx_3:nth-child(1n), .fx_3:nth-child(2n) {
			width: calc(100%/3 - 10px);
			margin: 0 10px 10px 0;
		}

		.fx_3:nth-child(3n) {
			width: calc(100%/3);
			margin: 0 0 10px 0;
		}
	}

	@media screen and (min-width:560px) and (max-width:594px) {
		.fx_3:nth-child(1n) {
			width: calc(100%/2 - 10px);
			margin: 0 10px 10px 0;
		}

		.fx_3:nth-child(2n) {
			width: calc(100%/2);
			margin: 0 0 10px 0;
		}
	}

	@media screen and (max-width:559px) {
		.fx_3 {
			width: 100%;
			margin: 0 0 10px 0;
		}
	}

	/*-----------------------------------------------------------  FX_2   --------------------------*/
	@media screen and (min-width:600px) {
		.fx_2:nth-child(1n) {
			width: calc(100%/2 - 10px);
			margin: 0 10px 10px 0;
		}

		.fx_2:nth-child(2n) {
			width: calc(100%/2);
			margin: 0 0 10px 0;
		}
	}

	@media screen and (max-width:599px) {
		.fx_2 {
			width: 100%;
			margin: 0 0 10px 0;
		}
	}
	
/*-----------------------------------------------------------  VIDEO ---------------------------*/
.video {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
    margin-bottom: 2em;
}

.video iframe, .video object, .video embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

aside .video { margin-bottom: 1em; }