body 

{
	font-family:lato, sans-serif;
	font-size:.95em;
	font-weight:500;
	line-height:1.48;	
	padding:0;
	margin:0;
}

*
{
	box-sizing:border-box;
}

.open_menu
{
	position:fixed;
	top:0;
	right:0;
	margin:10px;
	z-index:150;
}
.close_menu
{
	position:fixed;
	top:0;
	right:0;
	margin:10px;
	display:none;
	z-index:150;
}

.close_menu:hover, .open_menu:hover

{
	cursor:pointer;
}
#menu
{
	width:100vw;
	height:100vh;
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:#fff;
	z-index:100;
}

#innermenu
{
	
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;width:100vw;
	height:100vh;
		font-family:raleway;

	font-size:1.25em;
}

#innermenu a, #innermenu a:visited
{
	color:#333;
	
}

#innermenu a:hover
{
	color:#ededff;
	transition:.2s;
}
#loading

{
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	background:#fff;
	z-index:250;
}

.main

{
	padding:0rem;
	margin:0;
}

a, a:visited
{
	text-decoration:none;
	color:#1212ff;
	transition:.2s;
}

a:hover
{
	color:#ededff;
	transition:.2s;
}
header
{
	padding:4rem 3rem 3rem 3rem;
}

h1
{
	font-family:raleway;
	font-weight:800;
	text-transform:none;
	text-align:center;
}

h2 {
	text-align:center;
padding: 2rem;}

footer

{
    text-align: center;
    padding: 2rem;
    background: #1552ff;
    color:#fff;
	margin:2rem 0 0 0;
}
section

{
	width:50%;
	border:2px solid red;
	margin:0 auto;
}

.medium
{
	width:25%;
	margin:0 auto;
}

.medium2
{
	width:75%;
	margin:0 auto;
}
@media (min-width:768px) {section  { width:65%;margin:0 auto;}}
@media (max-width:768px) {.medium2, .medium  { width:100%;margin:0 auto;}}

.caption
{
	text-align:center;
	font-size:.9em;
	font-weight:600;
	color:#444;
}


picture
{
  display: flex;
  position:relative;
}
.grid_picture

{
  display: flex;
width:75vw;
  margin:0 auto;
flex-wrap:wrap;
  padding:0;
  border:0 solid red;
}

@media (max-width:560px) {.grid_picture {width:100%;}}

  img {

    object-fit:cover;
	transition:.2s;
	margin:0;
	padding:0;

  }
  
.square-size

{
	    grid-row:span 3;

}
  
  .high-size
  {
    grid-column: span 2;
    grid-row: span 3;
  }
  
  .medium-size
  {	
  grid-column: span 1;
    grid-row: span 3;
  }
  
  .low-size
  {    
 width:calc(25vw - 2rem);
 height:calc(25vw - 2rem);
 border:0 solid black;
 object-fit:cover;
  }
  
  @media (max-width:560px) {  .low-size
  {    
 width:calc(33vw - 1rem);
 height:calc(33vw - 1rem);
 border:0 solid black;
 object-fit:cover;
  }
  }

  
nav
{
display:flex;
margin: 0 0 1rem 0;
display:none;
}

.nav{

	text-align:center;
	color:#fff;
	flex:0 0 auto;
	flex:0 0 15%;
	flex:0 0 auto;
}	

@media (max-width:1200px) {.nav{flex:0 0 25%;}}
@media (max-width:768px) {.nav{flex:0 0 33.333%;}}

.logo
{
	
	background:#7c67ff;	
	background:#7c67ff;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #fff;
	color:#fff;
	text-transform:lowercase;
	font-size:.95em;
	letter-spacing:0.05em;
	font-weight:700;
	transition:0.2s;	
max-height:55px;
padding-top:5px;
}

.logo a, .logo a:visited
{
	width:50px;
	padding:1rem;
}
.logo a svg, .logo a:visited svg
{
	fill:#fff;
}

.logo a:hover svg

{
	fill:#7c67ff;
}
.logo a:hover
{
		fill:#7c67ff;
		background:#fff;
		color:#7c67ff;
		margin-top:-2px;
}

.limit
{

	flex:auto;
	background:#7c67ff;
	border:1px solid #fff;
}
.nav a, .nav a:visited{
	padding:1rem;	
	background:#7c67ff;	
	background:#7c67ff;

	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #fff;
	color:#fff;
	text-transform:lowercase;
	font-size:.95em;
	letter-spacing:0.05em;
	font-weight:700;
	transition:0.2s;	

}	


.nav a:hover
{
	background:#fff;
	color:#7c67ff;
	transition:0.2s;
}



.grid2
{
	display: grid;
  grid-gap: 1rem;
  max-width: 72rem;
  margin:0 auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 5rem;
  padding:0rem;
}

.grid_big

{
	grid-column: span 3;
	grid-row: span 3;
}

.grid_small

{
	grid-column: span 1;
	grid-row: span 3;
}

.hover
{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
height:100%;
width:100%;
opacity:0;
color:#fff;
	transition:.2s;
	font-family:raleway, sans-serif;
	font-size:1.25em;
	font-weight:700;
}

.low-size:hover .hover
{
	opacity:1;
    transition: all 0.3s ease;
}

.low-size:hover img
{
	opacity:.5;
    transition: all 0.3s ease;
}
  


picture {
    position: relative;
	margin:1rem;
    overflow: hidden;
    width: initial;
}

  
  @media (max-width:560px) {  
  picture {
    position: relative;
	margin:.5rem;
    overflow: hidden;
    width: initial;
}
  }

picture img {
    max-width: 100%;

    transition: all 0.3s ease;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
	object-fit:cover;
}

picture:hover img {
    transform: scale(1.05);
    transition: all 0.3s ease;
}