/*

Design by Spiral Design Center

www.spiraldesign.org

*/



@media screen and (max-width : 1199px) {

  .singlePage-menu a{

    padding: 20px 34px;

  }

  .singlePage-menu{

    font-size:18px;

  }

  .singlePage-menu li a > span{

    letter-spacing: 6px;

  }

  .singlePage-menu li a > span.order{

    letter-spacing:7px;

  }

  .singlePage-menu li a > span.idea{

    letter-spacing: 8.5px;

  }

  .singlePage-menu li a > span.redesign{

    letter-spacing: 9px;

  }

  .singlePage-menu li a > span.webdesign{

    letter-spacing: 7px;

  }

  .singlePage-menu li a > span.videomusic{

    letter-spacing: 6.5px;

  }

  .singlePage-menu li a > span.advertising{

    letter-spacing: 6.5px;

  }

  .singlePage-menu li a > span.story{

    letter-spacing: 21px;

    margin-right: -20px;

  }

  .portfolio h3{

    font-size: 20px;

  }

  #second-step{

    height: auto;

  }

  .worms > img {

    margin-left: 25px;

  }

  .redesign-portfolio .portfolio-item{

    width: 290px;

  }

  .third-step{

    height: auto;

  }

  .forth-step{

    padding: 120px 0;

  }

  .contact-info > h3{

    float: none;

    width: auto;

  }

  .contact-info > h3.text-left{

    text-align: right!important;

    margin-top: 20px;

    margin-bottom: 0;

  }

  .gmap > img{

    max-width:100%;

  }

  .customers li{

    margin: 6px;

  }

  .footer-social a:first-child{

    border-left: 0 none;

  }

  .facebook-footer{

    margin: 0 0 10px;

  }

  .twitter-footer{

    margin: 0;

  }

  .footer-social a{

    float: none;

    margin:0 auto;

    text-align: center;

  }

  .newsletter input{

    width: 100%;

  }

  .newsletter .captcha{

    left: 0;

    right: auto;

  }

  .newsletter button{

    margin: 20px 0 0;

    float: left;

  }

  .social-banners i{

    display: block;

  }

  .social-banners a{

    padding: 23px 30px;

  }

  .portfolio-list a{

    width: 100%;

  }

  .flowplayer.intro-video{

    width: 100%;

  }

  .spiralgraph.singlePage-menu a{

    padding: 20px 14px;

  }

  .spiralgraph.singlePage-menu li a > span{

    letter-spacing:5.5px;

  }

  .spiralgraph.singlePage-menu li a > span.poster{

    letter-spacing:3px;

  }

  .spiralgraph.singlePage-menu li a > span.logotext{

    letter-spacing:1px;

  }

  .spiralgraph.singlePage-menu li a > span.book{

    letter-spacing:0.4px;

  }

  .spiralgraph.singlePage-menu li a > span.visual{

    letter-spacing:0.7px;

  }

  .spiralgraph.singlePage-menu li a > span.Ads{

    letter-spacing:2.5px;

  }

  .spiralgraph.singlePage-menu li a > span.illustration{

    letter-spacing:2px;

  }

  .spiralgraph.singlePage-menu li a > span.order{

    letter-spacing:7px;

  }

  .graph-list.portfolio-list .caption p {

    font-size: 15px;

  }

  .graph-list.portfolio-list a img{

    width: 100%;

    height: auto;

  }

  .last-articles .thumb2 > img{

    width: 153px;

  }

  .services-list li{

    height: 110px;

  }



  .logo {

    width: 170px;

    margin-right: -85px;

  }

  .logo a img {

    max-width: 100%;

  }

  .slogan-wrap {

    top: 400px;

  }

  .slogan {

    font-size: 28px;

  }

  .text-slider {

    width: 200px;

  }

  .slogan2 {

    margin-bottom: 30px;

    line-height: 40px;

    font-size: 45px;

  }

  #intro-boxes {

    top: 600px;

  }

  

  /* landing */

  .ux-section .tile.tile-5{

    width: 410px;

  }

  .ux-section .tile.tile-3{

    width: 230px;

    height: 430px;

    margin-right: -470px;

    margin-top: 100px;

  }

  .ux-section .tile.tile-8 {

      margin-top: 560px;

      margin-right: -150px;

  }

  .ux-section .tile.tile-6 {

    margin-top: 560px;

    margin-right: 1px;

  }

  .char-1,

  .char-2,

  .char-3,

  .char-4,

  .char-5,

  .char-6{

    display: none;

  }

  .ui-section .tile.des-tile {

    width: 400px;

    height: 260px;

  }

  .multi-logo .logo-card:nth-child(n+3){

    display: none;

  }

  .ui-section .tile.tile-7 {

    margin-top: 690px;

    margin-right: 1px;

  }

  .ui-section .tile.tile-4 {

    margin-right: -240px;

    margin-top: 320px;

  }

  .ui-section .tile.tile-2 {

    margin-top: 560px;

    margin-right: -240px;

  }

  .ui-section .tile.tile-5 {

    margin-top: 560px;

    margin-right: -420px;

  }



  .creative-section .tile-6 {

    margin-top: 400px;

    margin-right: -420px;

    width: 420px;

  }

  .creative-section .tile-4 {

    margin-top: 400px;

    margin-right: 1px;

  }

  .creative-section .tile-3{

    height: 290px;

    margin-top: 640px;

    margin-right: -310px;

  }

  .creative-section .tile-2 {

    margin-right: 1px;

    margin-top: 640px;

  }

}





@media screen and (max-width : 991px) {

  .services-list li{

    width: 23%;

  }

  .award-box{

    width: 260px;

  }

  .breadcrumbs li{

    font-size: 13px;

    margin-right: 10px;

  }

  .page-direct > a > span{

    display: none;

  }

  .spiralgraph.singlePage-menu li a > span{

    display: none;

  }

  .spiralgraph.singlePage-menu a {

    font-size: 14px;

    padding: 20px 10px;

  }

  .top-bar{

    font-size: 13px;

  }

  .singlePage-menu{

    font-size:16px;

  }

  .singlePage-menu li a > span{

    letter-spacing:4.5px;

  }

  .singlePage-menu li a > span.redesign{

    letter-spacing: 8px;

  }

  .singlePage-menu li a > span.webdesign{

    letter-spacing: 6px;

  }

  .singlePage-menu li a > span.idea{

    letter-spacing: 7.5px;

  }

  .singlePage-menu li a > span.order{

    letter-spacing: 6.5px;

  }

  .singlePage-menu a{

    padding: 20px 14px;

  }

  .second-step .portfolio{

    margin-top: 50px;

    -webkit-transform: translateY(0)!important;

    -ms-transform: translateY(0)!important;

    -o-transform: translateY(0)!important;

    transform: translateY(0)!important;

  }

  .second-step .portfolio{

    height: auto!important;

  }

  .portfolio-wrapper .more-info{

    right: auto;

    left: -230px;

  }

  .more-info:after{

    border-color:transparent transparent transparent #222;

    border-width:8px 0 8px 8px;

    left: auto;

    right: -7px;

  }

  .butterfly{

    margin-bottom: 30px;

  }

  .butterfly img{

    max-width: 100%;

  }

  .worms{

    float: right;

    width: 67%;

    margin-top: 100px;

  }

  .worms > img {

    margin-left: 16px;

    max-width: 33%;

  }

  .last-arrow{

    margin-top: 0;

  }

  .butterfly .arrow-down{

    display: none;

  }

  .redesign-portfolio .portfolio-item{

    width: 305px;

  }

  .features-step3{

    border-right: 0 none;

  }

  .forth-step .portfolio {

    margin-top: 30px;

    -webkit-transform: translateY(0)!important;

    -ms-transform: translateY(0)!important;

    -o-transform: translateY(0)!important;

    transform: translateY(0)!important;

  }

  .order-form{

    display: table;

    height: 180px;

    width: 100%;

  }

  .gmap{

    text-align: center;

  }

  .team ul li{

    width: 25%;

  }



  .social-banners > a {

    width: 50%;

    float: right;

    display: block;

    // margin-top: 50px;

  }

  .last-articles{

    margin-bottom: 50px;

  }

  .footer-logo {

    text-align: center;

  }

  .portfolio-wrapper .more-info{

    visibility:visible;

    opacity: 1;

  }

  .intro-box p{

    line-height:1.2;

    margin:10px 0 0;

  }

  .flowplayer.intro-video{

    height: auto;

  }

  .col-md-12 {

    display: table;

    width: 100%;

  }

  .last-articles .thumb2 > img{

    width: 195px;

  }

  .ui-section .tile.tile-6 {

    margin-top: 70px;

    margin-right: 1px;

    width: 352px;

  }

  .ui-section .tile.tile-3{

    width: 300px;

    height: 350px;

    margin-top: 270px;

  }

  .ui-section .tile.tile-7{

    margin-top: 620px;

  }

  .ui-section .tile.tile-1{

    margin-top: -50px;

  }

  .ui-section .tile.tile-4{

    margin-top: 270px;

    height: 210px;

  }

  .ui-section .tile.tile-2{

    margin-top: 480px;

    height: 200px;

  }

  .ui-section .tile.tile-6{

    margin-top: 20px;

  }

  .ui-section .tile.tile-5{

    margin-top: 680px;

    margin-right: -180px;

  }

  .creative-section .tile-5{

    width: 350px;

  }

  .tile.slider-card .carousel-inner>.item>img, .tile.slider-card .carousel-inner>.item>a>img{

    height: 340px;

  }

  .creative-section .tile-1{

    margin-top: 20px;

  }

  .creative-section .tile-6{

    margin-top: 340px;

    margin-right: -370px;

    width: 370px;

  }

  .creative-section .tile-4{

    margin-top: 340px;

  }

  .creative-section .tile-3{

    margin-top: 550px;

  }

  .creative-section .tile-2{

    margin-top: 580px;

  }

  .ux-section .tile.tile-1{

    margin-top: -30px;

  }

  .ux-section .tile.tile-5{

    width: 360px;

    margin-top: 290px;

  }

  .ux-section .tile.tile-6{

    margin-top: 500px;

  }

  .ux-section .tile.tile-7 {

    margin-top: 500px;

    margin-right: 152px;

  }

  .ux-section .tile.tile-2{

    margin-top: 0;

  }

  .ux-section .tile.tile-4{

    margin-top: 240px;

  }

  .ux-section .tile.tile-8{

    display: none;

  }

  .ux-section .tile.tile-3 {

    width: 370px;

    height: 250px;

    margin-right: -370px;

    margin-top: 480px;

  }

  .news-card a{

    display: block;

  }

  .news-card img{

    width: 100%;

  }

  .slogan {

    font-size: 22px;

  }

  .slogan2 {

    font-size: 35px;

  }

}







@media screen and (max-width : 767px) {

  .services{

    position: absolute;

    top: 42px;

    left: 15px;

    margin-left: 0px;

  }

  .services-list li{

    width: 31.3%;

  }

  .award-box{

    top: 0px;

  }

  .spiralgraph.singlePage-menu li a > span{

    display: block;

  }

  .singlePage-menu,.top-bar{

    -webkit-transform: translateY(0)!important;

    -ms-transform: translateY(0)!important;

    -o-transform: translateY(0)!important;

    transform: translateY(0)!important;

  }

  .top-bar{

    border-bottom: 3px solid #f47920;

  }

  .singlePage-menu{

    z-index: 9999;

    border-bottom: 0 none;

  }

  .singlePage-menu ul {

    background-image:url('../images/menu-bg.jpg');

    position: absolute;

    top: -48px;

    width: 0;

    display: block!important;

    left: 0;

    overflow: hidden;

  }

  .singlePage-menu ul li{

    display: block;

    float: none;

    text-align: center;

    border-bottom: 1px solid #555;

    width: 250px;

  }

  .triangle-up{

    border-color: transparent transparent #555;

  }

  .bg-layer2 {

    max-width: 100%;

    background-size: 100%;

  }

  .spaceship img{

    max-width: 100%;

  }

  .intro-box{

    margin: 0 auto 20px;

    width: 340px;



    padding: 15px;



  }

  .redesign-portfolio .item > img{

    margin:93px 9px;

  }

  .redesign-portfolio .item p{

    display: table;

    margin:0 auto;

    width: auto;

    float: none;

  }

  .redesign-portfolio .item{

    width: auto;

    margin: 0 auto 50px;

  }

  .slogan-wrap{

    position: relative;

  }

  .intro-step{

    height: auto;

    background: url("../images/bg.gif");

    margin-top: 50px;

    padding: 50px 0;

    width: 100%;

  }

  .singlePage-menu, .top-bar{

    width: 100%;

  }

  .logo {

    display: table;



    margin: 0 auto;

    position:static!important;

  }

  .slogan {

    font-size: 25px;

  }

  .text-slider {

    width: 170px;



  }

  .slogan-wrap{

    position:static!important;

  }

  #intro-boxes{

    position:static!important;

    margin-top: 30px;

  }



  

  .intro-box h3 {

    font-size: 22px;

  }



  .redesign-portfolio .item > div, .redesign-portfolio .item > img{

    float: none;

  }

  .redesign-portfolio .item > img{

    margin: 20px auto;

  }

  .breadcrumbs{

    font-size: 15px;

  }

  .portfolio-list.more-images a{

    width: auto;

    display: table;

    margin: 0 auto 20px;

  }

  .portfolio-list li {

    display: table;

    margin: 0 auto;

  }

  .portfolio-list.grid > div {

    margin: 0 auto;

    width: 300px;

  }

  .last-articles .thumb2{

    display: none;

  }

  .lnews h3{

    margin: 0 0 15px 0;

  }

  .lnews h3 a{

    background: url("../images/bullet.png") no-repeat right;

    color: #999;

    padding-right: 15px;

  }

  

  /* landing */

  .landing .intro-step{

    height: 490px;

  }

  // .line-wrapper{

  //   visibility: visible;

  //   opacity: 1;

  //   position: absolute;

  // }

  .tile{

   visibility: visible;

   opacity: 1;

   position: relative; 

   top: 0 !important;

   right: 0 !important;

   margin: 0 !important;

   float: right;

  }

  .tiles-wrapper{

    display: table;

    width: 100%;

    padding: 0 15px;

  }

  .tile-section{

    height: auto;

  }

  .tile.title-card,

  .tile.en-title-card{

    width: 50%;

    height: 260px !important;

  }

  .tile.en-title-card{

    background: #fff;

    color: #6d6e70;

  }

  .tile.des-tile{

    width: 100%!important;

    background: #6d6e70!important;

    height: auto!important;

  }

  .tile.service-tile{

    width: 100%;

    background: rgba(244,120,32,1);

    background: -moz-linear-gradient(45deg, rgba(244,120,32,1) 0%, rgba(244,141,32,1) 100%);

    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(244,120,32,1)), color-stop(100%, rgba(244,141,32,1)));

    background: -webkit-linear-gradient(45deg, rgba(244,120,32,1) 0%, rgba(244,141,32,1) 100%);

    background: -o-linear-gradient(45deg, rgba(244,120,32,1) 0%, rgba(244,141,32,1) 100%);

    background: -ms-linear-gradient(45deg, rgba(244,120,32,1) 0%, rgba(244,141,32,1) 100%);

    background: linear-gradient(45deg, rgba(244,120,32,1) 0%, rgba(244,141,32,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f47820', endColorstr='#f48d20', GradientType=1 );

    color: #fff !important;

    height: auto !important;



  }

  .tile.service-tile a{

    color: #fff !important;

  }

  .tile .tile-content{

    position: relative !important;

    padding: 0!important;

  }

  .tile.service-tile .service-list{

    color: #6d6e70;

  }

  .tile .card-label{

    background: #6d6e70;

    color: #fff;

  }

  .service-list{

    display: table;

    width: 100%;

  }

  .service-list li{

    width: 50%;

    float: right;

  }

  .tile.img-card,.tile.img-card img{

    width: 100%!important;

  }

  .ux-section .tile.tile-8{

    display: block;

  }

  .tile.award-card{

    background: #6d6e70;

    width: 100%;

    text-align: center;

  }

  .award-card .award-text span,

  .award-card img,

  .award-card .award-icon,

  .award-card .award-text{

    display: inline-block;

    float: none;

    vertical-align: middle;

  }

  .award-card .award-icon{

    margin-top: -10px;

  }

  .award-card .award-text br{

    display: none;

  }

  .award-card .award-text{

    width: auto;

    margin-top: 0;

  }

  .award-card .award-text span{

    margin-bottom: 0;

    margin-left: 5px;

  }

  .creative-section .tile-5{

    width: 100%;

  }

  .tile.slider-card .carousel-inner>.item>img, .tile.slider-card .carousel-inner>.item>a>img{

    height: auto;

    width: 100%;

  }

  .tile.des-tile{

    text-align: right !important;

  }

  .tile.title-card i{

    display: none;

  }

  .slogan{

    font-size: 20px;

  }

}



@media screen and (max-width : 733px) {

  .customers li{

    width: 20%;

    margin: 0;

  }

}



@media screen and (max-width : 710px) {

  .worms > img{

    max-width:32%;

  }

  .redesign-portfolio .portfolio-item{

    width: 270px;

  }

  .worms > img{

    margin-left: 0;

    max-width: 37%;

  }

}



@media screen and (max-width : 680px) {

  .social-banners > a{

    width: 100%;

    height: 90px;

  }

  .social-banners i{

    display: inline-block;

  }

  .award-box{

    display: none;

  }

  .mainmenu li a i{

    display: none;

  }



  .team ul li{

    width: 33.3%;

  }

  .footer h2{

    font-size: 18px;

  }

  .worms > img{

    max-width: 33%;

  }

  .services-list li{

    width: 48%;

  }

}





@media screen and (max-width : 680px) {

  .content-wrapper .content .image {

    float: none;

    margin: 0 auto 20px;

    max-width: 100%;

  }

  

}





@media screen and (max-width : 550px) {

  .customers li{

    width: 25%;

    margin: 0;

  }

  .social-banners{

    margin-top: 50px;

  }

  .social-banners > a{

    float: none;

    width: 100%;

    margin-top: 0;

  }

  .footer-top .col-xs-12{

    width: 100%;

    display: table;

    float: none;

  }

  .portfolio-wrapper .more-info{

    display: none;

  }

  .breadcrumbs{

    font-size: 13px;

    margin: 15px 0;

  }

  .breadcrumbs li{

    margin-right: 10px;

  }

  .logo-inside{

    width: 200px;

  }

  .logo-inside img{

    width: 100%;

  }

  .features-step3 .col-md-24.col-sm-12.col-xs-12{

    width: 100%;

  }

  .tile.title-card, .tile.en-title-card{

    width: 100% !important;

    height: auto!important;

  }

  .title-content{

    position: static !important;

  }

  .tile.title-card,

  .tile.des-tile{

    text-align: right !important;

  }

  .tile.en-title-card{

    text-align: left !important;

  }

}



@media screen and (max-width : 500px) {

  .col-xs-500{

    float: none;

    width: 100%;

  }

  .team ul li{

    width: 50%;

    padding: 0;

  }

  .mainmenu a{

    padding: 12px 8px 13px;

  }

  .top-bar{

    font-size: 11px

  }

  .text-slider{

    width: 130px;

  }

  .slogan{

    font-size:17px;

  }

  .slogan2{

    font-size:28px;

    margin-bottom: 0;

  }

  .h500{

    display: none;

  }

  .des-section{

    width: 100%;

  }

  .portfolio{

    width: 100%;

  }

  .second-step{

    padding: 75px 0;

  }

  .worms > img{

    max-width: 32%

  }

  .spaceship{

    display: none;

  }

  .forth-step .col-md-8.col-sm-15.col-xs-16{

    width: 100%;

  }

  .breadcrumbs {

    margin: 7px 0;

  }

  .logo-inside img{

    width: 150px;

  }

  .services a{

    padding: 2px 5px 5px!important;



  }

}



@media screen and (max-width : 480px) {

  .worms{

    display: none;

  }

  .services-list h3{

    font-size: 25px;

  }

  .services-list a > span{

    font-size: 15px;

  }

  .services-list ul{

    display: block;

  }

  .butterfly{

    display: table;

    margin: 0 auto;

    float: none;

    max-width: 100px;

  }

  blockquote{

    width: 230px;

  }

  .ilists,

  .nlists{

    width: 100%;

  }

  .nlists{

    margin-top: 10px;

  }

    .call-to-action {

        position: static;
        opacity: 100;
        visibility: visible;
        margin: 25px auto 60px auto !important;
  }
  .call-to-action.multi-action:before {
    display: none;
  }
  .multi-action {
    display: none;
  }

}



@media screen and (max-width : 430px) {

  .customers li{

    width: 33.3%;

    margin: 0;

  }

  .article-item .thumb{

    width: 100%;

    height: auto;

    margin: 0 0 20px;

  }

  .article-item .thumb img{

    width: 100%;

  }

  .order-form button{

    font-size: 13px;

  }

  .breadcrumbs{

    display: none;

  }

  .img-thumbnail.pull-right.ml2{

    float: none!important;

    margin: 0 auto;

    display: block;

    width: 100%;

  }



}



@media screen and (max-width : 370px) {

  .mainmenu a{

    padding: 12px 4px 13px;

  }

  .logo {

    width: auto;

    text-align: center;

    margin-bottom: 0;

  }

  .logo a img {

    width: 150px;

  }

  .slogan{

    font-size: 13px;

    margin-top: 30px;

  }

  .text-slider{

    width: 105px;

  }

  .slogan2{

    font-size: 21px;

    line-height: 20px;

  }

  .intro-box{

    width: auto;

    padding: 10px;

  }

  .top-bar{

    font-size: 10px;

  }

  .tile.logo-card{

    width: 100%;

  }

}







// @media screen and (max-height : 1000px) {  

//   .line-wrapper{

//     margin-top: -300px;

//   }

// }

// @media screen and (max-height : 800px) {  

//   .line-wrapper{

//     margin-top: -200px;

//   }

// }





@media screen and (max-height : 720px) and (max-width : 767px) {

  .spiralgraph a{

    padding: 10px 0;

  }

  .spiralgraph li b{

    bottom: 10px;

  }

}



@media screen and (max-height : 720px) and (max-width : 767px) {

  .spiralgraph.singlePage-menu a{

    padding: 10px 0;

  }

  .spiralgraph.singlePage-menu li b{

    bottom: 10px;

  }

  .spiralgraph.singlePage-menu li a > span{

    display: none;



  }

}





@media screen and (max-height : 450px) and (max-width : 767px) {

  .singlePage-menu a{

    padding: 10px 0;

  }

  .singlePage-menu li b{

    bottom: 10px;

  }

}



@media screen and (max-height : 370px) and (max-width : 767px) {

  .spiralgraph a{

    padding: 5px 0;

  }

  .spiralgraph li b{

    bottom: -20px;

  }

}



@media screen and (max-height : 350px) and (max-width : 767px) {

  .singlePage-menu a{

    padding: 10px 0;

  }

  .singlePage-menu li b{

    bottom: 10px;

  }

  .singlePage-menu li a > span{

    display: none;

  }

}