/* Color Scheme
Blue - #6e87a2
Dark Gray - #7f7f7f
Light Grey - #cbcbcb
Lightest Grey - #f1f1f1
*/

/* Version 2.0:
Updates to Project Inquiry Form and Get in Touch
*/

@-ms-viewport{
  width: device-width;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

h1 {
    color: #6e87a2;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
}

h2 {
    color: #6e87a2;
    font-family: 'cormorant garamond', 'times', serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
}

h3 {
    color: #6e87a2;
    font-family: 'cormorant garamond', 'times', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

h4 {
    color: #7f7f7f;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
    margin: 0;
    padding: 0 5px 0 0;
    text-align: center;
    text-transform: uppercase;
}

p {
    color: #7f7f7f;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 2;
}

hr { 
    background: #7f7f7f;
    border: none;
    height: 1px;
    opacity: 0.3;
    width: 50px;
}

a {
    color: #7f7f7f;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.logo {
    align-items: center;
    display: flex;
    height: 75px;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100px;
    z-index: 6;
}

.logo a {
    cursor: pointer;
    display: block;
}

.logo img {
    width: 60px;
}

.menu-button {
    align-items: center;
    background: #fff;
    display: flex;
    height: 75px;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 0;
    width: 100px;
    z-index: 10;
}

.menu-button .hamburger-menu {
    box-sizing: content-box;
    cursor: pointer;
    height: 18px;
    position: relative;
    width: 25px;
}

.hamburger-bar {
    background-color: #6e87a2;
    height: 1px;
    margin: 0;
    position: absolute;
    transition: .7s ease;
    width: 15px;
}

.short-left {
    top: 0;
    transform-origin: left top;
}

.short-right {
    bottom: 0;
    transform-origin: left bottom;
}

.menu-button div:hover .hamburger-bar {
    width: 24px;
}

.long {
    left: 0;
    top: 8.5px;
    width: 24px;
}


.bar-left {
    top: 0;
    transform: rotate(45deg);
    transform-origin: left bottom;
    width: 24px;
}

.bar-right {
    bottom: 0;
    transform: rotate(-45deg);
    transform-origin: left top;
    width: 24px;
}

.bar-center {
    left: -15px;
    opacity: 0;
}

.menu-bg {
    background: rgba(0,0,0,0.4);
    height: 100%;
    opacity: 0;
    position: fixed;
    right: -100%;
    transition: opacity 1s 0s, right 0.1s 1s;
    width: 100%;
    z-index: 7;
}

.menu-bg.show {
    opacity: 1;
    right: 0;
    transition: opacity 1s 0.1s, right 0.1s 0s;
}

.menu {
    align-items: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    opacity: 0;
    position: fixed;
    right: -30%;
    transition: 1s all ease;
    width: 30%;
    z-index: 8;
}

.menu.show {
    opacity: 1;
    right: 0;
    transition: 1s all ease;
}

.menu ul {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu ul li {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 5px;
    margin: 20px 0;
    text-transform: uppercase;
}

.menu ul li a {
    color: #6e87a2;
    position: relative;
}

.menu ul li a:after {
    background: #6e87a2;
    bottom: 0;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    transition: 0.7s ease;
    width: 0;
}

.menu ul li a:hover:after {
    width: 100%;
}

.social-menu {
    align-items: center;
    display: flex;
    height: 20%;
    justify-content: center;
}

.social-menu a {
    font-size: 18px;
    margin: 0 20px;
}

.social-menu a:hover {
    opacity: 0.7;
}


/* ----------- Home Page Content ---------- */

.desktop-wrapper {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    left: 0;
    max-width: 100%;
    position: relative;
    top: 0;
    width: 100%;
}

.video-wrapper {
    bottom: 0;
    height: 95%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 3%;
    width: 61%;
}

.video-wrapper video {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%; 
}

.text-wrapper {
    align-items: center;
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
    height: 85%;
    justify-content: center;
    left: 3%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 30%;
}

.watermarked-logo {
    color: #6e87a2;
    font-weight: 400;
    letter-spacing: 4px;
    margin: 0 auto 0 auto;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: auto;
}

.watermarked-logo img {
    margin: 0;
    opacity: 0.3;
    padding: 0;
    width: 130px;
}

.watermarked-logo span {
    font-weight: 200;
    text-transform: none;
}

.text-wrapper h3 {
    color: #7f7f7f;
    font-family: 'lato', serif;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 2;
    margin: 0 40px 30px 40px;
    padding: 0;
    text-transform: none;
}

.text-wrapper a, .mobile-text-wrapper a {
    color: #6e87a2;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 10px 0 60px 0;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.text-wrapper a span:after, .mobile-text-wrapper a span:after {
    background-color: #6e87a2;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: width 0.5s ease;
    width: 0;
}

.text-wrapper a:hover span:after, .mobile-text-wrapper a:hover span:after {
    width: 100%;
}

.mfp-iframe-holder .mfp-content {
    max-width: 1280px !important;
}

.down-arrow {
    bottom: -16%;
    height: 250px;
    margin: auto;
    position: absolute;
    width: auto;
    z-index: 10;
}

.arrow-line {
    border-left: 1px solid #7f7f7f;
    height: 175px;
    left: 50%;
    opacity: 0.4;
    position: relative;
    width: 50%;
}

.down-arrow p {
    color: #6e87a2;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 1;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.down-arrow p::before {
    color: #7f7f7f;
    content: '\22CE';
    font-size: 20px;
    letter-spacing: 0;
    margin: auto;
    opacity: 0.4;
    position: absolute;
    top: -30px;
    width: 100%;
}

.mfp-iframe-holder .mfp-content {
    max-width: 1280px;
}

/* Portfolio */

.projects {
    height: auto;
    position: relative;
}

.portfolio {
    margin: auto;
    max-width: 1350px;
    padding: 150px 0 0 0;
    width: 100%;
}

.projects ul {
    display: block;
    text-align: center;
    width: 100%;
}

.projects-menu {
    color: #7f7f7f;
    cursor: pointer;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 40px 8px 10px 8px;
    position: relative;
    text-transform: uppercase;
}

.projects-menu:after {
    background-color: #7f7f7f;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: width 0.5s ease;
    width: 0;
}

.projects-menu:hover:after, .projects-menu:focus:after {
    width: 100%;
}

.projects-grid {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    max-width: 1350px;
    padding: 10px 0 1% 0;
}

.projects-grid .grid-item {
    height: 650px;
    overflow: hidden;
    position: relative;
    width: 33.3%;
}

.grid-item .grid-item-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 97%;
    margin: 1.5% 3%;
    overflow: hidden;
    position: relative;
    width: 94%;
}


.projects-grid .grid-item .project-image {
    background-position: center 20%;
    background-size: cover;
    height: 85%;
    transition: all 1s ease-out; 
    width: 100%;
}

.projects-grid .grid-item .project-image:hover {
    height: 90%;
    width: 105%;
}

.projects-grid .grid-item .project-text {
    align-items: center;
    background: #fff;
    border-top: 5px solid #fff;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 15%;
    justify-content: flex-start;
    position: absolute;
    transition: all 0.7s ease;
    width: 100%;   
}

.projects-grid .grid-item .project-text h3 {
    margin: 0;
    padding: 8px 0;
    text-align: center;
}

.burton-getaway-photo {
    background: url(imgs/burton-getaway-12.jpg);
}

.johns-creek-photo {
    background: url(imgs/johns-creek-22.jpg);
}

.buckhead-traditional-photo {
    background: url(imgs/buckhead-traditional-31.jpg);
}

.projects-grid .grid-item .project-image.buckhead-traditional-photo {
    background-position: center 60%;
}

.urban-retreat-photo {
    background: url(imgs/urban-retreat-1.jpg);
}

.projects-grid .grid-item .project-image.urban-retreat-photo {
    background-position: 30% 20%;
}

.boathouse-photo {
    background: url(imgs/burton-boathouse-15.jpg);
}

.buckhead-bar {
    background-image: url(imgs/buckhead-bar-1.jpg);
}

.english-country {
    background-image: url(imgs/english-country-1.jpg);
}

.river-retreat {
    background-image: url(imgs/river-retreat-9.jpg);
    background-position: center 80% !important;
}

.brookhaven-tudor {
    background-image: url(imgs/brook-tudor-18.jpg);
}

.collier-classic {
    background-image: url(imgs/collier-classic-2.jpg);
}

.sandy-springs {
    background-image: url(imgs/sandy-springs-2.jpg);
    width: 102% !important;
}

.virginia-tidewater {
    background-image: url(imgs/VA-tidewater-9.jpg);
}

.brookhaven-jeffersonian {
    background-image: url(imgs/jeffersonian-7.jpg);
}

/* About the Designer */
.about-desktop, .about-mobile {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
    width: 60%;
}

.designer-pic {
    background: url(imgs/kerry_1.jpg);
    background-position: 50% 20%;
    background-size: cover;
    height: 70%;
    width: 48%;
}

.designer-text {
    align-items: center;
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
    height: 70%;
    justify-content: center;
    padding: 0;
    text-align: center;
    width: 48%;
}

.designer-text p {
    padding: 0 60px;
}

#arrow-services {
    bottom: -100px;
    height: 175px;
    position: absolute;
    width: auto;
    z-index: 10;
}

.arrow-line-services {
    position: relative;
    height: 100px;
    width: 50%;
    border-left: 1px solid #7f7f7f;
    left: 50%;
    opacity: 0.4;
}

#arrow-services p {
    color: #6e87a2;
    font-size: 13px;
    letter-spacing: 4px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
}

#arrow-services p::before {
    color: #7f7f7f;
    content: '\22CE';
    font-size: 18px;
    letter-spacing: -2px;
    opacity: 0.4;
    position: absolute;
    text-align: center;
    top: -35px;
    width: 100%;
}

/* Services */
.services-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    position: relative;
}

.carousel-wrapper {
    height: 60%;
    margin: 60px auto;
    position: relative;
    width: 60%;
}

.carousel-item {
    align-items: stretch;
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: space-around;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    transition: all 0.5s ease-in-out;
    top: 0;
    width: 100%;
}

.dots {
    position: absolute;
    top: -50px;
}

.dots a {
    font-size: 11px;
    margin: 3px;
}

.carousel-item .carousel-text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
}

.carousel-item .carousel-text p {
    margin: 0.5em 0;
}

.carousel-item .carousel-image {
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 45%;
}

.consultation-image {
    background: url(imgs/consultation.jpg);
}

.architectural-image {
    background: url(imgs/drawings.jpg);
}

.material-image {
    background: url(imgs/VA-tidewater-15.jpg);
}

.design-image {
    background: url(imgs/VA-tidewater-1.jpg);
}

.arrow {
    display: inline-block;
    font-family: 'cormorant garamond', 'times', serif;
    font-size: 32px;
    letter-spacing: 0px;
    opacity: 0.5;
    width: 42px;
}

.arrow-prev {
    left: 20px;
    position: absolute;
    top: 0;
}
 
.arrow-next {
    left: 90px;
    position: absolute;
    top: 0;
  }

/*Select every element*/
[id^="item"] {
    display: none;
  }

.item-1 {
    opacity: 1;
    z-index: 2;
  }

*:target ~ .item-1 {
    opacity: 0;
  }

#item-1:target ~ .item-1 {
    opacity: 1;
  }

#item-2:target ~ .item-2, #item-3:target ~ .item-3, #item-4:target ~ .item-4 {
    opacity: 1;
    z-index: 3;
  }

.active-service {
    opacity: 1;
    z-index: 3;
}

.hide-service {
    opacity: 0;
}



/* Contact */
.contact-section {
    align-items: center;
    background: #f1f1f1;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 90vh;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    top: 10vh;
    width: 86%;
}

.contact-section .contact-text {
    padding: 20px 40px 20px 40px;
    text-align: center;
}

.contact-section img {
    opacity: 0.3;
    width: 100px;
}

.contact-section h2 {
    margin: 20px auto 30px auto;
}

.contact-section p {
    max-width: 600px;
    margin: 20px auto;
}

.contact-section .contactname {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1.8px;
    line-height: 1.8;
    margin: 0 auto;
    padding: 0;
}

.contact-section a {
    color: #7f7f7f;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 2;
    margin: 0 auto;
    text-decoration: none;
}

.contact-section a:hover {
    opacity: 0.7;
}

.contact-section .formlink {
    color: #6e87a2;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 10px 0 60px 0;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.contact-section .formlink:hover {
    opacity: 1;
}

.contact-section .formlink span:after {
    background-color: #6e87a2;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: width 0.5s ease;
    width: 0;
}

.contact-section .formlink:hover span:after {
    width: 100%;
}

.contact-section hr {
    margin: 20px auto;
}

.contact-section .social-icons {
    margin: 10px 0 0;
}

.contact-section .social-icons a {
    font-size: 20px;
    padding: 0 10px;
}

.contact-section .social-icons a:hover {
    opacity: 0.7;
}

/* Project Scope Form */
.projectscope {
    align-items: center;
    background: #f1f1f1;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    top: 10vh;
    width: 86%;
    max-width: 1400px;
}

.projectscope .scope-text {
    padding: 80px 40px 80px 40px;
    text-align: center;
    width: 75%;
}

.projectscope img {
    opacity: 0.3;
    width: 100px;
}

.projectscope h2 {
    margin: 20px auto 30px auto;
}


.projectscope hr {
    margin: 20px auto;
}

.projectform {
    text-align: left;
    color: #7f7f7f;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

.projectform .wide {
    box-sizing: border-box;
    width: 100%;
    outline: 1px solid #a9a9a9;
    border-right: transparent;
    border-left: transparent;
    border-top: transparent;
    border-bottom: transparent;
    padding: 10px;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    color: #333;
    font-weight: 300;
    margin: 3px 0 15px 0;
}

form p, form .form-title {
    margin: 0px;
    font-size: 18px;
}

.required {
    font-size: 12px;
    font-style: italic;
}

.name {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.fname, .lname {
    width: 49%;
}

.fname label, .lname label {
    font-size: 12px;
}

input, textarea {
    border-radius: 0px;
}

.checkboxoptions input {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    margin-top: 5.5px;
}

.checkboxoptions p {
    margin-bottom: 5px;
}

.checkbox {
    display: inline-flex;
    width: 46%;
    align-items: flex-start;
    padding: 2px 0;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fafafa;
    border: 1px solid #a9a9a9;
    height: 16px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 16px;
    box-sizing: border-box;
    padding: 0;
}

.checkboxoptions input:before {
    display: block;
    background-color: #fff;
    -webkit-clip-path: polygon(13.29% 49.19%,3.89% 59.8%,40.98% 90%,96.95% 21.23%,86.94% 13.08%,85.97% 12.29%,38.95% 70.07%);
    clip-path: polygon(13.29% 49.19%,3.89% 59.8%,40.98% 90%,96.95% 21.23%,86.94% 13.08%,85.97% 12.29%,38.95% 70.07%);
    content: "";
    height: 0.8em;
    transform: scale(0);
    width: 0.8em;
}

.checkboxoptions input:checked {
    background-color: #6e87a2;
    height: 16px;
    width: 16px;
}

.checkboxoptions input:checked:before {
    outline: 1px solid #a9a9a9;
    transform: scale(1);
}

.timeline {
    position: relative;
}

.selectdropdown {
    align-items: center;
    display: flex;
    position: relative;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    border-radius: 0px;
    cursor: pointer;
    height: 46px;
    height: auto;
    outline-offset: -2px;
    overflow: hidden;
    padding: 10px 28px 10px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    color: #333;
    font-weight: 300;
    margin: 3px 0 15px 0;
}

select:focus-visible {
    outline: none;
}

.dropdownarrow {
    cursor: pointer;
    height: 12px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    width: 18px;
    top: 18px;
}

.dropdownarrow svg {
    display: block;
    fill: #a9a9a9;
}

textarea {
    resize: vertical;
}

input[type=submit] {
    background-color: #6e87a2;
    border: 1.5px solid #6e87a2;
    color: #fff;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-family: 'cormorant garamond', 'times', serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

input[type=submit]:hover {
    border: 1.5px solid #6e87a2;
    background-color: #f1f1f1;
    color: #6e87a2;
}

/* Form Confirmation Page */
.success-wrapper {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-content: center;
}
.success {
    align-items: center;
    background: #f1f1f1;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    top: 10vh;
    width: 86%;
    max-width: 1400px;
    text-align: center;
}

.success h1 {
    line-height: 1.5;
    margin: 15px;
}

.success .fa-check-circle {
    font-size: 5.5rem;
    padding: 15px;
    color: #6e87a2;
}

.success button {
    border: none;
}

.success button a {
    padding: 16px 32px;
    display: block;
    color: #fff;
    background-color: #6e87a2;
    border: 1.5px solid #6e87a2;
    text-decoration: none;
    margin: 15px 0px;
    cursor: pointer;
    font-family: 'cormorant garamond', 'times', serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.success button a:hover {
    color: #6e87a2;
    border: 1.5px solid #6e87a2;
    background-color: #f1f1f1;
}

/* Responsive Styling */
@media (max-width: 1550px) {
    .logo {
        background: #fff;
    }
}
@media (max-width: 1366px) {
    .menu {
        right: -40%;
        width: 40%;
    }
    .text-wrapper {
        height: 86%;
        left: 2%;
    }
    .text-wrapper h3 {
        font-size: 16px;
        margin: 0 30px 30px 30px;
    }
    .video-wrapper {
        height: 97%;
        right: 2%;
        width: 64%;
    }
    .portfolio {
        padding: 100px 0 0 0;
    }
    .about-desktop {
        width: 75%;
    }
    .carousel-wrapper {
        width: 75%;
    }
    .contact-section {
        width: 90%;
    }
}

@media (max-width: 1200px) {
    .text-wrapper {
        left: 1%;
        width: 32%;
    }
    .video-wrapper {
        height: 99%;
        right: 1%;
        width: 65%;
    }
}

@media (max-width: 1080px) {
    h2 {
        font-size: 26px;
    }
    h3 {
        font-size: 17px;
    }
    p {
        font-size: 15px;
    }
    .menu {
        right: -50%;
        width: 50%;
    }
    .projects-menu {
        margin: 10px 8px 10px 8px;
    }
    .projects-grid .grid-item {
        height: 500px;
    }
    .projects-grid .grid-item .project-text h3 {
        letter-spacing: 3px;
    }
    .about-desktop {
        width: 90%;
    }
    
    .about-desktop .designer-text, .about-desktop .designer-pic {
        width: 49%;
    }
    .carousel-wrapper {
        width: 90%;
    }
    .carousel-item .carousel-text p {
        margin: 10px 0;
    }
    .contact-section {
        height: 91vh;
        top: 9vh;
        width: 95%;
    }
    .checkbox {
        width: 45%;
    }
}
@media (min-width: 1025px) {
    .mobile-wrapper, .menu ul li.mobile-home {
        display: none;
    }
}
@media (max-width: 1024px) {
    h2 {
        font-size: 24px;
        letter-spacing: 3px;
    }
    h4 {
        letter-spacing: 2px;
    }
    p {
        line-height: 1.8;
    }
    .menu ul li.desktop-home {
        display: none;
    }
    .menu ul li.mobile-home {
        display: block;
    }
    .desktop-wrapper {
        display: none;
    }
    .mobile-wrapper {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        position: relative;
        width: 100vw;
    }
    .mobile-video-wrapper {
        left: 2%;
        height: 60%;
        margin: 0 auto;
        overflow: hidden;
        padding: 0;
        position: absolute;
        top: 0;
        width: 96%; 
    }
    .mobile-video-wrapper video {
        height: 100%;
        left: 0;
        object-fit: cover;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .mobile-text-wrapper {
        align-items: center;
        background: #f1f1f1;
        display: flex;
        flex-direction: column;
        height: 40%;
        justify-content: center;
        left: 2%;
        margin: 0 auto;
        position: absolute;
        text-align: center;
        top: 61%;
        width: 96%;
    }
    .mobile-text-wrapper .watermarked-logo img {
        width: 100px;
    }
    .mobile-text-wrapper h1 {
        margin: 10px 0;
    }
    .mobile-text-wrapper h3 {
        color: #7f7f7f;
        font-family: 'lato', serif;
        font-weight: 300;
        letter-spacing: 0.5px;
        line-height: 2;
        margin: 30px 10%;
        padding: 0;
        text-transform: none;
    }
    .mobile-text-wrapper a {
        margin: 10px 0 10px 0;
    }
    .projects {
        margin: 20px auto 0 auto;
        padding: 60px 0 0 0;
    }
    .portfolio {
        margin: 0 auto;
        padding: 0;
        width: 98%;
        left: 1%;
    }
    .about-desktop {
        height: 90vh;
        width: 96%;
    }
    .about-desktop .designer-text, .about-desktop .designer-pic {
        height: 90%;
        width: 49.5%;
    }
    #arrow-services {
        display: none;
    }
    .carousel-wrapper {
        width: 98%;
    }
    .carousel-item .carousel-image, .carousel-item .carousel-text {
        width: 47%;
    }
    .contact-section {
        width: 96%;
    }
    .contact-section img {
        width: 80px;
    }
    .contact-section h2 {
        margin: 15px auto 20px auto;
    }
    .contact-section hr {
        margin: 15px auto;
    }
    .contact-section .contactname {
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 1.8;
    }
    .contact-section p, .contact-section a {
        font-size: 15px;
        line-height: 1.8;
    }
    .contact-section .social-icons a {
        font-size: 18px;
    }
    .projectscope .scope-text {
        width: 85%;
    }
    .checkbox {
        width: 44%;
    }
}
@media (max-width: 1024px) and (min-height: 1300px) {
    .mobile-wrapper {
        position: relative;
        width: 100vw;
    }
    .portfolio {
        margin: 0 auto 60px auto;
    }
    .about-desktop {
        height: 55vh;
        width: 96%;
    }
    .services-wrapper {
        height: 65vh;
    }
}
@media (max-width: 1024px) and (max-height: 768px) {
    .mobile-wrapper {
        height: 120vh;
        height: calc(var(--vh, 1vh) * 120);
    }
    .watermarked-logo {
        height: 55%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mission-wrapper {
        height: 45%;
    }
    .mission-wrapper h3 {
        margin: 0 10% 30px 10%;
    }
    .about-desktop {
        margin: 40px auto;
    }
}
@media (max-width: 1024px) and (max-height: 500px) {
    .logo, .menu-button {
        height: 60px;
        width: 75px;
    }
    .logo img {
        width: 50px;
    }
    .menu ul li {
        font-size: 18px;
        margin: 12px 0;
    }
    .mobile-wrapper {
        height: 800px;
        position: relative;
        width: 100vw;
    }
    .mobile-video-wrapper {
        height: 50%;
        top: 1%;
    }
    .mobile-text-wrapper {
        height: 49%;
        top: 52%;
    }
    .projects-menu {
        font-size: 12px;
    }
    .about-desktop {
        height: 800px;
    }
    .services-wrapper {
        height: 800px;
    }
    .contact-section {
        height: 100vh;
    }
    .success-wrapper {
        height: 475px;
    }
}
@media (min-width: 769px) {
    .about-mobile {
        display: none;
    }
    .menu ul li.mobile-about {
        display: none;
    }
}
@media (max-width: 768px) {
    h2 {
        font-size: 22px;
    }
    .menu {
        right: -70%;
        width: 70%;
    }
    .menu ul li.desktop-about {
        display: none;
    }
    .menu ul li.mobile-about {
        display: block;
    }
    .projects ul {
        padding: 0;
    }
    .projects-menu {
        font-size: 11px;
        margin: 6px;
    }
    .projects-grid .grid-item {
        height: 500px;
        width: 49.9%;
    }
    .grid-item .grid-item-wrapper {
        margin: 1% 2%;
        width: 96%;
    }
    .about-desktop {
        display: none;
    }
    .about-mobile {
        flex-direction: column;
        height: 100vh;
        width: 96%;
        margin: 80px auto 0 auto;
    }
    .about-mobile .designer-pic {
        background-position: center 12%;
        height: 61%;
        margin-top: 1%;
        width: 100%;
    }
    .about-mobile .designer-text {
        height: 36.5%;
        margin-bottom: 1%;
        width: 100%;
    }
    .designer-text p {
        margin: 10px 0;
        padding: 0 40px;
    }
    .carousel-wrapper {
        height: 75%;
        margin: 60px auto 0 auto;
        width: 98%;
    }
    .carousel-item {
        flex-direction: column;
    }
    .carousel-item .carousel-text {
        height: 50%;
        margin: 0 4%;
        width: 92%;
    }
    .carousel-item .carousel-image {
        height: 50%;
        margin: 0 4%;
        width: 92%;
    }
    .dots {
        text-align: center;
        top: -55px;
        width: 100%;
    }
    .arrow {
        top: -25px;
    }
    .contact-section h2 {
        margin: 10px auto 15px auto;
    }
    .contact-section .contactname {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .contact-section p, .contact-section a {
        font-size: 16px;
    }
    .contact-section .social-icons a {
        font-size: 18px;
    }
    .checkbox {
        width: 92%;
    }
}
@media (max-width: 768px) and (max-height: 500px) {
    .about-mobile {
        height: 800px;
    }
}
@media (max-width: 630px) {
    .about-mobile .designer-pic {
        height: 57%;
    }
   .about-mobile .designer-text {
        height: 40.5%;
    }
}

@media (min-width: 551px) {
    .projects-menu-wrapper span {
        display: none;
    }
}

@media (max-width: 550px) {
    h2 {
        font-size: 20px;
        letter-spacing: 2px;
    }
    p {
        font-size: 15px;
    }
    .menu {
        right: -100%;
        width: 100%;
    }
    .mobile-header-wrapper {
        position: fixed;
        top: 0;
        width: 100%;
        height: 60px;
        background-color: #fff;
        z-index: 9;
    }
    .logo, .menu-button {
        height: 60px;
        width: 80px;
    }
    .logo img {
        width: 45px;
    }
    .hamburger-bar.short-left, .hamburger-bar.short-right, .hamburger-bar.long {
        width: 24px;
    }
    .mobile-wrapper {
        height: 100vh;
        margin: auto;
        width: 96%;
    }
    .mobile-video-wrapper, .mobile-text-wrapper {
        width: 98%;
        left: 1%;
    }
    .mobile-text-wrapper h3 {
        margin: 0 4% 15px 4%;
    }
    .projects {
        padding: 60px 0 0 0;
    }
    .projects-menu-wrapper {
        margin: 30px 2% 10px 2%;
        position: relative;
        text-align: center;
        width: 96%;
        z-index: 6;
    }
    .projects-menu-wrapper span {
        border: 1px solid #cbcbcb;
        color: #7f7f7f;
        cursor: pointer;
        display: block;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 2px;
        margin: 0 auto;
        padding: 14px 0;
        position: relative;
        text-transform: uppercase; 
    }
    .projects-menu-wrapper span:after {
        color: #cbcbcb;
        content: '\25BE';
        font-size: 20px;
        padding: 0 6px;
        position: absolute;
        right: 10px;
        top: 7px;
    }
    .projects-menu-wrapper .menu-list {
        display: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 45px;
    }
    .projects-menu-wrapper .menu-list.show-dropdown {
        display: block;
    }
    .projects-menu {
        background: #f1f1f1;
        border-bottom: 1px solid #cbcbcb;
        border-left: 1px solid #cbcbcb;
        border-right: 1px solid #cbcbcb;
        display: block;
        margin: 0;
        padding: 14px 0;
    }
    .projects-menu:after {
        height: 0;
    }
    .projects-grid .grid-item {
        height: 500px;
        width: 100%;
    }
    .about-mobile {
        margin: 0 auto;
        padding: 60px 0 30px 0;
        width: 96%;
    }
    .designer-text p {
        padding: 0 25px;
    }
    .carousel-wrapper {
        margin: 70px auto 0 auto;
    }
    .carousel-item .carousel-text {
        height: 52%;
    }
    .carousel-item .carousel-image {
        height: 48%;
    }
    .carousel-item .carousel-text h3 {
        margin: 5px 0;
    }
    .dots {
        top: -68px;
    }
    .arrow {
        top: -45px;
    }
    .arrow-prev {
        left: 37%;
    }
    .arrow-next {
        left: 53%;
    }
    .contact-section {
        height: calc(100vh - 60px);
        top: 0;
    }
    .fname, .lname {
        width: 100%;
    }
    form p, form .form-title {
        font-size: 15px;
    }
    .required {
        font-size: 11px;
    }
    .projectform {
        font-size: 14px;
    }
    .projectform .wide {
        font-size: 14px;
    }
    .checkbox {
        width: 87%;
    }
    input[type=submit] {
        font-size: 16px;
    }
}
@media (max-width: 550px) and (min-height: 600px) {
    .mobile-wrapper {
        height: 145vh;
        height: calc(var(--vh, 1vh) * 145);
    }
    .mobile-video-wrapper {
        /* Firefox */
        height: -moz-calc(50% - 60px);
        /* WebKit */
        height: -webkit-calc(50% - 60px);
        /* Opera */
        height: -o-calc(50% - 60px);
        /* Standard */
        height: calc(50% - 60px);
        top: 60px;
    }
    .mobile-text-wrapper {
        height: 49%;
        top: 51%;
    }
    
    .watermarked-logo {
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .mission-wrapper {
        height: 60%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .mobile-text-wrapper .watermarked-logo img {
        width: 80px;
    }
    .mobile-text-wrapper h1 {
        font-size: 26px;
        letter-spacing: 3px;
        margin: 5px 0;
    }
    .about-mobile {
        margin: 0 auto;
        padding: 60px 0 30px 0;
    }
    .about-mobile .designer-pic {
        height: 50%;
    }
    .about-mobile .designer-text {
        height: 48%;
    }
    .designer-text p {
        margin: 12px 4%;
        padding: 0;
    }
    .services-wrapper {
        height: 115vh;
        margin: 30px 0;
    }
    .carousel-wrapper {
        height: 78%;
    }
    .carousel-item .carousel-text {
        height: 66%;
    }
    .carousel-item .carousel-image {
        height: 34%;
    }
}
@media (max-width: 550px) and (max-height: 599px) {
    .mobile-wrapper {
        height: 100vh;
    }
    .mobile-video-wrapper {
        height: 57%;
    }
    .mobile-text-wrapper {
        height: 42%;
        top: 58%;
    }
    .mobile-text-wrapper .watermarked-logo img {
        width: 80px;
    }
    .mobile-text-wrapper h1 {
        font-size: 26px;
        letter-spacing: 3px;
        margin: 5px 0;
    }
    .about-mobile {
        height: 120vh !important;
    }
    .about-mobile .designer-pic {
        height: 50%;
    }
    .about-mobile .designer-text {
        height: 48%;
    }
    .designer-text p {
        margin: 12px 4%;
        padding: 0;
    }
    .services-wrapper {
        margin-bottom: -9vh;
    }
    .carousel-wrapper {
        height: 78%;
    }
    .carousel-item .carousel-text {
        height: 66%;
    }
    .carousel-item .carousel-image {
        height: 34%;
    }
}
@media (max-width: 550px) and (max-height: 600px) {
    .mobile-wrapper {
        height: 830px;
    }
    .mobile-video-wrapper {
        height: 51%;
    }
    .mobile-text-wrapper {
        height: 48%;
        top: 52%;
    }
    .about-mobile {
        height: 800px !important;
    }
    .about-mobile .designer-pic {
        height: 46%;
    }
    .about-mobile .designer-text {
        height: 52%;
    }
    .services-wrapper {
        height: 900px;
    }
}
@media (max-width: 400px) {
    .about-mobile {
        height: 105vh;
    }
    .about-mobile .designer-pic {
        height: 48%;
    }
    .about-mobile .designer-text {
        height: 50%;
    }
    .services-wrapper {
        height: 130vh;
    }
}
@media (max-width: 360px) {
    h3 {
        font-size: 15px;
    }
    p {
        font-size: 14px;
    }
    .watermarked-logo {
        height: 38%;
    }
    .mission-wrapper {
        height: 62%;
    }
    .services-wrapper {
        height: 900px;
    }
    .contact-section {
        top: 80px;
    }
}

/* Error Page */
.error-page {
    width: 100%;
    position: absolute;
    height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.error-page h1 {
    font-family: 'cormorant garamond', 'times', serif;
    font-size: 300px;
    margin: 0;
    padding: 0;
}
.error-page p {
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
    margin: 15px 8%;
}
.error-page a {
    display: block;
    padding: 20px 40px;
    color: #6e87a2;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 800;
    margin: 30px 0 180px 0;
}
.error-page a:hover {
    opacity: 0.7;
}
@media (max-width: 550px) {
    .error-page h1 {
        font-size: 180px;
    }
    .error-page p {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    .error-page a {
        margin: 30px 0 120px 0;
    }
}
@media (max-width: 1024px) and (max-height: 500px) {
    .error-page h1 {
        font-size: 150px;
    }
    .error-page h2 {
        font-size: 20px;
    }
    .error-page p {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    .error-page a {
        margin: 10px 0 70px 0;
    }
}