/*
Theme Name: Street Beats Drum School
Description: Custom theme for Street Beats Drum School
Version: 1.0
Author: Giant Media
*/
/* ### RESET ### */
html, body, div, span, h1, h2, h3, h4, p, a, img, strong, ol, ul, li, form, label, table, tr, th, td, iframe, dl, dt, dd { margin: 0; padding: 0; border: 0; background: transparent; }
*{ margin:0; } html, body { height:100%; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } a { outline:none; } a img { border: none; }
*+html .hLogo { display:inline; zoom:1;} .homeUsml img {behavior: url(PIE.htc);}
/* ### PAGE ### */
body { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; background:#464646; }
.wrapper { min-height:100%; height:auto!important; height:100%; margin:0 auto -400px auto; }
.push { height:400px; }
/* ### HEAD ### */
.pHead { width:100%; position:relative; background:#171717; z-index:50; margin:0 0 20px 0; }
 .hHome { height:580px;}
 .hInt { height:220px;}
 .hStrip { width:100%; background:url(images/tbl.png); height:95px; position:absolute; z-index:5; overflow:visible;}
  .hTop { top:0;}
  .hBot { bottom:0;}
 .sideLink { display:block; position:absolute; top:90px; right:0; width:157px; height:117px; background:url(images/book-lesson.png) no-repeat; z-index:10; }
  .sideLink span { display:none;}
 .hCanvas { width:970px; margin:0 auto; position:relative; }
  .pHeadL { width:436px; height:131px; position:absolute; top:10px; left:0; z-index:5; background:url(images/street-beats-drum-school-logo.png) top left no-repeat; }
   .pHeadL a { width:436px; height:131px; display:block; }
   .pHeadL span {display:none;}
  .ddsmoothmenu { position:absolute; top:45px; right:0; width:970px; z-index:10; height:15px; }
   .ddsmoothmenu ul { z-index:460; list-style-type:none; position:absolute; right:0; }
   .ddsmoothmenu ul li{ position:relative; float:left; display:inline; font-size:15px; height:15px; line-height:15px; padding:0; text-transform:uppercase; margin:0 0 0 25px;}
   .ddsmoothmenu ul li a{ display: block; text-decoration: none; color:#FFF; }
   * html .ddsmoothmenu ul li a{ /display: inline-block; }
   .ddsmoothmenu ul li a:hover, .ddsmoothmenu ul li a.selected {text-decoration:none; color:#FFF; font-weight:bold; }
   .ddsmoothmenu ul li ul{ position: absolute; left:0; display: none; visibility: hidden; width:160px; z-index:50; background:#807c6c; padding:0; height:auto; }
   .ddsmoothmenu ul li ul li{ display: list-item; float: none; margin:0!important; width:160px; height:auto!important; padding:0!important; font-size:13px!important; line-height:15px!important; }
   .ddsmoothmenu ul li ul li a{ width: 145px; padding:7px 5px 7px 10px; margin:0; height:auto; color:#fff; font-weight:normal; border-right:0; }
   .ddsmoothmenu ul li ul li a:hover {background:#59564b; color:#bbb6ae; }
   * html .ddsmoothmenu{ height: 1%;}
 .homeFeat { height:580px; z-index:0; width:100%; overflow:hidden; position:absolute; background:#CCC; top:0; } 
  .hFrame { width:970px; margin:0 auto; overflow:visible; height:580px; z-index:1; position:relative; }
  #slider {width:1950px; height:580px; background:url(images/loading.gif) no-repeat 50% 50%; z-index:1; position:absolute; left:-490px;}
  #slider img {position:absolute!important; top:0!important; left:0!important; display:none; z-index:1}
  #slider a {border:0; display:block;}
 .hTesti { padding-top:10px;}
  .hTesti p { text-align:center; font-style:italic; margin:0 0 5px 0; }
  .hTesti p.hTitle { font-style:normal; font-weight:bold; margin:0;}
/* ### HOME ### */
 .homeU { width:314px; margin:0 14px 0 0; }
  .homeU h1, .homeU h2 {font-size:30px; line-height:30px; margin:0 0 10px 0!important; padding:0!important; text-transform:uppercase; }
  .homeU h3 { font-size:18px; line-height:22px; margin:0 0 10px 0!important; }
  .homeU .img { width:314px; height:175px; background:#555; position:relative; z-index:1; margin:0 0 15px 0; }
   .homeU .img img { position:absolute; z-index:1; }
   .homeU .img .date { background:#363636; position:absolute; top:0; z-index:2; padding:10px; color:#FFF; font-weight:bold; }
  .homeU .vid { width:314px; background:#555; position:relative; z-index:1; margin:0 0 15px 0; }
   .homeU .vid .date { background:#363636; position:absolute; top:0; z-index:2; padding:10px; color:#FFF; font-weight:bold; }
  .homeU p { margin:0 0 16px 0; line-height:19px;}
/* ### BODY ### */
.pBody { padding:0; position:relative; margin:0 0 15px 0; }
 .pCanvas { width:970px; margin:0 auto; }
 .pBody a{ color:#FFF; text-decoration:none;}
 .pCol { margin:0 14px 0 0; }
 .pCol1 { width:68px; }
 .pCol2 { width:150px; }
 .pCol3 { width:232px; }
 .pCol4 { width:314px; }
 .pCol5 { width:396px; }
 .pCol6 { width:478px; }
 .pCol7 { width:560px; }
 .pCol8 { width:642px; }
 .pCol9 { width:724px; }
 .pCol10 { width:806px; }
 .pCol12 { width:970px; margin-right:0; float:none; }
  .pColpadR { padding-right:68px!important; }
/* ### CONTENT ### */
 .blkC h1, .blkC h2.home {font-size:30px; line-height:30px; margin:0 0 10px 0!important; padding:0!important; text-transform:uppercase; }
 .blkC h2 { font-size:24px; padding:20px 0 5px 0; line-height:28px; }
 .blkC h3 { font-size:20px; padding:5px 0; line-height:24px;}
 .blkC p { margin:0 0 16px 0; line-height:19px;}
 .blkC table { margin:0 0 18px 0; }
  .blkC table td { padding:4px 0;}
 .blkC ol { margin:0 0 30px 15px; }
 .blkC ul { margin:0 0 20px 10px; }
 .blkC ol li { margin:0 0 8px 10px; line-height:19px; list-style:decimal; }
 .blkC ul li { margin:0 0 8px 10px; line-height:19px; list-style:square; }
 .portU { width:232px; }
  .portU img { margin:0 0 8px 0;}
  .portU h3 {font-size:16px; line-height:16px; text-transform:uppercase; }
/* ### FOOT ### */
.pFoot { width:100%; height:400px; background:url(images/pFoot.png) top left repeat-x #171717; }
 .fCanvas { width:970px; margin:0 auto; font-size:14px; padding:15px 0 0 0; color:#FFF; position:relative;}
  .fCanvas .fLogo { width:338px; height:102px; background:url(images/footer-logo.png); margin:0 30px 0 0; }
  .fCanvas .fDeets { width:212px; margin:0 14px 0 0; }
  .fCanvas .fSocial { width:150px;}
   .fCanvas h3 {font-size:26px; text-transform:uppercase; margin:0 0 25px 0; }
   .fCanvas dt, .fCanvas dd { float:left; display:inline; margin:0 0 8px 0;}
   .fCanvas dt { width:95px}
   .fCanvas dd { width:137px;}
   .fCanvas p { margin:0 0 10px 0; line-height:18px;}
 .pFootSub { text-align:center; font-size:11px; text-transform:uppercase; padding:50px 0 0 0; }
  .pFoot a { color:#FFF; }
/* ### SUNDRIES ### */
 .MB0 { margin-bottom:0!important;}
 .MB5 { margin-bottom:5px!important;} 
 .MB10 { margin-bottom:10px!important;}
 .MB15 { margin-bottom:15px!important;}
 .MB20 { margin-bottom:20px!important;}
 .MB30 { margin-bottom:30px!important;}
 .MB40 { margin-bottom:40px!important;}
 .MB50 { margin-bottom:50px!important;}
 .MT30 { margin-top:30px!important;}
 .MR0 { margin-right:0!important;}
 .ML10 { margin-left:10px!important;}
 .PR50 { padding-right:50px!important;}
 .PT0 { padding-top:0!important;}
 .PT10 { padding-top:10px;}
 .PT20 { padding-top:20px!important;}
 .PT30 { padding-top:30px!important;}
 .PT50 { padding-top:50px;}
 .P20 { padding:20px;}
 .PL20 { padding-left:20px!important;}
 .posRel { position:relative;}
 .aCenter {text-align:center;}
 .aLeft { text-align:left;}
 .aRight { text-align:right!important;}
 .tItal { font-style:italic;}
 .noB {border:0!important;}
 .noPad { padding:0!Important;}
 .noMarg { margin:0!important;}
 .rightImg { margin:0 0 20px 30px;}
 .pagiLinks { padding:0 10px; width:290px; text-transform:uppercase; font-weight:bold;}
 .flLeft, .homeU, .footU, .pCol, .hLowerU, .alignleft { float:left; display:inline;}
 .flRight, .kImg, .rForm, .alignright { float:right; display:inline;}
 .linethrough { text-decoration:line-through;}
 .smlTxt { font-size:12px; font-style:italic; margin:0; text-align:right;}
 p.edLnk { margin:0!important; padding:0!important; line-height:11px!important; }
 a.editLink {color:#F00; font-weight:bold; font-size:11px; }
 a:hover.editLink {color:#900; text-decoration:underline; }
 .kImg { margin:0 0 15px 20px; font-size:10px; text-transform:uppercase;}
 .alignright { margin:0 0 15px 20px; }
 .alignleft { margin:0 20px 15px 0; }
 p.dateline, p.pCrumbs { font-size:11px; margin:0!important; padding:0 0 5px 0; text-transform:uppercase; font-weight:bold;}
 p.pCrumbs  { padding:0 0 30px 0!important; }
 .mainUL { padding:5px 0 0 0; margin:0 0 15px 0; clear:both; height:1px; border-bottom:1px solid #BBB; }
 .logoUL { padding-top:10px; margin:0 20px 15px 20px; clear:both; height:0; border-bottom:1px solid #BBB;}
 .sideUL { padding:15px 0 0 0; margin:0 0 15px 0; clear:both; height:1px; border-bottom:1px solid #BBB; }
 .portUL { margin:0 0 20px 0; clear:both; height:0; }
 .classifiedUL { padding:0!important; margin:0 0 10px 0!important; }
 #imageDetails { color:#333!important;}
 .smallTxt { font-size:10px; text-transform:uppercase; }
 .rForm { width:280px; margin:0 0 0 20px; font-size:11px; }
 .rForm form { width:280px; font-size:11px;}
 .rForm form p { margin:0 0 10px 0!important; line-height:12px!important; }
 .rForm input, .rForm textarea, .rForm select { background:#444; border:1px solid #777; padding:5px 5px 5px 10px; font-family: Arial, sans-serif; font-size:12px; color:#CCC; width:235px; margin:0!important; }
 .rForm input.half { width:110px; margin:0 5px 0 0!important; }
 .rForm input[type="submit"] { padding:4px 15px!important; width:90px!important; background:#777; border:1px solid #777; color:#FFF; font-weight:bold;}
 .rForm input.CAPTCHA { width:50px!important; display:inline-block!important; vertical-align:middle!important;}
 .rForm form img { margin:0 5px 0 0!important; display:inline-block!important; vertical-align:middle!important; }
 .rForm .wpcf7-use-title-as-watermark { color:#CCC!important;}
 .rForm span.wpcf7-not-valid-tip { color:#FFF;}
 .clearFl, .portBr { width: 100%; height:0; clear: both; }
 .portBr { margin:10px 0!important; display:block;}
 .homeUL { border-bottom:2px solid #FFF; margin:0 0 10px 0; padding:10px 0 0 0;}
 a.readMore { height:13px; font-size:13px!important; line-height:13px!important; background:url(images/readmore.png) top right no-repeat; display:block; color:#FFF!important; text-decoration:none!important; padding:1px 25px 1px 0; }
 p.rmP { line-height:16px; margin:0!important; text-align:right; }
 p.fancytext { font-size:15px; font-weight:bold; color:#00adee; line-height:20px;}
 .galleryBlk { width:222px; margin:0 14px 0 0;}
  .galleryBlk .img { width:222px; height:175px; margin:0 0 5px 0; background:#CCC; }
  .galleryBlk h3 { padding:0; font-size:14px; margin:0; }
  .galleryBlk h3 a { text-decoration:none!important;}
 .page_nav { width:500px; margin:0 auto; text-align:center; padding:0 0 10px 0; }
  .page_nav .page-numbers{ padding:4px 8px; margin:0px 4px; border:1px solid #8cb021; color:#8cb021;}  
  .page_nav .page-numbers:hover{ border:1px solid #8cb021; background:#8cb021; color:#FFF; text-decoration:none;}  
  .page_nav .current{ border:1px solid #8cb021; background:#8cb021; color:#FFF; }
 .mc-field-group { margin:0 0 10px 0;}
  .mc-field-group label { display:none;}
/* ### GALLERY ### */
.gallery { margin: auto; /* gallery clearing*/ overflow: hidden; width: 100%; }
.gallery .gallery-item {float:left; margin: 0 0 14px 0; text-align: center; display:inline; }
.gallery .gallery-icon { margin:0!important; padding:0!important; }
.gallery .gallery-icon img { padding:0; margin:0;}
.gallery .gallery-caption { font-size:11px; text-transform:uppercase; margin:3px 0 0 0;}
.gallery br { clear: both }
/* available Columns */
.GALLcol-2 { width: 50% }
.GALLcol-3 { width: 33.333% }
.GALLcol-4 { width: 25%; }
.GALLcol-5 { width: 20% }
.GALLcol-6 { width: 166.66px;}
.GALLcol-6R { width: 83.334%}
.GALLcol-7 { width: 14.285% }
.GALLcol-8 { width: 12.5% }
.GALLcol-9 { width: 11.111% }


/* Homepage: 2-column layout (3rd Tips&Videos column removed) */
.homeU { width: 478px !important; }
.homeU .img { width: 478px !important; }
.homeU .vid { width: 478px !important; }




/* ================================
   RESPONSIVE / MOBILE STYLES
   ================================ */

@media (max-width: 1024px) {
  .hCanvas, .pCanvas, .fCanvas, .hFrame { width: 94% !important; padding: 0 3%; }

  .pHeadL { position: static !important; width: 220px !important; height: 65px !important;
    background-size: contain !important; margin: 10px auto; }
  .pHeadL a { width: 220px !important; height: 65px !important; }

  .hHome, .hInt, .homeFeat, .hFrame, #slider { height: 260px !important; }
  #slider { width: 100% !important; left: 0 !important; background-size: cover !important; }
  #slider img { width: 100% !important; height: 260px !important; object-fit: cover !important;
    position: static !important; }

  .ddsmoothmenu { position: static !important; width: 100% !important; height: auto !important;
    text-align: center; padding: 10px 0; }
  .ddsmoothmenu ul { position: static !important; display: flex; flex-wrap: wrap;
    justify-content: center; }
  .ddsmoothmenu ul li { float: none !important; display: inline-block; margin: 4px 10px !important;
    height: auto !important; }
  .ddsmoothmenu ul li ul { position: static !important; visibility: visible !important;
    display: block !important; width: auto !important; background: transparent !important; }

  .sideLink { position: static !important; margin: 10px auto; }

  /* Homepage 2-column -> stacked on tablet/mobile */
  .homeU { width: 100% !important; margin: 0 0 20px 0 !important; }
  .homeU .img, .homeU .vid { width: 100% !important; height: 220px !important; }
  .homeU .img img { width: 100% !important; height: 100% !important; object-fit: cover !important;
    position: static !important; }

  .pCol, .pCol1, .pCol2, .pCol3, .pCol4, .pCol5, .pCol6, .pCol7, .pCol8, .pCol9, .pCol10, .pCol12 {
    width: 100% !important; float: none !important; margin: 0 0 20px 0 !important; }

  .fCanvas .fLogo, .fCanvas .fDeets, .fCanvas .fSocial {
    width: 100% !important; float: none !important; margin: 0 0 20px 0 !important; }
  .pFoot { height: auto !important; padding-bottom: 20px; }
  .fCanvas iframe { width: 100% !important; }

  .wrapper { margin-bottom: 0 !important; }
  .push { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 13px; }
  .hHome, .homeFeat, .hFrame, #slider { height: 200px !important; }
  #slider img { height: 200px !important; }
  .homeU .img, .homeU .vid { height: 180px !important; }
  .blkC h1, .homeU h1, .homeU h2 { font-size: 22px !important; line-height: 26px !important; }
  .ddsmoothmenu ul li { font-size: 12px !important; margin: 3px 6px !important; }
  .pHeadL { width: 170px !important; height: 50px !important; }
  .pHeadL a { width: 170px !important; height: 50px !important; }
}




/* ================================
   RESPONSIVE SLIDER FIX
   ================================ */

@media (max-width: 1024px) {

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .hCanvas,
    .hFrame,
    .pCanvas,
    .fCanvas {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .homeFeat {
        width: 100% !important;
        height: 260px !important;
        left: 0 !important;
        overflow: hidden !important;
    }

    .hFrame {
        height: 260px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    #slider {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 260px !important;
        overflow: hidden !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    #slider img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    #slider .nivo-main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .pHead.hHome {
        height: 260px !important;
    }
}


@media (max-width: 600px) {

    .homeFeat {
        height: 200px !important;
    }

    .hFrame {
        height: 200px !important;
    }

    #slider {
        width: 100% !important;
        height: 200px !important;
    }

    #slider img,
    #slider .nivo-main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .pHead.hHome {
        height: 200px !important;
    }
}