/* base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

a {
    color: #f22d00;
}

a:hover {
    color: #aa2608;
}

body {
    background-color: rgb(255, 222, 204);
    font-family: sans-serif;
    padding: 40px;
}



/* off-screen-menu */
.off-screen-menu {
    background-color:  rgb(255, 222, 204);
    height: 100vh;
    width: 100%;
    max-width: 450px;
    position: fixed;
    top: 0;
    right: -450px;
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    text-align: center;
    font-size: 3rem;
    transition: .3s ease;
}
.off-screen-menu.active {
    right: 0;
}



/* nav */
nav {
    
    padding-bottom: 30px;
    display:flex;
    background-color: rgb(255, 222, 204);
}


/* ham menu */
.ham-menu {
    height: 50px;
    width: 40px;
    margin-left: auto;
    position: relative;
}
.ham-menu span {
    height: 5px;
    width: 100%;
    background-color: #f75222;
    border-radius: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}
.ham-menu span:nth-child(1) {
    top: 25%;
}
.ham-menu span:nth-child(3) {
    top: 75%;
}
.ham-menu.active span {
    background-color: #f75222;
}
.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ham-menu.active span:nth-child(2) {
    opacity: 0;
}
.ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* everything*/

#logo { 
    
    width: 60px;
    position: absolute;
    margin-left: auto;
}

header {
    width: 100%; 
    float: left;
    border-bottom: solid rgb(240,78,54);
}

.returnpolicy{
    width: 100%; 
    float: left;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 18px;   
}

.home{
    font-size: 18px;
    width: 100%;
    float: left;
    padding-bottom: 10px;
    padding-top: 10px;
    
}
footer{
    
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    text-align: left;
    font-size: 10px;
    color: rgb(240,78,54);
    clear: both;
  
}

#fb{
    width: 30px;
    float:right;
   
}

#insta{
    width: 30px;
    float: right;
    
    
}

#tiktok{
    
    width: 30px;
    float: right;
   
}

.row::after{
    content: "";
    clear: both;
    display: table;
}

[class*="col-"]{
    float: left;
    padding: .5px;
}

.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

#dayofthedead{
    width: 50%;
}

#youmatter{
    width: 50%;
}

#teachershirt{
    width: 50%;
}

#godsshirt{
    width: 50%;
}

#deathandlife{
    width: 50%;
}

#viejo{
    width: 50%;
}

.message {
    
    padding-top: 100px;
    padding-bottom: 20px;
    font-size: 18px;
    color: #606060;
}

#productname{
    padding: 5px;
    font-size: 10px;
    color: #606060;
    text-align: center;
    }
.col-5{
    text-align: center;
    
}

.about {  
    width: 100%;
    float: left;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 18px;
}

.portfolio{
    width: 100%;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
}