/*FONTs*/
@font-face {
    font-family: Aclonica;
    src: url(Aclonica.ttf); }

@font-face {
    font-family: Arial;
    src: url(Arial.ttf); }

@font-face {
    font-family: Acier;
    src: url(acier-bat-display-gris.otf); }

@font-face {
    font-family: Ink;
    src: url("Inkfree.ttf"); }

/*Font Boxes*/
.box {
    grid-column-start: 4;
    grid-column-end: 8;
    height: 750px;
    width: 750px;
    stroke-width: 10px;
        border: 5px solid black;
         display: flex;
  flex-wrap: wrap;
  align-content: center;
}

/*Font Boxes*/

/*Font master*/
.nmbrtxt

{font-family: Acier;
font-size: 120px;
      display: flex;
 color: #40352b;
    position: relative;
    top:235px;
        left:115px;
}

.arial {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    
    
    
    
}
/*Font master*/

/*layout 1 master*/

.pri1
{position:relative;
  left: 175px ;
 
    top: 575px;
    
      letter-spacing: 100px;
 
}

.sec1
{position:relative;
  left: 130px ;
    top: 600px;
    text-align: center;
      letter-spacing: px;
    line-height: 30px;
 
}

.sec12
{position:relative;
  left: 130px ;
    top:625px ;

    text-align: center;
      letter-spacing: px;
    line-height: 25px;
 
}

.ter1
{position:relative;
left: 450px ;
    top:225px;

    text-align: left;
      letter-spacing: px;
    line-height: 25px;
 
}

.ter12
{position:relative;
right: 200px ;
bottom: 200px;

    text-align: right;
      letter-spacing: px;
    line-height: 25px;
 
}

.ter13
{position:relative;
right: 150px ;
bottom: 550px;

    text-align: center;
      letter-spacing: px;
    line-height: 25px;
 
}



.ter14
{position:relative;
left: 350px ;
bottom: 750px;

    text-align: center;
      letter-spacing: px;
    line-height: 25px;
 
}

/*layout 1 master*/

/*layout 2 master*/

.pri2
{position:relative;
  left: 175px ;
 
    top: 700px;
    
      letter-spacing: 100px;
 font-weight: 1000;
}

.sec2
{position:relative;
  left: 130px ;
    top: 550px;
    text-align: center;
      letter-spacing: px;
    line-height: 30px;
 
}

.sec22
{position:relative;
  left: 130px ;
    top:650px ;

    text-align: center;
      letter-spacing: px;
    line-height: 25px;
 
}

.ter2
{position:relative;
left: 450px ;
    top:225px;

    text-align: left;
      letter-spacing: px;
    line-height: 25px;
 
}

.ter22
{position:relative;
right: 200px ;
bottom: 200px;

    text-align: right;
      letter-spacing: px;
    line-height: 25px;
 
}

.ter23
{position:relative;
right: 150px ;
bottom: 550px;

    text-align: center;
      letter-spacing: px;
    line-height: 25px;
   rotate: 90deg;
}



.ter24
{position:relative;
left: 350px ;
bottom: 750px;

    text-align: center;
      letter-spacing: px;
    line-height: 25px;
   rotate: 270deg;
}

/*layout 2 master*/

/*layout 3 master*/

.ter42
{position:relative;
    font-size: 8px;
    left: 180px;
top:650px;
font-family: Ink;
    text-align: left;
      letter-spacing: px;
    line-height: 25px;
     color: #ff780a ;
    font-weight: 700;
}


.ter41
{position:relative;
    font-size: 8px;
    left: 160px;
top:650px;
font-family: Ink;
    text-align: right;
      letter-spacing: px;
    line-height: 25px;
     color: #ff780a ;
    font-weight: 700;
}


.ter33
{position:relative;
    font-size: 8px;
left: 350px;
top:380px;
font-family: Ink;
    text-align: center;
      letter-spacing: px;
    line-height: 20px;
     color: #ff780a ;
    font-weight: 900;
}

.ter34
{position:relative;
    font-size: 8px;
left: 150px;
    top:340px;
font-family: Ink;
    text-align: right;
      letter-spacing: px;
    line-height: 20px;
     color: #ff780a ;

}


.img {
    position:relative;
bottom: 50px;
left: 200px;
    
    
}



.ter35
{position:relative;
    font-size: 8px;
left: 25px;
bottom:325px;
font-family: Ink;
    text-align: center;
      letter-spacing: px;
    line-height: 20px;
     color: #ff780a ;
    font-weight: 900;
}

.ter36
{position:relative;
    font-size: 8px;
left: 50px;
    bottom:365px;
font-family: Ink;
    text-align: lft;
      letter-spacing: px;
    line-height: 20px;
     color: #ff780a ;

}

.sub31
{position:relative;
    font-size: 20px;
    font-weight: 900;
left: 190px;
    bottom:425px;
font-family: Aclonica;
    text-align: right;
      letter-spacing: px;
    line-height: 20px;
 color: #40352b;

}

.sub32
{position:relative;
    font-size: 10px;
left: 15px;
    
    bottom:380px;
font-family: Aclonica;
    text-align: right;
      letter-spacing: px;
    line-height: 10px;
 color: #40352b;

}

.sub33
{position:relative;
    
    font-size: 15px;
    left:170px;
    bottom:745px;
font-family: Aclonica;
    text-align: left;
      letter-spacing: px;
    line-height: 12px;
 color: #40352b;

}

.sub34
{position:relative;
        font-weight: 900;
    font-size: 20px;
left: 15px;
    bottom:790px;
font-family: Aclonica;
    text-align: left;
      letter-spacing: px;
    line-height: 20px;
 color: #40352b;

}





/*layout 3 master*/

/*layout AGAIN*/

.bar {
    background-color: white;
    width: 500px;
    border: 5px solid black;

  align-items: center;
        text-align: center;
    margin-right: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 2.5vw;
    
    

}
.bar2 {
    grid-column-start: 1;
    grid-column-end:12;
  display: flex;
  align-items: center;
}
    
/*GRIDS AGAIN*/

/*AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
     ;
}
.cell {
    height: 100px;
}

/* default - small devices */

[class*="col"] {
    grid-column-end: span 12;
}

/* below 600px typically tablet*/

@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
    .sm6 {
        grid-column-end: span 2;
    }
    .sm12 {
        grid-column-end: span 1;
    }
}

/* above 601px typically tablet*/

@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
    .md6 {
        grid-column-end: span 2;
    }
    .md12 {
        grid-column-end: span 1;
    }
}

/* above 1025px typically desktop*/

@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column-end: span 12;
    }
    .col2 {
        grid-column-start: 1;
        grid-column-end: span 6;
    }
    .col3 {
        grid-column-start: 7;
        grid-column-end: span 5;
    }
    .col4 {
        grid-column-end: span 3;
    }
    .col6 {
        grid-column-end: span 2;
    }
    .col12 {
        grid-column-end: span 1;
    }
}

/*AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/