@charset "utf-8";

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


html, body {
 margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
  font-family: 'Lato', sans-serif;
  color: #382718;
  
  
}


#container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



#container ul, #container ol {
    padding-left: 90px;
    padding-right: 70px;
}

h1, h2, h3, h4 .display-font {
    font-family: 'Montserrat', sans-serif; 
    line-height: 2rem;
    font-weight: 400;
}

h2 {
    font-size: 2.5rem; 
    margin: 10px 0; 
    font-weight: 400; 
    line-height: 2.6rem;
}

h3 {
    font-size: 1.4rem; 
    margin: 8px 0;
    font-weight: 400; 
}

h4 {
    font-size: 1.2rem; 
    margin: 6px 0;
    font-weight: 400; 
}

p {
    max-width: 600px;
    
}


a:link, a:visited {
    color: #E8901B;
    text-decoration: underline;
}

a:hover, a:active {
  color: #003399;
  text-decoration: underline;
}



#circle .phone a:link, 
#circle .phone a:visited {
    color: black; /* Normal state */
    text-decoration: none; /* Optional: removes underline */
}

#circle .phone a:hover, 
#circle .phone a:focus {
    color: #FFF6E5; /* Hover or focus state (optional) */
}

#circle .phone a:active {
    color: black; /* Active state */
}


#projects, 
.blackOrangeLineDown,
#designProcessExamples {
    transform: translateZ(0);
}



header {
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    background-color: #000000;
    padding-top: 20px;
    padding-right: 70px;
    padding-left: 70px;
    padding-bottom: 96px;
}




header p {
    color: #E8901B; 
    font-size: 1.8rem; 
    line-height: 2.2rem;
    margin-right: auto;  
}

header img {
    height: auto;
    width: 343px; 
    margin-top: -21px;
}


.preIntro {
    position: relative; 
    text-align: center; 
    background-color: #000000; 
}

.preIntro h1 {
    position: absolute; 
    top: 42%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 10; 
    color: #FFF6E5;
    font-size: 3.4rem;
    font-weight: 400
}



.preIntro img {
    width: 100%; 
    height: auto; 
    display: block; 
}


.intro {
    background-color: #000000;
    padding-right: 0px;    
}
.tree {
    width: 100%;
}


.image-wrapper {
    position: relative;
    width: 100%; 
}

#blackOrangeDown, #orangeUp {
    position: absolute;
    width: 100%;
    height: 84px; 
}

#blackOrangeDown {
    top: 0; 
    background-image: url(images/blackLineDown.png); 
}

#orangeUp {
    bottom: 0; 
    background-image: url(images/orangeUpBlack.png); 
}



.creative {
    width: 100%;
}



.introText {
    background-color: #E8901B; 
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 96px; 
}
.introText h2 {
    padding-left: 70px;
    padding-right: 70px;
    font-weight: 700;
    
}
.introText h3 {
    padding-left: 70px;
    padding-right: 70px;
    font-weight: 700;
}



.introText p {
    padding-left: 70px;
    padding-right: 70px;
}

.text-with-image {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    background-color: #E8901B; 
    padding-right: 0px; 
    margin-top: -20px;
}


.text-with-image .text-content {
    flex: 1; 
    margin-right: 0px; 
    
}


.text-with-image img.creative {
    width: 330px; 
    height: auto;
    justify-self: end; 
    padding-right: 70px;
}
    

.skills {
    display: grid;
    background-color: #E8901B;
    padding-bottom: 110px;
    background-image: url(images/dots.png);
    background-repeat: no-repeat;
    background-position: center 60px;
    
   
}

.skills h2 {
    padding-top: 10px; 
    padding-left: 70px;
    padding-right: 70px;
    font-weight: 400;
    margin-bottom: -10px;
}
    
.skill-blockLeft {
    width: 450px;
    background-color: #000000;
    color: #FFF6E5;
    padding: 20px;
    border-bottom-right-radius: 180px;
    border-top-right-radius: 180px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}


.skill-blockRight {
    justify-self: end;
    width: 450px;
    background-color: #000000;
    color: #FFF6E5;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 80px;
    padding-bottom: 20px;
    
    border-bottom-left-radius: 180px;
    border-top-left-radius: 180px;
    
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.skill-block ul {
    list-style: none; 
    padding-left: 0;
}

.skill-block li {
    padding-bottom: 10px;
}

 
    

.lineOrangeUp {
    height: 85px;
    background-image: url(images/orangeDown.png);
    background-color: #FFF6E5;
}


.cta {
    display: flex;
    align-items: center; 
    justify-content: flex-start;
    background-color: #FFF6E5; 
    padding-top: 80px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 90px; 
}
.cta div p {
    padding-right: 70px;
    padding-left: 70px;
}

.cta div h3 {
    padding-right: 70px;
    padding-left: 70px;
    font-weight: 700;
}





.cta img.call {
    width: 350px; 
    height: auto; 
    margin-right: 20px; 
    padding-left: 70px;
    
}
    

.call {
    width: 100%;
}


#blackUp {
    height: 85px;
    background-image: url(images/BlackOrangeDevider.png);
    background-color: #FFF6E5;
}

#blackUpLine {
    height: 85px;
    background-image: url(images/BlackOrangeDevider.png);
    background-color: #FFF6E5;
}


#projects {
    width: 100%;
    max-width: 960px; 
    margin: auto; 
    display: grid;
    gap: 20px; 
    padding: 20px 70px;
    background-color: #000000; 
}
#projects h2 {
    color: #FFF6E5;
    margin-bottom: 0px;
    padding-bottom: 30px;
    padding-top: 30px;
}


#projects p {
    color: #FFF6E5;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-bottom: 90px;
}

.projectBox {
    max-width: 820px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.project {
    width: 350px; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}


.wideVideo, .wideImg {
    width: 820px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
}


.wideVideo iframe {
    width: 100%; 
    height: 462px;
}


.wideImg img {
    width: 100%; 
    height: auto; 
}

.blackOrangeLineDown {
background-image: url(images/blackOrangeDownLine.png);
    width: 100%;
    height: 85px;
   background-color: #FFF6E5;
   
}

.blackOrangeLine {
    background-image: url(images/BlackOrangeDevider.png);
    width: 960px;
    height: 89px;
    background-color: #FFF6E5;
}

#designProcess {
    background-color: #FFF6E5;
    padding-bottom: 0px;
    margin-top: -1px;
   
}

#designProcess h2 {
    color: #000000;
    margin-bottom: 0px;
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 70px;
    padding-right: 70px;
}



#designProcess img {
    display: block;      
    margin-left: auto;    
    margin-right: auto;  
    max-width: calc(100% - 140px); 
    padding-bottom: 85px;
    
    
}

#designProcessExamples {
    width: 100%;
    max-width: 960px;  
    margin: auto; 
    display: grid;
    gap: 20px; 
    padding: 20px 70px;
    background-color: #000000; 
}

.processBox {
    max-width: 820px; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}

#designProcessExamples h2 {
    color: #E8901B;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 70px;
    
}

#designProcessExamples p {
    max-width: 350px; 
    margin: auto; 
    color: #FFF6E5;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-bottom: 90px;
}

#contact {
    background-color: #FFF6E5;
    padding-top: 20px;
    padding-bottom: 250px;
    margin-top: -1px;
    
    
    
}
#contact h2 {
    color: #E8901B;
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 70px;
    padding-right: 70px;
}

#contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 300px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 300px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: 0px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 4.1vw;
}





footer {
    background-color: #000000;
    padding-top: 400px;
    margin-bottom: -2px;
    margin-top: -250px;
    
}
footer p {
    padding-top: 0px;
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 30px;
    color: #E8901B;
    font-size: 0.9rem;
    margin-bottom: 0px;
    
}


footer img {
    width: 100%;
    
}



@media (max-width: 768px) {
  
    #container {
        width: 100%;
        padding: 0 0px;  
    }
#container header p {
    text-align: center;
    padding-top: 30px;
    margin: auto;
}


    
    
  header {
    display: flex;
    flex-direction: column;  
    align-items: center;  
   
    padding-right: 20px;
    padding-left: 20px;
    margin-top: -30px;
    }

    header img {
    order: -1;  
    width: 100%;  
    max-width: 500px; 
    height: auto;  
    margin-bottom: 20px;
    margin-top: -40px;
       
    }
.preIntro h1 {
    font-size: 7vw;
}
    
.text-with-image .text-content p,h2,h3 {
    padding: 0px;
}
.introText .text-with-image .creative {
    width: 300px;
    ;
    height: 300px;
}
.skill-blockLeft {
width: 400px;
    background-color: #000000;
    color: #FFF6E5;
    padding: 20px;
    border-bottom-right-radius: 180px;
    border-top-right-radius: 180px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-right: 50px;
}

    
    .skill-blockRight {
    justify-self: end;
    width: 430px;
    background-color: #000000;
    color: #FFF6E5;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 50px;
    padding-bottom: 20px;
  
    border-bottom-left-radius: 180px;
    border-top-left-radius: 180px;
   
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}




    header p {
        text-align: center; 
        width: 100%;  
    }
#container .cta .call {
    width: 350px;
    ;
    height: 300px;
}
#container .cta #blackUp {
    height: 0px;
}
 
    .introText h2 {
    padding-left: 0px;
    padding-right: 0px;
    font-weight: 700;
    
}
.introText h3 {
    padding-left: 0px;
    padding-right: 0px;
    font-weight: 700;
}
    
    
    .cta {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
#container #designProcess .blackOrangeLine {
    width: 100%;
}


    .cta img.call {
        order: 2; 
        width: 350px; 
        height: 250px;
        max-width: 350px; 
        margin-top: 20px; 
    }

    .cta div {
        order: 1;
        width: 100%; 
    }
    
    
    .wideVideo, .wideImg {
    width: 100%;
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
}

.wideVideo iframe {
    width: 100%; 
    height: 462px; 
}

.wideImg img {
    width: 100%; 
    height: auto; 
}



    .creative, .call, .tree, header img, .project img, .wideImg img {
        width: 100%;
        height: auto;  
        margin-top: 10px;  
    }

    #projects, #designProcessExamples {
        grid-template-columns: 1fr;  
    }

    .text-with-image, .cta {
        flex-direction: column;  
        align-items: center;  
    }

    .skill-blockLeft, .skill-blockRight {
        width: auto;  
        padding: 15px;  
    }

    .skill-block ul {
        padding-left: 10px;  
    }

    .wideVideo iframe, .wideImg img {
        width: 100%; 
        padding: 0; 
    }

 #projects .project img[src*="Skateboard_design.png"] {
        width: 40%; 
        height: auto; 
        margin-left: auto; 
        margin-right: auto; 
    }    
    
    
    #designProcessExamples .process img[src*="Skateboard_design_process.png"]
 {
     width: 30%; 
        height: auto; 
        margin-left: auto; 
        margin-right: auto;
}
    
 
  
    
    #contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 250px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 200px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: 0px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 4.1vw;
}





footer {
    padding-top: 300px;
    margin-bottom: -2px;
    margin-top: -250px;
    
    
    

 
    
    


}



@media (max-width: 428px)
  {
      
   #projects, #designProcessExamples {
        padding-left: 40px;
        padding-right: 40px; 
    }

    #projects .project img, #projects .wideVideo iframe, #projects .wideImg img,
    #designProcessExamples .process img {
        width: 100%;  
        height: auto; 
        display: block;
        margin-left: auto; 
        margin-right: auto; 
    }

    #projects .project, #projects .wideVideo, #projects .wideImg,
    #designProcessExamples .process {
        width: 100%;
        padding: 0; 
        margin: 0 auto; 
    }

    #projects p, #designProcessExamples p {
        text-align: left; 
        padding-top: 5px;
        padding-bottom: 70px;
    }
#container #designProcess img {
   padding-left: 0; 
        padding-right: 0; 
        max-width: calc(100% - 80px);
        display: block;
        margin-left: auto;
        margin-right: auto;
}

}
     
#designProcess h2 {
    padding-left: 40px;
    padding-right: 40px;
    }


      

#container .introText h2 {
    padding-left: 30px;
    padding-right: 30px;
}
#container .introText h3 {
    padding-left: 30px;
    padding-right: 30px;
}
      
#container .introText p {
    padding-left: 30px;
    padding-right: 30px;
}
      
.cta div h3 {
    padding-left: 30px;
    padding-right: 30px;
}

 .cta div p {
    padding-left: 30px;
     padding-right: 30px;
}

  #contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 150px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 100px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: -5px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 4.1vw;
}





footer {
    padding-top: 200px;
    margin-bottom: -2px;
    margin-top: -250px;
    }
    
    footer p {
        font-size: 0.8rem;
    }
    
    
@media (max-width: 550px)
  {
      
   #projects, #designProcessExamples {
        padding-left: 40px; 
        padding-right: 40px; 
    }

    #projects .project img, #projects .wideVideo iframe, #projects .wideImg img,
    #designProcessExamples .process img {
        width: 100%; 
        height: auto; 
        display: block; 
        margin-left: auto;  
        margin-right: auto; 
    }

   
    #projects .project, #projects .wideVideo, #projects .wideImg,
    #designProcessExamples .process {
        width: 100%;
        padding: 0; 
        margin: 0 auto; 
    }

    
    #projects p, #designProcessExamples p {
        width: 100%;
        text-align: center; 
        margin-left: 0px;
        margin: auto;
        padding-left: 0px; 
        padding-top: 5px;
        padding-bottom: 70px;
    }
#container #designProcess img {
   padding-left: 0; 
        padding-right: 0; 
        max-width: calc(100% - 80px);
        display: block;
        margin-left: auto;
        margin-right: auto;
}

}
     
#designProcess h2 {
    padding-left: 40px;
    padding-right: 40px;
    }



#container .introText h2 {
    padding-left: 30px;
    padding-right: 30px;
}
#container .introText h3 {
    padding-left: 30px;
    padding-right: 30px;
}
      
#container .introText p {
    padding-left: 30px;
    padding-right: 30px;
}
      
.cta div h3 {
    padding-left: 30px;
    padding-right: 30px;
}

 .cta div p {
    padding-left: 30px;
     padding-right: 30px;
}    


 #contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 150px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 100px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: -5px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 4.1vw;
}




footer {
    padding-top: 200px;
    margin-bottom: -2px;
    margin-top: -250px;
    }
    
    footer p {
        font-size: 0.8rem;
    }
    
    
    @media only screen and (min-width: 551px) and (max-width: 767px) {

         #contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 200px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 200px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: -5px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 4.1vw;
}





footer {
    padding-top: 200px;
    margin-bottom: -2px;
    margin-top: -250px;
    }
    
    footer p {
        font-size: 0.8rem;
    }
        
    }
        

@media only screen and (min-width: 768px) and (max-width: 959px) {

#contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 300px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 0px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: 0px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 4.1vw;
}





footer {
    background-color: #000000;
    padding-top: 400px;
    margin-bottom: -2px;
    margin-top: -150px;
    
    
}

    }
}




	
.animate {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  animation-fill-mode: forwards;  /* This makes sure the final properties are retained after animation */
}

.is-visible {
    animation: fadeInUp 1s ease-out forwards;  /* Using 'forwards' to maintain the style state after the animation ends */
    padding-left: 0px;
}



@media only screen and (min-width: 960px) {


#contact h3 {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 400px;
}


#circlePosition {
    position: relative;
    height: 20px; 
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-top: 0px;
    margin-left: 330px;
}


#circle {
    
    position: relative; 
    text-align: center; 
     width: 60vw;  
    height: 60vw; 
    max-width: 600px;
    max-height: 600px;
    background-color: #E8901B; 
    border-radius: 50%; 
    margin: 40px auto; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px;
    
}

    
#circlePosition #circle .phone {
    font-size: 3.4vw;
    font-weight: 700;
    margin-bottom: 0px; 
    padding-bottom: 0px;
}
    
#circlePosition #circle .email {
    font-size: 2.3vw;
}





footer {
    background-color: #000000;
    padding-top: 350px;
    margin-bottom: -2px;
    margin-top: -250px;
    
    
}
    
    
    

    }



@media only screen and (min-width: 1200px) {

body {
    background-image: url(images/dotsOrangeBgSm.jpg);
    background-position: center top;
    background-repeat: repeat;
}

    


	
.animate {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  animation-fill-mode: forwards;  /* This makes sure the final properties are retained after animation */
}

.is-visible {
    animation: fadeInUp 1s ease-out forwards;  /* Using 'forwards' to maintain the style state after the animation ends */
    padding-left: 0px;
}

}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}