body { margin: 0; padding: 0; } .content { margin: 0px 0px; } .venus-menu { margin: 0px 0px; } .venus-menu { width: 1920px; margin: 0; padding: 0; position: relative; float: left; font-family: 'Open Sans', sans-serif; list-style: none; background: #f9f9f9; box-shadow: 0 1px 3px #dedede; } .venus-menu li { display: inline-block; margin: 0; padding: 0; float: left; line-height: 20px; position: relative; } .venus-menu>li>a { padding: 5px 10px; font-size: 14px; color: #000; text-decoration: none; display: block; -webkit-transition: color 0.2s linear, background 0.2s linear; -moz-transition: color 0.2s linear, background 0.2s linear; -o-transition: color 0.2s linear, background 0.2s linear; transition: color 0.2s linear, background 0.2s linear; } .venus-menu li:hover>a, .venus-menu li.active a { background: #DFFFF8; color: #000; } .venus-menu>li>a i { color: #bababa; } .venus-menu>li:hover>a i, .venus-menu li.active a i { color: #fff; } .venus-menu ul, .venus-menu ul li ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; z-index: 99; width: 120px; } .venus-menu ul { top: 40px; left: 0; /* padding-top: 10px; */ border: 1px solid #d3d3d3; text-align:center; border-bottom:none; } .venus-menu>li>ul>li:first-child a:before { content: ''; position: absolute; bottom: 48px; left: 45%; margin-left: -48px; width: 0; height: 0; border-left: 8px solid rgba(255, 255, 255, 0); border-right: 8px solid rgba(255, 255, 255, 0); /* border-bottom: 8px solid #FFF3F5; */ border-bottom: 8px solid #B7B7B7; } .venus-menu>li>ul>li ul li:first-child a:before { content: ''; position: absolute; bottom: 16px; left: 45%; margin-left: -71px; width: 0; height: 0; border-top: 8px solid rgba(255, 255, 255, 0); border-right: 8px solid #FFF3F5; border-bottom: 8px solid rgba(255, 255, 255, 0); } .venus-menu ul li ul { top: 0; left: 100%; padding-left: 10px; } .venus-menu ul li { clear: both; width: 100%; /* border: none; */ border-bottom: 1px solid #d3d3d3; } #portfolio-group { margin: 40px 0px; } .overlay { background: url(images/overlay-bg.png) repeat; width: 150px; height: 120px; position: absolute; display: none; left: 0; top: 0; } .venus-menu ul li a { padding: 14px 20px; width: 100%; color: #000; font-size: 14px; text-decoration: none; display: inline-block; float: left; clear: both; /* background: #FFF3F5; */ background: #FFF; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; } .venus-menu ul li:hover>a { /* background: #f18d8f; */ background: #defff8; } .venus-menu>li>ul>li:first-child:hover a:before { /* border-bottom-color: #FFF3F5; */ border-bottom-color: #B7B7B7; } .venus-menu>li>ul>li ul li:first-child:hover a:before { border-right-color: #FFF3F5; } .venus-menu>li .indicator { position: absolute; color: #FFF3F5; top: 5px; right: 0px; font-size: 20px; -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .venus-menu>li:hover>.indicator { color: #fff; } .venus-menu ul>li .indicator { top: 10px; right: 8px; color: #fff; } .venus-menu i { line-height: 20px !important; margin-right: 6px; font-size: 20px; float: left; } .venus-menu>li.showhide { display: none; width: 100%; height: 46px; cursor: pointer; color: #777; border-bottom: solid 1px rgba(0, 0, 0, 0.1); background: #fff; } .venus-menu>li.showhide span.title { margin: 0px 0 0 20px; float: left; } .venus-menu>li.showhide span.icon { margin: 16px 20px; float: right; } .venus-menu>li.showhide .icon em { margin-bottom: 3px; display: block; width: 20px; height: 2px; background: #ccc; } .venus-menu li.search { float: right; } .venus-menu li.search form { margin: 13px 20px 0 0; } .venus-menu li.search form input.search { height: 26px; float: right; padding-left: 5px; padding-right: 5px; color: #777; outline: none; border: solid 1px #dedede; -o-transition: border .3s linear; -moz-transition: border .3s linear; -webkit-transition: border .3s linear; transition: border .3s linear; } .venus-menu li.search form input.search:focus { border-color: #FFF3F5; } .post-entry { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #EEE; } .zoom-out { -webkit-animation: zoomOut 600ms ease both; -moz-animation: zoomOut 600ms ease both; -o-animation: zoomOut 600ms ease both; animation: zoomOut 600ms ease both; } @ -webkit-keyframes zoomOut { 0%{ -webkit-transform: scale(.6); } 100%{ -webkit-transform : scale (1); } } @ -moz-keyframes zoomOut { 0%{ -moz-transform: scale(.6); } 100%{ -moz-transform : scale (1); } } @ -o-keyframes zoomOut { 0%{ -o-transform: scale(.6); } 100%{ -o-transform : scale (1); } } @ keyframes zoomOut { 0%{ transform: scale(.6); } 100%{ transform : scale (1); } } .slide-left { -webkit-animation: slide-left 600ms ease both; -moz-animation: slide-left 600ms ease both; -o-animation: slide-left 600ms ease both; animation: slide-left 600ms ease both; } @ -webkit-keyframes slide-left { 0%{ -webkit-transform: translateX(-2000px); } 100%{ -webkit-transform : translateX (0); } } @ -moz-keyframes slide-left { 0%{ -moz-transform: translateX(-2000px); } 100%{ -moz-transform : translateX (0); } } @ -o-keyframes slide-left { 0%{ -o-transform: translateX(-2000px); } 100%{ -o-transform : translateX (0); } } @ keyframes slide-left { 0%{ transform: translateX(-2000px); } 100%{ transform : translateX (0); } } @media only screen and (max-width: 768px) { .venus-menu li { display: block; width: 100%; } .venus-menu>li>a { padding: 13px 0 14px 20px; } .venus-menu>li.brand { display: none !important; } .venus-menu a { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .venus-menu ul, .venus-menu ul li ul { width: 100%; padding: 0; left: 0; border: none; position: static; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .venus-menu>li>ul>li:first-child a:before, .venus-menu>li>ul>li ul li:first-child a:before { border: none; } .venus-menu ul li { border-left: none; border-right: none; } .venus-menu ul li a { padding-top: 10px; padding-bottom: 10px; } .venus-menu ul>li>a { padding-left: 40px !important; } .venus-menu>li .indicator { top: 14px; right: 20px; font-size: 20px; } .venus-menu ul>li .indicator { top: 10px; right: 20px; } .venus-menu li.search form { margin: 12px 18px 0 18px; } .venus-menu li.search form input.search { width: 100%; margin-bottom: 12px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .venus-menu>li>ul>li>a { padding-left: 40px !important; } .venus-menu>li>ul>li>ul>li>a { padding-left: 60px !important; } .venus-menu>li>ul>li>ul>li>ul>li>a { padding-left: 80px !important; } }