/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 767px)
{  
  .middle div[class|="col"]{float:none; display:block; padding: 0px 5px;}
  .header .logo{margin:0px auto 20px; text-align:center;}
  .header .logo a img{width:40%;}
  .mobile-menu{display:block; margin:0px 0px 0px;}
  .header .menu{display:none;}
  .header .menu ul{text-align:left;}
  .header .menu ul li:first-child{padding:0px 0px 10px;}
  .header .menu ul li{display:block; padding:10px 0px;}
  .header .menu ul li a{display:block; padding:10px 10px; border-bottom:solid 4px transparent;}
  .banner{background: url(../images/home_banner_mobile.png) -280px top no-repeat; height:255px;}
  .banner .banner-text .text .title{font-size:30px; line-height:30pt;}
  .banner .banner-text .text p{font-size:18px; line-height:24px; margin:5px 0px;}
  .banner .banner-text .text p img{width:100%; padding:5px 0px;}
  
  .whoWeAre, .ourService, .ourWork, .footer, .about, .service, .contact-us, .faq, .portfolio{padding:20px 0px;}
  .head.center{margin:0px 0px 20px 0px;}
  .head .title{font-size:32px; line-height:32px;}
  .whoWeAre .box{margin:0px 0px 30px;}
  .whoWeAre .box .icon{margin:0 0 5px 0px;}
  .whoWeAre .box .pera strong{font-size:16px;}
  .whoWeAre .box .pera p{margin:5px 0 0px 0px;}
  
  .ourService .box{margin:0px 10px 20px;}
  .ourWork .box{padding:0px 15px; margin:0px 0px 15px;}
  .ourWork .box .image{min-height:204px; margin:0 0 0px 0px;}
  .ourWork .box .pera p strong{font-size:20px;}
  .ourWork .box .pera p{width:80%; line-height: 27px;}
  
  .contact, .contactBlk{padding:20px 0px 0px;}
  /*.contactBlk{background:url(../images/conatct-us.png) right bottom no-repeat; background-size:cover; font-size:0px; padding:40px 0px 0px;}*/  .contactBlk{background-color:#eceded;}
  .contactBlk .contactBox{height:330px;}
  .contact-form{padding:10px 0px 20px;}
  .contact-form ul li{width:100%; margin:10px 20px 10px 0px; display:block;}
  .footer .title{font-size:40px;}
  .footer ul li{margin:10px 25px 10px 0px; display:block;}
  .footer ul li a{display:block; font-size:12px;}
  .footer .copy{margin:5px auto 0px; padding:5px 0px 0px;	font-size:14px;}  
  
  .about-banner, .service-banner, .contact-banner, .faq-banner, .newsEvents-banner, .portfolio-banner{height:326px;}
  .banner-text .text .title{font-size:30px; line-height:30pt;}
  .banner-text .text p{line-height:24px; font-size:16px;}
  
  .images img{width:100%; margin-bottom:20px;} 
  .head{margin:10px 0px 40px 0px !important; padding:0px 15px !important;}
  .head .title2{font-size:26px; line-height:30px;}
  .head .pera p.large{font-size:16px; text-align:left;}
  .head .lines{margin:0px 0px 10px 50px;}
  .head .pera a{margin:15px 0px 0px 0px;}
  
  .services{/*background:url(../images/service-1.png) left top no-repeat #fafafa;*/ background:transparent; background-size:100% 100%; padding:35px 0px;	background-color:#e4e4e4;}
  .services .box .icon.service-2{height:47px;}
  
  .service .padding-t-40{padding-top:0px;}
  .map{height:200px;}
  .map img{height:100%; width:auto;}
  .adress-item{margin:0px 0px 20px 0px; padding:0px;}
  .adress-item ul li{margin:0px auto 20px; display:block; width:100%;}
  .colsBox .iconBox{width:24%;}
  .colsBox .iconBox img{width:34%;}
  .colsBox .textBox{width:76%; font-size:16px;}
  .contactForm{padding:10px 10px 10px;}
  .contactForm form ul {margin: 0px 0px 0px;}
  .contactForm form ul li{margin:0px 0px 10px 0px; display:block; width:100%;}
  .faq .head .title3{line-height: 36px;}
  .rowText{margin: 0px 0px 0px;}
  .qText{font-size:60px; width:16%; vertical-align:top;}
  .aText{width: 84%;}
  .event-box .pera p, .event-details .event-box .pera p{text-align:left;}
  .event-box .pera ul li, .event-details .event-box .pera ul li{margin:10px 10px 10px 0px; display:block; border-bottom:solid 1px #b8b8b8;	padding-bottom:10px; border-right:0px #b8b8b8; padding-right:0px;}
  .event-box .pera ul li:last-child, .event-details .event-box .pera ul li:last-child{border-bottom:solid 0px #b8b8b8; margin-bottom:0px;}
  
  .port_category{padding:0px 0px;}
  .port_category ul li{margin: 10px 0px 0px 0px;}
  .port_category ul li a{padding: 5px 5px; font-size: 13px;}
  
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px)
{
    .portBox{width: 93%; margin:10px 0px 10px 10px;}
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px)
{
    
}


/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px)
{
  .middle div[class|="col"]{float:inline-start; display:block; padding: 0px 5px;}
  p{font-size: 16px; line-height: 22pt;}
  .header .menu ul li{display:inline-block; padding:22px 10px;}
  .header .menu ul li a{padding:23px 10px;}
  .whoWeAre, .ourService, .ourWork, .footer, .about, .service, .contact-us, .faq{padding:20px 0px;}
  .banner .banner-text .text .title{font-size: 50px; line-height: 50pt;}
  .banner .banner-text .text p{font-size: 25px; line-height: 30px;}
  .whoWeAre .box .pera strong{font-size: 16px;}
  .whoWeAre .box .pera p{margin: 0px 0 0px 0px;}
  .ourService .box{margin: 0px 0px 20px; padding: 20px 15px; vertical-align: top; min-height: 300px;}
  
  .head{margin:10px 0px 0px 0px !important; padding:0px 15px !important;}
  .head .title2{font-size:26px; line-height:30px;}
  .head .pera p.large{font-size:16px; text-align:left;}
  .head .lines{margin:0px 0px 10px 50px;}
  .head .pera a{margin:15px 0px 0px 0px;}
  .ourWork .middle{}
  .ourWork .box .image{min-height: auto; display: block; vertical-align: top;}
  .ourWork .box .image img{height: auto;}
  .ourWork .box .pera p{width:75%;}
  .ourWork .box .pera p strong{font-size:18px;}
  .contactBlk .contactBox{background: url(../../../uploads/2018/04/box-address.png) -4px top no-repeat; height: 371px;	width: 221px;}
  .contact-form{padding: 0px 0px 20px 60px;}
  .contact-form ul li{width:100%; margin:10px 10px 20px 0px; display:block;}
  .images img{width: 100%;}
  .head .title3{font-size: 23px; line-height: 23px;}
}  


/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px)
{
    
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px)
{
    /* styles */
}