html {
    background-color: #3c131b;
    color: #3c131b;
    font-family: "degular", sans-serif;
    font-style: normal;
   
    
   
}

body {
    margin:0;
    

}


@media (min-width: 1001px) {
/*********************************************
type
***********************************************/
h1 {
    color: #ffeaca;
    font-family: "Degular-display",  Arial, Helvetica, sans-serif;
    font-weight: 750;
    font-size: 15rem;
    line-height:10rem;
    text-transform: uppercase;
}

h2 {
    color: #ffeaca;
    font-family: "degular-display" Arial, Helvetica, sans-serif;
    font-weight:200;
    font-size: 4rem;
    letter-spacing: 0.1rem;

    overflow-wrap: break-word;
}

h3 {
   color: #ffeaca;
    font-family: "degular" Arial, Helvetica, sans-serif;
    font-weight:200;
    font-size: 5rem;
    letter-spacing: 0.1rem;
   
}

h4 {
    color: #ffeaca;
    font-family: "degular" Arial, Helvetica, sans-serif;
    font-weight:100;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    

}

h5 {
    color: #ffeaca;
    font-family: "degular";
    font-weight:600;
    font-size: 1.5rem;
    margin:1rem 0 1rem 0;
}

a, svg {
    color:#ffeaca;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.5s ease;
   text-decoration: none;
}

a:hover {
    color:#f05e2c;
    font-size: 2rem;
    font-weight: 700;
    transition: all 0.5s ease;
}


p {
    font-size: 1.5rem;
    color:#ffeaca;
}
/*********************************************
header
***********************************************/

header {
    border-bottom-left-radius: 50rem;
    border-bottom-right-radius: 50rem;
    
   
}

.headergrid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

header nav ul, .headergrid svg {
    display: flex;
    justify-content: center;
    list-style: none;
}

header a{
    color:#ffeaca;
    padding: 5rem;
}

.headerlinks {
    padding:  2rem 0 1rem;
    align-items: center;
}

.peek hr {
  padding: 0;
  margin: 0;
}

.hr3 {
    padding: 3rem;
    border: 0.8rem solid #f05e2c;
}
.hr2 {
   border: 0.8rem solid #fbad23;
}

.hr1 {
   border: 0.8rem solid #1b7d71;
}



/*********************************************
Hero /Hero About Page
***********************************************/
.hero {
    background-attachment: fixed;
    background-image: url("images/herobg.png");
    padding: 0.5rem 5rem ;

}

.hero h1, .hero h2{
    margin: 0;
}
.heroh1 {
    margin:3rem 0 0 0;
 
}
.h2box {
    margin: 1rem 0 2rem 0;
}

.heroabt {
   display: grid; 
    background:#f05e2c;
     grid-template-columns: 1fr 1fr 1fr;
   border-bottom-left-radius:5rem;
    border-top-left-radius:5rem;
    padding: 1rem 4rem;
    margin-left: 10rem;
    
}
.contactimg {
    background:#f05e2c;
margin: 3rem;
  border-radius: 20rem;
  padding: 3rem;
}
.herocontact {
      display: grid; 
    background:#f05e2c;
     grid-template-columns: 1fr 1fr 1fr;
   border-bottom-left-radius:5rem;
    border-top-left-radius:5rem;
    padding: 1rem 4rem;
    margin-left: 10rem;

   

}
.abt {
    display: grid; 
    grid-template-columns: 1fr 2fr;
    margin:3rem 0;
}


.herocopy{
    display: flex;
    padding: 4rem;
}


.abtheading h2 {
    font-weight: 800;
    text-transform: uppercase;
    

}



.abtimg {
    background:#f05e2c;
margin: 3rem;
  border-radius: 50rem;
}

.abtheading {
   
    line-height: 1rem;
}


.galleryimgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 10rem;
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
}
.gallerycontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}


/*********************************************
MILLIPEDE 
***********************************************/


.w3-half img
{margin-bottom:-6px;
    margin-top:16px;
    opacity:0.8;
    cursor:pointer;
}
.w3-half img:hover{opacity:1}

.heromillipede {
     background-attachment: fixed;
    background-image: url("images/YahaUsagi.jpg");
    padding: 10rem;
}

.heroh1millipede h1{
    margin:0;

    
}
.ph3 {
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;
    margin:0;
}
.w3-main {
    margin:0;
}


.firstcontainer {
    margin-top:2rem;
    padding: 0 10rem;
}

.millhr {
    width: 10rem;
    border: 0.4rem solid #ffeaca;
    margin:0;

}

.millcopy {
    max-width: 60%;
}
.millgrid {
    display:grid;
    grid-template-columns: 1fr 1fr;
}

.millimg {
    display:flex;
    flex-direction: column;
}
.millex {
    max-width: 50%;
    object-fit: contain;
}

/*********************************************
footer
***********************************************/
footer {
    background-color:#3c131b;
}

footer nav ul {
    display:flex; 
    justify-content: center;
}

footer nav ul li {
    list-style-type: none;
    padding: 3rem;
    transition: all 0.5s ease;
}

footer nav ul li svg:hover {
    color:#f05e2c;
    transform: scale(1.5);
    transition: all 0.5s ease;
}

/*********************************************
articles
***********************************************/

.leftandright ul li {
    color:#ffeaca;    
    font-size: 4rem;
    list-style-type: none;
    transition: all 0.5s ease; 
     width: 100%;
}

.mainarticlesleft h3, .mainarticlesright h3{
    color:#ffeaca;
    font-size: 4rem;
}

.mainarticlesleft{
    background: #f05e2c;
    border-bottom-right-radius: 20rem;
    border-top-right-radius: 20rem;
    display:grid;
    grid-template-columns:30%;
    grid-template-rows: 5rem 5rem;
    justify-content: right;
    margin: 8rem 10rem 8rem 0;
    padding:10rem 0 10rem 0 ;
    row-gap: 10rem;
    transition: all 0.5s ease;

   
}
.mainarticlesright {
    background:#f05e2c;
    border-bottom-left-radius: 20rem;
    border-top-left-radius: 20rem;
    display:grid;
    grid-template-columns: 30%;
    grid-template-rows: 5rem 5rem;
    justify-content: left;
    margin: 8rem 0 8rem 10rem;
    padding:10rem 0 10rem 10rem;
    row-gap: 10rem;
    transition: all 0.5s ease;

}

#remysbranding {
    background-image: url(images/YahaUsagi.webp);
}

.mainarticlesright:hover{
margin: 6rem 0 6rem 0rem;
grid-template-rows: 10rem 10rem  ;
transition: all 0.5s ease;
border-radius:0;
}

.mainarticlesleft:hover {
margin: 6rem 0 6rem 0rem;
grid-template-rows: 10rem 10rem  ;
transition: all 0.5s ease;
border-radius:0;

}
}
@media (701px < width < 1000px) {
   
h1 {
    color: #ffeaca;
    font-family: "Degular-display",  Arial, Helvetica, sans-serif;
    font-weight: 750;
    font-size: 10rem;
    line-height:1rem;
    text-transform: uppercase;
}

h2 {
    color: #ffeaca;
    font-family: "degular-display" Arial, Helvetica, sans-serif;
    font-weight:200;
    font-size: 4rem;
    letter-spacing: 0.1rem;
   
    overflow-wrap: break-word;
}

h3 {
   color: #ffeaca;
    font-family: "degular";
    font-weight:200;
    font-size: 5rem;
    letter-spacing: 0.1rem;
   
}

h4 {
    color: #ffeaca;
    font-family: "degular";
    font-weight:100;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    

}

h5 {
    color: #ffeaca;
    font-family: "degular";
    font-weight:600;
    font-size: 1.5rem;
    margin:1rem 0 1rem 0;
}

a, svg {
    color:#ffeaca;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.5s ease;
   text-decoration: none;
}

a:hover {
    color:#f05e2c;
    font-size: 2rem;
    font-weight: 700;
    transition: all 0.5s ease;
}

/*********************************************
header
***********************************************/

header {
    border-bottom-left-radius: 50rem;
    border-bottom-right-radius: 50rem;
    
   
}

.headerlinks{
     display: flex;
     flex-direction: row;
    justify-content: center;
      align-items:  center;
    list-style: none;
    padding: 1rem;
}


header a{
    color:#ffeaca;
    padding: 1rem;
    
}


.peek hr {
  padding: 0;
  margin: 0;
}

.hr3 {
    padding: 3rem;
    border: 0.8rem solid #f05e2c;
}
.hr2 {
   border: 0.8rem solid #fbad23;
}

.hr1 {
   border: 0.8rem solid #1b7d71;
}



/*********************************************
Hero /Hero About Page
***********************************************/
.hero {
    background-attachment: fixed;
    background-image: url("images/herobg.png");
    padding: 0.5rem 5rem ;
  

 
   
}



.heroabt {
    padding: 2rem;
    background:#f05e2c;
    margin: 2rem;
    border-radius: 3rem;
}
.herocopy {
    align-items: center;
   
    
}

.circleholder {
  padding: 10rem 0 10rem 0;
}

.heroabt h2 {
    font-weight: 800;
    text-transform: uppercase;

}

.abt {
    display:grid;
    grid-template-columns: 1fr 2fr;
    justify-items: center;
    align-items: center;
}

.abtheading h2 {
    font-size:3rem;
    font-weight: 800;
    text-transform: uppercase;
   

}


.abtimg {
    background:#f05e2c;
margin: 2rem;

  border-radius: 50rem;
}

.abtheading {
   
    line-height: 0.7rem;
}

.abtcopy {
 
  font-size: 2rem;
}

.abtcircle {
    background:#f05e2c;
    border-radius: 100rem;
    float: right;
    margin-right:15rem;
    padding: 4rem;
}


/*********************************************
footer
***********************************************/
footer {
    background-color:#3c131b;
}

footer nav ul {
    display:flex; 
    justify-content: center;
}

footer nav ul li {
    list-style-type: none;
    padding: 3rem;
    transition: all 0.5s ease;
}

footer nav ul li svg:hover {
    color:#f05e2c;
    transform: scale(1.5);
    transition: all 0.5s ease;
}

/*********************************************
articles
***********************************************/

.leftandright ul li {
    color:#ffeaca;    
    font-size: 4rem;
    list-style-type: none;
    transition: all 0.5s ease; 
     width: 100%;
  
}

.mainarticlesleft h3, .mainarticlesright h3{
    color:#ffeaca;
    font-size: 4rem;
       padding:0;
     line-height: 3rem;
}

.mainarticlesleft{
    
    background: #f05e2c;
    border-bottom-right-radius: 20rem;
    border-top-right-radius: 20rem;

    grid-template-columns:30%;
    grid-template-rows: 5rem 5rem;
    justify-content: right;
    margin: 5rem 10rem 5rem 0;
    padding:5rem 0 5rem 5rem ;
    row-gap: 10rem;
    transition: all 0.5s ease;

   
}
.mainarticlesright {
    
    background:#f05e2c;
    border-bottom-left-radius: 20rem;
    border-top-left-radius: 20rem;
   
    grid-template-columns: 30%;
    grid-template-rows: 5rem 5rem;
    justify-content: left;
    margin: 5rem 0 5rem 10rem;
     padding:5rem 0 5rem 5rem ;
    row-gap: 10rem;
    transition: all 0.5s ease;

}

#remysbranding {
    background-image: url(images/YahaUsagi.webp);
}

.mainarticlesright:hover{
margin: 6rem 0 6rem 0rem;
grid-template-rows: 10rem 10rem  ;
transition: all 0.5s ease;
border-radius:0;
}

.mainarticlesleft:hover {
margin: 6rem 0 6rem 0rem;
grid-template-rows: 10rem 10rem  ;
transition: all 0.5s ease;
border-radius:0;


}
}


@media  (max-width:700px){
    /*********************************************
type
***********************************************/
h1 {
    color: #ffeaca;
    font-family: "Degular-display",  Arial, Helvetica, sans-serif;
    font-weight: 750;
    font-size: 9rem;
    
    line-height:7rem;
    text-transform: uppercase;
}

h2 {
    color: #ffeaca;
    font-family: "degular-display" Arial, Helvetica, sans-serif;
    font-weight:200;
    font-size: 3rem;
    
    letter-spacing: 0.1rem;

    overflow-wrap: break-word;
}

h3 {
   color: #ffeaca;
    font-family: "degular" Arial, Helvetica, sans-serif;
    font-weight:200;
    font-size: 5rem;
    letter-spacing: 0.1rem;
   
}

h4 {
    color: #ffeaca;
    font-family: "degular" Arial, Helvetica, sans-serif;
    font-weight:100;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    

}

h5 {
    color: #ffeaca;
    font-family: "degular";
    font-weight:600;
    font-size: 1.5rem;
    margin:1rem 0 1rem 0;
}

a, svg {
    color:#ffeaca;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.5s ease;
   text-decoration: none;
}

a:hover {
    color:#f05e2c;
    font-size: 2rem;
    font-weight: 700;
    transition: all 0.5s ease;
}

/*********************************************
header
***********************************************/



.headerlinks{
    display: grid;
    grid-template-columns: 50% 50% ;
    grid-template-rows: 30% 30%; 
    align-items: center;
    padding:0 5rem;
    

}
#remlogo {
    display:none;
}


header a{
    color:#ffeaca;
    padding: 5rem;
    
}

.headerlinks li{
    margin:  1rem;
 
    align-items: center;
}

.peek hr {
  padding: 0;
  margin: 0;
}

.hr3 {
    padding: 3rem;
    border: 0.8rem solid #f05e2c;
}
.hr2 {
   border: 0.8rem solid #fbad23;
}

.hr1 {
   border: 0.8rem solid #1b7d71;
}



/*********************************************
Hero /Hero About Page
***********************************************/
.hero {
    background-attachment: fixed;
    background-image: url("images/herobg.png");
    padding: 2rem 5rem;
    margin: 0 0 5rem 0;
}
.hero h1 {
    padding: 0;
    margin:0 ;
}


.heroabt {
    background:#f05e2c;
}
.herocopy {
    align-items: center;
    display:flex;
    margin: 3rem 0 3rem 15rem;
}

.circleholder {
  padding: 10rem 0 10rem 0;
}

.heroabt h2 {
    font-weight: 800;
    text-transform: uppercase;

}

.abtheading {
    margin: 0 4rem;
}

.abtcopy {
 margin-right: 10rem;
}

.abtcircle {
    background:#f05e2c;
    border-radius: 100rem;
    float: right;
    margin-right:15rem;
    padding: 4rem;
}
/*********************************************
footer
***********************************************/
footer {
    background-color:#3c131b;
}

footer nav ul {
    display:flex; 
    justify-content: center;
}

footer nav ul li {
    list-style-type: none;
    padding: 3rem;
    transition: all 0.5s ease;
}

footer nav ul li svg:hover {
    color:#f05e2c;
    transform: scale(1.5);
    transition: all 0.5s ease;
}

/*********************************************
articles
***********************************************/

.leftandright ul li {
  
    color:#ffeaca;    
    font-size: 4rem;
    list-style-type: none;
    transition: all 0.5s ease; 
     width: 100vw;
}

.mainarticlesleft h3, .mainarticlesright h3{
    text-transform: uppercase;
    font-weight: 500;
    color:#ffeaca;
    font-size: 3rem;
}

.mainarticlesleft{
    
    background: #f05e2c;
    border-bottom-right-radius: 20rem;
    border-top-right-radius: 20rem;
   
   
    grid-template-rows: 5rem 5rem;
    justify-content: right;
    margin: 5rem 0;
    padding:5rem ;
    row-gap: 10rem;
    transition: all 0.5s ease;

   
}
.mainarticlesright {
    background:#f05e2c;
    border-bottom-left-radius: 20rem;
    border-top-left-radius: 20rem;
   
  
    grid-template-rows: 5rem 5rem;
    justify-content: left;
    margin: 5rem 0;
    padding:5rem;
    row-gap: 10rem;
    transition: all 0.5s ease;

}

#remysbranding {
    background-image: url(images/YahaUsagi.webp);
}


}