* {
    margin: 0;
    padding: 0;
}
html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 150%;
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    margin: auto;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
    overflow: visible !important;

}
.semiBody {
    width: 60%;
    margin: 0 auto;
    background-color: #fff;
    
  }

.main-container {
    text-align: center;
    margin: 0 auto;
    width: 100%;

}

.overlayContainer {
    position: relative;
    width: 50%
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .2s ease;
    background-color: #333
}

.img-circle {
    border-radius: 50%;
    width: 10em;
    height: 10em
}

.splitter {
    border-top: .2em solid #ff8c00
}

.image-big-container,
.image-container {
    position: relative;
    background-color: #000;
    padding: 20px;
    margin: 0 auto;
    min-width: 90%;
}

.image-big-container {
    width: 80%;
    height: 600px
}

.image-big-container:hover .overlay,
.image-container:hover .overlay {
    opacity: .8;
    background-color: #333

}

.image-container {
    max-width: 80%;
    height: 100px
}


.titleLink {
    /* font-size: 3em; */
    color: #009dd1;
    margin-top: .3em
}

.titleVideo {
    /* font-size: 4em; */
    color: #202020;
    margin-bottom: .3em
}

.title {
    /* font-size: 2em; */
    color: #202020;
    margin-top: .3em
}

.titleExpProjects {
    margin-bottom: 1em
}

.titleb,
.titlebig,
.titlemedium {
    /* font-size: 4em; */
    color: #202020
}

.titleb,
.titlemedium {
    /* font-size: 3em */
}

.titleb {
    /* font-size: 3em; */
    margin-top: .3em
}

.intro-description,
.subtitle {
    /* font-size: 1em; */
    color: #505050
}

.intro-description {
    /* font-size: 2em; */
    padding-bottom: 1.5em;
    color: #303030;
    font-style: italic
}

.column {
    margin:auto;
}

.horizontal-line {
    margin-top: .9em;
    margin-bottom: 1.4em;
    width: 100%;
    border-style: groove
}

.vl {
    border-left: .2em solid;
    border-color: #0b5e00;
    height: 3em
}

.entryBorder {
    border-left: .5em solid;
    border-color: #97e7f5
}

.entry,
a {
    font-size: 1em;
}

.entry {
    padding: .2em;
    text-align: center
}

.videoFrame {
    width: "60%";
    height: "200px"
}

iframe {
    display: block;
    width: 720px;
    height: 480px;
    border-radius: 10px
}

.date {
    /* font-size: 2em; */
    font-style: italic;
    text-align: right;
    padding-bottom: .5em
}

.descriptions,
.projectHolder {
    /* font-size: 2em; */
    text-align: left
}

.projectHolder {
    float: left;
    margin-left: 50px;
    /* font-size: 1.3em; */
    width: 80%;
    height: 100px;
    padding-bottom: 1em
}

.iconWork {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20%
}

.iconProject {
    width: 100px;
    height: 100px;
    float: left;
    border-radius: 20%
}

.projectTitleBig,
.workLink {
    /* font-size: 2.5em; */
    text-align: left
}

.workLink {
    color: #fff;
    margin-top: 50px;
    margin-left: 50px
}

.projectTitleBig {
    margin-top: 16px;
    margin-left: 130px
}

.projectTitle,
.projectTitleLink {
    /* font-size:1.5em; */
    text-align: left;
    margin-top: 30px;
    color: #333;
    margin-left: 30px
}

.projectTitleLink {
    color: #009dd1
}

.links {
    width: 100%
}

ul {
    /* font-size: 40px; */
    margin-bottom: 64px;
    line-height: 32px
}

.linktd {
    text-align: center;
    width: 50%;
    padding-bottom: 1em
}

a {
    color: #202020;
    font-weight: 700;
    text-decoration: none;
    padding: .3em .4em .2em
}

a:active,
a:hover {
    background-color: #202020;
    color: #fff
}

a:active {
    background-color: #303030
}
iframe {
    display: block;
    margin: 0 auto; /* This will center it horizontally */
}
 a.sticky-link {
  display: block;
}

/* visuals for every sticky header */
.sticky-link {
  display: block;
  width: 100%;
  background: #111;
  color: #fff;
  padding: 12px;
  margin: 0;
  border-bottom: 1px solid #444;
  text-decoration: none;   /* anchors default underline off */
}

/* now the stickies, each with its own offset */
.sticky-0 {
  position: sticky;
  top:   0px;
  z-index: 104;
}
.sticky-1 {
  position: sticky;
  top:  60px;   /* measure your real header height */
  z-index: 103;
}
.sticky-2 {
  position: sticky;
  top: 120px;
  z-index: 102;
}
.sticky-3 {
  position: sticky;
  top: 180px;
  z-index: 101;
}

@media (orientation: portrait) {
  body {
    width: 100%;   
        zoom: 0.5;

  }
  .semiBody {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    
  }
}