/******************** Theme Name: Cleanbeatz Theme URI: Description: Responsive theme Author: Tiffany Pender Version: 1.0 *********************/ /*************************************** Table of Contents **************************************** :: Shared Styles : Hide Text : Slabtext : Youtube Responsive : ToTop :: Navigation :: Hero - Responsive Slider :: Music :: Sound Cloud : Image hover :: About TP BigBeatz :: Pics :: Pic Gallery :: Discography :: Social :: Footer ****************************************/ /* -------------------------------------------------- Shared Styles -------------------------------------------------- */ @import url(http://fonts.googleapis.com/css?family=Chivo:400,900|Scada|Dosis:400,600|Ubuntu+Condensed|Vidaloka); /* --------------- GOOGLE FONTS USAGE --------------- font-family: 'Chivo', sans-serif; font-weight: 400; font-weight: 900; font-family: 'Scada', sans-serif; font-family: 'Dosis', sans-serif; font-family: 'Ubuntu Condensed', sans-serif; font-family: 'Vidaloka', serif; -------------------------------------------------- */ body {color:hsl(0, 0%, 40%); font-family:'Scada',sans-serif; font-size:11px; line-height:20px;} img {border: none;} .clearfix {clear:both;} .mcenter {margin: 0 auto;} h2 {font-family:'Scada',sans-serif; font-size:16px;} hr { border:0; height:1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); } ul {list-style: none;} .wopbkgrd {background: rgba(255, 255, 255, .4);} /* Hide text */ .hide_text {white-space:nowrap; overflow:hidden; text-indent:100%; display:block;} /* Slab Text - don't touch this-- taanaaananaa tanana na na don't touch this */ .slabtexted .slabtext{display:-moz-inline-box;display:inline-block;white-space:nowrap}.slabtextinactive .slabtext{display:inline;white-space:normal;font-size:1em !important;letter-spacing:inherit !important;word-spacing:inherit !important; letter-spacing:0 !important; word-spacing:0 !important;}.slabtextdone .slabtext{display:block;line-height:0.9;} /* YouTube responsive embed */ .video-container {position:relative; padding-bottom: 56.25%; padding-top:30px; height:0; overflow: hidden;} .video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width:100%; height:100%;} /* ToTop */ #toTop{z-index: 20; display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url(../img/ui.totop.png) no-repeat left top} #toTopHover{background:url(../img/ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity:0; -moz-opacity:0} #toTop:active, #toTop:focus{outline:none} /* -------------------------------------------------- Navigation -------------------------------------------------- */ #crown_logo {display:block; position:absolute; z-index:10; margin-left:3%; margin-top: -10px;} #crown_logo a {display:block; height:100%; width:100%; text-decoration:none;} .logged-in #navigation .top-bar {top:28px;} #navigation .current-menu-item {-moz-box-shadow: inset 0 -2px #1e9726; -webkit-box-shadow: inset 0 -2px #1e9726; box-shadow: inset 0 -2px #1e9726;} #navigation .top-bar .row .twelve.columns {text-align: center;} #navigation .top-bar ul {margin: 0 auto; display: inline-block;} #navigation .top-bar .toggle-nav {display: block; height: 40px; text-align: left; } #navigation .top-bar .toggle-nav img {transition: all 500ms ease-in-out 0s; -moz-transition: all 500ms ease-in-out 0s; -webkit-transition: all 500ms ease-in-out 0s; -o-transition: all 500ms ease-in-out 0s; -ms-transition: all 500ms ease-in-out 0s;} #navigation .top-bar .toggle-nav.open img {transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg);} #toggle-wrap {display: none;} @media only screen and (max-width: 960px) { #crown_logo {display: none;} #toggle-wrap {display: block;} #toggle-wrap h1 {font-family: 'Vidaloka',serif; margin: -54px auto 0; text-align: center; /*color: hsl(34, 8%, 60%);*/ color: #dbac2f; text-transform: uppercase;} } #bookus {height: 45px; padding: 10px; text-align: center; position:absolute; z-index:10; right: 3%; top: 0} #bookus a{display: block; height: 24px; line-height: 24px; padding: 1px 12px; text-decoration: none; text-transform: uppercase; font-size: 9px; color: gray;} #bookus a:hover {color: white; border: #333333 1px solid; padding: 0 11px;} /* -------------------------------------------------- Hero - Responsive Slider -------------------------------------------------- */ #hero .item {display: none;} /* Next / Previous Nav Buttons */ #hero .nextContainer {position: absolute; top:0; right:4%; width:100px; top:550px; z-index: 10;} #hero .prevContainer {position: absolute; top:0; left:4%; width:100px; top:550px; z-index: 10;} #hero .nextContainer .next {position: absolute; bottom: -10%; left: 0;} #hero .prevContainer .prev {position: absolute; bottom: -10%; left: 0;} #hero .item_nav_button {width: 90px; text-align:center; font-size: 12px; background: hsl(0, 0%, 7%); color: gray; border: none; outline: none; display: block; padding: 5px 20px; text-decoration: none; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; behavior: url(../img/assets/PIE.htc);} #hero .item_nav_button:hover {background:#1e9726; color:white;} .containerOuter {position:relative; margin-top:44px; left:0; right:0; height:600px; overflow:hidden; background: url('../img/assets/preloader.gif') #000 no-repeat center;} .container {width:100%; height:600px; margin:0 auto; overflow:visible;} .container .iosSliderContainer {position: absolute; top: 0; left: 0; width: 100%; height: 600px; margin: 0 0 0 0; overflow: visible;} .iosSlider {position:relative; top:0; left:0; overflow:visible; width:100%; height:600px;} .iosSlider .slider {width:10000px; height:100%;} .iosSlider .slider .item {float:left; width:1050px; height:100%; background-repeat: no-repeat; background-position: center center;} .iosSlider .slider .item .over_image {width:70%; margin: 0 auto; height: 100%;} .iosSlider .slider .item table {width: 100%; height: 100%; background: none; border: none; border-collapse: collapse;} .iosSlider .slider .item td {vertical-align: middle; text-align: center;} .iosSlider .slider .item td img {width: 100%;} .iosSlider .slider .item.slabstyle2 .content {width:80%; margin:200px auto 0 auto; display:block; } .iosSlider .slider .item.slabstyle2 .content .large {font-family:'Chivo',sans-serif; text-transform:uppercase; color:#fff; text-align:center; display: block; font-style:normal; font-weight:700;} .iosSlider .slider .item.slabstyle2 .content .small p {font-family:'Scada',sans-serif; font-size: 16px; text-transform:uppercase; color:#fff; text-align:center; display: block; font-style:normal; font-weight:normal; margin-top:50px;} .iosSlider .slider .item.slabstyle2 .download_itunes {background: url('../img/assets/itunes.png') no-repeat; height:40px; width:125px; margin:50px auto 0 auto; display:block;} .iosSlider .slider .item.slabstyle2 .listen_soundcloud {background: url('../img/assets/icon_soundcloud_white.png') no-repeat; height:125px; width:200px; margin:50px auto 0 auto; display:block;} .iosSlider .slider .item.slabstyle2 .listen_spotify {background: url('../img/assets/spotify.png') no-repeat; height:52px; width:51px; margin:50px auto 0 auto; display:block; } .iosSlider .slider .item.slabstyle2 .download_default a {width:130px; height:40px; padding-top: 10px; margin:50px auto 0 auto; display:block; background:#1e9726; color:white; text-align:center;} .iosSlider .slider .item.slabstyle2 .download_default a:hover {background:black;} .iosSlider .slider .item.slabstyle2 a {color:white;} .iosSlider .slider .item.slabstyle2 a:hover {color:#dbac2f;} .iosSlider .slider .item.slabstyle1 .content {background:rgba(0,0,0,0.6); padding:10px; margin:220px auto 0 auto; top:50%; width:85%; height:auto; display:block; } .iosSlider .slider .item.slabstyle1 .content .large {font-family:'Chivo',sans-serif; text-transform:uppercase; color:#fff; text-align:left; display: block; font-style:normal; font-weight:700; text-align:center;} .iosSlider .slider .item.slabstyle1 .content .small p {font-family:'Scada',sans-serif; font-size: 13px; text-transform:uppercase; color:rgba(255,255,255,0.6); text-align:left; display: block; font-style:normal; font-weight:normal; margin-top:5px; text-align:center;} .iosSlider .slider .item.slabstyle1 .content a {background:hsl(209, 76%, 58%); color:hsl(0, 0%, 100%); padding:2px 5px 2px 5px; text-decoration:none;} .iosSlider .slider .item.slabstyle1 .content a:hover, a:active, a:visited {background:hsl(209, 58%, 37%);} #slide1 {background: url(../img/hero/hero_8.jpg);} #slide2 {background: url(../img/hero/hero_11.jpg);} #slide2 .over_image {margin-left: 385px;} #slide2 .over_image .alignnone {width: 490px;} #slide3 {background: url(../img/hero/hero_9.jpg);} #slide4 {background: url(../img/hero/hero_10.jpg);} #slide4 .over_image {margin-left: 412px;} #slide4 .over_image .alignnone {width: 544px;} @media only screen and (max-width: 980px){ .alignnone {width: 60% !important;} } @media only screen and (max-width: 480px) { #slide2 .over_image {margin-left: auto;} #slide4 .over_image {margin-left: auto; background-color: rgba(255,255,255,0.7); filter:alpha(opacity=70);/*FOR IE8 AND EARLIER*/} } /* -------------------------------------------------- Music -------------------------------------------------- */ #music {text-align:center; padding: 70px 0 50px 0;} #music .content {border-bottom:4px double hsl(0, 0%, 82%); padding:50px 0 50px 0; line-height: 27px;} #music a {background:#1e9726; color:#FFF; padding:2px 5px; text-decoration:none;} #music a:hover, a:active, a:visited {background:hsl(44, 79%, 50%);} /* -------------------------------------------------- Sound Cloud -------------------------------------------------- */ #soundcloud {padding-bottom:30px;} #soundcloud iframe {height:555px; width: 100%; border: none;} #more_soundcloud {padding-bottom:50px;} #more_soundcloud p {font-size:11px; text-align:center; display:block;} #more_soundcloud p a {background:hsl(44, 79%, 50%); color:hsl(0, 0%, 100%); padding:2px 5px; text-decoration:none;} #more_soundcloud p a:hover, a:active, a:visited {background:hsl(124, 80%, 35%);} #more_soundcloud h2 {text-align:center; margin-bottom:15px; height:40px;} .columns dl.actionButtons:nth-of-type(1) {text-align: center;} dd button { font-size: 100%; color: #fff; padding: .5em 1.5em; border: 1px solid #999; background-color: #dbac2f; text-decoration: none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-font-smoothing: antialiased; -webkit-transition: .1s linear -webkit-box-shadow; -moz-transition: .1s linear -moz-box-shadow; -ms-transition: .1s linear box-shadow; -o-transition: .1s linear box-shadow; transition: .1s linear box-shadow; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } dd button:hover {background-color: #888888; cursor: pointer;} @media only screen and (max-width: 480px) { #more_soundcloud h2 {font-size: 40px;} } .actionButtons dd {display: inline-block;} /* Image Hover */ .view{cursor:default; float:left; overflow:hidden; position:relative; text-align:center; width:100%; margin-bottom:20px;} .view .mask,.view .content{height:100%; left:0; overflow:hidden; position:absolute; top:0; width:100%;} .view img.studio {display:block; position:relative;border: 10px solid #FFFFFF;-webkit-box-shadow: 0 8px 6px -6px black;-moz-box-shadow: 0 8px 6px -6px black;box-shadow: 0 8px 6px -6px black;} .view h2{color:#fff; font-size:40px; padding:10px; position:relative; text-align:center; top:45%; margin-top:-55px;} .view p {color:#fff; font-size:12px; font-style:italic; top:55%; margin-top: -60px; padding:10px 90px 20px; position:relative; text-align:center;} .actionButtons p {margin-top: 0;} .view .skip, .view .pause, .view .toggle {position:relative; background:#dbac2f; color:#fff; top:40%; margin-top:-10px; display:inline-block; padding:14px 24px; text-decoration:none; border: none; text-transform: uppercase; font-size: 14px; font-weight: normal;} .view .pause, .view .toggle {background: hsl(0, 0%, 44%); color: hsl(0, 0%, 63%);} .view .skip:hover, .view .pause:hover, .view .toggle:hover {background:#000; color:#fff; cursor: pointer;} .content .skip, .content .pause, .content .toggle {position:relative; background:#dbac2f; color:#fff; top:40%; margin-top:-10px; display:inline-block; padding:14px 24px; text-decoration:none; border: none; text-transform: uppercase; font-size: 14px; font-weight: normal;} .content .pause, .content .toggle {background: hsl(0, 0%, 44%); color: hsl(0, 0%, 63%);} .content .skip:hover, .content .pause:hover, .content .toggle:hover {background:#000; color:#fff; cursor: pointer;} .view a.info {position:relative; background:#dbac2f; color:#fff; top:45%; margin-top:-10px; display:inline-block; padding:14px 24px; text-decoration:none;} .view a.info:hover {background:#000; color:#fff;} .view .mask img.scdirect {width: 70px; position: relative; display: inline-block; top: 60%;} .view-first img{-moz-transition:all .2s linear; -ms-transition:all .2s linear; -o-transition:all .2s linear; -webkit-transition:all .2s linear; transition:all .2s linear;} .view-first .mask{-moz-transition:all .4s ease-in-out; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; filter:alpha(opacity=0); background-color:rgba(0,0,0,0.7); opacity:0;} .view-first h2{-moz-transform:translateY(-100px); -moz-transition:all .2s ease-in-out; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-transform:translateY(-100px); -ms-transition:all .2s ease-in-out; -o-transform:translateY(-100px); -o-transition:all .2s ease-in-out; -webkit-transform:translateY(-100px); -webkit-transition:all .2s ease-in-out; filter:alpha(opacity=0); transform:translateY(-100px); transition:all .2s ease-in-out; opacity:0;} .view-first p {-moz-transform:translateY(100px); -moz-transition:all .2s linear; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-transform:translateY(100px); -ms-transition:all .2s linear; -o-transform:translateY(100px); -o-transition:all .2s linear; -webkit-transform:translateY(100px); -webkit-transition:all .2s linear; filter:alpha(opacity=0); transform:translateY(100px); transition:all .2s linear; opacity:0;} .view-first:hover img {-moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);} .view-first a.info {-moz-transition:all .2s ease-in-out; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; filter:alpha(opacity=0); transition:all .2s ease-in-out; opacity:0;} .view-first:hover .mask {-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1;} .view-first:hover h2,.view-first:hover p,.view-first:hover a.info { -moz-transform:translateY(0px); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-transform:translateY(0px); -o-transform:translateY(0px); -webkit-transform:translateY(0px); filter:alpha(opacity=100); transform:translateY(0px); opacity:1;} .view-first:hover p {-moz-transition-delay:.1s; -ms-transition-delay:.1s; -o-transition-delay:.1s; -webkit-transition-delay:.1s; transition-delay:.1s;} .view-first:hover a.info {-moz-transition-delay:.2s; -ms-transition-delay:.2s; -o-transition-delay:.2s; -webkit-transition-delay:.2s; transition-delay:.2s;} /* -------------------------------------------------- About TP BigBeatz -------------------------------------------------- */ #about_tpbigbeatz {background-image: url('../img/assets/tpbigbeatz_repeat.jpg'); background-color: #161616; background-repeat: no-repeat; background-position: center bottom; height:900px; padding-top:8%;} #about_tpbigbeatz h3 {width:90%; margin:0 auto; font-family:'Dosis',sans-serif; text-transform:uppercase; text-align:center; font-style:normal; font-weight:normal; color:hsl(0, 0%, 63%); display:block;} #about_tpbigbeatz .content {font-size:13px; color:hsl(0, 0%, 40%); text-transform: uppercase; text-align:center; max-width:900px; padding:20px; margin:0 auto;} #about_tpbigbeatz a {background:hsl(124, 80%, 35%); color:hsl(0, 0%, 100%); padding:2px 5px 2px 5px; text-decoration:none;} #about_tpbigbeatz a:hover, a:active, a:visited {background:hsl(124, 79%, 50%);} @media only screen and (max-width: 480px) { #about_tpbigbeatz {height: 980px;} } /* -------------------------------------------------- Pics -------------------------------------------------- */ #pics {background: url('../img/news/news_background.png') hsl(20, 18%, 93%) repeat; height:1300px; padding-top:5%;} #pics h3 {width:90%; margin:0 auto; font-family:'Dosis',sans-serif; text-transform:uppercase; text-align:center; font-style:normal; font-weight:normal; color:hsl(0, 0%, 50%); display:block; border-top:1px #7e766d solid; border-bottom:1px #7e766d solid; padding:20px;} .inner_bevel {text-shadow: 0px -1px #7e766d, 1px 2px #fff;} /* Next / Previous Nav Buttons */ #pics .nextContainer {position: absolute; top:0; right:4%; width:100px; top:490px; z-index: 10;} #pics .prevContainer {position: absolute; top:0; left:4%; width:100px; top:490px; z-index: 10;} #pics .nextContainer .next {position: absolute; bottom: -10%; left: 0;} #pics .prevContainer .prev {position: absolute; bottom: -10%; left: 0;} #pics .item_nav_button {width: 90px; text-align:center; font-size: 12px; background: #1e9726; color: white; text-transform: uppercase; border: 2px solid white; outline: none; display: block; padding: 5px 20px; text-decoration: none; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; behavior: url(/assets/PIE.htc);} #pics .item_nav_button:hover {background:#dbac2f; color:white;} #pics .containerOuter {position:relative; margin-top:44px; left:0; right:0; height:800px; overflow:hidden; background: none;} #pics .container {width:100%; height:800px; margin:0 auto; overflow:visible;} #pics .container .iosSliderContainer {position: absolute; top: 0; left: 0; width: 100%; height: 800px; margin: 0 0 0 0; overflow: visible;} #pics .iosSlider {position:relative; top:0; left:0; overflow:visible; width:100%; height:800px;} #pics .iosSlider .slider {width:10000px; height:100%;} #pics .iosSlider .slider .item {float:left; width:710px; height:100%; padding: 0 10px;} #pics .iosSlider .slider .item .imageWrap {width: 100%; position: relative;} #pics .iosSlider .slider .item .imageWrap img {display: block;} #pics .iosSlider .slider .item .imageWrap .titleWrap {position: absolute; left: 0; bottom: 0; background:rgba(0,0,0,0.6); padding:15px 40px 15px 10px;} #pics .iosSlider .slider .item .imageWrap .titleWrap h4 {font-family: 'Scada', sans-serif; margin: 0; font-size: 25px; font-weight: bold; color: #fff; text-transform: uppercase;} #pics .iosSlider .slider .item .contentWrap {padding: 30px 30px 10px 30px; background-color: #ffffff; text-align: center;} #pics .iosSlider .slider .item .contentWrap .content p {font-size: 12px; color: #666;} #pics .iosSlider .slider .item .contentWrap .date {font-size: 10px; color: #333; border-top: 1px solid #ccc; padding: 10px 0 0;} #pics .iosSlider .slider .item .contentWrap .content {height: 100px;} #pics .iosSlider .slider .item .bottomShadow img {display: block;} #pics .iosSlider .slider .item .time-wrap {position: absolute; bottom: 0; width: 80%; margin: 0 10%;} #pics .iosSlider .slider .item .time-wrap time{color: #4d4d4d; text-align: center; width: 100%; font-family: 'Vidaloka', serif; display: block;} #pics .archive-container-wrap {position:absolute; bottom: 10px; text-align: center; width: 100%; min-width: 100%; z-index:5;} #pics .archive-container {margin: 0 auto;} #restart-news {width: 90px; text-align:center; font-size: 12px; background: #ccc; color: #666; border: none; outline: none; display: inline-block; padding: 5px 20px; text-decoration: none; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #restart-news:hover {background:#1e9726; color:white;} /* -------------------------------------------------- PIC GALLERY -------------------------------------------------- */ #pics .containerOuter, #pics .container, #pics .container .iosSliderContainer, #pics .iosSlider {height: 100%; text-align: center;} .picLayout1, .picLayout2 {width: 1400px; height: 100%; text-align: center;} .picLayout1 img, .picLayout2 img {border: 10px solid #FFFFFF; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;} .box { width: 330px; display: inline-block; vertical-align: top; margin-bottom: 12px; } /*.picLayout1 ul, .picLayout2 ul {} .picLayout1 ul li, .picLayout2 ul li {padding: 10px; float: left;} .picLayout1 ul li img, .picLayout2 ul li img {border: 10px solid #FFFFFF; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;} .picLayout1 ul li:nth-child(4) {float: right;} .picLayout1 ul li:nth-child(9) {} .picLayout2 {} .picLayout2 ul {} .picLayout2 ul li:nth-child(6) {float: right;} .picLayout2 ul li:nth-child(9) {}*/ /*** ORG PLACEHOLD.IT IMG SIZES **** .picLayout2 ul li:nth-child(1) img {width: 600px; height: 447px;} .picLayout2 ul li:nth-child(2) img {width: 200px; height: 200px;} .picLayout2 ul li:nth-child(3) img {width: 200px; height: 200px;} .picLayout2 ul li:nth-child(4) img {width: 200px; height: 200px;} .picLayout2 ul li:nth-child(5) img {width: 200px; height: 200px;} .picLayout2 ul li:nth-child(6) img {width: 440px; height: 447px;} .picLayout2 ul li:nth-child(7) img {width: 174px; height: 200px;} .picLayout2 ul li:nth-child(8) img {width: 174px; height: 200px;} .picLayout2 ul li:nth-child(9) img {width: 174px; height: 200px;} .picLayout2 ul li:nth-child(10) img {width: 200px; height: 200px;} ***/ /*** PLACEHOLD.IT IMG SIZES (min-width: 1111px;) and (max-width: 1360px;) **** .picLayout1 ul li:nth-child(1) img {width: 400px; height: 400px;} .picLayout1 ul li:nth-child(2) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(3) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(4) img {width: 440px; height: 635px;} .picLayout1 ul li:nth-child(5) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(6) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(7) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(8) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(9) img {width: 180px; height: 180px;} .picLayout1 ul li:nth-child(10) img {width: 180px; height: 180px;} ***/ /* Desktops and laptops 1 ---------- */ @media only screen and (min-width: 1140px) and (max-width: 1360px) { #pics {height: 1300px;} #pics .containerOuter, #pics .container, #pics .container .iosSliderContainer, #pics .iosSlider {height: 1000px;} /* .picLayout1, .picLayout2 {width: 1120px; height: 1000px;} */ /*.picLayout1 ul li:nth-child(2) img, .picLayout1 ul li:nth-child(3) img, .picLayout1 ul li:nth-child(4) img, .picLayout1 ul li:nth-child(5) img, .picLayout1 ul li:nth-child(6) img, .picLayout1 ul li:nth-child(7) img {width: 206px; height: 197px;} .picLayout1 ul li:nth-child(8) img, .picLayout1 ul li:nth-child(9) img {width: 310px; height: 320px;} .picLayout1 ul li:nth-child(10) img {width: 435px; height: 320px;} .picLayout2 ul li:nth-child(8) img, .picLayout2 ul li:nth-child(10) img {width: 405px; height: 220px;}*/ #pics .prevContainer, #pics .nextContainer {top: 700px;} } /* Desktops and laptops 1 ---------- */ @media only screen and (min-width: 961px) and (max-width: 1141px) { #pics {height: 1260px;} #pics .containerOuter, #pics .container, #pics .container .iosSliderContainer, #pics .iosSlider {height: 1010px;} /* .picLayout1, .picLayout2 {width: 950px; height: 1010px;} .picLayout1 ul li:nth-child(1) img {width: 640px; height: 430px;} .picLayout1 ul li:nth-child(2) img, .picLayout1 ul li:nth-child(3) img {width: 270px; height: 200px;} .picLayout1 ul li:nth-child(4) {float: left;} .picLayout1 ul li:nth-child(4) img, .picLayout1 ul li:nth-child(5) img {width: 320px; height: 310px;} .picLayout1 ul li:nth-child(6) img, .picLayout1 ul li:nth-child(7) img {width: 250px; height: 142px;} .picLayout1 ul li:nth-child(8) img, .picLayout1 ul li:nth-child(9) img {width: 250px; height: 180px;} .picLayout1 ul li:nth-child(10) img {width: 390px; height: 180px;} .picLayout2 ul li:nth-child(1) img {width: 450px; height: 250px;} .picLayout2 ul li:nth-child(2) img {width: 460px; height: 250px;} .picLayout2 ul li:nth-child(3) img, .picLayout2 ul li:nth-child(4) img, .picLayout2 ul li:nth-child(5) img {width: 180px; height: 200px;} .picLayout2 ul li:nth-child(6) img {width: 330px; height: 200px;} .picLayout2 ul li:nth-child(7) img {width: 250px; height: 460px;} .picLayout2 ul li:nth-child(8) img {width: 360px; height: 200px;} .picLayout2 ul li:nth-child(9) img {width: 280px; height: 200px;} .picLayout2 ul li:nth-child(10) img {width: 660px; height: 230px;} */ #pics .prevContainer, #pics .nextContainer {top: 700px;} } /* Desktops and laptops 1 ---------- */ @media only screen and (min-width: 641px) and (max-width: 960px) { #pics {height: 2050px;} #pics .containerOuter, #pics .container, #pics .container .iosSliderContainer, #pics .iosSlider {height: 1800px;} /* .picLayout1, .picLayout2 {width: 630px; height: 1800px;} .picLayout1 ul li:nth-child(1) img {width: 640px; height: 430px;} .picLayout1 ul li:nth-child(2) img, .picLayout1 ul li:nth-child(3) img {width: 295px; height: 200px;} .picLayout1 ul li:nth-child(4) {float: left;} .picLayout1 ul li:nth-child(4) img {width: 605px; height: 310px;} .picLayout1 ul li:nth-child(5) img {width: 320px; height: 310px;} .picLayout1 ul li:nth-child(6) img, .picLayout1 ul li:nth-child(7) img {width: 265px; height: 142px;} .picLayout1 ul li:nth-child(8) img, .picLayout1 ul li:nth-child(9) img {width: 290px; height: 180px;} .picLayout1 ul li:nth-child(10) img {width: 600px; height: 215px;} .picLayout2 ul li:nth-child(1) img {width: 610px; height: 400px;} .picLayout2 ul li:nth-child(2) img, .picLayout2 ul li:nth-child(3) img {width: 295px; height: 250px;} .picLayout2 ul li:nth-child(4) img, .picLayout2 ul li:nth-child(5) img, .picLayout2 ul li:nth-child(6) img {width: 190px; height: 200px;} .picLayout2 ul li:nth-child(7) img {width: 400px; height: 430px;} .picLayout2 ul li:nth-child(8) img, .picLayout2 ul li:nth-child(9) img {width: 190px; height: 200px;} .picLayout2 ul li:nth-child(10) img {width: 660px; height: 350px;} */ #pics .prevContainer, #pics .nextContainer {top: 700px;} } /* Desktops and laptops 1 ---------- */ @media only screen and (min-width: 481px) and (max-width: 640px) { #pics {height: 2550px;} #pics .containerOuter, #pics .container, #pics .container .iosSliderContainer, #pics .iosSlider {height: 2170px;} /* .picLayout1, .picLayout2 {width: 450px; height: 2170px;} .picLayout1 ul li:nth-child(1) img, .picLayout1 ul li:nth-child(6) img, .picLayout1 ul li:nth-child(10) img {width: 430px; height: 350px;} .picLayout1 ul li:nth-child(2) img, .picLayout1 ul li:nth-child(3) img, .picLayout1 ul li:nth-child(7) img, .picLayout1 ul li:nth-child(8) img, .picLayout1 ul li:nth-child(9) img, .picLayout1 ul li:nth-child(10) img {width: 205px; height: 200px;} .picLayout1 ul li:nth-child(4) {float: left;} .picLayout1 ul li:nth-child(4) img, .picLayout1 ul li:nth-child(5) img {width: 430px; height: 310px;} .picLayout2 ul li:nth-child(1) img, .picLayout2 ul li:nth-child(6) img, .picLayout2 ul li:nth-child(10) img {width: 430px; height: 300px;} .picLayout2 ul li:nth-child(2) img, .picLayout2 ul li:nth-child(3) img, .picLayout2 ul li:nth-child(4) img, .picLayout2 ul li:nth-child(5) img, .picLayout2 ul li:nth-child(8) img, .picLayout2 ul li:nth-child(9) img {width: 205px; height: 205px;} .picLayout2 ul li:nth-child(7) img {width: 430px; height: 430px;} */ #pics .prevContainer, #pics .nextContainer {top: 700px;} } /* Desktops and laptops 1 (min-width: 321px) and ---------- */ @media only screen and (max-width: 480px) { #pics {height: 3150px;} #pics .containerOuter, #pics .container, #pics .container .iosSliderContainer, #pics .iosSlider {height: 2800px;} /* .picLayout1, .picLayout2 {width: 320px; height: 2800px;} .picLayout1 ul li img, .picLayout2 ul li img {width: 300px; height: 250px;} */ #pics .prevContainer, #pics .nextContainer {top: 700px;} } /* Desktops and laptops 1 ---------- */ /*@media only screen and (max-width: 320px) { }*/ /* -------------------------------------------------- Discography -------------------------------------------------- */ #discography {background: url("../img/assets/shop_overlay.png") repeat scroll 0 0 #1E9726; /*height: 1450px;*/ height: 100%; padding-top: 3%;} #discography .columns {padding: 0;} #discography h3 {width:90%; margin:0 auto; font-family:'Dosis',sans-serif; text-transform:uppercase; text-align:center; font-style:normal; font-weight:normal; color: #222222; display:block; border-top:1px #efefef solid; border-bottom:1px #efefef solid; padding:20px;} #discography a.buy-button { background: none; color: #fff; padding: 10px 90px; background-color: #E31500; border-radius: 0.5em 0.5em 0.5em 0.5em; display: inline-block; font-size: 20px; outline: medium none; text-align: center; text-decoration: none; top: 20px;} #discography a.buy-button:hover {color: #fff; background-color: #000;} #discography ul {text-align: center; padding: 30px; list-style: none;} #discography ul li {font-size: 16px; color: #FFFFFF; padding: 5px 0 5px 0;} #discography ul li:nth-of-type(even) {color: #000000;} #discography dl {text-align: right; padding: 70px 10px 10px;} #discography dl dt {font-size: 18px; color: #dbac2f;} #discography dl dd {font-size: 16px; color: #ffffff;} #discography dl dd.expLast {padding-bottom: 10px;} #paypal_logo {position: absolute; z-index: 999; float: right; right: 40px; margin-top: 550px; background: url('../img/assets/paypal.png'); height: 16px; width: 104px;} @media only screen and (min-width: 641px) and (max-width: 960px) { #discography dl {width: 75%; text-align: center; margin: 0 auto; border-top: 2px solid #ffffff;} #discography .view img {width: 70%;} } @media only screen and (min-width: 481px) and (max-width: 640px) { #discography dl {width: 75%; text-align: center; margin: 0 auto; border-top: 2px solid #ffffff;} #discography .view img {width: 70%;} } @media only screen and (max-width: 480px) { #discography dl {width: 75%; text-align: center; margin: 0 auto; border-top: 2px solid #ffffff;} #discography ul li {font-size: 14px;} #discography .view img {width: 70%;} } /* -------------------------------------------------- Social -------------------------------------------------- */ #social {background-image: url('../img/assets/social_back11b.jpg'); text-align: center; background-repeat: no-repeat; background-position: center bottom; height: 970px;} #social h2 {color: #000000; font-size: 32px; text-transform: uppercase; font-weight: normal; line-height: 90px; margin-bottom: 20px; margin-top: 4%;} #social h3 {width:90%; margin:40px auto; font-family:'Dosis',sans-serif; text-transform:uppercase; text-align:center; font-style:normal; font-weight:normal; color: #222222; display:block; border-top:1px #efefef solid; border-bottom:1px #efefef solid; padding:20px;} #social img { opacity: 0.7;} @media only screen and (max-width: 960px) { #social {background: url('../img/assets/social_back11b.jpg')repeat-y; height: 100%;} #social img {width: 50%;} } /* -------------------------------------------------- Footer -------------------------------------------------- */ #footer {background-color: #000; height: 230px; position: relative; } #footer p {font-size: 11px;} #footer .row {padding: 70px 0;} #footer ul {list-style: none;} #footer ul li {display: inline; margin: 0 20px; font-size: 11px;} #footer ul li:first-child {margin-left: 0;} #footer ul li:last-child {margin-right: 0;} #footer a {color: #fff;} #footer .separator{text-align: center; width: 100%; position: absolute; top: -45px;} /* EI SLIDER*/ .ei-slider{ position: relative; width: 100%; max-width: 1920px; height: 600px; margin: 0 auto; } .ei-slider-loading{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index:999; background: rgba(0,0,0,0.9); color: #fff; text-align: center; line-height: 400px; } .ei-slider-large{ height: 100%; width: 100%; position:relative; overflow: hidden; margin: 0; } .ei-slider-large li{ position: absolute; top: 0px; left: 0px; overflow: hidden; height: 100%; width: 100%; text-align: center; } .ei-slider-large li img{ width: 100%; max-width: none; } .ei-title{ position: absolute; margin-right: 13%; top: 30%; text-align:right; } .ei-title h2, .ei-title h3{ text-align: right; } .ei-title h2{ color: #FFFFFF; font-size: 40px; line-height: 30px; text-transform: uppercase; text-align: center; } .ei-title h3{ color: #FFFFFF; font-family: 'Chivo',sans-serif; font-size: 100px; line-height: 70px; text-transform: uppercase; text-align: center; } .ei-title h4 { color: #F4A171; font-family: 'Vidaloka',serif; font-size: 370px; font-style: normal; font-weight: normal; line-height: 70px; margin-top: 60px; text-transform: uppercase; text-align: center; } .ei-slider-thumbs{ height: 25px; margin: 0 auto; position: relative; list-style: none; z-index:50; } .ei-slider-thumbs li{ position: relative; float: left; height: 100%; } .ei-slider-thumbs li.ei-slider-element{ top: 0px; left: 0px; position: absolute; height: 100%; z-index: 10; text-indent: -9000px; background: #000; background: rgba(0,0,0,0.9); } .ei-slider-thumbs li a{ display: block; text-indent: -9000px; background: #666 ; width: 100%; height: 100%; cursor: pointer; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px 1px rgba(255,255,255,0.5); -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px 1px rgba(255,255,255,0.5); -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; -ms-transition: background 0.2s ease; transition: background 0.2s ease; } .ei-slider-thumbs li a:hover{ background-color: #f0f0f0; } .ei-slider-thumbs li img{ position: absolute; bottom: 50px; opacity: 0; z-index: 999; max-width: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-box-reflect: below 0px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.3)) ); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ei-slider-thumbs li:hover img{ opacity: 1; bottom: 13px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } @media screen and (max-width: 830px) { .ei-title{ position: absolute; right: 0px; margin-right: 0px; width: 100%; text-align: center; top: auto; bottom: 10px; background: #fff; background: rgba(255,255,255,0.9); padding: 20px; } .ei-title h2, .ei-title h3{ text-align: left; font-size: 20px; color: #000; } .ei-title h2{ font-size: 20px; line-height: 24px; } .ei-title h3{ font-size: 30px; line-height: 40px; } .ei-title h4 { font-size: 30px; text-align: left; color: #000; } } /*-------------------------- PAGE -----------------------*/ .page {background: url('../img/news/news_background.jpg') 0 0 repeat;} .page .single {margin: 80px 0 250px; padding: 0; background-color: #fff; box-shadow: 0 1px 1px 0 #999; -moz-box-shadow: 0 1px 1px 0 #999; -webkit-box-shadow: 0 1px 1px 0 #999;} .page .single header {padding: 50px 0;} .page .single .content {padding: 60px 0;} .page .single figure {text-align: center;} .page .single header h1 {font-family: 'Vidaloka', serif; font-size: 46px; color: #252525; text-align: center; text-transform: uppercase; font-weight: normal;} .page .single .content {font-size: 13px; color: #898989; padding: 60px 10%;} /*---------------------------------- BLOG -----------------------------------*/ /*** Single ***/ /* Layout */ .post {background: url('../img/news/news_background.jpg') 0 0 repeat;} .post .single {margin: 80px 0 250px; padding: 0; background-color: #fff; box-shadow: 0 1px 1px 0 #999; -moz-box-shadow: 0 1px 1px 0 #999; -webkit-box-shadow: 0 1px 1px 0 #999;} .post .single header {padding: 50px 0;} .post .single .content {padding: 60px 0;} .post .single figure {text-align: center;} .post .single .tag {background-color: #d9d5d0; padding: 0 10%;} .post .single .tag ul {list-style: none; margin: 0; padding: 3px 0; } .post .single .tag ul li {display: inline-block; margin-right: 10px;} .post .single .tag ul li a {background-color: #b6ac9f; padding: 3px 15px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;} .post .single .comments {background-color: #f5f5f5; padding: 30px 0;} .post .single .comments .comment-form {padding: 0 10%;} .post .single .comments .comments-title {margin: 0; padding: 8px; border-bottom: 1px solid #fff;} .post .single .comments .comments-wrap {padding: 20px 10%;} .post .single .comments .comments-wrap ol {list-style: none;} .post .single .comments .comments-wrap ol li ol {padding-left: 40px; list-style: none;} .post .single .comments .comments-wrap ol li ul {padding-left: 40px; list-style: none;} .post .single .comments .comments-wrap .comment-wrap {border-bottom: 1px solid #d9d5d0;} .post .single .comments .comments-wrap .comment-body { padding: 20px 0; clear: both;} .post .single .comments .comments-wrap .comment-author .fn{color: #373737; font-size: 18px; font-style: normal; line-height: 18px; font-weight: normal;} .post .single .comments .comments-wrap .comment-meta a {text-transform: uppercase; color: #7d7d7d; font-size: 13px;} .post .single .comments .comments-wrap .reply {text-align: right; padding: 10px 0;} .post .single .comments .comments-wrap .comment-reply-link {display: inline-block; color: #fff; background-color: #cacaca; font-size: 12px; padding: 2px 20px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;} .post .single .comments .comments-wrap .comment-reply-link:hover {background-color: #1e9726;} .post .single .comments .comment-form form {margin: 0;} .post .single .comments .comment-form input[type="text"] {background-color: #efede9;} .post .single .comments .comment-form textarea {background-color: #efede9; height: 100px;} .post .single .comments .comment-form .form-submit {margin: 0; padding: 20px 0; text-align: center;} .post .single .comments .comment-form .form-submit input {background: none; border: none; cursor: pointer; background-color: #9c917c; padding: 5px 30px; color: #fff; font-family: 'Scada', sans-serif; font-size: 11px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;} .post .single .comments .comment-form .form-submit input:hover {background-color: #1e9726;} /* Typography */ .post .single header h1 {font-family: 'Vidaloka', serif; font-size: 46px; color: #252525; text-align: center; text-transform: uppercase; font-weight: normal;} .post .single header .meta {text-align: center; text-transform: uppercase; color: #898989; font-size: 13px;} .post .single header .meta a {color: #349ee8;} .post .single .content {font-size: 13px; color: #898989; padding: 60px 10%;} .post .single .tag ul li {color: #292929; font-size: 12px;} .post .single .tag ul li a {color: #dfdfdf; font-size: 12px;} .post .single .tag ul li a:hover {background-color: #1e9726;} .post .single .comments .comments-title {text-align: center; color: #b8b4af; font-size: 19px; text-transform: lowercase; font-weight: normal;} .post .single .comments #reply-title{color: #373737; font-size: 20px; margin: 10px 0 0;} .post .single .comments .comment-form .comment-notes {font-size: 12px; color: #373737;} .blog-area {background: url('../img/news/news_background.jpg') 0 0 repeat; padding: 50px 0 200px;} .blog-area .single {background-color: #fff; box-shadow: 0 1px 1px 0 #999; -moz-box-shadow: 0 1px 1px 0 #999; -webkit-box-shadow: 0 1px 1px 0 #999; padding: 5% 10%;} .blog-area .single .archive-title {font-family: 'Vidaloka', serif; font-size: 46px; color: #252525; text-align: center; text-transform: uppercase; font-weight: normal;} .blog-area .single .sub-category-nav {text-align: center;} .blog-area .single .sub-category-nav ul {list-style: none; padding: 0;} .blog-area .single .sub-category-nav ul li {display: inline; padding: 0 10px;} .blog-area .single .sub-category-nav ul li a {text-transform: uppercase; font-size: 15px; color: #6f6f6f;} .blog-area .single .sub-category-nav ul li a:hover {color: #349ee8;} .blog-area .post {background: none; margin-top: 50px; border-bottom: 1px solid #cfcfcf; padding-bottom: 30px;} .blog-area .post .entry-header {position: relative;} .blog-area .post .entry-header img {display: block;} .blog-area .post .entry-header h1{position: absolute; bottom: 0; left: 0; margin: 0; font-family: 'Vidaloka', serif; font-size: 26px; color: #fff; text-transform: uppercase; font-weight: normal;} .blog-area .post .entry-header h1 a {background-color:rgba(0,0,0,0.6); color: #fff; display: block; padding: 20px; } .blog-area .post .entry-header h1 a:hover {background-color:rgba(255,0,0,0.6);} .blog-area .post .entry-content {padding: 20px 0 30px; text-align: left; color: #898989; font-size: 13px;} .blog-area .post .entry-meta {text-align:left; text-transform: uppercase; font-size: 11px; color: #9c9c9c;} .blog-area .post .entry-meta time {color: #282828;} .blog-area .post .entry-meta a:hover {color: #1e9726;} .blog-area .control-buttons {clear:both; padding: 20px 0;} .blog-area .control-buttons a {color: #fff; background-color: #cacaca; padding: 5px 20px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;} .blog-area .control-buttons a:hover {background-color: #1e9726;} /*404 error page*/ .error404 {background: url('../img/assets/404bg.png') 0 0 repeat;} .error-page { padding: 10% 0; text-align: center;} .error-message {text-align: center; padding: 20px; background-color: rgba(0, 0, 0, 0.6); margin-top: 40px;} .error-message h1 {font-size: 230px; color: #fff;} .error-message a {color: #fff; text-transform: uppercase; font-size: 30px;} @media only screen and (max-width: 960px) { .error-message h1 {font-size: 130px; color: #fff;} }