@charset "UTF-8";

body {
    background-color: #0b0d0e;
    color: #E4E7EA;
    font-family:  "Segoe UI", "Helvetica Neue", "Helvetica", Arial, "Noto Sans", sans-serif;
    font-size: 0.95rem;
    margin:0;
  }

  a {
    color: #4d94ff;
    text-decoration-style: none;
    text-decoration: none;
  }

  a:hover {
    color: #E4E7EA;
  }

  .link_white a {
    color: #E4E7EA;
    text-decoration-style: none;
    text-decoration: none;
  }

  .link_white a:hover {
    color: #66747f;
  }

h1, h2, h3, h4 {
  color: #20a8d8;
  display: inline;
}

#breadcrumb {
    padding: 10px 10px 10px 25px;
    color: #E4E7EA;
    background-color: #262c2f;
    border-bottom: #1a1a1a solid 1px;
    margin:0px;
    margin-top: 52px;
}

#breadcrumb a {
  margin-right:15px;
  color: #E4E7EA;
}

#breadcrumb a:hover {
  color: #20a8d8;
}

#breadcrumb span {
  margin-right:15px;
}

.main {
    background-color: #171a1c;
    margin:30px;
    padding: 20px;
    padding-top: 5px;
    border-radius: 6px 6px 10px 10px;
    border: #1a1a1a solid 1px;
    box-sizing: border-box;
}



.captcha_top {
  background-color: #71bdd3;
  color: #000;
  width: 300px;
  max-width: 300px;
  padding: 10px;
  border-radius: 6px 6px 0px 0px;
  border-top: #5472aa solid 2px;
  border-left: #5472aa solid 2px;
  border-right: #5472aa solid 2px;
} 

.captcha {
  background-color: #cee6ed;
  color: #000;
  width: 300px;
  max-width: 300px;
  padding: 10px;
  border-radius: 0px 0px 10px 10px;
  border-left: #5472aa solid 2px;
  border-bottom: #5472aa solid 2px;
  border-right: #5472aa solid 2px;
}

.row:after {

  content: "";

  display: table;

  clear: both;

  box-sizing: border-box;

}



.display_box {

  margin-right:30px;

  margin-left:30px;

  box-sizing: border-box;


}



.display_box_first {

  float: left;

  background-color: #20a8d8;

  border-radius: 6px 6px 10px 10px;

  border: #1b89b1 solid 1px;

  width: 22.8%;

  color: white;

  box-sizing: border-box;

  margin: 25px 15px 0px 0px;

  padding: 10px;

}


.display_box_secound {

  float: left;

  background-color: #4dbd74;

  border-radius: 6px 6px 10px 10px;

  border: #297042 solid 1px;

  width: 22.8%;

  color: white;

  box-sizing: border-box;

  margin: 25px 15px 0px 15px;

  padding: 10px;

}

.display_box_third {

  float: left;

  background-color: #f86c6b;

  border-radius: 6px 6px 10px 10px;

  border: #aa0808 solid 1px;

  width: 22.8%;

  color: white;

  box-sizing: border-box;

  margin: 25px 15px 0px 15px;

  padding: 10px;

}


.display_box_fourth {

  float: left;

  background-color: #ffc107;

  border-radius: 6px 6px 10px 10px;

  border: #b38600 solid 1px;

  width: 22.8%;

  color: white;

  box-sizing: border-box;

  margin: 25px 0px 0px 15px;

  padding: 10px;

}

    /* START NAV menu */


    .topnav {

      color: #E4E7EA;

      background-color: #262c2f;

      border-bottom: #1a1a1a solid 1px;

      position: fixed;

      top: 0;

      width: 100%;

    }

    

    .topnav a {

      color: #E4E7EA;

      float: left;

      display: block;

      padding: 16px; 

      text-decoration: none;

      text-decoration-style: none;

    }

    
    .topnav .icon {

      display: none;

    }

    .topnav_right img {

      border: 0px;

      padding-top: 8px;

      padding-right: 10px;

      float: right;

    }

  
    .topnav_right a {

      float: right;

      color: #E4E7EA;

    }

  
    .topnav .icon {

      display: none;

    }

  
    .dropdown {

      float: left;

      overflow: hidden;

      color: #E4E7EA;

    }

  
    .dropdown .dropbtn { 

      border: none;

      outline: none;

      color: #E4E7EA;

      padding: 16px; 

      background-color: #262c2f; 

      font-family: inherit;

      font-size: inherit;

      margin: 0;

    }

  
    .dropdown-content {

      color: #E4E7EA;

      display: none;

      position: absolute;

      background-color: #262c2f;

      min-width: 120px;

      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

      z-index: 1;

      border: #1a1a1a solid 1px;

      border-radius: 6px 6px 10px 10px;

    }

  
    .dropdown-content a {

      float: none;

      color: #E4E7EA;

      padding: 12px 16px;

      text-decoration: none;

      display: block;

      text-align: left;

    }

  
    .topnav a:hover, .dropdown:hover .dropbtn{

      text-shadow: 3px 3px 4px #000;

      color: #20a8d8;

    }

    .dropdown-content a:hover  {

      background-color: #262c2f; 

      color: #20a8d8;

      border-radius: 6px 6px 10px 10px;

    }

    .dropdown:hover .dropdown-content {

      display: block;

      color: #20a8d8;

    }

  
    /* END NAV menu */



/* Start sliding nav */



.sidenav {

  height: 220px;

  width: 0px;

  position: fixed;

  z-index: 1;

  top: 30;

  left: 0;

  background-color: #262c2f;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 50px;

  border-radius: 0px 6px 10px 10px;

  border: #1a1a1a solid 1px;

}



.sidenav a {

  padding: 5px 8px 8px 15px;

  text-decoration: none;

  color: #E4E7EA;

  display: block;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #20a8d8;

}



.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 5px;

  font-size: 30px;

  margin-left: 0px;

}

/* End sliding nav */






  .size_85_percent {

    font-size: 85%;

  }



  .size_75_percent {

    font-size: 75%;

  }



  .size_65_percent {

    font-size: 65%;

  }



  .size_110_percent {

    font-size: 110%;

    font-weight: bold;

  }



.text-red { color: #f63c3c; }

.text-blue { color: #20a8d8; }

.text-blue2 { color: #20a8d8; }

.text-green { color: #4dbd74; }

.text-green2 { color: #779933; }

.text-yellow { color: #ffc107; }

.text-orange { color: #e69704; }

.text-link { color: #4d94ff; }

.text-grey { color: #aaaaaa; }

.text-dark-grey { color: #535353; }

.text-purple {color: #bb86fc;}

.text-turquoise   {color: #59ac90;}

.text-beige   {color: #ffcda2;}

.text-tan   {color: #d2b48c;}

.text-olive   {color: #94964b;}

.text-brown   {color: #a76e5d;}

.text-rustic   {color: #a05220;}


.line { background-color: #4d4d4d;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #4d4d4d;
   }

   .line_white { background-color: #E4E7EA;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #E4E7EA;
   }

   .line_red { background-color: #f63c3c;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #f63c3c;
   }

   .line_blue { background-color: #4d94ff;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #4d94ff;
   }

   .line_yellow { background-color: #ffc107;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #ffc107;
   }

   .line_green { background-color: #4dbd74;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #4dbd74;
   }

#nav_line  {

  background-color: #20a8d8;

  width: 100% ;

  padding-bottom: 0px;

  border-bottom: 1px solid #20a8d8;

  }

 

  .button_text {

    background-color: #20a8d8; 

  border: 1px solid #11566f; 

  border-radius: 5px;

    color: white;

 padding-top: 3px;

 padding-right: 8px;

  padding-bottom: 3px;

 padding-left: 8px;

 margin: 5px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 100%;

}



.button_text:hover {

    background-color: #262c2f; 

    color: #20a8d8;

    border: 1px solid #20a8d8; 

}




.button_test_large {
  background-color: #007acc;
  border: 1px solid #5b84a5; 
   border-radius: 5px;
  color: white;
  padding: 28px 40px;
  margin: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 160%;
}

.button_test_large:hover {
    background-color: #4e84b1; 
    border: 1px solid #white;
}




/**** ####################  Media 1095 ################### **/

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



  .display_box_first {

    width: 23.5%;

    margin: 15px 15px 0px 0px;

  }



  .display_box_secound {

    width: 23.5%;

    margin: 15px 15px 0px 0px;

  }

  

  .display_box_third {

    width: 23.5%;

    margin: 15px 15px 0px 0px;

  }

  

  .display_box_fourth {

    width: 23.5%;

    margin: 15px 0px 0px 0px;

  }



} /**** #################### END  Media 1095 ################### **/ 



/**** ####################  Media 825px ################### **/

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



  .display_box_first {

    width: 23%;

    margin: 15px 15px 0px 0px;

  }



  .display_box_secound {

    width: 23%;

    margin: 15px 15px 0px 0px;

  }

  

  .display_box_third {

    width: 23%;

    margin: 15px 15px 0px 0px;

  }

  

  .display_box_fourth {

    width: 23%;

    margin: 15px 0px 0px 0px;

  }



} /**** #################### END  Media 825px ################### **/ 



/**** ####################  Media 620px ################### **/

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



    .main {

        margin:10px;

        padding: 10px;

        border-radius: 6px 6px 10px 10px;

        border: #1a1a1a solid 1px;

    }



    .display_box {

      margin-right:10px;

      margin-left:10px;

    }



    #breadcrumb {

        padding: 5px;

        color: #E4E7EA;

        background-color: #262c2f;

        border-bottom: #1a1a1a solid 1px;

        margin:0px;

        font-size: 85%;

        margin-top: 52px;

    }

    

    #breadcrumb a {

      margin-right:5px;

    }

    

    #breadcrumb span {

      margin-right:5px;

    }





    .display_box_first {

      width: 48%;

      margin: 15px 15px 0px 0px;

    }



    .display_box_secound {

      width: 48%;

      margin: 15px 0px 0px 0px;

    }

    

    .display_box_third {

      width: 48%;

      margin: 15px 15px 0px 0px;

    }

    

    .display_box_fourth {

      width: 48%;

      margin: 15px 0px 0px 0px;

    }



    /* Start nav media 600 */

      .topnav a:not(:nth-of-type(-n+2)), .dropdown .dropbtn {

        display: none;

        padding: 8px 8px;

      }

      .topnav a.icon {

        float: right;

        display: block;

      }



      .topnav_right {

        display: none;

      }

    

      .topnav.responsive {position: relative;}

      .topnav.responsive .icon {

        position: absolute;

        right: 0;

        top: 0;

      }

      .topnav.responsive a {

        float: none;

        display: block;

        text-align: left;

      }

      .topnav.responsive .dropdown {float: none;}

      .topnav.responsive .dropdown-content {position: relative;}

      .topnav.responsive .dropdown .dropbtn {

        display: block;

        width: 100%;

        text-align: left;

      }



      .dropdown-content a {

        padding: 8px 8px;

      

      }

      /* End nav media 600 */



  /* Start sliding nav media 620 */

  .sidenav {padding-top: 15px;}


  .button_test_large {
    background-color: #007acc;
    border: 1px solid #5b84a5; 
     border-radius: 5px;
    color: white;
    padding: 45px 100px;
    margin: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    font-size: 160%;
  }
  
  .button_test_large:hover {
      background-color: #4e84b1; 
      border: 1px solid #white;
  }

} 


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

  .display_box_first {

    width: 99%;

    margin: 15px 15px 0px 0px;

  }

  .display_box_secound {

    width: 99%;

    margin: 15px 0px 0px 0px;

  }

  .display_box_third {

    width: 99%;

    margin: 15px 15px 0px 0px;

  }


  .display_box_fourth {

    width: 99%;

    margin: 15px 0px 0px 0px;

  }


} /**** #################### END  Media ################### **/