/*!
	estilo para folhetos de cordel digitais
 */
	
		html {
		  scroll-behavior: smooth;
		}
		
		body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
		
		/* ------ accessibility area G1 link skip to main ------- */
		.skip-link {
		  background: #319795;
		  color: #fff;
		  font-weight: 700;
		  left: 50%;
		  padding: 4px;
		  position: absolute;
		  transform: translateY(-100%);
		  transition: transform 0.3s;
		}

		.skip-link:focus {
		  transform: translateY(0%);
		}
		/*------------------- end accessibility area --------------------*/
		
		
		.header-paralax{
			width:100%;
			position:fixed;
			height:620px; 
			text-align: center;}
		main{background:#fff;
			position:relative;
			top:620px;
			font-size: 1.1rem;}
			
		.justify-content-around {padding-top:0px;}	
			
		h4 {font-size: 1.7rem; padding-bottom:0.5em}
		.card {border:none; padding-top: 20px;}
						
		footer a{color:#dc3545}	
      	  
		.scrolling-wrapper{
		overflow-x: auto;}
		
		.card {	padding-left:3em;
			padding-right:3em;
		}

		.card-block{
			line-height: 1em;
			border: none;
			transition: all 0.2s ease-in-out !important;&:hover{transform: translateY(-5px);box-shadow: none;}}
	
		#myBtn {
		  display: none;
		  position: fixed;
		  bottom: 5px;
		  right: 1px;
		  z-index: 99;
		  font-size: 18px;
		  border: none;
		  outline: none;
		  background-color: red;
		  color: white;
		  cursor: pointer;
		  padding: 15px;
		  border-radius: 4px;
		}

		#myBtn:hover {
		  background-color: #555;
		}
			
		#myBtnVoltar {
		  display: block;
		  position: fixed;
		  bottom: 5px;
		  left: 1px;
		  z-index: 99;
		  font-size: 18px;
		  border: none;
		  outline: none;
		  background-color: green;
		  color: white;
		  cursor: pointer;
		  padding: 15px;
		  border-radius: 4px;
		  text-decoration: none;
		}

		#myBtnVoltar:hover {
		  background-color: #050;
		}
		
		footer.row p{ font-size:1em;padding-bottom:1em}
		.creditos h4 {
			padding-top: 1.5em;}
	  	
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* ----------------------MEDIA QUERIES----------------------------
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* --------------------------------------------------------- */
/* ---------Smartphones (portrait and landscape) ----------- */
/* --------------------------------------------------------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){

	.card {	padding-left:1em;
			padding-right:1em;
		}
	img {margin-top: 20px;
		height: 600px;
		width: 100%;
	}
	
}

/* ------------------------------------------------ */
/* -------------Smartphones (landscape) ----------- */
/* ------------------------------------------------ */
@media only screen
and (min-width : 321px) {

	.header-paralax {   
		height: 300px;}
	img {margin-top: 5px;
		height: 300px;
		width: 220px;
	}
	main {top: 300px;
		font-size: 1.2rem;}	
	.card {	padding-left:2em;
		padding-right:2em;}
	.creditos {font-size:1.1em; line-height:1.3em;}
	.creditos h4 {padding-bottom:0.5em}

	footer.row .col-md-3 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;}
}


/* ---------------------------------- */
/* Smartphones (portrait) ----------- */
/* ---------------------------------- */

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

	.header-paralax {   
		height: 500px;}
	img {margin-top: 0px;
		height: 500px;
		width: 100%;
	}
	main {top: 500px;}
	.creditos {font-size:1.1em; line-height:1.3em}
	.creditos h4 {padding-bottom:0.5em}	
	footer.row p{ font-size:0.9em;}
	footer.row .col-md-3 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;}	
	
}


/* ------------------------------------------------- */
/* ------------- Samsung Galaxy S5 ----landscape---- */
/* ------------------------------------------------- */
@media only screen and (min-device-width: 360px) 
and (max-device-height: 640px) and (orientation : landscape) 
and (-webkit-device-pixel-ratio: 3)	{
	
	.header-paralax {   
		height: 305px;}
	img {margin-top: 5px;
		height: 300px;
		width: 220px;
	}
	main {top: 305px;}
	.card {	padding-left:4em;
			padding-right:4em;
	}
	footer.row {width:80%; padding-left:20px}
	
	footer.row .col-md-3 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;}
}

/* --------------------------------------------------- */
/* -------------- Samsung Galaxy S5 -----portrait--- - */
/* --------------------------------------------------- */
@media only screen and (min-device-width: 360px) 
and (max-device-height: 640px) and (orientation : portrait) 
and (-webkit-device-pixel-ratio: 3){
	
	main {top: 600px;}	
	.header-paralax {   
		height: 600px;}	
	img {margin-top: 5px;
		height: 580px;
		width: 100%;
	}	
	.card {	padding-left:1em;
			padding-right:1em;
	}
	footer.row {width:96%;}
	footer.row .col-md-3 {
		-ms-flex: 0 0 80%;
		flex: 0 0 80%;
		max-width: 80%;}
	footer.row p{  line-height:2px}
}	

/* ---------------------------------------------- */ 
/* ------ iPads (portrait and landscape) -------- */
/* ---------------------------------------------- */

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

	.header-paralax {   
		height: 620px;}		
	img {margin-top: 20px;
		height: 600px;
		width: auto;
	}
	main {top: 620px;}
	footer.row {width:96%; padding-left:20px}	
}

/* ------------------------------------------- */ 
/* ------------iPads (landscape) ------------- */
/* ------------------------------------------- */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
	
	footer.row {width:96%; padding-left:20px}
	footer.row .col-md-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;}
	footer.row {width:96%; padding-left:20px}
	.card {
		padding-left: 3em;
	padding-right: 3em;}	

}

/* ------------------------------------------- */ 
/* ----------- iPads (portrait) -------------- */
/* ------------------------------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
	
	footer.row {width:96%; padding-left:20px}
	.card {
    padding-left: 3em;
    padding-right: 3em;}
}

/* ------------------------------------------- */ 
/* ---------- Desktops and laptops ----------- */
/* ------------------------------------------- */
@media only screen
and (min-width : 1224px){
	
	.header-paralax: {height:620px}
	img {margin-top: 20px;
		height: 600px;
		width: auto;
	}
	main {top:620px}
	.card-block {
		line-height: 1em;
		padding-left: 15%;
		padding-right: 15%;
		}
	
	footer.row .col-md-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;}
	footer.row {width:80%; padding-left:14px}	
	
	#myBtn {
		  bottom: 20px;
		  right: 30px;		 
		  font-size: 18px;		  
		  padding: 15px;
		  border-radius: 4px;
		}
		
	#myBtnVoltar {
		  bottom: 20px;
		  left: 30px;
		  font-size: 18px;		  
		  padding: 15px;
		  border-radius: 4px;
		}	
}


/* ------------------------------------------- */
/* -------------Large screens ---------------- */
/* ------------------------------------------- */
@media only screen
and (min-width : 1824px){
	.header-paralax: {height:620px}
	img {margin-top: 20px;
		height: 600px;
		width: auto;}
	main {top:620px}
	.container-fluid {width:70%; font-size:1.3rem}	
	.card-block {
		line-height: 1em;
		padding-left: 13%;
		padding-right: 13%;
		}
				
	footer.row {width:70%;}
	footer.row p{ 
		font-size: 1em;
		}