@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
@font-face {
    font-family: 'gobold_hollowregular';
    src: url('../font/gobold_hollow-webfont.woff2') format('woff2'),
         url('../font/gobold_hollow-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'addison_brotherregular';
    src: url('../font/addison_brother-webfont.woff2') format('woff2'),
         url('../font/addison_brother-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



body {
    overflow-x: hidden;
}

#aboutme {
    margin-top: 5%;
}

#place {
    margin-top: 2%
}

.contacthead {
    margin-bottom: 2%;
    text-transform: lowercase;
    color: white;
    font-family: 'Karla';
    letter-spacing: 4px;
}

table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;

}

table#totaltable {
    float: right;
    margin-right: 10%;
}


table#edutable, table#totaltable  {
    height: 50px;
    vertical-align: bottom;
    line-height: 2em;
}


#me {
    opacity: 0;
}

#center {
    text-align: center;
}

#total {
    border-bottom: 2px solid white;
}

p#get {
    font-style: italic;
    color: #dac9ba;
    font-family: 'gobold_hollowregular';
}

p#getintouchmb {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #dac9ba;
    font-family: 'gobold_hollowregular';
}

.line2 {
    margin-top: 1%;
}



#vl {
    height: 150px;
    border-right: 4px solid #bbbbbb;
    top: 10%;
    position: relative;
    margin-right: 30%;
}

section {
    padding: 70px 0;
}


.line, .line2 {
    background-color: #dac9ba;
}

h1#about, h2#intro {
    color: white;
    font-family: 'Karla';
    line-height: 1.5em;
    letter-spacing: 4px;
}

h2#awtext {
    color: white;
    font-family: 'Karla';
    line-height: 1.5em;
    letter-spacing: 0.3px;
}

h3#awards{
    color: white;
    font-family: 'Karla';
    line-height: 1.4em;
    letter-spacing: 4px;
    width: auto;
    display: inline-block;

}

table#edutable , table#totaltable {
    color: white;
    font-family: 'Karla';
    letter-spacing: 4px;
    width: auto;
    margin-top: 5%;
}

h2#awtext {
    font-family: 'Prompt', sans-serif;
    margin-right: auto;
    margin-left: auto;
}

h2.aratcha {
    font-family: 'addison_brotherregular';
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

p#pin {
    color: white;
    line-height: 1.3em;
    letter-spacing: 4px;
    font-size: 100px;
    font-family: 'gobold_hollowregular';
}

h1#about {
    color: #dac9ba;
    font-family: 'Karla';
    line-height: 1.3em;
    letter-spacing: 4px;
}

#left span {
    color: #dac9ba;
    text-transform: uppercase;
    font-style: italic;
}

      @media (max-width: 575px) {

   
        p#getintouchmb {
            display: block;
            font-size: 60px;
            letter-spacing: 1rem;
        }

        .getintouchpc {
            display: none;
        }

        #me {
            margin-top: 25%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 80%;
        }

        #contactform {
            margin-top: 5%;
        }
    
        #about, #intro {
            margin-top: 10%;
  
        }
    
        #pin {
            margin-top: 45%;
        }

        #vl {
            display: none;
        }
    
  
        p#pin {
            font-size: 46px;
            text-align: center;
        }
  
        h1#about, h2#intro,   h2#awtext{
            font-size: 14px;
            text-align: center;
        }
  
        h1#about  {
            font-size: 34px;
            text-align: center;
        }
  
          
        .aratcha {
          display: block;
          margin: 0 auto;
          position: absolute;
          margin-top: 4%;
          width: 80%;
          margin-left: 5%;
      }

      #awards {
        display: block;
        font-size: 40px;
        margin-top: 5%;
        text-align: center;
      }

        #awardsandedu {
            margin-top: -30%;
        }

        h3#awards, .line, .line2 {
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    

     h2#awtext {
            margin-top: 10%;
            margin-left: 0%;
            margin-bottom: 10%;
            line-height: 3rem;  
        }

        #awardsandedu {
            margin-top: -12%;
        }
 
    
                #edu {
                    margin-top: -150px;
                    
                }
    
                .edupad {
                    padding-left: 20px;
                    line-height: 2rem;
                }
    
                .awpad {
                    padding-left: 120px;
                }
    
    
                #edutext {
                    margin-top: 3%;
                }
    
                #padyear {
                    padding-top: 5%
                }
            
                #topad {
                    padding-left: 40px;
                }
    
                #totaltable {
                    margin-left: auto;
                    margin-right: auto;
                    display: block;
                }

      
                p#get {
                    font-size: 90px;
                   
                }
    
                li#contactname{
                    font-size: 16px;
                    font-family: 'Karla';
                    margin-left: -15%;
                }
    
                .contacthead {
                    font-size: 40px;
                    margin-bottom: 0%;
                    text-align: left;
                }
          
                form {
                    margin-left: 0%;
                  
                }

                .contact-list {
                    text-align: left;
                }

                .contentcontact {
                    margin-left: -10%;
                }
            
                .form-horizontal {
                    margin-left: 30%;
                }

                
                 table#edutable , table#totaltable {
                     font-size: 12px;
                     line-height: 2.5em;
                     letter-spacing: 0.25px;
                     margin-top: 10%;
                 }

                #formcol {
                    margin-top: 10%;
                }

                .line, .line2 {
                    width: 250px;
                    height: 3px;
                    margin-top: 2%;
                }
            
                

     
    }


    @media (min-width: 576px) {

   

     
        .getintouchpc {
            display: none;
        }

        .getintouchmb {
            display: block;
            font-size: 70px;
            letter-spacing: 1rem;
        }

        #me {
          margin-top: 25%;
          margin-left: auto;
          margin-right: auto;
          display: block;
          width: 100%;
      }
  
      #about, #intro {
          margin-top: 10%;

      }
  
      #pin {
          margin-top: 45%;
      }
  

      p#pin {
        font-size: 90px;
        text-align: center; }

      h1#about, h2#intro , h2#awtext{
          font-size: 18px;
          text-align: center;
      }

      h1#about{
          font-size: 40px;
          text-align: center;
      }
      
        
      .aratcha {
        display: block;
        margin: 0 auto;
        position: absolute;
        margin-top: 4%;
        width: 100%;
        margin-left: -3%;
    }

    #awards {
        font-size: 40px;
        margin-top: 5%;
        text-align: center;
      }


      .line, .line2 {
        width: 400px;
        height: 3px;
        margin-top: 2%;
    }

        #awardsandedu {
            margin-top: -12%;
        }
    

     h2#awtext {
            margin-top: 10%;
            margin-left: 0%;
            margin-bottom: 10%;
            
        }

        #awardsandedu {
            margin-top: -12%;
        }
 
    
                #edu {
                    margin-top: -150px;
                    
                }
    
                .edupad {
                    padding-left: 50px;
                    line-height: 2.8rem;
                }
    
                .awpad {
                    padding-left: 120px;
                }
    
    
                #edutext {
                    margin-top: 3%;
                }
    
                #padyear {
                    padding-top: 5%
                }
            
                #topad {
                    padding-left: 50px;
                }
    
                #totaltable, .line, .line2,  h3#awards {
                    margin-left: auto;
                    margin-right: auto;
                    display: block;
                }
                
                p#get {
                    font-size: 100px;
                   
                }
    
                li#contactname{
                    font-size: 24px;
                    font-family: 'Karla';
                    margin-left: -10%;
                }
    
                .contacthead {
                    font-size: 52px;
                    margin-bottom: 0%;
                    text-align: left;
                }

                #vl {
                    display: none;
                }
          
                form {
                    margin-left: 0%;
                  
                }

                .contact-list {
                    text-align: left;
                }


                .contentcontact {
                    margin-left: -10%;
                
                }
            
                .form-horizontal {
                    margin-left: 30%;
                }

                
                 table#edutable , table#totaltable {
                     font-size: 18px;
                     line-height: 2em;
                     letter-spacing: 0.25px;
                 }

                #formcol {
                    margin-top: 10%;
                }
                


    }
    
    @media (min-width: 768px) {

        h2.aratcha {
            display: none;
        }


        .getintouchpc {
            display: none;
        }

        .getintouchmb {
            display: block;
        }

        h3#awards{
            margin-left: 0%;
        }

        #me {
          margin-top: 50%;
          margin-left: auto;
          margin-right: auto;
          display: block;
          width: 100%;
      }
  
        
      #contactform {
        margin-top: 0%;
    }

      #about, #intro {
          margin-top: 10%;

      }
  
      #pin {
          margin-top: 28%;
      }
  

      p#pin {
          font-size: 60px;
          text-align: left;
      }

      h1#about, h2#intro , h2#awtext {
          font-size: 24px;
          text-align: left;
      }

      h1#about   {
          font-size: 32px;
          text-align: left;
      }

  
      .aratcha {
          display: block;
          margin: 0 auto;
          position: absolute;
          margin-top: 1%;
          width: 60%;
          margin-left: -3%;
      }

      #awards {
        display: block;
        font-size: 34px;
        text-align: left;
      }


      .line, .line2 {
        width: 500px;
        height: 3px;
        margin-left: 0%;
        margin-top: 1%;
    }
    

        #awardsandedu {
            margin-top: -12%;
        }
 
    
            h2#awtext {
                    margin-top: 3%;
                    margin-left: -25%;
                    width: auto;
                    line-height: 2em;

                }
    
                #edu {
                    margin-top: -150px;
                    
                }
    
                .edupad {
                    padding-left: 50px;
                
                   
                }
    
                .awpad {
                    padding-left: 150px;
                }
    
    
                #edutext {
                    margin-top: 3%;
                }
    
                #padyear {
                    padding-top: 5%
                }
            
                #topad {
                    padding-left: 40px;
                }
    
                #totaltable {
                    margin-left: 25%;
                }
                
                p#get {
                    font-size: 100px;
                   
                }
    
                li#contactname{
                    font-size: 26px;
                    font-family: 'Karla';
                    margin-left: 10%;
                }
    
                .contacthead {
                    font-size: 50px;
                    margin-bottom: 10%;
                    text-align: left;
                }
          
                form {
                    margin-left: -15%;
                }

                .contact-list {
                    text-align: left;
                }

                #vl {
                    display: block;
                }

                .contentcontact {
                    margin-left: -10%;
                }
            
                .form-horizontal {
                    margin-left: 30%;
                }

                
    table#edutable , table#totaltable {
        font-size: 20px;
        line-height: 2.5em;
        letter-spacing: 3px;
    }

    }


      
      @media (min-width: 992px) {

        .getintouchpc {
            display: none;
        }

        .getintouchmb {
            display: block;
        }

        h3#awards{
            margin-left: 10%;
        }

        #me {
            margin-top: 35%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 100%;
        }
    
        #about, #intro {
            margin-top: 10%;
            text-align: left;

        }
    
        #pin {
            margin-top: 28%;
            text-align: left;
        }
    

        p#pin {
            font-size: 80px;
            text-align: left;
        }

    
        .aratcha {
            display: block;
            margin: 0 auto;
            position: absolute;
            margin-top: 2%;
            width: 65%;
            margin-left: -3%;
        }

        h1#about,h1#about, h2#intro , h2#awtext {
            text-align: left;
        }

        #awards {
            display: block;
            font-size: 40px;
          }


          .line {
            width: 400px;
            height: 3px;
            margin-left: 10%;
            margin-top: 1%;
        }

            h2#awtext {
                margin-top: 3%;
                margin-left: -35%;
            }

            #awardsandedu {
                margin-top: -10%;
            }
        
            .line2 {
                width: 900px;
                height: 3px;
                margin-left: auto;
                margin-right: auto;
                display: block;
            }
        
                h2#awtext {
                        margin-top: 3%;
                        margin-left: -30%;
                        width: auto;
                    }
        
                    #edu {
                        margin-top: -150px;
                        
                    }
        
                    .edupad {
                        padding-left: 50px;
                       
                    }
        
                    .awpad {
                        padding-left: 150px;
                    }
        
        
                    #edutext {
                        margin-top: 3%;
                    }
        
                    #padyear {
                        padding-top: 5%
                    }
                
                    #topad {
                        padding-left: 50px;
                    }
        
                    #totaltable {
                        margin-top: 5%;
                        margin-left: 43%;
                    }
                    
                    p#get {
                        font-size: 100px;
                       
                    }
        
                    li#contactname{
                        font-size: 24px;
                        font-family: 'Karla';
                    }
        
                    .contacthead {
                        font-size: 50px;
                        margin-bottom: 10%;
                        text-align: left;
                    }
              
                    form {
                        margin-left: -5%;
                    }

                    .contact-list {
                        text-align: left;
                    }

                    #vl {
                        display: block;
                    }

                    .contentcontact {
                        margin-left: -10%;
                    }
                
                    .form-horizontal {
                        margin-left: 30%;
                    }

                    
        table#edutable , table#totaltable {
            font-size: 18px;
            line-height: 2.5em;
        }

        

      }
      
      @media (min-width: 1200px) {

        .getintouchpc {
            display: block;
        }

        .getintouchmb {
            display: none;
        }

        h3#awards{
            margin-left: 10%;
            margin-bottom: 2%;
        }

        #me {
            margin-top: 45%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 80%;
        }
    
        #about, #intro {
            margin-top: 10%;

        }
    
        #pin {
            margin-top: 25%;

        }
    
    
        .aratcha {
            display: block;
            margin: 0 auto;
            position: absolute;
            margin-top: 4%;
            width: 60%;
            margin-left: -3%;
        }

        p#pin{
            font-size: 80px;
            text-align: left;
        }

        h1#about,h1#about, h2#intro , h2#awtext {
            text-align: left;
        }

        #awards {
            display: block;
            font-size: 40px;
          }


          .line {
            width: 500px;
            height: 3px;
            margin-left: 10%;
            margin-top: 1%;
        }

        h2#awtext {
                margin-top: 3%;
                margin-left: -35%;

            }

            #awardsandedu {
                margin-top: -10%;
            }
     
        
            .line2 {
                width: 1000px;
                height: 3px;
                margin-left: auto;
                margin-right: auto;
                display: block;
            }
        
                h2#awtext {
                        margin-top: 3%;
                        margin-left: -30%;
                        width: auto;
                    }
        
                    #edu {
                        margin-top: -150px;
                        
                    }
        
                    .edupad {
                        padding-left: 80px;
                       
                    }
        
                    .awpad {
                        padding-left: 150px;
                    }
        
        
                    #edutext {
                        margin-top: 3%;
                    }
        
                    #padyear {
                        padding-top: 5%
                    }
                
                    #topad {
                        padding-left: 80px;
                    }
        
                    #totaltable {
                        margin-top: 4%;
                        margin-left: 43%;
                    }
                    
                    p#get {
                        font-size: 140px;
                    }
        
                    li#contactname{
                        font-size: 24px;
                        font-family: 'Karla';
                    }
        
                    .contacthead {
                        font-size: 60px;
                        margin-left: 5%;
                    }
              
                
                    .form-horizontal {
                        margin-left: 30%;
                    }

  

                    
        table#edutable , table#totaltable {
            font-size: 18px;
            line-height: 2.5em;
        }


      }
      
     @media (min-width: 1400px) {


        table#edutable , table#totaltable {
            font-size: 22px;
        }

        #me {
            margin-top: 40%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 80%;
        }
    
        #about, #intro {
            margin-top: 8%;
            margin-left: 10%;
        }
    
        #pin {
            margin-top: 20%;
            margin-left: 10%;
        }
    
    
        .aratcha {
            display: block;
            margin: 0 auto;
            position: absolute;
            margin-top: 2%;
            width: 50%;
            margin-left: 7%;
        }

        p#pin {
            font-size: 100px;
            text-align: left;
        }

        h1#about,h1#about, h2#intro , h2#awtext {
            text-align: left;
        }

        #awards {
            display: block;
            font-size: 50px;
          }


          .line {
            width: 800px;
            height: 3px;
            margin-left: 5%;
            margin-top: 1%;
        }


            #awardsandedu {
                margin-top: -15%;
            }

        
            .line2 {
                width: 1250px;
                height: 3px;
                margin-left: auto;
                margin-right: auto;
                display: block;
            }
        
                h2#awtext {
                        margin-top: 3%;
                        margin-left: -30%;
                        width: auto;
                    }
        
                    #edu {
                        margin-top: -100px;
                        
                    }
        
                    .edupad {
                        padding-left: 140px;
                       
                    }
        
                    .awpad {
                        padding-left: 200px;
                    }
        
        
                    #edutext {
                        margin-top: 3%;
                    }
        
                    #padyear {
                        padding-top: 5%
                    }
                
                    #topad {
                        padding-left: 100px;
                    }
        
                    #totaltable {
                        margin-top: 4%;
                        margin-left: 43%;
                    }
                    
                    p#get {
                        font-size: 140px;
                       
                    }
        
                    li#contactname{
                        font-size: 24px;
                        font-family: 'Karla';
                    }
        
                    .contacthead {
                        font-size: 60px;
                        margin-left: 5%;
                    }
              
                
                    .form-horizontal {
                        margin-left: 30%;
                    }


      }
      

    @media (min-width: 1600px) {

        table#edutable , table#totaltable {
            font-size: 20px;
        }

          #me {
            margin-top: 30%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 70%;
        }
    
        #about, #intro {
            margin-top: 5%;
            margin-left: 10%;
        }
    
        #pin {
            margin-top: 20%;
            margin-left: 10%;
        }
    
    
        .aratcha {
            display: block;
            margin: 0 auto;
            position: absolute;
            margin-top: 2%;
            width: 50%;
            margin-left: 7%;
        }
 
        p#pin{
            font-size: 100px;
            text-align: left;
        }
      
        h1#about,h1#about, h2#intro , h2#awtext {
            text-align: left;
        }

        #awards {
            display: block;
            font-size: 50px;
          }


          .line {
            width: 700px;
            height: 3px;
            margin-left: 10%;
            margin-top: 1%;
        }

        h2#awtext {
                margin-top: 3%;
                margin-left: -40%;


            }

            #awardsandedu {
                margin-top: -12%;
            }
    
    
            .line2 {
                width: 1300px;
                height: 3px;
                margin-left: auto;
                margin-right: auto;
                display: block;
    
            }
    
    
                #edu {
                    margin-top: -100px;
                    
                }
    
                .edupad {
                    padding-left: 180px;
                   
                }
    
                .awpad {
                    padding-left: 200px;
                }
    

    
                #edutext {
                    margin-top: 3%;
                }
    
                #padyear {
                    padding-top: 5%
                }
            
                #topad {
                    padding-left: 100px;
                }
    
                #totaltable {
                    margin-top: 4%;
                    margin-left: 43%;
                }
                
                p#get {
                    font-size: 160px;
                   
                }
    
                li#contactname{
                    font-size: 24px;
                    font-family: 'Karla';
                }
    
                .contacthead {
                    font-size: 60px;
                }
          
            
                .form-horizontal {
                    margin-left: 30%;
                }

}

    @media (min-width: 1900px) {

        table#edutable, table#totaltable  {
            font-size: 26px;
        }


          #me {
            margin-top: 30%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            width: 70%;
        }
    
        #about, #intro {
            margin-top: 5%;
            margin-left: 10%;
        }
    
        #pin {
            margin-top: 20%;
            margin-left: 10%;
        }
    
    
        .aratcha {
            display: block;
            margin: 0 auto;
            position: absolute;
            margin-top: 2%;
            width: 50%;
            margin-left: 7%;
        }
 
        p#pin {
            font-size: 100px;
            text-align: left;
        }

        h1#about, h2#intro , h2#awtext {
            text-align: left;
        }

        h1#about, h2#intro , h2#awtext {
            font-size: 30px;
        }

        #awards {
            display: block;
            font-size: 50px;
          }


          .line {
            width: 800px;
            height: 3px;
            margin-left: 10%;
            margin-top: 1%;
        }

        .line2 {
            width: 1500px;
            height: 3px;
            margin-top: 1%;

        }

        h2#awtext {
                margin-top: 3%;
                margin-left: -35%;
            }

            #awardsandedu {
                margin-top: -250px;
            }

            #edu {
                margin-top: -300px;
                
            }

            .edupad {
                padding-left: 180px;
               
            }

            .awpad {
                padding-left: 200px;
            }



            #edutext {
                margin-top: 3%;
            }

            #padyear {
                padding-top: 5%
            }
        
            #topad {
                padding-left: 100px;
            }

            #totaltable {
                margin-top: 4%;
                margin-left: 43%;
            }
            
            p#get {
                font-size: 220px;
               
            }

            li#contactname{
                font-size: 24px;
                font-family: 'Karla';
            }

            .contacthead {
                font-size: 60px;
            }
      
        



 
      }
      


      .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
       
      }




/* get in touch */

.scrolling-text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
  will-change: transform;
  backface-visibility: hidden;

}

.scrolling-text .scrolling-text-content {
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
}

#contactright {
    display: grid;
    grid-template-columns: 100px;
    grid-template-areas:
      "contacthead contacthead"
      "menu contentcontact";
    width: auto;
    margin-right: auto;
  }

#formcol {
    margin-left: auto;
}

#contactright {
    margin-right: auto;
}

  .contacthead {
    grid-area: contacthead;
    top: 30%;
    position: relative;
    padding: 0 0 0 35px;
  }
  .menu {
    display: flex;
    grid-area: menu;
    align-items: center;
  }
  .contentcontact {
    display: flex;
    grid-area: contentcontact;
    align-items: center;
  }
  
  

/* aratcha */

@keyframes aratcha {
    100% {
        stroke-dashoffset: 0;
    }
}

#a_mask {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 80;
    animation: aratcha 1s linear forwards 2s;
}



#a_mask_2 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 20;
    animation: aratcha 2s linear forwards 2.8s;
}

#r_mask {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 100;
    animation: aratcha 2s linear forwards 3.3s;
}

#a_mask-2 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 100;
    animation: aratcha 2s linear forwards 4s;
}

#a_mask_2-2 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 60;
    animation: aratcha 2s linear forwards 4.5s;
}

#t_mask {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 180;
    animation: aratcha 2s linear forwards 5s;
}

#c_mask {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 5;
    animation: aratcha 2s linear forwards 5.5s;
}

#c_mask_2 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 40;
    animation: aratcha 2s linear forwards 6s;
}

#h_mask {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 100;
    animation: aratcha 2s linear forwards 6.5s;
}

#h_mask_2 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 60;
    animation: aratcha 2s linear forwards 7s;
}

#a_mask-3 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 80;
    animation: aratcha 2s linear forwards 7.5s;
}

#a_mask_2-3 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 20;
    animation: aratcha 2s linear forwards 8s; }


#t_mask_2 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 10;
    animation: aratcha 2s linear forwards 8.5s;
}