/* Theme Name: Braxton Description: Braxton is the premier magazine theme that combines both form and function into one comprehensive Wordpress theme. This sleek, modern theme is retina-ready, fully-responsive and comes with four different ad units, including a custom wallpaper ad. Braxton is also translation-ready, fully-responsive, comes with over 600 Google fonts, a Featured Slider on each category page, infinite scrolling, lazy load, a "sticky" menu bar and sidebar, video/audio posts, post/page slideshows, super quick demo install and so much more! Author: MVP Themes Author URI: http://themeforest.net/user/mvpthemes Theme URI: http://themeforest.net/user/mvpthemes Version: 2.4 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */ html { overflow-x: hidden; } body { color: #444; font: normal 100% helvetica, arial, sans-serif; line-height: 100%; margin: 0px auto; padding: 0px; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { -webkit-backface-visibility: hidden; color: #111; } img { max-width: 100%; height: auto; } iframe, embed, object, video { max-width: 100%; } /************************************************ Hyperlinks ************************************************/ a, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active, a:focus { outline: none; } /************************************************ Layout ************************************************/ #site { float: left; width: 100%; } .right, .alignright { float: right; } .left, .alignleft { float: left; } .aligncenter { display: block; margin: 0 auto; } .section-div { border-bottom: 1px dotted #ccc; float: left; margin: 20px 0; width: 100%; } .lazy { display: none; } /************************************************ Featured Section ************************************************/ #featured-wrapper { background: #000; overflow: hidden; position: relative; width: 100%; } ul.featured-items { display: block; float: left; width: 100%; height: 400px; } ul.featured-items li { display: inline; float: left; overflow: hidden; position: relative; max-height: 400px !important; } ul.featured-items li img { float: left; opacity: 0.85; -moz-transition: opacity .4s linear; -ms-transition: opacity .4s linear; -0-transition: opacity .4s linear; -webkit-transition: opacity .4s linear; transition: opacity .4s linear; max-width: 660px; width: 660px; } ul.featured-items li:hover img { opacity: 0.6; } li.slide .video-button { top: 20px; left: 20px; width: 80px !important; height: 80px !important; } li.slide .video-button img { max-width: 100%; width: 100%; } li.slide:hover .video-button { opacity: 0.7; } .featured-text { float: left; padding: 0 9.487666034155598% 30px; position: absolute; bottom: 0; left: 0; text-align: center; width: 81.0246679316888%; } .featured-text h3, .featured-text h3 a, .feat1-main-text h3, .feat1-main-text h3 a { color: #fff; display: inline-block; font: 300 22px/22px 'Open Sans Condensed', sans-serif; margin-bottom: 10px; -moz-text-shadow: 2px 2px 10px #000; -ms-text-shadow: 2px 2px 10px #000; -o-text-shadow: 2px 2px 10px #000; -webkit-text-shadow: 2px 2px 10px #000; text-shadow: 2px 2px 10px #000; text-transform: uppercase; } .featured-text h2, .featured-text h2 a, .feat1-main-text h2, .feat1-main-text h2 a { color: #fff; float: left; font-weight: 400; line-height: 86%; margin-bottom: 10px; -moz-text-shadow: 2px 2px 10px #000; -ms-text-shadow: 2px 2px 10px #000; -o-text-shadow: 2px 2px 10px #000; -webkit-text-shadow: 2px 2px 10px #000; text-shadow: 2px 2px 10px #000; text-transform: uppercase; width: 100%; } .featured-text h2, .featured-text h2 a { font-size: 58px; } .featured-text h2.featured-small, .featured-text h2.featured-small a { font: 400 42px/40px 'Vidaloka', serif; text-transform: capitalize; } .featured-text h2 a:hover, .featured-text h3 a:hover { text-decoration: none; } .featured-excerpt { float: left; max-height: 0; overflow: hidden; -moz-transition: max-height .4s linear; -ms-transition: max-height .4s linear; -o-transition: max-height .4s linear; -webkit-transition: max-height .4s linear; transition: max-height .4s linear; width: 100%; } ul.featured-items li:hover .featured-excerpt { max-height: 200px; } .featured-excerpt p { color: #fff; float: left; font: 500 16px/26px 'Raleway', sans-serif; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; text-transform: uppercase; } .prev, .next { background: #fff; -moz-box-shadow: 0 0 15px -5px #000; -ms-box-shadow: 0 0 15px -5px #000; -o-box-shadow: 0 0 15px -5px #000; -webkit-box-shadow: 0 0 15px -5px #000; box-shadow: 0 0 15px -5px #000; font: 300 40px/40px 'Quicksand', sans-serif; margin-top: -35px; opacity: 0; position: absolute; top: 50%; padding: 15px 23px; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #featured-wrapper:hover .prev, #featured-wrapper:hover .next { opacity: 0.9; } .featured-shade { margin: 0 auto; position: relative; width: 0; height: 400px; } .left-shade, .right-shade { opacity: 0.8; position: absolute; top: 0; width: 660px; height: 400px; } .left-shade { background: url(images/fade-left.png) repeat-y left; left: -985px; } .right-shade { background: url(images/fade-right.png) repeat-y right; left: 329px; } .prev { left: -100px; } .next { right: -100px; } #featured-wrapper:hover .prev { left: 0; } #featured-wrapper:hover .next { right: 0; } /************************************************ iosslider ************************************************/ .iosSlider { position: relative; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; } .iosSlider .slider { width: 100%; height: 100%; } .iosSlider .slider .slide { float: left; width: 660px; height: 100%; } /************************************************ Navigation ************************************************/ #nav-wrapper { -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: 0 0 20px -10px #000; -webkit-box-shadow: 0 0 20px -10px #000; box-shadow: 0 0 20px -10px #000; float: left; position: relative; width: 100%; height: 54px; z-index: 2000; } .fixed { opacity: 0.8; position: fixed !important; -moz-transition: 0.5s opacity; -ms-transition: 0.5s opacity; -o-transition: 0.5s opacity; -webkit-transition: 0.5s opacity; transition: 0.5s opacity; } .fixed:hover { opacity: 1.0; } #nav-inner { margin: 0 auto; position: relative; width: 1000px; height: 54px; } #mobi-nav { border-right: 1px solid #ccc; display: none; float: left; margin-right: 10px; overflow: hidden; width: 74px; height: 54px; } #mobi-nav:hover, #mobi-nav select { cursor: pointer; } #mobi-nav select { background: url(images/menu-but.png) no-repeat 50% 50%; border: none; color: #111; float: left; padding-right: 74px; width: 0; height: 54px; -webkit-appearance: none !important; } #logo-small { float: left; line-height: 0; margin: 0 20px 0 10px; overflow: hidden; max-width: 210px; } #logo-small img { float: left; } #main-nav { float: left; position: relative; max-width: 706px; } #main-nav .menu, #main-nav .menu li { display: inline; float: left; position: relative; } #main-nav .menu li a { color: #111; float: left; font-size: 13px; font-weight: 600; line-height: 100%; padding: 21px 15px 20px; text-transform: uppercase; } #main-nav .menu-item-home a { background: none !important; color: #111 !important; } #main-nav .menu-item-home a:hover { color: #fff !important; } #main-nav .menu li a:hover, #main-nav .menu li.current-menu-item a { color: #fff; text-decoration: none; } #main-nav .menu li ul { background: #f5f5f5; -moz-box-shadow: 0 0 20px -10px #000; -ms-box-shadow: 0 0 20px -10px #000; -o-box-shadow: