/*
Designer: Xatai
Site: Perfect.az
Facebook: https://fb.com/xetai.isayev
*/

@media only screen and (max-width:1100px) {
.customer-wrap .customer-item {width:25%;}
.portfolio-detail-a .portfolio-detail-info {width:380px;}
.portfolio-detail-a .portfolio-detail-info:before {width:350px;}
}
@media only screen and (max-width:1000px) {
.contact-wrap .contact-left {padding-right:40px;}
.contact-right .ct-title, .ct-info {margin-bottom:15px;}
.contact-form .x-col {margin: 0 -10px;}
.contact-form .x-col .x-input {padding: 0 10px 20px;}
.contact-form .x-textarea {padding-bottom:20px;}
}
@media only screen and (max-width:890px) {
.customer-wrap .customer-item {width:33.3333333333%;}
}
@media only screen and (max-width:820px) {
.header .header-wrap {padding: 12px 0;}
.header-wrap .logo a {width: 136px; height:30px;}
.mobile-menu {display:block;}
.container {padding-top: 55px;}
.home-page {padding-bottom:40px;}
.top-section {padding:30px 0;}
.top-section-wrap .top-section-text {font-size:32px; line-height:40px;}
.portfolio-filter {padding-bottom:24px;}
.portfolio .portfolio-wrap {margin: 0 -10px;}
.portfolio-wrap .portfolio-item {padding: 0 10px 40px;}
.portfolio-item .portfolio-info {padding: 12px 0 0;}
.portfolio-info .portfolio-description {margin-top:10px;}
.a-title {padding: 30px 0;}
.customer .customer-wrap {margin: 0 -10px;}
.customer-wrap .customer-item {padding: 0 10px 20px;}
.home-page .customer .a-title {padding: 40px 0 30px;}
.footer {padding: 20px 0;}
.header-wrap .header-right {position: fixed; float:none; visibility: hidden; z-index: 10000001; top: 55px; right: 0; width: 100%; bottom: 0; overflow: hidden; -webkit-transition: background .3s ease-in-out,visibility .3s ease-in-out; -moz-transition: background .3s ease-in-out,visibility .3s ease-in-out; transition: background .3s ease-in-out,visibility .3s ease-in-out;}
.header-right .top-menu {width: 100%; padding:50px 0; position: absolute; z-index: 100000; top: 0; right: 0; bottom: 0; background-color: #ffffff; -webkit-transform: translate3D(100%,0,0); -moz-transform: translate3D(100%,0,0); transform: translate3D(100%,0,0); -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; transition: transform .3s ease-in-out; overflow: auto; left: 0; min-width: 310px;}
.mobile-open {overflow: hidden;}
.mobile-open .header-right {visibility: visible;}
.mobile-open .mobile-menu:before {background-position: 0 100%;}
.mobile-open .header-right .top-menu {-webkit-transform: translate3D(0,0,0); -moz-transform: translate3D(0,0,0); transform: translate3D(0,0,0);} 
.top-menu ul li {float:none; text-align:center; margin:0;}
.top-menu ul li a {display:inline-block; vertical-align: top; font-size:22px; line-height:26px; padding:10px; font-weight:bold;}
.portfolio-detail-head {padding:30px 0;}
.portfolio-detail-head .portfolio-detail-title {font-size:36px; line-height:42px;}
.portfolio-detail-a .portfolio-detail-info {float:none; width:100%; position:relative; background-color: #f5f5f5; margin-bottom:12px; padding:0;}
.portfolio-detail-a .portfolio-detail-info:before {content:none;}
.portfolio-detail-a .portfolio-detail-info ul {overflow: hidden; margin: 0 -15px;}
.portfolio-detail-info ul li {float:left; width:50%; padding: 0 15px;}
.portfolio-gallery-wrap li {width:33.3333333333%;}
.about-pr {margin-bottom:5px;}
.about-pr-wrap .about-pr-item {width:50%; margin-bottom:15px;}
.contact-wrap .contact-left {width:100%; float:none; padding-right:0}
.ct-list ul li {float:left; width:50%;}
.contact .contact-wrap {padding-bottom: 40px;}
.alert {padding: 8px 12px; font-size:16px; line-height:24px; margin-bottom:20px;}
}
@media only screen and (max-width:720px) {
.portfolio-wrap .portfolio-item {float:none; width:100%;}
}
@media only screen and (max-width:640px) {
.customer-wrap .customer-item {width:50%;}
.portfolio-detail-head .portfolio-detail-title {font-size:32px; line-height:40px;}
.portfolio-detail-info ul li {font-size:17px; line-height:21px;}
.ct-list ul li {float:none; width:100%;}
}
@media only screen and (max-width:600px) {
.home-page {padding-bottom:30px;}
.top-section {padding: 20px 0;}
.top-section-wrap .top-section-text {font-size:22px; line-height:30px;}
.home-page .customer .a-title {padding: 40px 0 20px;}
.footer {padding: 15px 0;}
.portfolio-filter {padding-bottom:14px;}
.more-portfolio .more-portfolio-button {padding: 8px 18px;}
.a-title, .portfolio .a-title {padding: 20px 0;}
.pagination {margin-bottom:20px;}
.portfolio-detail-a .portfolio-detail-info ul {margin:0;}
.portfolio-detail-info ul li {width:100%; padding:0;}
.about-pr-item .about-pr-count {font-size:44px; line-height:52px; margin-bottom:2px;}
.contact-left .contact-block {padding:20px;}
.ct-title {font-size:24px; line-height:28px;}
.contact-block .ct-title {margin-bottom:15px;}
 .ct-list, .ct-list ul li {margin-bottom:20px;}
.ct-list ul li i {padding:10px;}
.ct-list ul li i:before {width:30px; height:30px;}
.ct-list ul li .ct-a {font-size:21px; line-height:26px;}
.ct-list ul li .ct-b {font-size:19px; line-height:22px;}
.sc-list {margin: 0 -10px;}
.sc-list ul li {padding: 0 10px;}
.sc-list ul li a  {padding:10px;}
.sc-list ul li a:before {width:26px; height:26px;}
.contact-form .x-col .x-input {width:100%;}
.contact .contact-wrap {padding-bottom: 30px;}
}
@media only screen and (max-width:560px) {
.portfolio-gallery-wrap li {width:50%;}
}
@media only screen and (max-width:480px) {
.centered {padding: 0 10px;}
.portfolio-wrap .portfolio-item {padding-bottom:34px;}
.portfolio-item .portfolio-image {padding: 7%;}
.portfolio-info .portfolio-title {font-size:26px; line-height:32px;}
.a-title h2 {font-size:30px; line-height:38px;}
.a-title span {font-size:17px; line-height: 21px;}
.customer .customer-wrap {margin: 0 -8px;}
.customer-wrap .customer-item {padding: 0 8px 16px;}
.home-page {padding-bottom:20px;}
.portfolio-detail-head, .portfolio-detail-main, .portfolio-detail-a, .portfolio-video {padding:20px 0;}
.portfolio-detail-head .portfolio-detail-title {font-size:30px; line-height:38px;}
.portfolio-detail-head .portfolio-detail-description, .portfolio-detail-a .portfolio-about {font-size:17px; line-height:21px;}
.portfolio-detail-main .portfolio-main-image {padding:5px;}
.portfolio-detail-info ul {padding:15px;}
.portfolio-detail .portfolio-gallery {padding: 0 0 4px 0;}
.portfolio-gallery-wrap ul {margin: 0 -8px;}
.portfolio-gallery-wrap li {padding: 0 8px 16px;}
.about-text, .about-text-a .about-text-b p, .about-pr-item .about-pr-name {font-size:17px; line-height:22px;}
.contact-left .contact-block {padding:15px;}
.contact-wrap .contact-right {padding: 18px 0 0;}
.contact-right .ct-title {margin-bottom:10px;}
.x-input input, .x-textarea textarea, .x-button button {font-size:18px; line-height:26px; padding:8px 12px;}
.contact-form .x-col .x-input, .contact-form .x-textarea {padding-bottom:15px;}
.x-textarea textarea {height:140px;}
.contact .contact-wrap {padding-bottom: 20px;}
.alert {margin-bottom:15px;}
}