@import url('reset.css'); /* Import all the reset styles... */

/* Loading Google Web Fonts 
 * More fonts here: http://www.google.com/webfonts# ...
 * Only import what you need or it will impact your page load time 
*/
@import url('http://fonts.googleapis.com/css?family=Oswald|Passion+One|Orienta|Qwigley|Homemade+Apple'); 

@font-face {font-family: Bebas;src: url(../fonts/Bebas.eot);}
@font-face {font-family: "Bebas";src:local("Bebas"), url(../fonts/Bebas.ttf) format("truetype");}

/* Starts custome styling for the current doc */
body {
    background: #fff;
    color: #000;
    font-family: 'Oswald', sans-serif;
    font-size: 100%;
    overflow: auto;
}

p {
    padding-bottom: 20px;
}

#wrapper {
    width: 100%;
    overflow: hidden;
}
#left-content {
    position: fixed;
    width: 70%;
    height: 100%;
    opacity: 0;
}
#inner { /* Contains the entire content area */
    width: 80%;
    float:right;
    overflow: hidden;
}

a{
    color: royalblue;
}
a:hover {
    color: orange;
}

/* To mimic an anchor tag within our setup... */
.et-anchor {
    color: royalblue;
    text-decoration: underline;
}
.et-anchor:hover{
    cursor: pointer;
    color: orange;
}

#header {
    background-color: rgba(255,255,255,.7);
    width: 300px;
    position: fixed;
    top: 100px;
    padding: 20px 50px 20px 20px;
}
#header h1{
    text-transform: uppercase;
    color: green;
}
#header h1 a {
    text-decoration: none;
    font-family: Bebas;
    color: green;
    font-size: 255%;
    word-spacing: 15px;
    padding: 0px;
}
#header .slogan {
    font-family: Georgia, serif;
    font-size: 75%;
    font-style: italic;
    white-space: nowrap;
    text-transform: capitalize;
    padding-bottom: 20px;
    color: gray;
}

#nav {
    font-family: Bebas;
    font-size: 150%;
    text-transform: uppercase;
    color: #C14149;
    padding-left: 60px;
}
#nav li {
    line-height: 40px;
}
#nav li:hover {
    cursor: pointer;
}

#footer {
    position: fixed;
    width: 100px;
    top: 0;
    left: 0;
    background-color: red;
    color: yellow;
    z-index: 999999;
    opacity: .4;
}

.content {
    position: relative;
    float: left;
    margin-left: 370px;
    width: 100%;
    background-color: green;
    padding: 50px;
}
.content img { /* Applies to all images */
        width: 100%;
}
    
h2 {
    font-size: 200%;
}
.sub-heading { /* The sub heading for each section */
    font-family: Georgia;
    font-style: italic;
    font-size: 150%;
}
h3 {
    font-size: 150%;
    color: green;
    margin-bottom: 20px;
}

.et-content-section {
    clear: both;
    padding: 20px 0px;
    width: 60%;
}

.et-content-section .et-section-decoration {
    /*width: 100%;  Thumbnail width and height 
    height: 100%;   *This is being defined by each decorating image's sized in the HTML */
    position: relative;
    float: left;
    overflow: hidden;
    margin: 0px 20px 10px 0px; 
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center; /* border around the image */
    background-size: 110% 110%;
}
.et-content-section .et-section-decoration img {
    opacity: .90;
}
.et-section-column{
    padding: 5px;
    margin-top: 20px;
    margin-right: 20px;
    background-color: transparent;
}


.et-testimonials {
    color: olivedrab;
    border-bottom: 2px solid gray;
}
.et-testimonials > p {
    color: gray;
    font-family: Georgia, serif;
    font-size: 100%;
    font-style: italic;
}


/* Styles for more specific pages */
.content-home {
    background-color: green;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.content-home img {
    width: 90%;
}

.content-about {
    background-color: royalblue;
}
.content-about h3 {
    color: navy;
}
.content-about a {
    color: blue;
}
.content-about a:hover {
    color: orange;
}

.content-offerings {
    background-color: khaki;
    color: navy;
}

.content-portfolio {
    background-color: #DA0B2E;
    color: white;
}
.content-portfolio h3 {
    color: khaki;
}
.content-portfolio img {
    width: 80%;
}
.content-portfolio .et-section-column {
    text-align: center;
}

.content-social {
    background-color: orange;
    color: black;
}
.content-social a:hover {
    color: gold;
}


.content-contact {
    background-color: white;
    color: black;
}
.content-contact .et-content-section h3 {
    margin-bottom: 0px;
    margin-top: 20px;
    font-size: 100%;
}

.emailButton {
    padding: 20px;
    height: 50px;
    background-color: silver;
}

.content-gallery {
    background-color: #e5e5e5;
    color: black;
}


/* Controlling the left pannel's background images */
.lq-home {
    background-color: white;
}
.lq-about {
    background: royalblue url(../images/home_about_l.jpg) fixed no-repeat;
    background-size: auto 100%;
}
.lq-offerings {
    background: khaki url(../images/home_offerings_l.jpg) fixed no-repeat;
    background-size: auto 100%;
}
.lq-portfolio {
    background: #DA0B2E url(../images/home_portfolio_l.jpg) fixed no-repeat;
    background-size: auto 100%;
}
.lq-contact {
    background: white url(../images/home_contactus_l.jpg) fixed no-repeat;
    background-size: auto 100%;
}
.lq-social {
    background: orange url(../images/home_social_l.jpg) fixed no-repeat;
    background-size: auto 100%;
}
.lq-gallery {
    background: #e5e5e5 url(../images/home_gallery_l.jpg) fixed no-repeat;
    background-size: auto 100%;
}


/* MISC styles */

/* The page Arrows */
.lq-arrow-blue, 
.lq-arrow-yellow, 
.lq-arrow-red, 
.lq-arrow-white, 
.lq-arrow-orange, 
.lq-arrow-gray, 
.lq-arrow-green {
    position: absolute;
    width: 60px;
    height: 120px;
    left: -40px;
    z-index: 100;
}

.lq-arrow-green {
    top: 90px;
    background: url(../images/nav_arrow_green.png) no-repeat top left;
}
.lq-arrow-blue {
    top: 165px;
    background: url(../images/nav_arrow_blue.png) no-repeat top left;
}
.lq-arrow-yellow {
    top: 210px;
    background: url(../images/nav_arrow_yellow.png) no-repeat top left;
}
.lq-arrow-red {
    top: 250px;
    background: url(../images/nav_arrow_red.png) no-repeat top left;
}
.lq-arrow-white {
    top: 290px;
    background: url(../images/nav_arrow_white.png) no-repeat top left;
}
.lq-arrow-orange {
    top: 330px;
    background: url(../images/nav_arrow_orange.png) no-repeat top left;
}
.lq-arrow-gray {
    top: 370px;
    background: url(../images/nav_arrow_silver.png) no-repeat top left;
}

.current {
    color: gray;
}

.et-ul {
    list-style-type: disc;
    list-style: disc;
    padding-left: 20px;
    padding-bottom: 20px;
}


/* For the Gallery thumbnails */
/* Custom thumbnails for the Gallery page */

/* inside Wrapper: main content area: Thumb view */
.et-album{
    width: 100%; /* Controls how big the canvas width is: (Thumb width + 2px right padding) x #thumbs across = width size ...exp: (300 + 2) x 10 = 3020px */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;    
    overflow: hidden;
    text-align: center;
}

/* Content is wrapped inside an anchor tag - supports Images and Content boxes */
.et-album div{ 
    width: 49%; /* Thumbnail width and height */
    float: left;
    overflow: hidden;
    padding: 0px;
    cursor: pointer; /* if dragging, cursor: move */
    background: gray url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
}
/* on hover, we animate the caption, the bg img size, and the img opacity */
.et-album div:hover{
    background-size: 105% 105%;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.et-album div:hover img{
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.et-album div:hover > span{
    bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Content/video thumbnail boxes */
.et-text, .et-video{
    background: black;
    margin: 2px; /* Spacing between thumbnails */
    
}
.et-text .et-content-teaser, .et-video .et-video-teaser{
    text-align: center;
    width: 100%;
    height: 100%;
    opacity: .95;
}
.et-text .et-content-teaser:hover, .et-video .et-video-teaser:hover{
    background: #333;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.et-content-teaser h2, .et-video-teaser h2{
    color: #fff;
    font-size: 150%;
    line-height: 26px;
    padding-top: 30%;
    padding-bottom: 30%;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.et-content-teaser h2 span, .et-video-teaser h2 span{
    text-transform: none;
    font-size: 60%;
    font-family: Georgia, serif;
    font-style: italic;
    display: block;
}

.et-gallery-newyear .et-content-teaser, .et-gallery-newyear .et-video-teaser {
    background: black url(../images/gallery/gallery_newyear.png) no-repeat center center;
    background-size: 100% 100%;
}
.et-gallery-newyear .et-content-teaser:hover, .et-gallery-newyear .et-video-teaser:hover {
    background: black url(../images/gallery/gallery_newyear.png) no-repeat center center;
    opacity: .9;
    background-size: 100% 100%;
}
.et-gallery-sponsored .et-content-teaser, .et-gallery-sponsored .et-video-teaser {
    background: black url(../images/gallery/gallery_sponsored.png) no-repeat center center;
    background-size: 100% 100%;
}
.et-gallery-sponsored .et-content-teaser:hover, .et-gallery-sponsored .et-video-teaser:hover {
    background: black url(../images/gallery/gallery_sponsored.png) no-repeat center center;
    opacity: .9;
    background-size: 100% 100%;
}
.et-gallery-videos .et-content-teaser, .et-gallery-videos .et-video-teaser {
    background: black url(../images/gallery/gallery_videos.png) no-repeat center center;
    background-size: 100% 100%;
}
.et-gallery-videos .et-content-teaser:hover, .et-gallery-videos .et-video-teaser:hover {
    background: black url(../images/gallery/gallery_videos.png) no-repeat center center;
    opacity: .9;
    background-size: 100% 100%;
}
.et-gallery-wedding .et-content-teaser, .et-gallery-wedding .et-video-teaser {
    background: black url(../images/gallery/gallery_wedding.png) no-repeat center center;
    background-size: 100% 100%;
}
.et-gallery-wedding .et-content-teaser:hover, .et-gallery-wedding .et-video-teaser:hover {
    background: black url(../images/gallery/gallery_wedding.png) no-repeat center center;
    opacity: .9;
    background-size: 100% 100%;
}
.et-gallery-lqpride .et-content-teaser, .et-gallery-lqpride .et-video-teaser {
    background: black url(../images/gallery/gallery_lqpride.png) no-repeat center center;
    background-size: 100% 100%;
}
.et-gallery-lqpride .et-content-teaser:hover, .et-gallery-lqpride .et-video-teaser:hover {
    background: black url(../images/gallery/gallery_lqpride.png) no-repeat center center;
    opacity: .9;
    background-size: 100% 100%;
}

/* ========================================================================== */

@media screen and (max-width: 960px) {
    .lq-arrow-blue, 
    .lq-arrow-yellow, 
    .lq-arrow-red, 
    .lq-arrow-white, 
    .lq-arrow-orange, 
    .lq-arrow-gray, 
    .lq-arrow-green {
        display: none;
    }
}

@media only screen and (max-width:1267px) {
    
    .et-content-section {
        width: 55%;
    }
    
}

@media only screen and (max-width:1140px) {
    
    .et-content-section {
        width: 50%;
    }
    
}

/* iPhone Retina Landscape */
@media only screen and (max-width:1045px) {
    #inner {
        width: 100%;
    }
    #header {
        clear: both;
        background-color: white;
        width: 100%;
        height: 60px;
        position: fixed;
        top: 0px;
        left: 0px;
        padding: 10px 50px 20px 20px;
        z-index: 99999;
    }
    .content {
        left: 0px;
        width: 100%;
        padding: 40px 20px;
        float:none;
        margin: 0 auto;
    }
    .et-content-section {
        width: 95%;
    }
    .content-home {
        margin-top: 90px;
        padding: 20px 20px;
    }
    .content-home .et-content-section {
        margin: 0px auto;
    }
    .content-home .et-content-section img{
        width: 90%
    }
    
    #nav {
        position: relative;
        top: -95px;
        left: 290px;
        width: 65%;
    }
    
    #nav li {
        float: left;
        padding-right: 30px;
    }
}

/* iPad Portrate */
@media only screen and (max-width:847px) {
    
    #header {
        clear: both;
        background-color: white;
        font-size: 60%;
        width: 100%;
        height: 40px;
        position: fixed;
        top: 0px;
        left: 0px;
        padding: 10px 50px 20px 20px;
    }
    #header h1 a img { /* Hoa Sen logo */
        width: 25px;
    }
    #header .slogan {
        font-size: 100%;
    }
    .content {
        font-size: 90%;
    }
    .content-home {
        margin-top: 70px;
        padding: 10px 10px;
    }
    
    #nav {
        top: -65px;
        left: 200px;
        width: 50%;
    }
    
    #nav li {
        padding-right: 30px;
        line-height: 25px;
    }
}
@media only screen and (max-width: 688px) {
    #nav {
        width: 60%;
    }
}

/* iPhone Retina portrait */
@media only screen and (max-width: 598px) {
    #header {
        font-size: 50%;
        height: 50px;
        padding-top: 0px;
    }
    #nav {
        top: -20px;
        left: 0px;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    #nav li {
        float: left;
        padding-right: 30px;
        line-height: 20px;
        font-size: 90%;
    }
    .content {
        font-size: 80%;
    }
    .content-home {
        padding: 0px 30px;
    }
    .et-content-section {
        width: 90%;
    }
}


/* iPhone Landscape */
@media only screen and (max-width: 553px) {
    
    #header h1 a img { /* Hoa Sen logo */
        width: 20px;
    }
    #header .slogan {
        font-size: 120%;
    }
    #nav {
        top: -20px;
        left: 0px;
        width: 100%;
        padding: 0px;
        margin: 0px;
        
    }
    #nav li {
        float: left;
        font-size: 80%;
        padding-right: 10px;
        line-height: 25px;
    }
    
    
    .content-home {
        padding: 0px 20px;
    }
    .content-portfolio img {
        width: 70%;
    }
}

@media only screen and (max-width: 460px) {
    .et-album div{ 
        width: 95%;
    }
}

@media only screen and (max-width: 400px) {
    
    #header {
        height: 70px;
        width: 100%;
    }
    
    #nav {
        top: -15px;
        left: 0px;
        width: 90%;
        padding: 0px;
        margin: 0px;
        
    }
    #nav li {
        float: left;
        font-size: 80%;
        padding-right: 10px;
        line-height: 20px;
    }
    .content {
        width: 100%;
        padding-right: 5px;
        padding-left: 5px;
    }
    .et-content-section {
        width: 95%;
    }
    .content-home {
        margin-top: 90px;
        padding: 0px 5px;
    }
    
}

@media only screen and (max-width: 230px) {
    #header {
        height: 80px;
    }
    #nav {
        top: -20px;
    }
}
/* */