/* CSS Document */
:root{
	--main-color: #09c;
	--formacao-color: #F7941D;
	--transition: all 0.3s ease-in-out;;
}
/* custom scrollbar */
* {
    scrollbar-color: #000 transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #000; 
  border-radius: 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555555; 
}
/* custom scrollbar end */

body {
	overflow:hidden; /* needed to eliminate scrollbars caused by the background image */ 
	padding:0; 
	margin:0; /* necesarry for the raster to fill the screen */
	height:100%; 
	width:100%; 
	font: 14px 'OpenSansCondensedLight', Arial, sans-serif;
	font-weight:400; color:#000; background:#F6F6F6;
}
a{
	outline:none;
	text-decoration:none;
}
h1, h2, h3{
	font-weight: normal;
}
b,
strong{
	font-family: 'OpenSansCondensedBold', Arial, sans-serif;
	font-weight: normal;
}

/* background image */
#bgimg {
	position:absolute;
	z-index: -1;
	/*background-image: url(img/bkgrdformacao.jpg);*/
}
#realBody{
	position:absolute; 
	z-index: 5; /* Place the new body above the background image */
	overflow:auto; /* restore scrollbars for the content */ 
	height:100%; 
	width:100%;/* Make the new body fill the screen */
	left:0px; 
	top:0px;
}

/* generic use */

/*GO BACK AND TOP */
.goback{
	background: url(../img/arrows-black.png) top left;
	height: 64px;
	width: 64px;
	display: block;
	cursor: pointer;
}
.goback:hover{
	background: url(../img/arrows-black.png) top right;
}
.gotop{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: url(../img/arrows-black.png) bottom left;
	height: 64px;
	width: 64px;
	display: block;
	cursor: pointer;
}
.gotop:hover{
	background: url(../img/arrows-black.png) bottom right;
}

.facebook {color: var(--main-color);}
.wrap{width:850px; margin:0 0 0 100px;}
.wrap h2{margin:0; padding:5px; font-size:24px; color: var(--main-color);}
.wrap h2 a{text-decoration:none; color: var(--main-color);}
.wrap h2 a:hover{color:black;}
.wrap h3{margin:0; padding:5px; font-size:24px; color: var(--main-color);}
.wrap h3 a{text-decoration:none; color: var(--main-color);}
.clear{clear:both;}

#home{
	position:absolute; 
	width:100%; 
	bottom:50px; 
	left:0; 
}
#home h1{
	margin:0; 
	padding:10px 0 10px 20px; 
	font-size:35px; 
	color:#fff; 
	background: rgba(0,0,0,.8); 
}
#home h2{
	margin:0; 
	padding:0; 
	font-size:20px; 
	background-color:#fff;
}
.top{
	width:100%;
	margin-top:50px;
}
.top h1{
	margin:0; 
	padding:10px 0 10px 20px; 
	font-size:25px; 
	color:#FFF; 
	background-color: #000; 
}
.top h2{
	margin:0; 
	padding:0; 
	font-size:20px; 
	background-color:#fff;
}
.top h3{
	/*width:790px;*/
	margin:5px 0; 
	padding:0 20px 0; 
	font-size: 6rem; 
	color: var(--main-color); 
	/*background:#fff;*/
}
#home .main,
#home .subnav{
	background-color: rgba(255, 255, 255, 0.5);
}
.main{
	margin:5px 0 0 100px; 
	padding:5px; 
	border-bottom: 1px solid #000;
}
.main li{
	padding:5px; 
	display:inline; 
	font-size:30px; 
	color: var(--main-color); 
}
.main li a{
	color:#000;
	transition: var(--transition);
}
.main li a:hover{
	color: var(--main-color);
}
.subnav {
	margin:5px 0 0 100px; 
	padding:5px;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}
.subnav li {
	color: var(--main-color); 
	margin:0; 
	padding:5px; 
	display:inline; 
	font-size:25px; 
}
.subnav li a{ 
	color:#000;
	transition: var(--transition);
}
.subnav li a:hover{
	color: var(--main-color);
}
#active{
	color: var(--main-color);
}
/*****************************************/
/* CINECLUBE */
/*****************************************/
.cine-background{
	background: url(../img/bkgrdcineclube.jpg) no-repeat center fixed;
	background-size: cover;
}
h1.cine{
	margin:0; 
	padding:0; 
	font-size: 70px; 
	text-transform: uppercase; 
	color:#000;
}
h2.cine{
	margin: 0; 
	padding: 0; 
	text-transform: uppercase; 
	color: #000; 
	font-size: 2.5rem;
}
ul.cine{
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}
ul.cine li{
	/*height:250px;*/
	position:relative;
	margin:10px 0 0 0;
	padding:0;
	text-align:left;
}
ul.cine img{
	vertical-align: middle;
}
ul.cine li .info {
	position:absolute; 
	bottom:0; 
	left:0;  
	text-align: left; 
	color:black;
	display: flex;
} 
	ul.cine li .info div{
		padding: 15px;
	}
	ul.cine li .info div h1 {
		color: var(--highlight_color);
		font-size: 51px; 
		text-transform: uppercase; 
		margin: 0;
	}
	ul.cine li .info div + div{
		color:white;
		margin-left: 5px;
		background: rgba(0, 0, 0, .75);
		flex-grow: 1;
	}
ul.cine li .info div + div h1 {
	font-size: 30px; 
	text-transform: uppercase; 
	margin: 0; 
}
ul.cine li .info div + div p {
	font-size: 20px; 
	margin: 0; 
}
ul.cine li .info p a{text-decoration:none; color:#fff;}
ul.cine li .info p a:hover{color: var(--main-color);}

/* LIVRE TRANSITO */
.livre-transito{
 		padding: 2.5rem;
 		background: #000;
  	color: #fff;
 	}
 	.livre-transito h1{
 		margin: 0;
 		font-size: 40px;
 		font-weight: bold;
 		text-transform: uppercase;
 	}
 	.livre-transito h1 span{
 		color: #ff4300;
 	}
 	.livre-transito h1 + h1{
 		font-size: 35px;
 	}
 	.livre-transito p{
 		font-size: 20px;
 	}
 	.button {
	  text-decoration: none;
	  border: 4px solid #ff4300;
	  padding: 10px 15px;
	  font-size: 25px;
	  color: #fff;
	  display: inline-block;
	  margin-top: 5px;
	  transition: var(--transition);
	}
	.button:hover {
	  background-color: #ff4300;
	  color: #fff;
	}

/*****************************************/
/* PRODUCAO */

.docwrapnew{/*width:730px;*/ margin:0 0 0 100px;}
.docwrapnew h2{margin:0; padding:0 0 0 5px; background-color:#FFF; width:600px;}
.docwrapnew h3 a{text-decoration:none; color:#fff; padding:5px; font-size:24px;}
.new{color: var(--main-color);}
ul.docs li .movie{position:absolute; bottom:0; width:100%; border-top:0px solid #fff; background: var(--main-color); text-align:right;}
ul.docs li .movie p{padding:10px; font-size:20px; color:#fff;}
ul.docs li .movie p a{text-decoration:none; color:#fff;}
ul.docs li .movie p a:hover{color:#000;}

ul.docs{margin:0; padding:0; color:#fff; list-style: none;}
ul.docs li{position:relative; margin:10px 10px 0 0; padding:0; width:360px; height:840px; background: url(../img/opacity.png) repeat; float:left;}
ul.docs li h1{text-transform:uppercase; margin:0; padding:10px; font-size:21px;}
ul.docs li p {margin:0; padding:10px; font-size:16px;}
ul.docs li img{width:100%}

.docwrap{width:700px; margin:0 0 0 100px;}
.docwrap h2 {margin:0; padding:0 0 0 5px; background-color:#FFF; width:600px;}
.docwrap h3{margin:0; padding:5px; font-size:24px; color: var(--main-color);}
.docwrap h3 a{text-decoration:none; color:#fff;}
ul.animated {width: 602px; list-style: none; margin:0; padding: 0;}
ul.animated li {position: relative; margin:10px 0 0 0; padding: 0; text-align: center; border: 1px solid #fff;}
ul.animated li .thumb {width: 600px; /*--Width of image--*/ height: 250px; /*--Height of image--*/ position: relative; background-color:#CCC;}
ul.animated li h1 {font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; font-size:22px; }
ul.animated li a {text-decoration:  none; color:  var(--main-color); display: block;}
ul.animated li .description {  /*--Style the caption box--*/
	position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:url(../img/opacity.png) repeat; text-align: left; font-size:14px;  color:white;
	display: none; /*This is important since we want to hide the image caption and display it only on hover*/
}  
ul.animated li:hover .description {display: block; /*This is important since we want to show the image caption on hover*/}  
ul.animated li .description p {padding:10px; margin:0px;}  

/*****************************************/
/* PRODUCAO020 added junho 2020 */
/*****************************************/
.docContainer{
	margin: 0 0 0 100px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
	.docContainer:hover .docBlock{
			filter: grayscale(1);
		}
	.docContainer .docBlock:hover{
		filter: grayscale(0);
	}
.docContainer h1 {
	font-size: clamp(1.8rem, 6vw, 6rem);
	width: 100%;
  margin: 0;
}
.docBlock{
	flex-basis: calc(100% / 3 - 15px);
	display: flex;
	flex-direction: column-reverse;
	transition: var(--transition);
	box-sizing: border-box;
	overflow: hidden;
	/*border-top: 1px solid #000;*/
	margin-bottom: 25px;
	color: inherit;
}
.docBlock .docTitle{
	font-size: 30px;
	margin: 5px 0;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 10px;
}
	@media screen  and (max-width : 1224px) {
		.docBlock .docTitle{
			font-size: 25px;
		}
	}
.docBlock .docThumbnail{
	position: relative;
}
.docBlock .docThumbnail:before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0px;
	left: 10px;
	border-bottom: 30px solid #F6F6F6;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}
.docBlock img{
	width: 100%;
}
.grayfilter {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);

  transition: all .5s ease-out;

		& :hover {
	  -webkit-filter: grayscale(0);
	  filter: grayscale(0);
	}
}
.docBlock:hover .play{
	opacity: 1;
}
	.play{
		position: absolute;
		width: 150px;
		aspect-ratio: 1 / 1;
		border: 5px solid white;
		border-radius: 50%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		text-decoration: none;
		text-align: center;
		line-height: 150px;
		opacity: 0;
		transition: var(--transition);
		mix-blend-mode: screen;
	}
	.play:after{
		content: "\25BA" /* triangle */;
		font-size: 100px;
		color: #09c;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		right: 0;
	}

	@media screen and (max-width: 800px) {
		.docContainer{
			margin: 0 0 0 0px;
			flex-wrap: wrap;
		}
		.docContainer h1 {
		    padding-left: 0px;
		    text-align: center;
		}
		.docBlock{
			flex-basis: 100%;
		}
		.docBlock .docTitle {
			font-size: 35px;
			width: 90%;
			margin: 10px auto;
			text-align: left !important;
		}
		.play{
			width: 100px;
			height: 100px;
			border: 3px solid white;
			line-height: 100px;
		}
		.play:after{
			font-size: 80px;
		}
	}
/* PRODUCAO DOC PAGE */
.docfilmewrap{
	margin: 0 100px;
}
.docfilmewrap .docTitle{
	font-size: clamp(1.8rem, 2.5vw, 3.8rem);
	font-weight: normal;
	text-transform: uppercase;
}
.docfilmewrap video {
  width: 100%;
  height: auto;
}
.docfilmewrap .docContent{
	margin: 15px 0;
	display: flex;
	flex-wrap: wrap;
}
.docfilmewrap .docContent h2{
	background: none;
}
.docfilmewrap .docContent p{
	font-size: 22px;
}
.docfilmewrap .docSinopse{
	width: 60%;
	vertical-align: top;
	margin-right: 20px;
	box-sizing: border-box;
}
.docfilmewrap .docFicha{
	width: 38%;
	vertical-align: top;
	border-left: 1px solid #ccc;
	padding-left: 30px;
	box-sizing: border-box;
}
.docfilmewrap .docSinopse h2,
.docfilmewrap .docFicha h2{
	padding: 0;
	margin: 0;
}
.docfilmewrap .docSinopse p{
	margin: 10px 0;
	font-size: 32px;
}
.docfilmewrap .docFicha p{
	font-size: 14px;
	white-space: pre-line;
}

	@media screen and (max-width: 800px) {
		.docfilmewrap{
			width: 100%;
			margin-left: 0px;
		}
		.docfilmewrap .docTitle{
			border-top: 0px solid #ccc;
			width: 90%;
			margin: auto;
			text-align: center;
		} 
		.docfilmewrap .docContent{
			padding: 10px;
			box-sizing: border-box;
		}
		.docfilmewrap .docSinopse{
			display: block;
			width: 100%;
			margin-right: 0px;
		}
		.docfilmewrap .docFicha{
			display: block;
			width: 100%;
		}
	}
/*****************************************/
/* FORMACAO 017 */
/*****************************************/
.formacaowrap{
	margin:50px 100px;
}
.fromacaoIntro{
	font-size: 25px;
	padding: 0px 100px;
	/*background: url(../img/formacao/formacao-bkgrd.png?v=23.09.19) right center no-repeat;
	background-size: contain;
	-webkit-background-size: contain;*/
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.formacaoJumbo{
	width: 45%;
}
.formacaoJumbo svg{
	width: 70%;
}
.formacaoImage{
	width: 50%;
}
.formacaoJumbo .button{
	text-decoration: none;
	border: 1px solid currentColor;
	padding: 10px 15px;
	color: var(--formacao-color);
	display: inline-block;
	margin-top: 5px;

	transition: var(--transition);
}
.formacaoJumbo .button:hover{
	background-color: var(--formacao-color);
	color: #fff;
}
.formacaoSubTitle{
	margin: 0;
	padding: 0;
	font-size: 50px;
	text-transform: uppercase;
}
	.formacaoSubTitle span{
		color: var(--formacao-color);
		font-family: 'OpenSansCondensedBold';
	}
.formacaolist{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	margin: 0 -15px;
}
	.formacaolist ul{
		padding: 0 7.5px;
	  display: flex;
	  flex-direction: column;
	  flex: 0 0 33.3333333%;
	  box-sizing: border-box;
	}
	.formacaolist li{
		list-style: none;
	}
	.formacaolist li:first-child{
		position: relative;
		text-transform: uppercase;
	  margin: 0;
	  padding: 15px 0px 15px 20px;
	  font-size: 30px;
	  color: #fff;
	  border-radius: 25px 25px 0 0;
	  z-index: 1;
	  overflow: hidden;
		text-shadow: 3px 3px 3px #000;
	}
	.formacaolist li:first-child::after{
		content: '';
		position: absolute;
		background: 
	  					repeating-linear-gradient( 45deg, transparent, transparent 20%, white 20%, white 40%) top right no-repeat, repeating-linear-gradient( 135deg, transparent, transparent 20%, white 20%, white 40%) bottom right no-repeat;
	  background-size: 30% 49%, 30% 49%;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: -1;
	}
	.formacaolist li:first-child::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.formacaolist ul li img{
		width: 100%;
		height: auto;
		border-radius: 0 0 25px 25px;
	}
	.formacaolist li:nth-child(3){
		padding: 0 15px;
		font-size: 21px;
	}
	.formacaolist li a{
		color: var(--formacao-color);
		transition: all 0.5s ease-in-out;
	}
	.formacaolist li a:hover{
		color: #000;
	}
	.formacaolist li.link{
		margin-top: auto;
	}
	.formacaolist li.link a{
		border: 2px solid var(--formacao-color);
		margin: 20px;
	  padding: 10px 20px;
	  font-size: 20px;
	  text-decoration: none;
	  display: inline-block;
	}
	.formacaolist li.link a:hover{
		background: var(--formacao-color);
		color: #fff;
	}

	@media screen and (max-width: 800px) {
		.fromacaoIntro {
		  font-size: 25px;
		  justify-content: center;
		  padding: 10px;
	    background: none;
	    text-align: center;
	    box-sizing: border-box;
		}
		.formacaoImage {
		  width: 80%;
		  margin-top: 2rem;
		}
		.formacaolist{
			display: flex;
			flex-direction: column;
			margin: 1rem;
		}
		.formacaoJumbo {
	    width: 80%;
	  }
	  .formacaoSubTitle {
	    font-size: 30px;
	    text-align: center;
		}
		.formacaoJumbo .button {
	    border: 1px solid #000;
	    padding: 10px 20px;
	    color: #000;
		}
	  .formacaowrap {
	    margin: 50px 0px;
	  }
	}

/* footer added junho 2026
-------------------------------------*/
.footer{
  margin: 50px 0 50px 100px;
  display: flex;
  flex-wrap: wrap;

  .logo{
    height: 147px;
    display: flex;
    justify-content: center;
    align-items: center;

    img + img{
      padding: 5px;
    }
  }

  .contactos{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 2px solid #000;
    margin-left: 10px;
    padding-left: 14px;
    font-size: 1.4rem;

    h1{
      font-size: 1.6rem;
      margin: 0;
    }

    p{
      margin: 0;

      b{
        font-family: 'OpenSansCondensedBold', Arial, sans-serif;
      }
    }
  }
}
	.footer a{
		text-decoration: none;
		color: inherit;
	}
	.footer a:hover{
		color:  var(--main-color);
	}

	.copyright{
		margin: 50px 100px 0px 100px;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;

	  a{
	  	text-decoration: underline;
	  	text-underline-position: under;
	  	color: inherit;

	  	&:hover{
	  		color: #880707;
	  	}
	  }
	}
		@media screen and (max-width: 800px) {
			.copyright,
			.footer{
				margin: 50px;
			}
			.footer .logo{
				margin: 15px auto;
			}
			.footer .contactos{
				border-left: 0px solid #ccc;
				margin-left: 0px;
				padding-left: 0px;
				text-align: center;
			}
		}

/*****************************************/
@media screen and (max-width: 800px) {
	/* GERAL */
	#home{
		bottom: 10px;
	}
	#credits{
		position:absolute; 
		top:0px;  
		padding:2px 5px;
		background: none;
		display: none;
	}
	.top{ 
		width:100%; 
		margin-top: 0px;
		text-align: center;
	}
	.top h1 {
    padding: 25px 0 25px 0px;
	}
	.top h3 {
    width: 100%;
    margin: 10px 0;
    padding: 5px 0;
    font-size: 40px;
		background: none;
		border: 1px solid #000;
		border-width: 1px 0px;
	}
	.mobile-Nav-main{
		width: 100%;
		overflow: scroll;
	}
	.mobile-Nav-main::-webkit-scrollbar-thumb,
	.breadcrumbs::-webkit-scrollbar-track {
    border-radius: 2px;
    width: 0px;
  }
	.main {
    margin: 0px 0 0 0px;
    padding: 10px;
    background: none;
    /*width: 1100px;*/
    width: fit-content;
    white-space: nowrap;
    border-bottom: 0px solid #000;
    text-align: left;
	}
	.main li{
		font-size:25px;
	}
	.subnav {
    margin: 5px 0 0 0px;
    padding: 10px;
    /*width: 950px;*/
    width: fit-content;
    white-space: nowrap;
    background: none;
    border-bottom: 0px solid #000;
    text-align: left;
	}
	.subnav li {
    font-size: 21px;
	}
	.wrap {
    width: 100%;
    margin: 0 0 0 0px;
	}
	#homepage {
		background: #F6F6F6 url('http://ao-norte.com/img/bg-home-small.jpg?v=26.06.12.03') no-repeat left top fixed;
    	background-size: auto;
		-webkit-background-size: cover;
		background-size: cover;
		
		h1{
		 span{
			 display: block;
			 font-size: 20px;
			 text-transform: uppercase;
			}
		}
	}
	#bgimg{
		display: none;
	}
	h1.cine,
	h2.cine{
		text-align: center;
	}
	/* CINECLUBE */
	ul.cine {
    width: 100%;
    margin: 0 0 0px 0;
	}
	ul.cine li {
    height: auto;
    position: relative;
    margin: 0px 0 0 0;
	}
	ul.cine li img{
		max-width: 100%;
		display: block;
	}
	ul.cine li .info {
		position: relative;
	}
	/* PRODUCAO */
	.docwrapnew {
		margin:0 0 0 0px;
		width: 100%;
	}
	.docwrapnew h2 {
    margin: 0;
    padding: 0 0 0 0px;
    background: none;
    width: 100%;
	}
	ul.docs li {
    margin: 10px 10px 0 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: url(../img/opacity.png) repeat;
    float: left;
	}
	ul.docs li .movie {
    position: relative;
    width: 100%;
    border-top: 0px solid #fff;
    background:  var(--main-color);
    text-align: center;
  }
  /* FORMACAO */
  

  ul.formacao {
    margin: 0;
    padding: 0;
    background: red;
  }
  ul.formacao li{
		position:relative; 
		margin:10px 10px 20px 0; 
		padding:0; 
		width: 100%;
		height:auto;
		border-left:1px solid #a3c0a7;
	}
	ul.formacao li .link a {
    position: relative;
    border-top: 2px solid #ff4300;
    padding: 10px;
    font-size: 20px;
    margin-top: 10px;
		display: inline-block;
  }
  ul.formacao li p{
  	text-align: center;
  }
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 6, 2012 01:32:51 PM America/New_York */
@font-face {
	font-family: 'OpenSansCondensedLight';
	src: url('OpenSans-CondLight-webfont.eot');
	src: url('OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
		 url('OpenSans-CondLight-webfont.woff') format('woff'),
		 url('OpenSans-CondLight-webfont.ttf') format('truetype'),
		 url('OpenSans-CondLight-webfont.svg#OpenSansCondensedLight') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'OpenSansCondensedLightItalic';
	src: url('OpenSans-CondLightItalic-webfont.eot');
	src: url('OpenSans-CondLightItalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('OpenSans-CondLightItalic-webfont.woff') format('woff'),
		 url('OpenSans-CondLightItalic-webfont.ttf') format('truetype'),
		 url('OpenSans-CondLightItalic-webfont.svg#OpenSansCondensedLightItalic') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'OpenSansCondensedBold';
	src: url('OpenSans-CondBold-webfont.eot');
	src: url('OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('OpenSans-CondBold-webfont.woff') format('woff'),
		 url('OpenSans-CondBold-webfont.ttf') format('truetype'),
		 url('OpenSans-CondBold-webfont.svg#OpenSansCondensedBold') format('svg');
	font-weight: normal;
	font-style: normal;

}