#shooseNessieSiteType
{
	display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 5% auto;
    justify-content: center;
}

.nessieTypeSiteItem>a>div>img
{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.nessieTypeSiteItem
{
	text-align:center;
	display:grid;
	width:200px;
	height:250px;
}

@media screen and (max-width: 500px)
{
	.nessieTypeSiteItem>a>div>img
	{
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0,0);
	}
	
	.nessieTypeSiteItem
	{
		width:100%;
	}
}

.nessieTypeSiteImg
{
	height:150px;
}

.nessieTypeSiteItem>a
{
	text-decoration: none;
    display: grid;
    color: white;
    font-weight: 600;
    text-shadow: 1px 1px black;
	grid-template-rows: 80% 20%;
	
}

.nessieTypeSiteItem>a>div
{
	position:relative;
	padding: 10px 0 0 0;
	color:white;
}

#siteType0
{
	background-color: #257392;
}

#siteType1
{
	background-color: #bd2c18;
}

#siteType2
{
	background-color: #287573;
}

#siteType3
{
	background-color: #de644f;
}

#siteType4
{
	background-color: #1b3b79;
}

#siteType5
{
	background-color: #f9d176;
}

.chooseTmpltTitle, .chooseTmpltWrapper>a
{
	text-align: center;
    padding: 30px;
    font-size: 2em;
    color: #615454;
    text-decoration: overline;
	cursor:pointer;
	display:block;
}

.chooseTmpltWrapper>div>a
{
	text-align: center;
    height: 100px;
    font-size: 2em;
    color: #615454;
    text-decoration: overline;
	cursor:pointer;
	display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
}

.chooseTmpltTitle:hover, .chooseTmpltWrapper>a:hover
{
	color: #a23636;
}

.chooseTmpltWrapper>a
{
	display:block;
}

.chooseTmpltItem
{
	position: relative;
    min-height: 300px;
	cursor:pointer;
	margin: 0 auto;
	display: grid;
	grid-template-areas: "chooseImgWrap chooseTmplDscrpshn"
						"chooseTmpltButtonsWrap chooseTmpltButtonsWrap";
	grid-template-columns: 300px auto;
	margin-bottom: 30px;
}

@media screen and (max-width: 800px)
{
	.chooseTmpltItem
	{
		grid-template-areas: "chooseImgWrap"
							"chooseTmplDscrpshn"
							"chooseTmpltButtonsWrap";
		grid-template-columns: auto;
	}
}

.chooseImgWrap
{
	grid-area: chooseImgWrap;
	display: flex;
    justify-content: center;
    align-items: center;
}

.chooseTmplDscrpshn
{
	grid-area: chooseTmplDscrpshn;
}

.chooseTmpltItem:hover
{
	background-color:whitesmoke;
}

.chooseTmpltButtonsWrap
{
	text-align: center;
    display: flex;
    height: 50px;
    width: 100%;
    bottom: 0;
    position: absolute;
    background-color: #54615c;
	grid-area: chooseTmpltButtonsWrap;
	flex-direction: row-reverse;
}

@media screen and (max-width: 800px)
{
	.chooseTmpltButtonsWrap
	{
		flex-direction: row;
	}
}

.chooseTmpltItem>img
{
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
	width: 100%;
    height: 100%;
    object-fit: contain;
}

.chooseTmpltItem>img:hover
{
	transform: translate(-50%,1px);
}

.chooseTmpltItem:hover>img
{
	box-shadow: none;
}

.chooseTmpltButtonsWrap>div
{
	position: relative;
    width: 80%;
    color: white;
}

.chooseTmpltButtonsWrap>div:hover
{
	background-color:#38423e;
}

.chooseTmpltButtonsWrap>.chooseTmpltSvg
{
	width: 20%;
}

.chooseTmpltButtonsWrap>div>div, .chooseTmpltSvg>svg
{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	color:white;
}

.chooseTmpltSvg
{
	border-left: 1px solid;
	border-right: 1px solid;
}

.noTmpltTitle
{
	text-align: center;
    padding: 50px 0;
    font-size: 2em;
    color: steelblue;
    line-height: 1.4;
}

.chooseTmpltButtonsWrap>*>svg
{
	width: 32px;
    fill: whitesmoke;
}

.modalWpapper
{
	position: fixed;
    background-color: rgba(0,0,0,.8);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	cursor:pointer;
}

.modalWpapper>img
{
	position: absolute;
    left: 50%;
    transform: translate(-50%,50px);
    box-shadow: 10px 10px 0 black;
}

.closeSpan
{
	font-weight: 600;
    display: inline-block;
    background-color: tomato;
    padding: 20px 10px;
    line-height: 0;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #5f2c23;
    text-shadow: 0 1px #632e2e;
    box-shadow: 0 0 5px #652e2e;
}

.chooseButtonInModal
{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background-color:#54615c;
	color:white;
	text-align:center;
	font-size:1.5em;
}

.modalWpapper>.zoomedImg
{
    max-width:95%;
    max-height:95%;
}

.chooseTmpltWrapper
{
    margin-bottom: 100px;
}

.chooseImgWrap>img {
    cursor: pointer;
    box-shadow: 1px 1px 3px grey, -1px -1px 1px #e9e9e9;
}

.chooseTmpltList
{
	padding: 0 20px;
}

.explTmplWrap
{
	padding: 20px 50px;
}

.explTmplList
{
	padding: 20px 0;
}

.explTmplList>ul
{
	display: grid;
}

.explTmplList>ul>li
{
	padding: 0 0 0 20px;
}

.red{
	color:red;
	font-weight:600;
}

.redy
{
	padding:20px;
}

.padding20
{
	padding:20px 0 0 0;
}

.chooseTmpltTitle>a
{
	text-decoration: none;
    color: indianred;
}

.chooseTmpltTitle:hover>a
{
	text-decoration: none;
    color: teal;
}

.explTmplWrap>div{
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.explTmplWrap>div>div{
	min-width:250px;
}

.instrctn
{
	display: flex;
    justify-content: center;
    align-items: center;
}

.instrctn>a{
	text-decoration: none;
}

.instrctnIco
{
	display: flex;
    justify-content: center;
}

.instrctnIco>img
{
	height:80px;
}