/*  

You cannot edit main style.css file.

All your custom style settings and tweaks can be placed here.

Backup this file before theme update - so after update can be restored!
 
*/
/* @header
********************************************************************************************
********************************************************************************************/

.topnav{ overflow:hidden;}

#header{
	width:100%;
	padding:0;
	position: fixed !important;
	overflow: visible;
	top: 0;
	left: 0;
	margin:0;
	z-index: 9999;
	background:rgba(0,0,0,1) !important;
	}

.stuff,
#header_bottom{ width:100%; height:140px; bottom:0px; z-index:4;} /* slider + logo section height */

.stuff .flexhead{ height:110px; z-index:4;}

.logo_bottom img{ float:right; max-width:92%; margin-left:4%; margin-right:4%; margin-top: 20px; margin-bottom:0px; overflow:hidden;}

.stuff span.slidebg{ position: absolute; left:33%; bottom:0; width:100%; height:100%; background:#F50609; opacity:.65; z-index:4}
#servicesbox li p{ height:190px; overflow:hidden;}

#servicesbox li:hover{ background: #e1f0fa;}

.section_template h2 { color:#fff !important; text-shadow:1px 1px 0 #000}

.container_block{padding-top:100px !important; margin-bottom:40px !important;}


.logo_bottom{ position:relative; right:0; top:0; height:100%; overflow:hidden; background:rgba(0,0,0,.6); padding:0 0 0 0; opacity:1;  z-index:4;}

#header_bottom{ position:absolute; width:33%; bottom:0; left:0; overflow:hidden; z-index:4;}

a#logo_res{ display:none; margin:10px auto; width:100%;}

#header img{ float:left; margin:2px 0 4px 0; height:50px;}

.bigmenu h1 img{height:35px !important;  z-index:4;}

.body3 { background:rgba(0,0,0,.90) !important; }
/* @core
********************************************************************************************
********************************************************************************************/
.section>.container>h2.head:after {
    content: "";}

.section .container h2,
.section_template .container h2 { margin:15px 0 5px 0;padding:0 0 15px 0;letter-spacing:-0.01em !important;line-height:.8 !important;  }

h2.singletitle{ margin:20px 0; letter-spacing: -0.01em !important; line-height:1;}

/* @portfolio single 
********************************************************************************************
********************************************************************************************/

h2.itemtitle{ margin-bottom:30px; letter-spacing: -0.01em !important; line-height:.8; width:69%; float:left;}



.item_slider h2{
	margin:45px 0 10px 0 !important;
	padding:0 0 25px 0;
	width:24%;
	float:left;
	letter-spacing:-0.01px !important;
	line-height:.8 !important;
	font-size:35px !important;
	border-bottom:1px solid #000;
	}
	

/* @homefolio
********************************************************************************************
********************************************************************************************/
.item_carousel{
	overflow:hidden;
	position:relative;
	background:transparent;
	padding:0;
	margin-left:-1px;
	/*text-align:center;*/
	}
	
.item_height2{height:248px;}


/* @flex slider
********************************************************************************************
********************************************************************************************/
/* custom skins - widget */

.widgetflexslider .flex-direction-nav li a {width: 36px; height: 85px; top:82px; }


	
/* @footer
********************************************************************************************
********************************************************************************************/
#copyright {
	font-size: 12px !important; overflow:hidden; opacity:1 }
	
a.test {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px !important;
}
#navcontainer ul li a
{
text-decoration: none !important;;
display:inline !important;;
color: #ffffff  !important;
} 
#navcontainer ul li a:hover
{
color: #ff0000  !important;;
}

.foot a:link {color: #ffffff; text-decoration: none; font-style:none;}
.foot a:visited {color: #ffffff; text-decoration: none; font-style:none;}
.foot a:active {color: #ff0000; text-decoration: none; font-style:none;}
.foot a:hover {color: #ff0000 ; text-decoration: none; font-style:none;}

.will a:link {color: #ffffff; text-decoration: none; font-style:italic;}
.will a:visited {color: #ffffff; text-decoration: none; font-style:italic;}
.will a:active {color: #ff0000; text-decoration: none; font-style:italic;}
.will a:hover {color: #ff0000 ; text-decoration: none; font-style:italic;}
/* Remove navigation arrows on main home page slider
********************************************************************************************
********************************************************************************************/
	.mainflex .flex-direction-nav {display: none; !important; }
.flex-control-nav{ display:none !important;}


/* custom skins - homepage */
.mainflex_holder{ display:block; height:auto !important; min-height:100%; overflow:hidden; z-index:0;}
.mainflex_wrap{top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0;}
.mainflex{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0;}
.flex-viewport,
.mainflex ul{  height:100% !important;}
.mainflex ul.slides>li{ position:relative; height:100%;/* background:none;*/}
.mainflex ul.slides>li>a>img{
  width: 100%;
}

/*********************AUDIO PLAYER ************************/

#infobox { 
opacity:0; 
background:rgba(0,0,0,.0) !important; 
font-size:1.1em;
line-height:3; 
color:rgba(255,255,255,1); 
text-align: center; 
font-style:italic; 
font-weight:500 !important; 
position:absolute; 
width:350px; 
top:0px; 
left:100px; 
z-index:9;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.9) !important;
 /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 2em; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 2em; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 2em;
}
#infobox.show { 
-webkit-animation:fadein 1s both; 
animation:fadein 1s both; 
}
#infobox.hide { 
-webkit-animation:fadeout 1s both; 
animation:fadeout 1s both 
}

#infobox #now-playing {
    width:100%; 
    position:absolute; 
    top:7px; 
    left:0; 
    right:0; 
    text-align:center; 
    white-space:nowrap; 
    background-color:transparent;
}

#infobox #song-title {
    width:100%; 
    position:absolute; 
    top:35px; 
    left:0; 
    right:0; 
    text-align:center; 
    white-space:nowrap;
    background-color:transparent; 
    font-style:normal; 
    font-weight:500;
}


@-webkit-keyframes fadein { 
0% {opacity:0;
} 
100% {
opacity:1} 
}
@keyframes fadein { 
0% {opacity:0;
} 100% {opacity:1} 
}
@-webkit-keyframes fadeout {
0% {opacity:1;
} 100% {
opacity:0;
} 
}
@keyframes fadeout { 
0% {opacity:1;
} 100% {opacity:0;
} 
}


#audioplayer, #audioplayer * { 
-moz-box-sizing:border-box; 
box-sizing:border-box;
z-index:2;
}
#audioplayer { 
background-color:yellow;
width:100%; 
XXheight:17vw; 
XXmargin:0 auto;
XXXmargin:7vw auto; 
overflow:hidden; 
position:absolute; 
XXtop:63%; 
XXXtop:50vh;
top:62vh;
left:36vw; 
overflow:hidden;  
background-color:rgba(255,0,0,0.6) !important; 
border-left:1px solid rgba(0,0,0,0.4) !important; 
border-bottom:1px solid rgba(0,0,0,0.4) !important; 
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.7);
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 3em;
/* Firefox 1-3.6 */
-moz-border-radius: 3em; 
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 3em;
}

#audioplayer #toggle-wrap { 
display:block; float:left; 
height:100%; width:20%; 
padding:0 5%
}
/* padding affects button size */
#audioplayer .timeline-wrap { 
display:block; 
float:right; 
height:100%; 
width:80%; 
padding-right:5% 
}
#toggle, .play #toggle { 
background:url(/imgs/play.png) 50% no-repeat; 
background-size:contain; 
height:100%; width:100%; 
border:0; 
cursor:pointer; 
-webkit-tap-highlight-color:rgba(255,0,0,0);
z-index:999999; 
-webkit-filter: drop-shadow(-1px 1px 1px rgba(0,0,0,.3) );
filter: drop-shadow (-1px 1px 1px rgba(0,0,0,.3));  
}
.pause #toggle { 
background-image:url(/imgs/pause.png)
;z-index:999999;  
-webkit-filter: drop-shadow(-1px 1px 1px rgba(0,0,0,.3) );
filter: drop-shadow (-1px 1px 1px rgba(0,0,0,.3)); 
}
#toggle:hover, #toggle:focus { 
opacity:1;
}
#timeline { 
width:81%;
height:1em;
border-radius:0.75em; 
margin-top:-.5em; 
margin-left:-0.1em; 
top:49%; 
position:relative; 
background:rgba(255,255,255,.9); 
-webkit-transition:background-color .5s ease; 
transition:background-color .5s ease; 
border-top:1px solid rgba(0,0,0,.4) !important; 
border-right:1px solid rgba(0,0,0,.4) !important; } /* margin-top is half #playhead height */
#playhead { 
width:1em !important; 
height:1em !important; 
border-radius:50%; 
background:#000; 
filter: drop-shadow(1px 1px 1px #000); 
}

.play + .timeline-wrap #timeline { 
#fff) !important;
}
.pause + .timeline-wrap #timeline { 
#fff !important;
}

#dsp { width:50%; background-color:rgba(0,0,0,0); margin-top:6.5%; margin-left:68.5%; opacity:.9; font-size:.95em; text-align:center !important; font-weight:400 !important;letter-spacing:0px; color:#ffffff; cursor:pointer; }/*********** TRACKTIME ***********/

@media ( min-width:34em ) { 

#infobox { 
	padding:0em 
}
#audioplayer {
    max-width:34em; 
	height:6em; 
	margin:3em auto
}
#audioplayer #toggle-wrap { 
	padding:2% 5%;
} /* padding affects button size */
#timeline { 
    margin-top:-0.5em;
 } /* margin-top is half of #playhead height */
#playhead { 
	width:1.5em; 
	height:1.5em }

}



@media screen and (max-width:1075px) {
    #audioplayer { 
        top:50vh;
        left:36vw; 
    }
}

@media screen and (max-width:950px) {
    #audioplayer { 
        top:40vh;
        left:30vw; 
    }
}

@media screen and (max-width:805px) {
    #audioplayer { 
        top:35vh;
        left:20vw; 
    }
}

@media screen and (max-width:770px) {
    #audioplayer { 
        top:45vh;
        left:10vw; 
    }
}

@media screen and (max-width:740px) {
    #audioplayer { 
        top:60vh;
        left:10vw; 
    }
}

@media screen and (max-width:625px) {
    #audioplayer { 
        top:50vh;
        left:5vw; 
    }
}

@media screen and (max-width:590px) {
    #audioplayer { 
        top:50vh;
        left:0px; 
    }
}

@media screen and (max-width:569px) {
    #audioplayer { 
        top:130.5vh;
		left:3.5vh;
	    height:4em; 
    }
    #infobox { 
        font-size:.95em; 
        width:200px; 
        left:160px; 
    }
    #audioplayer #dsp {
        padding-left:3px;
        font-size:.85em;
        margin-top:11px;
    }
    #infobox #now-playing {
        top:2px; 
    }
    #infobox #song-title {
        top:21px; 
    }
}

@media screen and (max-width:543px) {
    #audioplayer { 
        top:48vh;
        left:0px; 
	    height:6em; 
    }
    #infobox { 
        width:300px; 
        left:100px; 
    }
}

@media screen and (max-width:480px) {
    #audioplayer { 
        top:48vh;
        left:0px; 
	    height:6em; 
    }
    #infobox { 
        width:270px; 
        left:90px; 
    }
}

@media screen and (max-width:450px) {
    #audioplayer { 
        top:48vh;
        left:0px; 
	    height:6em; 
    }
    #infobox { 
        width:260px; 
        left:85px; 
    }
}

@media screen and (max-width:400px) {
    #audioplayer { 
        top:46vh;
        left:0px; 
	    height:5em; 
    }
    #infobox { 
        font-size:.95em; 
        width:230px; 
        left:75px; 
    }
    #audioplayer #dsp {
        margin-top:19px;
    }
    #infobox #now-playing {
        top:5px; 
    }
    #infobox #song-title {
        top:33px; 
    }
}

@media screen and (max-width:350px) {
    #audioplayer { 
        top:43vh;
    }
    #infobox { 
        font-size:.95em; 
        width:230px; 
        left:75px; 
    }
}

@media screen and (max-width:321px) {
    #audioplayer { 
        top:55vh;
	    height:4em; 
    }
    #infobox { 
        font-size:.80em;
        width:200px; 
        left:60px; 
    }
    #audioplayer #dsp {font-size:.75em; position:relative;
left:-8px; 
        margin-top:9px;
		
    }
    #infobox #now-playing {
        top:-3px; 
    }
    #infobox #song-title {
        top:24px; 
    }

}


</style>

<!--[if IE 9]>
<style>
#infobox { opacity:1; display:none }
#infobox.show { display:block }
#infobox.hide { display:none }
</style>
<![endif]-->

<!--[if lte IE 8]>
<style>
#infobox, #audioplayer { display:none }
</style>
<![endif]-->

@media only screen and (max-width: 770px) {
.switcher {
	margin-top:35% !important;
}
}

@media only screen and (max-width: 770px) {
.section, .section_template {
    background-attachment: scroll !important;
    background-position: 50% 0 !important;
}
}
.section, .section_template {
	
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto !important;
}