/*
* Background Images - Practice
* CSS Styles
*
*/


/* General */
body{
    font-family: 'Open Sans';
    background: url(../img/bg.png);
    background-color: rgb(56, 56, 56);
    text-transform: uppercase;
}
body,a{
    color: white;
}
a{
    text-decoration: none;
}
.button, button{
    padding: 10px;
    background: rgb(226,7,16);
    background: linear-gradient(90deg, rgba(226,7,16,1) 0%, rgba(240,31,65,1) 50%, rgba(247,42,87,1) 100%); 

}
.menu, .tour-card .button{
    position: relative;
}

/* Header */
header{
    background: url(../img/bg-01.jpg) no-repeat;
}
nav{
    background-color: rgba(0, 0, 0, 0.25);
}
.menu{
    width: 84%;
    left: 16%;
    display: flex;
}
.menu li{
    min-width: 50px;
    padding: 25px;   
    text-align: center;

}
.menu li:first-child{
    background: rgb(192,28,52);
}
h1{
    font-size: 100px;
    top: 160px;
    width: 100%;
    font-family: 'Metal Mania';
    margin: auto;
    padding: 100px 0;
}
header .button{
    padding: 20px 60px;  
}
header .container:nth-child(2){
    text-align: center;
    padding-bottom: 150px;
}


/* Tour */
h2{
    text-align: center;
    font-size: 2em;
    padding: 50px 0 40px 0;
    width: 100%;
}
#tour .container, #gallery .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
} 
.tour-card .button{
    display: inline-block;
    /* position: relative; */
    left: 50%; 
    transform: translateX(-50%);
    padding: 10px 30px;
    margin-top: 10px;
}

.tour-town, .tour-place, .tour-date{
    margin: 10px 10px;
}
.tour-place, .tour-date{
    text-transform: capitalize;
    font-size: 0.9em;
}
.tour-date{
    font-size: 0.8em;
    font-style: italic;
}

.madrid{
    background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),url("../img/tour/madrid.jpg");
}
.turin{
    background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),url("../img/tour/turin.jpg");
}
.hamburg{
    background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url("../img/tour/hamburg.jpg");
}
.krakow{
    background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),url("../img/tour/krakow.jpg");
}
.tour-card{
    width: 220px;
    margin: 10px;
    padding-top: 20px;
    padding-bottom: 90px;
    box-shadow:  3px 3px 8px 0px rgb(0, 0, 0, 0.5);
}
/* Gallery */
.photo{
    margin: 10px;
}
.photo a img{
    box-shadow:  3px 3px 8px 0px rgb(0, 0, 0, 0.5);
}
#gallery .container{
    padding: 0 10%;
}
#gallery{
    margin-bottom: 40px;
}

/* Subscribe */
#subscribe{
    background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),url(../img/bg-02.jpg);
    padding-bottom: 50px;
    padding-top: 25px;
}
#subscribe p{
    text-transform: none;
    text-align: center;
}
.subscribe-form{
    margin: 30px 0;
    display: flex;
    justify-content: center;
}
.subscribe-form input{
    padding-left: 10px;
    width: 200px;
}

.subscribe-form input, .subscribe-form button{
    border: none;
    margin: 2px;
}
.subscribe-form button{
    padding: 12px 30px;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    font-family: 'Open Sans';
}

/* Footer */
footer{
    padding: 30px 0;
    background-color: rgba(0, 0, 0, 0.4);
}
footer .fa{
    margin: 5px 5px 20px 5px;
}

.social{
    text-align: center;
}

.copyright{
    text-transform: capitalize;
    text-align: center;
    font-size: 0.8em;
}



#subscribe, .tour-card, header{
    background-size: cover;
    background-position: center;
}