body, html {
            height: 100%;
            margin: 0;
            font: 400 15px/1.8 "Lato", sans-serif;
            color: #777;
        }

        .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4  {
            position: relative;
            opacity: 0.85;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .bgimg-1 {
             background-image: url('../images/bprint.jpg');
             min-height: 50%;
        }

        .bgimg-2 {
            background-image: url('../images/games.jpg');
            min-height: 600px;
        }

        .bgimg-3 {
             background-image: url('../images/bprint.jpg');
            min-height: 400px;
        }

        .bgimg-4 {
             background-image: url('../images/index.jpg');
            min-height: 400px;
        }

        .caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #000;
        }
                .captionTop {
            position: absolute;
            left: 0;
            top:10px;
            width: 100%;
            text-align: center;
            color: #000;
        }

            .caption span.border {
                background-color: #111;
                color: #fff;
                padding: 18px;
                font-size: 25px;
                letter-spacing: 10px;
            }

             .captionTop span.border {
                background-color: #111;
                margin-bottom:20px;
                color: #fff;
                padding: 18px;
                font-size: 25px;
                letter-spacing: 10px;
            }

        h3 {
            letter-spacing: 5px;
            text-transform: uppercase;
            font: 20px "Lato", sans-serif;
            color: #111;
        }

        /* Turn off parallax scrolling for tablets and phones */
        @media only screen and (max-device-width: 1024px) {
            .bgimg-1, .bgimg-2, .bgimg-3 {
                background-attachment: scroll;
            }
        }


.resumeIcon{
  height: 50px;
  width: auto;
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

#mainLogo{
    margin-top:55px;
    padding-top:115px;
    margin: 0px auto;
    width:20%
}

#contacts{ 
    padding-top:115px;
    margin: 0px auto;
    width:50%
}

#intro,#contact,#games {

    margin-top: 0px;
    text-align: center;

}

#introText{
    color:#fff;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  :not(:defined) > * {
    display: none;
  }
  
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
  }
  
  model-viewer {
    width: 500px;
    height: 400px;
    margin-left: auto;
    background-color: unset;
  }
  
  
  .progress-bar {
    display: block;
    width: 33%;
    height: 10%;
    max-height: 2%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 25px;
    box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .progress-bar.hide {
    visibility: hidden;
    transition: visibility 0.3s;
  }
  
  .update-bar {
    background-color: rgba(255, 255, 255, 0.9);
    width: 0%;
    height: 100%;
    border-radius: 25px;
    float: left;
    transition: width 0.3s;
  }
  
  #ar-button {
    background-image: url(ar_icon.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 12px 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 16px;
    padding: 0px 16px 0px 40px;
    font-family: Roboto Regular, Helvetica Neue, sans-serif;
    font-size: 14px;
    color:#4285f4;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    border: 1px solid #DADCE0;
  }
  
  #ar-button:active {
    background-color: #E8EAED;
  }
  
  #ar-button:focus {
    outline: none;
  }
  
  #ar-button:focus-visible {
    outline: 1px solid #4285f4;
  }
  
  @keyframes circle {
    from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
  }
  
  @keyframes elongate {
    from { transform: translateX(100px); }
    to   { transform: translateX(-100px); }
  }
  
  model-viewer > #ar-prompt {
    position: absolute;
    left: 50%;
    bottom: 60px;
    animation: elongate 2s infinite ease-in-out alternate;
    display: none;
  }
  
  model-viewer[ar-status="session-started"] > #ar-prompt {
    display: block;
  }
  
  model-viewer > #ar-prompt > img {
    animation: circle 4s linear infinite;
  }
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  a, a:visited {
    color: white;
}

p{
  color: #ffffff;
}
.bpImages{
  margin-bottom: 10px !important;
}