* {
    scroll-behavior: smooth;
    font-family: 'Times New Roman', Times, serif;
}

body {
    margin:0px;
    background-color:rgb(98, 112, 107);
}

.instagram {
width:100%;
display:flex;
justify-content: center;
align-content: center;
box-sizing: border-box;
margin:0px;
}

.etsyLogoText{
    display:flex;
    justify-content: center;
    text-decoration: none;
    font-size: 2em;
    color:white;
}
.etsyLogoText:hover{
    color:#ed6a06;
    transition:0.5s;
}

.columncontainer{
    padding-top:50px;
    padding-bottom:50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 50vw;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    .maincontent{
        background-color:transparent;
        box-sizing: border-box;
        position: relative;
        height:auto;
        width: 50%;
    }

    .imagecontainer{
        position: relative;
        height: 80%;
        width: 50%;
        background-size:contain;
        
        .image{
            object-fit: cover;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color:transparent;
        }
        .etsylogo{
            width: 8vw;
            height: 5vw;
            object-fit: cover;
            position: absolute;
            left: 0px;
            bottom: 0px;
            z-index: 2;
            padding-left: 50px;
        }
    }
}
.contentpadding{
    position:relative;
    width: calc(100% - 20vw);
    padding-left:10vw;
    padding-right:10vw;
}
p {
    text-align:center;
    color:white;
    font-size: 22px;
}

h2 {
    text-align:center;
    color:white;
    font-size:40px;
}

.logo {
    display:flex;
    height: 15vw;
    width: 50%;
    background-color:white;
    display:flex;
    justify-content: center;
    align-content: center;
    border: 0px;
    border-bottom: 0px solid #ed6a06;
    
}


.navbuttons{
    width:50%;
    display: flex;
    position:relative;

}
.toggleNav{
    display:none;
}


nav{
    background-color: white;
    overflow:hidden;
    position:relative;
    display: flex;
    height: 8vw;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: 0px;
    border-bottom: 2px solid #ed6a06;
    .nav{
        display: flex;
        justify-content:center;
        position:relative;
        height:100%;
        width:50%;
        text-decoration: none;
        color:black;
        font-size: 40px;
        
    }
    .nav:hover{
        display: flex;
        justify-content:center;
        position:relative;
        height:100%;
        width:50%;
        text-decoration: none;
        color:transparent;
        font-size: 40px;
        color:#ed6a06;
        transition: 0.3s;
    }
}
.rimage {
   padding-left: 50px;
}
.leimage{
    padding-right:50px;
    background-color: transparent;
}
.shadow-drop-br {
    -webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.75);
}
.shadow-drop-bottom {
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
}

.formcontainer{
    width:100%;
    display:flex;
    justify-content: center;
    align-content: center;
}
form {
    margin:5%;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 2vw 2vw;
    width: 37.5%;
    height: 50%;
    border-radius:10px ;
}

form h1 {
    text-align: center;
    color:black;
    font-weight: 800;
    margin-bottom: 20px;
}

form input, form textarea {
    border:0;
    border-radius:10px;
    background:lightgrey;
    margin:10px 0;
    padding: 20px;
    outline: none;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 1000;
}

form button {
    border:0;
    border-radius:10px;
    color:white;
    background:#ed6a06;
    padding: 15px;
    margin: 30px 25%;
    font-size: 20px;
    
}
button:not(#toggleNav):hover{
    border:0;
    border-radius:10px;
    color:#ed6a06;
    background: lightgrey;
    padding: 15px;
    margin: 30px 25%;
    font-size: 20px;
    cursor:pointer;
}

.ty{
    margin-top:13vw;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 30px;
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-content:center;
    align-items: center;
}
#toggleNav{
    display:none;
}


footer{
    box-sizing: border-box;
    width:100%;
}
.formcontainer{
    width:100%;
    padding: 70px 30px 20px
}
.socialIcons{
    display:flex;
    justify-content: center;
}
.socialIcons a{
    background-color: #ed6a06;
    text-decoration: none;
    padding:12px 15px;
    margin: 50px;
    border-radius: 40%;
    color:white;
}

 .socialIcons a i{
    font-size: 2em;
    opacity: 0.9;
}
 .socialIcons a:hover{
    background-color:white;
    color:#ed6a06;
    transition:0.3s;
}
 .footerNav{
    margin:30px;
}
 .footerNav ul{
    padding:0px;
    display: flex;
    justify-content: center;
    list-style-type: none;
}
 .footerNav ul li a{
    color:white;
    margin:20px;
    text-decoration: none;
    font-size: 1.3em;
    font-weight: 400;
    opacity: 0.7;
    transition: 0.5s;
}
 .footerNav ul li a:hover{
    color:#ed6a06;
    opacity: 1;
}


@media only screen and (max-width: 1400px) {
    .columncontainer{
        padding: 0px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        height:100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        .maincontent{
            padding: 2vw 15vw;
            background-color:transparent;
            box-sizing: border-box;
            position: relative;
            height:auto;
            width: 100%;
        }
    
        .imagecontainer{
            padding-bottom: 2vh;
            position: relative;
            height: 40vw;
            width: 60vw;
            background-size:contain;
            
            .image{
                object-fit: cover;
                width: 100%;
                height: 100%;
                z-index: 1;
                background-color:transparent;
            }
            .etsylogo{
                width: 20vw;
                height: 10vw;
                object-fit: cover;
                position: absolute;
                left: 0px;
                bottom: 0px;
                z-index: 2;
                padding-left: 0px;
                padding-bottom: 2vh;
            }
        }
    }
    .leimage, .rimage {
        padding: 0px;
    }
    .contentpadding{
        width:100%;
        padding: 0px;
    }
    .reverselayout{
        flex-direction: column;
    }

    nav.shadow-drop-bottom{
        border-bottom: 2px solid #ed6a06;
    }
    nav{

        background-color: white;
        overflow: auto;
        position: relative;
        top:0px;
        display: flex;
        height: auto;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 0px;
        .nav{
            display: flex;
            align-items:flex-end;
            justify-content:center;
            position:relative;
            height:100%;
            text-decoration: none;
            color:black;
            font-size: 30px;
            
        }
        .nav:hover{
            display: flex;
            justify-content:center;
            position:relative;
            height: auto;
            width: auto;
            text-decoration: none;
            font-size: 30px;
            color:#ed6a06;
        }
    }

    .logo {
        padding:1vh;
        height: auto;
        width: auto;
        background-color:white;
        display:flex;
        justify-content: center;
        align-content: center;
        border: 0px;
        /* border-bottom: 2px solid #ed6a06; */

          >img{
            width: 30%;
            height: auto;
        }
    }
    p {
       font-size: 18px;
       font-weight: 1;
    }
    h2 {
       font-size: 20px;
    }
    .navbuttons{
        right:0;
        color:white;
        width: 100%;
        display:block;
        background-color: white;
        /* display:none; */
        padding: 1vh 0px;
        border-bottom:2px solid #ed6a06;
        .nav{
            width: 100%;
        }
    
    }
    .navbuttons.hidden{
        display: none;
        /* border-bottom:2px solid #ed6a06; */
    }
    #toggleNav{
        display:block;
    }
    .toggleNav{
        display:block;
        position:absolute;
        top:10%;
        right:5%;
    }
    .formcontainer{
        width:100%;
        display:flex;
        justify-content: center;
        align-content: center;
    }
    form {
        margin:5%;
        background-color: white;
        display: flex;
        flex-direction: column;
        padding: 2vw 2vw;
        width: 75%;
        height: 80%;
        border-radius:10px ;
    }
    
    form h1 {
        text-align: center;
        color:black;
        font-weight: 800;
        margin-bottom: 20px;
        font-size:large;
    }
    
    form input, form textarea {
        border:0;
        border-radius:10px;
        background:lightgrey;
        margin:10px 0;
        padding: 10px;
        outline: none;
        font-size: 15px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 1000;
    }
    
    form button {
        border:0;
        border-radius:10px;
        color:white;
        background:#ed6a06;
        padding: 10px;
        margin: 30px 25%;
        font-size: 25px;
        
    }
}

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

    .etsyLogoText{
        font-size: 1.3em;
    }
    .etsyLogoText:hover{
        color:#ed6a06;
        transition:0.5s;
    }
    .footerNav ul li a{
        font-size:1em;
        margin:15px;
    }
    .columncontainer{
        padding: 0px;
        padding-top: 5vh;
        box-sizing: border-box;
        position: relative;
        display: flex;
        height:100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        .maincontent{
            padding: 0px 10vw;
            background-color:transparent;
            box-sizing: border-box;
            position: relative;
            height:auto;
            width: 100%;
        }
    
        .imagecontainer{
            padding-top:5vh;
            padding-bottom: 2vh;
            position: relative;
            height: 30vh;
            width: 90%;
            background-size:contain;
            
            .image{
                object-fit: cover;
                width: 100%;
                height: 100%;
                z-index: 1;
                background-color:transparent;
            }
            .etsylogo{
                width: 20vw;
                height: 10vw;
                object-fit: cover;
                position: absolute;
                left: 0px;
                bottom: 0px;
                z-index: 2;
                padding-left: 0px;
                padding-bottom: 2vh;
            }
        }
    }
    .leimage, .rimage {
        padding: 0px;
    }
    .contentpadding{
        width:100%;
        padding: 0px;
    }
    .reverselayout{
        flex-direction: column;
    }
    nav.shadow-drop-bottom{
        border-bottom: 2px solid #ed6a06;
    }
    nav{

        background-color: white;
        overflow: auto;
        position: relative;
        top:0px;
        display: flex;
        height: auto;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 0px;
        /* border-bottom: 0px solid #ed6a06; */
        .nav{
            display: flex;
            align-items:flex-end;
            justify-content:center;
            position:relative;
            height:100%;
            text-decoration: none;
            color:black;
            font-size: 20px;
            
        }
        .nav:hover{
            display: flex;
            justify-content:center;
            position:relative;
            height: auto;
            width: auto;
            text-decoration: none;
            font-size: 20px;
            color:#ed6a06;
        }
    }

    .logo {
        padding:1vh;
        height: auto;
        width: auto;
        background-color:white;
        display:flex;
        justify-content: center;
        align-content: center;
        border: 0px;
        /* border-bottom: 2px solid #ed6a06; */

          >img{
            width: 30%;
            height: auto;
        }
    }
    p {
       font-size: 13px;
       font-weight: 1;
    }
    h2 {
       font-size: 20px;
    }
    .navbuttons{
        right:0;
        color:white;
        width: 100%;
        display:block;
        background-color: white;
        /* display:none; */
        padding: 1vh 0px;
        border-bottom:2px solid #ed6a06;
        .nav{
            width: 100%;
        }
    
    }
    .navbuttons.hidden{
        display: none;
        border-bottom:2px solid #ed6a06;
    }
    #toggleNav{
        display:block;
    }
    .toggleNav{
        display:block;
        position:absolute;
        top:10%;
        right:5%;
    }
    .formcontainer{
        width:100%;
        display:flex;
        justify-content: center;
        align-content: center;
    }
    form {
        margin:5%;
        background-color: white;
        display: flex;
        flex-direction: column;
        padding: 2vw 2vw;
        width: 75%;
        height: 80%;
        border-radius:10px ;
    }
    
    form h1 {
        text-align: center;
        color:black;
        font-weight: 300;
        margin-bottom: 20px;
        font-size:large;
    }
    
    form input, form textarea {
        border:0;
        border-radius:10px;
        background:lightgrey;
        margin:10px 0;
        padding: 10px;
        outline: none;
        font-size: 15px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 400;
    }
    
    form button {
        border:0;
        border-radius:10px;
        color:white;
        background:#ed6a06;
        padding: 10px;
        margin: 30px 25%;
        font-size: 25px;
        
    }
}