/*------------------------------------------------------------------
[Table of contents]

0. CSS Reset
1. Basic Styles
2. Typography
3. Margin Bottom Sets
4. Padding Sets
5. Spacers Sets
6. Site Structure & Appearance
7. Responsive Media Queries
8. Music Player
------------------------------------------------------------------*/


/*===========================================================================================
1. Basic Styles
===========================================================================================*/
h7{
    
	letter-spacing:1px;
    font-size: 20px;
}

h8{
	display:inline-block;
	letter-spacing:1px;
	font-weight:400;
	font-size:14px;
}

h8 a{
    color:#3bafda;
}

h8 a:hover{
	color:#333;
}

.featured-block figure, .flexslider, .media-box, .page-header{
    background-color: #dddddd;
}
/*===========================================================================================
6. Site Structure & Appearance
===========================================================================================*/

/*     -INDEX- SLIDE SHOW TITLES / DROP SHADOW & OUTLINE    */
.flex-caption strong{
    text-shadow:
        /*  OUTLINE  */
        1px 0px 0px #242424,
        -1px 0px 0px #242424,
        0px 1px 0px #242424,
        0px -1px 0px #242424,
        1px 1px 0px #242424,
        -1px -1px 0px #242424,
        1px -1px 0px #242424,
        -1px 1px 0px #242424,
        /*  DROP SHADOW  */
        #000000 0.15em 0.15em 0.2em;
}

.flex-caption p{
    font-size: 20px;
    text-shadow:
        /*  OUTLINE  */
        1px 0px 0px #242424,
        -1px 0px 0px #242424,
        0px 1px 0px #242424,
        0px -1px 0px #242424,
        1px 1px 0px #242424,
        -1px -1px 0px #242424,
        1px -1px 0px #242424,
        -1px 1px 0px #242424,
        /*  DROP SHADOW  */
        #000000 0.1em 0.1em 0.2em;
}

/*     - All PAGE TITLES- / DROP SHADOW & OUTLINE    */
.page-header h2{
    text-shadow:
        /*  OUTLINE  */
        1px 0px 0px #242424,
        -1px 0px 0px #242424,
        0px 1px 0px #242424,
        0px -1px 0px #242424,
        1px 1px 0px #242424,
        -1px -1px 0px #242424,
        1px -1px 0px #242424,
        -1px 1px 0px #242424,
        /*  DROP SHADOW  */
        0.1em 0.1em 0.2em #000000;
}

/*    -All Pages TESTIMONIALS- / DROP SHADOW'S    */
.grid-item-inner{
    -webkit-box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.6);
    box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.6);
}

/******************************************************************************************/
/*    -Index- 3 Pillars Color    */
.featured-block figure{
    background-color: #ffa823;
}
.featured-block figure img{
	position: relative;
	display: block;
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.featured-block:hover figure img{
	opacity:.75;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

/******************************************************************************************/
/*     -Index- Blog    */
div.conte {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    height: 69px;    /*IMPORTANT  adjust if you see other text*/
    /*margin: 0 auto;*/
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 14px;    /*IMPORTANT*/
    line-height: 1.7;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.feeditem {
    /*margin-top: 30px;*/
    margin-bottom: 40px;
}
/*
Height=(# of Lines Desired X Font Size) + 1px
36=3x12+1
109.2=3x26+1
To make this code work properly we must do some calculations. The height property is equal to the number of lines desired multiplied by the font-size plus 1px to account for character descenders.
So in this example the font-size is set to 14px, and I wanted to show 3 lines of text before adding the ellipsis. So 3 x 14 + 1 = 43, which means the total height will be 43px. It’s fairly simple but works really well.
Note! The ellipsis effect requires webkit, which means if someone views it using a browser that does not support webkit then they will not see the ... but the text will still be cut off at the correct point, so this effect still works on all major browsers.
}*/

/******************************************************************************************/
/*    -Index- "Updates From Our Gallery"    */
.gallery-updates > ul > li{
	opacity:.65;
}

/******************************************************************************************/
/*    -Look- Gallery Info Text (galleria.classic.css)    */
.galleria-info-description {
    font: italic 14px/1.4 'Volkhov',serif;
    margin: 0;
    color: #bbb;
}

/******************************************************************************************/
/*    -Studio- Gallery    */
.my-gallery {
    width: 100%;
    float: left;
}
.my-gallery img {
    width: 100%;
    height: auto;
    -webkit-box-shadow: 4px 4px 10px -2px rgba(0,0,0,0.6);
    -moz-box-shadow: 4px 4px 10px -2px rgba(0,0,0,0.6);
    box-shadow: 4px 4px 10px -2px rgba(0,0,0,0.6);
}
.my-gallery figure {
    display: block;
    float: left;
    margin: 0 10px 10px 0;
    width: 150px;
}
.my-gallery figcaption {
    display: none;
}



/*===========================================================================================
7. Responsive Media Queries
===========================================================================================*/
/*    HEADER RE-SIZE LARGER    */
@media (min-width: 992px) and (max-width: 10000px) {
    .page-header{
        min-height:350px;
        max-height:350px;
	}
}

/*    HEADER RE-SIZE SMALLER    */
@media only screen and (max-width: 767px) {
    .page-header{
        min-height:200px;
        max-height:200px;
	}
}

/*    MAP RE-SIZE SMALLER    */
@media only screen and (max-width: 992px) {
    #contact-map{
        min-height:300px;
        max-height:300px;
    }
}


/*    MAP RE-SIZE SMALLEST    */
@media only screen and (max-width: 767px) {
    #contact-map{
        min-height:200px;
	   max-height:200px;
    }
}



/*===========================================================================================
8. Music Player
===========================================================================================*/
/*    Position Music Player    */
#componentWrapper{
	position:relative;
	width:800px;
	height:310px;
	top:0px;
	margin:0 auto;
	padding-bottom:360px
}