/* Import Basic Files
================================================== */

@import url("font.css");                                 /* Custom Font */
@import url("base.css");                                 /* Reset & Basics */

/* Site Styles
================================================== */

/* common styles */
#container {
    width: 100%;
    margin: 0 auto;
    position: relative;
	overflow:hidden;
}

.logo, .preview, .content ul {
	opacity:0;
}

.content {
	width:460px;
	text-align:center;
	padding-top: 40px;
	overflow:hidden;
}

.logo {
	margin-bottom:20px;
	margin-top:-20%;
	display:block;
	-webkit-transition: 0;  
    -moz-transition: 0; 
    -ms-transition: 0; 
    -o-transition: 0; 
    transition: 0; 
}

.preview {
	margin-bottom:30px;
	display:block;
	-webkit-transition: 0;  
    -moz-transition: 0; 
    -ms-transition: 0; 
    -o-transition: 0; 
    transition: 0; 
}

.content ul {
	display: inline-block;
	margin-top:150px;
}

.content ul li {
	text-align:left;
}

.content ul li a {
	padding:20px 10px 20px 60px;
	display:block;
	margin-bottom:10px;
	min-width:150px;
	font-size:18px;
	border-radius:3px;
	-webkit-transition: all 0.3s ease-in;  
    -moz-transition: all 0.3s ease-in;  
    -ms-transition: all 0.3s ease-in;  
    -o-transition: all 0.3s ease-in;  
    transition: all 0.3s ease-in;
}



/* main styles */
#left-bg {
   background: #141414 url(../images/bg-left.png) repeat;
   position: fixed;
   width: 50%;
   height: 100%;
   top: 0;
   left: 0;
}

#left-side {
	float:left;
	width: 50%;
}

.left.content {
	float:right;
	margin-right: 80px;
}

.left.content ul li a {
    color:#f4f4f4;
}

.left.content ul li a:hover {
	color:#f4f4f4;
}

.left.content ul li a.webicon { background:#181818 url(../images/icons/multiple-white.png) no-repeat; background-position:7% 52%; }

.left.content ul li a.webicon:hover { background:#202020 url(../images/icons/multiple-white.png) no-repeat; background-position:7% 52%; }

.left .preview {
	margin-top:-10%;
}

/* =========== */

#right-bg {
   background: #fff url(../images/bg-right.png) repeat;
   position: fixed;
   width: 50%;
   height: 100%;
   top: 0;
   right: 0;
}

#right-side {
	float:right;
	width: 50%;
}

.right.content {
	float:left;
	margin-left: 80px;
}

.right.content ul li a {
    color:#3e3e3e;
}


.right.content ul li a:hover {
	color:#3e3e3e;
}

.right.content ul li a.webicon { background:#f4f4f4 url(../images/icons/multiple-black.png) no-repeat; background-position:7% 52%; }

.right.content ul li a.webicon:hover { background: #e4e4e4 url(../images/icons/multiple-black.png) no-repeat; background-position:7% 52%; }

.right .preview {
	margin-top:-10%;
}

/* #Media Queries
================================================== */

/* Smaller than standard 1024 (devices and browsers) */
@media only screen and (max-width: 1024px) {

.content {
	width:364px;
        padding-top:50px !important;
}

.right.content {
	margin-left: 57px;
}

.left.content {
	margin-right: 57px;
}

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.content {
	width:420px;
}


#left-bg, #right-bg {
	background:none;
}

#left-side {
	background: #fff url(../images/bg-left.png) repeat;
	padding-bottom:40px;
}

#right-side {
	background: #3e3e3e url(../images/bg-right.png) repeat;
	padding-bottom:40px;
}

#right-side, #left-side {
	float:none;
	width: 100%;
}	

.right.content {
	margin:0 auto;
	float:none;
}

.left.content {
	margin:0 auto;
	float:none;
}

.content {
	padding-top: 40px !important;
}

.logo {
	margin-bottom:20px !important;
}
	
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.content {
	width:260px;
}
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
.content {
	width:420px;
}


#left-bg, #right-bg {
	background:none;
}

#left-side {
	background: #fff url(../images/bg-left.png) repeat;
	padding-bottom:40px;
}

#right-side {
	background: #3e3e3e url(../images/bg-right.png) repeat;
	padding-bottom:40px;
}

#right-side, #left-side {
	float:none;
	width: 100%;
}	

.right.content {
	margin:0 auto;
	float:none;
}

.left.content {
	margin:0 auto;
	float:none;
}

.content {
	padding-top: 40px !important;
}

.logo {
	margin-bottom:20px !important;
}
	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	
.content {
	width:300px;
}
	
#left-bg, #right-bg {
	background:none;
}

#left-side {
	background: #fff url(../images/bg-left.png) repeat;
	padding-bottom:40px;
}

#right-side {
	background: #3e3e3e url(../images/bg-right.png) repeat;
	padding-bottom:40px;
}

#right-side, #left-side {
	float:none;
	width: 100%;
}	

.right.content {
	margin:0 auto;
	float:none;
}

.left.content {
	margin:0 auto;
	float:none;
}	

.preview img, .logo img {
	max-width:200px;
}

.content ul li a {
	min-width: 150px;
	max-width:150px;
	font-size:14px;
}

.content {
	padding-top: 40px !important;
}

.logo {
	margin-bottom:20px !important;
}
	
}