* {
    margin:0;
    padding:0;
}
article, aside, figcaption, figure, footer, header, nav, section { display: block;}
html {
    background-color: #fff;
    font-size:1em;
	height:100%;
	line-height:1.5;
}
@font-face {
    font-family: DaunPenh;
    src: url(../DaunPenh.ttf);
}
body {
    width:100%;
    max-width:100%;
    height:auto;
}
img {
    max-width: 100%;
    height:auto;
}
h3 {
    color:#555;
    font-weight: normal;
    font-size: 130%;
}
h4 { 
    color:#fff;
    font-weight: normal;
    font-size: 130%;
}
#nav {text-align: center;}
.navigation ul {
	list-style-type: none;
    margin:0;
    padding:0;	
}
.navigation li {margin:0;}
.navigation ul a {
	text-decoration:none;	
	color:#fff;
	display:block;
    padding-top:.3em;
    font-family:DaunPenh;
    font-size: 170%;
    background-color: #b5b5b5;
    letter-spacing: .1em;
}
.navigation ul a:hover {
    color:#fff;
    background-color: #696868;
}
#nav nav {
    height:0;
    overflow:hidden;
}
/* =========advanced checkbox hack rules======= */
body {-webkit-animation: bugfix infinite 1s;}

@-webkit-keyframes bugfix {
    from {padding:0;}
    to {padding:0;}
}
/* ==========end hack==================== */
#nav input[type=checkbox] {
    position: absolute;
    top:-999em;
    left:-999em;
}
#nav label {
    display:block;
    background: url(../images/nav-icon.png) no-repeat right center;
    text-indent: -999em;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    position: relative;
    top:-.7em;
    right:0px;    
}
#nav input[type=checkbox]:checked ~ nav {
    height:auto;
    overflow: hidden;
}
/*================================== END NAV ==============================*/
img.header {
    margin:2em 0 .5em 0;
    display:none;
}
img.logoSmall {    
    max-width:100%;
    height:auto;   
    margin:1em 0;
}
#AA {
    width:27%;
    height:auto;
    position: absolute;
    display:none;
    
}
#AA ul li {list-style-type: none;}
#AA ul li a {
    display:inline-block;
    float:left;    
    text-decoration: none;
    margin:0;
    padding:0;
    font-family:DaunPenh;
}
#AA ul li a:hover {
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
}
#newSlide { 
    max-width:100%;
    width:100%;
    height:auto;
    margin:0 auto;  
    position: relative;
}
#works {
    max-width: 100%;
    width: 960px;
    height: auto;
    margin: 0 auto;
}
#works img:hover {opacity:.5;}
#works ul li {
    list-style-type: none; 
    margin-bottom: 1.5em;
}
.pro1 a, .pro2 a { 
    text-align: center;
    text-decoration: none;
    color:#555;
    font-size:120%;
 }
.pro1 a:hover, .pro2 a:hover {
    color:#000;   
}
img.footer {
    margin-top:1em;
    display:none;
}
#touchbase {    
    width:960px;
    height: 540px;
    margin:0 auto;
    padding:0;
    position:relative;
}
  #touchbase img {
    max-width: 100%;
    height: auto;
  }
#CON, #CON a {
    color:#333;
    text-decoration: none;
}
#CON p, fieldset label {
    font-family: verdana, sans-serif;
    /*color:#fff;*/
}
#CON a:hover {color:#888;}
#socialHome img {
    max-width: 10%;
    height: auto;
    margin:1em .3em 0 0;    
}
#socialHome img:hover {
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
}
footer {
    color:#fff;
    width:100%;
    padding-bottom: 2em;
    
}

/*================= MEDIA 960 px ========================*/
@media screen and (min-width:960px) {
    #AA ul li a {
        margin-right:2em;
        font-weight:lighter;
    }
    .Bnav {margin-left:.3em;}
    .Bnav a { 
        color:#fff;
        font-size:170%;
        display: inline-block;
        font-weight:lighter;
        font-family:DaunPenh;
    }

#socialHome {
    width:23.5%;
    height:auto;
    margin: -.65em 0 0 66.5%;
    position: absolute;
    z-index: 1000;
}
img.header {
    margin:2em 0 .5em 0;
    display:inline;}

img.footer {
    margin-top:0em;
    display:inline;    
}
#newSlide {  
    width:53.25%;
    height:auto; 
    margin-top: -2em;
    margin-bottom: .2em;
}
img.logoSmall{display:none;}
footer{display: none;}
#AA {
    margin: -3.15% 0 0 57.7%;
    display:inline-block;
    
    }
#AA img {
    width:60%;
    height:auto;
    margin:0;
}
    a.gallery {
        color:#555;
        text-align: center;        
    }
    a.gallery:hover {
        font-weight: bold;
    }
    #works {
        width:53.5%;
        height:auto;
    }
    #works ul li {margin-bottom: 3em;}
   .pro1 {
        width:46%;
        height:auto;
        float:left;
        margin-right:3em;
        text-align: center;
        margin-top:2em;
        position: relative;
        
    }
    .pro2 {
        width:46%;
        height:auto;
        float:left;
        text-align: center;
        margin-top:2em;
        position: relative;
    }
    #touchbase {
        width:50%;
        height:auto;
        margin-top:3em;
    }
    #CON a:hover {
        font-style: bold;
    }
    .textPro {
        color:#686868;
        text-align: left;
    }
    
    .clear {clear:both;}
    .back {
        font-size: 120%;
        color:#555;
    }
    .back:hover {font-style: italic;}
    .projectImg {        
        width:100%;
        height:auto;
       /* border: 1px solid #555;*/
    }
    .projectImg h1 {
        font-size: 200%;
        color:#555;
    }
    .projectImg img {
        max-width: 100%;
        width:32.15%;
        height: auto;
        float:left;            
        display: inline-block;
        position: relative;
        margin:0 .5em .5em 0;
    }
    .textPro {
        width:100%;
        height:auto;
        margin-top: 2em;
       /* border: 1px solid #555; */
    }
    .textPro p {
        font-size:150%;
    }
    h3 {margin-top:1em;}

    #touchbase img {
        max-width:1000px;
        height:540px;
        position: relative;
        float:left;
        margin:-80px auto 3px -10px;
        opacity:.5;
        
    }
    #CON {
        position: absolute;
        margin: -2.5em 0 0 20px;
        line-height: 1.25;
        
        
    }
    
    h4 { color:#999;
         font-size:110%;
    }
}


/*============== MEDIA 959 =============*/
@media screen and (max-width:1340px) {
    body {
        background-color:#a5a5a5;
        text-align: center;
        position: relative;       
    }
    img.logoSmall  {
        max-width:80%;
        height:auto;
    }   
   
     
}