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

html{
    font-size: 14px;
}

}



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

html{
    font-size: 12px;

}


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

html{
    font-size: 11px;

}


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

html{
    font-size: 16px;
}

.logo--datasheet{
    height:2rem; 
    width:2rem;
}

#logo--tmi{
    width: 5.32rem;
    height: 4rem;
}

#logo--mail-a{
     width: 3.75rem;
    height: 3.75rem;

}

#logo--find{
    width: 3.125rem;
    height: 4.375rem;


}



#tool{
    height: 25rem;
    width: 30rem;
}





header{

    grid-template-columns: 40% 60%;
    background-color:;
    height: 3.75rem;
    column-gap: 0px;

    /*
    box-shadow: 160px 1.875rem 100px 0.625rem rgba(255,51,0,0.9) inset; */
}





#refresh{
    top:-5px;
}

h1{
    grid-column-start:2;
    grid-column-end:3;


    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.5rem;
    color: white;
    padding: 0px;
    text-align: center;
    height: 3.75rem;
    background-color: ;


    
    margin: 0px 0px 0px 0px;
    font-family: calibri;

}

#logo--pyplok{
    width:7rem;
    padding-right:0.5rem;
}

.logo--pyplok{
    height: 3.75rem;

}



.logo--chase,.logo--cenergy{
    display: ;
    justify-content: center;
    align-items: center;

    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:1;
    grid-column-end:2;



    margin: 0px 0px 0px 0px;
    border: 0px dashed red;
    padding-left: 0px;
    padding-top: 0px;

    /*
    border-right: 0px solid rgb(0,176,0);
    border-top:0px solid rgb(0,176,0);
    border-bottom:0px solid rgb(0,176,0); */
    border-right: 0px solid white;
    
    /*box-shadow: 0.625rem 0.625rem 3.125rem 0.625rem rgba(255,51,0,0.6) inset;*/

}



.logo--chase img, .logo--cenergy img{
        width: 6.25rem ;
        height: 2.5rem;
}






.tab--head{
    display: flex;
    justify-content:center;
    align-items: center;

    position: static;
    z-index: 1;
    bottom:-1.875rem;
    left: 1.25rem;

    color: white;
    width: 100%;
    height: 1.875rem;
    font-size: 1.25rem;
}

.area--input{
    display: block;
    grid-column-gap: 0.625rem;
    grid-template-columns: 68.75rem 9.6875rem;
    margin-top: 0px;
    margin-bottom: 3.125rem;
    padding-top: 0px;
}

.area--input--grid{

    grid-template-columns: 100%;
    grid-template-rows: repeat(6,1fr);

    height:;

    grid-gap: 0.625rem;


    padding: 0.625rem;
    box-sizing: border-box;
    border-radius: 0px 0px 0px 0px;
    margin-top: 0px;
    margin-bottom: 0.3125rem;
}


.tile--area--input--grid{
    width: 100%;
}

.tile--section--input--title{
    justify-content: flex-start;
    padding-left: 0.625rem;
}

.tile--section--input--dropdown{
    justify-content: flex-start;
    padding-left: 0.625rem;
    width: 12.5rem;
}



.tile--area--input--grid-small{
    grid-row-start: 5;
    grid-row-end: 6;
    margin-bottom: 0px;
    height: 3.75rem;
    width: 100%;
}

.tile--section--input--title--small{
    margin-top:0px;
    background-color:  ;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}

.tile--section--input--dropdown-small{
    margin: 0px;
    font-size: 0.75rem;
    border-radius:0px 0px 0px 0px;
    border:0px solid ;
    font-family: helvetica;
    color: black;
    width: 6.25rem;
    height: 1.25rem;
}


.button--find-part-number{
    min-height: 3.125rem;
    height: 5rem;
    margin: 0px;
    border: none;
    width: 100%;

    color: white;
    font-family: calibri;
    font-size: 1.25rem;
    cursor: pointer;

    flex-direction: row;

}

/*

.button--find-part-number img{
    width: 2.5rem;
    height: 3.75rem;
    position: relative;
    left: -8.75rem;
    bottom: -0.625rem;
    margin-top: 0px;
    margin-left: 
}

*/

.button--find-part-number p{
    font-size: 1.875rem;
    margin-left: 0.625rem;
}

#download-datasheet-1{
    display: none;
}


#download-datasheet-2{
    display: inline;
}


.area--results--grid{
    display: block;
    grid-template-columns: 620px 620px;
    height: ;
    background-color: ;
    grid-gap: 0.625rem;
}


.area--results-fitting{
    margin-bottom: 0.625rem;
}

.tile--section--download-datasheet-fitting::before{
    left: 6.75rem;
    top: 0.1875rem; 
    }

.area--main--results--tools{
    display: block;
    grid-template-columns: 38.75 38.125;
    margin-top: 1.875rem;
    margin-bottom: 0.625rem;
    grid-gap: 0.625rem;
}


.area--tools{
    margin-bottom: 0.625rem;
}

#area--results--tools{
    padding-top: 3.75rem;
}

.tile--results--tools--datasheet{
    display: block;
    background-color: ;
}

.tile--results--tools--grid,.tile--results--tools--grid-2{
    background-color: ;
    color: white;
    font-size: 1.625rem;
    margin-bottom: 0.625rem;
    margin-right: 0px;
    
    display:block;
    grid-gap: 0.3125rem;
    height:;
    width: ;

}



.tile-sec-tools-title{
    

    display: flex;
    align-items:center;
    justify-content: center;

    height:;
    width:;
    font-size: 0.875rem;
    padding: 0px 0px;

}

.tile-sec-tools-desc,.tile-sec-tools-desc2,.tile-sec-tools-desc-a{
    font-weight:;
    

    display: flex;
    align-items:center;
    justify-content: center;
    min-height: 1.25rem;
    width:;
    margin-bottom: 0.3125rem;
    margin-right: 0px;
    color: black;
    font-size: 0.875rem;
    padding: 0.3125rem 0px;
}

#area-tools-datasheet{
  
    background-color:;

}


.button--download--datasheet--tools{
   
    font-size: 0.75rem;
    font-family: calibri,helvetica;
    border-radius: 0px;
    border: none;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0.3125rem;
    margin-bottom: 0.3125rem;
    color: white;
    text-decoration:none;

    cursor: pointer;

    display: flex;
    align-items:center;
    box-sizing: border-box;

    height: 2.5rem;
    width: 12.5rem;
}


.area--results--tool-image{
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.prop-grid{
    display: block;
    grid-gap: 0.625rem;
    background-color:;
    width: ;
    font-size:;
}

.results--fitting{

   /*float: left;
         width: 67% ;   
    */
    min-height: 6.25rem;
    padding: 1.875rem 0.625rem 0.625rem 0.625rem;

    border-radius:0px;
    font-size: 1.875rem;
    margin:0px;
    border: 0px dashed rgb(0,176,0) ;
    color: white;
    text-align: center;
    box-sizing: border-box;
}


.tab--head-2{
    display: flex;
    justify-content:center;
    align-items: center;

    position: static;
    z-index: 1;
    bottom: -1.875rem;
    left: 1.25rem;



    color: white;
    width: 100%;
    height: 1.875rem;
    font-size: 1.25rem;
}


.tile--results-fitting--grid{
   
    display: block;
    height: ;
    grid-template-columns: 9.375rem 17.5rem 10rem;

    background-color: ;
    margin-top: 1.25rem;
    color: white;
    font-size: 1.625rem;
}



.tile--section--results-fitting--title{
    

    display: flex;
    align-items:center;
    justify-content: center;
    height: 1.5625rem;
    font-size: 1.25rem;

}

.tile--section--results-fitting--part-number{
    font-weight: ;
    

    display: flex;
    align-items:center;
    justify-content: center;
    height: 2.5rem;
    margin-right: 0px;
    color: black;
    font-size: 1.625rem;
}

.tile--section--download-datasheet-fitting{
    justify-content: center;
    align-items: top;
    


    font-size: 1rem;
    font-family: calibri,helvetica;
    border-radius: 0px;
    padding: 0.625rem 0.625rem 1.25rem 3.75rem;
    padding: 0px 0.625rem 0px 3.75rem;
    padding: 0px;

    border: none;
    color: white;
    text-decoration:none;
    position:relative;
    cursor: pointer;

    box-sizing: border-box;
    height: 2.5rem;
    
}



.tile-notes-grid{
    background-color: ;
    color: white;
    font-size: 1.625rem;

    display: grid;
    height:;
    grid-gap: ;
    margin-bottom: 0.3125rem;
    grid-template-columns: 100%;
    grid-template-rows: 1.25rem auto;
}

.tile-sec-notes-title{
    

    
    font-size: 0.875rem; 
    display: flex;
    align-items:center;
    justify-content: center;
    height: 1.25rem;
}



.tile-sec-notes-desc{
    font-weight: ;
    

    font-size: 0.875rem; 

    display: flex;
    align-items:center;
    justify-content: center;
    height: ;
    margin-right: 0px;
    padding: 0.3125rem;
    color: white;
}



.tile--results--warning--grid{
    display: grid;
    grid-template-columns: 100%;

    background-color: ;
    color: white;
    font-size: 1.625rem;
    height:;
    margin-top: 0.625rem;
    margin-bottom: 0.3125rem;
    margin-right: 0.625rem;
    width: 100%;
    
}

.tile--sec--warning--title{
 font-size: 0.875rem; 

    display: none;
    align-items:center;
    justify-content: center;
    height: 2.5rem;
}

.tile--sec--warning--desc{
    font-weight: ;
    

    font-size: 0.875rem; 

    display: flex;
    align-items:center;
    justify-content: center;

    grid-column:1/2;
    grid-row-start: 1/2; 

    padding: 0.3125rem;
    margin-right: 0px;
    color: black;
}





.tab--head-4{
    float:;
    display: flex;
    justify-content:center;
    align-items: center;

    position: static;
    z-index: 1;
    bottom: 0.625rem;
    left: 1.25rem;
    font-size: 1.125rem;

    color: white;
    width: 100%;
    height: 1.875rem;

}


.tab--head-3{

    float: ;
    display: flex;
    justify-content:center;
    align-items: center;

    position: static;
    z-index: 1;
    bottom: 1.25rem;
    left: 1.25rem;


    color: white;
    width: 100%;
    height: 1.875rem;

}


.tab--head-5{
    float:none;
    display: flex;
    justify-content:center;
    align-items: center;

    position: relative;
    z-index: 1;
    bottom: 0.9321rem;
    left: 1.25rem;

    color: white;
    width: 100%;
    height: 1.875rem;
}

#tool-image{
    flex-direction: column;
}


#tool{
    height: 18.75rem;
    width: 23.125rem;
}

.image{
    padding: 0.625rem;
}

.tab--head-5{
    float:;
    display: flex;
    justify-content:center;
    align-items: center;

    position: static;
    z-index: 1;
    bottom: 0.9321rem;
    left: 1.25rem;

    color: white;
    width: 100%;
    height: 1.875rem;
    margin-bottom: 0.625rem;

}


.mail-box{
    width: 100%;
    margin-bottom: 0.3125rem;
    margin-top: 0.625rem;

    grid-template-columns: 70% 25%;
    font-size: 1rem;
}

.tmi{
    width: 100%;
    margin-bottom: 0.3125rem;

    grid-template-columns: 70% 25%;
    font-size: 1rem;
}

/*
.tmi img{
    width: 5.625rem;
    height: 4.375rem;
}

*/
.mail{
    position: relative;
    overflow-y: hidden;
    bottom:0px;
    right: 0px;
    float: left;

    width: 100%;
    text-align: center;
    margin-bottom: 0.3125rem ;
    margin-top: 1.25rem;

    font-size: 1.375rem;
    max-height: 36.25rem;
    background-color: ; 

    display: flex;
    flex-direction: column;
    justify-content: center;  

}

.mail-content{

    padding: 0.625rem;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    animation-name: slide-up;
    animation-duration: 1s;
    animation-direction: ;

}


.mail form{
    display: block;
    background-color: ;
    width: 90%;
    padding: 0px;
    margin-left:auto;
    margin-right: auto;
}


#form--name,#form--e-mail{
    height: 1.875rem;
    margin: 0px 0px 0px 0px;
    background:transparent;
    color: purple; 
    font-weight: bold ;
    font-size: 0.875rem;
    width: 13.75rem;
    box-sizing: border-box;

}

#form--query{
    padding: 0.625rem; 
    height: 7.5rem;
    width: 15.625rem;
    box-sizing: border-box;
    background:transparent;

}

#form--submit{

    padding: 0px;
    height: 1.875rem; 
    margin-top: 0.3125rem; 
    border: 0px;
    font-size: 1.125rem;
    width: 9.375rem;
    color: white;
    margin-bottom: 0px;
}



#mail-close{
    position: relative;
    top:0px;
    right: -20.625rem;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;


    padding: 0.3125rem;
    border-radius: 3.125rem;
}

#mail-close img{

}

#ncode{
    width: 100%;
}

}


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

    html{
    font-size: 14px;
}

    .tile--section--input--dropdown{
    justify-content: flex-start;
    padding-left: 0px;
    width: 12.5rem;
}



.tile--section--download-datasheet-fitting::before{
    left: 5.625rem;
    top: 0.1875rem; 
    }



/*
#logo--tmi{
    width: 5rem;
    height: 3.75rem;
}

*/
.tile-mail{
    display: grid;
    grid-gap: 0.3125rem;
    grid-template-columns: 5rem 18.75rem;
    margin-bottom: 0.625rem;
}

.mail label{
    font-size: 1rem;

    height: 1.5625rem;
    width: 5rem;
}

#form--name,#form--e-mail{
    height: 1.5625rem;
    background:transparent;
    color: purple; 
    font-weight: bold ;
    font-size: 0.875rem;
    width: 13.75rem;
    box-sizing: border-box;

}

#form--query{

}

#form--submit{

    font-size: 1rem;
}


#mail-close{

}


}

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


.switch-left{
    font-size: 0.625rem;
}

.switch-right{
    font-size: 0.625rem;
}

#pressure,#temperature{
    width: 3.125rem;
    }


.area--input--grid{
    padding: 0.3125rem;
}

#pipesize,#medium,#material,#fittingType,#fittingType-lp{
    width: 8.75rem;
    }


.tile--section--input--dropdown{
    justify-content: flex-start;
    padding-left: 0.625rem;
    width: 12.5rem;
}

.tile--section--download-datasheet-fitting::before{
    left: 5.3125rem;
    top: 0.1875rem; 
    }

.tile-mail{
    display: grid;
    grid-gap: 0.3125rem;
    grid-template-columns: 3.75rem 15.625rem;
    margin-bottom: 0.625rem;
}

.mail label{
    font-size: 0.875rem;

    height: 1.5625rem;
    width: 3.75rem;
}

.mail form{
    margin-left: 1.25rem;
}

#mail-close{

    top: -6.25rem;
    right: 1.25rem;
}
   
#form--submit{

    font-size: 0.875rem;
}



}


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

  html{
    font-size: 12px;
}

.area--input--grid{
    padding: 0.3125rem;
}

.tile--section--input--title{
    padding-left: 0.3125rem;
    
}

.tile--section--download-datasheet-fitting::before{
    left: 4.6825rem;
    top: 0.1875rem; 
    }

h2{
    font-size: 1.125rem;
}

#pipesize,#medium,#material,#fittingType,#fittingType-lp{
    width: 10rem;
    }

#pressure,#temperature{
    width: 3.75rem;
    }



.tile--section--input--dropdown{
    justify-content: flex-start;
    padding-left: 0.625rem;
    width: 12.5rem;
}


.tile--area--input--grid{


    grid-template-columns: 13.75rem 9.375rem;
}


.button--find-part-number{
    height: 6rem; 
}

.button--find-part-number p{
    font-size: 1.5rem;
    top: -3.4375rem;
}


.button--find-part-number:hover{

}

/*
.button--find-part-number img{
    height: 2.5rem;
    width: 1.875rem;
    left: -6.25rem;
    top: 0.3125rem;
    }
*/

.tile--section--download-datasheet-fitting::before{
    left: 4.0625rem;
    top: 0.1875rem; 
    }


#tool{
    height: 15rem;
    width: 18.75rem;
}

.tile-mail{
    display: grid;
    grid-gap: 0.3125rem;
    grid-template-columns: 3.75rem 15.625rem;
    margin-bottom: 0.625rem;
}

.mail label{
    font-size: 0.875rem;

    height: 1.5625rem;
    width: 3.75rem;
}

.mail form{
    margin-left: 3.125rem;
}

#form--name,#form--e-mail{
    height: 1.5625rem;
    background:transparent;
    color: purple; 
    font-weight: bold ;
    font-size: 0.875rem;
    width: 11.25rem;
    box-sizing: border-box;

}

#form--query{
    padding: 0.625rem; 
    height: 7.5rem;
    width: 13.75rem;
    box-sizing: border-box;
    background:transparent;
    border:1px solid;
}

#form--submit{

    font-size: 0.875rem;
}


#mail-close{
    position: relative;
    top: -6.25rem;
    right: 3.75rem;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;


    padding: 0.3125rem;
    border-radius: 3.125rem;
}


.mail-box,.tmi{
    width: 100%;
    margin-bottom: 0.3125rem;
    margin-top: 0.625rem;

    grid-template-columns: 65% 25%;
    font-size: 0.875rem;
}

#logo--mail{
    height: 3.75rem;
    width: 3.75rem;
    border-radius: 3.125rem;
    margin-left: 0.3125rem;
}

#logo--mail-a{
     width: 3rem;
    height: 3rem;

}

/*
#logo--mail img{
    width: 3.125rem;
    height: 3.125rem;

}

#logo--tmi{
    width: 3.125rem;
    height: 3.125rem;
}

*/
}




/*

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

    header{
    width: 100%;
    grid-template-columns: 70% 15% 15%;

}


.logo--chase{
    width: 100%;
    }


    .area--input{
    display: grid;
    grid-column-gap: 0.3125rem;
    grid-template-columns: 88.3% 10%;
    margin-top: 0px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.button--find-part-number{
    min-height: 160px;
    border: none;
    width: 100%;
}

.area--input--grid{
    grid-template-columns: repeat(3,33%);
    grid-gap: 0.625rem;
}

.tile--area--input--grid{

    width: 100%;
    grid-template-columns: 60% 40%;
}

.tile--area--input--grid-small{
    width: 100%;

    grid-template-columns: 60% 40%;

}

.area--results--grid{
    grid-template-columns: 50% 48%;
    grid-gap: 0.625rem;
}

.tile--results-fitting--grid{
    grid-template-columns: 20% 50% 30%;
    margin-bottom: 0.625rem;
}

.tile--section--download-datasheet-fitting{
    justify-content: center;
  
    
}


.tile--section--download-datasheet-fitting::before{
    left: 58px;
    top: 3px; 
}



.tile-notes-grid{
    grid-gap: ;
    grid-template-columns: 10% 90%;
}

.tile--results--warning--grid{

    grid-template-columns: 10% 90%;
    
}

.area--main--results--tools{

    grid-template-columns: 50% 48%;
    grid-gap: 0.625rem;
}

.tile--results--tools--grid{

    grid-gap: 0.3125rem;

    grid-template-columns: 20% 79%;

}


.button--download--datasheet--tools{

    margin-right: 180px;
}

.prop-grid{
    grid-template-columns: 50% 48%;
    grid-template-rows: 100px;
    grid-gap: 0.625rem;

}

.mail,.mail-content{
    width: 100%; 


}

#ncode{
    width: 99%;
    margin-right: 0.625rem;
}



}

*/