Lines on Sides of Logo

Hi guys,

I am trying to have 2 horizontal lines for design purpose on the both sides of my centered logo.
I've achieved that with this code:

.site-logo {
  	line-height: 0.5;
  	text-align: center;
}

.site-logo a {
  	display: inline-block;
  	position: relative;  
}

.site-logo a:before,
.site-logo a:after {
  	content: "";
  	position: absolute;
  	height: 5px;
  	border-bottom: 1px solid white;
  	border-top: 1px solid white;
	margin-top: 35px;
  	top: 0;
  	width: 600px;
}

.site-logo a:before {
  	right: 100%;
  	margin-right: 15px;
}

.site-logo a:after {
  	left: 100%;
  	margin-left: 15px;
}

.site-logo div {
  	margin: 0 0 0.25em 0;
}

.site-logo div {
  	font-size: 0.7em;
}

The only issue that I have now is removing the lines from the mobile version of the website.
I know I've got to use @media, but how exactly?