/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  
  /* COLUMN
------------------------------------------------------*/
  #container {
    width: 100% !important;
    background-position:0px 375px;
    clear: both;
  }
  .col-2,
  .col-2-2,
  .col-2-3,
  .col-2-faq,
  .col-2-faq-last,
  .col-3,
  .col-4,
  .col-3-4,
  .col-5,
  #header-box,
  #top-slogan h4,
  #top-social,
  #slideshow-container,
  #slideshow-container-roundabout,
  #content,
  .fullwidth,
  .maincontent,
  .front-testimonials,
  #bottom-content,
  #client-logo,
  #client-logo ul,
  .bottom-column1,
  .bottom-column2,
  #footer-content,
  ul.process-circle,
  ul.team-list,
  ul.team-list li,
  #page-title,
  .services-column3,
  .services-column3-last,
  .services-column2,
  .services-column2-last,
  .services-column1,
  .col-contact,.col-contact2,
  .contact-content, .google-map iframe,
  #client-logo {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    float: none;
    margin-bottom: 20px;
  }
  .pricingoffer-box {
    float: left;
  }
  #header-box,
  #header-container {
    height: 360px;
    background-color: none;
  }
  #top-container{
  	background:url(../images/body-pattern/bg-template1.jpg) center 356px repeat-x; /* you can change this image with : bg-template1.jpg, bg-template2.jpg, bg-template3.jpg, bg-template4.jpg, etc until bg-template20.jpg*/	
  	height:784px;
  }
  
  .last {
    float: none;
  }
  
  #logo,
  #righttop-header {
    display: block;
    text-align: center;
  	float:none;
    width: 300px;
    margin: 0 auto;
    clear: both;
    background: none;
  }
  #logo {
    padding-top: 20px;
  }
  #menu {
    display: none;
  }
  /* Custom Drop-Down  */
  .tinynav {
    width:100%;
    display:block !important;
    background:#fff;
    font-size:14px;
    border:1px solid #eaeaea;
    height:42px;
    zoom:0;
    margin:0px auto;
    padding:8px 5px;
    z-index: 104;
    position: absolute;
    top: 360px;
    left: 0;
  }
    
  #top-social{
    width: 100px;
  	margin: 20px 0px 15px 100px;
  	float:none;
    height: 30px;
    clear: both;
  }
  #top-social ul li{
  	display:inline;
  	float:none;
  }
  
  #slideshow-container{
  	height:196px;
    margin-top: 60px;
  }
  .flexslider,
  #pf-video-wrapper {
    max-width: 300px;
    max-height: 196px !important;
    margin-bottom: 20px;
  }
   
  .slide-img{
  	width:300px;
  	left:0px;
  }
  .slide-text,
  .slide-text .button-helios,
  .slide-text h4 {
    display: none;
  }
  #slideshow-container-roundabout{
    background: none;
    height: 0px;  
  }
  .roundabout{
    display: none; 
  }
  #page-title {
    margin-top: 20px;
    margin-bottom: 10px;
    height: 80px;
  }
  .front-testimonials{
  	width:240px;
    height: 100%;
    margin-bottom: 30px;
  }
  .testi-text{
    width: 100%;
  }
  .testi-image{
    display: none;
  }
  .testi-baloon-left,
  .testi-baloon-right {
    display: none; 
  }
  .testi-content,
  .testi-content-right {
    width: 92%;
  }
  .pricing-wrapper,
  .pricing,
  .third-col .pricing, 
  .fourth-col .pricing,
  .fifth-col .pricing,
  .third-col .pricing-recommend, 
  .fourth-col .pricing-recommend,
  .fifth-col .pricing-recommend {
    width: 100% !important;
    float: none;
    margin-left:  auto;
    margin-right: auto;
    display: block;
    margin-bottom:-19px; 
  }
  .price-area {
    width: 80%;
  }
  .price-area,
  .third-col .price-area {
    left: 0%;
  }
  
  a.button-helios {  
    float: none;
    clear: both;  
  }
  /* Footer Styling */
  .bottom-column2 h4{
    display: block;
  	float:none;
  }
  #client-logo {
    float: left;
    height:100%;
  }
  #client-logo ul li {
    margin-right: 5px;
    margin-bottom: 10px;
    display: inline;
    float: left;
  }
  .bottom-column2 h4 {
    float: none;
    display: block;
  }
  
  ul.process-circle li{
    clear: both;
    margin-left:0;
    display: block;
    text-align: center;
  }
  
  .pricingoffer-box,
  .offer-title,
  .offer-desc,
  .offer-button {
    width: 240px; 
  }
  
  .services-column3 h4, .services-column3-last h4,
  .services-column2 h4, .services-column2-last h4,
  .services-column1 h4,
  .services-column3 h6, .services-column3-last h6,
  .services-column2 h6, .services-column2-last h6,
  .services-column1 h6,
  .services-column1 h5 {
    width: 200px;
  }
  .serv-icon {
    margin-bottom: 60px;
  }
  
  #page-title ul{
  	float:none;
    display: block;
  }
  ul#portfolio-filter{
  	margin-top:55px;
  }
  ul#portfolio-filter li{
  	margin-bottom:10px; 
  }
  .envelop-content,.envelop-content2 {
    margin: 0;
    width: 240px;
  }
  label {
    display: block;
    float: none;
    clear: both;
  }
  .textfield,.textfield2,.textarea,.textarea2,
  #comment-form textarea {
    width: 220px;
    float: none;
    clear: both; 
  }
  #comment-form textarea {
    width: 270px;
  }
  .sidebar {
    float: left;
  }
  
  .blog-post {
    width: 300px;
    margin-bottom: 0 auto;
  }
  .post-image{
  	width:300px;
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
  .post-image-single{
  	width:300px;
  }
  .post-image img{
  	width:200px;
  	height:230px;
  }
  .post-info-left{
  	width:300px;
  }
  .post-info-right{
  	width:300px;
  }
  .post-info2{
  	width:300px;
  }
  .post-content-left{
  	width: 300px;
  	background: none;
  	border-left: none;
  	padding-left:0;
  }
  .post-content-left-single{
  	width:300px;
  }
  .post-content-right{
  	width: 300px;
  	background: none;
  	border-left: none;
  	padding-right:0;
  }
  .post-content2{
  	width:300px;
  	margin-bottom:14px;
  	float:left;	
  }
  .post-content3 {
    width: 300px;
  }
  .post-content2-single{
  	width:300px;
  }
  .post-content2 h5 a, .post-content2 h5 a:visited, .post-content2-single h5{
  	width:300px;
  }
  .post-content-left img, .post-content-right img{
  	width: 280px !important;
    height: 150px !important; 
  }
  .post-info-left h5, .post-info-left-single h5 {
    font-size: 14px;
    border: none;
    padding: 0;
    margin: 0; 
  }
  ul.sharesocial-bloglist-right, 
  ul.sharesocial-bloglist-left {
    padding-top: 0;
    margin: 0 0 20px 0;
    width: 100%;
    border: none;
  }
  
  .sharing-box,
  #comments,
  #recentPostList {	
  	width:300px;
    clear: both;
    float: none;
  }
  #recentPostList {	
  	width:300px;
    padding:19px 0 0px 10px;
  }
  .related-item-wrapper-last {
    float: left;
  }
  .commentlist ul.children {
    margin:0px;
  }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #container {
    width: 100% !important;
    background-position:0px 375px;
    clear: both;
  }
  .col-2,
  .col-2-2,
  .col-2-3,
  .col-2-faq,
  .col-2-faq-last,
  .col-3,
  .col-4,
  .col-3-4,
  .col-5,
  #header-box,
  #top-slogan h4,
  #top-social,
  #slideshow-container,
  #slideshow-container-roundabout,
  #content,
  .fullwidth,
  .maincontent,
  .front-testimonials,
  #bottom-content,
  #client-logo,
  #client-logo ul,
  .bottom-column1,
  .bottom-column2,
  #footer-content,
  ul.process-circle,
  ul.team-list,
  ul.team-list li,
  ul.team-list li.team-nomargin,
  #page-title,
  .services-column3,
  .services-column3-last,
  .services-column2,
  .services-column2-last,
  .services-column1,
  .col-contact,.col-contact2,
  .contact-content, .google-map iframe,
  #client-logo {
    margin-left: auto;
    margin-right: auto;
    width: 460px;
    float: none;
    margin-bottom: 20px;
  }
  .pricingoffer-box {
    float: left;
  }
  #header-box,
  #header-container {
    height: 360px;
    background-color: none;
  }
  #top-container{
  	background:url(../images/body-pattern/bg-template1.jpg) center 356px repeat-x; /* you can change this image with : bg-template1.jpg, bg-template2.jpg, bg-template3.jpg, bg-template4.jpg, etc until bg-template20.jpg*/	
  	height:784px;
  }
  
  .last {
    float: none;
  }
  
  #logo,
  #righttop-header {
    display: block;
    text-align: center;
  	float:none;
    width: 460px;
    margin: 0 auto;
    clear: both;
    background: none;
  }
  #logo {
    padding-top: 20px;
  }
  #menu {
    display: none;
  }
  /* Custom Drop-Down  */
  .tinynav {
    width: 100%;
    display:block !important;
    background:#fff;
    font-size:14px;
    border:1px solid #eaeaea;
    height:42px;
    zoom:0;
    margin:0px auto;
    padding:8px 5px;
    z-index: 104;
    position: absolute;
    top: 360px;
    left: 0;
  }
    
  #top-social{
    width: 100px;
  	margin: 20px 0px 15px 180px;
  	float:none;
    height: 30px;
    clear: both;
  }
  #top-social ul li{
  	display:inline;
  	float:none;
  }
  
  #slideshow-container{
  	height:240px;
    margin-top: 60px;
  }
  .flexslider,
  #pf-video-wrapper {
    max-width: 460px;
    max-height: 260px !important;
    margin-bottom: 20px;
  }
   
  .slide-img{
  	width:460px;
    height: 260px !important;
  	left:0px;
  }
  .flexslider .slides img {
    display: block;
    max-height: 260px;
    width: 100%;
  }
  .slide-text,
  .slide-text .button-helios,
  .slide-text h4 {
    display: none;
  }
  #slideshow-container-roundabout{
    background: none;
    height: 0px;  
  }
  .roundabout{
    display: none; 
  }
  #page-title {
    margin-top: 20px;
    margin-bottom: 10px;
    height: 80px;
  }
  .front-testimonials{
  	width:400px;
  	height: 100%;
    margin-bottom: 30px;
  }
  .testi-text{
    width: 100%;
  }
  .testi-image {
    display: none;
  }
  .testi-content,
  .testi-content-right{
  	width:64%;
  	padding:18px 23px 3px 0px;	
  	background-image:url(images/front-testi.jpg);
  	background-repeat:no-repeat;
  	background-position:top left;
  	background-color:#ffffff;
  	border: 1px solid #dddddd;
  	border-bottom: 1px solid #aeafb1;
  	border-right: 1px solid #aeafb1;
  	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
  	float:left;
  }
  .testi-content-right{
    width: 64.7%; 
  	border-right: 1px solid #dddddd;
    border-left: 1px solid #aeafb1;
  }
  .pricing-wrapper,
  .pricing,
  .third-col .pricing, 
  .fourth-col .pricing,
  .fifth-col .pricing,
  .third-col .pricing-recommend, 
  .fourth-col .pricing-recommend,
  .fifth-col .pricing-recommend {
    width: 98% !important;
    float: none;
    margin-left:  auto;
    margin-right: auto;
    display: block;
    margin-bottom:-19px; 
  }
  .price-area {
    width: 80%;
  }
  .price-area,
  .third-col .price-area {
    left: 0%;
  }
  .imgborder {
    clear: both;
    float: none;
    margin-bottom: 20px;
    display: block;
  }
  a.button-helios {  
    float: none;
    clear: both;  
    width: 280px;
  }
  /* Footer Styling */
  #client-logo ul li{
  	width:auto;
  	margin:0px 10px;
  	display:inline;
  }
  .bottom-column2 h4{
    display: block;
  	float:none;
  }
  #client-logo {
    float: left;
    height:100%;
  }
  #client-logo ul li {
    margin-right: 5px;
    margin-bottom: 10px;
    display: inline;
    float: left;
  }
  .bottom-column2 h4 {
    float: none;
    display: block;
  }
  
  ul.process-circle li{
    width: 200px;
    margin-left: 10px;
  }
  
  .pricingoffer-box,
  .offer-title,
  .offer-desc,
  .offer-button {
    width: 400px; 
  }
  ul.team-list li p,
  ul.team-list li .last p {
    width: 220px;
  }
  .services-column3 h4, .services-column3-last h4,
  .services-column2 h4, .services-column2-last h4,
  .services-column1 h4,
  .services-column3 h6, .services-column3-last h6,
  .services-column2 h6, .services-column2-last h6,
  .services-column1 h6,
  .services-column1 h5 {
    width: 360px;
  }
  .serv-icon {
    margin-bottom: 60px;
  }
  
  #page-title ul{
  	float:none;
    display: block;
  }
  ul#portfolio-filter{
  	margin-top:55px;
  }
  ul#portfolio-filter li{
  	margin-bottom:10px; 
  }
  .envelop-content,.envelop-content2 {
    margin: 0;
    width: 380px;
  }
  label {
    display: block;
    float: none;
    clear: both;
  }
  .textfield,.textfield2,.textarea,.textarea2,
  #comment-form textarea {
    width: 360px;
    float: none;
    clear: both; 
  }
  #comment-form textarea {
    width: 420px;
    float: none;
    clear: both; 
  }
  .form-submit #submit {
    margin-right: 50px; 
  }
  .sidebar  {
    float: left;
    width: 400px !important;
  }
  
  .sidebar-content ul li,
  ul.advantage-list li p {
    width: 390px !important;
  }
  ul.advantage-list li p,
  ul.team-list li p, ul.team-list li .last p  {
    width: 340px !important;
  }
  
  .blog-post {
    width: 460px;
    margin-bottom: 0 auto;
  }
  .post-image{
  	width:460px;
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
  .post-image-single{
  	width:460px;
  }
  .post-image img{
  	width:200px;
  	height:230px;
  }
  .post-info-left{
  	width:460px;
  }
  .post-info-right{
  	width:160px;
  }
  .post-info2{
  	width:460px;
  }
  .post-content-left{
  	width: 460px;
  	background: none;
  	border-left: none;
  	padding-left:0;
  }
  .post-content-left-single{
  	width:300px;
  }
  .post-content-right{
  	width: 460px;
  	background: none;
  	border-left: none;
  	padding-right:0;
  }
  .post-content-left img,
  .post-content-right img{
    width: 420px !important;
    height: 210px !important; 
  }
  .post-content2{
  	width:460px;
  	margin-bottom:14px;
  	float:left;	
  }
  .post-content3 {
    width: 460px;
  }
  .post-content2-single{
  	width:460px;
  }
  .post-content2 h5 a, .post-content2 h5 a:visited, .post-content2-single h5{
  	width:460px;
  }
  .post-content-left img, .post-content-right img{
  	width: 420px !important;
    height: 180px !important; 
  }
  
  .post-info-left h5, .post-info-left-single h5 {
    font-size: 14px;
    border: none;
    padding: 0;
    margin: 0; 
  }
  ul.sharesocial-bloglist-right, 
  ul.sharesocial-bloglist-left {
    padding-top: 0;
    margin: 0 0 20px 0;
    width: 100%;
    border: none;
  }
  
  .sharing-box,
  #comments,
  #recentPostList {	
  	width:460px;
    clear: both;
    float: none;
  }
  #recentPostList {	
  	width:460px;
    padding:19px 0 0px 10px;
  }
  .related-item-wrapper-last {
    float: left;
  }
  .commentlist ul.children {
    margin:0px;
  }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  #container {
    width: 100% !important;
    background-position:0px 375px;
    clear: both;
  }
  .col-2,
  .col-2-2,
  .col-2-3,
  .col-2-faq,
  .col-2-faq-last,
  .col-3,
  .col-4,
  .col-3-4,
  .col-5,
  #header-box,
  #top-slogan h4,
  #top-social,
  #slideshow-container,
  #slideshow-container-roundabout,
  #content,
  .fullwidth,
  .maincontent,
  .front-testimonials,
  #bottom-content,
  #client-logo,
  #client-logo ul,
  #footer-content,
  ul.process-circle,
  ul.team-list,
  ul.team-list li,
  ul.team-list li.team-nomargin,
  #page-title,
  .services-column3,
  .services-column3-last,
  .services-column2,
  .services-column2-last,
  .services-column1,
  .col-contact,.col-contact2,
  .contact-content, .google-map iframe,
  #client-logo,
  #search {
    margin-left: auto;
    margin-right: auto;
    width: 720px;
    margin-bottom: 20px;
  }
  .pricingoffer-box {
    float: left;
  }
  #header-box,
  #header-container {
    height: 300px;
    background-color: none;
  }
  #top-container{
  	background:url(../images/body-pattern/bg-template1.jpg) center 306px repeat-x; /* you can change this image with : bg-template1.jpg, bg-template2.jpg, bg-template3.jpg, bg-template4.jpg, etc until bg-template20.jpg*/	
  	height:784px;
  }
  
  .last {
    float: none;
  }
  
  #logo,
  #righttop-header {
    display: block;
    text-align: center;
  	float:none;
    width: 720px;
    margin: 0 auto;
    clear: both;
    background: none;
  }
  #logo {
    padding-top: 20px;
  }
  #menu {
    display: none;
  }
  /* Custom Drop-Down  */
  .tinynav {
    width: 100%;
    display:block !important;
    background:#fff;
    font-size:14px;
    border:1px solid #eaeaea;
    height:42px;
    zoom:0;
    margin:0px auto;
    padding:8px 5px;
    z-index: 104;
    position: absolute;
    top: 300px;
    left: 0;
  }
    
  #top-social{
    width: 100px;
  	margin: 20px 0px 15px 320px;
  	float:none;
    height: 30px;
    clear: both;
  }
  #top-social ul li{
  	display:inline;
  	float:none;
  }
  
  #slideshow-container{
  	height:319px;
    margin-top: 60px;
  }
  .flexslider,
  #pf-video-wrapper {
    max-width: 720px;
    max-height: 320px !important;
    margin-bottom: 20px;
  }
  #pf-video-wrapper {
    margin-bottom: 100px; 
  }
  .slide-img{
  	width:auto;
    height: 320px !important;
  	right:0px;
  }
  .flexslider .slides img {
    display: block;
    height: 320px;
    width: 100%;
  }
  .slide-text h4{
  	margin:30px 0px 27px 42px;
  }
  #slideshow-container-roundabout{
    background: none;
    height: 0px;  
  }
  .roundabout{
    display: none; 
  }
  #page-title {
    margin-top: 20px;
    margin-bottom: 10px;
    height: 80px;
  }
  .front-testimonials{
  	width:700px;
    margin-bottom: 30px;
  }
  .front-testimonials ul li{
    width: 100%;
  }
  .testi-text{
    width: 700px;
  }
  .pricing,
  .third-col .pricing, 
  .fourth-col .pricing,
  .fifth-col .pricing,
  .third-col .pricing-recommend, 
  .fourth-col .pricing-recommend,
  .fifth-col .pricing-recommend {
    width: 33%;
  }
  .price-area {
    width: 80%;
  }
  .price-area,
  .third-col .price-area {
    left: 0%;
  }
  .imgborder {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  a.button-helios {
  }

  #client-logo {
    height: 100%;
    width: 700px;
    float: left;
    display: block;
    text-align: center;
  }
  #client-logo ul li {
    margin-right: 5px;
    margin-bottom: 10px;
    display: inline;
    float: left;
  }
  .bottom-column2 h4 {
    float: none;
    display: block;
  }
  .pricingoffer-box,
  .offer-title,
  .offer-desc {
    width: 660px; 
  }
  ul.team-list li,
  ul.team-list li.team-nomargin{
  	width: 355px;
  }
  ul.team-list li p,
  ul.team-list li .last p {
    width:240px;
  }
  .services-column3 h4, .services-column3-last h4,
  .services-column2 h4, .services-column2-last h4,
  .services-column1 h4,
  .services-column3 h6, .services-column3-last h6,
  .services-column2 h6, .services-column2-last h6,
  .services-column1 h6,
  .services-column1 h5 {
    width: 360px;
  }
  .serv-icon {
    margin-bottom: 60px;
  }
  
  #page-title ul{
  	float:none;
    display: block;
  }
  ul#portfolio-filter{
  	margin-top:55px;
  }
  ul#portfolio-filter li{
  	margin-bottom:10px; 
  }
  .form-submit #submit {
    margin-right: 50px; 
  }
  .sidebar,
  .popular-list,
  .tag-cloud{
    float: left;
    width: 660px !important;
  }
  
  .sidebar-content ul li,
  .popular-list li,
  ul.advantage-list li p {
    width: 640px !important;
  }
  ul.advantage-list li p   {
    width: 560px !important;
  }
  ul.process-circle {
    margin-left: 40px;
    width: 680px;
  }
  
  .contact-envelop2 {
    width: 420px !important;
  }
  .col-contact2 {
    margin: 0 0 15px 29px !important;
    width: 200px !important;
  }
  .envelop-content {
    width: 600px; 
  }
  .envelop-content #contactform .textfield, 
  .envelop-content #contactform .textarea{
    width: 570px;
  }
  .info-contact {
    width: 200px;
  }
  .sharing-box,
  #comments,
  #recentPostList {	
  	width:700px;
    clear: both;
    float: none;
  }
  #recentPostList {	
  	width:700px;
    padding:19px 0 0px 10px;
  }
  .bottom-column1,
  .bottom-column2 {
    width: 320px;
  }
}