@charset "ISO-8859-1";

.control-label{
	color: #474747;
	letter-spacing: 1px;
}

td.details-control {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('../images/details_close.png') no-repeat center center;
}

/* Top menu */
.pill-nav{
  position: fixed;
  overflow: hidden;
  width: 100%;
  z-index: 1000;
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.pill-nav a{
  display: inline-block;
  color:#164f74;
 /*    color:#b3daf7; */
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 15px;
  border-radius: 5px;
}

.pillnav-item{
	float: right;
	margin-right: 50px;
}

.pill-nav a:hover {
  /* background-color: #164f74; */
  color: #3496d8;
}

.pill-nav a.active {
  /* background-color: #164f74; */
  color: #3496d8;
}
.pillnav-brand {
  float: left;
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
  font-family:sans-serif;
}

.pill-nav a.active {
  /* background-color: #164f74; */
  color: #7ebde7;
}
.pill-nav .icon{
	display:none;
}
.logo-top{
	width: 110px;
	margin:10px;
	margin-left:4%;
}
/* Side Nav */
.side-nav ul{
  list-style-type: none;
  margin-top: 40px;
  padding: 40px 10px;
  width: 20%;
  background-color: #f5f5f5;
  position: fixed;
  height: 100%;
  overflow: auto;
}
.side-nav li a{
  display: block;
  color: #222;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 12px;
}
.side-nav li a.active{
  background-color: #164f74;
  color: white;
  border-radius: 10px;
}
.side-nav li a:hover:not(.active){
  /* background-color: #164f74; */
  color: #3496d8;
  
}
.side-nav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.side-nav .sidenav-res{
	display:none;
}
.side-nav .sidenav-res-active{
	display:none;
	background-color: #164f74;
    color: white;
}
.tm-navbar {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.tm-navbar.scroll {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}
.navbar-brand {
  color: #164f74;
  font-size: 20px;
  font-weight: bold;
  font-family:sans-serif;
}

.navbar-brand:hover,
.tm-navbar.scroll .navbar-brand:hover {
  color: #3496d8;
}

.navbar-item {
  float: right;
  padding: 10px;
  color: #8f8f8f;
  font-size: 25px;
  font-family:sans-serif;
}

.navbar-item:hover{
	color: #3496d8;
}

/* Button style*/
.btn-signup {
    margin: 50px auto;
    display: block;
    width: 100px;
    height: 50px;
    border: 3px solid #164f74 ;
    background-color:#164f74 ;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 13px;
    
    /* transition: background-color 1000ms, color 1000ms; */
}
.btn-signup:hover{
    background-color:#b6daf1;
    color:#222;
    cursor:pointer;
    
    /* transition: background-color 1000ms, color 1000ms; */
}
a.btn-new{
	float: right;
	display: inline-block;
	text-align:center;
	padding-top: 8px;
    width: 130px;
    height: 35px;
    background-color:#164f74 ;
    color: white;
    font-family: sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration:none;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}
a.btn-new:hover{
	background-color: #1f6ca0;
	text-decoration:none;
}
a.btn-new:visited{
	color: white;
}

.btn-join {

  transform: translate(75%, 0%);
    display: block;
    width : 20vw;
    height: 3vw;
    border: 3px solid #164f74 ;
    background-color:#164f74 ;
    color: white;
    font-size : 25px;
    font-family: sans-serif;
    font-weight: bold;
    border-radius: 20px;
    
    transition: background-color 1000ms, color 1000ms;
}
.btn-join:hover{
    background-color:#b6daf1;
    color:#222;
    cursor:pointer;
    transition: background-color 1000ms, color 1000ms;
}
/* Content */
.content{
	margin-left:25%;
	padding:80px 50px;
	
	animation: transitionIn 0.75s;
}
.content-join{
	margin-left:25%;;
	animation: transitionIn 0.75s;
}
.error-input{
	color: #ec0000;
}
.control-label-join{
	font-size: 2vw;
}
p.control-label-join{
	margin-left: -29vw;
	font-size: 1.5vw;
  text-align: center;
}
.avatar{
	margin: 10px;
	vertical-align:middle;
	width: 180x;
	height: 200px;
	/* border-radius: 50%; */
}

.container-avatar{
	margin-left: 30%;
	height: 350px;
	width: 300px;
	/* background-color: #DDD; */
}
.a-avatar{
	margin:90px;
	font-size: 15px;
}

/*profile card*/
.profile-card {
  position: relative;
  margin: 5% auto;
  width: 600px;
  height: 300px;
  background: #FFF;
  border: 0.2px solid grey;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  font-family: 'Alef';
  
  animation: transitionIn 0.75s;
}
.left-card {
  position: absolute;
  box-sizing: border-box;
  width: 250px;
  height: 300px;
/*   background-color: grey; */
  padding: 50px 75px;
}
.left-card h3{
	text-align:center;
}
.right-card {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 350px;
  height: 300px;
  padding: 50px;
/*   background-color: skyblue; */
}

.right-card hr{
  display: block;
  padding-left: 0%;
  width: 100%;
  border: 1.5px solid #164f74;
}
.text-profile{
    padding-left: 5%;
    font-family: 'Roboto', sans-serif;
}
.img-profile{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.small-profile{
    border-radius: 50%;
}

@keyframes transitionIn{
	
	from{
		opacity: 0;
		transform: rotateX(-10deg);
	}
	
	to{
		opacity: 1;
		transform:rotateX(0);
	}
}
.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  /*! height: 30vw; */
  margin-top:-1.5vw;
  color: #707070;
  text-align: center;
}
.footer p{
   margin-top:-1vw;
}

/* Contact */

#contact {
  color: white;
  background-image: url("../images/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  position: relative;
  padding-bottom: 0px;
  padding-top: 0px;
  font-family: 'Roboto', sans-serif;
}

.tm-underline {
  border-top: 2px solid white;
  height: 8px;
  width: 100%;
}

.tm-underline-inner {
  width: 25%;
  height: 8px;
  background: white;
}

.tm-contact-item {
  margin-bottom: 75px;
}

.tm-contact-item-link {
  display: flex;
  align-items: center;
}

.tm-contact-item-link i,
.tm-contact-item-link span {
  color: white;
  transition: all 0.3s ease;
}

.tm-contact-item-link:hover i,
.tm-contact-item-link:hover span {
  color: #3496d8;
}

.tm-input {
  padding: 8px 25px;
  border-radius: 3px;
  border: 1px solid white;
  background: transparent;
  color: white;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.tm-btn-submit {
  margin-left: 20px;
}

.tm-footer {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  padding: 0 15px;
}

.tm-footer-link {
  color: white;
}

.tm-footer-link:hover,
.tm-footer-link:focus {
  color: #3496d8;
  text-decoration: none;
}

@media (max-width:1024px){
    p.control-label-join{
	margin-left: -30vw;
	font-size: 2vw;
  text-align: center;
}
  .btn-join {
  margin-left: 5vw;
    display: block;
    width: 30vw;
    height: 50px;
    border: 3px solid #164f74 ;
    background-color:#164f74 ;
    color: white;
    font-size : 3vw;
    font-family: sans-serif;
    font-weight: bold;
     transform: translate(21%, 0%);
    border-radius: 20px;
    transition: background-color 1000ms, color 1000ms;
}
}
@media (max-width:600px){
  .error-input{
	color: #ec0000;
}
  
.control-label-join{
	font-size: 4.5vw;
  margin-left: -20vw;
}
  .btn-join {
	margin-left: -1%;
    display: block;
    width : 50vw;
    height: 50px;
    border: 3px solid #164f74 ;
    background-color:#164f74 ;
    color: white;
    font-size : 5vw;
    font-family: sans-serif;
    font-weight: bold;
    border-radius: 20px;
     transform: translate(5%, 0%);
    transition: background-color 1000ms, color 1000ms;
}
p.control-label-join{
	margin-left: -28vw;
	font-size: 3.8vw;
	text-align: center;
}
.avatar{
	margin: 10px;
	vertical-align:middle;
	width: 180x;
	height: 200px;
	/* border-radius: 50%; */
}

.container-avatar{
	margin-left: 30%;
	height: 350px;
	width: 300px;
	/* background-color: #DDD; */
}
.a-avatar{
	margin:90px;
	font-size: 15px;
}
	.side-nav ul{
		width: 100%;
		height: auto;
		position:relative;
		margin-top: 0px;
		padding-top:80px;
	}
	
	.side-nav li a{
		text-align: center;
        float: none;
	}
	
	.side-nav .sidenav-res{
		display:block;
	}
	.side-nav .sidenav-res-active{
		display:block;
	}
	.content{
		margin-left:0%;
	}
	
	.pillnav-item{
		display:none;
	}
}

/* @media (max-width: 900px){
	.profile-card {
	  width: 300px;
	  height: 600px;
	}
	
	.left-card {
	  background-color: grey;
	  width: 300px;
	  height: 300px;
	  padding: 50px 100px;
	  z-index: 1;
	}
	
	.right-card {
	  background-color: blue;
	  width: 300px;
	  height: 400px;
	  padding-top: 330px;
	}
} */

.request-badge{
  padding: 3px 15px;
  border-radius: 10px;
  background: #3496D8;
  color: white;
  font-size:17px;  
}