* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    font-family: 'Lato', 'Bradley Hand', sans-serif;
}
h5 h2{
    text-align: right;
    padding-right: 10px;
    color: #c8a415;
    font-size: 1.2em;
}
a{
    text-decoration: none;
    color: white;
}
header {
    display: flex;
    min-height: 70px;
    background-color: #77BFA3;
    justify-content: space-between;
    align-items: center;
    padding: 10px;      
}
.logo {
    display:flex;
    align-items: center;
}
.logo img {
    height: 70px;
    margin-right: 10px;  
}
nav a{
    font-weight: 800;
    padding-right: 10px;
}
.position a:hover{    
    color: aquamarine;     
}
div .position a {
    text-align: center; 
}
.slideshow-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:  1fr;
}

#hero {
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows:  1fr 1fr  1fr;
    margin-top: -1px;    
}
#hero-box {
    grid-column: 1/4;
    grid-row: 1/4;
    z-index: -1;
}
#hero-msg {
    grid-column: 2/3;
    grid-row: 2/3; 
    z-index: 1;    
}
#hero-img{
    width: 100%;
    border-radius: 1em; 
}
#hero-msg a{
    color: white;
    font-size: 1em; /* changes */   
    position: relative;
    align-content: center;
    justify-content: center;
}

.home-title{
    font-size: 4em;
    color: #284b63;
    margin-top: 0px;
    grid-column: 2/4;
    grid-row: 1/2;
}
h1, h4 {
    text-align: center;
    color: #284b63;        
}
.book  {
    background-color: #BFD8BD;
    text-align: center;
    padding: 15px 30px;
    
}
div .button-box{
    text-align: center;
    margin-top: 50px; 
}
#middle {
    text-align: center;
    margin-top: 50px;
    display: flex;
    margin-top: -70px; 
    grid-gap: 20px;
    padding: 0 20px 10px 10px;
}
#card {
    text-align: center;
    margin-top: 50px;
    display: flex;
    margin-top: 0px; 
    grid-gap: 50px;
    padding: 0 20px 20px 20px;
}
#local1 {
    text-align: center;
    margin-top: 50px;
    display: flex;
    margin-top: -20px; 
    grid-gap: 20px;
    padding: 10px 10px 10px 10px;
}
.img{
    width: 300px;
    height: 200px;    
    border-radius: 0.5em;
}
.img1{
    border-radius: 0.5em;
}
.passport {
    margin: 100px 0;
    grid-column: 1/2;
    grid-row: 1/3;
}
.passport a {
    color: #98C9A3;
}
.tickets {
    margin: 100px 0;
    grid-column: 3/4;
    grid-row: 1/3;
}
.tickets a {
    color: #98C9A3;
}
.cusco {
    margin: 100px 0;
    grid-column: 5/6;
    grid-row: 1/3;
}
.cusco a {
    color: #98C9A3;
}
.kuelap {
    margin: 100px 0;
    grid-column: 7/8;
    grid-row: 1/3;
}
.kuelap a {
    color: #98C9A3;
}

.Internationals1 {
    margin: 100px 0;
    grid-column: 1/2;
    grid-row: 3/5;
    margin-top: -50px;
}
.Internationals1 a {
    color: #98C9A3;
}
.Internationals2 {
    margin: 100px 0;
    grid-column: 3/4;
    grid-row: 3/5;
    margin-top: -50px;
}
.Internationals2 a {
    color: #98C9A3;
}
.Internationals3 {
    margin: 100px 0;
    grid-column: 5/6;
    grid-row: 3/5;
    margin-top: -50px;
}
.Internationals3 a {
    color: #98C9A3;
}
.Internationals4 {
    margin: 100px 0;
    grid-column: 7/8;
    grid-row: 3/5;
    margin-top: -50px;
}
.Internationals4 a {
    color: #98C9A3;
}
.passport1 {
    margin: 100px 0;
    grid-column: 1/2;
    grid-row: 1/3;
    
}
.passport1 a {
    color: #98C9A3;
}
.tickets1 {
    margin: 100px 0;
    grid-column: 3/4;
    grid-row: 1/3;
}
.tickets1 a {
    color: #98C9A3;
}
.cusco1 {
    margin: 100px 0;
    grid-column: 5/6;
    grid-row: 1/3;
}
.cusco1 a {
    color: #98C9A3;
}

#local {
    margin: 100px 0;
    display: grid;
    margin: 100px 0;
    grid-column: 1/2;
    grid-row: 1/3;
    margin-top: -50px;
}
.text1 {
    margin: 100px 0;
    grid-column: 5/8;
    grid-row: 1/3;
    margin-top: 0px;
    padding: 50px;
}
.text1>h2{
    text-align: center;
}
p {
    text-align: justify;
}
.text {
    text-align: center;
    color: #0a0101;
    grid-column: 6/9;
    grid-row:  4/6; 
    justify-self: center;
    align-self: center;
    padding: 10px 20px 20px 20px;
    justify-content: stretch;
    margin-top: -50px;    
}
footer  {
    background-color: #98C9A3;
    color: white;
    padding: 25px 50px;
    margin-top: -60px; 
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.social>a{
    color: green;
}
.socia>a {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

@media(max-width:700px) {
    header {
        width: 100%;
        flex-direction: column;
    }
    nav{
        padding: 10px 0px;
    }
    nav, footer {
        flex-direction: column;
    }
    nav a {
        display: block;
        padding: 15px;
    }
    h5{
        padding: 10px 0px;
    }
    #hero {
        margin-top: 0;
    }
    #hero-msg {
        margin-top: 0;
    }
    #hero-msg h4 {
        display: none;
    }
    #middle{
        width: 100%;
        flex-direction: column;
        display: block;
    }
    #local1, #card, #local {
        width: 100%;
        flex-direction: column;
        display: block;
    }
    #article{
        width: 100%;
        flex-direction: column;
        
    }
    .passport, .tickets, .cusco, .kuelap, .Internationals1, .Internationals2, .Internationals3, .Internationals4 /*.local .img1*/ {
        margin: 50px auto;
        width: 60%;
        grid-template-columns: repeat(1, 1fr);
    }
    .transport, .news, .hotels, .service, .local  {
        margin: 50px auto;
        width: 60%;
        grid-template-columns: repeat(1, 1fr);
    }
    img{
        flex-direction: column;
    }
    .img1{
        flex-direction: column;
    }
    footer {
        margin-top: 25px;
        flex-direction: column;
    }
    .text1{
        flex-direction: column;
    }
}