@charset utf-8;
/* === reset === */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p{ margin: 0; padding: 0;}
img { border: 0; outline-width:0px; vertical-align: top;}
address,cite,em,strong{ font-style: normal; font-weight: normal}
ol,ul { list-style: none}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
/* === common === */
html,body{ height: 100%; }
body{ position: relative; width:100%;}
.clearfix:after,
.clearfix:before { content: ''; display: table; }
.clearfix:after { clear: both; display:; }



.topbanner{width:100%;height:680px;text-align:center;color:#FFF;}
.topbanner h1{ margin-top:160px; font-family:'Lato'; font-weight:100; font-size:120px;}
.topbanner h2{margin-top:5px; height:200px;
	font-family:'Lato'; font-weight:100; font-size:30px;}
.topbanner h3{margin-top:20px; font-family:'Lato'; font-weight:100; font-size:18px;}
.navigation{ width:90%; padding:20px 50px 0px 50px;}
.logo{float:left; height:50px; width:150px; overflow:hidden;}
.logo img{max-height:50px; }
.content h1{color: #db5a14; font:italic 30px 'Source Sans Pro',sans-serif; margin: 50px 0 20px 0;}
.content p{text-align: left; color: #1a1a1a;
	font:italic 20px/30px  'Source Sans Pro',sans-serif;
 padding:10px 0px;}
.content h2{color: #db5a14; font:italic 22px/32px  'Source Sans Pro',sans-serif; margin: 30px 0 10px 0;}
.content h3{color: #db5a14; font:italic 20px/30px  'Source Sans Pro',sans-serif; margin: 30px 0 5px 0;}
/*.content h3{text-align:left;color:#000; font:italic 22px/32px  'Source Sans Pro',sans-serif; margin:0 160px;} */
#sosoimage .topbanner{background: url(../img/sosoimage/cover.png) no-repeat; background-size:100%;}

.wrap{text-align:center;}
.content{width:70%; margin:0 auto; padding:0; text-align:center; border:0; display:block; border-image-width:0;}
.content table{margin: 0 auto; border:solid #ccc 1px;border-collapse:collapse; }
.content table td{border:solid #ccc 1px; padding:10px;}
.content li{text-align: left; color: #1a1a1a;
	font: 16px/32px  'Lato', sans-serif; font-weight:300;
 padding:0px 10% 0px 0px;list-style : disc outside; margin-left:30px;}
 .content li{}
.content .summary{width:80%; margin:0 auto;}
.content .summary p{font:20px/30px; padding:5px 0;}
.content a{color:#67877d; }

#snap #part2{background-color:#151515;}
#snap #part3{background-color:#F0F0EF;}
#snap #part4{background-color:#fd996b;}
#snap #part5{background: url(../img/snap/bg.png) #333333 repeat-x top left; }
#snap #part6{background-color:#454545;}
#snap #part7{background-color:#0d0d0d;}
#snap .topbanner{background-color: #161616;}

#sosoimage #part1{background-color:#f6f6f6;}
#sosoimage #part2{background: url(../img/sosoimage/bg.png) #f6f6f6 repeat-x bottom left; }
#sosoimage #part3{background-color:#3a3b40;}
#sosoimage .topbanner{background-color:#11839e;}

#richsnippet #part1{background:#3aafd6; height:50px;}
#richsnippet #part2{background:#3aafd6;}
#richsnippet #part3{background:#3db9e2 url(../img/richsnippet/bg3.png) repeat-y center ;}
#richsnippet #part4{background:#f44854;}
#richsnippet #part5{background:#3db9e2 url(../img/richsnippet/bg5.png) repeat-y center ;}
#richsnippet #part6{background:#f4ba4a;}
#richsnippet .topbanner{background-color:#ffc541;}
#richsnippet .content{padding-bottom: 50px;}


#candy .content img{margin:10px 0; max-width: 900px;}
#candy .topbanner{background:url(../img/candy/banner.png) no-repeat top ;background-size: cover;}
#capstone .topbanner{background:#000 url(../img/capstone/banner.jpg) no-repeat bottom ;background-size: contain; }
#dropby .topbanner{background:url(../img/dropby/banner.png) no-repeat top ;background-size: cover;}

#posters .content img{max-width:500px; margin:10px 0; margin:20px;}
#posters .topbanner{background:#f84028;}
#posters #part1{background:#e69e23;}
#posters #part2{background:#f4e89b;}
#posters #part3{background:#297037;}


#logos .topbanner{background:#582872;}
#logos .content {text-align:center;}
#logos p{text-align:center;}

#book .topbanner{background:url(../img/book/banner.png) no-repeat top ;background-size: cover;}
#book .wrap img{width:100%;}

#colorday .topbanner{ background:url(../img/colorday/banner.png) no-repeat top ;background-size: cover;}

#catch .topbanner{ background:url(../img/catch/banner.jpg) no-repeat top ;background-size: cover;}

#holi .topbanner{background:url(../img/holi/banner.jpg) no-repeat top ;background-size: cover;}
#addepar .topbanner{background:#000;}
#google .topbanner{background:#000;}

#linkedin .topbanner{ background:url(../img/linkedin/banner.png) no-repeat top ;background-size: cover;}



/* === index === */
.index{ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBF0F5), to(#D9E7F4)); background-image: -webkit-linear-gradient(#EBF0F5, #D9E7F4); background-image: -moz-linear-gradient(#EBF0F5, #D9E7F4); background-image: -o-linear-gradient(#EBF0F5, #D9E7F4); background-image: linear-gradient(#EBF0F5, #D9E7F4); }
.index .page{ width: 100%; height: 100%; background: url(../img/bg-cloud.png) repeat-x left bottom; position: relative; -webkit-animation: cloud 20s linear infinite; -moz-animation: cloud 20s linear infinite; animation: cloud 20s linear infinite; }
.index h1{ width: 305px; height: 65px; position: absolute; top: 210px; left: 50%; margin-left: -157px; background: url(../img/logo.png) no-repeat; font: 0/0 a; overflow: hidden; }

.topbanner nav{ top:0px; left:0px; width:100%; margin:0 auto; padding-top:10px; color:#db5a14; font-family:'Lato',sans-serif; font-weight:400; font-size:32px;}
.topbanner  nav a{ width: 100px; height: 60px; margin-right: 12px; text-align: center; display: inline-block; color: #67877d; text-decoration: none; font: 16px/32px 'Comfortaa',sans-serif; font-weight:400; }
.topbanner  nav a img{max-height:50px; margin-bottom:-15px;}
.topbanner  nav a:hover{ color: #db5a14; }
.topbanner  nav{
margin: 0 auto;
  width: 100%;

  text-align:center;
top:0px; left:0px;
}



.project-nav{ display: block; }


.title{ color: #f66; font:italic 30px 'Century Gothic',sans-serif; text-align: center; margin-bottom: 18px; }
.intro{
	width: 786px;
	text-align: center;
	color: #999;
	font:italic 22px/32px  'Source Sans Pro',sans-serif;
	margin: 0 auto 75px;
}

.icon{ display: block; margin: 0 auto; }
.icon-mht,.icon-bql,.icon-cake{ width: 119px; height: 119px; background: url(../img/icon-logo.png) no-repeat; }
.icon-mht{ background-position: 0 0; margin: 50px auto 110px; }
.icon-bql{ background-position: 0 -119px; margin: 80px auto; }
.icon-cake{ background-position: 0 -238px; margin: 80px auto; }
.icon-mail,.icon-phone,.icon-cv{ background: url(../img/icon-contact.png) no-repeat; }
.icon-mail{ width: 103px; height: 77px; background-position: 0 0; }
.icon-phone{ width: 79px; height: 88px; background-position: 0 -165px; }
.icon-cv{ width: 72px; height: 88px; background-position: 0 -77px; }
.contact{ width: 700px; margin: 0 auto 200px; }
.contact ul{ margin-left: -40px; }
.contact li{ float: left; margin-left: 40px; }
.item-info{ background: #fff url(../img/avatar.jpg) no-repeat; position: relative; width: 202px; height:202px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.item-info a{ position: absolute; left: 0; top: 0; width: 202px; height: 172px; text-align: center; border-radius: 100%; padding-top: 30px;  -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;text-decoration: none; background-color: #E47F82;}
.item-info:hover a{ text-decoration: none;  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;  }
.contact .item-phone{ background-position: 0 0; }
.contact .item-mail{ background-position: 0 -202px; }
.contact .item-cv{ background-position: 0 -404px; }
.item-info span{ color: #fff; font:normal 14px 'Century Gothic',sans-serif; }
.item-info .icon{ margin-bottom: 20px; }
.item-info .icon-mail{ margin-top: 10px; }
.work { padding-bottom: 160px; }
.list { margin:  0 auto; width: 1000px; }
.photo .list{width:768px;}
.list li{ display: inline-block; margin-right: 5px;margin-left: 5px; margin-bottom:10px;}
.item-project{ width: 300px; height: 240px; border: 0px; overflow: hidden; position: relative; font-family: 'Century Gothic',sans-serif; text-align: center;}
.item-project img{ display: block; position: relative;width: 320px; height: 240px;   }
.item-project div{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: #fff; position: absolute; overflow: hidden; top: 0; left: 0; width: 300px; height: 240px; }
.item-project:hover div{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
 .item-project h2{ font-style: italic; color: #f66; font-size: 20px; padding-top: 30px; margin-bottom: 20px;}
.item-project p{ font-style: italic; color: #999;padding: 10px 40px 0px 40px; font-size: 14px; line-height: 20px; }
.item-project p:hover{ opacity:1;font-style: italic; color: #999;padding: 10px 40px 0px 40px; font-size: 14px; line-height: 20px; }

.btn-enter{ display: block; text-decoration: none; width: 92px; height: 46px; line-height: 46px; text-align: center; margin: 20px auto 0; font-size: 18px; color: #fff; border: 1px solid #fff; border-radius: 20px; }
.line{
	border: none;
	display: block;
	width: 500px;
	height: 4px;
	background: url(../img/line.png) no-repeat;
}

.photo {
	margin:  0 auto;
	width: 768px;
	margin-bottom: 100px;
}
.photo li{
	display: inline-block;
	margin: 0px 4px 16px 4px;
}
.item-photo{ width: 175px; height: 175px; border: none; overflow: hidden; position: relative; font-family: 'Century Gothic',sans-serif; text-align: center;}
.item-photo img{ display: block; position: relative;width: 175px; height: 175px; margin-bottom:20px;  }
.item-photo div{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: #E47F82; position: absolute; overflow: hidden; top: 0; left: 0; width: 175px; height: 175px; }
.item-photo:hover div{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
.item-photo h2{ color: #fff; font-size: 14px; padding-top: 80px; margin-bottom: 20px;}
.item-photo p{ color: #fff;padding: 10px; font-size: 16px; line-height: 24px; }



.gallery{ width: 872px; margin: 0 auto 140px;  }
.gallery ul{ margin-left: -10px; overflow: hidden;  position: relative; list-style: none; overflow: hidden; width: 100%;   }
.gallery li:first-child {position: relative; display: block; float: left; }

.gallery li{-webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0;  }
.gallery li img{ display: block; height: auto; float: left; width: 100%; border: 0;  }


.footer{ padding: 40px 0px 60px 0px; height: 160px; background-color: #343c3a;}
.footer p{color:#FFF; font-family:'Lato'; font-weight:100;}
.copyright  { text-align: center; font: normal 14px 'Lato',sans-serif; color: #666;margin-top:30px; }
.copyright  em{ color: #D03573; }
.icon-dot{ display: inline-block; vertical-align: -5px; width: 20px; height: 20px;  margin-right: 10px; }
.footinfo{color:#666; font-size:14px; FONT-family:"helvatica";text-align:center; padding:30px; }
.footinfo img{max-width:80px; max-height: 80px; margin-bottom: 20px;}
 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.cloud-medium,.cloud-big{ display: none;}
.cloud0{ top:32px; right: 54px; }
.cloud1{ top: 56px; left: 35px; }
.cloud2{ top: 210px; right: 34px; display: none;}	

.index h1{ top: 130px; left: 0;  width: 260px; margin-left: 40px; height: 50px; -webkit-background-size: auto 50px;
background-size: auto 50px;}
.index nav{  width: 296px; position: absolute; top: 250px; left: 50%; margin-left: -138px; }
.index nav a{ width: 80px; height: 36px; margin-right: 10px; text-align: center; display: inline-block; border: 2px solid rgba(238,132,137,0.62); border-radius: 10px; color: #ee8489; text-decoration: none; font:italic 14px/36px 'Century Gothic',sans-serif; }
.fixed-nav{ display: none !important;}

.intro{ width: 320px; font-size: 18px;}
.contact{ width: 320px; margin: 0 auto 100px; }
.list li{display: block;}
.contact li{ float: none; margin-bottom: 10px;  }
.item-info{ width: 150px; height: 150px; -webkit-background-size: 150px auto;
background-size: 150px auto;  }
.contact .item-mail{background-position: 0 -150px;}
.contact .item-cv{background-position: 0 -300px;}
.item-info a{ width: 150px; height: 120px; opacity: 1; left:160px;}
.item-project {width: 314px; height: 280px; border: 3px solid #EBF0F5; }

.icon-mail {width: 59px; height: 43px; background-position: 0 0; -webkit-background-size: 59px auto;background-size: 59px auto; }
.icon-phone {width: 59px; height: 49px; background-position: 5px -95px;  -webkit-background-size: 59px auto ;background-size: 59px auto ;}
.icon-cv {width: 54px; height: 50px; background-position: 5px -44px;  -webkit-background-size: 59px auto;background-size: 59px auto;} 

.work{ padding-bottom: 60px;}
.work.list{width:800px;} 
.photo{ margin:  0 auto; width: 320px; }
.photo .list{ margin:  0 auto; width: 320px; }
.photo li{ display: inline-block; margin: 0 0 10px 10px;}
.item-photo{ width: 145px; height: 145px;}
.item-photo img {  width: 145px; height: 145px; margin-bottom: 0; }

.item-photo div{  width: 145px; height: 145px; }
.item-photo h2{   padding-top: 60px;  }
.line{  width: 320px; height: 4px;   }
}



@-webkit-keyframes cloud { from { background-position: 1000px 100%; }frames cloud { from { background-position: 1000px 100%; } cloud { from { background-position: 1000px 100%; }