:root {
    --main-color: #0C3B67;
    --text-on-main: #B6C6D6;
    --content-bg: #F6F6F6;
    --link-hover: #9F3807;
    --menu-hover-bg: #042A4F;
    --menu-hover-text: #B6C6D6;
    /* --main-color: #256E5E; */
    /* --text-on-main: #B6C6D6; */
    /* --content-bg: #F6F6F6; */
    /* --link-hover: #9F3807; */
    /* --menu-hover-bg: #042A4F; */
    /* --menu-hover-text: #B6C6D6; */
}


body {
    padding-top: 1rem;
    background-image:url(../images/bg.png);
    background-repeat:repeat;
    font-family: "Montserrat";
    font-style: normal;
}

.logo{
    height:120px;
}

.logo-right{
    float:right;    
}

.logo-left{
    float:left;
}

.container-fluid {
    max-width: 1100px;
    padding:px 30px;
}

.row{
    margin: auto 0px;
}

/* .logo {     */
/*     #margin: 0 auto; */
/*     #height: 134px; */
/*     background: url(../images/header2.jpg) no-repeat left top; */
/*     /\* position: fixed; *\/ */
/* } */

.header {
    height:140px;
    background-color: var(--main-color, #0C3B67);
    border:2px;
    border-radius: 20px 20px 20px 0px;
    border-color:transparent;
    color: var(--text-on-main, #B6C6D6);
    /* padding-top: 10px; */
    /* position: fixed; */
}

.header>h2 {
    padding-top: 5rem;
    
}

.imglogo {    
    /* padding-top: 10px; */
}

.sideinfo{
    background-color: var(--main-color, #0C3B67);
    border: none;   
    margin-top: 0px;
}

.affix .sideinfo{
    display:none;
}

.navbar-collapse{
    background-color: var(--main-color, #0C3B67);
}
.collapse{
    background-color: var(--main-color, #0C3B67);
}
.sidebar-navbar-collapse{
    background-color: var(--main-color, #0C3B67);
}

.sidebar, navbar-toggle{
    padding: 0.5rem 1rem;
    /* background-color: #B6C6D6; */
    background-color: var(--main-color, #0C3B67);
    border:2px;
    border-radius: 0px 0px 20px 20px;
    border-color:transparent;
    /* color:#011A32; */
    color: var(--text-on-main, #B6C6D6);
    /* position: fixed; */
}

.sidehide {
    color: var(--main-color, #0C3B67);
}

.content{
    padding: 2rem 3rem;
    background-color: var(--content-bg, #F6F6F6);
    border:2px;
    border-radius: 20px;
    border-color:transparent;
}

.person{
    padding-top:20px;
    text-align:center;
    font-size: 115%;    
}

.person>a{
    color:var(--main-color, #0C3B67);
}

.person>a:hover{
    color:var(--link-hover, #9F3807);
    text-decoration: none;
}

.person>a>img,
.person>img {
    height:190px;
    width:167px;
    overflow: hidden;
    /* width:95%; */
    /* padding-bottom: 50%     */
    border: 2px solid #ddd;
    border-radius: 20px;
    padding: 5px;
}

.person>a>img:hover,
.person>img:hover{    
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.copyright{
    font-size:85%;
}

.affix {
      top: 100px;
}


.nav-tabs{
    border: none;
}

.nav-tabs>li>a {
    background-color: var(--main-color, #0C3B67);    
    color: var(--text-on-main, #B6C6D6);
    border: none;
    margin-right: 0px;
}

.nav-tabs>li>a:hover{    
    color: #0C3B67;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus{
    color: var(--menu-hover-text, #B6C6D6);
    background-color: var(--menu-hover-bg, #042A4F);
}

.nav-item{
    background-color: var(--main-color, #0C3B67);    
}


/* make sidebar nav vertical */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 990px){
    .sideinfo{
	display: none;
    }

    .header{
	border-radius: 20px 20px 0px 0px;
    }
    .logo{
	height: 90px;
    }

    .header {
	height: 105px;
    }
    
    .header>h2 {
	padding-top: 2rem;
	font-size: 200%;
    }

    .person>a>img,
    .person>img {
	width:40%;
	height:auto;    
    }

    .affix {
	float: right;
	width: 90%;
	top: 10px;
	/* left: 70%; */
	z-index: 1000;
    }
}

@media (max-width: 800px){    
    .logo{
	height: 75px;
    }

    .header {
	height: 85px;
    }
    .header>h2 {
	padding-top: 2rem;
	font-size: 140%;
    }
}

@media (max-width: 620px){    
    .logo{
	height: 60px;
    }
    .header>h2 {
	padding-top: 2rem;
	font-size: 120%;
    }
    .header>p {
	display: none;
    }
}


@media (max-width: 620px){    
    .person>a>img,
    .person>img {
	width:70%;
	height:auto;    
    }
}


.navbar {
    border: none;
}

.navbar-nav>li>a {
    background-color: var(--main-color, #0C3B67);    
    color: var(--text-on-main, #B6C6D6);
}

.navbar-nav>li>a:hover{    
    color: #0C3B67;
}

.navbar-nav>li.active>a,
.navbar-nav>li.active>a:hover,
.navbar-nav>li.active>a:focus{
    color: var(--menu-hover-text, #B6C6D6);
    background-color: var(--menu-hover-bg, #042A4F);
}