*{
  margin: 0;
    padding: 0;
    outline: none;
    border: none;
    -webkit-box-sizing: border-box;
}
*:before,
*:after{
    -webkit-box-sizing: border-box;
}
.clearfix {
  *zoom: 1;
}
html{
    font-family: Helvetica, arial, sans-serif;
    font-size: 12px;
}
body{
    background: url('brushed_alu.png');
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container{
    width: 80%;
    margin: 0 auto;
}

.prorow
{
    background-color:White;
    margin-top:30px;
    margin-bottom:30px;
}
.prohead
{
}
.prodth
{
    text-align:center;
    padding-top:20px;
    padding-bottom:50px;
    text-decoration:underline;
    color:#f0005a;
    border-color:#003089;
    border-style:groove;
    border-width:2px;
}

.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.container1{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}


.active1
{
    background-color:Yellow;
    color:Black;
}

.conta p
{
    line-height:2;
}
@media only screen and (max-width: 600px){.container1{width:100%;margin-right:2px;margin-right:2px;padding:2px;}
.prohead
{
    background-color:White;
    color:#024992;
    font-size:30px;
    text-align:center;
    font-family:arial black;
}



.intro3
{
    font-size:12px;
    padding-top:30px;
    text-align:center;
    padding-bottom:20px;
}
.prodiv h4
{
    
     max-width:90%;
    margin-left:5%;
    margin-right:5%;
    font-family:Arial Black;
    font-size:22px;
    color:white;
    text-align:center;
    background-color:#580096;
    height:50px;
    padding-top:10px;
    border-top-left-radius:12px;border-top-right-radius:12px;
}
.prodiv
{
    /*
    border: 2px groove violet;
    border-radius:10px;*/
}
.promain
{
    margin-top:30px;
    max-width:95%;
    display:table;
    margin-left:2.5%;
    margin-right:2.5%;
    padding-left:5px;
    padding-right:5px;
    background-color:White;
    border:2px;
    border-style:inset;
    border-color:Red;
    border-radius:15px;
}
.prodtable
{
    
    width:100%;
    text-align:center;
    color:Red;
    margin-left:auto;
    margin-right:auto;
    background-color:White;
    border-bottom:10px;
    border-bottom-style:groove;
    border-color:#c50030;
    display:block;
    
}
    .prodimg
{
 max-width:90%;
 max-height:90%;
 margin-left:5%;
 margin-right:5%;
 margin-bottom:50px;
 border:2px;
 border-color:#580096;
 border-style:groove;
 border-bottom-left-radius:12px;border-bottom-right-radius:12px;
  
  
}
.intro1
{
    margin-left:2.5%;
    margin-right:2.5%;
    margin-top:2.5%;
    margin-bottom:2.5%;
    max-width:95%;
    height:auto;
    text-align:justify;
    border:2px groove blue;
    border-radius:15px;
    background-color:Green;
    
}
.intro2
{
    padding-left:50px;padding-right:50px;padding-top:2px;
    padding-bottom:50px;
}

.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
header{
    width: 100%;
    height: auto;
    background: green;
}

}


@media only screen and (min-width: 601px)and (max-width: 999px){.container1{width:100%;margin-right:2px;margin-right:2px;padding:2px;}

.intro2
{
    padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:50px;
}
.intro3
{
    font-size:12px;
    padding-top:30px;
    text-align:center;
    padding-bottom:20px;
}
.introtab
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    max-width:1200px;
    margin-top:20px;
    border:2px groove blue;
    border-radius:15px;
    background-color:Green;
}
.promain,.prorow
{
     margin-top:20px;margin-left:auto;margin-right:auto;display:table-row;
    /*border: medium groove #FF0000;border-radius:10px;*/
    max-width:800px;
    padding-bottom:20px;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
}
.prodimg
{
 width:80%;
 max-height:100%;
 max-width:100%;
 margin-bottom:10px;
 border:2px;
 border-color:#580096;
 border-style:groove;
    border-bottom-left-radius:15px;border-bottom-right-radius:15px;
    margin-bottom:50px;
}
.prohead
{
    color:blue;
    font-size:45px;
    text-align:center;
    font-family:Arial Black;
    margin-bottom:30px;
    margin-top:30px;
}
.prodiv
{
    display: table-cell;
    margin-left:30px;
    margin-right:30px;
    text-align:center;
    max-width:100%;
    background-color:#deffdf;
}
.prodiv h4
{
    max-width:80%;
    font-family:Arial Black;
    font-size:20px;
    color:white;
    text-align:center;
    background-color:#580096;
    margin-left:10%;
    padding-top:12px;
    height:50px;
    margin-right:10%;
    border-top-left-radius:15px;border-top-right-radius:15px;
}


.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
header{
    width: 100%;
    height: auto;
    background: green;
}

}


/*
@media (min-width:768px)
{
    .container1
    {
        max-width:100%;padding-top:10px;margin-left:auto;margin-right:auto;text-align:center;
    }
.intro2
{
    padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:50px;
}
.intro3
{
    font-size:12px;
    padding-top:30px;
    text-align:center;
    padding-bottom:20px;
}
.prodtable
{
    max-width:80%;
    text-align:center;
    border-color:Black;
    border:2px;
    border-style:groove;
    
}
}*/
 @media only screen and (min-width:1000px)
 {
     .container1
     {
         max-width:100%;padding-top:10px;margin-left:auto;margin-right:auto;text-align:center;background-color:#00b93d;
         margin-top:30px;
     }

.intro2
{
    padding-left:20%;padding-right:20%;padding-top:20px;padding-bottom:50px;
}
.intro3
{
    font-size:12px;
    padding-top:30px;
    text-align:center;
    padding-bottom:20px;
}

.prorow
{
    
   width:auto;
    display:table-row;
    padding-left:5%;
    padding-right:5%;
}
.promain
{
    width:1400px;
    display:table-row;
}.prodiv
{
   display:table-cell;
   width:auto;
   max-width:33.33%;
   padding-left:5%;padding-right:5%;
}
.prodimg
{
    border:2px groove #580096;
    border-bottom-left-radius:15px;border-bottom-right-radius:15px;
    max-width:100%;
    max-height:100%;
   width:auto;
   height:auto;
   margin-left:5%;
   margin-right:5%;
   margin-bottom:80px;
   
}.prodiv h4
{
    border:2px groove #580096;
    border-top-left-radius:15px;border-top-right-radius:15px;
    max-width:100%;
    width:100%;
    height:80px;
   margin-left:5%;
  font-family:Arial Black;
    font-size:28px;
    color:white;
    text-align:center;
    background-color:#580096;
    padding-top:20px; 
}
.prohead
{
    text-align:center;
    font-family:Arial black;
    font-size:40px;
    color:#f82767;
    background-color:White;
    padding-top:30px;
    padding-bottom:30px;
}


.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
header{
    width: 100%;
    height: auto;
    background: green;
}

}
/*
 @media (min-width:1200px){.container1{max-width:80%;padding-top:10px;margin-left:auto;margin-right:auto;text-align:center;}.intro2
{
   padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:50px;
}.intro3
{
    font-size:12px;
    padding-top:30px;
    text-align:center;
    padding-bottom:20px;
}
.prodtable
{
    max-width:80%;
    text-align:center;
    border-color:Black;
    border:2px;
    border-style:groove;
    
}
}
    .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
header{
    width: 100%;
    height: auto;
    background: green;
}

*/
/*totop button*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
.header-left,
.header-right{
    position: relative;
    color: white;
    float: left;
}
.header-left{
    width: 30%;
}
.header-right label{
    position: absolute;
    top: -3.7em;
    right: 0;
    cursor: pointer;
}
.header-right span{
    position: relative;
    width: 2em;
    height: 2em;
    background: rgba(255,255,255,.3);
    -webkit-transition: all .3s ease;
}
.header-right span:hover{
    background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
    content: '';
    position: absolute;
    width: 2em;
    height: .5em;
    top: 4px;
    left: 0;
    background: black;
}
.header-right span:after{
    top: 14px;
}
.header-right{
    width: 70%;
    text-align: right;
}
#open{
    display: none;
}
h1{
    font-weight: 300;
    line-height: 40px;
}
a{
    text-decoration: none;
    color: white;
}
nav>a{
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 40px;
    padding: 0 2em;
    -webkit-transition: all .3s ease;
}
nav>a:hover{
    background: rgba(255,255,255,.9);
    color: black;
}
.hidden-desktop{
    display: none;
}
section{
    width: 100%;
    height: auto;
    /*background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);*/
}
.section-left,
.section-right{
    float: left;
}
.section-left{
    width: 70%;
    padding: 3em 0;
}
.section-right{
    width: 30%;
}
.section-title,
.section-tagline{
    color: white;
    font-weight: 300;
    margin: 0;
    padding: 0;
    -webkit-transition: all .4s ease;
}
.section-title{
    font-size: 4em;
    margin-bottom: .3em;
    text-shadow: 0 3px 0px black,
                 0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
    font-size: 1em;
}
.learn-more{
    display: table;
    margin: 3em auto 0;
    padding: 1em 6em;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
    background: #EAAF00;
    background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
    font-size: 1.2em;
}
.learn-more:hover{
    background: #EAAF00;
}
.learn-more:active{
    box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .box{
        width: 49%;
        margin-bottom: 5%;
    }

    ul li:nth-child(3) .box{
        clear: both;
    }

    ul li:nth-child(2n) .box{
        margin-right: 0;
        clear: right;
    }
}

/* Small monitor */
@media (max-width: 979px){
    nav>a{
        padding: 0 1.5em;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
    }
    .section-right{
        padding: 0 0 2em;
    }
    .section-title{
        font-size: 4em;
        margin-bottom: .2em;
    }
    .section-tagline{
        font-size: 1.3em;
    }
    .learn-more{
        margin: 0 auto;
    }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .container{
        width: 95%;
    }
    nav>a{
        padding: 0 2em;
    }
    h1{
        padding: .5em 0;
    }
    .header-left,
    .header-right{
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
        padding: 2em 0;
    }
    .section-right{
        padding: 1em 0 2em;
    }
    .section-title{
        font-size: 3em;
        margin-bottom: .2em;
    }
    .section-tagline{
        font-size: 1.3em;
    }
    .learn-more{
        margin: 0 auto;
    }
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
    body{
        padding: 0 .5em;
    }
    .container{
        width: 90%;
    }
    nav{
        height: 0;
        overflow: hidden;
        -webkit-transition: all .3s ease;
    }
    input[type="checkbox"]:checked + nav{
        height: 205px;
    }
    nav>a{
        padding: 0 1em;
        display: block;
        border-bottom: solid 1px rgba(255,255,255,.1);
    }
    h1{
        padding: .5em 0;
    }
    .header-left,
    .header-right{
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
        padding: 1em 0;
    }
    .section-right{
        text-align: center;
        padding: 1em 0 2em;
    }
    .section-title{
        font-size: 2.4em;
        margin-bottom: 0;
    }
    .section-tagline{
        font-size: 1em;
    }
    .learn-more{
        display: table;
        margin: 0 auto;
    }
    .hidden-desktop{
        display: block;
    }
}





/* News*/







@media only screen and (min-width: 601px)
{
    .newsimg
{
    max-width:100%;width:auto;
    max-height:100%;
    border: medium groove #006dac;
}
.table 
{
    display: none;
}
.ony h8
{
     color:#f82767;
    background-color:White;
    text-align:center;
    font-size:38px;
    font-weight:bolder;
    font-family:Arial black;
    margin-left:auto;
    margin-right:auto;
}
.cell {
  display: table-cell;
}
.row {
  display: table-row;
  
}
.colspan2 {
  display: table-caption;
  max-width:50%;
  max-height:500px;
}

.rowh
{
    padding:30px;
    text-align:center;font-size:38px;font-family:arial black;
    color:#024992;
}
.form1
{
    background-color: #39fd62;
}
.form2
{
    background-color: #7394ff;
}.map2
{
    margin-top:20px;margin-left:auto;margin-right:auto;
    /*border: medium groove #00bb3e;border-radius:15px;
    max-width:100%;padding:5px;*/
}}



@media(max-width:600px)
{
   .newsimg
{
    width:auto;max-width:100%;
}
.ony
{
    display:none;
}
.table 
{
    margin-top:20px;margin-left:8px;margin-right:8px;display: block;
    border: medium groove #00bb3e;border-radius:15px;
    max-width:100%;padding-bottom:5px;padding-left:5px;padding-right:5px;
}
.cell {
  display: block;
  border: 1px solid #000;
}
.row {
  display: block;
  max-width:100%;
  
}
.colspan2 {
  /* What to do here? */
  display: block;
}


.rowh
{
    padding:5px;
    text-align:center; font-size:24px; font-family:arial black;
    color:#024992;
}
.map2
{
    margin-top:20px;margin-left:5%;margin-right:5%;
    border: medium groove #00bb3e;border-radius:15px;
    max-width:100%;padding:5px;width:auto;height:300px;
}
}

@media(max-width:600px)
{
    .sertable
{
    display:block;
    width:90%;
    margin-left:5%;
    margin-right:5%;
    background-color:#006abc;max-width:1550px;
    border:2px groove #3ce1ff;
    border-radius:10px;
}
.serrow
{
    display:block;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:2px inset ffd800;border-radius:5px;
}
.sercol
{
    display:block;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    padding-left:5%;
    padding-right:5%;
    white-space: nowrap;
    margin-left:2%;
    margin-right:2%;
    text-align:center;
    margin-top:5%;
    border:2px groove ffd800;border-radius:5px;
}
.sertable h7
{
    color:#fff600;
    text-align:left;
    font-size:24px;
    font-weight:bolder;
    padding-left:5%;
    padding-right:5%;
}
.sertable p
{
    
    text-align:center;
    color:White;
    font-size:20px;
    padding-left:5%;
    padding-right:5%;
}
.serhead h9
{
    color:#f82767;
    background-color:White;
    text-align:center;
    font-size:38px;
    font-weight:bolder;
    font-family:Arial black;
    margin-left:auto;
    margin-right:auto;
}
.serhead
{
    display:table;
    width:auto;max-width:1550px;
    margin-left:auto;
    margin-right:auto;
    padding:2%;
}
.footermain
{
    display:block;
    width:auto;
    margin-left:2%;
    margin-right:2%;
    background-color:black;max-width:600px;
    padding-right:2%;padding-left:2%;padding-top:2%;
    padding-bottom:2%;
    border-bottom: 2px groove white;
}

.footermain h7
{
    color:#fff600;
    text-align:left;
    font-size:20px;
    font-weight:bolder;
    padding-left:5%;
    padding-right:5%;
}
.sercolf
{
    display:block;
    width:auto;
    max-width:100%;
    padding-right:5%;
    margin-left:1%;
    margin-right:1%;
    line-height:2;
    text-align:center;
    font-family:Franklin Gothic Medium;
    padding:5px;
    margin-bottom:5px;
}
.frow
{
    display:block;
    width:100%;
    margin-left:1%;
    margin-right:1%;
    border:2px groove white;
    
}
.footermain p
{
    
    text-align:left;
    color:White;
    font-size:16px;
    padding-left:5%;
    padding-right:5%;
    line-height:2;
    text-align:center;
}
.social
{
    width:auto;
    max-width:60px
}
.design h10
{
    
    font-family:Californian FB;
}
.design
{
    display:block;
    padding-top:2%;
    text-align:center;
    font-size:13px;
    color:white;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;background-color:#ae003d;
    padding-bottom:2%;
}


}
@media(max-width:1000px) and (min-width:600px)
{
    
.footermain
{
    display:table;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#006a28;max-width:1550px;
    padding-right:2%;padding-left:2%;padding-top:2%;
    padding-bottom:2%;
    border-bottom: 2px groove white;
}

.footermain h7
{
    color:#fff600;
    text-align:left;
    font-size:18px;
    font-weight:bolder;
    padding-left:5%;
    padding-right:5%;
}
.sercolf
{
    display:table-cell;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    padding-right:5%;
    margin-left:1%;
    margin-right:1%;
    line-height:2;
}
.frow
{
    display:table-row;
    width:100%;
    margin-left:1%;
    margin-right:1%;
    border:2px groove white;
    
}
.footermain p
{
    
    text-align:left;
    color:White;
    font-size:16px;
    padding-left:5%;
    padding-right:5%;
    line-height:2;
}
.social
{
    width:auto;
    max-width:60px
}
.design h10
{
    background-color:black;
    font-family:Book Antiqua;
}
.design
{
    display:block;
    padding-top:2%;
    text-align:center;
    font-size:18px;
    color:#fffc00;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    background-color:#006a28;
    padding-bottom:2%;
}
    .sertable
{
    display:table;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#006abc;max-width:1550px;
    padding:5%;
}
.serrow
{
    display:table-row;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:2px groove white;
}
.sercol
{
    display:table-cell;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    padding-left:5%;
    padding-right:5%;
    margin-left:2%;
    margin-right:2%;
}
.sertable h7
{
    color:#fff600;
    text-align:left;
    font-size:24px;
    font-weight:bolder;
    padding-left:5%;
    padding-right:5%;
}
.sertable p
{
    
    text-align:left;
    color:White;
    font-size:20px;
    padding-left:5%;
    padding-right:5%;
}
.serhead h9
{
    color:#f82767;
    background-color:White;
    text-align:center;
    font-size:38px;
    font-weight:bolder;
    text-align:center;
    font-family:Arial black;
    margin-left:auto;
    margin-right:auto;
}
.serhead
{
    display:table;
    width:auto;max-width:1550px;
    margin-left:auto;
    margin-right:auto;
    padding:2%;
}
}



@media(min-width:1000px)
{
    
.footermain
{
    display:table;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#006a28;max-width:1550px;
    padding-right:2%;padding-left:2%;padding-top:2%;
    padding-bottom:2%;
    border-bottom: 2px groove white;
}

.footermain h7
{
    color:#fff600;
    text-align:left;
    font-size:20px;
    font-weight:bolder;
    padding-left:5%;
    padding-right:5%;
}
.sercolf
{
    display:table-cell;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    padding-right:5%;
    white-space: nowrap;
    margin-left:1%;
    margin-right:1%;
    line-height:2;
}
.frow
{
    display:table-row;
    width:100%;
    margin-left:1%;
    margin-right:1%;
    border:2px groove white;
    
}
.footermain p
{
    
    text-align:left;
    color:White;
    font-size:18px;
    padding-left:5%;
    padding-right:5%;
    line-height:2;
}
.social
{
    width:auto;
    max-width:60px
}
.design h10
{
    background-color:black;
    font-family:Book Antiqua;
}
.design
{
    display:block;
    padding-top:2%;
    text-align:center;
    font-size:18px;
    color:#fffc00;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    background-color:#006a28;
    padding-bottom:2%;
}
    .sertable
{
    display:table;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#006abc;max-width:1550px;
    padding:5%;
}
.serrow
{
    display:table-row;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:2px groove white;
}
.sercol
{
    display:table-cell;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    padding-left:5%;
    padding-right:5%;
    white-space: nowrap;
    margin-left:2%;
    margin-right:2%;
}
.sertable h7
{
    color:#fff600;
    text-align:left;
    font-size:24px;
    font-weight:bolder;
    padding-left:5%;
    padding-right:5%;
}
.sertable p
{
    
    text-align:left;
    color:White;
    font-size:20px;
    padding-left:5%;
    padding-right:5%;
}
.serhead h9
{
    color:#f82767;
    background-color:White;
    text-align:center;
    font-size:38px;
    font-weight:bolder;
    text-align:center;
    font-family:Arial black;
    margin-left:auto;
    margin-right:auto;
}
.serhead
{
    display:table;
    width:auto;max-width:1550px;
    margin-left:auto;
    margin-right:auto;
    padding:2%;
}
}



@media(min-width:800px)
{
  .contable
{
    border:2px groove #f9077f;
    borde-radius:8px;
    margin-left:auto;margin-right:auto;margin-bottom:50px;
    max-width:60%;
    margin:auto;
}  
.conta
{
    margin:20px 20% 20px 20%;
    width:auto;
    max-width:100%;
    max-width:100%; font-family: Georgia; font-weight: bolder; font-size: 20px; color: #002a77;
}
.conth
{
    padding: 0px; margin:20px 20% 20px 20%;
    font-family: Georgia; font-weight: bolder; font-size: 26px; color: #FFFFFF; background-color: #006600;
    
}

}
@media(max-width:800px)
{
.contable
{
    display:block;
    border:2px groove #f9077f;
    borde-radius:8px;
    width:auto;
    max-width:100%;
    background-image: url("images/bg0.png");
} 
.conta
{
    padding:5%;
    margin:5px 5% 5px 5%;
    display:block;
    width:auto;
    max-width:100%; font-family: Georgia; font-weight: bolder; font-size: 18px; color: #002a77;
}
.conth
{
    display:block;
    font-family: Georgia; font-weight: bolder; font-size: 24px; color: #FFFFFF; background-color: #006600;
    margin:5px 5% 5px 5%;
}

}

/* message*/
@media(min-width:800px)
{
    .msgg
    {
        
    border: 2px groove purple; max-width:100%;
    margin-left:20%;
    margin-right:20%;
    margin-top:5%;
    }
.msgtab
{
    display:table;
    width:auto;
    max-width:100%;
    margin:auto;
    margin-top:5%;
    margin-bottom:;
}
.msgrow
{
    display:table-row;
    margin-top:5%;
    width:auto;
}
.msgcol
{
    display:table-cell;
    font-family:Arial;
    color:Purple;
    font-size:14px;
    width:20%;
    margin:auto;
    padding:15px;
}
.msglab
{
    width:10%;
    font-family:Arial;
    color:Purple;
    font-size:16px;
    padding:5%;
}
.msgla
{
    width:10%;
    font-family:Arial;
    color:Purple;
    font-size:16px;
    padding:25px;
    margin:35px;
}
.tarea
{
    width:80%;
    border:2px groove red;
    height:100px;
    border:1px groove #FF0066;
    background-color:#FFCCCC;
    min-width:600px;
    margin-left:10px;
}
.tarea1
{
    width:90%;
    font-family:Arial;
    color:Purple;
    font-size:16px;
    display:table-cell;
    
    
}
}


@media(max-width:800px)
{
     .msgg
    {
        
    border: 2px groove purple; max-width:100%;
    margin-left:1%;
    margin-right:1%;
    margin-top:2%;
    }
.msgtab
{
    display:table;
    width:auto;
    max-width:100%;
    margin-left:20%;
    margin-right:20%;
    margin-top:5%;
}
.msgrow
{
    display:block;
    margin-bottom:10%;
    margin-top:10%;
}
.msgcol
{
    display:block;
    font-family:Arial;
    color:Purple;
    font-size:20px;
    margin-bottom:5%;
    margin-top:5%;
    padding-bottom:1%;
    padding-top:1%;
    text-align:center;
}
.msglab, .msgla
{
    display:block;
    font-family:Arial;
    color:Purple;
    font-size:20px;
    margin-bottom:3%;
    margin-top:3%;
    text-align:center;
}
.tarea
{
    width:80%;
    border:2px groove red;
    height:100px;
    border:1px groove #FF0066;
    background-color:#FFCCCC;
    min-width:220px;
}
.tarea1
{
    width:auto;
    display:block;
    font-family:Arial;
    color:Purple;
    font-size:20px;
    margin-bottom:5%;
    margin-top:5%;
    padding-bottom:1%;
    padding-top:1%;
    text-align:center;
    max-width:400px;
    
    
}
}