@import 'https://fonts.googleapis.com/css?family=Waterfall|Open+Sans';
@import 'menu.css';



body{
    margin: 0;
    background-color: #fff;
    color: #555;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    display: grid;
}
img{
    max-width: 100%;
    border: 0; 
}
a{
    text-decoration: none;
}



.header{
    max-width: 1400px;
    margin: auto; 
    padding: 1vw 3vw;
    text-align: right;
}
.header a{
    color: #555;
}
.header h1{
    line-height: 80px;
    font-size: 80px; 
    padding: 0; 
    margin: 5px 0;
    font-weight: normal;
    font-family: 'Waterfall', cursive;
}
.header h3{
    line-height: 20px;
    font-size: 20px; 
    padding: 0;
    margin: 5px 0;
    font-weight: normal;
}
.maintext{
    max-width: 1000px;
    margin: auto;
    padding: 1vw 3vw;
    line-height: 1.7;
}
.maintext h1{
    font-size: 24px; 
    font-weight: normal;
}
.maintext p a {
    color: #333;
    border-bottom: 1px dashed #333;
}
.fishing{
    background-color: #387eb7;
    color: #fff;
    text-align: center;
    padding: 1vw;
}
.caravanclub{
    background-color: #95343B;
    color: #fff;
    text-align: center;
    padding: 1vw;
}
.campsite{
    background-color: #95343B;
    color: #fff;
    text-align: center;
    padding: 1vw;
}
.grid img{
    object-fit: cover;
    height: 100%; 
    width: 100%; 
    display: block;

}
footer{
    max-width: 1400px;
    margin: auto; 
    padding: 3vw;
    display: grid;
    gap: 20px; 
}
footer a{
    color: #444;
    text-decoration: none;
}
.grid h2{
    line-height: 50px;
    font-size: 50px; 
    font-weight: normal;
    font-family: 'Waterfall', cursive;
}
.grid a{
    color: #fff;
}
.iw{
	text-align: right; 
	padding: 10px 20px;	
	font-size: 11px;
}
.iw a{
	color: #222;
}
#map{
    height: 500px;
    width: 100%; 
}
.pictures{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pictures > div > img{
    display: block;
    width: 100%;
}
.pictures > div{
    flex: 1 1 100%;
}
.rowofcaravans{
    display: block;
    margin: auto;
}
.video{
    max-width: 640px;
    margin: auto;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;

}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.social{
    display: block;
    margin: auto;
    max-width: 50px; 
}

@media only screen and ( min-width: 800px ) {
    @supports(display: grid){
        .grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .grid > div{
            display: grid;
            justify-content: center;
            align-items: center;
    
        }
        .caravanclub{
            grid-column: 2/3;
        }
        .camping{
            grid-column: 1/2;
            grid-row: 2/3;
        }
        .grid  div.image a, .grid  div.image, .grid  div.image img{
            max-height: 30vw;
            width: 100%;
            display: block;
        }
        footer {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    .caravanlogo{
        max-width: 200px ;
        margin: auto; 
        display: block;
    }

    .pictures > div{
        flex: 1 1 20%;
    }
    .pictures > div img, 
    .grid  div.image img{
        height: 100%;
        object-fit: cover;

    }
}

@media only screen and ( max-width: 800px ) {
    .header{
        text-align: center; 
    }
}