@charset "UTF-8";

:root{
--svg-icon-linkedin: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 178" xml:space="preserve"><path d="M166.68-.28H13.29C5.94-.28-.01 5.43-.01 12.47v152.5c0 7.04 5.96 12.75 13.3 12.75h153.39c7.35 0 13.3-5.71 13.3-12.75V12.47c.01-7.04-5.95-12.75-13.3-12.75zm-139.32 149V68.34h27.19v80.38H27.36zm13.6-91.35h-.18c-9.13 0-15.02-6.17-15.02-13.89 0-7.89 6.08-13.89 15.38-13.89s15.02 6 15.2 13.89c0 7.72-5.9 13.89-15.38 13.89zm111.63 91.35H125.4v-42.99c0-10.81-3.94-18.18-13.77-18.18-7.51 0-11.99 4.97-13.95 9.77-.72 1.71-.9 4.12-.9 6.52v44.88H69.6c0-.05.36-72.84 0-80.37h27.18v11.38c3.61-5.48 10.07-13.27 24.5-13.27 17.89 0 31.3 11.49 31.3 36.18v46.08z"/></svg>');
--svg-icon-email: url('data:image/svg+xml,<svg version="1.1" id="svgIconEmail" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 160 175" xml:space="preserve"><g id="XMLID_496_"><path id="XMLID_506_" class="svgIconEmail" d="m15.23 62.66-5.4 5.57-6.57 6.78 11.97 8.67z"/><path id="XMLID_503_" class="svgIconEmail" d="m71.55 124.46 8.47 6.14 8.41-6.09 5.62-4.08 43.56-31.57v-38.8c0-3.24-2.69-5.87-6.01-5.87H28c-3.31 0-6.01 2.63-6.01 5.87v38.51l43.93 31.81 5.63 4.08zM59.04 97.63c-4.2-4.65-6.31-10.16-6.31-16.54 0-7.13 2.62-13.18 7.87-18.13 5.52-5.24 12.58-7.86 21.18-7.86 7.01 0 12.81 1.79 17.41 5.38 4.85 3.78 7.27 8.81 7.27 15.07 0 4.94-1.53 9.17-4.6 12.7-3.07 3.53-6.57 5.3-10.51 5.3-2.05 0-3.62-.57-4.72-1.7-1.1-1.13-1.65-2.29-1.65-3.49 0-.15.01-.32.02-.51.01-.18.03-.39.05-.6-.85 1.57-1.79 2.82-2.84 3.75-1.89 1.67-4.16 2.51-6.81 2.51-2.69 0-4.93-.95-6.72-2.84s-2.69-4.53-2.69-7.93c0-3.93 1.37-7.62 4.1-11.06 2.74-3.44 6.09-5.15 10.07-5.15 2.34 0 4.15.63 5.44 1.89.98.98 1.63 2.1 1.97 3.36l1.2-4.11h6.31l-4.27 14.15c-.33 1.15-.57 2.01-.72 2.56-.14.55-.22 1.04-.22 1.45 0 .65.22 1.27.67 1.84.44.58 1.16.86 2.14.86 1.91 0 3.83-1.22 5.75-3.67s2.89-5.69 2.89-9.74c0-5.98-2.62-10.27-7.87-12.88-3.29-1.65-6.99-2.48-11.11-2.48-7.56 0-13.63 2.26-18.21 6.78-4.14 4.09-6.21 8.99-6.21 14.71 0 6.35 2.42 11.38 7.27 15.1 4.29 3.28 9.53 4.92 15.71 4.92 4.23 0 8.17-.76 11.84-2.28 2-.8 4.07-1.95 6.21-3.42l.8-.55 2.44 3.65a36.236 36.236 0 0 1-10.26 5.46c-3.68 1.25-7.5 1.88-11.46 1.88-9.21.04-16.36-2.77-21.43-8.38z"/><path id="XMLID_502_" class="svgIconEmail" d="m150.08 68.23-5.71-5.84v21.57l12.34-8.95z"/><path id="XMLID_501_" class="svgIconEmail" d="M86.03 2.69c-3.51-3.4-9.18-3.4-12.69 0l-33.82 34.9h80.6L86.03 2.69z"/><path id="XMLID_500_" class="svgIconEmail" d="M81.76 71.02c-2.31 0-4.3 1.41-5.97 4.22-1.67 2.82-2.5 5.54-2.5 8.17 0 1.59.37 2.87 1.12 3.85.74.98 1.8 1.47 3.15 1.47 2.38 0 4.33-1.77 5.85-5.3 1.52-3.53 2.29-6.31 2.29-8.33 0-1.15-.36-2.12-1.07-2.9-.72-.79-1.67-1.18-2.87-1.18z"/><path id="XMLID_499_" class="svgIconEmail" d="m137.61 97.08-38.06 27.59 60.16 46.37c.18-.56.28-1.15.28-1.77V80.86l-15.62 11.32-6.76 4.9z"/><path id="XMLID_498_" class="svgIconEmail" d="m80.02 138.82-13.99-10.13-60.59 46.42c.18.02.37.03.55.03h147.99c.04 0 .08-.01.13-.01l-60.19-46.39-13.9 10.08z"/><path id="XMLID_497_" class="svgIconEmail" d="m21.99 96.79-6.76-4.89L-.01 80.86v88.41c0 .51.07 1 .2 1.48l60.21-46.13-38.41-27.83z"/></g></svg>');
--svg-icon-resume: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 182" style="enable-background:new 0 0 149 182" xml:space="preserve"><path d="M52.87 29.37c-2.27 0-3.27 2.09-3.44 3.65h6.56c.02-1.43-.59-3.65-3.12-3.65zM111.09 29.37c-2.27 0-3.27 2.09-3.44 3.65h6.56c.02-1.43-.59-3.65-3.12-3.65zM42.77 27.99c0-2.22-1.61-3.19-3.95-3.21-1.07 0-1.84.1-2.19.2v6.28h2.27c2.36 0 3.87-1.3 3.87-3.27z"/><path d="M16.22 11.12v159.19H133.1V11.12H16.22zm103.64 42.07v22.4c0 3.78-1.91 5.69-5.74 5.69H91.84c-3.82 0-5.76-1.89-5.76-5.69v-22.4c0-3.8 1.94-5.69 5.76-5.69h22.27c3.84.01 5.75 1.91 5.75 5.69zm-8.59-25.42c4.03 0 5.1 3.55 5.1 5.82 0 .46-.05.82-.08 1.05h-8.67c.05 3.04 1.99 4.29 4.24 4.29 1.61 0 2.58-.28 3.42-.64l.38 1.61c-.79.36-2.14.77-4.11.77-3.8 0-6.07-2.5-6.07-6.22 0-3.75 2.2-6.68 5.79-6.68zm-24.31.28.1 1.99h.08c.69-1.17 1.84-2.27 3.88-2.27 1.68 0 2.96 1.02 3.5 2.47h.05c.38-.69.87-1.22 1.38-1.61.74-.56 1.56-.87 2.73-.87 1.63 0 4.06 1.07 4.06 5.36v7.27h-2.19V33.4c0-2.37-.87-3.8-2.68-3.8-1.28 0-2.27.94-2.65 2.04-.1.31-.18.71-.18 1.12v7.63h-2.19V33c0-1.96-.87-3.39-2.58-3.39-1.4 0-2.42 1.12-2.78 2.25-.13.33-.18.71-.18 1.1v7.45H85.1V31.4c0-1.28-.03-2.32-.1-3.34h1.96zm-33.91-.28c4.03 0 5.1 3.55 5.1 5.82 0 .46-.05.82-.08 1.05H49.4c.05 3.04 1.99 4.29 4.24 4.29 1.61 0 2.58-.28 3.42-.64l.38 1.61c-.79.36-2.14.77-4.11.77-3.8 0-6.07-2.5-6.07-6.22 0-3.75 2.19-6.68 5.79-6.68zM34.4 23.43c1.12-.23 2.73-.36 4.26-.36 2.37 0 3.9.43 4.98 1.4.87.77 1.35 1.94 1.35 3.27 0 2.27-1.43 3.78-3.24 4.39v.08c1.33.46 2.12 1.68 2.53 3.47.56 2.4.97 4.06 1.33 4.72h-2.3c-.28-.48-.66-1.96-1.15-4.11-.51-2.37-1.43-3.27-3.44-3.34h-2.09v7.45H34.4V23.43zm-8.98 37.7h37.29v2.17H25.42v-2.17zm0 6.21h33.95v2.17H25.42v-2.17zm3.47 89.23c-.79 0-1.49-.25-1.84-.48l.26-.74c.27.17.9.45 1.56.45 1.23 0 1.61-.78 1.6-1.37-.01-.99-.9-1.41-1.82-1.41h-.53v-.72h.53c.7 0 1.58-.36 1.58-1.19 0-.56-.36-1.06-1.24-1.06-.56 0-1.11.25-1.41.47l-.25-.69c.37-.27 1.09-.54 1.85-.54 1.39 0 2.02.83 2.02 1.68 0 .73-.43 1.35-1.3 1.66v.02c.87.17 1.57.83 1.57 1.81-.01 1.12-.89 2.11-2.58 2.11zm2.7-9.89h-4.51v-.59l.75-.73c1.8-1.72 2.62-2.63 2.63-3.69 0-.72-.35-1.38-1.4-1.38-.64 0-1.17.33-1.5.6l-.3-.67a3.11 3.11 0 0 1 2-.72c1.52 0 2.16 1.04 2.16 2.05 0 1.3-.94 2.36-2.43 3.79l-.56.52v.02h3.17v.8zm-2.45-15.94-1.23.66-.18-.73 1.54-.83h.81v7.06h-.92v-6.17h-.02zm35.24 23.69H42.39v-2.17h21.99v2.17zm0-9.2H42.39v-2.17h21.99v2.17zm0-9.75H42.39v-2.17h21.99v2.17zm3.59-9.2H25.42v-2.17h42.55v2.17zM35.22 106.6v2.17h-7.89v-2.17h7.89zm-7.89-5.6v-2.17h7.89V101h-7.89zm7.89 13.36v2.17h-7.89v-2.17h7.89zm29.16-7.76v2.17H42.39v-2.17h21.99zM42.39 101v-2.17h21.99V101H42.39zm21.99 13.36v2.17H42.39v-2.17h21.99zm3.59-23.1H25.42v-2.17h42.55v2.17zm0-34.48H25.42v-2.17h42.55v2.17zm-4.43-16.13c-1.35 0-2.6-.33-3.47-.84l.56-1.71c.66.43 1.84.89 2.96.89 1.63 0 2.4-.82 2.4-1.84 0-1.07-.64-1.66-2.3-2.27-2.22-.79-3.27-2.02-3.27-3.5 0-1.99 1.61-3.62 4.26-3.62 1.25 0 2.35.36 3.04.77l-.56 1.63c-.48-.31-1.38-.71-2.53-.71-1.33 0-2.07.77-2.07 1.68 0 1.02.74 1.48 2.35 2.09 2.14.82 3.24 1.89 3.24 3.72 0 2.18-1.68 3.71-4.61 3.71zm12.75 115.92h-2.17V88.44h2.17v68.13zm3.19-116.18-.13-2.02h-.05c-.59 1-1.89 2.3-4.08 2.3-1.94 0-4.26-1.07-4.26-5.41v-7.22h2.25v6.84c0 2.35.71 3.93 2.76 3.93 1.51 0 2.55-1.05 2.96-2.04.13-.33.2-.74.2-1.15v-7.58h2.25v8.98c0 1.28.03 2.4.1 3.37h-2zm15.34 110.94h-10.3v-2.17h10.29v2.17zm0-7.71h-10.3v-2.17h10.29v2.17zm0-7.71h-10.3v-2.17h10.29v2.17zm26.55 15.42H99.23v-2.17h22.14v2.17zm-2.15-9.89v2.17H99.23v-2.17h19.99zm-19.99-5.53v-2.17h19.54v2.17H99.23zm25.42-9.63H82.1v-2.17h42.55v2.17zm-21.28-14.14v-2.17h18.41v2.17h-18.41zm18.41 5.27v2.17h-15.84v-2.17h15.84zm-15.84-12.68v-2.17h15.84v2.17h-15.84zm10.74-6.74H90.06v-2.17h26.62v2.17zm-13.3 4.57v2.17H86.26v-2.17h17.12zm-2.98 7.4v2.17H86.26v-2.17h14.14zm2.98 7.45v2.17H86.26v-2.17h17.12zm21.27-26.15H82.1v-2.17h42.55v2.17z"/><path d="M114.06 50.46H91.9c-1.83 0-2.86.97-2.86 2.88v22.11c0 .97.28 1.69.77 2.18 1.98-3.98 6.66-7.12 13.17-7.12 6.68 0 11.21 3.12 13.17 7.1.5-.48.75-1.21.75-2.16V53.34c0-1.91-1.03-2.88-2.84-2.88zm-11.08 16.99c-3.5-.06-6.24-2.95-6.27-6.88-.02-3.69 2.77-6.73 6.27-6.73 3.5 0 6.27 3.05 6.27 6.73 0 3.92-2.77 6.91-6.27 6.88zM135.27 15.04v77.85l7.87-77.05zM14.05 86.73l-8.11 79.49 8.11.83zM67.31 172.48l59.22 6.05.62-6.05zM75.63 8.95 22.55 3.53l-.56 5.42z"/></svg>');
--svg-icon-resumeb: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 178" style="enable-background:new 0 0 141 178" xml:space="preserve"><path d="M84.98 64.58v22.11c0 .97.28 1.69.77 2.18 1.98-3.98 6.66-7.12 13.17-7.12 6.68 0 11.21 3.12 13.17 7.1.5-.48.75-1.21.75-2.16V64.58c0-1.91-1.03-2.88-2.84-2.88H87.85c-1.84 0-2.87.97-2.87 2.88zm13.95.49c3.5 0 6.27 3.05 6.27 6.73 0 3.93-2.77 6.92-6.27 6.88-3.5-.06-6.24-2.95-6.27-6.88-.03-3.68 2.76-6.73 6.27-6.73z"/><path d="M12.17 9.12v159.19h116.88V9.12H12.17zM115.8 64.43v22.4c0 3.78-1.91 5.69-5.74 5.69H87.79c-3.82 0-5.76-1.89-5.76-5.69v-22.4c0-3.8 1.94-5.69 5.76-5.69h22.27c3.84 0 5.74 1.91 5.74 5.69zm-34.48-49.8 8.29 26.16h.1l8.39-26.16h8.44L94.2 51.84h-9.22L72.93 14.63h8.39zM37.91 25.65c.83-2.38 2.03-4.46 3.6-6.23 1.56-1.77 3.48-3.16 5.76-4.17 2.28-1.01 4.84-1.51 7.69-1.51 2.05 0 3.99.3 5.81.89 1.82.59 3.46 1.45 4.9 2.58 1.44 1.13 2.63 2.53 3.57 4.2.94 1.67 1.53 3.58 1.77 5.73h-7.92c-.14-.94-.45-1.8-.94-2.58a8.297 8.297 0 0 0-1.82-2.06 8.46 8.46 0 0 0-2.48-1.38c-.92-.33-1.88-.5-2.89-.5-1.84 0-3.41.36-4.69 1.07a8.812 8.812 0 0 0-3.13 2.87c-.8 1.2-1.38 2.56-1.75 4.09a20.63 20.63 0 0 0-.55 4.74c0 1.56.18 3.08.55 4.56.36 1.48.95 2.81 1.75 3.99.8 1.18 1.84 2.13 3.13 2.84 1.28.71 2.85 1.07 4.69 1.07 2.5 0 4.46-.76 5.86-2.29 1.41-1.53 2.27-3.54 2.58-6.05h7.92c-.21 2.33-.75 4.43-1.62 6.31-.87 1.88-2.02 3.47-3.44 4.79-1.42 1.32-3.09 2.33-5 3.02-1.91.69-4.01 1.04-6.31 1.04-2.85 0-5.41-.5-7.69-1.49-2.28-.99-4.2-2.35-5.76-4.09-1.56-1.74-2.76-3.78-3.6-6.12-.83-2.35-1.25-4.87-1.25-7.58.01-2.78.43-5.36 1.26-7.74zm34.33 33.74v68.13h-2.17V59.39h2.17zm-50.87.64h42.55v2.17H21.37v-2.17zm16.97 19.68v-2.17h21.99v2.17H38.34zm21.99 5.59v2.17H38.34V85.3h21.99zM38.34 71.95v-2.17h21.99v2.17H38.34zm-15.06 7.76v-2.17h7.89v2.17h-7.89zm7.89 5.59v2.17h-7.89V85.3h7.89zm-7.89-13.35v-2.17h7.89v2.17h-7.89zm-1.91 23.1h42.55v2.17H21.37v-2.17zm16.97 21.12V114h21.99v2.17H38.34zm21.99 7.03v2.17H38.34v-2.17h21.99zm-21.99-16.77v-2.17h21.99v2.17H38.34zm-13.26-4.75-1.23.66-.18-.73 1.54-.83h.81v7.06h-.92v-6.17h-.02zm-.25 25.83c-.79 0-1.49-.25-1.84-.48l.26-.74c.27.17.9.45 1.56.45 1.23 0 1.61-.78 1.6-1.37-.01-.99-.9-1.41-1.82-1.41h-.53v-.72h.53c.7 0 1.57-.36 1.57-1.19 0-.56-.36-1.06-1.24-1.06-.56 0-1.11.25-1.41.47l-.25-.69c.37-.27 1.09-.54 1.85-.54 1.39 0 2.02.83 2.02 1.68 0 .73-.43 1.35-1.3 1.66v.02c.87.17 1.57.83 1.57 1.81.01 1.12-.87 2.11-2.57 2.11zm2.71-9.89h-4.51v-.59l.75-.73c1.8-1.72 2.62-2.63 2.63-3.69 0-.72-.35-1.38-1.4-1.38-.64 0-1.17.33-1.5.6l-.3-.67a3.11 3.11 0 0 1 2-.72c1.52 0 2.16 1.04 2.16 2.05 0 1.3-.94 2.36-2.43 3.79l-.56.52v.02h3.17v.8zm43.62 49.47L33.5 147.92h21.41v-13.01H87.4v13.01h21.41l-37.65 19.17zm19.61-54.7v2.17h-10.3v-2.17h10.3zm-10.3-5.54v-2.17h10.29v2.17H80.47zm10.3 13.25v2.17h-10.3v-2.17h10.3zm26.55 2.17H95.18v-2.17h22.14v2.17zm-2.15-9.88v2.17H95.18v-2.17h19.99zm-19.99-5.54v-2.17h19.54v2.17H95.18zm25.42-9.63H78.05v-2.17h42.55v2.17zM71.58 6.95 18.5 1.53l-.56 5.42zM131.22 13.04V90.9l7.87-77.06zM63.26 170.48l59.22 6.05.62-6.05zM10 84.72l-8.11 79.5 8.11.83z"/></svg>');


}
/*navigation css*/

/* From https://css.glass 
.navBackgroundGlass{
	background: rgba(63, 125, 163, 0.33);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(8.8px);
	-webkit-backdrop-filter: blur(8.8px);
	border: 1px solid rgba(63, 125, 163, 0.17);
}*/


.navIcon{
	background: rgba(var(--primary-text-color-dark), 1);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.dark-mode .navIcon{
	background:rgba(var(--primary-text-color-light),1)
}

div#navbar.navStyleClearWhite a .navIcon {
	background:white;
}

.dark-mode div#navbar.navStyleClearWhite a .navIcon{
	background:rgba(var(--primary-text-color-light),1)
}

.navIconLinkedin{
	-webkit-mask-image: var(--svg-icon-linkedin);
	mask-image: var(--svg-icon-linkedin);
}

.navIconEmail{
	-webkit-mask-image: var(--svg-icon-email);
	mask-image: var(--svg-icon-email);
}
.navIconResume{
	-webkit-mask-image: var(--svg-icon-resumeb);
	mask-image: var(--svg-icon-resumeb);
}

.navIconLinkedin:hover,
.navIconEmail:hover,
.navIconResume:hover {
	background: rgba(var(--secondary-text-color-light),1) !important;
}

.dark-mode .navIconLinkedin:hover,
.dark-mode .navIconEmail:hover,
.dark-mode .navIconResume:hover {
	background: rgba(var(--secondary-text-color-dark),1) !important;
}

.navbar {
	text-align: center; 
	position:fixed;
	display:block;
	top:0px;
	height:80px;
	width:100%;
	border-bottom:1px solid rgba(var(--secondary-text-color-light),.6);
/*	-webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);*/
	z-index:1000;

/* From https://css.glass */
/*	background: rgba(63, 125, 163, 0.33);*/
	background: rgba(var(--nav-bg-light),0.9);
	
/*	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
	backdrop-filter: blur(8.8px);
	-webkit-backdrop-filter: blur(8.8px);


	-webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.dark-mode .navbar {
	background: rgba(var(--nav-bg-dark),0.9);
	border-bottom:1px solid rgba(var(--secondary-text-color-dark),.6);
}





  .navbar-collapse{
	max-width: 1200px;
    /*max-width:95%;*/
	margin: 0 auto;	
    position:relative;
	display:block;
	height:100%;
}

.navbarOverfill{
	overflow:hidden;
	height:100%;
	width:100%;
	display:block;
	position:relative;
}

/***************
Navigation Image 
***************/
#navImageBoarder{
	height: 60px;
    width: 60px;
    display: block;
    float: left;
    margin: 10px 0px 0px 10px;
}

  
.navImageFilla {
	fill:rgba(var(--primary-text-color-dark),1);
}

.navImageFillb {
	fill:rgba(var(--secondary-text-color-light),1);
}
					
#navImage:hover .navImageFilla{
	fill:rgba(var(--secondary-text-color-light),1);
}

#navImage:hover .navImageFillb{
	fill:rgba(var(--primary-text-color-dark),1);
}		


.dark-mode .navImageFilla {
	fill:rgba(var(--primary-text-color-light),1) !important;
}

.dark-mode .navImageFillb {
	fill:rgba(var(--secondary-text-color-dark),1) !important;
}

.dark-mode #navImage:hover .navImageFilla{
	fill:rgba(var(--secondary-text-color-dark),1) !important;
}

.dark-mode #navImage:hover .navImageFillb{
	fill:rgba(var(--primary-text-color-light),1) !important;
}		

/*******************
END Navigation Image 
*******************/

/***********************************
Navigation Text (Name / Description) 
***********************************/
.navTextContainer{
	float:left;
	margin:10px 0px 0px 10px;
	display:block;
	height:60px;
	max-width:430px;
}

.navTextName{
	display: block;
    fill: rgba(var(--primary-text-color-dark),1);
    font-size: 40px;
	line-height:40px;
    font-weight: bold;
   /* font-family: sans-serif;
    font-family: 'Montserrat';*/
	text-align: left; 
    text-justify: distribute;
    width: 100%;
	letter-spacing: 5px;
	/* text-shadow: 1px 1px 1px rgba(var(--secondary-text-color-light),1) !important;*/
	/* text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4) !important;*/
}

.dark-mode .navTextName{
	color: rgba(var(--primary-text-color-light),1);
	/* text-shadow: 1px 1px 1px rgba(var(--secondary-text-color-dark),1) !important; */
	/* text-shadow: 1px 1px 1px rgba(0,0, 0, 0.4) !important; */
}

.dark-mode .navTextName:hover{
	color: rgba(var(--secondary-text-color-dark),1);
}

.navTextTitle {
	float: left;
    font-size: 13pt;
    color: rgba(var(--secondary-text-color-light),1);
   /* font-family: sans-serif;
    font-family: 'Montserrat';*/
	text-align: left; 
    text-justify: distribute;
	text-indent: 1px;
}

.dark-mode .navTextTitle{
	color: rgba(var(--secondary-text-color-dark),1) !important;
}

/***************************************
END Navigation Text (Name / Description) 
***************************************/


/**********************
Navigation Icons / Text 
**********************/
	.navTipTextVerticalContainer{
		float:right;
	    margin: 20px 10px;
		display:block;
		height:80px;
		width:200px;	
		text-align: left; 
	  /*  font-family: sans-serif;
	    font-family: 'Montserrat';*/
	    position:relative;
	/*    border:1px solid #fff;*/
	}
	
		/**********************
		DARK-MODE Button 
		**********************/
		
		.toggleLiContainer{
			background-color: rgba(var(--nav-bg-dark), 1) !important;
		}

		.dark-mode .toggleLiContainer{
			background-color: rgba(var(--nav-bg-light), 1) !important;
		}

		.darkmodeToggleContainer {
		    /*margin-left: auto;
		    margin-right: auto;*/
		    display: block;
		    width: 50px;
			float:right;

		}

		.darkmodeBurgerToggleContainer {
		    margin-left: auto;
		    margin-right: auto;
		    display: block;
		    width: 50px;
		}
		
		.darkmodeToggleContainerDropdown {
		padding-bottom:12px;
		}
	
		.darkmode-toggle{
			width:0;
			height:0;
			visibility:hidden;
		}
	
		.darkmode-toggle-label{
			width:50px;
			height:20px;
			position: relative;
			display:block;
			border-radius: 20px;
			box-shadow: inset 0px 1px 5px rgba(0,0,0,0.4), inset 0px -1px 5px rgba(255,255,255,0.4);
			cursor: pointer;	
			margin:0px;	
			background: rgba(var(--primary-text-color-light),1);
		}
		
		.darkmode-toggle-label:after{
			content: "";
			width: 18px;
			height: 18px;
			position: absolute;
			top:1px;
			left:1px;
			background: linear-gradient(180deg, rgba(var(--primary-text-color-light),1),rgba(var(--primary-text-color-dark),1));
			border-radius: 18px;
			box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
		}
		
		.darkmode-toggle:checked + .darkmode-toggle-label{
			background:rgba(var(--primary-text-color-dark),1);			
		}
		
		.darkmode-toggle:checked + .darkmode-toggle-label:after{
			left:49px;
			transform: translateX(-100%);
			background: linear-gradient(180deg, rgba(var(--primary-text-color-light),1),rgba(var(--primary-text-color-dark),1));
		}
		
		.darkmode-toggle-label, .darkmode-toggle-label:after{
			transition:0.3s;
		}
		
		.darkmode-toggle-label:active:after{
			width:24px;
		}
		
		.darkmode-toggle-label svg{
			position: absolute;
			width:12px;
			top:4px;
			z-index:100;	
		}
		
		.darkmode-toggle-label svg.sun{
			left:4px;
			fill:#fff;
			transition: 0.3s;
		}
		
		.darkmode-toggle-label svg.moon {
			left: 34px;

			fill:rgba(var(--secondary-text-color-light),1);
			transition: 0.3s;
		}
		
		.darkmode-toggle:checked + .darkmode-toggle-label svg.sun{
			/*fill: #7e7e7e;*/
			fill:rgba(var(--secondary-text-color-dark),1);
			
		}
		
		.darkmode-toggle:checked + .darkmode-toggle-label svg.moon{
			fill:#fff;
		}
	
		/**********************
		END DARK-MODE Button 
		**********************/
	
	#navIconContainer{
		position: relative;
		height: 50px;
		width: 120px;
		/* bottom: 0px; */
		/*margin-right: auto;
		margin-left: auto;*/
		float:left;
	}
	
	#navIconBurgerContainer{
		position:relative;
		height:50px;
		width:120px;
		bottom:0px;
		margin-right: auto;
		margin-left: auto;
	}


	#navTipResume, #navTipEmail, #navTipLinked{
		margin: 10px 5px;
		float: left;	
		position: relative;
		width:30px;
	}

	#svgIconResume, #svgIconEmail, #svgIconLinkedin{
		height:30px;
		margin:0px;
		cursor:pointer;
	}
	
	#svgIconResume .svgIconResume, #svgIconLinkedin .svgIconLinkedin, #svgIconEmail .svgIconEmail {
		fill:rgba(var(--primary-text-color-dark),1);			
	}
	
	#svgIconResume:hover .svgIconResume, #svgIconLinkedin:hover .svgIconLinkedin, #svgIconEmail:hover .svgIconEmail {
		fill:rgba(var(--secondary-text-color-light),1) !important;		
	}
	
	.dark-mode .svgIconResume, .dark-mode .svgIconLinkedin, .dark-mode .svgIconEmail{
		fill:rgba(var(--primary-text-color-light),1) !important;
	}
	
	.dark-mode #svgIconResume:hover .svgIconResume, .dark-mode #svgIconLinkedin:hover .svgIconLinkedin, .dark-mode #svgIconEmail:hover .svgIconEmail {
		fill:rgba(var(--secondary-text-color-dark),1) !important;		
	}

/**************************
END Navigation Icons / Text 
**************************/


/**************************
START QR CODE
**************************/

#navQrCode{
/*	background-image: url("../../framework/images/navigation/860x860_qrcode.png");
*/	float:right;
	margin: 10px 10px 0px 0px;
	height: 60px;
	width: 60px;
	background-repeat: no-repeat;
	display: block;
	
}

.svgQrCodeFilla {
	fill:rgba(var(--secondary-text-color-light),1);
}

.svgQrCodeFillb{
	fill:rgba(var(--primary-text-color-dark),1);
}


.dark-mode .svgQrCodeFilla {
	fill:rgba(var(--secondary-text-color-dark),1);
}
.dark-mode .svgQrCodeFillb{
	fill:rgba(var(--primary-text-color-light),1);
}

.svgQrCodeFillc{font-family:'HelveticaNeue-Bold';}

.svgQrCodeFilld{font-size:33.2356px;}

/**************************
END QR CODE
**************************/

/**************************
START Url List
**************************/

.navUrlList{
	display:none;
	/*display:inline-block;*/
    font-size: 2em;
}

.navUrlList ul li {
	display:inline-block;
	float:left;
	color:white;
	margin: 0px 10px;
	text-shadow: 1px 1px 1px rgba(var(--secondary-text-color-light), 1) !important;
}

.dark-mode .navUrlList ul li {
	text-shadow: 1px 1px 1px rgba(var(--secondary-text-color-dark), 1) !important;
}

/**************************
End Url List
**************************/

/**************************
START Burger Menu
**************************/
#burgerMenu{
	display:none;
	position: absolute;
    height: 50px;
    top: 15px;
    right:25px;
}

#burgerMenuToggle {
  opacity: 0;
  display:none;
}

#burgerMenuToggle:checked + .burgerMenuBtn > span {
  transform: rotate(45deg);
}

#burgerMenuToggle:checked + .burgerMenuBtn > span::before {
  top: 0;
  transform: rotate(0deg);
}

#burgerMenuToggle:checked + .burgerMenuBtn > span::after {
  top: 0;
  transform: rotate(90deg);
}

#burgerMenuToggle:checked ~ .burgerMenuBox {
  /*right: 0 !important;*/
  width:300px !important;
  margin-right: 30px !important;
}

.burgerMenuBtn {
  position: relative;
  display:block;
  top: 6px;
  left: 0px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
  padding: 6px 15px;
  border-radius: 10px;
}

.burgerMenuBtn:hover {
	background-color:rgba(var(--secondary-text-color-light),1);
}

.burgerMenuBtn:hover > span,
.burgerMenuBtn:hover > span::before,
.burgerMenuBtn:hover > span::after{
	background-color:rgba(var(--primary-text-color-light),1);
}

.dark-mode .burgerMenuBtn:hover > span,
.dark-mode .burgerMenuBtn:hover > span::before,
.dark-mode .burgerMenuBtn:hover > span::after {
	background-color:rgba(var(--primary-text-color-dark),1) ;
}

.dark-mode .burgerMenuBtn:hover {
	/*background-color:#b0c2ca !important;*/
	background-color:rgba(var(--secondary-text-color-dark),1) ;
}

.burgerMenuBtn > span,
.burgerMenuBtn > span::before,
.burgerMenuBtn > span::after {
  display: block;
  position: absolute;
  top:17px;
  width: 26px;
  height: 2px;
  background-color: rgba(var(--secondary-text-color-light),1);
  transition-duration: .25s;
}

.dark-mode .burgerMenuBtn > span,
.dark-mode .burgerMenuBtn > span::before,
.dark-mode .burgerMenuBtn > span::after {
  background-color: rgba(var(--secondary-text-color-dark),1);
}

.burgerMenuBtn > span::before {
  content: '';
  top: -8px;
  background-color: rgba(var(--primary-text-color-dark),1) ;
}

.burgerMenuBtn > span::after {
  content: '';
  top: 8px;
  background-color: rgba(var(--primary-text-color-dark),1) ;
}

.dark-mode .burgerMenuBtn > span::before {
  background-color: rgba(var(--primary-text-color-light),1) ;
}

.dark-mode  .burgerMenuBtn > span::after {
  background-color: rgba(var(--primary-text-color-light),1) ;
} 

.burgerMenuBox {
	overflow: scroll !important;

	display: block;
	position: absolute;
	height:100vh;
	top: -15px; /*offset top of button*/
	right: -100%;
	margin-right:-10px;
	width: 0px;
	overflow:hidden;
	margin: 0;
	padding: 65px 0px 10px 0px;
	list-style: none;
  	background-color: rgba(var(--nav-bg-light),.95);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
	transition-duration: .25s;
}

.burgerMenuItem {
  display: block;
  padding: 12px 24px;
  color: rgba(var(--primary-text-color-dark),1);
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
  white-space:nowrap;
}

.burgerMenuItemSpacer{
	display:inline-block;
	width:100%;
	height:100px;
}

.burgerMenuItem:hover {
	background-color: rgba(var(--nav-bg-dark),1) !important;
	color:rgba(var(--secondary-text-color-light),1) !important;
/*	border-bottom: 1px solid rgba(39,43,55, 0.5);
    border-top: 1px solid rgba(39,43,55, 0.5);*/
}

.dark-mode .burgerMenuBox{
  	background-color: rgba(var(--nav-bg-dark),.95);
}

.dark-mode .burgerMenuItem{
	color:rgba(var(--primary-text-color-light),1) !important;
}

.dark-mode .burgerMenuItem:hover{
	background-color: rgba(var(--nav-bg-light),1) !important;
	color: rgba(var(--secondary-text-color-dark),1) !important;
/*	border-bottom: 1px solid rgba(176,194,202, 0.5);
    border-top: 1px solid rgba(176,194,202, 0.5);*/
	
}


.navBurgerBoxLi{
	border-bottom: 1px solid rgba(var(--primary-text-color-dark),.5);
    /*border-top: 1px solid rgba(var(--primary-text-color-dark),.5);*/
}


.dark-mode .navBurgerBoxLi{
    border-bottom: 1px solid rgba(var(--primary-text-color-light),.5);
  /*  border-top: 1px solid rgba(var(--primary-text-color-light),.5);*/
}


/*///////////////////////////////////////////////
	Nav Styles
///////////////////////////////////////////////*/

	/*// navStyleGone //*/
	div#navbar.navNone {
		opacity:0;
		z-index:-1000;
		-webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
	}


	/*// navStyleGone //*/
	div#navbar.navStyleGone {
		background: rgba(0, 0, 0, -0.9);
		border: 0px;
		backdrop-filter: none;
	}

	.dark-mode div#navbar.navStyleGone{
		background: rgba(0, 0, 0, -0.9);
		border: 0px;
		backdrop-filter: none;
	} 

	.navStyleGone #navTextTitle {
		text-shadow: 1px 1px 1px rgba(0,0,0, 0.9) !important;
	}


	/*// navStyleGoneWhite //*/
	div#navbar.navStyleGoneWhite {
		background-Color: rgba(0,0,0,0) !important;
		color: white !important;
		border: 0px !important;
		backdrop-filter: none !important;
		opacity: 0.8;	
	}

	.navStyleGoneWhite #navTextName, .navStyleGoneWhite #navTextTitle {
		text-shadow: 1px 1px 1px rgba(0,0,0, 0.9) !important;
	}

	.navStyleGoneWhite .navImageFilla { 
		fill: #fff  !important;
	}
		
	.navStyleGoneWhite .burgerMenuBtn > span::before,
	.navStyleGoneWhite .burgerMenuBtn > span::after{
		background-color:#fff !important;
	}
	
	
	/*// navStyleClear //*/
	div#navbar.navStyleClear {
		background: rgba(0,0,0,0.1);
	}

	.dark-mode div#navbar.navStyleClear{
		background: rgba(0,0,0,0.3);
	} 

	.navStyleClear #navTextTitle {
		text-shadow: 1px 1px 1px rgba(0,0,0, 0.9) !important;
	}




	/*// navStyleClearWhite //*/
	#navbar.navStyleClearWhite {
		background: rgba(0,0,0,0.1);
		color: white !important;
		border-bottom: 1px solid rgba(var(--secondary-text-color-light), .3);
	}

	#navbar.navStyleClearWhite a{
		color: white !important;
		filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
	}

	#navbar.navStyleClearWhite .navTextName:hover{
		color: rgba(var(--secondary-text-color-light),1) !important;
		filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
	}
	

	.dark-mode div#navbar.navStyleClearWhite{
		background: rgba(0,0,0,0.3);
	} 

	.dark-mode div#navbar.navStyleClearWhite .navIcon:hover{
		background: rgba(var(--secondary-text-color-dark),1) !important;
	} 

	.navStyleClearWhite #navTextTitle {
		text-shadow: 1px 1px 1px rgba(0,0,0, 0.9) !important;
	}

	.navStyleClearWhite .navImageFilla { 
		fill: #fff;
	}

	.navStyleClearWhite #navImage:hover .navImageFillb{
		fill: #fff;
	}

	.dark-mode .navStyleClearWhite .navImageFilla { 
		fill: rgba(var(--primary-text-color-light), 1);
	}
		
	.navStyleClearWhite .burgerMenuBtn > span::before,
	.navStyleClearWhite .burgerMenuBtn > span::after{
		background-color:#fff !important;
	}


	



/*///////////////////////////////////////////////
	Start Resize of NavBar
///////////////////////////////////////////////*/

  /* On screens that are 768px or less */
  @media screen and (max-width: 768px) {
	.navbar{
		height:50px;
	}

	.navTextName{
		letter-spacing:0px;
	}

	#navImageBoarder{
		height: 30px;
        width: 30px;
        margin: 10px 0px 0px 10px;
	}

	#navTextContainer{
		margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        width: 280px;
        display: block;
        position: relative;
        float: none;
	}

	#navTextTitle{
		display:none;
	}

	#burgerMenu{
		display:block;
		top:0px;
	}

	.navTipTextVerticalContainer{
		display:none;
	}

  }
  
