body {
    /* background-color: #baebd8;  */
    background-image:url(/img/fondo.png);
    /*background-size:cover;*/
    background-repeat:repeat;
    height:100vh;width:100vw;  
    align-items:"middle";
    
}
#head{text-align:center}
 form{/*max-width:300px;
    width:90%;position:relative;
    left:50%;
    top:10%;padding:40px;
    border-radius:4px;
    transform:translate(-50%,10%);*/
   
    } 
.card {
    border: none
}
li {
    padding: 0;
    display: inline-block; 
    width: 80px; 
    text-align: center; 
    letter-spacing:normal; 
    vertical-align: middle;
    line-height: 1.1;
}
button {
 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.image {
    position: relative
}

.image span {
    background-color: #506BEE;
    color: #fff;
    padding: 6px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    font-size: 13px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -0px;
    right: 0px
}

.user-details h4 {
    color: #506BEE
}

.ratings {
    font-size: 30px;
    font-weight: 600;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #f9b43a
}

.user-details span {
    text-align: left
}

.inputs label {
    display: flex;
    margin-left: 3px;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px
}

.inputs input {
    font-size: 14px;
    height: 40px;
    border: 2px solid #ced4da
}

.inputs input:focus {
    box-shadow: none;
    border: 2px solid #506BEE
}

.about-inputs label {
    display: flex;
    margin-left: 3px;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px
}

.about-inputs textarea {
    font-size: 14px;
    height: 100px;
    border: 2px solid #ced4da;
    resize: none
}

.about-inputs textarea:focus {
    box-shadow: none
}

.btn {
    font-weight: 600
}

.btn:focus {
    box-shadow: none
}

select {
    display: block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 20px;
    height: 40px;
    padding: 5px 10px
}

select:focus {
    outline: none
}

.add-experience:hover {
    background: #506BEE;
    color: #fff;
    cursor: pointer;
    border: solid 1px #506BEE
}

.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.content-select{
	max-width: 250px;
	position: relative;
}
 
.content-select select{
	display: inline-block;
	width: 100%;
	cursor: pointer;
  	padding: 7px 10px;
  	height: 42px;
  	outline: 0; 
  	border: 0;
	border-radius: 0;
	background: #f0f0f0;
	color: #7b7b7b;
	font-size: 1em;
	color: #999;
	font-family: 
	'Quicksand', sans-serif;
	border:2px solid rgba(0,0,0,0.2);
    border-radius: 12px;
    position: relative;
    transition: all 0.25s ease;
}
 
.content-select select:hover{
	background: #B1E8CD;
}
 
/* 
Creamos la fecha que aparece a la izquierda del select.
Realmente este elemento es un cuadrado que sólo tienen
dos bordes con color y que giramos con transform: rotate(-45deg);
*/
.content-select i{
	position: absolute;
	right: 20px;
	top: calc(50% - 13px);
	width: 16px;
	height: 16px;
	display: block;
	border-left:4px solid #2AC176;
	border-bottom:4px solid #2AC176;
	transform: rotate(-45deg); /* Giramos el cuadrado */
	transition: all 0.25s ease;
}
 
.content-select:hover i{
	margin-top: 3px;
}