/* MAIN DIV */

.sq-side-menu {
	position: fixed;
   top: 0;
   left: 0;
   width: 170px;
   height: 100%;
   color: white;
   -moz-box-shadow: 1px -1px 4px rgba(0,0,0,0.2);
   -webkit-box-shadow: 1px -1px 4px rgba(0,0,0,0.2);
   box-shadow: 1px -1px 4px rgba(0,0,0,0.2);
   z-index: 100;
}
#sidebar-nav {
   left: -200px;
   transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -webkit-transition: all 0.4s ease-in-out;
}
.show-nav {
   left: 0px !important;
   transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -webkit-transition: all 0.4s ease-in-out;
}

.sq-side-menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.sq-side-menu div {
	/* Transform - Ease-in-out */
	-webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

.sq-side-menu a {
   color: white;
   text-decoration: none;
}

.sq-side-menu ul {
   height: 100%;
   overflow: hidden;
}

.sq-side-menu ul li {
   display: block;
   width: 500px;
	overflow:hidden;
	/*height:16.6667%;*/
	/* Transform - Ease-in-out */
	-webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

/* FIRST AND SECOND VIEWS */

.sq-side-menu .first,
.sq-side-menu .second {
   float: left;
   text-align: center;
   display: inline-table;
   vertical-align: middle;
   margin-left: 0;
   height: 100%;
   width: 170px;
   /* padding: 0 20px; */
   position: relative;
}

/* ONLY FOR FIRST VIEW CONTENT */

.sq-side-menu .first .content {
   font-size: 200%;
   display: table-cell;
   vertical-align: middle;
}

/* ONLY FOR SECOND VIEW CONTENT */

.sq-side-menu .second .content {
   font-size: 16px;
   font-size: 0px;
	font-family:"Open_Sans_L";
   display: table-cell;
   vertical-align: middle;
	/* Transform - Rotate */
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
}
.content > img {
   width: 60px;
   height: 60px;
}

/* LIST ITEMS HOVER STYLES */

.sq-side-menu ul li:hover .first { 
	margin-left: -210px 
}

.sq-side-menu ul li:hover .second .content { 
   font-size: 150% !important;
	/* Transform - Rotate */
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
}

/* ACTIVE MENU ITEM */

.sq-active .first { 
	margin-left: -170px !important 
}

.sq-active .second .content { 
	font-size: 150% !important;
	/* Transform - Rotate */
	-moz-transform: rotate(360deg) !important;
	-webkit-transform: rotate(360deg)!important;
   -o-transform: rotate(360deg)!important;
   -ms-transform: rotate(360deg)!important;
   transform: rotate(360deg)!important;
}

/* MENU ARROWS */

.arrow-left {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   position: absolute;
   left: 0;
   top: 40%;
}

.arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   position: absolute;
   right: 0;
   top: 40%;
}

/* BUTTONS COLOR SCHEMES */

/*Note: We have edited this module, 
in order to modify colors please use original COLOR SWATCH CLASSES present inside STYLE.CSS*/

/* COLOR 1 */
/*.color-1 .first { background: #263138 }
.color-1 .second { background: #1e262c }
.color-1:hover .first { background: #1e262c }
.color-1:hover .second { background: #263138 }
.color-1 .arrow-right { border-right: 10px solid #1e262c }
.color-1 .arrow-left { border-left: 10px solid #1e262c }*/

/* COLOR 2 */
/*.color-2 .first { background: #406155 }
.color-2 .second { background: #324c43 }
.color-2:hover .first { background: #324c43 }
.color-2:hover .second { background: #406155 }
.color-2 .arrow-right { border-right: 10px solid #324c43 }
.color-2 .arrow-left { border-left: 10px solid #324c43 }
*/
/* COLOR 3 */
/*.color-3 .first { background: #49693E }
.color-3 .second { background: #67815e }
.color-3:hover .first { background: #67815e }
.color-3:hover .second { background: #49693E }
.color-3 .arrow-right { border-right: 10px solid #67815e }
.color-3 .arrow-left { border-left: 10px solid #67815e }
*/
/* COLOR 4 */
./*color-4 .first { background: #99802E }
.color-4 .second { background: #bda782 }
.color-4:hover .first { background: #bda782 }
.color-4:hover .second { background: #99802E }
.color-4 .arrow-right { border-right: 10px solid #bda782 }
.color-4 .arrow-left { border-left: 10px solid #bda782 }*/

/* COLOR 5 */
/*.color-5 .first { background: #ff5755 }
.color-5 .second { background: #d84a49 }
.color-5:hover .first { background: #d84a49 }
.color-5:hover .second { background: #ff5755 }
.color-5 .arrow-right { border-right: 10px solid #d84a49 }
.color-5 .arrow-left { border-left: 10px solid #d84a49 }*/

/* COLOR 6 */
/*.color-6 .first { background: #A93536 }
.color-6 .second { background: #822f2f }
.color-6:hover .first { background: #822f2f }
.color-6:hover .second { background: #A93536 }
.color-6 .arrow-right { border-right: 10px solid #822f2f }
.color-6 .arrow-left { border-left: 10px solid #822f2f }*/

/* RESPONSIVE */

/* BELOW 768px */
@media only screen and (max-width: 768px) { 
   .sq-side-menu { width: 150px }
   .sq-side-menu .first,
   .sq-side-menu .second { width: 100px }
   .sq-side-menu ul li:hover .first { margin-left: -130px }
   .sq-side-menu ul li:hover .second .content { font-size: 120% }
   .sq-active .first { margin-left: -130px !important }
   .sq-active .second .content { font-size: 120% !important }
}

/* BELOW 480px */
@media only screen and (max-width: 480px) { 
   .sq-side-menu { width: 90px }
   .sq-side-menu .first,
   .sq-side-menu .second {
       width: 65px;
       padding: 0 10px;
   }
   .sq-side-menu ul li:hover .first { margin-left: -80px }
   .sq-side-menu .first .content { font-size: 150% }
   .sq-side-menu ul li:hover .second .content { font-size: 100% }
   .sq-active .first { margin-left: -80px !important }
   .sq-active .second .content { font-size: 100% !important }
   .arrow-left,
   .arrow-right { display: none }
}