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

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:767px) {
	h1 { font-size: 24px; line-height: 30px; margin: 0 0 30px; padding: 0 0 10px;}
	h1:before{ margin-left: -50px; width:100px; height:3px;}
	h2{ font-size:22px; line-height:26px;}
	h3{ font-size:20px; line-height:24px; margin: 0 0 10px;}
	h4{ font-size:18px; line-height:22px; margin: 0 0 10px;}
	h5{ font-size:16px; line-height:20px; margin: 0 0 10px;}
	h6{ font-size:14px; line-height:18px; margin: 0 0 10px;}
	
	p{ font-size:14px; line-height:20px; margin: 0 0 20px}
	
	.black-btn{ padding:10px 15px;}
	
	img.align-left{ float:none; margin:0 0 15px;}
	img.align-right{ float:none; margin:0 0 15px;}
	
	body.home{ background: #fff;}
	.home #wrapper{ background: url(../images/bg.jpg) no-repeat center center;}
	
	#wrapper{ background:#fcfcfc; position:relative; z-index:1; left:0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow:0 0 10px rgba(0,0,0,0.3);     margin: 0 !important;  padding: 0 !important;  min-height: inherit;}
	#wrapper.active{ left:-60%;}
	#content-area { padding: 30px 0 50px;}
	.content-left{ width:100%; float:none; margin:0 0 20px;}
	.content-right{ width:100%; float:none;}
		
	.container{ padding-left:20px; padding-right:20px;}
	
	/* header */
	header{ padding:15px 0;}
	header a.logo{ float:left; display:block; margin:0; width:100px;}
	header .social-icon{ float:right; margin:0; position: absolute; right: 20px; top: 45px;}
	header .social-icon a{ float:left; margin:0 0 0 6px; height:20px; width:20px;}
	
	header .header-right{ width:100%;}
	header .header-right .hedaer-bottom { width: 100%; float: left; margin:20px 0 0;}
	header .header-right .hedaer-bottom .ddcommon{ float:none; display:block; margin:0 auto;}
	
	/* navigation */
	.navigation{ display:none;}
	.mobile-nav{ display:block; position:absolute; right:0; top:0; width:60%;}
	.mobile-nav .title{ font-size:16px; line-height:20px; font-family: 'KobernW00-Bold'; display:block; padding:10px 20px; border-bottom:1px solid rgba(0,0,0,0.1);}
	.mobile-nav ul{ padding:0; margin:0;}
	.mobile-nav ul li{ padding:0; margin:0; background:none; list-style:none; border-bottom:1px solid rgba(0,0,0,0.1); position: relative;}
	.mobile-nav ul li a{ display:block; font-size:14px; line-height:18px; padding:7px 20px;}
	.mobile-nav ul li a img{ border-radius: 50%; height: 20px; width: 20px; vertical-align: middle; margin: 0 5px 0 0;}
	.mobile-nav ul li a.current{ background:#f2df6d; color:#000;}
	.mobile-nav ul ul{ display:none; border-top: 1px solid rgba(0,0,0,0.1); background: #f5f5f5;}
	.mobile-nav ul li em{ position: absolute; right: 0; top: 0; height: 32px; width: 32px; text-align: center; line-height: 32px; display: block; font-size: 26px; font-style: normal;}
	.mobile-nav ul li em:before{ content: '+'; position: absolute; left: 0; top: 0; line-height: 28px; height: 100%; width: 100%;}
	.mobile-nav ul ul li{ padding:0 0 0 10px;}
	.mobile-nav ul ul li a{ font-size: 13px; line-height: 16px;}
	.mobile-nav ul li.active em:before{ content: '-';}
	
	header .menu-icon{ height: 18px; position: absolute; text-align: center; width: 30px; display:block; right:20px; top:13px;}
	header .menu-icon span { position: absolute; top: 50%; left: 0; display: block; padding: 0; width: 30px; height: 2px; background-color: #000; font-size: 0px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;}
	header .menu-icon span:after {position: absolute; left: 0px; width: 100%; height: 100%; background: #000; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: 100%;}
	header .menu-icon span:before{position: absolute; left: 0px; width: 100%; height: 100%; background: #000; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: -100%;}
	header .menu-icon span:after { -webkit-transform: translateY(250%); transform: translateY(250%);}
	header .menu-icon span:before {-webkit-transform: translateY(-250%); transform: translateY(-250%);}
	header .menu-icon.active span{-webkit-background: none; 	-moz-background: none; 	-ms-background: none; 	-o-background: none;	background: none;}
	header .menu-icon.active span:before{-webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background: #000; top:0;}
	header .menu-icon.active span:after{-webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); top: 0; background: #000;}
	
	/* client-logo */
	.client-logo { margin: 0 0 30px;}
	.client-logo .owl-prev, .projects .owl-prev{ left:-15px; margin-top:-15px; height:30px; width:30px; background-size:30px; }
	.client-logo .owl-next, .projects .owl-next{ right:-15px; margin-top:-15px; height:30px; width:30px; background-size:30px; }
	
	.desc-popup{ width:250px; height:350px; overflow-x: hidden;}
		
	/* projects */
	.projects .item .title{ padding:25px 20px;}
	.projects .item .desc{ padding:20px 20px 50px;}
	.projects .item .desc .link{ font-size:22px; line-height:26px;}
	.projects .item .desc .like-unlike{ padding:9px 15px 9px 20px; bottom:-23px;}
	.projects .item .desc .like-unlike a{ font-size:16px; line-height:30px;}
	
	/* welcome-block */
	.welcome-block{ padding:0 0 50px;}
	
	/* question-box */
	.question-tab .tab{ margin:0 0 20px;}
	.question-box{ padding-left:20px; padding-right:20px;}
	.question-box li{ width:100%; margin:15px 0 0 !important;}
	.question-box li:first-child{ margin:0 !important;}
	.question-box li .name .name-left{ /*padding:17px 10px 17px 15px;*/}
	.question-box li .name .name-left span{ font-size:18px; line-height:20px;}
	.question-box li .title{ padding:15px;}
	.question-box li .name{ padding:15px;}
	.question-box.question-box-more .name{ padding:15px;}
	.question-box.question-box-more .name .name-left{ padding-top:0;}
	.question-tab .question-btn{ margin:15px 0 30px;}
	.question-box li .like-unlike{ padding:8px 10px 8px 15px;}
	.question-box li .like-unlike a{ font-size:14px; padding:0 0 0 22px; background-size: 15px !important; line-height: 20px;}
	.question-box li .like-unlike .neutral{ background-position: 0 4px;}
	.question-box li .like-unlike em{ margin:0 10px; height: 20px;}
	.latest-comment{ width:250px;}
	.latest-comment ul li .image{ width:60px;}
	.latest-comment ul li .desc{ width:180px;}
	.latest-comment ul li .desc span{ font-size:16px; line-height:18px;}
	.latest-comment ul li .desc p{ font-size:12px; line-height:14px;}
	.question-tab .tab:before{ background:none;}
	.question-tab .tab li{ margin:0 1px 4px;}
	.question-tab .tab li a, .question-tab .tab a.latest-comment-btn{ font-size:12px; line-height:14px; padding: 8px 15px;}
	.question-tab .tab li.active:before{ display:none !important;}
	
	.question{ margin:0 0 20px; padding: 0 0 20px;}
	.question .question-top{ margin:0 0 20px;}
	.question .question-top .avatar{ width:50px; margin: 0 20px 0 0;}
	.question .question-top .like-unlike-outer{ margin:0 0 0 0;}
	/*.question .question-top .like-unlike{ padding: 7px 15px 7px 15px; margin: 0 0 3px;}
	.question .question-top .like-unlike a{ font-size:14px; padding: 0 0 0 22px; background-size: 15px !important; line-height: 20px;}
	.question .question-top .like-unlike .neutral{ background-position: 0 4px;}
	.question .question-top .like-unlike em{ margin:0 10px; height: 20px;}
	.question .question-top .social-share{ margin:10px 0 0; clear: both; padding:7px 15px 7px 15px;}
	.question .question-top .social-share span{ font-size: 14px; padding: 0 0 0 22px; background-size: 15px !important; line-height:20px;}
	.question .question-top .social-share em{ height:20px;}*/
	.question .question-top .like-unlike-outer .from-name, .question .question-top .like-unlike-outer .date-end{ font-size:12px; line-height: 14px;}
	.question .question-bottom p{ font-size: 13px; line-height: 16px; margin: 0 0 15px;}
	.question .question-bottom p a, .question .question-bottom a{ font-size: 13px; line-height: normal;}
	.stButton{ margin:0 !important;}
	.question .question-top .avatar.avatar-right{ display: none;}
	
	.question-list > li{ padding:10px; margin: 20px 0 0;}
	.question-list .question-list-top { margin: 0 0 15px;}
	.question-list .question-list-top .avatar{ width:50px; margin: 0 10px 0 0;}
	.question-list .question-list-top .like-unlike{ margin:5px 10px 0 0;}
	.question-list .question-list-top .like-unlike{ padding: 7px 15px 7px 15px;}
	.question-list .question-list-top .like-unlike a{ font-size:14px; padding: 0 0 0 22px;  background-size: 15px !important; line-height: 20px;}
	.question-list .question-list-top .like-unlike .neutral{ background-position: 0 4px;}
	.question-list .question-list-top .like-unlike em{ margin:0 10px; height: 20px;}
	.question-list .question-list-top .social-share{ margin:10px 0 0; visibility: visible; opacity: 1; position: static; padding:7px 15px 7px 15px;}
	.question-list .question-list-top .social-share span{ font-size: 14px; padding: 0 0 0 22px; background-size: 15px !important; line-height:20px;}
	.question-list .question-list-top .social-share em{ height:20px; margin:0 10px;}
	
	.question-list .question-list-top .avatar.avatar-right{ display: none;}
	.question-list .question-box li .name .name-left{ padding:0 10px 0 10px;}
	.question-list .question-box li .name .name-left span{ font-size:14px; line-height:16px; margin:0;}
	.question-slider .owl-next{ height: 30px; width: 30px; background-size: 30px; right: -20px;}
	.question-slider .owl-prev{ height: 30px; width: 30px; background-size: 30px; left: -20px;}
	.question-box li .inner-title{ padding:0 0 20px;}
	
	.write-answer-form{ padding:10px;}
	.write-answer-form .close-form{ top:-10px; right:0;}
	.share-btn{ padding:10px;}
	.share-btn a{ font-size:14px; line-height:18px; background-size:16px !important; width:16px; height:24px;}
	.share-btn .like{ clear:both;}
	.share-btn em{ height:20px; margin:0 8px;}
	.share-btn.active{ position:static; margin:10px 0 0;}
	
	.discussions li{ padding:10px; margin: 20px 0 0;}
	.discussions li .comment-box .comment-box-left{ float:left; width: 100%;}
	.discussions li .comment-box .comment-box-left a{ padding:5px; margin: 0 0 0 5px;}
	.discussions li .comment-box .comment-box-left a span{ font-size:12px; line-height: 16px; padding: 0 0 0 20px;}
	.discussions li .comment-box .comment-box-left a.questions-link span{ background-size:15px;}
	.discussions li .comment-box .comment-box-left a.comment-link span{ background-size:15px;}
	.discussions li .comment-box .comment-box-right{ float:left; width: 100%; margin: 0 0 10px;}
	.discussions li .comment-box .comment-box-right a{ padding:5px; margin: 0;}
	.discussions li .comment-box .comment-box-right a span{ font-size:12px; line-height: 16px; padding: 0 0 0 20px;}
	.discussions li .comment-box .comment-box-right a.version-link span{ background-size:15px;}
	
	/* footer */
	footer{ padding: 10px 0 71px 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow:0 0 10px rgba(0,0,0,0.3); left:0; position:relative; z-index:1;}
	footer.active{ left:-60%;}
	footer ul{ margin:0 0 10px;}
	footer ul li{ margin:0 0 0 20px;}
	footer ul li:before{ top: 7px; left:-12px; height:4px; width:4px; background-size:4px;}
	footer ul li a{font-size: 13px; line-height:16px;}
	footer p{ font-size:12px; line-height:14px;}
}


/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
	h1 { font-size: 36px; line-height: 40px; margin: 0 0 40px; padding: 0 0 18px;}
	h1:before{ margin-left: -70px; width:140px;}
	
	#content-area { padding: 50px 0 80px;}
		
	.container{ padding-left:30px; padding-right:30px;}
	
	/* client-logo */
	.client-logo .owl-prev, .projects .owl-prev{ left:-20px; margin-top:-20px; height:40px; width:40px; background-size:40px; }
	.client-logo .owl-next, .projects .owl-next{ right:-20px; margin-top:-20px; height:40px; width:40px; background-size:40px; }
	
	/* projects */
	.projects .item .title{ padding:25px 20px;}
	.projects .item .desc{ padding:20px 20px 50px;}
	.projects .item .desc .link{ font-size:22px; line-height:26px;}
	.projects .item .desc .like-unlike{ padding:9px 15px 9px 20px; bottom:-23px;}
	.projects .item .desc .like-unlike a{ font-size:16px; line-height:30px;}
	
	header .header-right{ max-width:520px;}
	
	/* navigation */
	header .social-icon{ margin:0 0 10px; position: absolute; top: 37px; right: 250px;}
	header .social-icon a{ height:24px; width:24px; margin-left: 10px;}
	.navigation{ margin:10px 0 0; width:100%; float:right;}
	.navigation li a{ padding:8px 15px; font-size:13px; line-height:14px;}
	
	.projects .item .desc .like-unlike em{ margin:0 8px;}
	
	/* welcome-block */
	.welcome-block{ padding:0 0 50px;}
	
	/* question-box */
	.question-box{ padding-left:20px; padding-right:20px;}
	.question-tab .tab li a, .question-tab .tab a.latest-comment-btn{ padding:12px 20px; max-width:140px;}
	.question-box li .like-unlike{ padding:11px 10px 11px 15px;}
	.question-box li .like-unlike a{ font-size:14px; padding:0 0 0 29px;}
	
	.question{ margin:0 0 20px; padding: 0 0 20px;}
	.question .question-top{ margin:0 0 20px;}
	.question .question-top .avatar{ width:70px; margin: 0 20px 0 0;}
	.question .question-top .like-unlike-outer{ margin:5px 20px 0 0;}
	.question .question-top .like-unlike{ padding: 7px 15px 7px 15px;}
	.question .question-top .like-unlike a{ font-size:14px; padding: 0 0 0 28px;}
	.question .question-top .like-unlike em{ margin:0 10px;}
	.question .question-top .social-share{ margin:0;}
	.question .question-bottom p{ font-size: 14px; line-height: 18px; margin: 0 0 15px;}
	.question .question-top .social-share{ padding:7px 15px 7px 15px; margin:5px 0 0;}
	.question .question-top .social-share em{ margin:0 10px;}
	.question .question-top .social-share span{ padding:0 0 0 28px;}
	.question .question-top .social-share-outer{ margin-top:5px;}
	
	.question-list > li{ padding:10px; margin: 20px 0 0;}
	.question-list .question-list-top .avatar{ width:70px; margin: 0 10px 0 0;}
	.question-list .question-list-top .like-unlike{ margin:5px 10px 0 0;}
	.question-list .question-list-top .like-unlike{ padding: 7px 15px 7px 15px;}
	.question-list .question-list-top .like-unlike a{ font-size:14px; padding: 0 0 0 28px;}
	.question-list .question-list-top .like-unlike em{ margin:0 10px;}
	.question-list .question-list-top .social-share{ margin:5px 0 0; padding:7px 15px 7px 15px;}
	.question-list .question-list-top .social-share span{ padding:0 0 0 28px;}
	
	/* footer */
	footer{ padding: 20px 0 26px 0;}
	footer ul{ margin:0 0 12px;}
	footer ul li{ margin:0 0 0 26px;}
	footer ul li:before{ top: 8px; left:-17px;}
	footer ul li a{font-size: 16px; line-height:20px;}
	footer p{ font-size:14px; line-height:18px;}
}

/* 5. large desktop responsive css 1024px to 1099px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1099px) {
	h1 { font-size: 42px; line-height: 46px;}
	
	#content-area { padding: 50px 0 80px;}
		
	.container{ padding-left:30px; padding-right:30px;}
	
	/* client-logo */
	.client-logo .owl-prev, .projects .owl-prev{ left:-20px; margin-top:-20px; height:40px; width:40px; background-size:40px; }
	.client-logo .owl-next, .projects .owl-next{ right:-20px; margin-top:-20px; height:40px; width:40px; background-size:40px; }
	
	/* projects */
	.projects .item .title{ padding:25px 20px;}
	.projects .item .desc{ padding:20px 20px 50px;}
	.projects .item .desc .link{ font-size:26px; line-height:30px;}
	.projects .item .desc .like-unlike{ padding:9px 15px 9px 20px; bottom:-23px;}
	.projects .item .desc .like-unlike a{ font-size:20px; line-height:30px;}
	
	/* welcome-block */
	.welcome-block{ padding:0 0 70px;}
	
	/* question-box */
	.question-box{ max-width:1000px;}
	.question-tab .tab li a, .question-tab .tab a.latest-comment-btn{ padding:12px 20px;}
}

/* 5. large desktop responsive css 1100px to 1300px
------------------------------------------------------------------------------*/
@media (min-width:1100px) and (max-width:1300px) {	
	h1 { font-size: 42px; line-height: 46px;}
	
	#content-area { padding: 50px 0 80px;}
	
	.container{ padding-left:40px; padding-right:40px;}
	
	/* projects */
	.projects .item .title{ padding:25px 20px;}
	.projects .item .desc{ padding:20px 20px 50px;}
	.projects .item .desc .link{ font-size:26px; line-height:30px;}
	.projects .item .desc .like-unlike{ padding:9px 15px 9px 20px; bottom:-23px;}
	.projects .item .desc .like-unlike a{ font-size:24px; line-height:30px;}
}