/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	height:100%;
	font-family:'Century Gothic','Arial Narrow',Arial, Helvetica, sans-serif;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/* ==========================================================================
  Huy Custom Style
   ========================================================================== */

a{border:none;}

img {border:none;}

header{position:fixed;font-size:75%; line-height:0px;color:#fff; background-color:#000; z-index:999999; width:100%; height:4em;}





#initial-homescreen{position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1000;
	background:url(../img/work-hover-cover-image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; font-size:75%;}



#top-level-homescreen{
	position:absolute; left:0; top:0%; width:100%; height:100%;
	background:url(../img/work-hover-cover-image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; font-size:75%;}
  

/* #top-level-homescreen:hover{
	position:absolute; left:0; top:0; width:100%; height:65%;
	background:url(../img/work-cover-image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; font-size:75%;}  
  */
  
.btblogo{position:absolute;padding-top:.85em; left:5%;} 


.homescreen-down-arrow{position:absolute; bottom:0; right:15%; }



.top-homescreen-blocktitle{background:#464646; color:#FFFFFF; position:absolute; bottom:0%; width:100%; padding:7px 0px 7px 0px; text-indent:5%;opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */ font-size:1em; letter-spacing:.095em;}


  
  #left-bottom-homescreen{position:absolute; left:0; top:65%; width:50%; height:35%;
	background:url(../img/about-cover-image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; font-size:75%;}
  
  /*
    #left-bottom-homescreen:hover{position:absolute; left:0; top:65%; width:50%; height:35%;
	background:url(../img/about-hover-cover-image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; font-size:75%;} */
  
 .left-bottom-homescreen-blocktitle {background:#464646; color:#FFFFFF; position:absolute; bottom:0%; width:100%; padding:7px 0px 7px 0px; text-indent:10%;opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */ font-size:1em; letter-spacing:.095em;}
  
    #right-bottom-homescreen{position:absolute; left:50%; top:65%; width:50%; height:35%;
	font-size:75%;background:url(../img/clients-cover-image.jpg) no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain; }
  
  .clients-logo{width:15%; height:15%; float:left; margin:3%;}
  .clients-logo img{width:100%;}
  
  #Main-content-wrapper{position:absolute; left:0; top:100%; width:100%; height:auto; overflow:visible; z-index:-5000;}
  
  
  #Main-content{position:relative; width:100%; height:auto; overflow:visible;
 }
  
  
   #Main-content h2{}
  
  #Main-content2{position:relative; left:0;width:100%; height:auto; min-height:900px;background:#fff; z-index:-2000;}
  
  
#Main-content2 h2{padding-top:5%;font-size:4em; text-align:center; font-weight:100;}


#left-col-about{width:14%;position:absolute; top:35%; left:5%;}

#left-col-about h3{font-weight:100; font-size:.75em; line-height:0em;}
.company-name-wrk-exp-sec{font-size:.75em; font-weight:600;}
.title-wrk-exp-sec{font-size:.75em; color:#CC6666;}
.job-description-line{font-size:.75em;}

.div-line{border-bottom:1px solid #e1e1e1; padding:10px 0px 10px 0px; width:100%;}


#aboutme-block{width:50%;position:absolute; top:20%; left:23%; text-align:center;}
#aboutme-block img{width:100%; padding:4% 0 1% 0;}
.description-img-text{font-size:.75em; text-align:center; font-weight:700;}

.exp-title{font-size:1em; font-weight:100; text-align:left;}

.about-list-wrapper{padding:5% 0 5% 0;}

.about-list-wrapper ul{list-style-type:none; margin:15px 0 15px 0; padding:0; }
.about-list-wrapper li{font-size:.75em; margin: 10px 0px 10px 0px;}



#right-col-about{width:18%;position:absolute; top:35%; left:77%;}
.right-col-mini-block{margin:0 0 5% 0;}
.right-col-title-headings{font-weight:700;font-size:.75em;}
.right-col-content{font-size:.75em;}

.hireme-img{position:absolute; left:0; top:100%; width:100%; height:100%;
	background:url(../img/tapiocaexpress.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
  
.things-i-like-block{position:absolute; left:0; top:205%; width:100%;}
.things-i-like-block ul li{font-size:.75em; padding:0px 0px 10px 0px; color:#000000;}














/* ==========================================================================
  Works Page
   ========================================================================== */

/*CONTAINER STYLES*/

.workpagecontainer {
	width: 95%;
	margin: 30px auto;
	overflow: hidden;
}


.workpagecontainer h2{font-size:4em; text-align:center; font-weight:100;}

/*GALLERY STYLES*/
.galleryItem {
	color: #797478;
	
	width: 29%;
	margin:  2% 2% 50px 2%;
	float: left;
	-webkit-transition: color 0.5s ease;
}

.galleryItem h3 {
	text-transform: uppercase;
	line-height: 2;
	font-weight:100;
}

.galleryItem:hover {
	color: #000;
}

.galleryItem img {
	max-width: 100%;
	padding:5px;
	background-color:#FFFFFF;
	border: 1px solid #CCCCCC;
}









/* ==========================================================================
  Contact PAge
   ========================================================================== */

#Main-content3{float:left;width:100%; position:relative;left:0;width:100%; height:auto; min-height:900px;z-index:1000; text-align:center;}
#Main-content3 h2{padding-top:25%;font-size:4em; text-align:center; font-weight:100;}
.contactpage-phonenumber{padding-top:5%;}



/* MEDIA QUERIES*/



@media screen and (max-width: 480px)  
{
	
	.homescreen-left-textblock {display:none;}
	.homepage-largetext{display:none;}
	
}

@media only screen and (max-width : 980px),
only screen and (max-device-width : 980px){
	.galleryItem {width: 45%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 43%;}
	.header h1 {font-size: 40px;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 96%;}
	.header h1 {font-size: 28px;}
	.workpagecontainer h2{font-size:2em; text-align:left;position:relative; left:5%;}
	#left-col-about{width:80%;position:relative;float:left;}
	#aboutme-block{width:80%;position:relative; float:left; text-align:left; left:5%; padding:30px 0px 0px 0px;}
	#right-col-about{width:80%;position:relative; float:left; text-align:left; left:5%; padding:30px 0px 0px 0px;}
	#Main-content2 h2{font-size:2em; text-align:left;position:relative; left:5%;}
	#Main-content3 h2{font-size:2em; text-align:left;position:relative; left:5%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem img {width: 96%;}
	.galleryItem h3 {font-size: 18px;}
	.galleryItem p, .header p {font-size: 18px;}
	.header h1 {font-size: 70px;}
}