@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'ralewaylight';
    src: url('../font/raleway-light-webfont.eot');
    src: url('../font/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/raleway-light-webfont.woff2') format('woff2'),
         url('../font/raleway-light-webfont.woff') format('woff'),
         url('../font/raleway-light-webfont.ttf') format('truetype'),
         url('../font/raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ralewayregular';
    src: url('../font/raleway-regular-webfont.eot');
    src: url('../font/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/raleway-regular-webfont.woff2') format('woff2'),
         url('../font/raleway-regular-webfont.woff') format('woff'),
         url('../font/raleway-regular-webfont.ttf') format('truetype'),
         url('../font/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ralewaysemibold';
    src: url('../font/raleway-semibold-webfont.eot');
    src: url('../font/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/raleway-semibold-webfont.woff2') format('woff2'),
         url('../font/raleway-semibold-webfont.woff') format('woff'),
         url('../font/raleway-semibold-webfont.ttf') format('truetype'),
         url('../font/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
font-family: 'ralewaylight';	
font-size:1em;
}

p {
margin-bottom:20px;	
line-height: 1.5;
font-size:0.9em;
}

p a {
color:#de224e;
}

.headers {
background:#990000;
position:fixed;
z-index:99999;
height:60px;
top:0;
}

/* h1 h2 h3 */

h1 {
display:block;
float:left;	
color:#FFF;
padding:16px 0;
font-size:1.5em;
font-weight:light;
}

h2 {
font-size:2.3em;	
color:#de224e;
margin:50px 0;
display:block;
text-align:center;
}




/* navigation */

nav {
display:block;
float:right;	
padding:16px 0;
width:35%;
}

nav a {
margin:0 0 0 2%;
padding:5px 15px;
border-radius:3px;
display:block;
float:right;
font-size:1.1em;
}

nav a:link, nav a:visited{
color:#FFF;
text-decoration:none;
}

nav a:hover{
color:#fff2ce;
text-decoration:none;
}

nav a.selected, .subnavs a.selected{
color:#FFF;
text-decoration:none;
background:#de224e;
border:1px solid #C03;
}

.subnavs {
text-align:center;
padding:20px;
background:#FFFFFF;
border-bottom:1px solid #CCC;
}

.subnavs a{
padding:5px 10px;
margin:1%;
text-decoration:none;
color:#333;
border:1px solid #CCC;
border-radius:5px;
background:#edebea;
}

.subnavs a:hover{
color:#de224e;
}

.subnavs a.selected:hover {
color:#FFF;	
}

.subnavs #nav3D {
font-family:Helvetica;	
font-weight: lighter;
}


/* container */

.containers {
width:100%;	
display:block;
overflow:hidden;
}

.sections {
width:960px;
margin:0 auto;
display:block;
overflow:hidden;
padding:0 2%;
}

.leftContainers{
float:left;
width:43%;	
}

.rightContainers{
float:right;
width:43%;	
}


/* pages */


.home {
margin-top:60px;
background:#000;
}

.abouts {
background:#000 url("../images/bg_about.jpg") repeat-x center bottom;
padding:60px 0 190px 0;
background-size:100%;
}

.abouts p{
color:#FFF;
}

.portfolios {
padding:60px 0;	
}

/* layout */

.designBoxs {
min-height:500px;
display:block;	
overflow:hidden;
position:relative;
margin:20px 0;
}

.designBoxs img{
display:block;	
/*margin:0 auto; */
}

.designInfos {
width:300px;
position:absolute;
top:120px;
right:0;
}

.designTitles {
color:#de224e;
font-size:2em;
font-weight:lighter;
margin-bottom:15px;
}

.designDesps {
color:#333;
}

.designSkills {
color:#333;	
font-weight:bold;
}

.platforms {
height:30px;
margin-bottom:18px;
}

video {
margin:	30px 30px 50px 40px;
}



/* icons */

.ioss {
background:url(../images/icon_ios.png) no-repeat;
}

.androids{
background:url(../images/icon_android.png) no-repeat;
}

.boths {
background:url(../images/icon_iosandroid.png) no-repeat;
}

.phps {
background:url(../images/icon_php.png) no-repeat;	
}

.flashs {
background:url(../images/icon_flash.png) no-repeat;	
}

.g2d {
background:url(../images/icon_2d.png) no-repeat;		
}

.g3d {
background:url(../images/icon_3d.png) no-repeat;		
}

.g2da {
background:url(../images/icon_2da.png) no-repeat;		
}

.g3da {
background:url(../images/icon_3da.png) no-repeat;		
}

.g2d3da {
background:url(../images/icon_2d3da.png) no-repeat;		
}

/* line */
.breaklines {
background:url(../images/sfolio/line.jpg) top center no-repeat;
width:900px;
height:2px;
}

/* text */

.years {
font-family:Helvetica;
font-size:3em;
font-weight:lighter;
padding:5px;
}

/* List */
.brands {
width:100%;	
display:block;
overflow:hidden;
}

.brands li {
float:left;
width:50%;
font-size:0.9em;
margin-bottom:10px;
color:#FFF;
}

/* mobile menu */

.menuBtns {
float: right;
height: 30px;
margin: 15px 5px;
width: 30px;
background: url("../images/btn_menu.png") no-repeat scroll center 0;
}

.menuBtns a {
display: block;
height: 30px;
width: 30px;
}

.menuBtns span {
display: none;
}

.mobileMenus {
display: block;
width: 100%;
position:fixed;
top:60px;
left:0;
background: #fff;
z-index:9999999;
}

.mobileMenus a {
display: block;
padding: 15px 0;
text-align: center;
width: 100%;
border-bottom: 1px solid #ccc;
font-size: 1.1em;
color:#000000;
}

.mobileMenus a:link, a:visited {
color:#000000;
text-decoration:none;
}

.mobileMenus a:hover {
color:#FFF;
text-decoration:none;
background:#de224e;
}