/* N A V I G A T I O N */
body {
  margin: 0;
  font-family: Poppins, Arial;
  background-color: #161a2b;
  /*background-image: -webkit-linear-gradient(65deg, rgb(143, 5, 5); 50%, #161a2b 50%);*/
  color: #fff;
}

.nav-logo {
  height: 48px;
  width: 60px;
  margin:0;
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 4px 16px;
}

.topnav {
  overflow: hidden;
  background-color: rgb(143, 5, 5);;
}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ff7066;
  color: black;
}

.topnav img.nav-logo {
  color: white;
  margin:0;
}

#nav_logo{ 
  padding: 0;
  float: left;
}


/* H O M E P A G E*/

/* Header */

.quote {
  background-color: rgb(143, 5, 5);;
  margin-top: 0;
  text-align: center;
  font-size: larger;
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
}

#about {
  color: whitesmoke;
  width: 100%;
  margin: 0;
}

/* C A R D S */
.container{
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;

}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  
}


#card-pic {
  width: 100%;
  height: 150px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  padding: 0 10px;
  width: 300px;
}

.row {
  margin: 0 -5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    margin-right: 50px;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 10px;
  text-align: center;
  background-color: rgb(143, 5, 5);;
}
#Cards {
  display:block;
  height:500px;
};

/* P R O F I L E */

.profile-content {
  background-color:rgb(4 8 53 / 90%);
}

#profile-bio {
  display: inline-block;
  position: relative;
  left: 30px;
  margin-top: 3px;
  width: 250px;
}

#profile-content {
  float: center;
  position: relative;
  width: 60%;
  background: rgb(143, 5, 5);;
  border-radius: 10px;
  top: 50px;
  left: 300px;
  margin-bottom: 70px;
}

#profile-header {
  float: center;
  position: relative;
  width: 60%;
  background: rgb(143, 5, 5);;
  border-radius: 10px;
  top: 50px;
  left: 300px;
  margin-bottom: 20px;
}

.profile-image{
 width: 200px;
 height: 200px;
 margin-top: 10px;
 margin-left: 10px;
}

/* D I V I D E R */
#div_1{
  background-color: rgb(143, 5, 5);;
  /* width: 75%; */
  height: 400px;
  padding-left: 150px; 
}

#div1_pic{
  margin: 0;
  height: 400px;
}

#div_2{
  
  width: 100%;
  height: 500px; 
}

#div2_pic{
  margin: 0;
  height: 400px;
}


/* F O O T E R */
.footer-section {
  margin-top: 50px;
  padding-bottom: 20px;
  background-color: rgb(143, 5, 5);
}
.icon{
  width: 30px
}

.text-center {
  text-align: center !important;
}



/**********************
*  TO-DO APP [start]  *
**********************/


h1,
h2, h3 {
  color: #fff;
  padding: 10px;
  text-align: center;
}


input[type="text"]:focus {
  outline: none;
  box-shadow: inset 0 -3px 0 0 rgb(143, 5, 5);
}

li {
  list-style: none;
  border-bottom: 1px solid #f1f1f1
}

#heading {
  background-color: rgb(143, 5, 5);;
  text-align: center;
}

.box {
  max-width: 400px;
  margin: 50px auto;
  background: rgb(143, 5, 5);;
  border-radius: 5px;
  box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.item {
  min-height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}

.item:last-child {
  border-bottom: 0;
}

input:checked + p {
  text-decoration: line-through;
  text-decoration-color: rgb(143, 5, 5);;
}

input[type="checkbox"] {
  margin: 20px;
}

#inputText {
  margin: 5px;
  width: 40%;
}

#btn-del {
  border: none;
  margin-left: 10px;
  outline: 0;
  float: right;
  background-color: #f00;
  cursor: pointer;
  width: 40px;
  font-size: 15px;
  border-radius: 10px;
  color:#000;
}

#create{
	color:#fff;
  display:inline;
  border:none;
	padding:15px 20px;
	border-radius:25px;
	background: rgb(143, 5, 5);
}

.item-group{
  text-align: center;
}

/* TO-DO APP [end] */


/* LO G I N - R E G I S T E R */
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
  width:100%;
  margin:auto;
  margin-top: 50px;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}

.login-html{
	width:100%;
  height:100%;
	position:absolute;
	padding:20px 70px 50px 70px;
	background:rgb(4 8 53 / 90%);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm, 
.users-html .sign-in-htm,
.users-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check
.users-html .sign-in,
.users-html .sign-up{
	display:none;
}
.login-html .tab,
.users-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab,
.users-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab,
.users-html .sign-in:checked + .tab,
.users-html .sign-up:checked + .tab{
	color:#fff;
	border-color:rgb(143, 5, 5);
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:rgb(231, 216, 216);
	font-size:12px;
}
.login-form .group .button{
	background: rgb(143, 5, 5);
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background: rgb(143, 5, 5);
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
  }

  #role, .input{
    border:none;
    width:100%;
    padding:15px 20px;
    border-radius:25px;
    background:rgba(255,255,255,.1);
    color:#ffffff
  }

 .option{
    background-color:#061946;
  }
  .users-html{
  width:100%;
	padding:20px 70px 50px 70px;
	background:rgb(4 8 53 / 90%);
  }

  /*Participants*/
  .text-right{text-align:center!important}
.list-group{
  display:inline-block;
  flex: left;
  width: 15%;
  border-radius: 5px;

}

#participants{
  margin-bottom: 50px;
  
}

.users-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.users-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

/*P R O F I L E*/
.avatar-small {
width: 60px;

}

.tab{
  border: none;
}


/*---------------------
  About
-----------------------*/
.about {
	padding-bottom: 0px;
  }
  
  .about__pic__item {
	height: 235px;
	margin-right: -10px;
	margin-bottom: 20px;
  }
  .about__pic__item.about__pic__item--large {
	height: 490px;
  }
  
  .about__text {
	padding-left: 30px;
  }
  .about__text .services__item .services__item__icon:after {
	border-color: #281A3E;
  }
  
  .about__text__desc {
	margin-top: -10px;
  }

  .about-info{
	  color:white;
  }

  /*---------------------
    Team
  -----------------------*/
  .team {
    padding-bottom: 90px;
    }
    
    .section-title.team__title {
    margin-bottom: 90px;
    }
    
    .team__item {
    height: 300px;
    position: relative;
    overflow: hidden;
    border-radius:500%;
    }
    .team__item:hover .team__item__text {
    bottom: 0;
    }
    .team__item.team__item--second {
    margin-top: -60px;
    }
    .team__item.team__item--third {
    margin-top: -120px;
    }
    .team__item.team__item--four {
    margin-top: -180px;
    }
    
    .team__item__text {
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -500px;
    width: 100%;
    padding: 50px 0 30px;
    z-index: 1;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    }
    .team__item__text:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../img/team/team-hover.png);
    content: "";
    z-index: -1;
    }
    .team__item__text h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    }
    .team__item__text p {
    color: #ffffff;
    font-weight: 300px;
    margin-bottom: 12px;
    }
    .team__item__text .team__item__social a {
    color: #ffffff;
    display: inline-block;
    font-size: 15px;
    margin-right: 18px;
    }
    .team__item__text .team__item__social a:last-child {
    margin-right: 0;
    }
    
    .team__btn {
    position: absolute;
    right: 0;
    bottom: 0;
    }
    .pic{
      width: 130px;
    }
    h5{
      font-size: x-small;
    }
  
    .team__btn {
      position: relative;
      padding-top: 50px;
    }
  
    .about__pic {
      margin-bottom: 50px;
    }
  
    .about__text {
      padding-left: 0;
    }

    .profile-popup {
      display: none;
      position: fixed;
      bottom: 0;
      right: 15px;
      border: 3px solid #f1f1f1;
      z-index: 9;
    }

    .profile-container {
      max-width: 300px;
      padding: 10px;
      background-color: white;
    }