/*
Theme Name: Blanka
Theme URI: https://cabomarketing.com/
Author: Cabo Marketing
Author URI: http://cabomarketing.com/
Description: 2020 version
Version: 2020.1
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

html						{ scroll-behavior:smooth; }
a,a:hover,a *,a:hover *,
a img,a:hover img			{ transition:all 0.5s ease; text-decoration:none; }
body						{ font:15px/1.4 sans-serif; }
h1,h2,h3					{ font-family:"Instrument Serif", serif; font-weight:400; font-style:normal; text-align:center; text-transform:uppercase; }
h1							{ font-size:36px; margin-bottom:20px; }
h2							{ font-size:48px; margin-bottom:20px; @media(max-width:767px) { font-size:32px; } }
h3							{ font-size:20px; margin-bottom:20px; }
h4							{ font-size:18px; margin-bottom:20px; }
p							{ margin-bottom:20px; }
strong, b					{ font-weight:bold; }
ol							{ list-style:decimal; margin:0 0 20px 18px; }
ul							{ list-style:disc; margin:0 0 20px 17px; }
header						{ padding:30px 0;
	& nav					{ margin-top:12px; transition:all .7s ease; }
	& nav.topped			{ transform:translateY(-100px); transition:all .7s ease; }
	& nav.topped span		{ color:white; }
	& nav.topped .top		{ opacity:0; }
	& 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; }
	& nav a,& nav a:hover,
	& nav span,
	& nav span:hover		{ transition:all 0.3s ease; }
	@media (min-width:768px){ background:white; border-bottom:#e8e8e8 1px solid;
		& nav				{ text-align:right; } }
	@media (max-width:767px){ border-bottom:none;
		& nav				{ text-align:right; }
		& nav span,& nav a	{ padding:10px 4px !important; } }
}
footer						{ background:center center / cover no-repeat url(/_new/img/tucan-desk.jpg); color:white; height:calc( 100vh - 100px ); position:relative;
							  color:white; font-size:12px; text-transform:uppercase;
	& a						{ color:white; }
	& a:hover				{ color:white; opacity:.7; }
	& div					{ color:white; display:block; width:200px; position:absolute; left:50px; bottom:45px; }
	& img					{ margin:0 0 45px 0; }
	& a						{ color:white; }
}
.about						{ margin-bottom:100px; height:calc( 100vh - 100px );
	& > div					{ height:calc( 100vh - 100px ); }
	& .pic					{ background:center center / cover no-repeat url(/_new/img/toucan-1v.jpg); height:100%; }
	& .text					{ display:grid; height:100%; place-items:center; }
	@media (max-width:959px){ & .pic { height:80vw; }
	@media (max-width:767px){ height:auto; margin-bottom:50px;
		& > div				{ height:auto; }
		& .text				{ margin-top:50px; }
		/* &:after				{ background:#ccc; content:''; display:block; margin-top:50px; width:150px; height:1px; margin:30px auto 0 auto; } */ }
}
.text p,.text ul			{ width:80%; max-width:600px; margin-left:auto; margin-right:auto; }
.wep						{ background:gray; color:white; display:grid; place-items:center; height:100vh; }
#logo						{ background:url(tuki.svg) no-repeat; cursor:pointer; display:inline-block; width:120px; height:30px; text-indent:-9999px; transition:all .3s ease; }
#logo:hover					{ transform:scale(1.05); transition:all .3s ease; }
 h1:has(#logo)				{ margin-top:25px; }
#menu						{ margin:0; text-align:right; transform:translateY(10px); }
#menu li					{ display:inline-block; text-align:left; vertical-align:top !important; position:relative; list-style:none; }
#menu a						{ color:gray; display:inline-block; padding:20px 10px; }
#menu a:hover				{ color:#99f; }
#menu li:hover .sub-menu	{ display:block; visibility:visible; opacity:1; transition:all 0.3s ease; }
.sub-menu					{ background:#eee; position:absolute; top:100%; left:0; z-index:999; visibility:hidden; opacity:0; transition:all 0.3s ease; }
.sub-menu li				{ display:block; }
.sub-menu li a				{ padding:15px 15px 15px 20px !important; color:#333; text-decoration:none; width:180px; }
.sub-menu li:hover			{ background-color:#f6f6f6; }
.sub-menu li:first-child	{ border-top:none; }

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

	#header					{ margin:20px 0; }
	#logo					{ margin:5px 0px 5px 10px; width:100px; height:50px; }
	#menu					{ background:#ccc; opacity:.95; padding:20px 0; position:absolute; top:120px; left:19px; transform:none; width:calc(100% - 40px); display:none; z-index:1000; }
	#menu.show				{ display:block; }
	.admin-bar #menu		{ top:146px; }
	#menu li				{ display:block; list-style:none; text-align:center; }
	#menu li + li			{ margin:0; }
	#menu a					{ color:white; font-size:14px; line-height:36px; padding:10px 20px; text-transform:uppercase; }
	#menu a:hover			{ color:black; }
	.menu					{ margin:0; }
	.menu-toggle			{ display:inline-block; cursor:pointer; position:absolute; right:30px; top:30px; }
	.admin-bar .menu-toggle	{ margin:0; top:79px; }
	.bar1, .bar2, .bar3		{ background-color:#999; border-radius:2px; margin:7px 0; transition:0.3s; width:28px; height:2px; }
	.change .bar1			{ transform:rotate(45deg) translate(5px, 8px); }
	.change .bar2			{ opacity:0; }
	.change .bar3			{ transform:rotate(-45deg) translate(5px, -8px); }

}