:root{
--top-color:#EAEAEA;
--blue-color:#00A0E3;
--darkblue-color:#274685;
--red-opacity:rgba(219,32,23,0.8);
--gray-color:#3C3C3C;
}
html{
   width:100%;
 
}
body{
    width:100%;
  
font-family: 'Ubuntu' ,"open sans serif","roboto",sans-serif;
   
    background-repeat:repeat-x;
    background-color:#ffffff;  
background-image: linear-gradient(to bottom, white, #dfdfdf);
    margin:0px;
    padding:0px;
  color: var(--gray-color);
text-align: justify;
}
.content{
  min-height:560px;
   width:100%;
   min-height:calc(100% - 100px);
   top:100px;
   position:relative; 
}
h1,.h1{color:var(--darkblue-color); font-weight:400;}
h2,.h2{color:var(--darkblue-color);}
.ml-10{
  margin-left:-10px;
}
.overflow-auto{
 overflow:auto;
}
.btn-red{
  background-color:var(--red-color);
  color:white;
}

.pointer{
 cursor:pointer;
}
.container {
   margin:auto;  
}
.opacity-3{
   background-color:rgba(255,255,255,0.3);
}
.opacity-5{
   background-color:rgba(255,255,255,0.6);
}

.opacity-7{
   background-color:rgba(255,255,255,0.8);
}
.opacity-9{
   background-color:rgba(255,255,255,0.9);
}
.h1{
 font-size:3rem;
}


.h100{
   height:100%!important;
}
.red{
color:var(--red-color);
}
.blue{
    color: var(--darkblue-color);
}
.white{
color:white;
}
a{
  color: var(--gray-color);;
  
}
a:hover{
  color:var(--red-color);
}
 ol.d {list-style-type:lower-alpha;}


@media (max-width: 575px){

.h1 {
    font-size: 2rem;
}
.index{
padding: 3rem!important;
}
}

#footer{
  text-align:center;
  
   width:100%;
  position:relative;
    color:white;
background-color:var(--darkblue-color);
   

}
a.fmenu{
 color:white!important;
}
a.fmenu:hover{
text-decoration:underline;
}


.navbar-light .navbar-toggler {
    background-color: rgba(255,255,255,.6);
    border-color: rgba(0,0,0,.1);
}
#logo{
 height:65px;
 margin-top:4px;
transition-duration:0.7s;
}
#top.fix {
height:70px;
transition-duration:0.7s;
}
#top.fix #logo{
height:40px;
 margin-top:4px;
transition-duration:0.7s;
}
#top{
 width:100%;
 padding-left:0px;
 padding-top:15px;
 background-color:var(--top-color);
  height:100px;
 position:fixed;
 box-shadow: 5px 0px 5px grey;
 z-index:100;
transition-duration:0.7s;
}

.nav-link {
    display: block;
    padding: 0.2rem 0.7rem;
}
.nav-link:hover {
  color:var(--darkblue-color);
}
.dropdown-menu{
  min-width:300px;
  top:60px;
  background-color:var(--top-color);
  border:0px;
  border-radius:0px;
  opacity:0.9;
 z-index:90;
}
.nav-item span:hover{
cursor:pointer;
 color:var(--blue-color);
}
#menu{
 background-color: var(--top-color);
  width:100%;
}
@media (max-width: 1200px){
#logo.fix{
 height:50px;
}
}
@media (max-width: 991px){

#top{

 padding-top:20px;
}
.menu{
    padding: 0.2rem 0.5rem!important;
}
.nav-item{
 width:100%;
padding-top: 10px;
        padding-bottom: 10px;
        font-size: x-large;
}
#menu{
 background-color: var(--top-color);
  width:100%;
 position:fixed;
top:100px;
left:0px;
 width: 100vw; /* viewport width */
 height: auto;
 overflow-y: scroll;
    overflow-x: hidden;
  border-top:3px solid var(--blue-color);
  border-bottom:3px solid var(--blue-color);
}
}

@media (max-width: 767px){
#menu{
top:70px;
}
#logo.fix{
  height:35px;

}

.dropdown-toggle::after{
display:none;
}
 #top{
    height:70px;
 padding-left: 15px;
    padding-top: 15px;


}
#logo{
display:nonex;
}

.dropdown-menu{
 display:block;
position:static;
float:none;
}
#banner {
    top:50px;
}

}

.box{
  
   border:1px solid var(--darkblue-color);
   color:var(--top-color);
  background:var(--darkblue-color);
box-shadow: 3px 5px 6px 2px grey;
   margin-bottom:1rem;
 transition-duration: 0.5s;
}
.right .box{
height:180px;
width:154px;
  margin-left:0px!important;
  margin-right:0px!important;

}
.box h3{
 font-size:17px;
text-align:center;
 transition-duration: 0.5s;
margin-bottom: 15px;
    margin-top: 15px;
height:25px;
}
.box.hover{
box-shadow: 1px 1px 8px 3px grey;
  transition-duration: 0.5s;
}
.box.hover h3{
 font-size:20px;
text-align:center;

 transition-duration: 0.5s;
}
.right .box.hover h3{
 font-size:17px;
}
.hide_c{
display:none;
}