:root 
{
  --main-bg-color: #95afd6;
}

@font-face 
{
    font-family: Raleway; /* Èìÿ øðèôòà */
    src: url(/templates/fonts/Raleway-VariableFont_wght.ttf); /* Ïóòü ê ôàéëó ñî øðèôòîì */
}

/**::-webkit-scrollbar { width: 0; }

* { -ms-overflow-style: none; }

* { overflow: -moz-scrollbars-none; }*/

.imgsList
{
	grid-area: imgsList;
	width:100%;
	margin:0;
	padding:0;
}

.imgsList>div
{
	display:flex;
	overflow:hidden;
}

.bigImg
{
	grid-area: bigImg;
	margin:0;
	padding:0;
	width: 400px;
    height: 400px;
    transform: translate(250px, -450px);
	box-shadow: 0 10px 50px;
	background-color:#999999;
	display:none;
}

.bigImgWrapper2
{
	height:100%;
}

.bigImgItem
{
	z-index:1;
	height: 70vh;
}

h1.title
{
	grid-area: hOne;
	margin:0 auto;
	padding: 30px 0 80px;
	display: flex;
    justify-content: flex-start;
    align-items: center;
	transform: translateX(10px);
	font-size: 3em;
    font-weight: 600;
	width:95%;
}

.links:before
{
	content:'';
	position: absolute;
    background-color: red;
    top: 0;
    bottom: 10px;
    left: 0;
    width: 100px;
}

h1,div,p,a
{
	font-family: Raleway; /* Èìÿ øðèôòà */
    src: url(/templates/fonts/Raleway-VariableFont_wght.ttf); /* Ïóòü ê ôàéëó ñî øðèôòîì */
}

html, body 
{
    height:100%;
	width:100%;
	margin:0 auto;
}

.contactsWrapper
{
	grid-area: contactsWrapper;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	height: 100%;
    display: block;
	color: gray;
}

.links
{
	grid-area: links;
	width: 100%;
	margin:0;
	padding:0;
}

.links>div
{
	height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.text
{
	grid-area: text;
	width:95%;
    margin:25px;
	padding: 0;
	text-align:justify;
	transform: translateX(10px);
}

.sotialWrap
{
	flex-wrap:wrap;
	width:100%;
	padding: 40px 0 0 0;
}

.sotialWrap>.sotial
{
	justify-content: flex-end;
	padding:0;
}

.sclNtwrClass>a
{
	display: flex;
}

main
{
	position:relative;
	display:grid;
	grid-template-areas: 
		"hOne hOne hOne hOne"
		"imgsList imgsList imgsList imgsList"
		"bigImg bigImg bigImg bigImg"
		"text text text contactsWrapper"
		"text text text sotialWrap"
		"text text text .";
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto 400px 0px auto auto auto;
	padding:0;
	min-height:100%;
	margin:30px auto;
	width:auto;
	height:auto;
}

.links>div>div
{
	padding: 5px 50px;
}

.contactItem>div
{
	display:block;
}

.contactItem>div>div
{
	text-align:right;
	width:90%;
}

.imgItemWrap,.imgItem
{
	width:auto;
	height:300px;
}

.imgsList>div>div
{
	padding:0;
	border-radius:0;
	border:0;
}

.hideScroll:before
{
	display:none;
}

.imgsList>div.whiteScroll
{
	background-color: red;
    top: 0;
    position: absolute;
    right: 0;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: white;
	cursor:pointer;
	height:300px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;  
	z-index:2000;
}

figure.zoom
{
	height:400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#myimage
{
	max-height: 400px;
	height:auto;
}


#myimage:hover,.bigImg:hover>div>figure>#myimage
{
	opacity: 0;
}

.gallArrow
{
	display:none;
}

.modalImgWrapper
{
	background-color: transparent;
}

.imgIconsWrapper1, .imgIconsWrapper2
{
	display:none;
}

body>.modalImgWrapper>.closeModalWindowClass
{
	right:auto;
	transform: translate(-50%,-50%);
	background-color:rgb(92 92 92 / 80%);
}

@media screen and (max-width: 1000px)
{
	main
	{
		grid-template-areas: 
			"hOne"
			"imgsList"
			"bigImg"
			"text"
			"contactsWrapper"
			"sotialWrap";
		grid-template-columns: 1fr;
		grid-template-rows: auto 300px 0px auto auto;
		padding:0;
		min-height:100%;
		margin:30px auto;
		width:auto;
		height:auto;
	}
	
	.imgsList
	{
		overflow:hidden;
	}
	
	.bigImg
	{
		display:none;
	}
	
	.links
	{
		height:100%;
		overflow:hidden;
	}
	
	.links>div
	{
		display:block;
		padding:70px;
	}
	
	.text
	{
		padding:20px 0;
		margin: 25px 0;
	}
	
	.contactsWrapper
	{
		padding:20px 0 0 0;
		text-align: center;
	}
	
	h1.title
	{
		margin: 0 0 20px 0;
	}
	
	.contactItem
	{
		width: auto;
		padding: 3px 0;
	}
	
	.sotialWrap>.sotial
	{
		padding: 0 40px 0 0;
	}
}