@import 'https://fonts.googleapis.com/css?family=Open+Sans|Caveat';
@import 'flickity.css';
@import 'dist/jquery.fancybox.css';



@font-face
{
font-family: "VAGRounded BT";
src: url(TT0756M.TTF);
}





/* CORE STYLES */
:root {
    --purple: #931749;
    --white: #ffffff;
    --grey: #4C4C4E;
    --black:#000000;
    --lightgrey: #eee;
    --midgrey: #555;

  }



body{
    background-color: var(--white);
    margin: 0;
	font-family:"Open Sans",  Arial, Helvetica, sans-serif, Sans;
}
a{
    text-decoration: none;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}

h2{
    font-size: 22px;
}
header{
    display: flex;
    max-width: 800px;
    margin: auto;
    flex-wrap: wrap;
    align-items:center;
    padding: 20px; 
    gap: 20px; 
    color: var(--grey);
}
header h1{
    font-size: 18px;
    font-weight: normal;
}
header a{
    color: var(--grey);
}
header div{
    flex: 1 1 auto;
}
header img{
    width: 300px; 
}
footer{
    background-color: var(--lightgrey);
    padding: 20px; 
}
footer .address{
    display: grid;
    max-width: 800px;
    margin: auto;
    gap: 20px;
}
li::marker {
	color: var(--purple);
}
.toptel, .address {
	color: var(--grey);
	font-family: "VAGRounded BT";
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 160%;
}
.toptel a, .address a{
    color: var(--grey);
}
.toptel a:hover, .address a:hover{
    color: var(--purple);
    text-decoration: underline;
}



.sidebar{
	background-color: var(--purple);
	color: #fff;
	text-align:center;
	position: relative; 
}

.nav{
	color: var(--white);
}
.nav a{
	color: var(--white);
	text-decoration: none; 
	padding: 15px; 
	display:block; 
	transition: .5s; 
}
.nav a:hover{
	background-color: #000;
}
.nav {
	margin: auto;

}
.navigation{
	color: #fff;
}
.clearfix::after
{
	content: '';
	display: table;
	clear: both;
}
#nav
{
    width: 60em; /* 1000 */
    font-weight: 400;
    width: 100%;
    position: relative;
    z-index: 1000;
}

#nav > a
    {
        display: none;
    }
.main .text{
    padding: 50px;
    max-width: 800px;
    margin: auto; 
    line-height: 170%;
    color: var(--midgrey);
    font-size:17px; 
}
.main .text a{
    color: var(--midgrey); 
}
.main .text a:hover{
    color: var(--black); 
}
.text h1 {
	font-family: "VAGRounded BT";
	font-size: 24px;
	letter-spacing: 3px;
	font-weight: normal;
	border-bottom: 5px solid var(--purple);
	padding: 10px 0px;
	display: table;
	margin-bottom: 30px;
}
.bigpicture {
	background-size: cover;
	background-position: center center;
    height: 100%;

}
.gallery-cell {
	width: 100%;
	height: 55vw;
    max-height: 700px; 
	margin-right: 10px; 
}
.iw {
	font-size: 12px;
	padding: 10px 100px 10px 10px;
	text-align: right;
} 
.iw a{
	color: var(--midgrey);
	text-decoration: none;
}
.flex {
	display: flex;
	flex-flow: wrap;
	margin: auto; 
	flex-wrap: wrap;
	justify-content: center; 
    padding: 20px; 
}
.flex > div {
	position: relative; 
	flex: 1 1 200px;
	height: 200px; 
	overflow-y: hidden;
	margin: 10px; 
	max-width: 621px; 
}

.flex img{
	width: 100%;
	height: auto;
}
@supports(object-fit: contain) {
.flex img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
}
.flex > div:hover > div, 
.flex > div:focus > div{
	opacity: 0.85;	
	height: 100%;
}
.flex h2{
	color: #fff;
}
@supports(gap: 20px) {
.flex {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(calc(100px + 7vw), 1fr));
	justify-items: center;
	gap: 10px;
    margin: 0 auto 10px auto;
}
}
.sidebar .gallery-cell{
    height: 400px; 
    margin: 5vw auto;
    width: 100%; 
    /* background-color: var(--white); */
    background-size: contain;
    background-repeat: no-repeat;
}
.sidebar .bigpicture{
    background-size: contain;
    background-repeat: no-repeat;
}
/* .sidebar .flickity-slider{
    background-color: var(--white);   
} */
.sidebar .gallery-cell img{
	height: 100%;
	object-fit: contain;
    display: block;
    margin: auto;
}
.sidebar .gallery-cell a{
    height: 100%;
    width: 100%;

}


@media only screen and ( min-width: 799px ) {

html, body, .container{
    min-height: 100%;
}
.container{
	display: flex;
	justify-content: center;	
}
.container > div {
	flex: 1 1 auto;
}
.toptel {
	text-align: right;
}
.main{
	width:70%; 
}
footer .address{
    grid-template-columns: 1fr 1fr;
}
/* .sidebar{
    background-image: url('images/e.png');
    background-position: 50px bottom;
    background-size: 16vw;
    background-repeat: no-repeat;
    background-attachment: fixed;
} */
.flex > div{
    height: 200px;
    /* max-width: 400px;  */
}
.contactgrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.contactgrid .contactgrid{
	max-width: 200px;
}
.navigation{
    margin-top: 50px;
}
blockquote{
    background-color: #f0f0f0;
    border-left: 4px solid #444;
    position: relative;
    padding: 1rem; 
}
blockquote:before,
blockquote:after{
    font-family: Georgia, Times New Roman; 
    position: absolute;
    top: 13px;
    color: #999;
    font-size: 60px;
}
blockquote:before{
    content: "\201C";
    margin-right: 13px;
    right: 100%;
}
blockquote:after{
    content: "\201D";
    margin-left: 13px;
    left: 100%;  
    bottom: 13px;
}
blockquote + p {
    text-align: right;
    margin-bottom: 2rem;
}
}




/* @media only screen and ( min-height: 900px ) {
    .sidebar > div{
    position: sticky;
    top: 100px; 
    }
} */

@media only screen and ( min-width: 1500px ) {
.sidebar img{
    border: 10px solid var(--midgrey);
    border-radius: 5px;
	margin: auto; 
	
}
}




@media only screen and ( max-width: 800px ) {
    .container{
    flex-flow: row wrap; 
    }
    .sidebar > div{
    position: relative;
    }
    .sidebar img{
    width: 200px; 
    margin-top: 70px; 	
    }
    .main .text{
    padding: 50px 20px;
    }
    .links {
    text-align: left;
    line-height: 30px;
    position: relative; 
    animation: fadein 0.5s;	
    }
    .links a {
    display: block;
    padding: 15px 30px ;

    }
    .nav {
    margin: 0;
    width: auto;
    }
    .navigation{
    height: auto;
    width: 100%; 
    background-color: var(--purple);
    z-index: 1000; 
}
    
    #nav
    {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 0 0;
    }





    #nav > a
    {
    width: 3.125em; /* 50 */
    height: 3.125em; /* 50 */
    text-align: left;
    text-indent: -9999px;
    margin: auto; 
    position: relative;
    }
    #nav > a:before,
    #nav > a:after
    {
    position: absolute;
    border-top: 4px solid #fff;
    top: 31%;
    left: 25%;
    right: 25%;
    content: '';
    }
    #nav > a:after
    {
    top: 45%;
    border-top: 4px solid #fff;		
    border-bottom: 4px solid #fff;
    height: 7px; 
    }

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
    display: block;
    }

    #nav .links
    {

    display: none;


    }
    #nav:target > .links
    {
    display: block;

    }
    header{
         justify-content: center;   
    }
    header > div{
        width: auto;
        margin: auto;
   
        text-align: center;
    }
    .sidebar .gallery-cell{
        display: none;
    }
    }

/* div{
    outline: 1px solid red;
} */