html, body{
  height: 100%;

}

body {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 1.0rem;
  line-height: 24px;
  color: #666;
  background-color: #fff;
  overflow-x: hidden;
  margin: 0;
}

*, :after, :before {
  box-sizing: border-box;
}

.app-page-container {
  overflow: hidden;
}

.border-wrapper {
  padding: 0 0rem 0rem;
}

.app-page-container {
  overflow: hidden;
}

.red-bg {
  background-color: red;
}

.blue-bg {
  background-color: blue;
}

.green-bg {
  background-color: green;
}

.potatoweb-color {
  color: #F8AD3A;
}

.potatoweb-bg {
  background-color: #F8AD3A;
}

header {
  margin: 0;
  z-index: 99;
  position: fixed;
  background-color: rgba(255,255,255,0);
  height: 75px;
  width: 100%;
}

.header-container {
  padding-left: 25px;
  padding-right: 25px;
  height: 100%;
}

.no-menu-items {
  display: none;
}

.header-margin {
  margin-top: 85px;
}

.logo-header {
  position: fixed;
  margin-top: 33px;
}

.logo-short {
  height: 45px;
  margin-top: -10px;
  margin-left:10px;
  margin-right:10px;

}

.top-nav {
  position: static;
  text-align: center;
  font-size: 1.0em;
  width: 100%;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0;
}

.contact-nav {
  position: fixed;
  top: 20px;
  right: 32px;
}

ul {
  margin: 1.5em 0;
  padding-left: 2em;
  list-style: none;
}

ul, ol {
  padding: 0;
  margin: 0 0 10px 25px;
}

.inline {
    list-style: none;
    display: inline-block;
}

.inline-social {
    list-style: none;
    display: inline-block;
    font-size: 1.5rem;
    padding-right: 10px;
    color: black;
}

.top-nav li {
  list-style: none;
  display: inline-block;
  position: relative;
  width: auto;
  margin: 0 !important;
  padding-top: 27px!important;
}

ul li {
  margin: .8em 0;
  padding: 0;
}

li {
  line-height: 20px;
}

.menu-item {
  padding-right: 20px;
  padding-left: 20px;
}

.menu-item-link {
  color: #222222;
    letter-spacing: 2px;
}

video {
  object-fit: cover;
  width:100%;
  height:100%;
  border: none;
}

#myVideo {
  object-fit: cover;
  width:100%;
  height:100%;
}

.container {
  margin-left: 10%;
  margin-right: 10%;
}

.btn-potatoweb {
  color: black;
  border: 1px solid #F8AD3A;
  background-color: white;
}

.btn-potatoweb-full-color {
  color: white;
  border: 1px solid #F8AD3A;
  background-color: #F8AD3A;
}

.vh-100 {
    height: 100vh;
}

.block_standard-marquee {
  height: calc(100vh - 8.5rem);
  color: #fff;
  font-size: 0;
}
.wide-gutter {
  margin: auto;
  padding-left: 11rem;
  padding-right: 11rem;
}
.block, .block.light {
  background: #fff;
  color: #323232;
}
.block {
  position: relative;
  overflow: hidden;
}

.cover-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

span.logo-2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: black  ;
}

strong {
  font-weight: 600;
}

.btn {
  border-radius: 0;
}

.light-grey-bg {
  background-color: #F6F8F8;
}

p {
  font-family: 'Karma', serif;
}

h1, h2, h3 {
  letter-spacing: 2px;
    color: black;
}

h2 {
  font-size: 2.0rem;
}

h3 {
  font-size: 1.3rem;
}

.p-30 {
  padding: 30px
}

.p-40 {
    padding: 40px
}

.pt-40 {
  padding-top: 40px
}

.pb-40 {
  padding-bottom: 40px
}

.mb-20 {
  margin-bottom: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-50 {
  margin-bottom: 50px;
}

.mt-30-percent {
  margin-top: 30%;
}

.hover-menu-container {
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
}


.btn-close {
    z-index: 9999999999999;
    position: fixed;
    top: 20px;
    right: 20px;
    color: black;
    background-color: transparent;
}

.text-white {
  color: white!important;
}

li.white a {
  color: white;
  font-weight: 500;
  letter-spacing: 2px;
}

hr.white {
  border-top: 1px solid rgba(255,255,255,1.0);
}

h2.potatoweb {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    font-weight: 300;
    font-size: 1.2em;
    margin-bottom: 50px;
}
.pl-40 {
    padding-left: 40px;
}

.mt-30 {
    margin-top: 30px;
}

.project-container {
    float: left;
    text-align: right;
    padding: 50px;
    position: relative;
    background-color: white;
    width: 100%;
    margin-bottom: 20px;
}

h3 {
    /*color: black;*/
    letter-spacing: 3px;
    font-size: 1.0rem;
    font-weight: 500;
}

.project-container h1 {
    font-weight: 700;
}

img.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vlog-1 {
    background-image: url("../images/sitesafe-public-bg-small.jpg");
    object-fit: cover;
}

.mt-100 {
    margin-top: 100px;
}

.text-center {
    text-align: center;
}

h4 {
    font-family: 'Karma', serif;
}

.karma {
    font-family: 'Karma', serif;
}

.italic {
    font-style: italic;
}

ol {
    list-style: none;
}

a:hover {
    text-decoration: none;
}

.light-grey-bg-gradient {
    background: linear-gradient(to right, #f2f2f2 , white);
}

.white-bg-gradient {
    background: linear-gradient(to left, white , #f2f2f2);
}

.white-bg {
    background-color: white;
}

.p-50 {
    padding: 50px;
}

.fixed-div {
    position: fixed;
    top: 15px;
    padding-top: 30px;
    height: 80px;
    width: 100%;
    background-color: white;
    margin-top: -15px;
    padding-right: 64px;
    z-index: 9;

}

.text-right {
    text-align: right;
}

a {
    color: #666;
}

.p-100 {
    padding: 100px;
}

.logo-short {
    height: 30px;
    margin-left:10px;
    margin-right:20px;
}

footer {
    padding: 20px;
}

footer ul {
    padding: 0;
    margin: 0;
}

footer .logo-short {
    height: 30px;
    margin-left: 0px;
    margin-right: 0px;
}

.left-side {
    float: left;
    margin-top: 0.6em;
}

.right-side {
    float: right;
}

.circle-border {
    border-radius: 50%;
    border: 2px solid black;
    padding: 200px;
}

.word-1-letter-m, .word-1-letter-o, .word-1-letter-t, .word-1-letter-i, .word-1-letter-v, .word-1-letter-a, .word-1-letter-t-2, .word-1-letter-i-2, .word-1-letter-o-2, .word-1-letter-n {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}

.word-2-letter-e, .word-2-letter-x, .word-2-letter-p, .word-2-letter-e-2, .word-2-letter-r, .word-2-letter-t, .word-2-letter-i, .word-2-letter-s, .word-2-letter-e-3 {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}
.word-3-letter-s, .word-3-letter-t, .word-3-letter-r, .word-3-letter-a, .word-3-letter-t-2, .word-3-letter-e, .word-3-letter-r-2, .word-3-letter-g, .word-3-letter-y {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}

.word-4-letter-s, .word-4-letter-e, .word-4-letter-r, .word-4-letter-v, .word-4-letter-i, .word-4-letter-c, .word-4-letter-e-2 {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}

.word-5-letter-a, .word-5-letter-b, .word-5-letter-i, .word-5-letter-l, .word-5-letter-i-2, .word-5-letter-t, .word-5-letter-y {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}

.word-6-letter-g, .word-6-letter-o, .word-6-letter-a, .word-6-letter-l, .word-6-letter-s {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}

.word-7-letter-e, .word-7-letter-n, .word-7-letter-e-2, .word-7-letter-r, .word-7-letter-g, .word-7-letter-y {
    width: 20px;
    height: 20px;
    position: absolute;
    color: #F7B83A;
    font-weight: 700;
}

.down-arrow {
    position: absolute;
    color: #F7B83A;
    border: 1px solid #F7B83A;
    border-radius: 50%;
    padding: 3px;
}

.image-center-200-wide {
    display: block; /*for the img inside your div */
    margin-left: auto;
    margin-right: auto;
}

.pt-100 {
    padding-top: 100px;
}

.bg-adsup {
    background-color: #00A4E2;
}

.bg-sitesafe {
    background-color: #0667D5;
}

.bg-virtuous-collective {
    background-color: #F455BE;
}

.bg-dispatch {
    background-color: #FE9233;
}

.bg-lotus {
    background-color: #172B54;
}

.pt-200 {
    padding-top: 200px;
}

.pb-200 {
    padding-bottom: 200px;
}

.contact-image {
    /*background: url(../images/kosta.jpg) no-repeat center center;*/
    background-color: #F6F8F8;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    .video {
        height: 100%;
    }

    .border-wrapper {
        padding: 0 0rem 0rem;
    }

    .logo-short {
        height: 30px;
        margin-left:10px;
        margin-right:20px;
    }

    .left-side-hover {
        display: none;

    }

    .right-side-hover {
        float: right;
        width: 100%;
        height: 100%;
        padding-left: 20px;
        background-color: #F8AD3A;
    }

    .inline {
        list-style: none;
        display: block;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    .video {
        height: 100%;
    }

    .border-wrapper {
        padding: 0 0rem 0rem;
    }

    .logo-short {
        height: 30px;
        margin-left:10px;
        margin-right:20px;
    }

    .inline {
        list-style: none;
        display: block;
    }
}

.video {
    height: 100%;
}

.middle-of-video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    text-align: center;
}

.middle-of-video-img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -200px;
}

.roboto-font {
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}

.logo-potato {
    font-family: 'Roboto', sans-serif;
    color: #222222;
    letter-spacing: 2px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .video {
        height: inherit;
    }

    .border-wrapper {
        padding: 0 2rem 2rem;
    }

    .logo-short {
        height: 30px;
        margin-left:10px;
        margin-right:20px;
    }
    .left-side-hover {
        display: inline;
        float: left;
        width: 65%;
        height: 100%;
        padding-left: 80px;
        padding-right: 80px;
        background-color: #f2f2f2;
        overflow-y: scroll;
    }

    .right-side-hover {
        display: inline;
        float: right;
        width: 35%;
        height: 100%;
        padding-left: 20px;
        background-color: #F8AD3A;
    }

    footer {
        padding: 40px;
    }

    .inline {
        list-style: none;
        display: inline-block;
    }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .logo-short {
        height: 30px;
        margin-left:10px;
        margin-right:20px;
    }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  .logo-short {
    height: 30px;
    margin-left:10px;
    margin-right:20px;
  }

}

.mt-50 {
  margin-top: 50px;
}