/*styling.css*/
body{
    font: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}
*{
    box-sizing: border-box;
}
#container {
    width: 80%;
/*  border: 1px solid grey;*/
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    height: 10vh;
}
#headline{
    background: linear-gradient(#67bdec,#003b71);
    background: -webkit-linear-gradient(#67bdec,#003b71);
    background: -o-linear-gradient(#67bdec,#003b71);
    background: -moz-linear-gradient(#67bdec,#003b71);
    padding: 18px 0;
    display: flex;
    flex-wrap: wrap;
}
#header{
    position: relative;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
}
.header::before{
    content:"";
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url("../images/headbg1.gif");
    opacity: 0.1;    
}
#logo1{
    flex: 15%;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
}
#logo1 img{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#logo2{
    flex: 15%;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
}
#logo2 img{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#brand{
    flex: 70%;
    text-align: center;
}

h1 a{
    font-size: 70px; 
    font-weight: 100;
    color: #003e77;
    text-decoration: none;
    text-align: center;
}


.clear{
    clear: both;   
}

#menu{
    background: linear-gradient(#67bdec,#003b71);
    background: -webkit-linear-gradient(#67bdec,#003b71);
    background: -o-linear-gradient(#67bdec,#003b71);
    background: -moz-linear-gradient(#67bdec,#003b71);
    padding: 18px 0;
    display: flex;
    flex-wrap: wrap;
}

#menu a{
    flex: auto;
    padding: 0 30px;
    height: 30px;
    border-right: 3px solid white;
    text-align: center;
}
#menu a:last-child{
    border-right: none;
}

#menu a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
    color: whitesmoke;
    line-height: 30px;
    -webkit-transition: font-size 0.3s ease;
    -moz-transition: font-size 0.3s ease;
    -o-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.3s ease;
    transition: font-size 0.3s ease;
}

#menu a:hover, #menu a.active{
    font-size: 20px;
    font-weight: bold;
    color: navajowhite;
}


#introduction{
    #background: linear-gradient(#E5F2BB, #B7E952); 
    #background: -webkit-linear-gradient(#E5F2BB, #B7E952); 
    #background: -o-linear-gradient(#E5F2BB, #B7E952); 
    #background: -moz-linear-gradient(#E5F2BB, #B7E952); 
    padding: 0px;
    margin: 12px 0;
}

#mainContent{
    padding: 30px;
    margin: 16px 0;
}

#introduction h3{
    font-size: 45px;
    color: #316901;
    font-weight: normal;
}

#introduction p{
    font-size: 24px; 
    #color: #628F19;
    text-align: justify;
}

#introduction img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: auto;
}

#sidebars{
    display: flex;
    flex-wrap: wrap;
}
.Wrapper{
    flex: 20%;
    padding: 10px;
}
.Wrappercenter{
    flex: 60%;
    padding: 10px;
}
.sidebar{
    border: 1px solid #67bdec;
    border-radius: 20px;
    padding: 10px 30px;
    width: 100%;
    height: 100%;
}
.sidebar  h3 {
    color: #67bdec;
    font-size: 24px;
}
.sidebar h4{
    text-align: justify;
    padding-bottom: 0px;
}
.sidebar p{
    font-size: 20px; 
    text-align: justify;
}
.sidebar ul{
    padding-top: 0 px;  
    padding-left: 0px;
    list-style-type: none;
}

#leftsidebar ul li{
    padding: 0px 0 12px 10px;
    font-size: 20px;
}
#rightsidebar{
    padding: 0px 20px
}
#rightsidebar ul li{
    padding: 10px 10px 10px 20px;
    background: url(images/tick.png) no-repeat left center;
}
#rightsidebar p{
    font-size: 16px; 
    text-align: right;
}
#rightsidebar a{
    font-size: 16px; 
    text-align: right;
}
#rightsidebar img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sidebar ul li a{
    text-decoration: none;
    font-size: 14px;
    color: #003e77;
    -webkit-transition: font-size 0.3s ease;
    -moz-transition: font-size 0.3s ease;
    -o-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.3s ease;
    transition: font-size 0.3s ease;
}

 .sidebar ul li a:hover, .sidebar ul li a.active{
    text-decoration: none;
    color: #003e77;
    font-size: 14px;
    font-weight: bold;
}

@media screen and (max-width: 900px){
    #menu {
        flex-direction: column;
        align-content: center;
    }
    #menu a{
        border-right: none;
    }
}

@media screen and (max-width: 1000px){
    #rightsidebar {
        display: none;
    }
    #leftsidebar {
        display: none;
    }
    .Wrappercenter {
        flex: 100%;
    }
}

@media screen and (max-width: 1400px){
    #logo1 {
        display: none;
    }
    #logo2 {
        display: none;
    }
    #brand {
        flex: 100%;
    }
}
}
.footer{
    height: 60px;
    background: linear-gradient(#67bdec,#003e77);
    background: -webkit-linear-gradient(#67bdec,#003e77);
    background: -o-linear-gradient(#67bdec,#003e77);
    background: -moz-linear-gradient(#67bdec,#003e77);
    padding: 10px 30px;
    margin-top: auto;
    text-align: center;
}