/*
    This stylesheet features the follow elements
    1. Header Styles
    2. Footer Styles
    3. Navigation Styles

    We included them in an alternate CSS file to make it easier for you
    to easily remove the features that you find unnecessary for your page
/*

/*Header Styles*/

.header-dark{background-color:#0c1117; }
.header-dark .header-icon-1{color:#FFFFFF;}
.header-dark .header-icon-2{color:#FFFFFF;}
.header-dark .header-icon-3{color:#FFFFFF;}
.header-dark .header-icon-4{color:#FFFFFF;}
.header-dark .header-logo{background-image:url(https://guitarjamz.com/beginner_strumming/images/logo-header.png);}

.header-light{background-color:#ecf0f1; box-shadow:none!important; }
.header-light .header-icon-1{color:#1f1f1f;}
.header-light .header-icon-2{color:#1f1f1f;}
.header-light .header-icon-3{color:#1f1f1f;}
.header-light .header-icon-4{color:#1f1f1f;}
.header-light .header-logo{background-image:url('images/logo-header-dark.png');}

.header-fixed{
    position:fixed;
    height:60px;
    top:0px;
    left:0px;
    right:0px;
    z-index:99;
    -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
}

.header-icon-1, .header-icon-2, .header-icon-3, .header-icon-4{
    position:absolute;
    text-align:center;
    line-height:60px;
    height:60px;
    top:0px;
}

.header-icon-1{left:0px;    width:60px;}
.header-icon-2{left:60px;   width:40px; font-size:10px;}
.header-icon-3{right:60px;  width:40px; font-size:10px;}
.header-icon-4{right:0px;   width:60px;}

.header-logo{
    background-repeat: no-repeat;
    background-size:112px 16px;
    width:112px;
    height:16px;
    margin-top:22px;
    margin-left:auto;    margin-right:auto;
}
.logo-to-right{margin-right:20px;}
.logo-to-left{margin-left:20px;}

/*Footer Styles*/
.footer-dark{background-color:#0c1117;}
.footer-dark .footer-logo{background-image:url(../images/logo-header.png);}
.footer-dark .footer-strip{border-top:solid 1px rgba(255,255,255,0.05);}

.footer-light{background-color:#ecf0f1;}
.footer-light .footer-logo{background-image:url(../images/logo-header-dark.png);}
.footer-light .footer-strip{border-top:solid 1px rgba(0,0,0,0.1);}

.footer-logo{
    background-repeat: no-repeat;
    background-size:135px 20px;
    width:135px;
    height:20px;
    margin-left:auto;
    margin-right:auto;
}

.footer-content{
    padding-top:30px;
}

.footer-links a{
    font-size:13px;
    line-height:40px;
    width:50%;
    float:left;
    color:#666666;
}

@media(min-width:768px){
    .footer-links a{
        width:33.3%;   
    }
}

.footer-links a i{
    width:20px;
    text-align:left;
    color:#1f1f1f;
}

.footer .footer-strip{
    margin-bottom:0px;
    padding-bottom:20px;
    padding-top:20px;
}

.footer-logo{
    color:#FFFFFF;
    padding-top:40px;
    font-weight:800;
    font-family:'Raleway', sans-serif;
    text-align:center;
    font-size:24px;
}

.footer-text{
    text-align:center;
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
}

.footer-socials{
    width:285px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:40px;
}

.footer-socials a{
    width:40px;
    height:40px;
    float:left;
    line-height:40px;
    text-align:center;
    margin-left:4px;
    margin-right:3px;
}

.footer-strip{
    text-align:center;
    margin-bottom:15px;
    font-size:12px;
    padding-top:31px!important;
    padding-bottom:30px!important;
}

.footer-decoration{
    height:3px;
    width:50px;
    margin-left:auto;
    margin-right:auto;
    background-color:#e34e47;
    margin-bottom:20px;
}

/*Footer Menu*/

.footer-menu-dark{background-color:#0c1117;}
.footer-menu-dark a{color:#FFFFFF;}
.footer-menu-light{background-color:#ecf0f1;}
.footer-menu-light a{color:#1f1f1f;}
.footer-menu-item{border-bottom:solid 5px #34495e;}
.active-footer-item{border-bottom:solid 5px #27ae60;}

.footer-menu{
    position:fixed;
    z-index:99;
    bottom:0px;
    width:100%;
}

.over-footer-menu{
    bottom:75px!important;
}

.footer-clear{
    height:66px;
}

@media(max-width:600px){
    .footer-menu a{
        width:20%;
        float:left;
        height:65px;
        padding-top:10px;
    }
    
    .footer-tablet-item{display:none;}
}

@media(min-width:600px){
    .footer-menu a{
        width:10%;
        float:left;
        height:65px;
        padding-top:10px;
    }
}

.footer-menu a i{
    text-align:center;
    display:block;
    font-size:18px;
}

.footer-menu a em{
    display:block;
    text-align:center;
    font-size:12px;
    font-style:normal;
}

/*Sidebar*/

.sidebar-dark,
.sidebar-dark .submenu,
.sidebar-dark .submenu .menu-item{ background-color:#0e141b!important;}
.sidebar-dark .sidebar-logo{background-image:url(../images/logo-sidebar.png);}
.sidebar-dark .menu-item{color:#647282; background-color:#0c1117;}
.sidebar-dark .menu-item:hover{color:#FFFFFF!important; background-color:rgba(255,255,255,0.02)!important;}
.sidebar-dark .menu-item i:first-child{color:#2b343f;}
.sidebar-dark .menu-item .fa-angle-right{color:#505d6c;}
.sidebar-dark .menu-item .fa-circle{color:#232a33;}
.sidebar-dark .menu-number{background-color:#232a33;}
.sidebar-dark .active-item{color:#FFFFFF;}
.sidebar-dark .active-item i:first-child{color:#FFFFFF;}
.sidebar-dark .submenu a{border-left:solid 5px #2c3e50;   }
.sidebar-dark .sidebar-contact{background-color:#0c1117; padding-bottom:30px;}

.sidebar-light,
.sidebar-light .submenu,
.sidebar-light .submenu .menu-item{background-color:#ecf0f1!important;}
.sidebar-light .sidebar-logo{background-image:url(../images/logo-sidebar-dark.png);}
.sidebar-light .menu-item{color:#7d8185; background-color:#e7ebec; font-weight:500}
.sidebar-light .menu-item:hover{color:#000000!important; background-color:rgba(0,0,0,0.05)!important;}
.sidebar-light .menu-item i:first-child{color:rgba(0,0,0,0.7);}
.sidebar-light .menu-item .fa-angle-right{color:#505d6c;}
.sidebar-light .menu-item .fa-circle{color:rgba(0,0,0,0.5);}
.sidebar-light .menu-number{background-color:#232a33;}
.sidebar-light .active-item{color:#000000; font-weight:600;}
.sidebar-light .active-item i:first-child{color:#000000;}
.sidebar-light .submenu a{border-right:solid 5px rgba(0,0,0,0.2);   }
.sidebar-light .sidebar-divider{border-top:solid 2px #e7ebec!important; border-bottom:solid 2px #e7ebec!important;}
.sidebar-light input:focus, .sidebar-light textarea:focus{color:#1f1f1f!important;}
.sidebar-light input:hover, .sidebar-light textarea:hover{color:#1f1f1f!important;}
.sidebar-light .sidebar-contact{background-color:#e7ebec; padding-bottom:30px;}

.sidebar-header{
    padding-top:30px;
    padding-bottom:30px;
}

.no-sidebar-border *{
    border-left:none!important;
    border-right:none!important;
}

.sidebar-logo{
    background-repeat:no-repeat;
    width:182px;
    height:42px;
    background-size:182px 42px;
    margin-left:20px;
}

.submenu .sidebar-logo{
    margin-left:0px;
    height:90px; /* double the height of your logo image*/
    background-position:20px;
    width:100%;
}

/*Material Menu*/

.material-menu-dark .material-label{color:#cacaca;}
.material-menu-dark-background{background-color:rgba(0,0,0,0.8);}

.material-menu-light .material-label{color:#1f1f1f;}
.material-menu-light-background{background-color:rgba(255,255,255,0.9);}

.material-menu i{
    line-height:45px;
    text-align:center;
    border-radius:45px;
    width:45px;
    height:45px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13);
}

.material-menu a{
    position:fixed;
    z-index:999;  
}

.material-menu-right a{
    right:30px;
}

.material-menu-left a i{
    position:absolute;
    left:30px;
    margin-top:-45px;
}

.material-menu-left a em{
    position:absolute;
    width:auto;
    left:100px;
    margin-top:-40px;
    height:34px;
    line-height:20px;
    margin-left:-10px;
}

.material-menu-deploy{bottom:20px;}
.material-menu-close{bottom:20px; opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 175ms;}
.material-menu-1{bottom:80px;     opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 150ms;}
.material-menu-2{bottom:140px;    opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 125ms;}
.material-menu-3{bottom:200px;    opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 100ms;}
.material-menu-4{bottom:260px;    opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 75ms;}
.material-menu-5{bottom:320px;    opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 50ms;}
.material-menu-6{bottom:380px;    opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 25ms;}
.material-menu-background{        opacity:0; pointer-events:none; transition:all 250ms ease; transition-delay: 250ms;}

.mm-c{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 25ms;}
.mm-1{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 50ms;}
.mm-2{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 75ms;}
.mm-3{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 100ms;}
.mm-4{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 125ms;}
.mm-5{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 150ms;}
.mm-6{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 175ms;}
.mm-bg{opacity:1; pointer-events:all; transition:all 250ms ease; transition-delay: 0s}

.material-menu .fa-mobile{
    font-size:20px;
}

.material-label{
    margin-right:10px;
    padding-top:8px;
    padding-bottom:5px;
    border-radius:5px;
    font-style:normal;
    font-size:14px;
    font-weight:500;
}

.material-menu-background{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:998;
}

/*Header Menu*/

.header-menu-dark{ background-color:#0e141b; }
.header-menu-dark a{ color:#647282!important; }
.header-menu-dark a:hover{ background-color:rgba(255,255,255,0.05)!important; }
.header-menu-dark .active-header-item em, .header-menu-dark .active-header-item i:first-child{color:#FFFFFF!important;}

.header-menu-light{ background-color:#ecf0f1; }
.header-menu-light a{ color:#647282!important; }
.header-menu-light a:hover{ background-color:rgba(0,0,0,0.05)!important; }
.header-menu-light .active-header-item em, .header-menu-light .active-header-item i:first-child{color:#1f1f1f!important;}

.active-header-item i:last-child{
    color:#2ecc71;
}

.header-menu{
    border-top:solid 1px #e74c3c;
    -webkit-box-shadow: 0 5px 10px 2px rgba(0,0,0,0.2);
            box-shadow: 0 5px 10px 2px rgba(0,0,0,0.2);
    position:fixed;
    margin-top:60px;
    width:100%;
    z-index:9;
    max-height:447px;
    overflow:scroll;
    -moz-transform: translateX(0px) translateY(-500px);
    -webkit-transform: translateX(0px) translateY(-500px);
    -o-transform: translateX(0px) translateY(-500px);
    -ms-transform: translateX(0px) translateY(-500px);
    transform: translateX(0px) translateY(-500px);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.header-menu-active{
    -moz-transform: translateX(0px) translateY(0px);
    -webkit-transform: translateX(0px) translateY(0px);
    -o-transform: translateX(0px) translateY(0px);
    -ms-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.header-menu a{
    height:55px;
    line-height:55px;
    padding-left:20px;
    padding-right:20px;
}

.header-menu .fa-mobile{
    font-size:26px!important;
}

.header-menu a i:first-child{
    position:absolute;
    height:55px;
    line-height:57px;
    font-size:18px;
    width:55px;
    text-align:center;
    left:0px;
}

.header-menu a i:last-child{
    position:absolute;
    height:55px;
    line-height:55px;
    font-size:18px;
    right:28px;
    font-size:6px;
}

.header-menu a em{  
    font-size:13px;
    padding-left:35px;
    font-style:normal;
    color:#647282;
}

.close-header-menu i:last-child{
    color:#c0392b!important;
}

/*Modal Menu*/

.modal-menu-dark{ background-color:#0e141b; }
.modal-menu-dark a{ color:#647282!important; }
.modal-menu-dark .active-modal-item em, .modal-menu-dark .active-modal-item i:first-child{color:#FFFFFF!important;}
.modal-menu-dark-background{background-color:rgba(0,0,0,0.8);}
.modal-menu-dark a:hover{background-color:rgba(255,255,255,0.05);}

.modal-menu-light{ background-color:#ecf0f1!important; }
.modal-menu-light a{ color:#647282!important; }
.modal-menu-light .active-modal-item em, .modal-menu-light .active-modal-item i:first-child{color:#1f1f1f!important;}
.modal-menu-light-background{background-color:rgba(255,255,255,0.8);}
.modal-menu-light a:hover{background-color:rgba(0,0,0,0.05);}

.modal-menu-background{
    position:fixed;
    z-index:9999;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    opacity:0;
    pointer-events:none;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.active-modal-menu-background{
    opacity:1;
    pointer-events:all;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.modal-menu{
    background-color:#0e141b;
    -webkit-box-shadow: 0 0px 10px 2px rgba(0,0,0,0.2);
            box-shadow: 0 0px 10px 2px rgba(0,0,0,0.2);
    border-radius:10px;
    position:fixed;
    top:50%;
    max-height:440px;
    margin-top:-220px;
    width:300px;
    left:50%;
    margin-left:-150px;
    z-index:99999;
    overflow:scroll;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.active-modal-menu{
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.modal-menu a{
    color:#647282;
    height:55px;
    line-height:55px;
    padding-left:20px;
    padding-right:20px;
}

.modal-menu .fa-mobile{
    font-size:26px!important;
}

.modal-menu a i:first-child{
    position:absolute;
    height:55px;
    line-height:57px;
    font-size:18px;
    width:55px;
    text-align:center;
    left:0px;
}

.modal-menu a i:last-child{
    position:absolute;
    height:55px;
    line-height:55px;
    font-size:18px;
    right:28px;
    font-size:6px;
}

.modal-menu a em{  
    font-size:13px;
    padding-left:35px;
    font-style:normal;
    color:#647282;
}

.active-modal-item em, .active-modal-item i:first-child{
    color:#FFFFFF!important;
}

.active-modal-item i:last-child{
    color:#2ecc71;
}

.close-modal-menu i:last-child{
    color:#c0392b!important;
}

/*Circle Menu Landing Page*/
/*////////////////////////*/

.landing-background{background-image:url(../images/pictures/3.jpg);}

.landing-dark .landing-overlay{background-color:rgba(0,0,0,0.8);}
.landing-dark ul li a em{ color:#FFFFFF;}
.landing-dark .deco{ background-color:rgba(255,255,255,0.1)!important;}
.landing-dark .landing-header-logo{ color:#FFFFFF!important;}

.landing-light .landing-overlay{background-color:rgba(255,255,255,0.9);}
.landing-light ul li a em{ color:#000000;}
.landing-light .deco{ background-color:rgba(0,0,0,0.1)!important;}
.landing-light .landing-header-logo{ color:#000000!important;}

.landing-homepage ul {
    padding-left:20px;
    padding-right:20px;
}

.landing-homepage ul li:last-child{
    margin-bottom:40px;
}

.landing-homepage ul li{
    list-style:none;
    margin-bottom:20px;
}

.landing-homepage ul li{
    width:33.3%;
    float:left;
}

.landing-homepage ul li a{
    padding-top:10px;
}

.landing-homepage ul li a i{
    width:65px;
    height:65px;
    font-size:20px;
    line-height:65px;
    text-align:center;
    display:block;
    color:#FFFFFF;
    border-radius:65px;
    margin-left:auto;
    margin-right:auto;
    -webkit-box-shadow: 0 1px 2px 2px rgba(0,0,0,0.10);
            box-shadow: 0 1px 2px 2px rgba(0,0,0,0.10);  
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.landing-homepage ul li a i:hover{
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.landing-homepage ul li a em{
    display:block;
    font-size:14px;
    opacity:0.8;
    font-style:normal;
    text-align:center;
    padding-top:10px;
    font-weight:500;
}

.landing-homepage .fa-mobile{
    font-size:32px!important;
}

.landing-homepage #mynano{
    top:0px!important;    
}

@media(min-width:767px){
    .landing-homepage .deco{
        width:700px;
        margin-left:auto;
        margin-right:auto;
    }
    
    .landing-header{
        width:700px!important;
        margin-left:auto;
        margin-right:auto;
    }
        
    .landing-homepage ul {
        width:700px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    
    .landing-homepage ul li{
        margin-bottom:20px;   
    }
    
    .landing-homepage ul li a em{
        font-size:16px;   
    }
    
    .landing-homepage ul li a i{
        width:100px;
        height:100px;
        line-height:100px;
        font-size:250%;
        margin-bottom:0px;
    }
    
    .landing-homepage .fa-mobile{
        font-size:48px!important;
    }
    
    .landing-homepage .header{
        position:relative;
    }
    
    .landing-homepage .header-clear{
        height:30px;   
    }
}

.landing-header{
    width:100%;
    z-index:98;
    padding-left:30px;
    padding-right:30px;
    padding-top:20px;
    margin-bottom:50px;
}

.landing-header-logo{
    width:100px;
    height:30px;
    margin-top:5px;
    float:left;
    font-size:24px;
    font-weight:800;
}

.landing-header-icons{
    height:40px;
    padding-top:5px;
    padding-right:5px;
    width:125px;
    float:right;
    margin-bottom:25px;
}

.landing-header-icons a{
    float:right;
    width:30px;
    height:30px;
    margin-left:10px;
    border-radius:30px;
    line-height:20px;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.landing-header-icons a:hover{
    -moz-transform: scale(1.15,1.15)!important;
    -webkit-transform: scale(1.15,1.15)!important;
    -o-transform: scale(1.15,1.15)!important;
    -ms-transform: scale(1.15,1.15)!important;
    transform: scale(1.15,1.15)!important;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.landing-header-icons a i{
    font-size:10px;
    line-height:30px;
    width:30px;
    text-align:center;
    color:#FFFFFF;
}

.landing-footer-icons a, .landing-footer-icons a i{
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
}

.landing-footer-icons{
    width:265px;
    margin:0 auto;
}

.landing-wrapper{
    position:relative;
    z-index:999;
}


.landing-wrapper .deco{
    height:1px;
    width:100%;
    display:block;
    margin-bottom:20px;
    margin-top:0px;
    clear:both!important;
}

.landing-overlay{
    position:fixed;
    z-index:99;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
}

.landing-background{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:98;
    background-size:cover;
    background-position:50% 50%;
}

/*Glow Effect*/

.glow-menu i:last-child{
    color:#2cc36b!important;
}

.glow-menu i:last-child{
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1500ms;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1500ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 0.5; }
    50% { opacity: 0.1; }
    100% { opacity: 0.5; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 0.5; }
    50% { opacity: 0.1; }
    100% { opacity: 0.5; }
}

@keyframes blinker {  
    0% { opacity: 0.5; }
    50% { opacity: 0.1; }
    100% { opacity: 0.5; }
}