/* CSS Document */

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
     float: left;
     padding: 3px;
     border: 0px solid red;
}

body {
     margin: 0px 6px;
     background-color: rgba(235,235,235,1);
}

.flex-cont-2 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.flex-cont-2 > div {
    width: 47%;
    margin: 5px auto;
    text-align: left;
     padding: 0px 5px;
     border: solid lightgray 3px;
}

.flex-cont-2 > div:hover {
     box-shadow: 0px 0px 26px black;
}

.flex-cont {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.flex-cont > div {
    width: 30%;
    margin: 5px auto;
    text-align: left;
     padding: 0px 5px;
     border: solid lightgray 0px;
}


.flex-cont-3 {
    display: flex;
    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
}

.flex-cont-3 > div {
    width: 32%;
    margin: 8px 4px;
    text-align: center;
     border: solid lightgray 3px;
}

.flex-cont-3 > div:hover {
     box-shadow: 0px 0px 26px black;
}


.flex-cont-4 {
    display: flex;
    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
}

.flex-cont-4 > div {
    width: 23%;
    margin: 8px;
    text-align: center;
     padding: 0px;
     border: solid lightgray 3px;
     font-size: 18px;
}

.flex-cont-4 > div:hover {
     box-shadow: 0px 0px 26px black;
}

.container {
     position: relative;
     z-index: 100;
     /*text-align: center;*/
}

.compname {
     width: 200px;     
}

.top-left {
     position: absolute;
     top: 25px;
     left: 50px;
     background-color: rgb(235,235,235,0.85); 
     border: solid red 4px;
     color: red;
     padding: 15px 50px;
     border-radius: 0px 50px 0px 50px;
     box-shadow: 9px 9px 15px black;
}

.topnav {
     overflow: hidden;
     /*background-color: rgba(235, 235, 235, 0.85);*/
     padding: 10px 0px;
     margin-top: 10px;
}

.topnav a {
  float: none;
  display: inline;
  color: black;
  text-align: center;
  padding: 24px 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: 'Noto Sans', sans-serif;
}

.topnav a:hover {
  background-color: #FF2E31;
  color: white;
  text-shadow: none;
}


.topnav .icon {
  display: none;
}

p, li {
     font-size: 20px;
     font-family: 'Noto Sans', sans-serif;
     color: black;
}

ul {
     line-height: 30px;
}

h1 {
    font-size: 60px; 
     font-family: 'Noto Sans', sans-serif;
}

h2 {
     font-size: 50px;
     font-family: 'Noto Sans', sans-serif;
}

h3 {
     font-size: 25px;
     font-family: 'Noto Sans', sans-serif;
}

.man-name {
     font-size: 25px;
     font-family: 'Noto Sans', sans-serif;
     background-color: lightgray;
     margin-top: 0px;
     text-decoration: none;
     color: black;
}

a {
     text-decoration: none;
     color: black;
}


/* Centered text */
.teams {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline;
  z-index: 100;
}
     
.termap1 {
     display: none;
}

.btn1 {
     width: 350px;
     height: 125px;
     background-color: white;
     color: black;
     border-radius: 15px;
     border: solid red 4px;
     font-size: 25px;
     font-family: 'Noto Sans', sans-serif;     
}

.btn1:hover {
     background-color: red;
     color: white;
     cursor: pointer;
     border: solid white 4px;

}

.btn2 {
     width: 250px;
     height: 62px;
     background-color: white;
     color: black;
     border-radius: 15px;
     border: solid red 4px;
     font-size: 25px;
     font-family: 'Noto Sans', sans-serif; 
     padding: 5px;
}

.btn2:hover {
     background-color: red;
     color: white;
     cursor: pointer;
     border: solid black 4px;

}

.btn3 {
     width: 250px;
     height: 70px;
     background-color: white;
     color: black;
     border-radius: 15px;
     border: solid red 4px;
     font-size: 20px;
     font-family: 'Noto Sans', sans-serif; 
     padding: 5px;
}

.btn3:hover {
     background-color: red;
     color: white;
     cursor: pointer;
     border: solid black 4px;

}

.whoweare {
     line-height: 60px;
}

input[type=text], input[type=email], textarea, select, input[type=password] {
     font-size: 24px;
     color: black;
     width: 100%;
     font-family: 'Noto Sans', sans-serif; 
}

input[type=file] {
     font-size: 18px;
     color: black;
     width: 100%;
     font-family: 'Noto Sans', sans-serif; 
}

input[type=checkbox]{
     height: 20px;
     width: 20px;
}

#myBtnTop {
  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: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  width: 60px;
     border: solid black 1px;
}    

table {
     font-family: 'Noto Sans', sans-serif; 
}

/*=================================================================*/

@media screen and (max-width: 1024px) {
     
    [class*="col-"] {
        width: 100%;
    }
     
     .flex-cont-2 > div {
         width: 100%;
     } 
          
     .flex-cont-3 > div {
         width: 100%;
     } 
     
     .flex-cont-4 > div {
         width: 100%;
     }      
     
     .flex-cont > div {
         width: 100%;
     }  
     
    .topnav {
          padding: 0px;
          font-size: 26px;
     }
     
     .topnav a:not(:first-child) {
          display: none;
     }
     
     .topnav a.icon {
          float: right;
          display: block;
     }
     
     .topnav.responsive {
          position: relative;
     }
     
     .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
     }
     
     .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
     }
     
     .topnav a {
          float: left;
          font-size: 18px;
          line-height: 0px;
     }
     
     .top-left {
          position: relative;
          top: 0px;
          left: 0px;
          background-color:rgba(162,162,162,0.70);
          border: none;
          color: red;
          border-radius: 0px;
          box-shadow: none;
          padding: 5px;
          text-align: center;
     }
     
     p {
          font-size: 18px;
     }

     h1 {
         font-size: 40px; 
          font-family: 'Noto Sans', sans-serif;
     }

     h2 {
          font-size: 35px;
          font-family: 'Noto Sans', sans-serif;
     }

     h3 {
          font-size: 25px;
          font-family: 'Noto Sans', sans-serif;
     }
     
     .container {
          margin-bottom: 0px;
     }
     
     .termap, .teams{
          display: none;
     }
     
     .termap1 {
          display: inline;
     }
     
     .whoweare {
          line-height: 25px;
     }
     
     .manuf{
          color: black;
     }

}

/*=================================================================*/

@media screen and (max-width: 1620px) {   
   .btn1 {
      display: none;    
      }
}