html						{ scroll-behavior:smooth; font:15px / 1.5 sans-serif; }
h1,h2,h3					{ font-family:"Instrument Serif", serif; font-weight:400; font-style:normal; text-align:center; text-transform:uppercase; }
div.splash					{ background:center center / cover no-repeat black url(/img/TUKI-home-h.jpg); display:grid; place-items:center; height:100vh; max-height:1000px; }
div.splash img				{ display:inline-block; width:40%; max-width:500px; height:auto; }
nav a, nav a:hover,
nav span, nav span:hover	{ transition:all 0.3s ease; }
header						{ background:white; border-bottom:#e8e8e8 1px solid; padding:30px 0; }
nav							{ margin-top:7px; transition:all .7s ease; }
nav span,nav a				{ color:black; cursor:pointer; font-size:12px; letter-spacing:1px; padding:10px 16px; }
nav span:hover,nav a:hover	{ color:gray; text-decoration:none; }

/* sections */

.text p,.text ul			{ width:80%; max-width:600px; margin-left:auto; margin-right:auto; }

.about						{ margin-bottom:100px; }
.about,.about > div			{ height:calc( 100vh - 100px ); }
.about .pic					{ background:center center / cover no-repeat url(img/toucan-1v.jpg); height:100%; }
.about .text				{ display:grid; height:100%; place-items:center; }

.services					{ margin-bottom:150px; scroll-margin:100px; }
.services h2				{ margin-top:50px; }
.services span:hover		{ cursor:pointer; }

.sv							{ margin-bottom:150px; scroll-margin:100px; }
.sv img						{ border-radius:10px 0 0 10px; }
.sv p, .sv ol, .sv ul		{ text-align:left; }
.sv h2						{ margin:50px auto 30px auto; }

.info						{ background:center center / cover no-repeat url(img/tucan-desk.jpg); color:white; height:calc( 100vh - 100px ); position:relative; }
.info div					{ color:white; display:block; width:200px; position:absolute; left:50px; bottom:45px; }
.info img					{ margin:0 0 15px -12px; }
.info a						{ color:white; }


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

	.about .pic				{ height:80vw; }

}

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

	nav						{ text-align:right; }
	nav.topped				{ transform:translateY(-100px); transition:all .7s ease; }
	nav.topped span			{ color:white; }
	nav.topped .top			{ opacity:0; }
	section					{ scroll-margin:100px; }
	h2						{ font-size:48px; }
	.services img			{ border-radius:10px; }
	.cs .text				{ height:100%; }
	.sv .text				{ background-color:#345B94; color:white; border-radius:0 10px 10px 0; }
	.vr .text				{ background-color:#89BEDD; color:navy; }
	.sv .text div			{ height:100%; }
	.wrap					{ background:#405F33; color:white; display:grid; place-items:center; }
	.wrap span				{ width:80%; max-width:550px; }
	.wrap1					{ display:grid; height:100%; place-items:center end; }
	.wrap1 span				{ width:360px; }
	.wrap2					{ display:grid; height:100%; place-items:center; }

}

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

	h2						{ font-size:36px; width:80%; margin-left:auto; margin-right:auto; }
	h2 br					{ display:none; }
	nav						{ text-align:right; }
	nav span,nav a			{ padding:10px 4px !important; }

	.splash					{ height:calc( 100vh - 180px ) !important; }

	section					{ scroll-margin:100px; }
	section.about			{ margin-bottom:50px; }
	section.about,.about > div { height:auto; }
	section.about .text		{ margin-top:50px; }
	section.about:after		{ background:#ccc; content:''; display:block; margin-top:50px; width:150px; height:1px; margin:30px auto 0 auto; }

	.services				{ margin:50px 0; }
	.services img			{ display:inline-block; width:80%; height:80%; object-fit:cover; border-radius:7px; }
	.services h2			{ margin:50px auto 40px auto; }
	.services .uk-grid > div{ height:60vw; }

	.sv						{ margin:0; padding:25px 0 50px 0; }
	.sv img					{ border-radius:10px; width:60%; }
	.pm						{ background-color:#345B94; color:white; }
	.pm h2					{ color:white }
	.pm span				{ display:inline-block; max-width:320px !important; }
	.pm .wrap2				{ margin-top:0; }
	.vr						{ background-color:#94BDDA; color:navy; padding-bottom:40px; }
	.vr h2					{ color:navy; }
	.wrap p					{ width:85%; margin-left:auto; margin-right:auto; }

	.info					{ background-image:url(img/tucan-movil.jpg); }
	.info div				{ position:relative; bottom:none; top:45px; }
	.info img				{ display:none; }

}



@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap');