Johndavidcrowe.com
/* CSS Documents */
/* ---------------------- HTML5 RESET ------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input
/* ---------------------- HELPER CLASS -------------------------- */
.clearfix:before, .clearfix:after
.clearfix:after
.clearfix
/* ------------------------- NOTE ------------------------------- */
#icontent .note
#icontent #main .note, #icontent.plugin .note
.note
/* ------------------------- MAIN ------------------------------- */
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body{
margin: 0;
padding: 0;
font-family:'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.4;
height: 100%;
color: #222;
background: #fff url('contentbg.png');
}
/* ---------------------- FONT TYPE ------------------------- */
@font-face {
font-family: 'GeogrotesqueRegular';
src: url('geogtq-rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GeogrotesqueThin';
src: url('geogtq-th-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GeogrotesqueUltraLight';
src: url('geogtq-ul-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*--------------------------------- */
h1, h2, h3, h4, h5, h6{
margin: 0 0 15px;
line-height: 1;
font-family:'GeogrotesqueUltraLight', Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
}
h1 {
font-family:'GeogrotesqueThin', Helvetica, Arial, sans-serif;
font-size: 100px;
padding: 2% 0 0;
color: #000;
}
h1.landing-header{
margin: 0;
padding: 0 0 2% 0;
color: #ffffff;
text-transform: uppercase;
}
h2{
font-size: 38px;
color: #000;
margin: 0 0 15px;
}
p
blockquote {
color: #666;
line-height: 1.2;
margin: 0 0 1.5em;
font-size: 18px;
}
a, a:link
a:hover
a img
img
.wsite-theme-light hr.styled-hr {
border-top: 1px solid #aaaaaa !important;
background: none;
}
.wsite-theme-dark hr.styled-hr {
border-top: 1px solid #f4f4f4 !important;
background: none;
}
::-moz-selection {
background-color: #87b4c1;
color: #fff;
}
::selection {
background-color: #87b4c1;
color: #fff;
}
div.paragraph ol, div.paragraph ol li
div.paragraph ul, div.paragraph ul li
.blog-sidebar h2
.blog-title a,.blog-comments a
/* ------------------------- LAYOUT ---------------------------------- */
#wrapper{
height: 100%;
width: 100%;
opacity: 0;
filter: alpha(opacity=00);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
-ms-transition: opacity .5s ease-out;
transition: opacity .5s ease-out;
}
#wrapper.loaded{
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
#icontent #wrapper
#main{
min-height: 100px;
height: 100%;
position: relative;
z-index: 1;
}
#icontent #main
#icontent.plugin #main
#main > section
#main .main-content{
margin: 0 0 0 250px;
max-width: 12500px;
padding: 40px 30px;
}
.sidebar-bg.content-bg #main .main-content
.content-bg #main .main-content{
background: url(contentbg.png);
}
.no-header #main .main-content{
padding: 40px 50px;
}
#icontent #main .main-content {
float: left;
width: 770px;
}
/* ------ Page Background ------ */
#site-bg{
position: fixed;
padding: 0;
margin: 0;
top: 0;
width: 100%;
height: 100%;
background: url('sidebar-background-layout-bg.jpg') no-repeat;
}
#icontent #site-bg {
position: absolute;
}
#site-bg.wsite-header,
#site-bg.wsite-background{
background: url('sidebar-background-layout-bg.jpg') no-repeat;
background-position: center top !important;
-webkit-background-size: 100% !important;
-moz-background-size: 100% !important;
-o-background-size: 100% !important;
background-size: 100% !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.sidebar-bg .wsite-header,
.sidebar-bg .wsite-background{
background: url('sidebar-background-layout-bg.jpg') no-repeat;
background-position: center top !important;
-webkit-background-size: 100% !important;
-moz-background-size: 100% !important;
-o-background-size: 100% !important;
background-size: 100% !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.content-bg .wsite-header,
.content-bg .wsite-background{
background: url('content-background-layout-bg.jpg') no-repeat;
background-position: center top !important;
-webkit-background-size: 100% !important;
-moz-background-size: 100% !important;
-o-background-size: 100% !important;
background-size: 100% !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-attachment: fixed !important;
}
#icontent.sidebar-bg .wsite-header, #icontent.content-bg .wsite-header,
#icontent.sidebar-bg .wsite-background, #icontent.content-bg .wsite-background{
background-position: center top !important;
-webkit-background-size: 100% !important;
-moz-background-size: 100% !important;
-o-background-size: 100% !important;
background-size: 100% !important;
background-attachment: fixed !important;
}
#site-bg.header-plugin{
background: url('default_header.jpg') no-repeat;
background-position: center top !important;
-webkit-background-size: 100% !important;
-moz-background-size: 100% !important;
-o-background-size: 100% !important;
background-size: 100% !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
/* -------------------------------- HEADER ---------------------------------- */
#header {
position: fixed;
left: 0;
bottom: 0;
top: 0;
width: 250px;
background: none;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
-ms-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all;
overflow: hidden;
z-index: 10;
border-right: solid 1px rgba(0,0,0,.15);
}
.sidebar-bg #header{
background: rgba(255,255,255,0.4);
border-right: solid 1px rgba(0,0,0,.15);
}
.sidebar-bg #header:hover{
background: rgba(255,255,255,0.9);
opacity: 1;
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
transition: 0.4s ease-out
}
#icontent #header {
z-index: 9;
position: absolute;
}
#icontent.plugin #header {
margin-top: 0;
}
#header .container {
position: absolute;
left: 25px;
top: 0;
padding: 0;
margin: 0;
height: auto;
width: 225px;
}
#header a{
border: none;
}
#header .logo{
margin: 0;
padding: 30px 25px 0 0;
position: relative;
left: auto;
top: auto;
text-align: center;
}
.wsite-logo {
width: 200px;
}
#header .logo a{
max-width: 200px;
display: block;
border: none;
text-decoration: none;
text-align: center;
}
#header .wsite-logo, #header .wsite-logo img, #header .wsite-logo span{
vertical-align: bottom !important;
max-width: 100%;
width: auto;
}
#header .address{
display: block;
font-size: 13px;
z-index: 1;
margin-right: 25px;
}
#icontent #header .address {
position: relative;
}
#header .address h3{
margin: 0 0 20px;
font-size: 26px;
}
#header .address a{
color: #000;
text-decoration: none;
}
#header .address a:hover
/* ------------------------------ MAIN NAV -------------------------------- */
#navigation {
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
line-height: 140%;
margin: 0 0 25px 0;
padding: 30px 0 0 0;
background: none;
text-transform: uppercase;
}
#navigation ul{
list-style: none;
}
#navigation li{
padding-right: 25px;
text-align: center;
}
#navigation li a{
display: block;
padding: 8px;
text-align: center;
text-decoration: none;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
-ms-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all;
}
#navigation a:hover, #navigation a:hover, #navigation #active a, #active a {
text-decoration:none;
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}
#wsite-menus .wsite-menu, #wsite-menus .wsite-menu {
border: solid 1px rgba(0,0,0,.15);
border-left: none;
}
#wsite-menus .wsite-menu li, #wsite-menus .wsite-menu li {
background: none;
}
#wsite-menus .wsite-menu li a, #wsite-menus .wsite-menu li a {
position: relative;
display: block;
background: rgba(255,255,255,0.8);
border: none;
text-decoration: none;
font-size: 14px;
font-weight: normal;
line-height: 1;
padding: 10px 5px;
color: #000;
zoom: 1;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}
/* --------------------- Social Icon ---------------------- */
.wsite-social
.wsite-social-item
.wsite-social-facebook, .wsite-social-facebook:active
.wsite-social-facebook:hover
.wsite-social-pinterest, .wsite-social-pinterest:active
.wsite-social-pinterest:hover
.wsite-social-twitter, .wsite-social-twitter:active
.wsite-social-twitter:hover
.wsite-social-linkedin, .wsite-social-linkedin:active
.wsite-social-linkedin:hover
.wsite-social-mail, .wsite-social-mail:active
.wsite-social-mail:hover
.wsite-social-rss, .wsite-social-rss:active
.wsite-social-rss:hover
.wsite-social-flickr, .wsite-social-flickr:active
.wsite-social-flickr:hover
.wsite-social-plus, .wsite-social-plus:active
.wsite-social-plus:hover
.wsite-social-vimeo, .wsite-social-vimeo:active
.wsite-social-vimeo:hover
.wsite-social-yahoo, .wsite-social-yahoo:active
.wsite-social-yahoo:hover
.wsite-social-youtube, .wsite-social-youtube:active
.wsite-social-youtube:hover
.social-frame
.social-frame div
#icontent .social-frame
#icontent .social-frame div
/* --------------------------- BUTTON ----------------------------- */
.wsite-button {
background: #191919 !important;
color: #fff !important;
border: none;
padding: 10px 20px 10px 5px;
}
.wsite-button.wsite-button-inner
.wsite-button:hover, .wsite-editor .wsite-button:hover,
.wsite-button:hover .wsite-button-inner,
.wsite-editor .wsite-button:hover .wsite-button-inner {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
border: none;
}
.wsite-button-inner{
display: block;
font-family:'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 400 !important;
font-style: normal;
border: none;
text-decoration: none;
background: transparent !important;
}
.wsite-button.wsite-button-large.wsite-button-highlight,
.wsite-button.wsite-button-small.wsite-button-highlight {
color: #000!important;
display: inline-block;
border: none;
background: #fff !important;
border: 1px solid #000;
}
.wsite-button.wsite-button-large.wsite-button-normal,
.wsite-button.wsite-button-small.wsite-button-normal {
color: #fff !important;
display: inline-block;
border: none;
background: #000 !important;
}
.wsite-button.wsite-button-large.wsite-button-normal,
.wsite-button.wsite-button-large.wsite-button-highlight,
.wsite-button.wsite-button-small.wsite-button-normal,
.wsite-button.wsite-button-small.wsite-button-highlight {
height: auto;
padding: 15px 17px 15px 3px;
}
.wsite-button.wsite-button-small.wsite-button-normal .wsite-button-inner,
.wsite-button.wsite-button-small.wsite-button-highlight .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-normal .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-highlight .wsite-button-inner{
height: auto;
text-align: center;
white-space: normal !important;
line-height: 140%;
}
.wsite-button.wsite-button-small.wsite-button-highlight:hover,
.wsite-button.wsite-button-large.wsite-button-highlight:hover,
.wsite-button.wsite-button-small.wsite-button-highlight:hover .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-highlight:hover .wsite-button-inner{
background: #ddd !important;
}
.wsite-button.wsite-button-small.wsite-button-normal:hover,
.wsite-button.wsite-button-large.wsite-button-normal:hover,
.wsite-button.wsite-button-small.wsite-button-normal:hover .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-normal:hover .wsite-button-inner{
background: #333 !important;
}
/* ----------------------------- FORMS ------------------------------ */
.wsite-form-label, .wsite-form-sublabel {
font: 13px/120% 'Open Sans', Arial ;
color: #888;
}
.wsite-form-field div.wsite-form-input-container .wsite-form-input{
background: #fff !important;
border: solid 1px #aaa;
padding: 12px 8px !important;
}
/* --------------------- PRODUCTS --------------------------- */
.product-block-inner a, .wsite-image a
.product-block
.product-title.element {
font-weight: 400 !important;
line-height: 105%;
}
.wsite-elements .product-block .product-title, .product-long .product-title
.wsite-elements .product-small.product .product-title, .product-small.product .product-title
.wsite-elements .product-large.product .product-title, .product-large.product .product-title
.wsite-elements .product-long.product .product-title, .product-long.product .product-title
/* ----------------------------- STORE ------------------------------ */
#wsite-com-product-buy #wsite-com-product-add-to-cart {
color: #ffffff!important;
display: inline-block;
background: #8cc100 url('cartbutton.png') right top no-repeat !important;
border: 1px solid #5d7902;
padding-right: 60px;
opacity: 1;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
}
#wsite-com-product-buy #wsite-com-product-add-to-cart:hover .wsite-button-inner{
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
background: none !important;
}
#wsite-com-product-buy #wsite-com-product-add-to-cart:hover{
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
background: #698e02 url('cartbutton.png') right top no-repeat !important;
border: 1px solid #415800;
}
#wsite-com-product-quantity-input {
background: #fff !important;
border: solid 1px #aaa;
border-radius: 3px;
padding: 7px !important;
}
.wsite-field {
background: #e4e4e3 url('dropdownarrow.png') right top no-repeat;
color: #444444;
padding-right: 2.5em;
border: 0;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: .5em;
margin: 0;
cursor: pointer;
}
.wsite-field:hover {
background: #e4e4e3 url('dropdownarrow-hover.png') right top no-repeat;
}
#wsite-com-featured-title {
font-size: 48px;
font-weight: 300;
}
/* ---------------------------- DD TAB ------------------------------------------ */
.button
.button a {
position:relative;
z-index:10;
text-align:center;
display:block;
cursor:pointer;
padding:10px 0;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
text-decoration: none;
white-space: nowrap;
}
.button a .arrow {
content:'';
position:absolute;
z-index:9;
left:50%;
bottom:0px;
width:0;
height:0;
margin-left:-12px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:12px solid #222;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
transform:translateY(0px);
}
.button.active a .arrow
#tabs_container {
width: 100%;
float: none;
text-align: center;
}
#tabs {
margin: 30px 0;
list-style: none;
-webkit-padding-start: 0;
}
#tabs li {
display: inline;
line-height: 400%;
background: none !important;
}
#tabs li.active
.tab-button a{
display:inline;
padding: 7px 18px;
}
.tab-button a .arrow
#tabs_content_container
#icontent .tab_content, #icontent .tab-content{
min-height: 300px;
border: 2px #ccc dashed;
margin-bottom: 40px;
}
#tab2, #tab3, #tab4, #tab5, #tab6
#icontent #tab2, #icontent #tab3, #icontent #tab4, #icontent #tab5, #icontent #tab6
/* ---------------------------------------------------------------------------------------/
CUSTOMIZATION AREA - HERE YOU CAN CUSTOMIZE SOME PROPERTIES OF THE THEME BELOW
/ -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------/
TAB STYLING
/ ------------------------------------------------------------------------------ */
/* Edit Tab Font Styling */
.button a, #tabs li a span.wsite-text{
font-weight: 500;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
color: #efefef;
}
/* Edit Tab Color */
.button a, #tabs li
/* Edit Tab Arrow Color */
.button a .arrow
/* Edit Tab Hover Color */
.tab-button .active a, #tabs li.active
/* Edit Tab Arrow Hover Color */
.desktop .button a:hover .arrow, .tab-button .active a .arrow
/* -------------------------------------------------------------------------------/
CUSTOMIZE NAVIGATION MENU STYLE PROPERTIES
/ ------------------------------------------------------------------------------ */
/* Change color of Main navigation Text here */
.sidebar-bg #navigation a /* Change font color for SIDEBAR BACKGROUND LAYOUT */
#navigation a /* Change font color for CONTENT BACKGROUND LAYOUT */
/* Change mouse over color of Main navigation Bar here for */
.sidebar-bg #navigation a:hover, #navigation a:hover, .sidebar-bg #navigation #active a, #active a /* Change font color for SIDEBAR BACKGROUND LAYOUT */
#navigation a:hover, #navigation a:hover, #navigation #active a, #active a /* Change font color for CONTENT BACKGROUND LAYOUT */
/* Change mouse over color of subnavigation bar here */
#wsite-menus .wsite-menu li a:hover,
#wsite-menus .wsite-menu li.weebly-nav-current a
/* Change navigation font style here */
#navigation /* Insert any font name here to change the font style of your navigation bar */
/* -------------------------------------------------------------------------------/
SITE TITLE - LOGO TEXT
/ ------------------------------------------------------------------------------ */
/* Change Site Title Logo Font Properties */
#wsite-title, h1.logo {
font-size: 44px;
font-family:'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 300;
}
/* Change Site Title Logo Font COLOR */
.sidebar-bg #wsite-title, h1.logo /* Change font color for SIDEBAR BACKGROUND LAYOUT */
#wsite-title, h1.logo /* Change site title font color for CONTENT BACKGROUND LAYOUT */
/* Change Site Title Logo Font HOVER COLOR */
.sidebar-bg #wsite-title:hover /* Change site title font hover color for SIDEBAR BACKGROUND LAYOUT */
#wsite-title:hover /* Change site title font hover color for CONTENT BACKGROUND LAYOUT */
/* ----------------------------------------------------------------------------
SIDEBAR BACKGROUND COLOR
------------------------------------------------------------------------------- */
.sidebar-bg #header
.sidebar-bg #header:hover
/* -------------------------------------------------------------------------------/
PLUGIN AREA - ADD YOUR PLUGIN CSS CODES BELOW
/ ------------------------------------------------------------------------------ */
/* plugin for index.html start HERE */
/* --------------------------------------------------------------------
/* Swiper */
.swiper-container {
width: 100%;
height: 100%;
}
#icontent .swiper-container
.arrow-left {
background: url(arrows.png) no-repeat left top;
position: absolute;
left: 290px;
top: 50%;
margin-top: -32px;
width: 28px;
height: 68px;
filter:alpha(opacity=60);
opacity: 0.6;
}
.arrow-right {
background: url(arrows.png) no-repeat left bottom;
position: absolute;
right: 2%;
top: 50%;
margin-top: -32px;
width: 28px;
height: 68px;
filter:alpha(opacity=60);
opacity: 0.6;
}
.arrow-left:hover, .arrow-right:hover{
opacity: 1;
filter:alpha(opacity=100);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.swiper-slide
.swiper-slide.slide1 {
background: url(slide1.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide2 {
background: url(slide2.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide3 {
background: url(slide3.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide4 {
background: url(slide4.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide5 {
background: url(slide5.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide6 {
background: url(slide6.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide7 {
background: url(slide7.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide.slide8 {
background: url(slide8.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.swiper-slide .content {
margin: 0 8% 0 350px;
max-width: 770px;
}
#icontent .swiper-slide .content-contianer
.swiper-slide .content-contianer
#icontent .swiper-container
#icontent_container
.pagination {
position: absolute;
z-index: 20;
left: 50%;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
/* --------------------------------------------------------------------
VIDEO BACKGROUND PLUGIN
---------------------------------------------------------------------*/
body.videobg-plugin{
background:#000000 url('load.gif') center center no-repeat;
background-attachment: fixed;
}
#videobg{
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-position: top center;
-webkit-background-size: 100% auto !important;
-moz-background-size: 100% auto !important;
-o-background-size: 100% auto !important;
background-size: 100% auto !important;
background-attachment: fixed !important;
background-position: top center !important;
}
#icontent #videobg
#icontent .videobg-plugin .content-contianer
.videobg-plugin .content-contianer
.videobg-plugin #main > section
#icontent #playlists
#playlists{
display:none;
bottom: 0;
position: fixed;
margin: 30px auto;
}
#playlists.box-right{
right: 50px;
text-align: right;
}
.playlist {
background: rgba(0,0,0,0.4);
display: inline;
padding: 20px;
margin: 0 auto;
}
.playlist:hover {
background: rgba(0,0,0,1);
}
a.playlist-btn {
color: white;
text-decoration: none;
}
@media all and (max-width: 1024px){
/* VIDEO SPLASH PAGE */
body.videobg-plugin
#videobg {
display:block;
background-position: center;
-webkit-background-size: auto 100% !important;
-moz-background-size: auto 100% !important;
-o-background-size: auto 100% !important;
background-size: auto 100% !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
#playlists
#big-video-wrap
}
@media all and (max-width: 1024px) and (orientation : portrait){
/* VIDEO SPLASH PAGE */
#videobg {
display:block;
background-position: center;
-webkit-background-size: auto 100% !important;
-moz-background-size: auto 100% !important;
-o-background-size: auto 100% !important;
background-size: auto 100% !important;
}
}
/* VIDEO BACKGROUND PLUGIN END */
/* -------------------------------------------------------------------------------/
WIDGET - ADD YOUR WIDGET CSS CODES BELOW
/ ------------------------------------------------------------------------------ */
/* -------------------------------------------/
IMAGE WIDGET HOVER CONTENT FONT STYLING
/ ------------------------------------------ */
/* Change hover content title color and font size */
.hover-img figcaption h3 {
color: #ffffff;
font-size: 22px;
}
/* Change hover content paragraph color and font size */
.hover-img figcaption p {
color: #ffffff;
font-size: 16px;
}
/* -------------------------------------------/
IMAGE WIDGET STYLE 4 CONTENT STYLEING
/ ------------------------------------------ */
/* Change content background color */
.hover-img .hover-img-content{
background: #fff;
}
/* Change content title font color & size */
.hover-img .hover-img-content h3 {
color: ;
font-size: ;
}
/* Change content paragraph font color & size */
.hover-img .hover-img-content p {
color: ;
font-size: ;
}
/* -------------------------------------------/
IMAGE WIDGET BUTTON COLOR
/ ------------------------------------------ */
/* Button for in Hover Content Area */
.hover-image-button {
color: #000;
background: #eeeeee;
border: 1px solid #ffffff;
}
.hover-image-button:hover {
color: #000;
background: #ffffff;
}
/* Button for in Style 4 Content BELOW image */
.hover-img-content .hover-image-button {
color: #000;
background: #ffffff;
border: 1px solid #484848;
}
.hover-img-content .hover-image-button:hover {
color: #000;
background: #eee;
}
/* ---------------- DO NOT EDIT ------------------------------------------------ */
.hover-img
.hover-img figure
.hover-img figure img
.hover-img figcaption
.orange
.cyan
.green
.blue
.lightblue
.palegreen
.violet
.yellow
.silver
.pink
.hover-img figcaption .caption-padding
.hover-img:hover figcaption
.hover-img .hover-img-content
.caption-padding h3
/* Style 1 */
.hover-img .style1 figure{
border: 2px #ffffff solid;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: 5px 5px 20px 5px;
}
/* Style 2 */
.hover-img .style2 figure{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: 5px 5px 20px 5px;
}
/* Style 3 */
.hover-img .style3 figure{
border: 6px solid #f1f1f1;
-webkit-box-shadow: 0 8px 10px -6px rgba(0,0,0,0.5);
-moz-box-shadow: 0 8px 10px -6px rgba(0,0,0,0.5);
box-shadow: 0 8px 10px -6px rgba(0,0,0,0.5);
}
/* Style 4 */
.hover-img .style4 {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: 5px 5px 20px 5px;
}
/* Hover Types */
/* ICON */
.hover-img figcaption.article .caption-padding{
background: url('article-icon.png') center center no-repeat;
}
.hover-img figcaption.image .caption-padding{
background: url('image-icon.png') center center no-repeat;
}
.hover-img figcaption.video .caption-padding{
background: url('video-icon.png') center center no-repeat;
}
.hover-img figcaption.info .caption-padding{
background: url('info-icon.png') center center no-repeat;
}
/* BUTTON */
.hover-image-button {
display: inline-block;
padding: 15px;
margin-top: 10px;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
-ms-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.hover-image-button:hover {
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-o-transition: .4s ease-out;
-ms-transition: .4s ease-out;
transition: .4s ease-out;
}
/* END OF IMAGE WIDGET */
/*---------------------------------------
DIVTAG CAROUSEL WIDGET
---------------------------------------*/
/* Edit Link Color */
.dtc-info a:link h3{
color: ;
}
/* Edit Link Hover Color */
.dtc-info a:hover h3{
color: ;
}
/* Edit Title Properties */
.dtc-slide h3{
color: ;
font-size: ;
}
/* Edit Title Properties */
.dtc-slide p{
color: ;
font-size: ;
}
/*---------------------------------------
DO NOT EDIT
---------------------------------------*/
.dtc_image_carousel {
padding: 15px 0;
position: relative;
margin: 0 15px;
}
.dtc_image_carousel img {
display: block;
width: 100%;
height: auto;
}
.dtc_image_carousel img a{
border: none;
}
.dtc_image_carousel img:hover {
filter:alpha(opacity=60);
opacity: 0.6;
transition-duration: 500ms;
-moz-transition-duration: 500ms;
-webkit-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
}
.dtc-slide{
margin: 10px;
float: left;
padding-bottom:20px;
}
.dtc-slide a{
text-decoration: none;
}
.dtc-slide a:hover{
text-decoration: none;
}
.dtc_image_carousel a.prev,
.dtc_image_carousel a.next {
background: url('dtc-icon.png') no-repeat transparent;
width: 45px;
height: 50px;
display: block;
position: absolute;
top: 85px;
}
.dtc_image_carousel a.prev
.dtc_image_carousel a.prev:hover
.dtc_image_carousel a.prev.disabled
.dtc_image_carousel a.next
.dtc_image_carousel a.next:hover
.dtc_image_carousel a.next.disabled
.dtc_image_carousel a.prev.disabled, .dtc_image_carousel a.next.disabled
.dtc_image_carousel a.prev span, .dtc_image_carousel a.next span
.icaroufredsel_wrapper .clearfix
.caroufredsel_wrapper
/*------- 1 -------*/
.dtc_image_carousel .style1 .dtc-slide {
border-radius: 3px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
background: white;
}
.dtc_image_carousel .style1 img {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.dtc_image_carousel .style1 .imgbg{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #000000;
}
.dtc_image_carousel .style1 .dtc-info{
margin: 15px;
}
/*------- 2 -------*/
.dtc_image_carousel .style2 .dtc-slide {
-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.35);
background: url('dtc-s2bg.png');
border: 8px white solid;
margin: 10px;
}
.dtc_image_carousel .style2 img {
margin-bottom: 10px;
}
.dtc_image_carousel .style2 .imgbg{
background: #000000;
margin: 15px;
}
.dtc_image_carousel .style2 .dtc-info{
margin: 15px;
}
/*------- 3 -------*/
.dtc_image_carousel .style3 .imgbg{
margin-bottom: 20px;
}
.dtc_image_carousel .style3 .dtc-info{
-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
background: url('dtc-s2bg.png');
padding: 15px;
}
/*------- 4 -------*/
.dtc_image_carousel .style4 .dtc-slide {
background: url('dtc-s4bg.png');
margin: 10px 0;
}
.dtc_image_carousel .style4 .imgbg{
margin: 20px;
}
.dtc_image_carousel .style4 h3{
margin: 10px 0 0 0;
}
.dtc_image_carousel .style4 h3,
.dtc_image_carousel .style4 p{
text-shadow: 1px 1px 1px white;
}
.dtc_image_carousel .style4 .dtc-info{
margin: 20px;
}
/*------- 5 -------*/
.dtc_image_carousel .style5 .dtc-slide {
-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.35);
background: #ffffff;
border: 1px #B5B5B5 solid;
border-radius: 5px;
margin: 10px;
}
.dtc_image_carousel .style5 img {
margin-bottom: 10px;
}
.dtc_image_carousel .style5 .imgbg{
background: #000000;
margin: 15px;
}
.dtc_image_carousel .style5 .dtc-info{
margin: 15px;
}
.dtc_image_carousel .style5 h3,
.dtc_image_carousel .style5 p{
text-align: center;
}
/*---------------------------------------
WIDGET END
---------------------------------------*/
/* -------------------------------------------------------------------------------/
SKIN - ADD YOUR SKIN CSS CODES BELOW
/ ------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------/
SPLASH PAGE - ADD YOUR SPLASH PAGE CSS CODES BELOW
/ ------------------------------------------------------------------------------ */
