Адаптивный навигационный блок

Question

Я сделал панель навигации с CSS-анимацией и JavaScript. Но я не мог сделать это отзывчивым. Я хочу, чтобы анимация панели навигации была нулевой, если размер окна меньше 700px, а анимация должна отображаться, если она больше 700px. Это означает, что свойство transform three-d-box :hover в css paart должно быть скрыто при изменении размера окна до 700px. Штрих-код навигации ниже;

$('.block-menu').find('a').each(function(){

  var el = $(this),
       elText = el.text();
  
  el.addClass("three-d");
  el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
});

.container {
   width: match-parent;
   padding: 12px ;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: #fc0;
  text-decoration:none;
}

.block-menu {
	width:fit-content; 
  height:fit-content;
}

.block-menu li {
	display: inline-block;
}

.block-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
  width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px;               
                margin-left:auto;
                margin-right:auto;
                margin-top:1px;
                margin-bottom:1px;
}
.three-d {
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;
}
	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box {
		transform: translateZ(-25px) rotateX(90deg);
	}

.three-d-box {
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.front {
	transform: rotatex(0deg) translatez(25px);
}

.back {
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;
}

.front, .back {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;
}

.back {
  background: #d05ce8;
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>   

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>