rotate media query

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate volutpat turpis, eu sollicitudin dolor vulputate ut. Curabitur a aliquet ligula, eget dignissim erat. Nulla in interdum lectus, vel molestie massa. Donec suscipit mi eros, a tempor libero feugiat a. Pellentesque ante diam, egestas non quam eget, tincidunt tincidunt nisl. Nunc eu felis lacus. Cras pharetra rutrum lacus non mattis.

Duis in sodales lacus. Proin feugiat tellus neque, ac semper ligula iaculis eu. Integer purus arcu, facilisis et consequat in, posuere at nisi. Nulla laoreet augue orci, gravida tempor dui eleifend eget. Fusce orci elit, vulputate ut consectetur in, placerat vitae lacus. Curabitur urna lorem, cursus et neque eget, lobortis laoreet magna. Quisque tempus, ante id semper pretium, nunc lectus condimentum felis, at vestibulum lacus diam vitae nisi. Curabitur non feugiat nulla. Quisque vel sagittis neque. Proin tincidunt faucibus augue, sit amet vehicula odio porta in. Sed suscipit semper sem vel viverra. In tincidunt lacinia tincidunt. Mauris dictum tempus molestie. Donec et quam eget dui elementum ultricies. Sed lacinia augue vel ligula porta egestas sit amet vel diam.

Integer magna nunc, pretium non pretium eget, consequat ut erat. Nullam aliquam sit amet tortor at pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vitae tempor arcu. Morbi tincidunt odio at felis tempor, vel molestie arcu tincidunt. Nam quis massa et tortor vulputate iaculis. Cras gravida risus eget lorem hendrerit pellentesque. In quis lacus eu dui convallis suscipit euismod nec augue. In sed erat ipsum. Praesent mattis vehicula erat, id semper justo ullamcorper nec. Nam at iaculis mi. Nunc nec gravida ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas vitae leo...

CSS

body {
    margin: 0;
    padding: 20px;
}


#rotate {
    opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}




@media only screen and (min-device-width : 320px) and (max-device-width : 768px) and (orientation :landscape) {


#rotate  {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #26272d ;
	z-index: 1000;
    text-align: center;
    
    opacity: 1;
	visibility: visible;
    -webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

#rotate i {
    color: #fff;
    font-size: 5em;
    height: auto;
    display: block;	
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}


}