html {
	scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
}

.dark {
    color: #000;
}

.light {
    color: #fff;
}

h1 {
    font-weight: 800;
    font-size: 144px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-left: -10px;
    margin-bottom: -10px;
}

h2 {
    font-weight: 300;
    font-size: 30px;
    letter-spacing: 0.54em;
    text-transform: uppercase;
}

h3 {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    margin-left: -10px;
    margin-top: 8px;
}

p {
    font-weight: 300;
    font-size: 18px;
    line-height: 22px;
}

.project-title {
    width: 100%;
    margin: 0 auto;
    margin-top: 250px;
    position: absolute;
    z-index: 1000;
}

.cta {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 1;
    transition: 0.3s;
}

.cta:hover {
    text-decoration: underline;
    opacity: 0.6;
    transition: 0.3s;
}

.arw {
    width: 40px;
    height: 10px;
    padding-left: 0px;
}

.logo {
    margin: 0 auto;
    margin-top: 150px;
    position: absolute;
    z-index: 1001;
}

#container {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.dark-con {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: #000;
}

.light-con {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
}

.grey-con {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: #2D2E32;
}

#intro {
    max-width: 1280px;
    display: inline-block;
    background-color: #000;
    height: 100vh;
}

#intro-content {
    /*    margin: 50% auto;*/
    margin-top: 60%;
}

.title {
    max-width: 1280px;
    display: inline-block;
    padding: 180px 0px;
}

.sub-title {
    max-width: 1280px;
    display: inline-block;
    padding: 60px 0px;
}

.copy {
    max-width: 640px;
    display: inline-block;
    padding: 180px 0px;
}

.images {
    width: 100% text-align: center;
    margin: 0 auto;
    line-height: 0px;
    background-color: #fff;
}

.vid-wide {
    max-width: 720px;
    display: block;
}

.arw-down {
    margin: 50% auto;
    animation: MoveUpDown 1s linear infinite;
    position: relative;
}

.arw-up {
    /*margin: 2% auto;*/
    animation: MoveUpDown 1s linear infinite;
    position: relative;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 10px;
  }
}

.hideme {
    opacity:0;
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (max-width: 720px) {
    #intro {
        height: 100%;
    }
    #intro-content {
        margin: 50% auto;
    }
    h1 {
        font-size: 62px;
    }
    h2 {
        font-size: 14px;
    }
    h3 {
        font-size: 12px;
    }
    p {
        font-size: 14px;
    }
    .title {
        padding: 60px 0px;
    }
    .cta {
        font-size: 12px;
    }
    .vid-wide {
        max-width: 100% !important;
    }
    .copy {
        padding: 60px 0px;
    }
    .mobile-padding {
        padding: 0px 30px;
    }
    .arw-down {
        margin: 10% auto;
    }
    .arw-up {
        margin: 10% auto;
    }
    #nav-main {
        width: 80%;
    }
}