@import 'https://fonts.typotheque.com/WF-020307-003441.css';
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500&display=swap');

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
background:#ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

*:focus {
    outline: none;
}
*:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    background: #003366;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 6px;
    z-index: 10000;
    text-decoration: none;
    font-family: 'Fedra Sans Medium 3', Helvetica, sans-serif;
    transition: top .15s ease;
}
.skip-link:focus {
    top: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .aniview, .aniview * , [class*="animate__"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


.fast {
    -vendor-animation-duration: 1s;
    -vendor-animation-delay: 0s;
}
.slow {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 1s;
    animation-duration: 3s;
    animation-delay: 1s;    
}
.reallyslow {
    -vendor-animation-duration: 6s;
    -vendor-animation-delay: 3s;
}

.box-colored {
   // background: #0277bd;
//    border-radius: 0.125rem;
//    padding: 0.875rem;
//    margin-bottom: 0.5rem;
//    min-height: 0.875rem;
//    color: #f8f8f8;
    height:100%;
	align-items: center;
	justify-content: center;
    text-align:center;


}

.box-info {
color: #003366;
position: relative;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) 	
}

.box-info .numberCircle {
    margin: 0 auto;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    padding: 4px;
    background: #fff;
    border: 4px solid #CCCCCC;
    color: #0066CC;
    text-align: center;
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    font-size: 2.6em;
    font-weight: 600;
    margin-bottom: 2rem;
}

.box-info h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
	font-size: 2.5rem;
	font-weight: 600;
    margin:0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align:center;      
}   

.box-info h3 {
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
    text-align:center;
    margin:20px auto;
    line-height: 3.1rem;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
} 

.box-info  p  {
    font-family: 'Source Code Pro', monospace;
    font-size: 15px;
    text-align: center;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}      






.st6play {
     transform-origin: 50% 50%;
     transform-box: fill-box; 
     z-index:100;
     animation: heartbeat 5s ;
}

.st8play {
     transform-origin: 50% 50%;
     transform-box: fill-box; 
   transform-origin:50% 100%;
    -moz-transform-origin:50% 100%;
    animation: appear 1s 1;
    transform-box: fill-box;
    animation-timing-function: cubic-bezier(.63,.09,.3,1.43);
    animation-fill-mode:forwards;
    transform:scale(0);
    position:relative;
    animation-delay: 0.3s
    z-index:100;
} 

.st10play {

}

.maplineup {
    transform:scaleY(0);

}

.maplineupplay  {
     transform-origin: 50% 0%;
     transform:scaleY(1);
     z-index:100;     
     animation: lineanim 0.5s ;
}

.mapdot {
    transform-origin: 50% 50%;
    transform:scale(0);

}

.mapdotplay  {
     transform-origin: 50% 50%;
      transform-box: fill-box; 
     transform:scale(1);
     z-index:100;     
     animation: beat 1.5s ;
     animation-delay: 1.5s
}



.st8{
z-index:100;
}

.st10{
z-index:300;
}

/*Keyframes*/
@keyframes appear {
    0%   {transform:scaleX(0) scaleY(0) translateY(0)}
    70%  {transform:scaleX(0.7) scaleY(0.7) translateY(0)}
    80%  {transform:scaleX(0.9) scaleY(0.5) translateY(5px)}
    100% {transform:scaleX(1) scaleY(1) translateY(0)}
}


@keyframes lineanim {
    0%   {transform:scaleY(0)}
    100% {transform:scaleY(1)}
}


@keyframes beat {
    0%   {transform:scale(0)}
    50%   {transform:scale(2)}
    100% {transform:scale(1)}
}


@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    transform: translateY(180px);    
  }

  80% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
   
  }

  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
   transform: translateY(0px);
  }
}



@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}

 
@keyframes heartbeat
{
  0%
  {
    transform: scale( 1 );
  }

  50%
  {
    transform: scale( 2 );
  }
  100%
  {
    transform: scale( 1 );
  }
}

html {
	font-size: 10px;
	font-family: 'Fedra Sans Demi', sans-serif;
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
	/* --header-h is measured live in app-wcag.js (fixed header's real
	   height changes with viewport size / text wrapping), with a
	   sane fallback for the instant before JS runs. Offsetting the
	   snap/scroll target by the header height stops the fixed header
	   from covering the top of whichever section we land on. */
	scroll-padding-top: var(--header-h, 9vh);
}
/* Each section gently snaps to fill the screen (minus the fixed header)
   while scrolling. proximity (not mandatory) + min-height (not height)
   is deliberate: it won't fight the user or clip content that runs
   longer than one screen on smaller viewports - it just settles
   sections into place. */
#hero,
#projects .first-project-item,
#projects .project-item,
#projects1 .project-item,
#slideshow,
.download-project-item,
.about-project-item,
#contact,
#footer {
	scroll-snap-align: start;
}
#projects .first-project-item,
#projects .project-item,
#projects1 .project-item,
#slideshow,
.download-project-item,
.about-project-item {
	min-height: calc(100vh - var(--header-h, 9vh));
	box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
a {
	text-decoration: none;
}
.ccontainer {
	min-height: calc(100vh - var(--header-h, 9vh));
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* "Next / previous section" jump arrows - the down arrow sits fixed
   above the bottom edge, the up arrow sits fixed just under the header
   (the common one-pager placement: "up" near the top you'd scroll back
   to, "down" near the bottom you're heading toward), both below the
   fixed header's z-index so they never overlap the menu. Each fades out
   on its own (handled in app-wcag.js) when there's nothing left in that
   direction to jump to. 48px targets meet the WCAG 2.5.5/2.5.8 minimum
   touch-target guidance at every breakpoint. While available (not
   .is-hidden) they otherwise sit at a low, translucent opacity so they
   don't visually compete with the page content, and only become fully
   opaque on hover/focus - keyboard focus gets the same full-opacity
   treatment as mouse hover so the button stays clearly visible for
   keyboard users too, not just the mouse. */
#next-section-btn,
#prev-section-btn {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 500;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: 2px solid #0066CC;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: opacity .3s ease, transform .2s ease;
	opacity: 0.45;
}
#next-section-btn {
	bottom: 24px;
}
#prev-section-btn {
	top: calc(var(--header-h, 9vh) + 16px);
}
#next-section-btn:hover,
#next-section-btn:focus-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(3px);
}
#prev-section-btn:hover,
#prev-section-btn:focus-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(-3px);
}
#next-section-btn.is-hidden,
#prev-section-btn.is-hidden {
	opacity: 0;
	pointer-events: none;
}
.section-nav-chevron {
	display: block;
	width: 14px;
	height: 14px;
	border-right: 3px solid #0066CC;
	border-bottom: 3px solid #0066CC;
}
.section-nav-chevron-down {
	transform: rotate(45deg) translate(-2px, -2px);
}
.section-nav-chevron-up {
	transform: rotate(225deg) translate(-2px, -2px);
}
/* Below ~768px the two-column "text left / image right" layout each
   reason section uses collapses to a single stacked column, and that
   column (numbered circle badge included) is centered on the viewport -
   exactly where these fixed, horizontally-centered arrows also sit, so
   the arrow visibly overlapped the "1", "2", "3"... badge. Moving the
   arrows to the right edge instead avoids that overlap; measured against
   every reason section's badge position from 768px down to 375px to
   confirm the two never collide once the arrows are here instead. */
@media only screen and (max-width: 768px) {
	#next-section-btn,
	#prev-section-btn {
		left: auto;
		right: 16px;
		transform: none;
	}
	#next-section-btn:hover,
	#next-section-btn:focus-visible {
		transform: translateY(3px);
	}
	#prev-section-btn:hover,
	#prev-section-btn:focus-visible {
		transform: translateY(-3px);
	}
}
@media only screen and (max-width: 700px) {
	#next-section-btn {
		bottom: 16px;
	}
	#prev-section-btn {
		top: calc(var(--header-h, 9vh) + 10px);
	}
}
img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
/* Lazy-loaded images fade in once their bytes actually arrive instead of
   popping in abruptly mid-scroll. This is independent of AniView's own
   reveal animation (that still runs exactly as before on the same
   element) - it only smooths the image's own paint the moment it
   finishes loading, most noticeable on a slow connection. */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity .4s ease;
}
img[loading="lazy"].img-loaded {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	img[loading="lazy"] {
		transition: none;
	}
}
p {
	color: black;
	font-size: 1.4rem;
	margin-top: 5px;
	line-height: 2.5rem;
	font-weight: 300;
	letter-spacing: .05rem;
}
.section-title {
	font-size: 4rem;
	font-weight: 300;
	color: black;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: .2rem;
	text-align: center;
}
.section-title span {
	color: crimson;
}

.cta {
	display: inline-block;
	padding: 10px 30px;
	color: white;
	background-color: #0066CC;
	border: 2px solid #0066CC;/*crimson;*/
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .1rem;
	margin-top: 30px;
	transition: .3s ease;
	transition-property: background-color, color;
     border-radius: 25px;
}
.cta:hover {
	color: white;
	background-color: transparent;/*crimson;*/
}

.brand img {
	height: initial;
	width: initial;
	object-fit: initial;
}


.brand h2 {
	font-size: 3rem;
	text-transform: uppercase;
	color: white;
}
.brand h2 span {
	color: crimson;
}

/* Header section */
#header {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100vw;
	height: auto;
}
#header .header {
	min-height: 8vh;
	background-color: #ffffff; /*rgba(31, 30, 30, 0.24);*/
	transition: .3s ease background-color;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}
#header .nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	max-width: 95%;
	padding: 0 10px;
}
#header .hamburgertext {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    color:#003366;
    font-family: 'Fedra Sans Book', sans-serif;
    font-weight:200;

}


#header .nav-list ul {
	list-style: none;
	position: absolute;
	background-color: #ffffff; /*rgb(31, 30, 30);   */
	width: 100vw;
	height: 100vh;
	left: 100%;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
	overflow-x: hidden;
	transition: .5s ease left;
}
#header .nav-list ul.active {
	left: 0%;
}
#header .nav-list ul a {
	font-size: 2.5rem;
	font-weight: 500;
	letter-spacing: .2rem;
	text-decoration: none;
	color: /*white;*/#003366;
	text-transform: uppercase;
	padding: 10px;
	display: block;
 font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
	font-size: 2.5rem;
	font-weight: 600;
    margin:0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align:center;          
}

#header .nav-list ul .numberCircle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    padding: 4px;
    background: #fff;
    border: 4px solid #CCCCCC;
    color: #0066CC;
    text-align: center;
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    font-size: 25px;
    font-weight: 600;
}


#header .nav-list ul a::after {
	content: attr(data-after);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	color: rgba(240, 248, 255, 0.021);
	font-size: 13rem;
	letter-spacing: 50px;
	z-index: -1;
	transition: .3s ease letter-spacing;
}
#header .nav-list ul li:hover a::after {
	transform: translate(-50%, -50%) scale(1);
	letter-spacing: initial;
}
#header .nav-list ul li:hover a {
	color: #0066CC;
}
#header .hamburger {
	/* Sized directly at the final on-screen size (60px * the old .8
	   scale) instead of via "transform: scale(.8)" - scaling a 2px line
	   down to 1.6 (physical) pixels left the browser to round each of
	   the three bars (one real element, two ::before/::after) to a
	   whole device pixel on its own, and Firefox and Chrome didn't
	   always round them the same way, so the bars came out visibly
	   uneven in Firefox even though they're identical in the markup/CSS.
	   Defining the already-scaled sizes directly keeps every bar at a
	   flat, un-scaled 2px, which renders identically everywhere. */
	height: 48px;
	width: 48px;
	display: inline-block;
//	border: 3px solid /*white;*/#000000;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
    margin-right:-6px;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
#header .hamburger:after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	border-radius: 50%;
//	border: 3px solid /*white;*/#000000;
//	animation: hamburger_puls 1s ease infinite;
}
#header .hamburger .bar {
	height: 2px;
	width: 24px;
	position: relative;
	background-color: /*white;*/#000000;
	z-index: -1;
	transition: background-color .2s ease;
}
#header .hamburger .bar::after,
#header .hamburger .bar::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	background-color: /*white;*/#000000;
	transition: top .2s ease, bottom .2s ease, transform .2s ease;
}
#header .hamburger .bar::after {
	top: 6px;
}
#header .hamburger .bar::before {
	bottom: 6px;
}
/* Open state: morph the 3 bars into an X instead of collapsing into a
   single flat dash - hide the middle bar and rotate the other two into
   place. */
#header .hamburger.active .bar {
	background-color: transparent;
}
#header .hamburger.active .bar::before {
	bottom: 0;
	transform: rotate(45deg);
}
#header .hamburger.active .bar::after {
	top: 0;
	transform: rotate(-45deg);
}
/* End Header section */

/* Hero Section */

#hero .fullwidth {
width:100%;
text-align:center;
}

#hero {
	background-image: url(./img/background.jpg);
	background-size: cover;
	background-position: top center;/*top center;*/
	position: relative;
    background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 0 50px !important;
z-index: 1;
    /* Hero's inner box is already (100vh - header) tall via .ccontainer,
       but hero itself starts at document y:0, right under the fixed
       header rather than below it - which left a gap the height of the
       header uncovered at the very bottom of the first screen (section 1
       peeking through). Padding hero down by the header's height closes
       that gap so hero fills the screen edge to edge on first load. */
    padding-top: var(--header-h, 9vh);
    box-sizing: border-box;


    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-animation: myfirst 2s ; /* Chrome, Safari, Opera */
    animation: myfirst 2s ;
}

/* Phones don't need the full 1920px hero background - a smaller
   pre-scaled version (background-size:cover still fills the screen)
   cuts this section's biggest single asset by more than half on
   mobile connections. */
@media only screen and (max-width: 700px) {
	#hero {
		background-image: url(./img/background-sm.jpg);
	}
}

   /* Chrome, Safari, Opera */
  @-webkit-keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }

  /* Standard syntax */
  @keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }




#hero .underline{
	background-image: url(./img/line.png);
	background-position: bottom left;/*top center;*/
	position: relative;
    background-repeat: repeat-x !important;
}


#hero::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: .0;
	z-index: -1;
}
#hero .hero-line { display: block; }

.hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 50px;
	justify-content: flex-start;
    width:100%;
    
}
#hero h1 {
    font-family: 'Fedra Sans Medium 3', sans-serif;
    font-weight:600;
	display: block;
	/*1width: fit-content;*/
    width:auto;
	font-size: 13rem;
	position: relative;
	color: transparent;
	animation: text_reveal .5s ease forwards;
	animation-delay: 1s;
    text-align:center;
   
}

#hero h1 .why {
font-family: 'Fedra Sans Book', sans-serif;
font-weight:200;
font-size:13rem;
}

#hero h1 .hero-line-1 {
	animation-delay: 0s;
}
#hero h1 .hero-line-2 {
font-family: 'Fedra Sans Book', sans-serif;
font-weight:200;
font-size:2.8rem;
	animation-delay: 0s;
margin-top: 2.6rem;    
}
.fat {
font-family: 'Fedra Sans Medium 3', sans-serif;
font-weight:200;
}

#hero h1 .hero-line-3 {
font-family: 'Fedra Sans Book', sans-serif;
font-weight:200;
font-size:2.8rem;

	animation: text_reveal_name .5s ease forwards;
	animation-delay: 0s;
margin-bottom: 2.6rem;    

}
#hero h1 span.anim {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background-color: /*crimson;*/transparent;
    background-image: url(./img/stick.png);
    background-size:4px 100%;
    background-repeat:no-repeat;
	animation: text_reveal_box 1s ease;
	animation-delay: .5s;
}
#hero h1 .hero-line-1 span {
	animation-delay: .5s;
}
#hero h1 .hero-line-2 span {
	animation-delay: 0.6s;
}
#hero h1 .hero-line-3 span {
	animation-delay: 0.7s;
}

/* End Hero Section */


/* Projects section */

#projects {
}

#projects .projects, #projects1 .projects {
	flex-direction: column;
	/*max-width: 1200px;*/
	margin: 0 auto;
	padding: 0;
    width: 100%;
}

#projects2 .projects {
	flex-direction: column;
	/*max-width: 1200px;*/
	margin: 0 auto;
	padding: 100px 0;
    width: 95%;
}

/* The digit inside used to rely only on the browser's default line-box
   leading to land in the middle of the circle - close enough at the
   base size, but that leading isn't exactly symmetric, and the error
   became visibly off-center once the smaller breakpoints below scaled
   the circle down. Flexbox centers the digit exactly regardless of the
   circle's size, so it stays centered at every breakpoint. */
#projects .numberCircle, #projects1 .numberCircle {
    margin: 0 auto;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    padding: 4px;
    background: #fff;
    border: 4px solid #CCCCCC;
    color: #0066CC;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

#projects2 .numberCircle {
    margin: 0 auto;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    padding: 4px;
    background: #fff;
    border: 4px solid #CCCCCC;
    color: #0066CC;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    font-size: 2.6em;
    font-weight: 600;
    margin-bottom: 2rem;
}


#projects .projects-header h2, #projects1 .projects-header h2 {
	margin-bottom: 50px;
}


#projects2 .projects-header h2 {
	margin-bottom: 50px;
}

#projects .all-projects, #projects1 .all-projects, #projects1 .download-projects, #projects1 .about-projects  {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    width:88%;
}

#projects .first-project {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    width:100%;
}

#projects .first-project-item{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

#projects .first-project-info {
	padding: 0;
    margin:0;
	flex-basis: 50%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	color: #003366; 
    text-align:center;
}

#projects .first-project-info-content, #projects .project-info-content,#projects1 .project-info-content {
margin:0 auto;
}

#projects .first-project-img{
	flex-basis: 50%;
	overflow: hidden;
	position: relative;
    padding:0;
    z-index:100;
}

#projects .first-project-img:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	opacity: .7;
}


//about project
#projects1 .about-project {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    width:100%;
}

#projects1 .about-project-item{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

#projects1 .about-project-info {
	padding: 0;
    margin:0;
	flex-basis: 50%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	color: #003366; 
    text-align:center;
}

#projects1 .about-project-info-content {
margin:0;
}



#projects1 .about-project-img {
	flex-basis: 50%;
	overflow: hidden;
	position: relative;
    padding:0;
    z-index:100;
    padding-left:6%;
}





//download-project-info
#projects1 .download-project {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    width:100%;
}

#projects1 .download-project-item{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

#projects1 .download-project-info {
	padding: 0;
    margin:0;
	flex-basis: 54%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	color: #003366; 
    text-align:center;
}

#projects1 .download-project-info-content {
margin:0;
}



#projects1 .download-project-img {
	flex-basis: 49%;
	overflow: hidden;
	position: relative;
    padding:0;
    z-index:100;
    padding-right:10%;
    padding-top:4%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The "Why Slovakia" PDF cover is a tall portrait image - cap it so the
   whole cover (and the text beside it) fits within one screen instead of
   the photo running off the bottom of the section. object-fit: contain
   keeps the full cover visible, just scaled down. */
.download-project-img img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - var(--header-h, 9vh) - 6rem);
	object-fit: contain;
}

.downloadcontainer {
  display:block;
  position:absolute;
  top:2%;
  right:18%;
  max-width: 10em;
  width: 10em;
  z-index:100;
}



.dbtn{
    display: inline-block;
    text-decoration: none;
    background: #0080FF;
    color: #FFF;
    width: 100px;
    height: 100px;
    /* line-height: 100px; */
    padding-top: 26px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: .4s;
    font-family: 'Source Code Pro', monospace;
    font-size: 15px;
        border:2px solid #0080ff;
}

.dbtn:hover{
    background: #ffffff;
    color:#0080ff;
}

//end download project info



#projects2 .all-projects {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#projects .project-item, #projects1 .project-item,
#projects1 .download-project-item, #aboutus .about-project-item  {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 10px;
}





#projects2 .project-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 80%;
	margin: 20px auto;
	overflow: hidden;
	border-radius: 10px;
}

#projects .project-info, #projects1 .project-info {
	padding: 30px;
    padding-bottom:0;
	flex-basis: 50%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	color: #003366;
    
}

#projects2 .project-info {
	padding: 30px;
    padding-bottom:0;
	flex-basis: 50%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	color: #003366;
}

#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
	font-size: 2.8rem;
	font-weight: 600;
    margin:0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align:center;      
}          

#projects2 .project-info h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
	font-size: 2.5rem;
	font-weight: 600;
    margin:0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align:center;      
}          
           
#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 2.2rem;
	font-weight: 500;
	margin-top: 10px;
    text-align:center;
    margin:20px auto;
    line-height: 3.4rem;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

#projects2 .project-info h3 {
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
    text-align:center;
    margin:20px auto;
    line-height: 3.1rem;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}


#projects .project-info p, #projects1 .project-info p, #projects .first-project-info p   {
    font-family: 'Source Code Pro', monospace;
    font-size: 17px;
    text-align: center;
    font-weight: 500;
    color: #003366;
    line-height: 2.8rem;

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;



}

/* This paragraph's <br class="break"> tags are a deliberate, hand-placed
   "which sentence goes on which line" layout - it's tuned to look right
   at the paragraph's full desktop width (measured ~638px, held constant
   from very wide screens down to about 1300px viewport width). Below
   that, as the two-column layout narrows the paragraph itself, those
   same fixed break points no longer land in sensible places - a line
   that was designed to fit now wraps AGAIN inside itself, producing
   uneven, ragged-looking line lengths instead of the clean intended
   layout. The site already had exactly this fix for phone widths (see
   the several "@media ... { .break { display: none; } }" rules further
   below, at 700px and narrower) - this just extends that same, already-
   proven technique up to cover the tablet/small-laptop gap between
   700px and the ~1300px point where the full-width layout starts,
   letting the browser wrap the paragraph naturally/fluidly there
   instead of fighting the fixed break points. */
@media only screen and (max-width: 1250px) {
    #projects .project-info p br.break,
    #projects1 .project-info p br.break,
    #projects .first-project-info p br.break {
        display: none;
    }
}

#projects2 .project-info p  {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.03rem;
    text-align: center;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#projects .project-img, #projects1 .project-img {
	flex-basis: 50%;
	height: 300px;
	overflow: hidden;
	position: relative;
    padding:0;
    z-index:100;
    padding-right:2%;
    width:100%;
}


#projects2 .project-img {
	flex-basis: 50%;
	/*height: 300px;*/
	overflow: hidden;
	position: relative;
    padding:0;
    z-index:100;
}

#projects .project-img:after, #projects1 .project-img:after {
	content: '';
	position: absolute;
	left: 0;                       
	top: 0;
	height: 100%;
	width: 100%;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	opacity: .7;
    padding-right:0;
    padding-left:2%;
}

#projects2 .project-img:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	opacity: .7;
}

#projects .project-img img, #projects1 .project-img img {
	transition: .3s ease transform;
}

#projects2 .project-img img {
	transition: .3s ease transform;
}

#projects .project-item:hover .project-img img, #projects1 .project-item:hover .project-img img {
	transform: scale(1.1);
}

#projects2 .project-item:hover .project-img img {
	transform: scale(1.1);
}

 .showmore-button {
            width:100%;
            margin-top: -1px;
            text-align: center;
            margin: 0 auto;
        }
        .showmore-button-inner {
            font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
	        font-weight: 600;       
            background: transparent;
            display: inline-block;
            padding: 6px 25px;
            line-height: 14px;
            font-size: 1rem;
            color: #003366;
            cursor: pointer;
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 2px;
                -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
                border: 1px solid #CCCCCC;
   
        }
        .showmore-button-inner:hover {
            /*background: #EFEFEF;*/
        }
/* End Projects section */

/* About Section */

#about .about {
	flex-direction: column;
	/*max-width: 1200px;*/
    width: 95%;
	margin: 0 auto;
	padding: 100px 0;
}

#about .numberCircle {
    margin: 0 auto;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    padding: 4px;
    background: #fff;
    border: 4px solid #CCCCCC;
    color: #0066CC;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    font-size: 2.6em;
    font-weight: 600;
    margin-bottom: 2rem;
}


#about .abouts-header h2 {
	margin-bottom: 50px;
}
#about .all-abouts {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#about .about-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 80%;
	margin: 20px auto;
	overflow: hidden;
	border-radius: 10px;
}
#about .about-info {
    padding-bottom:0;
	flex-basis: 100%;
	height: 110%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	color: #003366;
}
#about .about-info h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
	font-size: 2.0rem;
	font-weight: 600;
    /*margin:0 auto;*/
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
#about .about-info h3 {
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
    text-align:center;
    margin:20px auto;
    line-height: 3.1rem;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

}

#about .about-info p.robot {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.03rem;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#about .about-info p.normal {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.3rem;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#about .about-info p {
    text-align:center;
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 3.3rem;
	font-weight: 500;
    text-align:left;
    margin-top: 3rem;
    margin-bottom:0.5em;
    line-height: 5rem;
    color: #003366;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;     
}



#about .about-info p .fat {
font-weight:600;
}

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-align:left;
    text-transform: uppercase;
	font-size: 2.0rem;
	font-weight: 600;
    /*margin:0 auto;*/
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

#projects1 .download-project-info h3 {
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
    text-align:center;
    margin:20px auto;
    line-height: 3.1rem;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

}

#projects1 .download-project-info p.robot {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.03rem;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#projects1 .download-project-info p.normal {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.3rem;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#projects1 .download-project-info p {
    text-align:center;
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 3.3rem;
	font-weight: 500;
    text-align:left;
    margin-top: 3rem;
    margin-bottom:0.5em;
    line-height: 5rem;
    color: #003366;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;     
}



#projects1 .download-project-info p .fat {
font-weight:600;
}

#projects1 .download-project-info .dlink {
  text-decoration:none;
  color:#0066CC;
  border-bottom: 2px solid #0066CC;
  display: inline-block;
  line-height: 1.2;
}

#projects1 .download-project-info .dlink:hover {
  border-bottom: 0;
}
#projects1 .download-project-info .cta {
    float: left;
}    

#projects1 .download-project-info .cta:hover {
	color: #0066CC;
	background-color: transparent;/*crimson;*/
}

//about-projects
#projects1 .about-project-info h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-align:left;
    text-transform: uppercase;
	font-size: 2.0rem;
	font-weight: 600;
    /*margin:0 auto;*/
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

#projects1 .about-project-info h3 {
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
    text-align:center;
    margin:20px auto;
    line-height: 3.1rem;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

}

#projects1 .about-project-info p.robot {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.03rem;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#projects1 .about-project-info p.normal {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.3rem;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 2rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#projects1 .about-project-info p {
    text-align:center;
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 3.3rem;
	font-weight: 500;
    text-align:left;
    margin-top: 3rem;
    margin-bottom:0;
    line-height: 5rem;
    color: #003366;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;     
}

#projects1 .about-project-info p.sourcecode {
    font-family: 'Source Code Pro', monospace;
    font-size: 15px;
    text-align: left;
    font-weight: 500;
    color: #003366;
    line-height: 3rem;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    margin-top:0;  
}      




#projects1 .about-project-info p .fat {
font-weight:600;
}

#projects1 .about-project-info .dlink {
  text-decoration:none;
  color:#0066CC;
  border-bottom: 2px solid #0066CC;
  display: inline-block;
  line-height: 1.2;
}

#projects1 .about-project-info .dlink:hover {
  border-bottom: 0;
}
#projects1 .about-project-info .cta {
    float: left;
}    

#projects1 .about-project-info .cta:hover {
	color: #0066CC;
	background-color: transparent;/*crimson;*/
}

//end about projects



#about .about-img {
/*	flex-basis: 50%;
	height: 300px;*/
	overflow: hidden;
	position: relative;
    /*padding:30px;*/
    padding-left:0;
    padding-right:0;
    z-index:100;
}
#about .about-img:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	/*background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);*/
	opacity: .7;
}
#about .about-img img {
	transition: .3s ease transform;
}
#about .about-item:hover .project-img img {
	transform: scale(1.1);
}

#about .about-info a:hover {
	color: #0066CC;
}

#about .cta {
	color: #003366;
	margin-bottom: 50px;
	padding: 10px 20px;
	/*font-size: 2rem;*/
        -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#about p a:hover {
color: #ffffff;
}

#about div.about-info > a:hover {
color: #ffffff;
}

#about .about-img {
position:relative;
display:block;
width:900px;
height:auto;
}

#about .col-left .about-img::after {
}

#about h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 2.2rem;
    font-weight: 600;
   /* margin: 0 auto;*/
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    color:#003366;
}

#about .about-info a {
  text-decoration:none;
  color:#0066CC;
  border-bottom: 2px solid #0066CC;
  display: inline-block;
  line-height: 1.2;
}

#about .about-info p.normal a{
border-bottom: 1px solid #0066CC;
}
/* End About Section */

/* contact Section */
#contact .contact {
	flex-direction: column;
	max-width: 1200px;
	margin: 0 auto;
    min-height:auto;
    height:auto;
    margin-top:8%;
}
#contact .contact-items {
	width: 400px;
}
#contact .contact-item {
	width: 80%;
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	padding: 30px;
	margin: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0px 0px 18px 0 #0000002c;
	transition: .3s ease box-shadow;
}
#contact .contact-item:hover {
	box-shadow: 0px 0px 5px 0 #0000002c;
}
#contact .icon {
	width: 70px;
	margin: 0 auto;
	margin-bottom: 10px;
}
#contact h2 {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    color:#003366;
}

#contact p {
    text-align:center;
    font-family: 'Fedra Sans Book',Helvetica,sans-serif;
	font-size: 3.3rem;
	font-weight: 500;
    text-align:center;
    margin:0 auto;
    margin-top: 1%;
    margin-bottom:3.5rem;
    line-height: 5rem;
    color: #003366;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}

#contact .fat {
font-family: 'Fedra Sans Medium 3', sans-serif;
font-weight:200;
font-size:3rem;
}




#contact a {
  text-decoration:none;
  color:#0066CC;
  border-bottom: 2px solid #0066CC;
  display: inline-block;
  line-height: 1.2;
}
    
#contact .contact-info h2 {
	font-size: 2.5rem;
	font-weight: 500;
	margin-bottom: 5px;
}
#contact .contact-info h3 {
	font-size: 1.3rem;
	line-height: 2rem;
	font-weight: 500;
}
/*End contact Section */

/* Footer */
#footer {
	background-image: url(./img/line.png);
	background-position: top left;/*top center;*/
	position: relative;
    background-repeat: repeat-x !important;
    background-color: #003366;
}
#footer .footer {
    min-height: 70px;
    flex-direction: column;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0;
}
#footer h3 {
	color: white;
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: .1rem;
	margin-top: 10px;
	margin-bottom: 10px;
}
#footer .social-icon {
	display: flex;
	margin-bottom: 30px;
}
#footer .social-item {
	height: 50px;
	width: 50px;
	margin: 0 5px;
}
#footer .social-item img {
	filter: grayscale(1);
	transition: .3s ease filter;
}
#footer .social-item:hover img {
	filter: grayscale(0);
}
#footer p {
    font-family: 'Fedra Sans Medium 3',Helvetica,sans-serif;
    font-weight: 100;
    color: white;
    font-size: 0.64rem;
}
/* End Footer */

/* contact Section */ 

/* "Safe Haven" used to be a single JPEG with its heading and paragraph
   baked into the pixels - not selectable, not copyable, and invisible to
   translation/zoom/screen-reader text handling beyond the alt attribute.
   The baked-in text has since been removed from the photo itself
   (inpainted out, not just hidden by CSS), so the real HTML caption can
   sit directly on top of the now-plain photo - no tint, no backdrop
   blur, no background panel behind it, just white text on the photo's
   own dark left side. */
#slideshow {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--header-h, 9vh));
	box-sizing: border-box;
}

#slideshow .slideshow {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#slideshow .slides {
	flex-direction: column;
	width: 92%;
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

#slideshow .slides > div {
	width: 100%;
	display: flex;
	flex-direction: column;
}

#slideshow .slide-photo {
	position: relative;
	width: 100%;
	/* Lets the caption's font-size below be defined in cqw ("% of this
	   element's own width") instead of vw ("% of the viewport") - the
	   photo is capped to one screen tall, so on a short/wide window it
	   can end up much narrower than the viewport to keep its own
	   proportions, and cqw is what keeps the caption sized
	   proportionally to the PHOTO rather than the window at every
	   breakpoint. */
	container-type: inline-size;
}

#slideshow img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - var(--header-h, 9vh) - 2rem);
	object-fit: contain;
	margin: 0 auto;
	/* Reserves the image's real proportions immediately at layout time
	   (matching its width/height attributes) instead of only once the
	   bytes finish downloading, so the section doesn't grow mid-scroll
	   right as the photo arrives. */
	aspect-ratio: 1400 / 833;
}

/* Left/top match where the old baked-in heading and paragraph used to
   sit on this same photo, so the new real text lines up with the
   original design's layout, not just its size. */
#slideshow .slide-caption {
	position: absolute;
	left: 12%;
	top: 28%;
	width: 44%;
}
#slideshow .slide-caption h2 {
	font-family: 'Fedra Sans Demi', sans-serif;
	color: #ffffff;
	font-size: clamp(1.7rem, 4.6vw, 4rem);
	font-size: clamp(1.7rem, 5.2cqw, 4rem);
	font-weight: 700;
	margin: 0 0 1.2em 0;
}
#slideshow .slide-caption p {
	font-family: 'Source Code Pro', monospace;
	color: #ffffff;
	font-size: clamp(1rem, 2.3vw, 1.9rem);
	font-size: clamp(1rem, 2.6cqw, 1.9rem);
	line-height: 2.1;
	letter-spacing: 0.03em;
	margin: 0;
}

/* The photo is much shorter relative to its own width on narrow phones
   (it's still the same 1400x833 photo, just laid out closer to full
   viewport width there), so the same generous spacing above would run
   the paragraph past the bottom of the photo. Pull it back in just on
   narrow screens so it still fits within the image. Raised from 700px
   so this also covers tablet-portrait widths (e.g. iPad Air 4 at
   820px) - at that width the photo itself renders short enough
   (~449px tall) that the "desktop" tier's tighter top offset and looser
   line-height ran the paragraph well past the bottom of the photo, even
   though the font-size itself was already capped the same as desktop.
   Raised again to 1080px alongside the tablet-band rule below it, for
   the same reason. */
@media only screen and (max-width: 1080px) {
	#slideshow .slide-caption {
		top: 20%;
	}
	/* Same cqw ratios as above (so the text keeps the same proportion to
	   the photo it has on desktop), just with the rem floor lowered - on
	   a narrow phone the photo itself is proportionally shorter, so
	   without a lower floor here the text would stop shrinking with it
	   and run past the bottom of the photo. */
	#slideshow .slide-caption h2 {
		font-size: clamp(1.1rem, 5.2cqw, 4rem);
	}
	#slideshow .slide-caption p {
		font-size: clamp(0.65rem, 2.6cqw, 1.9rem);
		line-height: 1.4;
		letter-spacing: 0.01em;
	}
}

/* Between the phone tier above and full desktop, a tablet-portrait width
   (~700-900px) still renders the photo short enough relative to its own
   width that even the capped 19px paragraph font (1.9rem ceiling, same
   as desktop) doesn't leave room for 1.4 line-height text under a
   40px heading - unlike desktop, where the photo itself renders much
   taller in absolute pixels at the same capped font-size. Tightening the
   ceiling specifically in this band keeps the text proportionally sized
   to the shorter photo without touching phone (already has its own lower
   floor) or desktop/landscape-tablet (already verified to fit). Raised
   to 1080px (not just 900px) after measuring that some tablet/laptop widths
   up to ~1070px (e.g. a classic 1024x768 landscape tablet) still render the photo
   short enough to overflow at the full ceiling. */
@media only screen and (max-width: 1080px) and (min-width: 701px) {
	#slideshow .slide-caption h2 {
		font-size: clamp(1.1rem, 5.2cqw, 3.2rem);
	}
	#slideshow .slide-caption p {
		font-size: clamp(0.65rem, 2.6cqw, 1.5rem);
	}
}

/* On phones the caption box (44% of the photo's width) was so narrow
   that the low font-size floor above (needed so the text didn't run
   past the bottom of the short, narrow-aspect photo) made it close to
   unreadable. Widening the box to use most of the photo's width gives
   the same amount of text far more room to breathe horizontally, which
   both lets it use a taller floor and lets the paragraph's own manual
   <br> line breaks (now class="break", like every other paragraph on
   the site) drop out so it wraps naturally to fewer, fuller lines
   instead of five short fixed ones - freeing up the vertical room a
   bigger font needs. Checked against the shortest/narrowest photo
   (~294x175px at a 320px viewport) to confirm the text still fits
   above the bottom edge. */
@media only screen and (max-width: 768px) {
	#slideshow .slide-caption {
		left: 6%;
		top: 8%;
		width: 88%;
	}
	#slideshow .slide-caption h2 {
		/* px, not rem - this site's html is font-size:10px, so a rem
		   value here would come out far smaller than it looks. */
		font-size: clamp(21px, 7cqw, 34px);
		margin: 0 0 0.4em 0;
	}
	#slideshow .slide-caption p {
		font-size: clamp(14px, 3.6cqw, 18px);
		line-height: 1.28;
		letter-spacing: 0;
	}
}

/* A little extra headroom right at the very narrowest phone widths,
   where the photo itself is shortest (~175px tall at 320px viewport)
   and the text at its size floor came within a few px of the bottom
   edge. */
@media only screen and (max-width: 340px) {
	#slideshow .slide-caption {
		top: 4%;
	}
}

/* Keyframes */
@keyframes hamburger_puls {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.4);
	}
}
@keyframes text_reveal_box {
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 0;
		left: 100%;
	}
}
@keyframes text_reveal {
	100% {
		color: white;
	}
}
@keyframes text_reveal_name {
	100% {
		color: #ffffff;
		font-weight: 500;
	}
}
/* End Keyframes */

/* Media Query For Tablet */
@media only screen and (min-width: 768px) {
	.cta {
		font-size: 1.4rem;
        padding: 10px 30px;
	}
	h2.section-title {
		font-size: 6rem;
	}

	/* Hero */
	#hero h1 {
		font-size: 13rem;
        
	}
	/* End Hero */


	/* Project */
	#projects .project-item, #projects1 .project-item,#projects .first-project-item, #projects1 .download-project-item, #aboutus .about-project-item
     {
		flex-direction: row;
	}
    #projects2 .project-item {
		flex-direction: row;
	}
    
    #projects1 .download-project-item {
		flex-direction: row-reverse;
	}
    
    
    #projects1 .project-item:nth-child(odd) {
		flex-direction: row-reverse;
	}
    #projects2 .project-item:nth-child(odd) {
		flex-direction: row-reverse;
	}

	#projects .project-item:nth-child(odd){
		flex-direction: row-reverse;
	}
    
    #projects .project-item img, #projects1 .project-item img{
        padding-left:0;  
        padding-right:0;        
        
    }
    #projects2 .project-item img{
        padding-left:0;  
        padding-right:0;        

    }
    #projects1 .project-item:nth-child(odd) img{
		flex-direction: row-reverse;
        padding-right:0;  
        padding-left:0;           
    }    
    #projects2 .project-item:nth-child(odd) img{
		flex-direction: row-reverse;
        padding-right:0;  
        padding-left:0;           
    }    

    #projects .project-item:nth-child(odd) img{
		flex-direction: row-reverse;
        padding-right:0; 
        padding-left:0;        
	}

    #projects1 .download-project-item img{
		flex-direction: row-reverse;
        padding-right:0; 
        padding-left:0;        
	}
    
  	#projects1 .download-project-item{
	/*	height: 400px;*/
		margin: 0;
		width: 100%;
		border-radius: 0;
	}



	/* These sections are full-screen scroll-snap stops (min-height:
	   100vh - header, see the shared rule near the top of this file) - a
	   margin-bottom here used to leave the tail of the previous section
	   peeking out above the fixed header every time an arrow/link jumped
	   to one of them, the same "gap at the top of the screen" bug that
	   was already fixed for the hero. Zeroed to match. */
	#projects .project-item, #projects1 .project-item {
	/*	height: 400px;*/
		margin: 0;
		width: 100%;
		border-radius: 0;
	}
    #projects2 .project-item {
	/*	height: 400px;*/
		margin: 0;
		width: 100%;
		border-radius: 0;
        margin-bottom: 6%;
	}
    
    
    #projects1 .download-projects {
    
    }
    
    #projects1 .download-projects .download-project-info{
        padding-left:0;  
        padding-right:6%;        
        padding-top:0;
		height: 100%;
	}
    
    #projects1 .about-projects .about-project-info{
        padding-left:0;  
        padding-right:6%;        
        padding-top:0;
		height: 100%;
	}

    
    #projects2 .all-projects .project-info {
        padding-left:0;  
        padding-right:6%;        
        padding-top:0;
		height: 100%;
	}
	#projects .all-projects .project-info, #projects1 .all-projects .project-info {
        padding-left:0;  
        padding-right:6%;        
        padding-top:0;
		height: 100%;
	}
    #projects1 .project-item:nth-child(odd) .project-info{
        padding-top:0;
        padding-right:0;  
        padding-left:6%;
        padding-top:0;              
    }
    #projects2 .project-item:nth-child(odd) .project-info{
        padding-top:0;
        padding-right:0;  
        padding-left:6%;
        padding-top:0;              
    }
    #projects .project-item:nth-child(odd) .project-info{
        padding-top:0;
        padding-right:0;  
        padding-left:6%;
        padding-top:0;           
    }
    
	#projects .all-projects .project-img, #projects1 .all-projects .project-img {
        padding-right:0;  
        padding-left:2%;        
        padding-top:0;
	}    
    #projects .project-item:nth-child(odd) .project-img, #projects1 .project-item:nth-child(odd) .project-img{
        padding-left:0;  
        padding-right:2%;
        padding-top:0;           
    }                                   
    
    
	#projects .all-projects .project-img, #projects1 .all-projects .project-img {
		height: 100%;
	}
	/* End Project */

	/* About */
	#about .about-item {
		flex-direction: row;
	}
	#about .about-item:nth-child(odd) {
		flex-direction: row-reverse;
	}
	#about .about-item {
		/*height: 400px;*/
		margin: 0;
		width: 100%;
		border-radius: 0;
        margin-bottom: 50px;
	}
	#about .all-abouts .about-info {
		height: 100%;
	}
	#about .all-abouts .about-img {
		height: 100%;
	}
	/* End About */

	/* contact  */
	#contact .contact {
		flex-direction: column;
		/*padding: 100px 0;*/
		align-items: center;
		justify-content: center;
		min-width: 20vh;
	}
	#contact .contact-items {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		margin: 0;
	}
	#contact .contact-item {
		width: 30%;
		margin: 0;
		flex-direction: row;
	}
	#contact .contact-item .icon {
		height: 100px;
		width: 100px;
	}
	#contact .contact-item .icon img {
		object-fit: contain;
	}
	#contact .contact-item .contact-info {
		width: 100%;
		text-align: left;
		padding-left: 20px;
	}
	/* End contact  */
}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.9rem;
	margin-top: 9px;
    text-align:center;
    margin:19px auto;
    line-height: 3.0rem;
}

#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.4rem;
}   

#projects .numberCircle, #projects1 .numberCircle {
    width: 52px;
    height: 52px;
    padding: 4px;
    font-size: 2.5rem;
    margin-bottom: 1.9rem;
} 

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.8rem;
    margin-top: 2.8rem;
    line-height: 4.0rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 12px;
    line-height: 2.5rem;
 
}           

}


@media only screen and (max-width: 2150px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 2rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 3.0rem;
    margin-top: 2.8rem;
    line-height: 4.7rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 14px;
    line-height: 2.7rem;
 
}    
}

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


#projects1 .about-project-info p.sourcecode {
    font-size: 13px;
    line-height: 2.6rem;
 
}    
}

@media only screen and (max-width: 1870px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 2rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.9rem;
    margin-top: 2.8rem;
    line-height: 4.6rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 12px;
    line-height: 2.6rem;
 
}    
}

@media only screen and (max-width: 1750px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 2rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.8rem;
    margin-top: 2.8rem;
    line-height: 4.5rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 11px;
    line-height: 2.5rem;
 
}    
}

@media only screen and (max-width: 1600px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 2rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.7rem;
    margin-top: 2.8rem;
    line-height: 4.45rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 10px;
    line-height: 2.4rem;
 
}    
}


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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.8rem;
	margin-top: 8px;
    text-align:center;
    margin:18px auto;
    line-height: 2.8rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.3rem;
}          
#projects .numberCircle, #projects1 .numberCircle {
    width: 50px;
    height: 50px;
    padding: 4px;
    font-size: 2.4rem;
    margin-bottom: 1.8rem;
}   

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.5rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.5rem;
    margin-top: 2.8rem;
    line-height: 3.7rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 10px;
    line-height: 2.2rem;
 
}         


}


@media only screen and (max-width: 1465px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.4rem;
    margin-top: 2.8rem;
    line-height: 4.1rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 9px;
    line-height: 2.3rem;
 
}    
}


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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.7rem;
	margin-top: 7px;
    text-align:center;
    margin:17px auto;
    line-height: 2.6rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.2rem;
}
          
#projects .numberCircle, #projects1 .numberCircle {
    width: 48px;
    height: 48px;
    padding: 4px;
    font-size: 2.3rem;
    margin-bottom: 1.7rem;
}       

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p {
	font-size: 2.8rem;
    margin-top: 2.8rem;
    line-height: 4.0rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 12px;
    line-height: 2.5rem;
 
}  

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.2rem;
    margin-top: 2.8rem;
    line-height: 3.9rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 8px;
    line-height: 2.0rem;
 
}      

}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.6rem;
	margin-top: 6px;
    text-align:center;
    margin:16px auto;
    line-height: 2.3rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.1rem;
}          
#projects .numberCircle, #projects1 .numberCircle {
    width: 46px;
    height: 46px;
    padding: 4px;
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
}       


}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.5rem;
	margin-top: 5px;
    text-align:center;
    margin:15px auto;
    line-height: 2.1rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.0rem;
}          
#projects .numberCircle, #projects1 .numberCircle {
    width: 44px;
    height: 44px;
    padding: 4px;
    font-size: 2.1rem;
    margin-bottom: 1.5rem;
}    

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.0rem;
    margin-top: 2.8rem;
    line-height: 3.7rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 8px;
    line-height: 2.0rem;
 
}     

}

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

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 2.0rem;
    margin-top: 2.8rem;
    line-height: 3.7rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 7px;
    line-height: 1.9rem;
 
}   
}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.4rem;
	margin-top: 4px;
    text-align:center;
    margin:14px auto;
    line-height: 1.8rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 1.9rem;
}          

#projects .numberCircle, #projects1 .numberCircle {
    width: 42px;
    height: 42px;
    padding: 4px;
    font-size: 2.0rem;
    margin-bottom: 1.4rem;
}   

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 1.8rem;
    margin-top: 2.8rem;
    line-height: 3.5rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 7px;
    line-height: 1.9rem;
 
}      

}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.3rem;
	margin-top: 3px;
    text-align:center;
    margin:13px auto;
    line-height: 1.5rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 1.8rem;
}          
#projects .numberCircle, #projects1 .numberCircle {
    width: 40px;
    height: 40px;
    padding: 3px;
    font-size: 1.9rem;
    margin-bottom: 1.3rem;
}       

#header .nav-list ul a {
	letter-spacing: .2rem;
	padding: 8px;
	font-size: 1.9rem;
}

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 1.6rem;
    margin-top: 2.8rem;
    line-height: 3.3rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 6px;
    line-height: 1.7rem;
 
}     

}


@media only screen and (max-width: 930px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 1.4rem;
    margin-top: 2.5rem;
    line-height: 3.0rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 5px;
    line-height: 1.4rem;
 
}     
}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.2rem;
	margin-top: 2px;
    text-align:center;
    margin:12px auto;
    line-height: 1.3rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 1.7rem;
}          

#projects .numberCircle, #projects1 .numberCircle {
    width: 38px;
    height: 38px;
    padding: 3px;
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
}       

}

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

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
	font-size: 1.1rem;
	margin-top: 1px;
    text-align:center;
    margin:11px auto;
    line-height: 1.0rem;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 1.6rem;
}          

#projects .numberCircle, #projects1 .numberCircle {
    width: 36px;
    height: 36px;
    padding: 2px;
    font-size: 1.7rem;
    margin-bottom: 1.1rem;
}  

#contact h2 {
    font-size: 2.0rem;
}
#contact p {
	font-size: 3.0rem;
    margin-top: 1%;
    margin-bottom:3.2rem;
    line-height: 4.6rem;
}
#contact .fat {
font-size:2.8rem;
}
#contact a {
  line-height: 1.2;
}
#contact .contact-info h2 {
	font-size: 2.3rem;
	margin-bottom: 5px;
}
#contact .contact-info h3 {
	font-size: 1.2rem;
	line-height: 2rem;
  
}
}

@media only screen and (max-width: 820px) {
#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p {
	font-size: 1.2rem;
    margin-top: 2.3rem;
    line-height: 2.8rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 5px;
    line-height: 1.4rem;
 
}     
}

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

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p  {
	font-size: 1.2rem;
    margin-top: 2.3rem;
    line-height: 2.8rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 4px;
    line-height: 1.2rem;
 
}     
}

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

#projects .project-info p, #projects1 .project-info p, #projects .first-project-info p   {
    /* Was a flat 10px here (and identically in every narrower breakpoint
       below) regardless of how much width was actually available - fine
       on the very narrowest phones, but needlessly small anywhere closer
       to 768px where there's plenty of room to be more readable. A fluid
       clamp() scales this smoothly with the viewport instead of jumping
       straight to the same small size everywhere: it reaches this
       range's minimum (13px) only at the narrowest phone widths, and
       otherwise grows with available width up to the same 17px used
       across the desktop/tablet tier just above this breakpoint, so the
       size transitions smoothly into it rather than jumping. Unitless
       line-height scales together with it automatically at every size. */
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.6;
}
#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
    /* This mobile-tier h3 used to be a flat 1.5rem (15px) down to 628px,
       then drop to a flat 1.0rem (10px) below 540px - a hard, jarring
       cliff right at a very common phone width, and smaller than it
       needs to be even above that. A single clamp() replaces both fixed
       steps with one smooth scale, repeated identically in each of the
       narrower breakpoint blocks below so there's no cliff between them
       either - see the 540px/400px blocks. */
    font-size: clamp(16px, 4.5vw, 20px);
	margin-top: 5px;
    text-align:center;
    margin:15px auto;
    line-height: 1.3;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.0rem;
}
#projects .numberCircle, #projects1 .numberCircle {
    width: 44px;
    height: 44px;
    padding: 4px;
    font-size: 2.1rem;
    margin-bottom: 1.5rem;
}

/* Red stat-circle badges (cccircle) were a flat 10em / 10px everywhere,
   desktop and mobile alike, which reads as genuinely tiny on a phone.
   Bumping them up specifically on mobile, where they're proportionally
   much more important (there's no wide two-column layout to give the
   number context anymore). Values were checked against the narrowest
   image containers (down to 320px viewport) to make sure the bigger
   circle still stays inside its photo without being clipped. */
#projects .cccontainer, #projects1 .cccontainer {
    width: 13em;
    max-width: 13em;
}
#projects .cccontainer-lg, #projects1 .cccontainer-lg {
    width: 14em;
    max-width: 14em;
}
#projects .cccircle-content, #projects1 .cccircle-content {
    font-size: 14px;
}
/* Section 6's circle has by far the longest text of the ten badges
   ("Prediction for 2040-93% of produced electricity from renewables
   and nuclear sources") - at the same 14px used everywhere else it
   doesn't fit inside even the bigger 14em circle and gets clipped top
   and bottom by the circle's own overflow:hidden. Scaled down to
   roughly the same ratio the desktop version already uses (its text
   is deliberately smaller than the other circles' for the same
   reason - see the .cccontainer-lg comment above). */
#projects .cccontainer-lg .cccircle-content, #projects1 .cccontainer-lg .cccircle-content {
    font-size: 11px;
}

#projects .project-info, #projects1 .project-info {
padding:0;
}



#hero h1 {
	font-size: 10rem;
}

#hero h1 .why {
font-size:10rem;
}

#hero h1 .hero-line-2 {
font-size:2.0rem;
margin-top: 1.9rem;    
}

#hero h1 .hero-line-3 {
font-size:2.0rem;
margin-bottom: 1.9rem;    

}

.brand img {
    width: 200px;
} 

.cta {
    font-size: 1.4rem;
    padding: 10px 30px;
}

#header .nav-list ul a {
	letter-spacing: .2rem;
	padding: 5px;
	font-size: 1.7rem;
}

#projects .first-project-item {
	display: flex;
	flex-direction: column;
}

#projects .first-project-img{
    flex-basis: 50%;
    height: 300px;
    overflow: hidden;
    position: relative;
    padding: 0;
    z-index: 100;
    padding-right: 2%;
    width: 72%;
    margin-top:6%;
}

#projects .project-img, #projects1 .project-img {
   margin-top:6%;
}

#contact p {
	font-size: 1.9rem;
    margin-top: 1%;
    margin-bottom:2.9rem;
    line-height: 2.3rem;
}

#projects1 .download-project-info h2, #projects1 .about-project-info h2 {
	font-size: 1.8rem;
}
#projects1 .about-project-info p,#projects1 .download-project-info p  {
	font-size: 2.4rem;
    margin-top: 2.3rem;
    line-height: 3.8rem;
}
#projects1 .about-project-info p.sourcecode {
    font-size: 10px;
    line-height: 2.5rem;
 
}    

}

@media only screen and (max-width: 700px) {
.break {
display:none;
}

#projects .first-project-info {
width:70%;
}

#projects1 .about-project-info p.sourcecode , #projects .project-info p, #projects1 .project-info p, #projects .first-project-info p   {
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.6;
}

#projects .all-projects, #projects1 .all-projects, #projects1 .download-projects, #projects1 .about-projects {
     width: 100%;
}

}


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

.break {
display:none;
}

#projects .first-project-info {
width:70%;
}


#projects1 .about-project-info p.sourcecode , #projects .project-info p, #projects1 .project-info p, #projects .first-project-info p   {
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.6;
}

#projects .all-projects, #projects1 .all-projects, #projects1 .download-projects, #projects1 .about-projects {
     width: 100%;
}


#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
    font-size: clamp(16px, 4.5vw, 20px);
	margin-top: 5px;
    text-align:center;
    margin:15px auto;
    line-height: 1.3;
}
#projects .project-info h2, #projects1 .project-info h2, #projects .first-project-info h2 {
	font-size: 2.0rem;
}
#projects .numberCircle, #projects1 .numberCircle {
    width: 44px;
    height: 44px;
    padding: 4px;
    font-size: 2.1rem;
    margin-bottom: 1.5rem;
}

#projects .project-info, #projects1 .project-info {
padding:0;
}


}


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

.break {
display:none;
}

#projects .first-project-info {
width:70%;
}

#projects .all-projects, #projects1 .all-projects, #projects1 .download-projects, #projects1 .about-projects {
     width: 100%;
}


#hero h1 {
	font-size: 7rem;
}

#hero h1 .why {
font-size:8rem;
}

#hero h1 .hero-line-2 {
font-size:1.5rem;
margin-top: 1.4rem;    
}

#hero h1 .hero-line-3 {
font-size:1.5rem;
margin-bottom: 1.4rem;    

}

.brand img {
    width: 190px;
} 

.cta {
    font-size: 1.4rem;
    padding: 10px 30px;
}

#header .nav-list ul a {
	letter-spacing: .2rem;
	padding: 4px;
	font-size: 1.5rem;
}

#contact h2 {
    font-size: 1.7rem;
}
#contact p {
	font-size: 1.7rem;
    margin-top: 1%;
    margin-bottom:2.9rem;
    line-height: 2.1rem;
}
#contact .fat {
font-size:2.5rem;
}
#contact a {
  line-height: 1.2;
}
#contact .contact-info h2 {
	font-size: 2.0rem;
	margin-bottom: 3px;
}
#contact .contact-info h3 {
	font-size: 0.9rem;
	line-height: 1.7rem;
  
}
}

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

.break {
display:none;
}

#projects .first-project-info {
width:70%;
}

#projects .all-projects, #projects1 .all-projects, #projects1 .download-projects, #projects1 .about-projects {
     width: 100%;
}



#hero h1 {
	font-size: 5rem;
}

#hero h1 .why {
font-size:5rem;
}

#hero h1 .hero-line-2 {
font-size:1.5rem;
margin-top: 1.4rem;    
}

#hero h1 .hero-line-3 {
font-size:1.5rem;
margin-bottom: 1.4rem;    

}

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
    font-size: clamp(16px, 4.5vw, 20px);
    margin-top: 5px;
    text-align: center;
    margin: 15px auto;
    line-height: 1.3;
}

#projects1 .about-project-info p.sourcecode , #projects .project-info p, #projects1 .project-info p, #projects .first-project-info p   {
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.6;

}

}

@media only screen and (max-width: 400px) {
.break {
display:none;
}

#projects .first-project-info {
width:70%;
}


#projects .all-projects, #projects1 .all-projects, #projects1 .download-projects, #projects1 .about-projects {
     width: 100%;
}


#hero h1 {
	font-size: 2rem;
}

#hero h1 .why {
font-size:2rem;
}

#hero h1 .hero-line-2 {
font-size:1.5rem;
margin-top: 1.4rem;    
}

#hero h1 .hero-line-3 {
font-size:1.5rem;
margin-bottom: 1.4rem;    

}

#projects .project-info h3, #projects1 .project-info h3, #projects .first-project-info h3 {
    font-size: clamp(16px, 4.5vw, 20px);
    margin-top: 5px;
    text-align: center;
    margin: 15px auto;
    line-height: 1.3;
}

#projects1 .about-project-info p.sourcecode , #projects .project-info p, #projects1 .project-info p, #projects .first-project-info p   {
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.6;

}
}


/* End Media Query For Tablet */

/* Media Query For Desktop */
@media only screen and (min-width: 5200px) {
	/* header */
	#header .hamburger {
		display: none;
	}
	#header .nav-list ul {
		position: initial;
		display: block;
		height: auto;
        width: auto;
		width: fit-content;
		background-color: transparent;
	}
	#header .nav-list ul li {
		display: inline-block;
	}
	#header .nav-list ul li a {
		font-size: 1.8rem;
	}
	#header .nav-list ul a:after {
		display: none;
	}
	/* End header */

}
/* End  Media Query For Desktop */




.slides1 {
z-index:200;
}



/* This used to size the circle with "height:0; padding-top:100%" (an
   old trick for a square box before "aspect-ratio" existed) and center
   the number inside it with "top/left:50%; transform:translate(-50%,
   -50%); height/width:100%". Some versions of Safari don't reliably
   resolve a percentage height on an absolutely-positioned child when
   the parent's own height comes from padding rather than a real height
   value, which is exactly this setup - the content could end up
   collapsed or placed outside the circle. "aspect-ratio" (a real,
   definite box size) plus "inset: 0" (no percentage math, no
   transform) is the modern equivalent and doesn't depend on that
   percentage-resolution edge case, so it renders the same everywhere. */
.cccircle {
  background: #FF0000;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 100;
}

.cccircle-content {
  align-items: center;
  display: flex;
  inset: 0;
  hyphens: auto;
  justify-content: center;
  padding: 0.75em;
  position: absolute;
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  line-height: 1.3em;
}

.cccontainer {
  display:block;
  position:absolute;
  top:3%;
  right:6%;
  max-width: 10em;
  width: 10em;
  z-index:100;
}

.right {
  top:3%;
  left:6%;
}

.rightonleft {
  top:3%;
  left:3%;
}

/* Section 6 stat circle has much longer text than the others ("Prediction
   for 2040-93% of produced electricity from renewables and nuclear
   sources") - the default 10em circle is a bit too small for it, so it
   gets slightly more room than the default, but only slightly: sized
   close to its original/mobile size rather than the much larger 18em it
   had grown to, with the font shrunk further so the long text still
   fits inside without spilling past the circle onto the photo. */
.cccontainer-lg {
  width: 12.5em;
  max-width: 12.5em;
}

/* Mobile-tier override (bigger, not smaller) now lives with the other
   mobile cccircle sizing above, in the max-width:768px block. */




.row.make-equal {
    overflow: hidden;
}
.row.make-equal [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}



.parent {
display: grid;
grid-template-columns: repeat(48, 1fr);
grid-template-rows: repeat(27, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}