/*............GENERAL STYLES...........*/
*{
	margin: 0;
	padding: 0;
}
html, body{
	 background: linear-gradient(to top right, #CBCBCB, #fff);
     font-family: 'Gilroy-Regular';
	 height: 100vh;
}

.login-body{
	height: 100vh;
}

.index-body{
	height: 100vh;
}



nav{
	background-color: transparent;
}

h1{
	font-weight: bold;
	font-size: 6vh;
}

p{
	font-size: 1.1rem;
}


.text-center{
	text-align: center;
}
/*......................font.........................*/
@font-face {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Gilroy-Regular.ttf') format('truetype');
}

/*...............dropdown menu...........*/
.navbar-custom-menu{
	width: 22%;
}

.dropdown a{
	color: #333;
}

.dropdown-menu{
	position: absolute !important;
	z-index: 1;
	left: -12rem;
    width: 17rem;
    border-radius: 0px 0px 20px 20px; 
    background-color: #CBCBCB;
}

.dropdown-menu p{
	text-align: center;
}

.user-footer{
	display: flex;
	justify-content: center;
	align-items: center;
}

/*......................footer........................*/
.footer1{
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}
/*..................btn..................*/
.btn1{
	text-decoration: none;
	border: 2px solid #D3145A;
	border-radius: 0px 0px 20px 20px;
	color: #D3145A;
	width: 11rem;
	background: transparent;
	transition: 0.5s;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 1px;
}

.btn1:hover{
	background: linear-gradient(to right, #F05A24, #C0272D, #D3145A); 
    color: #fff;
    border-image: linear-gradient(to right, transparent, transparent, transparent);
}


.btn2{
	text-decoration: none;
	border: 2px solid #D3145A;
	border-radius: 0px 0px 20px 20px;
	color: #C0272D;
	width: 11rem;
	background: transparent;
	transition: 0.5s;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 1px;
}

.btn2:hover{
	background: #C0272D;
    border-image: #C0272D;
    color: #fff;
}

.btn3{
	text-decoration: none;
	border: 2px solid #D3145A;
	border-radius: 0px 0px 20px 20px;
	color: #D3145A;
	width: 19rem;
	background: transparent;
	transition: 0.5s;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 1px;
}

.btn3:hover{
	background: linear-gradient(to right, #F05A24, #C0272D, #D3145A); 
    color: #fff;
    border-image: linear-gradient(to right, transparent, transparent, transparent);
}

.table th{
	border-bottom: 2px solid #333;
}

.table td{
	border-bottom: 1px solid #333;
}

/*....................HEADRE INTRO.......................*/
.header-intro{
	margin-top: 3vh;
	margin-bottom: 15vh;
}

.header-intro h2{
	display: flex;
	justify-content: center;
	align-items: center;
    font-size: 2vh;
    text-align: center;
    letter-spacing: 5px;
}

/*.................WELCOME PAGE....................*/

.welcome-section{
	text-align: center;
}

.welcome-section h1{
	font-size: 7vh;
}

.welcome-section p{
    margin-bottom: 8vh;
    font-size: 3vh;
}

/*...................LOGIN PAGE.........................*/
.log-form{
	background-color: transparent;
	border: 2px solid #000;
	border-radius: 0px;
	background-color: transparent;
	width: 100%;
	padding: 5px;
}

.log-form:focus{
	border-image: linear-gradient(to top right, #F05A24, #C0272D, #D3145A);
	border-image-slice: 1;
    border-width: 2px;
    border-color: transparent;
}

/*..................INICIO PAGE..........................*/
.welcome-text{
	text-align: center;
}

.card-box{
	border-radius: 30px;
	background: linear-gradient(to bottom, #fff, #CCCCCC);
	box-shadow: 0px 0px 50px #CBCBCB; 
	display: flex;
	justify-content: center; 
}

.card-icon1, .card-icon2, .card-icon3{
	padding-top: 30px;
	padding-bottom: 30px;
}

.card-box-container{
	display: flex;
	justify-content: center;
}

/*...........CREDIX PRESENTATION 3:4.......*/
.form2{
	background-color: transparent;
	border-radius: none;
	border: 1px solid #333;
	width: 100%;
}

.download-btn{
	margin-bottom: 5vh;
}

.delite-btn, .edit-btn{
	background-color: transparent;
	border: none;
	width: 6vw;
	font-weight: bold;
}

.delite-btn:hover, .edit-btn:hover{
	color: #333;
} 

.delite-btn{
	color: #C0272D;
}

.edit-btn{
	color: #F05A24;
}

#Img, #Img2, #Img3, #Img4{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
	color: darkblue;
}

#Img + label, #Img2 + label, #Img3 + label, #Img4 + label{
	background-color: #C0272D;
	border-radius: 20px;
	width: 15vw;
	color: #fff;
	transition: 0.3s;
}

#Img:focus + label,
#Img + label:hover {
    background-color: #f05a24;
	cursor: pointer;
}

#Img2:focus + label,
#Img2 + label:hover {
    background-color: #f05a24;
	cursor: pointer;
}

#Img3:focus + label,
#Img3 + label:hover {
    background-color: #f05a24;
	cursor: pointer;
}

#Img4:focus + label,
#Img4 + label:hover {
    background-color: #f05a24;
	cursor: pointer;
}

.logo_iniciolo{
	display:flex;
	margin: auto;
	text-align: center;
	width: 30%;
	height: 30%;
}

@media screen and (max-width: 600px) {
	.logo_iniciolo{
		width: 100%;
	}
}