/* global */
	:root {
		/* t. de fontes ...................... */
		--font-size1 :  42px;
		--font-size2 :  27px;
		--font-size3 :  18px;
		/* cores ............................. */
		--tech-color1:  #4fb6bb; /* cmyk, k: 29*/
		--tech-color1c: 79,182,187; /* ....... */
		--tech-color2:  #204a4d; /* cmyk, k: 70*/
		--tech-color2c: 32,74,77; /* ......... */
		--tech-color3:  #071112; /* cmyk, k: 93*/
		--tech-color3c: 7,17,18; /* .......... */
		--scie-color1:  #73d5e3; /* cmyk, k: 11*/
		--scie-color2:  #3e737a; /* cmyk, k: 52*/
		--scie-color3:  #27474d; /* cmyk, k: 70*/
		--agro-color1:  #82d048; /* cmyk. k: 18*/
		--agro-color1c: 130,208,72;
		--agro-color2:  #4f802d; /* cmyk, k: 50*/
		--agro-color2c: 79,128,45;
		--agro-color3:  #2f4d1b; /* cmyk, k: 70*/
		--agro-color3c: 47,77,27;
		--back-color1:  #e6e6e6;
		--back-color2:  #020505;
		--titl-color1:  #0d0d0d; /* cmyk, k: 95*/
		--titl-color2:  #d9d9d9; /* cmyk, k: 15*/
		--cent-color1:  #1c1c1c; /* cmyk, k: 89*/
		
/* anima . */
	@keyframes fade {
		0%    {width: 0;}
		100%  {width: auto;}
	}

/* body . 
. &grid . */
    *    {
        font-family: 'Ubuntu', sans-serif;
    }
	body {
		height: auto;
		width:  auto;
		min-width: 700px;
		margin: 0;
		display: grid;
		grid-template-areas:
		"con1"
		"con2"
		"con3";
		background-color: var(--back-color1);
		font-family: "Ubuntu", sans-serif;
	}
	#con1         {grid-area: hea;}
	/*****/	#logo {grid-area: logo;}
	/*****/ .co1c {grid-area: links;}
	#con2 	      {grid-area: mid;}
	/*****/ #welc {grid-area: welc;}
	/*****/	#abow {grid-area: abow;}
	/*****/	#prsv {grid-area: prsv;}
	/*****/	#bioh {grid-area: bioh;}
	/*****/ #objt {grid-area: objt;}
	/*****/	#cont {grid-area: cont;}
	/*****/	#parc {grid-area: parc;}
	#con3 	      {grid-area: foo;}
	#conf         {grid-area: fix;}
/* text . 
 . glob . */
	.pc_titl, .pc_cent {
		margin: 0;
	}
	.pc_titl {
		font-size: var(--font-size2);
		color:    var(--titl-color1);
		padding: 20 10 20 10;
		border-bottom: 1px solid var(--tech-color1);
		font-weight:    500;
	}
	.pc_cent {
		font-size: var(--font-size3);
		color:    var(--cent-color1);
		text-align:  justify;
		line-height:     1.5;
		font-weight: 410;
		padding: 20 10 20 10;
	}
/* conc . */
	.conc {
		display: grid;
		padding: 0;
	}
/* con1 .
  &co1c . */
	#con1 {
		z-index: 2;
		position: sticky;
		top: 0;
		padding: 20px 10%;
		grid-template-areas: 
		"logo links";
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--tech-color1);
		background-color: var(--tech-color2);
		box-shadow: 2px 0 10px rgba(0,0,0,0.7);
	}
	#logo {
		width: 160px;
		height: auto;
	}
	.co1c {
		margin: 30px 0;
		padding-left: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: right;
		gap: 20px;
		font-weight: 500;
	}
	.li1c {
		border-bottom: 2px dotted rgba(0,0,0,0);
		display: inline-block;
		text-decoration: none;
		font-size: var(--font-size3);
		color:    var(--titl-color2);
		transition: 
		border-color 0.5s ease, 
		color 0.5s ease;
	}
	.li1c:hover {
		color:        var(--scie-color1);
		border-color: var(--scie-color1);
	}
/* con2 . 
 . &co2c */
	#con2 {
		grid-template-areas: 
		"welc"
		"abow"
		"bioh"
		"objt"
		"prsv"
		"cont"
		"parc";
		grid-template-rows: auto;
	}
	.co2c {
		display: grid;
		padding: 75px 10%;
	}
	.bt_stan {
		display: block;
		width:    auto;
		padding:  10px;
		margin: 0 10 20 10;
		font-size: var(--font-size3);
		border: 1px solid var(--agro-color1);
		color:    var(--titl-color1);
		background-color: rgba(0,0,0,0);
		text-decoration: none;
		transition: background-color 0.4s ease, color 0.3s ease;
	}
	.bt_stan:hover {
		background-color: var(--agro-color2);
		color: var(--back-color1);
	}
	/* welc */
		#welc {
			display:       grid;
			place-items: center;
			background-image: url('img/hopsn_background.jpg');
			background-size: 100% auto;
			background-position: center center;
			height:       600px;
		}
		#p1_welc {
			width:  100%;
			height: 100%;
			padding:   0;
			background-image: 
			linear-gradient(
			rgba(0,0,0,0.6) 0%,
			rgba(0,0,0,0)  30%);
			color: var(--titl-color2);
			text-align:    center;
			align-content: center;
			font-size: 50px;
			border:       0;
		}
	/* abow */
		#abow {
			grid-template-areas:
			"abow_c rs_exp";
			column-gap: 20px;
			background-image: 
			linear-gradient( 75deg,
			rgba(var(--tech-color2c),1) 12%,
			rgba(var(--agro-color3c),0.8)),
			url(img/i6.jpg);
		}
		#p1_abow {
			color: var(--titl-color2);
			border-color: var(--agro-color1);
		}
		#p2_abow {
			color: var(--titl-color2);
		}
		#abow_c {
			grid-area: abow_c;
		}
		#rs_exp {
			grid-area: rs_exp;
		}
		#rs_exp > p {
			color: var(--titl-color2);
		}
		#rs_exp > p {
			margin-bottom: 20px;
			row-gap: 10px;
		}
		#rs_cor > a {
			display: flex;
			flex-direction: row;
			text-decoration: none;
			align-content: center;
		}
		#rs_cor > a > p {
			padding: 0 0 0 10;
			align-content: center;
			color: var(--titl-color2);
		}
		#rs_cor {
			padding: 0 10px;
			display: flex;
			flex-direction: column;
			row-gap: 20px;
		}
		.rs_logo {
			width: auto;
			height: 30;
		}
	/* bioh */		
		#bioh {
			background-image: 
			linear-gradient(
			to top,
			rgba(var(--agro-color2c),0.5),
			rgba(var(--agro-color3c),0.5)),
			url(img/hopsn2_background.jpg);
			background-position: center;
			background-size: 100% auto;
			display: grid;
			align-items: center;
		}
		#p1_bioh {
			color: var(--titl-color2);
			border-color: var(--agro-color1);
		}
		#p2_bioh {
			color: var(--titl-color2);
		}
	/* objt */
		#objt {	
			background-image: 
			linear-gradient(90deg,
			rgba(var(--tech-color2c),0.8),
			rgba(var(--agro-color3c),1) 88%),
			url(img/i5.jpg);
			background-position: center center;
		}
		#p1_objt, #p2_objt {
			color: var(--titl-color2)
		}
		#p1_objt {
			border-color: var(--agro-color1)}
	/* prsv */
		#prsv {
			background-image: 
			linear-gradient(to top, 
			rgba(var(--tech-color2c),0.6),
			rgba(var(--tech-color3c),0.6)),
			url(img/hops3_background.jpg);
			background-position: center;
			background-size: 100% auto;
		}
		.oc_prsv {
			font-size: var(--font-size3);
			background-color: rgba(0,0,0,0.1);
			list-style-position: inside;
			line-height: 1.5;
			padding: 10;
			margin: 0 10 0 10;
		}
		#a1_prsv,
		.oc_prsv,
		#p1_prsv,
		#p2_prsv {
			color: var(--titl-color2);
		}
		#a1_prsv {
			margin-top: 20px;
			border-color: var(--scie-color1);
		}
		#a1_prsv:hover {
			background-color: var(--scie-color2);
		}
	/* loca */
		#loca {
			background-image: 
			radial-gradient(
			var(--scie-color2),
			var(--scie-color3));
		}
		#p1_cont {
			color: var(--titl-color2);		
		}
	/* parc */
		#parc {
			background-image: 
				linear-gradient(
				0deg,
				rgba(var(--tech-color1c),0.5) 5%,
				rgba(var(--tech-color2c),1) 45%),
				url(img/hopsn1_background.jpg);
			background-size: 100% auto;
			background-position: center;
		}
		#c1_parc {
			display: flex;
			flex-wrap: wrap;
			column-gap: 10px;
			align-items: center;
			justify-content: space-between;
			background-image:
			linear-gradient(
			to top,
			rgba(var(--agro-color1c),0.6),
			rgba(var(--agro-color2c),0.5)),
			url(img/hopsn_background.jpg);
			padding: 50;
			margin-top: 20px;
			border-radius: 10px;
			box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
		}
		.pa_logo {
			width: 10vw;
		}
		@media only screen and (max-width: 1400px){
			.pa_logo {
				width: 15vw;
			}
		}
		@media only screen and (max-width: 980px){
			.pa_logo {
				width: 20vw;
			}
		}
		@media only screen and (max-width: 780px){
			.pa_logo {
				width: 30vw;
			}
			.pc_
		}
		#p1_parc,
		#p2_parc {
			color: var(--titl-color2);
		}
	/* rwd : resposividade ................. */
		@media only screen and (max-width: 960px){
			#prsv,
			#parc {
				background-size: auto auto;
			}
		}
		@media only screen and (max-width: 900px){
			#abow {
				grid-template-areas: 
				"abow_c"
				"rs_exp";
			}
			#rs_cor {
				flex-direction: row;
				justify-content: space-between;
			}
			.rs_logo {
				height: 35px;
			}
		}
		@media only screen and (max-width: 1200px){
			.co1c {
				justify-content: right;
			}
		}
	
/* con3 . */
	#con3 {
		display: flex;
		padding: 20px 10%;
		background-color: var(--tech-color3);
		color: var(--titl-color2);
		align-items: center;
		justify-content: space-between;
	}
	#p1_con3 {
		font-size: var(--font-size3);
		line-height: 1.5;
	}
	#i1_con3 {
		height: auto;
		width: 160px;
	}
/* fix .. */
	#conf {
		display: none;
		width: 100%;
		height: auto;
		padding: 10 0 10 0;
		position: sticky;
		bottom: 0;
		background-color: var(--tech-color2);
	}
	#p1_conf {
		text-align: center;
		font-size: var(--font-size3);
		color:    var(--titl-color2);
		margin: 0;
		padding: 0 10 0 10;
	}