:root {
  --bg: rgba(255,255,255,0.7);/*#ffde59;*/
  --border: #284283; /*#00c5ff;*/ /*#ff914d;*/
  --text: #284283;/*#ff914d;*/
}


*{
	padding: 0;
	margin: 0;
}
body.body{
	font-family:  Jazz LET;
	
	/*background: var(--bg); */
	background-image: url("../images/wall.jpg");
	background-size: contain;
	/*background-attachment: */
	color: var(--text);

}


div.container-fluid{
	/*width: 100%;*/
	/*margin: 0;*/
	/*text-shadow: 1px 1px 1px #bf510d, -1px -1px 1px #bf510d, 1px -1px 1px #bf510d, -1px 1px 1px #bf510d;*/
	/*text-shadow: 1px 1px 1px #775600, 2px 2px 1px #aa8900;*/
	letter-spacing: 1px;
}
/*.tile{
	border-bottom: 1px solid var(--border);
	border-left: 1px solid var(--border);
}*/

div#row-1{
	/*box-shadow: 1px 1px 5px var(--border);*/
	box-shadow: 1px 1px 1px #444, 3px 3px 10px #444;
	/*background: rgba(0,0,0,0.2);*/
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
}


div#row-1 #name{
	color: white;
	background: rgba(40,66,131,0.9);
	font-weight: 900;
	font-size: 1.5em;
} 
div#row-1 #name a{
	width: 100%;
	height: 100%;
	display: inline-block;
	text-decoration: none;
	color: white;
	/*background: rgba(40,66,131,0.9);
	font-weight: 900;
	font-size: 1.5em;*/
} 

div#row-1 #nav{
	background: var(--bg);
	color: #284283;
}

nav.navbar{
	padding:0;
}
nav ul{
	display: inline-block;
	margin: 0;
	width:100%;
}
nav ul li{
	float: left;
	list-style: none;
	height: 75px;
	width: 14%;
	/*padding: 25px;*/
	box-sizing: border-box;
	font-size: 0.7em;
}
nav ul li.valid:hover{
	/*background: var(--border);*/
	/*color: #284283;*/
	/*text-decoration: underline;*/
	/*animation: 10s;*/
}
nav ul li.valid .tab-text{
	/*transition: background 1s linear;*/
	padding: 2px 15px;
	background: linear-gradient(to left, rgba(255,255,255,0) 50%, #00c5ff 40%, #00ddff 10%) right;
    background-size: 210%;
    transition: .3s ease-out;
    border-left: 3px solid rgba(255,255,255,0);
	border-radius: 50% 0 2px 2px;
}
nav ul li.valid a{
	width: 100%;
	height: 100%;
	padding: 25px;
	display: inline-block;
	text-decoration: none;
	color: var(--text);
}
nav ul li.valid:hover .tab-text{
	/*background: #00c5ff;*/
	background-position: left;
	border-left: 3px solid #0075af;
	/*border-radius: 50% 0 2px 2px;*/
/*	color: #284283;/*var(--bg);*/
/*	text-decoration: underline;
	animation: 10s;*/
}



div#row-1 #mode{
	color: white;
	background: rgba(40,66,131,0.9);
}

div#row-1 #mode svg path{
	stroke: var(--bg);
	stroke-width: 1px;
}

div#row-1 .tile{
	position: relative;
	font-size: 1.5em;
	text-align: center;
	height: 75px;
	border-bottom: 1px solid var(--border);
	border-left: 1px solid var(--border);
}

div#row-1 .tile p{
	width: 100%;
	/*display: block;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;
}




div#row-2{
	margin-top: 75px;
}

div#row-2 .tile{

	height: 350px;
	text-align: left;
	position: relative;
}
div#row-2 .tile div.spiral{
	position: absolute;
	width: 100%;
	top: 0;
}
div#row-2 .tile div.spiral-loop::before{
	content: " ";
	height: 40px;
	width: 100%;
	display: inline-block;
	border-radius:50%;
	border-left: 3px solid #000;
	/*border-right: 1px solid #000;*/
	/*border-top: 1px solid #000;*/
	/*transform: rotateZ(-45deg);*/
	position: absolute;
	/*top: 25px;*/
	/*border-l: 3px solid #bbb;*/
	/*outline-top: 1px solid black;*/
	margin-right: 10px;
	z-index: 20;
	/*background: r;*/
}
div#row-2 .tile .spiral-loop{
	height: 40px;
	width: 5%;
	display: inline-block;
	/*background: red;*/
	/*border-radius:50%;*/
	/*border-left: 1px solid #000;*/
	/*border-right: 3px solid #000;*/
	/*border-top: 3px solid #000;*/
	/*transform: rotateZ(-45deg);*/
	position: relative;
	float: left;
	transform: translateY(-50%);
	/*border-l: 3px solid #bbb;*/
	/*outline-top: 1px solid black;*/
	margin-left: 2%;
	margin-right:2%;
	/*z-index: 50;*/
	/*background: r;*/
}
div#row-2 .tile .spiral-loop .hole-container{
	height: 40px;
	width: 120%;
	position: absolute;
	top: 50%;
	background: #ebe4b9; /*#ede29e;*/
	z-index: 10;
}
div#row-2 .tile .spiral-loop .hole{
	border-radius: 50%;
	height: 10px;
	width: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	background: #000;
}

div#row-2 .tile .spiral-loop::after{
	content : " ";
	height: 40px;
	width: 100%;
	display: inline-block;
	border-radius:50%;
	/*border-left: 1px solid #000;*/
	border-right: 3px solid #000;
	border-top: 3px solid #000;
	/*transform: rotateZ(-45deg);*/
	position: absolute;
	top: 0;
	left: 10%;
	/*transform: translateY(-50%);*/
	/*border-l: 3px solid #bbb;*/
	/*outline-top: 1px solid black;*/
	/*margin-right: 10px;*/
	/*z-index: 0;*/
	/*background: r;*/
}

div#row-2 .tile h1#note{
	/*-webkit-text-stroke-width: 1px;*/
  	/*-webkit-text-stroke-color: black;*/
  	z-index: 10;
	background: #ebe4b9; /*#ede29e;*/
	padding: 10px;
	padding-bottom: 30px;
	margin: 0;
	border-radius: 0 0 5px 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 85%;
	font-weight: 700;
	border: 1px solid black;
	box-shadow: 1px 1px 1px #444, 3px 3px 10px #444;
}

div#row-2 .tile h1#note hr{
	margin:0;
	border-top: 1.5px solid #3ea7f8;
	opacity: 0.6;
	margin-top: 15px;

}

.nanum-brush-script-regular {
  font-family: "Nanum Brush Script", cursive;
}

div#hi{
	font-size: 0.7em;
	font-style: normal;
	position: relative;
	top: 21px;

}
div#welcome{
	font-size: 0.6em;
	font-weight: 400;
	font-style: normal;
	position: relative;
	top: 21px;
}
div#tomy{
	font-size: 0.6em;
	font-weight: 400;
	font-style: normal;
	position: relative;
	top: 21px;
	height: 25px;

}
div#digitalhome{
	font-size: 0.7em;
	font-style: normal;
	position: relative;
	top: 21px;
	height: 25px;
}

div#row-2 .tile div.img-outline{
	border: 2px solid var(--border);
	/*height: 200px;*/
	width: 210px;
	height: 210px;
	padding: 3px;
	box-sizing: content-box;
	border-radius: 50%;
	/*overflow: hidden;*/
	background: rgba(255,255,255,0.9);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 0px 5px var(--border);
}

div#row-2 .tile .img-container{
	/*height: 200px;*/
	border: 2px solid var(--border);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	/*background: red;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

div#row-2 .tile img{
	/*height: 200px;*/
	width: 200px;
	/*position: absolute;*/
	/*top: 50%;
	left: 70%;
	transform: translate(-50%,-50%);*/
}


div#row-3 .tile{
	height: 350px;
	text-align: center;
	position: relative;
}
div#row-3 .tile .post{
	/*background: var(--border);*/
	width: 80%;
	/*margin-top: 10%;*/
	height: 80%;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
	color: #284283;
	text-shadow: none;
	border: 1px solid black;
	box-shadow:  2px 2px 3px #444;
	overflow: hidden;
}



div#row-3 .tile #post-1 .post-shade, div#row-3 .tile #post-3 .post-shade{
	position: absolute;
	top: 0%;
	left:0%;
	width: 100%;
	height: 30px;
	background: linear-gradient(#c0e6ff, #d9f4fc)
	/*#a3cfeb;*/
}
div#row-3 .tile #post-2 .post-shade, div#row-3 .tile #post-4 .post-shade{
	position: absolute;
	top: 0%;
	left:0%;
	width: 100%;
	height: 30px;
	background: linear-gradient(#9dd3ed, rgb(169,237,241))
	/*#a3cfeb;*/
}

div#row-3 .tile .post .post-fold-container{
	height: 15px;
	width: 15px;
	position: absolute;
	bottom:0;
	left:0;
	/*background: rgba(0,255,0,0.5);*/
	border-top: 1px solid black;
	border-right: 1px solid black;
	background: #d9f4fc;
	overflow: hidden;
	transition: height 0.3s ease-out, width 0.3s ease-out;
	transition-delay: 0.2s;
}
div#row-3 .tile .post .post-fold-container .post-fold{
	height: 800px;
	width: 800px;
	position: absolute;
	/*background: rgba(0,0,255,0.5);*/
	/*border-left: 1px solid black;*/
	transform: rotateZ(45deg) translate(-50%, -50%);
	transition: transform 0.2s linear;
	transition-delay: 0s;
}

div#row-3 .tile .post:hover .post-fold-container{
	height: 100%;
	width:100%;
	transition-delay: 0s;

}
div#row-3 .tile .post:hover .post-fold{
	transform: translate(-50%, -150%); 
	transition-delay: 0.3s;
	border: 1px solid black;
}

/*div#row-3 .tile .post::before{
	z-index: 5;
	content: " ";
	background: var(--border);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 100%;
	right: 100%;
	transform: translate(15px,-15px);
	color: #284283;
	text-shadow: none;
	border: 1px solid black;
	box-shadow:  2px 2px 3px #444;
	transition: top 0.5s ease-out, right 0.5s ease-out;
}*/
/*div#row-3 .tile .post:hover .post-fold{
	top: 0%;
	right: 0%;
	color: #284283;
	text-shadow: none;
	border: 1px solid black;
	box-shadow:  2px 2px 3px #444;
}*/

div#row-3 .tile .post#post-1, div#row-3 .tile .post#post-1 .post-fold-container{
	background: #d9f4fc; 
	/*border: 1px solid yellow;*/
}
div#row-3 .tile .post#post-1 .post-fold {
	background: #a3cfeb; /*#85acc5;*/
}

div#row-3 .tile .post#post-2, div#row-3 .tile .post#post-2 .post-fold-container{
	background: rgb(169,237,241);/*#bdd3da;*/ /*#85acc5;*/
	/*border: 1px solid orange;*/
}
div#row-3 .tile .post#post-2 .post-fold{
	background: #80caee; /*#de9125;*/
}

div#row-3 .tile .post#post-3, div#row-3 .tile .post#post-3 .post-fold-container{
	background: #d9f4fc; /*#7ca3b3;*/
	/*border: 1px solid blue;*/
}
div#row-3 .tile .post#post-3 .post-fold{
	background: #a3cfeb; /*#70afd5;*/
}

div#row-3 .tile .post#post-4, div#row-3 .tile .post#post-4 .post-fold-container{
	background: rgb(169,237,241); /*#70afd5;*/
	/*border: 1px solid green;*/
}
div#row-3 .tile .post#post-4 .post-fold{
	background: #80caee; /*#59bc37;*/
}


.post .post-text.cedarville-cursive-regular {
  font-family: "Cedarville Cursive", cursive;
  font-weight: 700;
  font-size: 2em;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-style: normal;
}

div#row-4{
	margin:0;
	padding:0;
	
}
div#row-4 p{
	position: fixed;
	bottom: 0%;
	text-align: center;
	width: 100%;
	padding: 20px;
	left: 0%;
	box-shadow: 1px 1px 1px #444, 3px 3px 10px #444;
	border-top: 1px solid var(--border);
	background: var(--bg);
	margin:0;
	z-index: 100;
}

div#row-4 p a, div#row-4 p a:visited, div#row-4 p a:link{
	color: var(--border);
}


@media (max-width: 767.98px) {

  div#row-1{
  	position: fixed;
  	z-index:50;
  	width:100%;
  }
  div#row-1 .tile#name{
  	background: var(--bg);
  	color: rgb(40,66,131);
  }
  div#row-1 #name a{
  	color: rgb(40,66,131);
  }
   div#row-1 .tile#mode{
  	background: var(--bg);
  	color: rgb(40,66,131);
  }
  div#row-1 #mode svg path{
	stroke: rgb(40,66,131);
	stroke-width: 1px;
}
  div#row-1 #nav{
  	position: relative;
  	background: var(--bg);
  	color: rgb(40,66,131);
  	margin: 0;
  	padding: 0;
  }
  div#row-1 #nav div{
  	/*position: static;*/
  }
  div#row-1 #nav button#toggle{
  	/*position: absolute;*/
  	top: 100%;
  	left: 50%;
  	height: 35px;
  	background: white;
  	padding: 15px;
  	margin: 20px auto;
  }
  div#row-1 #nav button#toggle span.navbar-toggler-icon#tog-icon{
  	position: absolute;
  	top: 50%
  	left: 50%;
  	transform: translate(-50%,-50%);
  	stroke: var(--border);
  }

  nav ul li{
  	display: none;

  }
  nav ul li.valid{
  	display: block;
  	width: 100%;
  	margin: 0;
	background: var(--bg); 
  }


  div#row-2 .tile#pp{
  	height: 250px;
  }
  div#row-2 .tile div.img-outline{
  	top: 60%;
  	/*bottom: 0%;*/
  }
  div#row-2 .tile.empty{
  	display: none;
  }
  div#row-2 .tile{
  	height: 300px;
  }
  div#row2 .tile{
  	top: 0%;
  }


  div#row-4{
  	margin-top: 20px;
  }
  div#row-4 p{
  	position: fixed;
	bottom: 0%;
	z-index: 100;
  }

}