/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Hind+Madurai:400,500,300,600,700);
html{scroll-behavior:smooth}
body {
    margin: 0;
    font-family: 'Hind Madurai', sans-serif;
    overflow-x: hidden;
}
a {
    text-decoration:none!important
}
@-webkit-keyframes background {
  0% { background-color: rgb(0 106 136 / 57%); }
  /*33% { background-color: rgb(196 105 39 / 57%); }  */
  /*67% { background-color: rgb(180 67 62 / 57%); }*/
  100% { background-color: rgb(0 106 136 / 57%); }
}

@keyframes background {
  0% { background-color: rgb(0 106 136 / 57%); }
  /*33% { background-color: rgb(196 105 39 / 57%) }  */
  /*67% { background-color: rgb(180 67 62 / 57%) }*/
  100% { background-color: rgb(0 106 136 / 57%); }
}
@-webkit-keyframes solid-background {
  0% { background-color: rgb(0 106 136 / 100%); }
  /*33% { background-color: rgb(196 105 39 / 100%); }  */
  /*67% { background-color: rgb(180 67 62 / 100%); }*/
  100% { background-color: rgb(0 106 136 / 100%); }
}

@keyframes solid-background {
  0% { background-color: rgb(0 106 136 / 100%); }
  /*33% { background-color: rgb(196 105 39 / 100%) }  */
  /*67% { background-color: rgb(180 67 62 / 100%); }*/
  100% { background-color: rgb(0 106 136 / 100%); }
}
li, ul {
    margin:0;
    padding:0;
    list-style:none;
}
pre {outline: 0px solid #ccc; padding: 10px; margin: 5px; }
.string {
    color: #4e36c2;
    white-space: break-spaces;
}
/*.code-parent {
    width: 90%;
    height: calc(90vh);
    position: absolute;
    z-index: 100000;
    top: 5%;
    left: 5%;
}*/
#code-view .string {
    color: #157400;
    white-space: break-spaces;
}
.top {
    background-image: url(../images/top.png), linear-gradient(rgb(0 106 136 / 57%), rgb(0 106 136 / 57%));
    height: 80px;
    background-position-x: center;
}
.bottom {
    background-image: url(../images/bottom.png), linear-gradient(rgb(0 106 136 / 100%), rgb(0 106 136 / 100%));
    height: 80px;
    background-position-x: center;
}
.bottom2 {
    background-image: url(../images/bottom2.png), linear-gradient(#f3f3f3, #f3f3f3);
    height: 80px;
    background-position-x: center;
}
.bottom3 {
    background-image: url(../images/top.png), linear-gradient(rgb(243 243 243), rgb(243 243 243));
    height: 80px;
    background-position-x: center;
}
/*.number { color: darkorange; }*/
.boolean { color: red; }
.null { color: magenta; }
.key { color: #94366a; }
.code-header {
    position: fixed;
    height: 29px;
    top: 0px;
    width: 100%;
    background: #dcdcdc;
    border-bottom: solid 2px #b3b2b2;
}
.code-label {
    border: solid #b3b2b2;
    border-radius: 5px 5px 0 0;
    width: fit-content;
    padding: 5px 10px;
    border-bottom: none;
    font-size: 12px;
    background: white;
    margin: 2px 0 0 2px;
    color: #3e3e3e;
    z-index: 1000;
    position: relative;
    top: 1px;
}
pre {
    background-color: #fff;
    overflow: auto;
    margin: 35px 0 1em;
    padding: 0.5em 1em;
    font: normal normal 12px/14px "Courier New",Courier,Monospace;
    /*border-top: solid 1px #303030;*/
    overflow-y: scroll;
    color: #4e36c2
}
pre code,
pre .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Courier New",Courier,Monospace;
  color:black;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}
.instructions {
    position: absolute;
    right: 10px;
    font-size: 11px;
    top: 6px;
    text-transform: uppercase;
}
.json-container {
    position: absolute;
    top: 0px;
    width: 50%;
    background: #fff;
    height: 100vh;
    overflow-y: scroll;
    border-right: solid 2px #dcdcdc;
    display: none;
}
.code-container {
    position: absolute;
    top: 0px;
    width: calc(50% - 1px);
    background: #fff;
    height: calc(100vh - 0px);
    overflow-y: scroll;
    right: 0;
    display: none;
}
.code {
    z-index: 100;
    width: 50%;
    position: absolute;
    margin: 10px;
    border: 0;
}
.corey-container {
    position: absolute;
    text-align: center;
    width: 100%;
}
.conference-presentation {
    color: rgba(255, 255, 255, 0.5);
    border: solid 2px rgba(255, 255, 255, 0.51);
    border-radius: 10px;
    padding: 5px;
    background: hsla(0, 0%, 0%, 0.19);
    position: absolute;
    right: 10px;
    margin-top: 10px;
    font-size: 12px;
    transition: ease-in-out 1s;
}
.conference-presentation:hover {
    color: rgba(255, 255, 255, 1);
    border: solid 2px rgba(255, 255, 255, 1);

  
}
.corey {
    width: 80px;
    height: inherit;
    border-radius: 100%;
          -webkit-animation: solid-background 60s cubic-bezier(1,0,0,1) infinite;
  animation: solid-background 60s cubic-bezier(1,0,0,1) infinite;
  display: none;
}
.menu-text {
    position: relative;
    /*top: -50px;*/
}
header {
    width: 100%;
    height: 50px;
    background: #303030;
}
.timeline-label li {
    margin-left: 20px;
    margin-bottom: 10px;
    list-style: circle;
}
.menu-container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}
header a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.59);
    line-height: 50px;
    margin: 20px;
}
video#bgvid, iframe { 
    position: fixed;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  /*background: url(../images/Slide-Show.jpg) no-repeat;*/
    background-size: cover; 
}
video#bgvid{ 
    left: 50%;
}
iframe { 
    left: 50%;
}
.front-page-banner {
    /* background-image: linear-gradient( rgba(40, 148, 126, 0.8), rgba(42, 100, 88, 0.8) ), url(../images/front-banner.jpg); */
    height: 94.9vh;
    background-attachment: fixed;
    /*background: rgba(67, 136, 152, 0.64);*/
      -webkit-animation: background 60s cubic-bezier(1,0,0,1) infinite;
  animation: background 60s cubic-bezier(1,0,0,1) infinite;
}
.front-page-banner-content {
    margin: 0 auto;
    width: 500px;
    padding-top: 39vh;
}
.front-page-banner-content h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    color: white;
    font-size: 60px;
    text-shadow: 3px 3px #14433a;
}
.front-page-banner-content h2 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: 23px;
    text-shadow: 1px 1px #14433a;
}
.banner-cta {
    color: white;
    text-align:center;
}
.banner-cta a {
    text-decoration: none;
    cursor: help;
    border-bottom: 1px dotted;
    color:inherit;
}
.see-more {
    text-align: center;
    color: white;
    border: solid 1px white;
    padding: 12px;
    width: 94px;
    position: absolute;
    bottom: 16px;
    font-weight: 300;
    font-size: 14px;
    left: 46.5%;
}
#skills-top {
    background: rgba(67, 136, 152, 0.64);
        display: -webkit-box;
}
#skills-bottom {
    background: rgb(67, 136, 152);
        display: -webkit-box;
}
#skills-bottom2 {
    background: #F3F3F3;
        display: -webkit-box;
}
#skills-bottom3 {
    background: #F3F3F3;
    border-bottom: solid 5px white;
        display: -webkit-box;
}
.skills-parent {
    background:#303030;
    padding: 10px;
    color: white;
    padding-bottom: 50px;
}
.skills-container {
    margin: 0 auto;
    width: 85%;
    text-align: center;
}
.skills-container h1 {
    font-weight: 400;
    color: #303030;
    font-size: 24px;
}
#white {
    color:white;
}
.gallery-holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.skills-container ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
        -webkit-transition: all 1s;
        transition: all 1s;
        flex-wrap: wrap;
}
.skills {
    display: -webkit-inline-box;
    width: calc(29% - 38px);
    background: white;
    border: solid 1px #d2d2d2;
    padding: 28px;
    margin: 10px;

}
.hide {
    opacity:0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    left:-100%;
}
.show {
    opacity:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    left:0;
}
.skills-detail h2 {
    font-weight: 500;
    color: #2b2b2b;
    font-size: 16px;
    text-transform: uppercase;
    border-bottom: dotted 2px gray;
    padding-bottom: 10px;
    width: 75%;
    margin: 10px auto;
}
.skills-cta {
    width: 36%;
    margin: 23px auto;
    font-size: 18px;
    font-weight: 300;
}
.skills-detail img {
    width: initial;
    height: 100px;
    filter: grayscale(1);
}
.skill-intro {
    font-size: 18px;
    text-align: left;
    font-weight: 500;
    margin-bottom: 23px;
    color: #323232;
}
.skills-detail {
    width: 100%;
}
.skill-explained {
    text-align: left;
    color: #717171;
}
#skills2 {
    width: 75%;
    margin: 0 auto;
}
#portfolio {
    /*background: #438898;*/
       -webkit-animation: solid-background 60s cubic-bezier(1,0,0,1) infinite;
  animation: solid-background 60s cubic-bezier(1,0,0,1) infinite;
    padding-bottom: 50px;
}
#portfolio .skills {
    border: solid 3px white;
}
.portfolio-item {
    display: -webkit-inline-box;
    width: 33%;
    padding: 28px;
    margin: 10px;
    cursor: pointer;
    border-bottom: solid 44px white!important;
    min-height: 133px;
    cursor: pointer;
}
.portfolio-item2 {
    display: -webkit-inline-box;
    width: 33%;
    padding: 28px;
    margin: 10px;
    cursor: pointer;
    border-bottom: solid 44px white!important;
    min-height: 143px;
    cursor: pointer;
}
#code {
    color: #4caf50;
    background: #212121;
    padding: 5px;
    border-radius: 6px;
    padding-right: 8px;
    border: solid 1px #636262;
}
/*.portfolio-item:nth-child(odd) {
    width: 50%!important;
}
.portfolio-item:nth-child(even) {
    width: 30%!important;
}*/
.portfolio-description {
    color: gray;
    position: relative;
    bottom: -73px;
    padding: 8px;
    text-align: left;
    width: inherit;
    font-size: 19px;
    display: flex;
    left: -28px;
}
.portfolio-description2 {
    color: gray;
    position: relative;
    bottom: -141px;
    padding: 8px;
    text-align: left;
    width: inherit;
    font-size: 19px;
    display: flex;
    left: -28px;
}
.portfolio-description div {
    color: gray;
    right: -25px;
    position: absolute;
    font-size: 36px;
    font-weight: 300;
    line-height: 0px;
    top: 25px;
}
.portfolio-item h2 {
    width: 100%;
    border: none;
    text-align: left;
}
.portfolio-item img {
    top: 54px;
    position: relative;
    height: inherit;
    height: auto;
    max-height: 86%;
}
.read-more {
    display: none;
    width: 118px;
    background: #254c54;
    position: relative;
    top: 102px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 3px 3px #ffffff;
    margin: 0 auto;
    color: white;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#twitter {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/twitter.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/twitter.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
    
}

#twitter:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#vat {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/vat.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/vat.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 30%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
    
}
#aall {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/aall.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/aall.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 30%;
    background-size: cover;
    border: solid;
    background-position-y: 216px;
}
#ilta {
        background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/ilta.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/ilta.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 30%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
}
#cpa {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/cpa1.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/cpa1.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-y: 216px;
}
#cpa2 {
        background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/cpa2.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/cpa2.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
}
#fitc2 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/fitc3.jpeg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/fitc3.jpeg);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-y: 216px;
}
#fitc {
        background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/webunleased.jpeg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/webunleased.jpeg);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 30%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
}
#fluxible {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/fluxible.jpeg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/fluxible.jpeg);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-y: 269px;
}
#vat:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#ev {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/ev.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/ev.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 30%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
    
}

#ev:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#conestoga {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/conestoga.png);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/conestoga.png);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 60%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
    
}

#conestoga:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p1 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea3.jpg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea3.jpg);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    width: 30%;
    background-size: cover;
    border: solid;
    background-position-x: 0px;
    
}

#p1:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p2 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/banner4.jpg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/banner4.jpg);
    background-position: center;
    BACKGROUND-SIZE: 103%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-y: -73px;
}
#p2:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p3 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.20), rgba(0,0,0,0.20) ),url(../images/idea6.jpg);
    background-image: linear-gradient( rgba(0,0,0,0.20), rgba(0,0,0,0.20) ),url(../images/idea6.jpg);
    background-position-x: -94%;
    background-position-y: CENTER;
    BACKGROUND-SIZE: 226%;
    width: 55%;
    background-size: cover;
    border: solid;
    background-position-y: -78px;
}

#p3:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p4 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea7.jpg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea7.jpg);
    background-position-x: center;
    background-position-y: 88%;
    BACKGROUND-SIZE: 116%;
        width: 30%;
        background-size: cover;
    border: solid;
}

#p4:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p5 {
    background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0.11), rgba(0,0,0,.11) ),url(../images/idea5.jpg);
    background-image: linear-gradient( rgba(0, 0, 0, 0.11), rgba(0,0,0,.11) ),url(../images/idea5.jpg);
    background-position: center;
    BACKGROUND-SIZE: 126%;
    background-size: cover;
    border: solid;
}

#p5:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p6 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea4.jpg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea4.jpg);
    background-position-x: 33%;
    background-position-y: CENTER;
    BACKGROUND-SIZE: 172%;
    width: 60%;
    background-size: cover;
    border: solid;
    background-position-y: -62px;
    background-position-x: 0px;
}
#p6:hover .read-more { 
opacity:1; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#p7 {
    background-image: -webkit-linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea3.jpg);
    background-image: linear-gradient( rgba(0,0,0,0.50), rgba(0,0,0,0.50) ),url(../images/idea3.jpg);
    background-position: center;
    BACKGROUND-SIZE: 100%;
    BACKGROUND-REPEAT: no-repeat;
   
    width: 60%;
}
#p8 {
    background:url(../images/1sacramento-webdesign_collage.jpg);
    background-position: center;
    BACKGROUND-SIZE: 126%;
}
#history {
    width:60%;
}
.timeline-label {
    box-shadow: 3px 3px rgba(48, 48, 48, 0.16);
    border-radius: 10px;
}
#resume-section {
    padding-top: 12vh;
    padding-bottom: 13vh;
    background: rgb(255, 255, 255);
    width: 100%;
}

.resume {
    border: solid 1px white;
    margin: 3em auto;
    font-size: 25px;
    width: 350px;
    padding: 20px;
    cursor: -webkit-grab;
    background: #438898;
    color: white;
}
h1#resume {
    font-size: 40px;
}
#resume-text{
    font-size: 30px;
    width:100%;
    color:gray;
    
}
footer {
    width: 100%;
    BACKGROUND: #303030;
    /*display: none;*/
} 
.footer-content {
    color: silver;
    text-align: center;
    font-size: 12px;
    padding: 0 10px 10px 10px;
}
.social div {
    width: 15px;
    height: 15px;
    background-size: contain;
    filter: invert(.6);
    margin: 10px;
    cursor: pointer;
}
.social {
    display: flex;
    margin: 0 auto;
    width: max-content;
}
/* Portfolio CSS */
.intro-container {
    border: solid 1px #d6d6d6;
}
.intro {
    display: -webkit-flex;
display: flex;
    width: 1040px;
    margin: 0 auto;
}
.intro li {
    width: 50%;
}
.introduction {
    margin-top: 15%;
}
.introduction li {
    width: 95%;
}
.headline {
    font-size: 48px;
    font-weight: 300;
    border-bottom: dotted 1px #c7c7c7;
    padding-bottom: 10px;
}
.details {
    font-size: 22px;
    padding-top: 11px;
    font-weight: 300;
    display: flex;
}
.details div {
    position: relative;
    text-align: right;
    width: 100%;
    right: 0!important;
}
#what-i-did {
    position: relative;
    width: 100%;
    text-align: left;
}
.description {
    padding-top: 15px;
    font-size: 19px;
    color: #464646;
    font-weight: 300;
}
.intro-visual img {
    width: 87%;
    height: inherit;
    position: relative;
    top: 18px;
    z-index: -5;
}
#esight-visual {
    top: -11px;
    position: relative;
}
#qbord-visual img {
    top: 7px;
}
.gallery-container {
    background: #fafafa;
    padding-bottom: 50px;
    border-bottom: solid 1px #d6d6d6;
}
.gallery {
    display: -webkit-flex;
    display: flex;
    width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.gallery img {
    width: 82%;
    height: inherit;
    margin-top: 84px;
    webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    border: solid 1px #d4d4d4;

}
#finlife img {
    width: 95%!important;
}
.gallery-container ul{
    margin: 0 auto;
    width: 1020px!important;
}

.gallery-container .portfolio-item {
    width: 95%!important;
    border: solid 5px white!important;
    box-shadow: 0px 0px 4px black;
    border-bottom: solid 44px white!important;
        background-position: center!Important;
}
.gallery-holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#view-more {
    border-top: solid 1px #d6d6d6;
}
#view-more img {
    width: initial;
    height: 52PX;
}
#cta-image {
    WIDTH: inherit;
    HEIGHT: inherit;
}
.challenge {
    padding-top: 15px;
    font-size: 30px;
    color: #464646;
    font-weight: 300;
}
.challenge-container {
    width: 845px;
    margin: 0 auto;
    padding-top: 40px;
}
.tablet-view {
    /* width: 84%; */
    overflow: hidden;
    text-align: center;
    background: white;
    border-bottom: solid 1px #d6d6d6;
    padding-top: 50px;
    padding-bottom: 50px;
    background: url(../images/qbord/collage.jpg);
    height: 539px;
    background-repeat: no-repeat;
    background-position: center;
}
#esight-view {
    /* width: 84%; */
    background: url(../images/esight/tablet.png);
        background-repeat: no-repeat;
    background-position: center;
}
#survey-go-demo {
    background: url(../images/survey-go/demo%20container.png)!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}
#advisorlink-demo {
    background: url(../images/advisorlink/demo%20container.png)!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}
#finlife-demo {
    background: url(../images/computer%20frame.png)!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}
#survey-go-demo video {
    width: 704px;
    top: 2.6%;
    position: relative;
}
#advisorlink-demo video {
    width: 692px;
    top: 10px;
    position: relative;
    left: 1px;
}
#finlife-demo video {
    width: 692px;
    top: 10px;
    position: relative;
    left: 1px;
}
.colour-scheme {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.ex {
    width: 100%;
    text-align: center;
    padding-bottom: 57px;
}
.img-ads {
    text-align: right;
}
.gallery #ads {
    width: 82%;
    height: inherit;
    margin-top: 84px;
    webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
   border: none;
}
#arrow {
    text-align: center;
    width:100%!important;
}
#survey-go-intro-visual {
    top: 50px;
    position: relative;
    width: 90%;
    text-align: right;
}

@media screen and (max-width: 1378px) {
.skills-container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
}
@media screen and (max-width: 1024px) {
.skills-container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.see-more {

    left: 43.5%;
}
.portfolio-item, .portfolio-item2 {
    width: 75%!important;   
}
.skills-container ul, portfolio-item ul {
    display: block;
    width: 100%;
}
.front-page-banner-content {
    padding-top: 35vh;
}
.intro {
    width: 95%;
}
.gallery {
    width: 95%;
    text-align: center;
}
.intro-visual img {
    width: 87%;
    height: inherit;
    position: relative;
    top: 21px;
    right: -67px;
}

.tablet-view {
    background-position-x: -17px;
}
.img-ads {
    text-align: center;
}
#cta-image {
    width: 100%;
    height: inherit;
}
.gallery-container .portfolio-item {
    width: 25%!important;
    margin: 8px;
}
#qbord-visual img {
    top: 21px;
}
#survey-go-visual img {
    top: 44px;
}
#esight-visual {
    top: 21px;
}

@media screen and (max-width: 768px) {
    .gallery-holder {
    display: initial;
}
header {
    /* display: none; */
    height: fit-content;
    /*width: fit-content;*/
    position: absolute;
    right: 0;
        /*background: #303030a6;*/
}
.menu-container {
    /*display: grid;*/
    width: fit-content;
}

#code {
    display: none;
}
    .gallery-holder {
    display: initial;
}
    #esight-visual {
    top: 7px;
    }
#qbord-visual img {
    top: 7px;
}
#survey-go-visual img {
    top: 7px;
}
.gallery-container .portfolio-item {
    width: 88%!important;
    MARGIN: 10px 0 0 14px;
    overflow: hidden;
}
.gallery-container ul {
    width: 100%!important;
    display: block;
}

#arrow {
    width: 8%!important;
}   
.colour-scheme img {
    width: 95%;
}   
.portfolio-item, .portfolio-item2 {
    width: 75%!important;   
}
.skills-container ul, portfolio-item ul{
    display: block;
    width: 100%;
}
.skills {
    width: 75%!important;
}
#skills2 {
    width: 100%;
}
.skills-cta {
    width: 78%;
}
#resume-section {

    zoom: 74%;
}
.front-page-banner-content {
    width: 85%;
    padding-top: 35vh;
}
.intro {
    display: list-item;
    list-style: none;
}
.intro li {
    width: 95%;
    margin: 0 auto;
}
.headline {
    font-size: 28px;
}
.details {
    font-size: 20px;
}
.description {
    font-size: 17px;
}
.intro-visual img {
    top: 7px;
    right: -25px;
    width: 93%;
}

.challenge-container {
    width: 87%;
    margin: 0 auto;
}
.challenge-container img {
    width: 100%;
    height: inherit;
}
}
@media screen and (max-width: 500px) {
#survey-go-visual img {
    top: 6px;
}   
#qbord-visual img {
    top: 6px!important;
}
    .intro-visual img {
    top: 7px;
    width: 99%;
    right: 0;
}
.gallery-container .portfolio-item {
    width: 75%!important;
}
    .gallery {
    display: list-item;
}
#p1 {
    background-position-x: center;
}
#p2 {
    background-position-y: center;
}
#p3 {
    background-position-y: center;
    background-position-x: center;
}   
#p6 {
    background-position-y: center;
    background-position-x: center;
}

#arrow {
    width: 21%!important;
}
/*.portfolio-item img {
    width: 105%;
    height: inherit;
}*/
.menu-container {
    text-align: center;
    width: 100%;
}
header a {
    margin-left: 20px!important;
    margin-right: 28px!important;
}
#hist {
    margin-left:0;
}
.front-page-banner-content {
    width: 85%;
    padding-top: 20vh;
}
.see-more {
    display:none;
}
.timeline .timeline-event .timeline-icon {
    height: 41px!important;
}
}
@media screen and (max-width: 320px) {
.menu-container {
    font-size: 14px;
}
}
@media screen and (max-width: 320px) {
.header a {
    margin-left: 4px!important;
    margin-right: 4px!important;
}
}
.skills {
    width: 40%;
}
ul, ol {
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    padding: 0;
    list-style: none;
}
.button {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 16.8px;
    line-height: 1.05rem;
    padding: 15px 25px;
    padding: 0.9375rem 1.5625rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #fff;
    cursor: pointer;
    border: 2px solid #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    font-weight: 500
}

.button:hover,
.button:focus {
    outline: none;
    background: transparent;
    border: 2px solid #fff;
    color: #fff
}

.button--red {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 16.8px;
    line-height: 1.05rem;
    padding: 15px 25px;
    padding: 0.9375rem 1.5625rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #C32F34;
    cursor: pointer;
    border: 2px solid #C32F34;
    border: 2px solid rgba(195, 47, 52, 0.5);
    background: transparent;
    font-weight: 500
}

.button--red:hover,
.button--red:focus {
    outline: none;
    background: transparent;
    border: 2px solid #C32F34;
    color: #C32F34
}

abbr {
    border-bottom: 1px dotted #438898;
    cursor: help;
}

em,
strong,
b {
    font-weight: 700;
    font-style: normal;
    color: #272727
}

a {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #C32F34;
    text-decoration: none
}

a:hover, a:focus {
    color: #226e5f;
}
mark {
    background: transparent;
    color: inherit
}

small {
    font-size: 11px;
    font-size: 0.6875rem;
    line-height: 15.4px;
    line-height: 0.9625rem
}

.overlay {
    background: #C32F34;
    background: rgba(195, 47, 52, 0.8)
}

.icon {
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
    background-color: transparent;
    background-repeat: no-repeat;
    /*background-image: url("svg/sprite.svg");*/
    background-position: 0 0;
    vertical-align: middle
}

.icon.icon-menu {
    background-position: -800px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-mark {
    background-position: 0 0;
    width: 50px;
    height: 30px
}

.icon.icon-html5 {
    background-position: 0 -200px;
    width: 70px;
    height: 80px
}

.icon.icon-wordpress {
    background-position: -200px -200px;
    width: 80px;
    height: 80px
}

.icon.icon-mobile {
    background-position: -400px -200px;
    width: 46px;
    height: 80px
}

.icon.icon-timeline-mobile {
    background-position: 0 -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-parallel {
    background-position: -100px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-standards {
    background-position: -200px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-design {
    background-position: -300px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-pencil {
    background-position: -400px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-magnifier {
    background-position: -500px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-brackets {
    background-position: -600px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-timeline-hat {
    background-position: -700px -400px;
    width: 30px;
    height: 30px
}

.icon.icon-social-twitter {
    background-position: 0 -600px;
    width: 30px;
    height: 30px
}

.icon.icon-social-linkedin {
    background-position: -100px -600px;
    width: 30px;
    height: 30px
}

.icon.icon-social-github {
    background-position: -200px -600px;
    width: 30px;
    height: 30px
}

main {
    height: 100%;
    width: 100%;
    position: absolute
}

main:after {
    clear: both;
    content: "";
    display: table
}

.footer {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-top: 2.5rem;
    padding-bottom: 20px;
    padding-bottom: 1.25rem
}

.footer:after {
    clear: both;
    content: "";
    display: table
}
}



@media screen and (min-width: 768px) {
    .item.skill {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 32.02614%;
        margin-bottom: 3.75rem;
        clear: none;
    }
    .item.skill:last-child {
        margin-right: 0
    }
    .item.skill:nth-child(3n) {
        margin-right: 0
    }
    .item.skill:nth-child(3n+1) {
        clear: left
    }
}

.item.work {
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    overflow: hidden
}

@media screen and (min-width: 640px) {
    .item.work {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 49.01961%;
        clear: none;
    }
    .item.work:last-child {
        margin-right: 0
    }
    .item.work:nth-child(2n) {
        margin-right: 0
    }
    .item.work:nth-child(2n+1) {
        clear: left
    }
}

@media screen and (min-width: 768px) {
    .item.work {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 32.02614%;
    }
    .item.work:last-child {
        margin-right: 0
    }
    .item.work:nth-child(2n) {
        margin-right: 1.96078%
    }
    .item.work:nth-child(2n+1) {
        clear: none
    }
    .item.work:nth-child(3n) {
        margin-right: 0
    }
    .item.work:nth-child(3n+1) {
        clear: left
    }
}

.item.work p {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 19.6px;
    line-height: 1.225rem
}

.item.work a {
    height: 100%;
    width: 100%;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
    float: left;
    position: relative;
    z-index: 10;
    overflow: hidden
}

.item.work a:hover .overlay {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.item.work a:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.item.work a .overlay {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    height: 100%;
    width: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    z-index: 50
}

.item.work a .overlay .button {
    margin: -26px 0 0 -71px;
    margin: -1.625rem 0 0 -4.4375rem;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%
}

.item.work img {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    filter: url("data:image/svg+xml;utf8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'><filter%20id=\'grayscale\'><feColorMatrix%20type=\'matrix\'%20values=\'0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
    filter: grayscale(100%);
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto
}

.section {
    padding: 0 15px;
    padding: 0 0.9375rem;
    position: relative;
    background: #ffffff;
    overflow: hidden
}

.section:nth-child(1) {
    z-index: 10
}

.section:nth-child(2) {
    z-index: 9
}

.section:nth-child(3) {
    z-index: 8
}

.section:nth-child(4) {
    z-index: 7
}

.section:nth-child(5) {
    z-index: 6
}

.section:nth-child(6) {
    z-index: 5
}

.section:nth-child(7) {
    z-index: 4
}

.section:nth-child(8) {
    z-index: 3
}

.section:nth-child(9) {
    z-index: 0
}

.section:nth-child(10) {
    z-index: 1
}

.section:after {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 50%;
    content: " ";
    height: 0;
    width: 0;
    pointer-events: none;
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 20px;
    margin-left: -20px
}

.section--grey {
    background: #F3F3F3
}

.section--grey:after {
    border-top-color: #F3F3F3
}

.section--white {
    background: #fff
}

.section--white:after {
    border-top-color: #fff
}

.section--dark {
    background: #272727
}

.section--dark:after {
    display: none
}

.section__resume .download {
    float: left;
    display: block;
    margin-right: 1.96078%;
    width: 100%;
    margin-bottom: 50px;
    margin-bottom: 3.125rem
}

.section__resume .download:last-child {
    margin-right: 0
}

@media screen and (min-width: 768px) {
    .section__resume .download {
        margin-bottom: 5rem;
    }
}

.section.quote {
    padding: 0
}

.section.quote:after {
    display: none
}

.section.quote .overlay {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 10
}

.section.quote .overlay blockquote {
    float: left;
    display: block;
    margin-right: 1.96078%;
    width: 83.00654%;
    margin-left: 8.49673%;
    padding-top: 40px;
    padding-top: 2.5rem;
    padding-bottom: 40px;
    padding-bottom: 2.5rem;
    color: #fff
}

.section.quote .overlay blockquote:last-child {
    margin-right: 0
}

@media screen and (min-width: 768px) {
    .section.quote .overlay blockquote {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 66.01307%;
        margin-left: 16.99346%;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .section.quote .overlay blockquote:last-child {
        margin-right: 0
    }
}

.section.quote .overlay blockquote p {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 30.8px;
    line-height: 1.925rem;
    margin-bottom: 40px;
    margin-bottom: 2.5rem
}

@media screen and (min-width: 768px) {
    .section.quote .overlay blockquote p {
        font-size: 1.875rem;
        line-height: 2.625rem;
    }
}

@media screen and (min-width: 992px) {
    .section.quote .overlay blockquote p {
        font-size: 2.1875rem;
        line-height: 3.0625rem;
    }
}

.section.quote .overlay blockquote footer p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 22.4px;
    line-height: 1.4rem;
    margin: 0
}

.section.quote .overlay blockquote footer p em {
    color: inherit
}

.section.quote .overlay blockquote footer p a {
    color: inherit
}

.section.feature {
    height: 100%;
    width: 100%;
    padding: 0;
    display: table;
    position: relative;
    z-index: 100
}

.section.feature:after {
    display: none
}

.section.feature .underlay {
    position: relative;
    z-index: 5;
    width: 100%;
    overflow: hidden
}

.section.feature .overlay {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 10
}

.section.feature .overlay header {
    padding: 0px 30px;
    padding: 0px 1.875rem;
    margin-top: -80px
}

.section.feature .overlay header .mark {
    padding-bottom: 25px;
    padding-bottom: 1.5625rem
}

.section.feature .overlay header h1 {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 30.8px;
    line-height: 1.925rem;
    margin: 0;
    color: #fff;
    font-weight: 300
}

.section.feature .overlay .go {
    padding: 0 0 80px;
    padding: 0 0 5rem;
    width: 100%;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0
}

.section#section-work {
    padding-bottom: 25px;
    padding-bottom: 1.5625rem
}

@media screen and (min-width: 768px) {
    .section#section-work {
        padding-bottom: 3.4375rem;
    }
}

.section article {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto
}

.section article:after {
    clear: both;
    content: "";
    display: table
}

.section article header {
    float: left;
    display: block;
    margin-right: 1.96078%;
    width: 100%;
    padding-top: 40px;
    padding-top: 2.5rem;
    padding-bottom: 40px;
    padding-bottom: 2.5rem
}

.section article header:last-child {
    margin-right: 0
}

@media screen and (min-width: 768px) {
    .section article header {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 66.01307%;
        margin-left: 16.99346%;
        padding-top: 4.6875rem;
        padding-bottom: 4.6875rem;
    }
    .section article header:last-child {
        margin-right: 0
    }
}

@media screen and (min-width: 992px) {
    .section article header {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 49.01961%;
        margin-left: 25.4902%;
    }
    .section article header:last-child {
        margin-right: 0
    }
}

@media screen and (min-width: 768px) {
    .section article header h2 {
        font-size: 2.1875rem;
        line-height: 3.0625rem;
        font-weight: 300;
    }
}

.section article header p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 22.4px;
    line-height: 1.4rem;
    margin: 0
}

@media screen and (min-width: 768px) {
    .section article header p {
        font-size: 1.125rem;
        line-height: 1.575rem;
    }
}

@media screen and (min-width: 992px) {
    .section article header p {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.statistics {
    float: left;
    display: block;
    margin-right: 1.96078%;
    width: 100%;
    padding-bottom: 30px;
    padding-bottom: 1.875rem
}

.statistics:last-child {
    margin-right: 0
}

@media screen and (min-width: 768px) {
    .statistics {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 74.5098%;
        margin-left: 12.7451%;
        padding-bottom: 3.4375rem;
    }
    .statistics:last-child {
        margin-right: 0
    }
}

.statistics .chart {
    float: left;
    display: block;
    margin-right: 1.96078%;
    width: 100%
}

.statistics .chart:last-child {
    margin-right: 0
}

@media screen and (min-width: 768px) {
    .statistics .chart {
        float: left;
        display: block;
        margin-right: 1.96078%;
        width: 32.02614%;
    }
    .statistics .chart:last-child {
        margin-right: 0
    }
}

.statistics .chart div+p {
    margin-bottom: 10px;
    margin-bottom: 0.625rem
}

.statistics .stat {
    display: inline-block;
    position: relative;
    z-index: 1
}

.statistics .stat .circle-text {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 28px;
    line-height: 1.75rem;
    font-weight: 300;
    position: absolute;
    z-index: 2;
    width: 100%
}

.timeline {
    float: left;
    display: block;
    margin-right: 1.96078%;
    width: 100%;
    padding: 0;
    margin: 0 0 88px;
    margin: 0 0 5.5rem;
    position: relative;
    z-index: 10;
    list-style: none
}

.timeline:after {
    clear: both;
    content: "";
    display: table
}

.timeline:last-child {
    margin-right: 0
}

.timeline:before,
.timeline:after {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 30.8px;
    line-height: 1.925rem;
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    display: block;
    width: auto;
    color: #000;
    margin: 0 auto;
    background: #f3f3f3
}

@media screen and (min-width: 992px) {
    .timeline:before,
    .timeline:after {
        text-align: center;
    }
}

.timeline:before {
    padding: 0 0 30px;
    padding: 0 0 1.875rem;
    content: "Today"
}

.timeline:after {
    padding: 30px 0 0;
    padding: 1.875rem 0 0;
    content: "2006"
}

@media screen and (min-width: 768px) {
    .timeline .timeline-line {
        margin: 0 0 0 -0.125rem;
        padding: 0;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 1.5625rem;
        width: 4px;
        height: 100%;
        background: #fff;
    }
}

@media screen and (min-width: 992px) {
    .timeline .timeline-line {
        left: 50%;
    }
}

.timeline:before,
.timeline:after,
.timeline .timeline-line {
    display: none
}

@media screen and (min-width: 768px) {
    .timeline:before,
    .timeline:after,
    .timeline .timeline-line {
        display: block;
    }
}

.timeline .timeline-event {
    margin: 0 0 15px;
    margin: 0 0 0.9375rem;
    clear: both;
    width: 100%;
    padding: 0;
    background: transparent;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: -webkit-transform 0.2s ease-out, opacity 0.3s ease-out;
    -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.2s ease-out;
    transition: opacity 0.3s ease-out, -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out, opacity 0.3s ease-out;
    transition: transform 0.2s ease-out, opacity 0.3s ease-out, -webkit-transform 0.2s ease-out
}

.timeline .timeline-event.show {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateX(0px) !important;
    transform: translateX(0px) !important
}

@media screen and (min-width: 768px) {
    .timeline .timeline-event {
        position: relative;
        z-index: 10;
    }
}

@media screen and (min-width: 992px) {
    .timeline .timeline-event {
        width: 50%;
    }
}

.timeline .timeline-event .timeline-label {
    padding: 20px 25px 5px;
    padding: 1.25rem 1.5625rem 0.3125rem;
    position: relative;
    background: #fff
}

.timeline .timeline-event .timeline-label:after {
    height: 0;
    width: 0;
    content: " ";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    border-width: 10px;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    left: 15px;
    left: 0.9375rem;
    top: -20px;
    top: -1.25rem
}
    #topcontrol img {
    width: 20px;
    cursor: pointer;
    z-index: 10000000000;
    position: relative;
    display: none;
}

@media screen and (min-width: 768px) {
    .timeline .timeline-event .timeline-label:after {
        margin: -0.625rem 0 0;
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #fff;
        left: -1.25rem;
        top: 50%;
    }
    iframe {
        height: 100vh;
    }

}

@media screen and (min-width: 768px) {
    .timeline .timeline-event .timeline-label {
        margin: 0 0 0 4.0625rem;
    }
}

@media screen and (min-width: 992px) {
    .timeline .timeline-event .timeline-label {
        margin: 0 3.125rem 0 0;
    }
}

.timeline .timeline-event .timeline-label h3 {
    margin: 0
}

.timeline .timeline-event:nth-child(odd) {
    -webkit-transform: translateX(50px);
    transform: translateX(50px)
}

@media screen and (min-width: 992px) {
    .timeline .timeline-event:nth-child(odd) {
        margin: 0 0 0 50%;
    }
}

@media screen and (min-width: 992px) {
    .timeline .timeline-event:nth-child(odd) .timeline-label {
    margin: 0 0 0 3.125rem;
    margin-bottom: 10px;
}
}

@media screen and (min-width: 992px) {
    .timeline .timeline-event:nth-child(odd) .timeline-icon {
    left: -2.1rem;
}
}
.timeline-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.timeline .timeline-event:nth-child(even) {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px)
}

@media screen and (min-width: 992px) {
    .timeline .timeline-event:nth-child(even) .timeline-label:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        left: 100%
    }
}

.timeline .timeline-event .timeline-icon {
    margin: 0 0 20px;
    margin: 0 0 1.25rem;
    padding: 5px 0;
    padding: 0.3125rem 0;
    height: 50px;
    width: 50px;
    text-align: center;
    border: 4px solid #fff;
    border-radius: 50%;
    /*background: #fff;*/
           /*-webkit-animation: solid-background 60s cubic-bezier(1,0,0,1) infinite;*/
  /*animation: solid-background 60s cubic-bezier(1,0,0,1) infinite;*/
}
@media screen and (min-width: 768px) {
    .timeline .timeline-event .timeline-icon {
        margin: -1.5625rem 0 0;
        position: absolute;
        z-index: 20;
        left: 0;
        top: 50%;
    }
    
}

@media screen and (min-width: 992px) {
   .timeline .timeline-event .timeline-icon {
    margin: -1.875rem 0 0;
    padding: 0.6875rem 0;
    height: 38px;
    width: 60px;
    right: -30px;
    left: auto;
}
}
@media  (max-width: 768px) {
video#bgvid {
    right: 0;
    left: 0;
}
.conference-presentation {
    display: none;
}
}
.chatTile {
    position: fixed;
    right: 30px;
    bottom: 40px;
    border-radius: 10px;
    width: 60px;
    height: 60px;
    background: url(../images/corey.jpeg);
    box-shadow: 4px 4px 0px 0px #000000ab;
    background-size: 141%;
    background-position: 46% 29%;
    /* border: solid 4px #181818; */
}
.chatContainer {
    position: absolute;
    right: 30px;
    bottom: 99px;
    z-index: 10000000;
}

.chatMessage {
    position: fixed;
    width: 240px;
    right: 100px;
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 4px 4px;
    font-size: 13px;
    margin-top: -74px;
    bottom: 40px;
}

.chatIcon {
    position: fixed;
    width: 17px;
    height: 17px;
    background: #d20000;
    border-radius: 100%;
    text-align: center;
    color: white;
    /* font-weight: bold; */
    font-size: 13px;
    line-height: 17px;
    margin-top: -64px;
    margin-left: -12px;
    bottom: 90px;
}
.chatClose {
    position: fixed;
    background: #4a4a4a;
    width: 22px;
    height: 22px;
    right: 352px;
    margin-top: -88px;
    border-radius: 100%;
    color: white;
    text-align: center;
    line-height: 22px;
    font-weight: bolder;
    border: solid 2px #353535;
    font-family: inherit;
    cursor: pointer;
    bottom: 99px;
}
#close {
    background: #00acdc;
    font-size: 50px;
    text-align: center;
    line-height: 56px;
    color: white;
}
.dialogueContainer {
    width: 300px;
    height: 420px;
    background: white;
    margin-top: -495px;
    position: fixed;
    right: 30px;
    border-radius: 10px;
    overflow: scroll;
    box-shadow: 4px 4px black;
}

.messageHeader {
    width: inherit;
    height: 50px;
    background: #05acdc;
    position: fixed;
    z-index: 10;
    border-radius: 10px 10px 0 0;
    margin: 20p;
}
input {
    width: 276px;
    position: fixed;
    bottom: 110px;
    height: 32px;
    margin: 0px;
    border-radius: 10px;
    outline: none;
    /* border: solid 1px #c5c5c5; */
    background: #efefef;
    font-size: 12px;
    text-indent: 6px;
    z-index: 10000000;
    border: solid 10px white;
    box-shadow: 4px 4px black;
}
.personaIcon {
    background: url(../images/corey.jpeg);
    width: 38px;
    height: 38px;
    background-size: 143%;
    background-position: 50% 30%;
    border-radius: 100%;
    position: relative;
    left: 13px;
    top: 5px;
    border: solid 2px white;
}

.onlineStatus {
    width: 12px;
    height: 12px;
    position: absolute;
    background: green;
    border-radius: 100%;
    left: 44px;
    top: 28px;
    border: solid 2px white;
}

.personaName {
    position: absolute;
    top: 14px;
    left: 67px;
    color: white;
    font-size: 18px;
}
.chatDialogue {
    width: 198px;
    /* right: 100px; */
    background: #f4fafd;
    padding: 10px;
    border-radius: 10px;
    /* box-shadow: 4px 4px; */
    font-size: 13px;
    position: relative;
    left: 58px;
    top: -37px;
    height: max-content;
}
.messageContainer {
    height: -webkit-fill-available;
}
.reponseContainer {
    /* height: fit-content; */
    /* position: relative; */
    height: fit-content;
}
#response {
    margin-top: 10px;
    background: #efefef;
    width: fit-content;
    /* float: right; */
    left: -23px;
    width: 200px;
    right: 0;
    transform: translate(36%, 0);
}
.messageContainer {
    /* height: calc(100% + 50px); */
    /* padding-bottom: 150px; */
    height: max-content;
    margin-top: 56px;
}
#gptResponse {
    top: 0px;
    margin-top: -31px;
}
.typing {
    background: url(../images/typing.gif);
    width: 42px;
    height: 29px;
    background-size: contain;
    position: fixed;
    /* bottom: 31px; */
    /* left: 20px; */
    margin-left: 12px;
    bottom: 180px;
}