@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,700);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
@import url(https://fonts.googleapis.com/css?family=Karla);

@charset "UTF-8";
/* CSS Document */
html,body{
font-family:"Roboto","Hiragino Sans GB","Microsoft YaHei";
padding:0px;
margin:0px;
overflow-x:hidden;
-webkit-overflow-scrolling: touch; 
background:#fff;
font-weight:300;
	}	
a{
text-decoration:none;	
	}	
a:hover,a:focus,a:active,button:hover,button:focus,button:active{
outline:none;	 
text-decoration:none;
	}
.mt-15{
  margin-top: 15px !important;
}  
.btn{
padding:15px 30px;	
font-size:20px;
box-shadow:2px 2px 2px rgba(0,0,0,0.1);
font-family:"Roboto";
font-weight:300;
	}	
.btn-grey{
background:#555;
color:#fff !important;	
	}	
.btn-grey:hover{
background:#333;	
	}	
#header{
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:1000;
box-shadow:0px 50px 30px rgba(0,0,0,0.1) inset;
transition: background ease-in-out .2s;
background: rgba(255,255,255,0);
	}	
#header .becky{
display: none;
  }   
#header ul{
padding:0px;
margin:0px;
list-style:none;
float:right;	
margin-right:40px;	
	}
#header ul li{
display:inline-block;	
font-family:"Roboto";
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	}		
#header ul li a{
color:#fff;	
padding:30px 10px;
display:block;
	}
#header.active{
text-align: center;
box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
background:rgba(255,255,255,0.9);  
padding:10px 0px;
	}
#header.active .becky{
font-family: "Playfair Display";
color:#e59b9e;
font-size: 24px;
display: block;
float: left;
padding-left: 20px;
letter-spacing: -1px;  
  }     
#header.active ul{

  } 
#header.active ul li{
text-shadow:none;	
	}	
#header.active ul li a{
color:#687796;	
display:block;
padding:10px;
	}
			
.area{
padding:100px 60px;	
	}
.area-sm .sub_text{
margin:0px !important;
  }  
.area h2{
font-size:50px;
font-family:"Playfair Display";
color:#444;
font-style:oblique;
font-weight:400;	
letter-spacing: -1px;
text-align:center;	
margin-bottom:15px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1)
	}
.area .sub_text{
font-size:26px;
font-family:"Roboto";
color:#666;
text-align:center;	
margin-bottom:50px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-weight: 200;
	}
.area-sm{
padding:50px 0px;
  }  
.area-sm  *{
text-shadow: none !important;
  }    
.feature{
background-size:cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding:100px 0px;
min-height: 80vh;  
  }    
.d-flex{
display: flex;
align-items: center;
  }  
.d-flex > *{
flex:1 1 50%;
  }
.d-flex .title{
text-align: center;
  }    
.d-flex .title img{
height: 90px;
  }  
.d-flex .title .sub{
font-size: 20px;
color:#fff;  
  } 
.d-flex .box-con{
background:#fff;
box-shadow: 10px 10px 0px #E6C7C8;
padding:40px;
  } 
.d-flex .box-con .box-title{
font-size: 24px;
margin-bottom: 10px;
  }    
.d-flex .box-con .box-text{
line-height: 2;
  }   
.d-flex .box-con .box-text p{
margin-top: 20px;
  }
.d-flex .box-dec{
color:#fff;
margin-top: 40px;
  }     
#top{
background-image:url(../images/top_bg.jpg);	
background-size:cover;
background-position:top center;
background-attachment:fixed;
background-color:#E6AFAF;
height:100vh;
text-align:center;
padding:0px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
flex-direction: column;
	}
#top .line-wrap{
display:inline-block;
padding:7px;
border:5px solid #444;
background:rgba(255,255,255,0.5);
transition:  all ease-in-out .5s;	
transform: translateY(-30px);
  }	    	
#top h1{
font-size:60px;
font-family:"Playfair Display";
color:#444;
font-weight:400;
display:inline-block;
padding:35px 45px;	
border:2px solid #444;
margin:0px;
letter-spacing: -1px;
	}	
.top_dec{
transform: translate(-180px,-20px);
	}
.top_dec img{
width:260px;	
	}		
#ability{
margin:20px;
background: #DBCFC2; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #DBCFC2, #F4F1EE , #DBCFC2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #DBCFC2, #F4F1EE , #DBCFC2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #DBCFC2, #F4F1EE , #DBCFC2); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #DBCFC2, #F4F1EE , #DBCFC2); /* Standard syntax */	
padding:20px;
	}	
#ability .con{
background:#fff;
padding:20px 20px 80px 20px;	
	}	
/* Load animation */
#works{
padding:0px 0px 100px 0px;	
margin-top:20px;
position:relative;
	}
#works .circle{
position:absolute;
width:700px;
height:700px;
background:rgba(255,255,255,0.15);
border-radius:50%;	
z-index:100;	
transition: all ease-in-out 1s;
opacity:0.5;	
	}
#works .circle1{
left:-600px;
top:40px;	
	}	
#works .circle1.active{
left:-40px;
top:40px;	
opacity: 1;
	}		
#works .circle2{
left:30%;
top:-700px;	
	}
#works .circle2.active{
left:30%;
top:-50px;	
opacity: 1;
	}	
#works .circle3{
right:-700px;
top:-40px;	
	}
#works .circle3.active{
right:-220px;
top:40px;	
opacity: 1;
	}	
#works .con{
background:#A5C0E1;	
padding:80px 60px 0px 60px;
min-height:600px;
	}
#works .con h2{
color:#fff;	
	}
#works .con .sub_text{
color:rgba(255,255,255,0.8);	
	}
#works .con .screen{
text-align:center;
z-index:1000;
position:absolute;
left:0px;
width:100%;
z-index:101;
	}	
#works .con .screen img{
margin-bottom:-170px;
	}	
#works .board{
margin-top:180px;	
text-align:center;
margin-top:100px;

	}	
@-webkit-keyframes 
load { 0% {
stroke-dashoffset:0
}
}
@-moz-keyframes 
load { 0% {
stroke-dashoffset:0
}
}
@keyframes 
load { 0% {
stroke-dashoffset:0
}
}

/* Container */

.ability-circle {
  position: relative;
  display: block;
  padding: 0;
  text-align: center;
}

/* Item */

.ability-circle>li {
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 2rem;
}

.ability-circle>li:before {
  content: attr(data-name);
  position: absolute;
  width: 100%;
  top: 50px;
  font-family:"Roboto";
  font-size:20px;
}

.ability-circle>li:after {
  content: attr(data-percent);
  position: absolute;
  width: 100%;
  top: 90px;
  left: 0;
  font-size: 40px;
  text-align: center;
  font-family:"Times New Roman";
  font-style:italic;
  font-weight:bold;
  color:#666666;
  letter-spacing:-1px;
}

.ability-circle svg {
  width: 200px;
  height: 200px;
}

.ability-circle svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

.ability-circle svg:nth-child(2) path {
  fill: none;
  stroke-width: 25;
  stroke-dasharray: 629;
  stroke: rgba(255, 255, 255, 0.9);
}
.ability-circle.active svg:nth-child(2) path {
  -webkit-animation: load 5s;
  -moz-animation: load 5s;
  -o-animation: load 5s;
  animation: load 5s;
}

nav.filters{
margin:40px 0px;	
	}
nav.filters .ui-group{
margin-bottom:20px;	
	}	
nav.filters .ui-group .button-group .button{
background:none;
border:none;
border:2px solid #ddd;
font-family: "Roboto";
font-size:15px;
margin:0px 6px;
font-weight: 700;
letter-spacing: 2px;
padding:5px 15px;
color:#333;
border-radius: 20px;
color:#aaa;
  }   
nav.filters .ui-group .button-group .button:hover{
border:2px solid #aaa;
  }  
nav.filters .ui-group .button-group .button.is-checked{
border:2px solid #EF7979;
color:#EF7979;
  }       
.work{
  width:22%;
  float: left;    
  margin:15px 1.5% 30px 1.5%;
  height:270px;
}
.work .pic{
overflow:hidden;
  }
.work .pic img{
width:100%;	
transition:all ease-in-out .3s;	
  }
.work .pic:hover img{
transform: scale(1.1,1.1);
  }   
.work .type{
margin:20px 0px 7px 0px;	
font-family:"Karla";
text-transform:uppercase;
color:#999;
letter-spacing:3px;
font-size:14px;	
	}		
.work .type span.dot{
display:inline-block;
width:8px;
height:8px;
border-radius:8px;
background:#eee;
margin-right:5px;	
	}	

.work .title{
font-size:16px;
font-family:"Karla","Hiragino Sans GB","Microsoft YaHei";
color:#444;
letter-spacing:1.5px;
font-weight: 400;
	}
.work.website .type span.dot{
background:#90B5DB; 
  } 
.work.graphic .type span.dot{
background:#EF7979; 
  }   	
.work.app .type span.dot{
background:#26bec9; 
  }       
#coworker{
background:url(../images/coworker_bg.png) #f1f1f1;
background-repeat: no-repeat;
background-position: top left;
background-size: 412px;
  }   
#coworker h2{
text-align:left;
margin-left: 20px;
color:#555;
  }  
#coworker ul{
list-style: none; 
padding:0px;
margin:0px 0px 0px 30px;
  }   
#coworker ul li{
margin:10px 0px;
font-size:24px;
font-weight: 200;
letter-spacing: 1.5px;
  }  
#coworker ul li i{
color:#E59B9E;
margin-right: 10px;
font-size:15px;
  }   
#becky{
background:url(../images/about_bg.jpg) #E59B9E;
background-repeat: no-repeat;
background-position: top right; 
  }  
#becky h2{
color:#fff;
  }  
#becky .sub_text{
color:rgba(255,255,255,0.8);
  }  
#becky .con{
color:#fff;
font-size:16px;
line-height: 30px;
letter-spacing: 1.5px;
  }
#becky .con span{
color:rgba(255,255,255,0.5);
  }  
#becky .con a{
color:#fff;
margin:0px 5px;
font-weight: bold;
text-decoration: underline;
  }        
#footer{
background:#444;
color:#888;
padding:40px 5px;
font-size:15px;
text-align: center;
letter-spacing: 1px;
font-family:"Playfair Display";	 
  } 
 #footer span{
color:#e59b9e;
font-family:"Hiragino Sans GB","Microsoft YaHei"; 
font-size:18px;
	 } 
#footer .dec{
margin:10px 0px 5px 0px;
  }   
#footer .dec img{
width:400px;
max-width: 90%;

  }   
.modal-backdrop{
background:#fff;	
	}   
.modal-backdrop.in{
opacity:1;	
	}	
.modal-dialog{
width:100%;	
margin:0px;
	}	
.modal-content{
box-shadow:none;
border:none;
border-radius:0px;	
	}	
.modal-header{
border-bottom:0px;	
	}
.modal-header .close{
margin-right:10px;
font-size:30px;	
color:#ef7979;
opacity:1;
	}	
.modal-body{
margin-top:20px;	
	}	
.work_pic{
	}		
.work_pic img{
width:100%;	
box-shadow:3px 3px 5px rgba(0,0,0,0.1);	

	}	
.work_con{
font-family:"Roboto","Hiragino Sans GB","Microsoft YaHei";	
	}	
.work_con .title{
font-size:26px;
color:#333;	
letter-spacing:2px;
	}	
.work_con .date{
font-size:16px;
color:#aaa;
margin-top:10px;	
letter-spacing:2px;
margin-bottom:15px;
	}	
.work_con .text{
padding:15px;
font-size:16px;
color:#666;	
line-height:30px;
letter-spacing:1.5px;
border-top:2px solid #eee;
margin-bottom:30px;
	}
.text-b{
font-family: "Playfair Display","Times New Roman" !important;
letter-spacing: 0px;
  }  
.btn-check{
padding:12px 22px;
font-size:15px;
background:#444;
color:#fff;
border-radius:5px;	
font-weight:700;
letter-spacing:3px;
margin-left:15px;
	}	
.btn-check:hover{
background:#90b5db;
color:#fff;
	}		
#mamasion_slider{
margin-top:20px;	
	}	
.carousel .carousel-indicators{
bottom:-40px;	
	}	
.carousel .carousel-indicators li{
border:none;	
background:#ddd;
	}	
.carousel .carousel-indicators li.active{
border:none;	
background:#90b5db;
	}	
.carousel-control.left,.carousel-control.right{
background:none;
  }		
ul.partner{
  padding:0px;
  margin:0px;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
}  
ul.partner li{
  display: inline-block;
  margin:0 15px;
}
ul.partner li img{
  height:70px;
  filter: grayscale(1);
}
@media (max-width: 1200px) {
  .work{
    width:30%;
    height:290px;
  }  
}
@media (max-width: 992px) {
#top{
background-attachment:scroll;

}  
.work{
  height:240px;
}  
#works .circle{
width:500px;
height:500px;
	}	
#works .con{
min-height:500px;
	}	
#works .con .screen img{
width:80%;
min-width: 650px;	
	}	
#works .board{
margin-top:80px;
	}	
#coworker{
background-position:-150px top;	
	}	
#becky{
background-position: right -150px top;	
	}	
}
@media (max-width: 767px) { 
#header ul{
	float: none;
	text-align: center;
	margin:0px;
}	
.area{
padding:60px 20px;
  }  
#top h1{
font-size:40px;
padding:25px 35px;  
  }   
#top .line-wrap{
	transform: translate(0);	
}  
.top_dec{
display: none;
  }  
.work{
width:47%;
height:340px;
	}    
.work_pic{
margin-top:20px; 
text-align:center;
	 }
.work_pic img{
max-width:400px;	 
	 } 
.work_con{
margin-top:20px;
	}
.work_con .text{
font-size:15px;
padding:10px 0px; 
	}
.modal-header .close{
margin-top:0px;  
	}
.area h2{
font-size:40px;  
	}	  
.area .sub_text{
font-size:22px;   
	}	
#coworker{
padding-left:250px;	
	}	 
#becky{
padding-right:250px;	
	}	 
#banner_design{
display: none !important;
  }  
.feature{
min-height: 1px;
background-attachment: unset;
  }   
.carousel{
margin-bottom: 40px;
  }  
}
@media (max-width: 680px) {
#works .circle{
width:400px;
height:400px;
  }   
.work{
height:300px;
  }      
#coworker{
padding:40px 0px;	
background-position:right -150px top;
	}	
#becky{
padding:40px 0px;	
background-size:cover;
background-position:center top;
background-image:url(../images/about_bg_pink.jpg);
text-align: center;
	}	
#coworker ul li{
font-size:20px;	
	}	
.area-sm{
padding:30px 0px;
  }  
.d-flex .title img{
height: 60px;
  }    
}
@media (max-width: 580px) {
#ability{
margin:10px;
padding:10px;
  } 
#ability .con{
background:#fff;
padding:10px 10px 80px 10px;  
  }  
#header.active{
padding:0px;
  }  
#header.active .becky{
background:#e59b9e;
color:#fff;
font-size: 24px;
display: block;
float: none;
padding:5px 0px;
text-align: center;
  }     
#header.active ul{
margin:0px 0px 0px 0px;
float: none; 
  }  
.work{
height:250px;
  } 
.area h2{
font-size: 32px;
  }  
.area .sub_text{
font-size: 18px;
  }     
.d-flex{
flex-direction: column;
  }  
.d-flex .title{
order: -1;
margin-bottom: 20px;
  }
.d-flex .box{
text-align: center;
  }  
.d-flex .title img{
height: 50px;
  }   
.d-flex .title .sub{
font-size: 16px;
  }    
ul.partner li{
  display: inline-block;
  margin:0 5px;
}
ul.partner li img{
  height:60px;
  filter: grayscale(1);
}
}
@media (max-width: 480px) {
#works .circle{
width:300px;
height:300px;
  }   
  nav.filters .ui-group .button-group .button{
    margin:0px 4px;    
    padding:4px 10px;
    font-size:14px;
  }  
  .work{
    width:97%;
    height:300px;
  }  
  .work .pic img{
    max-width:300px ;
  } 
  .work .title{
    font-size:18px;
  }     
  #works .con{
  	padding:40px 20px;
  } 
  #works .board{
  	margin-top:50px;
  }   
  #coworker{
    background-position:right -300px top;
  }	           
}
@media (max-width: 380px) {
#top h1{
font-size:35px;
padding:20px 30px;  
  }   	
}