/****************************************************************/
/*Universal styles                                              */
/****************************************************************/


body
{
    margin: 0;
    width:100%;
    padding: 0;
    background-color: #ffffff;
    font-family: "Raleway",sans-serif;
    font-size: 16px;
    font-weight: 400;
    color:#363636;
    
}

p
{
    line-height: 190%;
    
}
a
{
    text-decoration: none;
    color: teal;
}
/****************************************************************/
/*Menu                                                          */
/****************************************************************/


 #logo
{
    clear: both;
    
}
#logo img
{
    float: left;
    width: 10%;
    padding-right: 30px;
    height: 100px;
    line-height: 100px;
}
#logo ul
{
    list-style: none;
    float: right;
    width: 10%;
    position: sticky;
    top: 0;
    z-index: 100;
 
}

#logo a:hover
{
    color: red;
}

#nav
{
    list-style:none inside;
    text-align:center;
    background: #123C58; 
    height: 100px;
    clear: both;
}
#nav li
{
    display:block;
    position:relative;
    float:left;
    padding-right: 35px;
    background: #123C58; 
}
#nav li a 
{
    display:block;
    text-decoration:none;
    width:150px; 
    line-height:100px;
    color:#ffffff; 
}
#nav li li a 
{
    font-size:80%;
    line-height:35px;
} 
#nav li:hover 
{
    background:#808000;
    color: black;
}
#nav ul 
{
    position:absolute;
    padding:0;
    left:0;
    display:none; 
}
#nav li:hover ul ul 
{
    display:contents;
    
}
#nav li:hover ul 
{
    display:block;
} 
#nav li li:hover ul
{
    display:block;
    margin-left:200px;
    margin-top:-35px; 
}


/****************************************************************/
/*Banner                                                        */
/****************************************************************/

#Banner img
{
    width: 100px;
    position :relative;
    height: 400px;
}
*
{
    box-sizing: border-box;
}
}

/* Slideshow container */
.slideshow-container
{
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* The dots/bullets/indicators */
.dot
{
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active 
{
  background-color: #123C58;
}

/* Fading animation */
.fade
{
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}



/****************************************************************/
/*Page                                                        */
/****************************************************************/

#Page
{
    min-height: 400px;
    padding: 20px;
    
    
}
#Page h2
{
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
    color: #123C58;
}
/*Content*/
#Content
{
    float: left;
    width: 70%;
    
}

/*Sidebar*/
#Sidebar
{
    float: right;
    width: 25%;
}
/*Lists*/
ul.styled
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.styled li
{
    border-top: solid 1px #e5e5e5;
    padding: 14px 0px;
}
/* Three columns side by side */
.column_ICT {
  float:inherit;
  width: 80%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column_ICT {
    width: 50%;
    display: block;
  }
}
.column_Courses {
  float:left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column_Courses {
    width: 100%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #123C58;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
th
{
    padding-right: 120px;
}

#acre table
{
    border-spacing: 0px;
    table-layout: inherit;
    
    
}
#acre th, td
{
    padding: 5px 30px 5px 10px;
    border-spacing: 0px;
    font-size: 90%;
    margin: 0px;
}
#acre th, td
{

    text-align: center;
    border-top: 1px solid #f1f8fe;
    border-bottom: 1px solid #cbd2d8;
    border-right: 1px solid #cbd2d8;
}
#acre th
{
    color: #123C58;
    text-align: center;
    font-size: 16px;
    font-variant: small-caps;
}
#acre tr.head th
{
    color: #fff;

    border-bottom: 2px solid #547ca0;
    border-right: 1px solid #749abe;
    border-top: 1px solid #90b4d6;
    text-align: center;
    
}
/****************************************************************/
/*Contact us                                                    */
/****************************************************************/
.Form
{
    float:inherit;
    width: 60%;
    padding-left:30px;   
}


input[type=text], select
{
  width: 91%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
textarea
{
 
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit]
{
  width: 91%;    
  background-color: #123C58;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover
{
  background-color: #45a049;
}


/* Three columns side by side */
.column {
  float: left;
  width: 25%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #123C58;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #45a049;
}


/****************************************************************/
/*footer                                                        */
/****************************************************************/
#Footer
{
    width: 100%;
    height: 258px;
    background-color: #123C58;
    clear: both;
    
}

#Footer p
{
    color: #adadad;
}
#Footer a
{
    color: #adadad;
}
#Footer h2
{
    color: #adadad;
}

#Footer h3
{
    color: #adadad;
}
#box1
{
    float: left;
    width: 25%;
    padding-right:30px;
    padding-left: 10px;
}
#box2
{
    float: right;
    width: 25%;
    padding-left:30px;
    padding-right: 10px;
}


/****************************************************************/
/*Copyright                                                     */
/****************************************************************/
#copyright
{
    width:100%;
    height:20px;
    text-align: center;
    background-color: black;
    clear:both;
}

#copyright p
{
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
}