* {
    margin: 0px;
    padding: 0px;
}

/*de esta forma todo lo que esta dentro del body
heredara los estilos*/
body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(246, 246, 246);
} 

/*  Fonts  */

p{
    font-size: 14px;
    font-weight: normal;
    color: #273b47;
}

.p2{
    font-size: 16px;
    font-weight: normal;
    color: #273b47;
}

H1{
    font-size: 30px;
}

H2{
    font-size: 32px;
    font-weight: normal;
}

H3,
.h3{
    font-size: 24px;
    font-weight: normal;
}

H4,
.h4{
    font-size: 20px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.card{
    border: none;
}

/*Ordenado por Estructura*/
/* Header */

#header a{
    color:white;
    text-decoration: none;
}

#header a:hover{
    color: rgb(152, 202, 63);
}

/*  HERO  */

#hero p{
    color: white;
}

#hero .overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	z-index: 1;
}

#hero .overlay .container,
#hero .overlay .row {
	height: 100%;
}

#hero img{
    height: 43vh;
    object-fit: cover;
}


/*  Viatges Recomanats  */

#viatges_recomanats img:hover{
    opacity: 0.5;
}


#viatges_recomanats img {
	height: 45vh;
	object-fit: cover;
}


/*  Banner Separador  */

#people_banner img{
    object-fit: cover;
}


/*  Altres Destins  */

#altres_destins img{
    object-fit: cover;
    height: 170px;
    min-width: 100%;
    vertical-align: middle;
}

#altres_destins .card-body{
    display: inline-block;
}

#altres_destins button{
    color: rgb(152, 202, 63);
    border: 1px solid rgb(152, 202, 63);
    padding: 5px 20px 5px 20px;
    border-radius: 4px;
}

#altres_destins button:hover{
    background-color: rgb(152, 202, 63);
    color: white;
}



/*Footer*/

footer{
    background-color: #1c3643;
    color: white;
}

footer ul{
    list-style: none;
}

footer h3{
    color: rgb(152, 202, 63);
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: hsl(199, 100%, 50%);
    text-decoration: none;
}


#footer_social{
    display: flex;
    justify-content: space-around;
    padding: 0px 200px 50px 200px;
}

/*Icons*/

#footer p{
    color: white;
    font-size: 16px;
}

/*Icons size*/
.fab{
    font-size: 50px;
}

/*Icons Player*/
#player_icons p{
    display: inline-block;
    padding: 5px;
    font-size: 20px;
}


/*  >>>>>>>>>>>>>   Identificacio    <<<<<<<<<<<<<<<<   */

/* Wrapper */

.wrapper {
    width: 1000px;
    margin: 0 auto;
    display: inherit;
    justify-content: inherit;
    /*align-items: inherit;*/
    height: inherit;
    /*flex-wrap: inherit;*/
} 

.formulari{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#formulari h2{
    color: rgb(152, 202, 63);
    padding: 10px;
    margin: 40px 0 50px 0;
    font-weight: bold;
}

#dades_acces > form > h4{
    color: #4d4d4d;
    font-size: 30px;
    font-weight: lighter;
    padding: 10px;
}

#dades_acces{
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    width: 500px;
    display: block;
}

#dades_acces input{
    margin: 3px;
}

.dades_form{
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    width: 500px;
    display: block;
}

p #privacitat{
    width: 100;
    float: right;
}

#checkbox{
    display: flex;
    justify-content: center;
}

.dades_form input,
.dades_form select {
    width: 75%;
    height: 30px;
}

.form-row button{
    background-color:  #82ad36;
    color: white;
}

.form-row button:hover{
    background-color:#6f942c;
    color: white;
}


/*                   BOOTSTRAP                 */

.text-green{
	color: #97c93e;
}

/* boton verde */
.btn-ioc{
	background-color: #97c93e;
	color: white;
}

.btn-ioc:hover {
	background-color: #82ad36;
}

/*la imagen del logo*/
#header img{
	width: 50px;
}

.bg-dark{
    background: linear-gradient(90deg, #1c3643 0, #273b47 25%, #1e5372);
}

/*---------------------- quadres animacio--------------------- */

/*estil incial dels quadrats*/
.quadrats{
    background-color: lightgray;
    width: 100px;
    height: 100px;
    /*float: left;*/
    margin: 10px;
    opacity: 0.5;
    transition: 0.5s ease-out;
}

.quadrats p{
    color: black;
}

.quadrats_transparent p{
    display: none;
}

/*animacio dels quadrats*/
.pols {
background-color: blue;
animation-name: pols;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes pols {
    from {
        transform: scale(1.0);
        opacity: 0.5;
    }
    to {
        transform: scale(1.2);
        opacity: 1;
    }
}

/*estil si fas click*/
.round_corner{
    border-radius: 15px;
}

.out{
    background-color: red;

}

#quadres_mig{
    display: flex;
    justify-content: center;
}