/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@400;600;700&family=Nunito:wght@400;500;700&display=swap');

html, body {

	margin: 0px;
	padding: 0px;

    height: 100%;
    min-height: 100%;

}

.wrapper {

    position: absolute;

	width: 100%;
	height: 100vh;
    min-height: 100%;
	
	background-color:#fef3ee;
    background-image: repeating-linear-gradient(
        to right, 
        #f9e5de 0px,
        #f9e5de 1px,
        #fef3ee 1px,
        #fef3ee 12.48%);
    color: #3c3c36;

    overflow: hidden;

}

/* grid */

.wrapper125left75w {

    position: absolute;

    left: 12.5%;
    top: 150px;

    width: 75%;
    height: 80%;

    z-index: 200;

    overflow-x: hidden;
    overflow-y: auto;

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

        .wrapper125left75w::-webkit-scrollbar { 

             display: none;

        }

    .right67w {

        position: relative;
        float: right;

        width: 67%;
        height: 65%;

        top: 100px;

        z-index: 100;

    }

    .left50w {

        position: absolute;
        float: left;

        width: 50%;
        height: auto;

        padding-top: 200px;

        z-index: 400;

    }

    .right50w {

        position: relative;
        float: right;

        width: 50%;
        height: auto;

    }

    .left67w {

        position: relative;
        float: left;

        width: 67%;
        height: auto;

        margin-bottom: 50px;

        z-index: 400;

    }

    .right75w {

        position: relative;
        float: right;

        width: 75%;
        height: auto;

        margin-bottom: 50px;

        z-index: 400;

    }

    .left100w {

        position: relative;
        float: left;

        width: 100%;
        height: auto;

        margin-top: 100px;

        z-index: 400;

    }

    .left334w {

        position: relative;
        float: left;

        width: 33.4%;
        height: auto;

        margin-top: 50px;

        z-index: 550;

    }

    .right334w {

        position: relative;
        float: right;

        width: 33.4%;
        height: auto;

    }


.wrapper0left50w {

    position: absolute;

    left: 0%;
    top: 0px;

    width: 50%;
    height: 88vh;

    margin: 0;
    padding-top: 8%;

}

.wrapper0right50w {

    position: absolute;

    right: 0%;
    top: 0px;

    width: 50%;
    height: 100vh;

    background-color: #70675a;

    z-index: 50;

}

.wrapper0left375w {

    position: absolute;

    left: 0%;
    top: 0px;

    width: 37.5%;
    height: 100vh;

}

.wrapper0right625w {

    position: absolute;

    right: 0%;
    top: 0px;

    width: 62.5%;
    height: 100vh;

    background-color: #70675a;

    z-index: 50;

}

    .left60w {

        position: relative;
        float: left;

        width: 60%;
        height: auto;

    }

.wrapper0right25w {

    position: absolute;

    right: 0%;
    top: 0px;

    width: 25%;
    height: 100vh;

    background-color: #70675a;

    z-index: 30;

}

.wrapper20left60w {

    position: relative;

    left: 20%;
    top: 150px;

    width: 60%;


}

/* texts */

.h0 {

    font-family: 'Nunito', sans-serif;
    font-size: 96pt;
    font-weight: 700;

    margin: 0px;
    padding: 0px;

}

    #myBrand:hover {

        background-color: #feb101;

    }

    @media only screen and (max-width: 600px) {

        .h0 {

            font-size: 4.5em;

        }

    }

.h1 {

    font-family: 'Martel Sans', sans-serif;
    font-size: 48pt;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50pt;
    
    margin-bottom: 50px;
}

    @media only screen and (max-width: 600px) {

        .h1 {

            font-size: 3em;

        }

    }

.h2 {

    font-family: 'Nunito', sans-serif;
    font-size: 32pt;

}

.h3 {

    font-family: 'Martel Sans', sans-serif;
    font-size: 24pt;
    font-weight: 700;
    text-transform: uppercase;

    margin-top: 100px;

}

    #description {
        
        position: relative;

        margin-top: -30px;
        color: #d0c6b0;

        line-height: 30px;

    }

    @media only screen and (max-width: 600px) {

        #description {

            font-size: 1.4em;

        }

    }

.p1 {

    font-family: 'Martel Sans', sans-serif;
    font-size: 26pt;
}

.p2 {

    font-family: 'Martel Sans', sans-serif;
    font-size: 18pt;
    font-weight: 400;

    color: #70675a;

}

    #hashtag {

        margin-top: 30px;

        color: #3c3c36;

    }

    @media only screen and (max-width: 600px) {

        #hashtag {

            font-size: 1.2em;
            line-height: 25px;

        }

    }

    .p2 a {

        text-decoration: none;
        color: #70675a;

    }

.p3 {

    font-family: 'Martel Sans', sans-serif;
    font-size: 15pt;
    font-weight: 400;

    color: #70675a;
}

.small {

    font-family: 'Martel Sans', sans-serif;
    font-size: 14pt;
    font-weight: 400;

    color: #d0c6b0;
}

    #prYear {

        padding-left: 20px;

    }

/* NAV */
        
.logo {

	position: fixed;
	top: 50px;
	left: 50px;
	
	width: 45px;
	height: 45px;
	
	background: url('../images/logomark.png');
	background-size: cover;
	
	z-index: 800;

}

#menu {

    position: fixed;
	top: 50px;
	right: 50px;
	
	width: 40px;
	height: 36px;
	
	background: url('../images/menu.png');
	background-size: cover;
	
	z-index: 800;

}

    #menu:hover {

        background: url('../images/menu_hover.png');
        background-size: cover;
    }

#nav {

    display: none;
	
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100vw;
	height: 100vh;
	
	background-color: #d0c6b0;
	
	z-index: 900;


}

    #nav ul {
        
        font-family: 'Martel Sans', sans-serif;

        margin-top: 15%;
        margin-left: 12.5%;

        list-style: none;
        font-size: 2.7em;
        font-weight: 700;
        letter-spacing: 10px;
        line-height: 80px;

    }

    #nav ul a {

        text-decoration: none;
        color: #3c3c36;

    }

       #nav ul li {
        
            padding-left: 0px;
        
        }
            
            #nav ul li:hover {
            
                padding-left: 30px;
                transition-duration: 1s;
                -webkit-transition-duration: 1s;		
            
            }


    @media only screen and (max-width: 600px) {

        #nav ul {

            font-size: 2.5em;

            margin-left: 30px;
            margin-top: 200px;

        }


    }

    #close {

        position: fixed;
        top: 50px;
        right: 50px;
        
        width: 40px;
        height: 40px;
        
        background: url('../images/x.png');
        background-size: cover;
        
        z-index: 900;

    }

/* INDEX */

#welcome {

    z-index: 400;
}

    @media only screen and (max-width: 600px) {

        #welcome {

            position: relative;

            padding-top: 50px;
            width: 100%;

        }

        #indexSlider {

            display: block;

            width: 100%;
            top: 50px;

        }

    }

.slider {

    position: relative;

    width: 98.1%;
    height: 100%;


    box-shadow: 15px 15px #d0c6b0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fef3ee;

    overflow: hidden;

}

    @media only screen and (max-width: 600px) {

        .slider {

            height: 26vh;

        }

    }

#sliderimgs {

    position: absolute;

    top: 0;
    left: 0;

    width: 300%;
    height: 100%;

    z-index: 800;

}


    .sliderimg {

        position: relative;

        width: 33.33%;
        height: 100%;

        display: block;

        background-size: cover;
        background-position: center center;

        float: left;

    }

    #slider1 {

        background-image: url('../images/slider_theHaam.png');


    }

    #slider2 {

        background-image: url('../images/slider_maruBowlritto.png');


    }

    #slider3 {

        background-image: url('../images/slider_sellifornia.png');


    }

.sliderMenu67w {

    position: relative;
    float: right;

    top: 15px;
    width: 100%;
    height: 60px;

    z-index: 300;

    }

    @media only screen and (max-width: 600px) {

        .viewproject {

            padding-top: 0px;

        }

    }

.viewproject {

    position: relative;
    left: 0px;

    width: 200px;
    height: 30px;

    padding-top: 15px;
    padding-bottom: 0px;

    float: left;

}

    .viewproject a {

        color: #70675a;
        text-decoration: none;

        font-family: 'Nunito', sans-serif;
        font-size: 1.25em;
        font-weight: 700;

    }

.sliderNav, .arrows {

    position: relative;
    right: 0px;

    width: 80px;
    height: 45px;

    margin-top: 15px;

    float: right;

}

    .arrowLeft {

        background: url('../images/arrow_left.png');
        background-size: cover;
        float: left;

        
        padding: 0px;

        width: 25px;
        height: 30px;

    }

    .arrowRight {

        background: url('../images/arrow_right.png');
        background-size: cover;
        float: right;

        
        padding: 0px;

        width: 25px;
        height: 30px;

    }

    .dot {
      
        float: left;

        cursor: pointer;

        height: 15px;
        width: 15px;

        border-radius: 50%;

        margin: 5px;

        background-color: #fef3ee;

    }

        .dot:hover {

            background-color :#feb101;

        }

        .active {

            background-color: #d0c6b0;

        }

        @media only screen and (max-width: 600px) {

            .dot {

                background-color: #fff;

            }

        }

.footer {
    
    position: fixed;
    bottom: 20px;
    right: 12.5%;

    text-align: right;

    z-index: 500;

}

    .footer a {

        font-family: 'Martel Sans', sans-serif;

        text-decoration: none;
        color: #d0c6b0;

    }

/* ABOUT */

#wework {

    width: 100%;
    height: auto;

    background-color: #70675a;

    display: flex;
    justify-content: center;

}

    .worksteps {

        display: inline-block;
        position: relative;

        width: 250px;
        height: 250px;

        background-color: rgba(208, 198, 176, .8);

        margin: 80px 20px 20px 20px;

    }

        .worknumbers {

            display: block;
            position: relative;

            top: -60px;

            color: #fef3ee;

            font-family: 'Nunito', sans-serif;
            font-size: 5.8em;
            font-weight: 700; 

        }

            .worknumbers:hover {

                color: rgba(254, 177, 1, .6);

            }

        .stepdescription {

            display: block;
            position: relative;

            color: #3c3c36;
            font-family: 'Martel Sans', sans-serif;
            font-size: 18pt;

            text-align: center;

            margin-top: -60px;

        }

        .circle {

            display: none;

            position: absolute;
            top: -40px;
            right: -40px;

            background-color: #70675a;
            border: 5px solid rgba(112, 103, 90, .5); 

            border-radius: 50%;
            -moz-border-radius:50%;
            -webkit-border-radius:50%;

            width: 80px;
            height: 80px;

        }

        .highlight:hover {

            background-color: rgba(254, 177, 1, .6);

        }

@media only screen and (max-width: 600px) {

    #wework {

        display: block;
        align-items: center;

        padding-left: 10px;

    }

    #aboutUs {

        width: 100%;

    }
}
/* PROJECTS */

#projects {

    padding: 0px;

}

    @media only screen and (max-width: 992px) {

        #projects {

            width: 100%;

        }

    }

#projectlists {

    margin-top: 50px;
}

#projectlists ul {

    margin: 0;
    padding: 0;

}

#projectlists ul li {

    list-style-type: none;
    margin: 0;
    padding: 0;

    font-family: 'Nunito', sans-serif;
    font-size: 3.6em;
    font-weight: 700;

    line-height: 100px;

    color: #d0c6b0;
    text-decoration: none;

}

    #projectlists ul a {

        color: #d0c6b0;

        text-decoration: none;

    }

        #projectlists ul li:hover {

            padding-left: 30px;
            transition-duration: 1s;
            -webkit-transition-duration: 1s;
        }


    @media only screen and (max-width: 600px) {

        #projectlists ul li {

            padding-bottom: 20px;

            font-size: 2.8em;
            line-height: 60px;

        }


    }

.projecttitle {

    font-family: 'Nunito', sans-serif;
    font-size: 60px;
    font-weight: 700;

    color: #d0c6b0;

    margin-bottom: 50px;

} 

    @media only screen and (max-width: 600px) {

        .projecttitle {

            font-size: 3em;

        } 

    }

#showcase {

    position: relative;

    width: 100%;
    height: 410px;

    margin-top: 70px;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fef3ee;

    overflow: hidden;

}

    #showimgs {

        position: absolute;

        top: 0;
        left: 0;

        width: 300%;
        height: 100%;

        z-index: 800;

    }


        .showimg {

            position: relative;

            width: 33.33%;
            height: 100%;

            display: block;

            background-size: cover;
            background-position: center center;

            float: left;

        }

    #showcaseMenu {

        position: relative;
        float: right;
    
        top: 15px;
        width: 100%;
        height: 60px;
    
        z-index: 300;

    }

    .backToList {

        position: relative;
        left: 0px;
    
        width: 200px;
        height: 30px;
    
        padding-top: 15px;
        padding-bottom: 0px;
    
        float: left;
    
    }
    
        .backToList a {
    
            color: #fef3ee;
            text-decoration: none;
    
            font-family: 'Nunito', sans-serif;
            font-size: 15pt;
            font-weight: 700;
    
        }

        .backToList a:hover {

            color: #feb101;

        }


.projectPreview {

    position: absolute;

    right: 0%;
    top: 0px;

    width: 50%;
    height: 100vh;

    background-color: #70675a;
    background-image: none;
    background-size: cover;

    z-index: 50;

}


.wrapper100 {

    position: absolute;

    top: -100%;
    left: 0px;

    width: 100%;
    height: 100vh;

    background-color: #7A6F72;
    

    z-index: 450;

}


    #projectDetail {

        opacity: 1;
        transition: opacity 2s ease-in-out;

        z-index: 500;

    }

        #projectDetail .p3 {

            color: #fef3ee;

        }

@media only screen and (max-width: 992px) {

    #detailTexts, #detailImgs {

        width: 100%;

    }

    #showcase {

        height: 28vh;

    }

}


/* CONTACT */

.socialicons {

    width: 100%;
    height: 60px;

}

    .socialicons span {

        margin-top: 20px;

        margin-right: 10px;

        width: 45px;
        height: 45px;

    }

        #instagram {

            display: inline-block;
            background-image: url('../images/icon_instagram.png');

        }

            #instagram:hover {

                background-image: url('../images/icon_instagram_hover.png');

            }

        #etsy {

            display: inline-block;
            background-image: url('../images/icon_etsy.png');

        }

            #etsy:hover {

                background-image: url('../images/icon_etsy_hover.png');

            }


#write {

    padding-top: 75px;

}

#contactFormWrapper {

    position: relative;

    width: 100%;
    height: 500px;

    margin-top: 50px;
            
    z-index: 400;

}

input {

    width: 62.7%;
    height: 40px;

    margin-top: 30px;
    padding-left: 3%;

    border: none;

    background-color: #fef3ee;

}

    input::placeholder {

        color: #d0c6b0;
        text-decoration: none;

        font-family: 'Nunito', sans-serif;
        font-size: 10pt;
        font-weight: 400;

        letter-spacing: 2px;

    }

.inputboxlong {

    width: 100%;
    height: 40px;

    margin-top: 30px;
    padding-left: 3%;

    border: none;

    background-color: #fef3ee;
}

    input[type=submit] {

        background-color: #d0c8b0;

        color: #70675a;
        font-family: 'Nunito', sans-serif;
        font-size: 10pt;
        font-weight: 400;
        letter-spacing: 2px;

        width: 16%;

        padding: 0%;

    }

    input[type=submit]:hover {

        background-color: #feb101;

        padding-left: 30px;
        transition-duration: 1s;
        -webkit-transition-duration: 1s;

    }

textarea {

    width: 94%;
    height: 300px;

    margin-top: 30px;

    border: none;

    background-color: #fef3ee;

    padding: 3%;

}

    textarea::placeholder {

        color: #d0c6b0;
        text-decoration: none;

        font-family: 'Nunito', sans-serif;
        font-size: 10pt;
        font-weight: 400;

        letter-spacing: 3px;

    }

@media only screen and (max-width: 600px) {

    #connect, #write {

        width: 100%;
        position: relative;

    }

        #connect .p3 {

            color: #fef3ee;

        }

    #contactbg {

        width: 100%;

    }

}