
    /*_____________________________________________________
  
          LARGE SCREENS
    _____________________________________________________*/


@media screen and (min-width: 1400px) {

.extended-portfolio {
  max-width: 1400px;
  height: auto;
}

.step-box .paragraph-medium, .quote-box p {
 padding-right: 20%;
 padding-left: 20%;
} 

.two-column-section {
  max-width: 1400px;
}

.close {
  right: none;
  left: 25px;
}

}


@media screen and (max-width: 1200px) {

    /*_____________________________________________________
  
          SMALL LAPTOPS
    _____________________________________________________*/

.margin-top {
  margin-top: 250px;
}

.two-column-section-contact {
    padding-left: 10%;
  }

  .middle-right, .middle-left {
    width: 70%!important;
  }


.column img, .column-two img, .column-three img, .column-four img, .column-pn .img__wrap img {
    max-height: 300px;
}



/*
    === SERVICES
*/

  .services-list img {
    max-width: 120px;
  }

}
  /*_____________________________________________________
  
         === END OF SMALL LAPTOPS ===
    _____________________________________________________*/


@media screen and (max-width: 959px) {

  /*_____________________________________________________
  
          TABLETS
    _____________________________________________________*/

/*
     === GENERAL
*/

.column img, .column-two img, .column-three img, .column-four img, .column-pn .img__wrap img {
    width: 100%;
    height: auto;
}


 .column-pn .img__wrap .view-more {
  padding-top: 60px;
 }


.column, .column-two , .column-three , .column-four  {
  flex: 100%;
  max-width: 100%;
  border: #ffffff solid 10px;
      border-right: 0px;
      border-left: 0px;
}

p {
  font-size: 17px;
}

.margin-top {
  margin-top: 70px;
}

.full-screen {
   min-height: 100%!important;
}

.partial-screen-display {
  height: 100%!important;
}

.center-align {
  display: grid!important; 
  height: 100%!important;
}

.grid {
  min-width: 100%!important;
}

.view-button, .view-text {
  visibility: visible;
}

.middle-right, .middle-left {
  width: unset!important;
}

footer {
  height: 100px;
}

footer div {
  width: 100%;
  }

 .site-map a {
    text-decoration: underline;
  }

.paragraph-small {
  margin-left: 14px;
}

.two-column-section-contact {
  padding-right: 0;
  padding-bottom: 50px;
}

.social-right {
  padding: 0;
  margin-right: 20px;
}

.device-hide {
  visibility: hidden!important;
}

.tablet-margin {
  margin-top: 600px;
}

.tablet-left {
  padding-left: 15px;
}

.device-top {
  margin-top: 50px;
}

/*
     === HOME
*/

/*  .day-home, .sunset-home, .night-home {
    background: url('../images/bgnew-tablet.png')!important;
    width: 100%!important;
    background-position: center 0!important;
    background-repeat: no-repeat!important;
  }*/

  .tab-width {
    width: 70%!important;
    float: unset!important;
  }

  .gif {
  width: 100%;
  }

  .portfolio-box-two {
    width: 90%;
  }

  .client-box {
    width: 20%;
  }

  .step-icon {
    width: 80px;
  }

  .project-map {
    display: none;
  }

  .more-work-feature {
     width: 100%;
  }

/*
     === ABOUT
*/
  
 .about {
     /*height: 300px;*/
  }

/*
    === SERVICES
*/

.services-list img {
  max-width: 100px;
}

/*
     === WORK
*/

.img__description_layer, .img__description_layer-pn {
  visibility: visible!important;
  opacity: 1;
}

.services-list img {
  width: 50px;
}

 .portfolio-intro, .portfolio-intro-av {
  height: auto;
  min-height: 200px;
  }

  .icon-work {
    display: none;
  }

  .tabs label {
    max-width: 100px;
    padding: 3% 2%;
  }


/*
     === INTERSECTION SERIES
*/


.portfolio-intersection-tv {
  /*background-image: url(../images/portfolio/intersection/bg-2.jpg);*/
  background-position: 40% 50%;
}





}
  /*_____________________________________________________
  
         === END OF TABLETS ===
    _____________________________________________________*/



@media screen and (max-width: 768px) {

  /*_____________________________________________________
  
          MOBILE
    _____________________________________________________*/


/*
  === GENERAL
*/

.mob-hide {
  visibility: hidden;
}

.no-margin-mob {
  margin-left: 0!important; 
  margin-right: 0!important; 
}

.no-top-space-mini-mob {
  margin-top: 0!important;
}

.go-down {
    visibility: hidden;
  }

  #demo {
    padding-top: 170px;
  }

.full-wide-setup {
  margin: auto!important;
}

.mobile-margin {
  margin-top: 400px!important;
}

.mobile-margin .padding-top {
  padding: 0;
}

.padding-mob {
  padding: 20px;
}

.padding-bottom-mob {
  padding-bottom: 20px;
}

.padding-top-mob {
  padding-top: 60px;
}

#demo {
  height: 20px!important;
  z-index: 10;
}

/*.grid, */
.col-7-12 {
 padding-right: 0!important;
 padding-left: 0!important;
}

.col-5-12 {
  width: 100%!important;
}

.col-7-12 {
  width: auto!important;
}

h1 {
   font-size: 35px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h6 {
    font-size: 17px;
}

p {
  font-size: 16px;
}

.side-nav {
    display: none;
}

/*.main-nav, .portfolio-nav {
  background: #ffcc33;
  min-height: 220px;
  margin-top: 55px;
}*/

.nav-hp {
  margin-top: 20px!important;
}

.active {
  color: #ffffff!important;
}

.main-nav a, .portfolio-nav a {
  display: block;
  padding-bottom: 0;
  color: #2d282d;
  text-decoration: underline;
  padding-top: 0;
}

.main-nav a:hover, .portfolio-nav a:hover, .site-map a:hover {
  color: #ffffff;
}

.main-nav-sections-layout {
  /*margin-top: 20px;*/
  position: unset;
}

.logo {
  position: absolute;
  width: 100%;
  text-align: center;
  margin-left: 0;
  padding-left: 0!important;
}

.logo-center {
  padding-top: 20px;
}

/*.logo-center-hp {
  display: block!important;
  padding-top: 20px;
}*/

#button-top {
  display: block;
  left: unset;
  right: 30px;
}

.container {
    /*margin-left: 75px;*/
    margin-right: 0%!important;
    margin-left: 0%!important;
    padding: 20px;
    text-align: center;
}

.wide-setup, .wide-setup-transparent {
  margin-left: 0px!important;
} 

.margins {
  margin-left: 0%!important;
  margin-right: 0%!important;
}

.margin-top {
  margin-top: 30px;
}

.margin-top-exception {
  margin-top: 300px
}

.padding-around {
  padding: 0px!important;
}

.one-column-text {
  margin-left: 3%!important;
  margin-right: 3%!important;
}

.two-column-section-contact {
  margin-left: 0px!important;
}

.two-column-section div, .two-column-section-skills .middle-right, .two-column-section-skills .middle-left, .portfolio-banner-white-free {
  display: block;
  width: 100%;
  float: left;
}

.two-column-section {
  top: 0!important;
}

footer {
  height: 100px;
}

.device-hide {
  visibility: visible;
}

.device-none {
  display: none!important;
}

.tablet-margin {
  margin-top: 0!important;
}

.padding-top-large {
  padding-top: 0px!important;
}

.main-nav-sections-layout .padding-top
{
  padding-top: 0px!important;
}

.mobile-white {
  background-color: white;
}

.form-av form {
  width: auto;
}

  /*
      === HOME
  */

  .pad-right {
    padding-right: 0;
  }

  .portfolio-box-two {
    width: 100%;
    text-align: center;
  }

  .mob-width {
    width: 100px!important;
    float: unset!important;
  }

  .clients {
    display: inline-block;
    height: unset;
    background: unset;
    padding-left: 1px;
    text-align: left;
  }

  .client-box {
    /*width: unset;*/
    padding: 17px;
  }

  .step-box {
    width: 90%;
    padding-bottom: 10px!important;
  }

  .day-home, .sunset-home, .night-home {
    background: url('../images/mobile.png')!important;
    width: 100%!important;
    background-position: top !important;
    background-size: cover !important;
    background-repeat: no-repeat!important;
  }

  #promo-vid {
    width: 100%;
  }

  .img-stamp {
    width: 35%;
  }

  .img-df {
    width: 50%;
  }


/*
     === TABLE
*/

table td {
  width: 90%;
  float: left; 
  border-bottom: 1px solid #ecf0f1;
}

.packages td, .starter-packages td {
  width: 90%;
  float: left; 
  border-bottom: none;
  padding-right: 0;
}

.packages tr td, .starter-packages tr td {
  background-color: unset;
}

.packages td:hover, .starter-packages td:hover {
  background-color: #ffcc33;
}

tr td {
    background-color: #fff;
}

tr:nth-child(1) td:nth-child(2){
    background-color: #fff;
}

tr:nth-child(2) td:nth-child(1){
    background-color: #fff;
}

tr:nth-child(3) td:nth-child(2){
    background-color: #fff;
}


  /*
      === ABOUT
  */
  
 .about {
     /*height: 200px;
     background-position: 50% -30px!important;*/
  }

  .center-align {
   display: table-row!important;
  }

  .services-list,
  .middle-right ,
  .middle-left {
    width: 100%!important;
    margin-bottom: 50px;
  }

  .social-contact img {
    display: block!important;
    padding: 20px!important;
  }


  /*
      === CONTACT
  */
  
.two-column-section-contact {
    padding-left: 2.5%;
    padding-right: 5px!important;
    padding-bottom: 45px!important;
  }

.social-contact { 
  float: right!important;
 }

  .social-right {
    padding-top: 0px;
  }

 .social-right img {
    margin-left: 15px;
  }


/*
    === SERVICES
*/

.services-list img {
  max-width: 50px;
}


  /*
      === ABOUT SECTION HOMEPAGE
  */

.porfolio-box, .porfolio-box-two {
  width: 100%!important;
  float: left; 
}

.text-width {
    width: 90%!important;
}

.about-section-right {
  float: left;
  width: 100%;
}


/*
    === WORK
*/

.mobile-top {
  padding-top: 160px;
}

.mobile-top-l {
  padding-top: 180px;
}

.container-portfolio .img__wrap img {
    height: 100%;
    width: auto;
}

.column .img__wrap img, .column-two .img__wrap img, .column-three .img__wrap img, .column-four .img__wrap img, .column-pn .img__wrap img {
  width: 100%;
  height: auto;
}

.work-icon {
  padding: 10px!important;
}

.work-icon img {
  width: 50px!important;
}

.tabs label {
  max-width: 80px;
  padding: 6% 1%;
}

.column-pn {
    -webkit-flex: 100%; 
    -ms-flex: 100%; /* IE10 */
    flex: 100%;
    max-width: 100%;
    border-left: 0px;
    border-right: 0px;
}



/*
    === PORTFOLIO PAGES
*/
 .portfolio-intro, .portfolio-intro-av {
  height: auto;
  width: 100%; 
  text-align: center;
 }

  .portfolio-intro img {
  padding: 0;
  padding-bottom: 20px;
 }

 .quote-box {
  width: 95%;
 }

 .portfolio-text,  .portfolio-text-right {
  width: 95%!important;
  padding: 15px!important;
 }

 .margins-l {
  margin: 0!important;
 }

 .mobile-left {
  text-align: left;
  padding: 15px;
 }

 .mobile-c-a {
  float: left!important;
  display: inline-block!important; width: 100%;
 }

 .column-pn .img__wrap .view-more p {
  display: none;
 }

 .column-pn .img__wrap .view-more img {
  width: 20px!important;
 }

/*
    === AIMVISIA DIGITAL
*/

.stills .padding-top, #about-av .padding-top {
  padding: 0;
}

.playpause {
  display: none;
}


/*
    === INTERSECTION SERIES
*/

.mob-title {
  font-size: 33px!important;
}

.logo-mob-tv {
  width: 40%!important;
}

.portfolio-intersection-tv {
  /*background-image: url(../images/portfolio/intersection/bg-2.jpg);*/
  background-position: 50% 30%;
}


}




@media screen and (max-width: 768px) {


.social-contact img {
    width: 30px;
    display: inline-block!important;
    padding: 3px!important;
  }

  .sep {
    display: none!important;
  }

  .social-av a img {
  padding: 0 10px!important;
}

 .av-nav .portfolio-nav {
 background-color: transparent;
 margin-top: 0px;
 margin-bottom: 50px;
 }

  .av-nav .portfolio-nav a {
 color: white;
 }

 .av-cv tbody {
  width: 100%;
  font-size: 10px;
  background-color: #fff;
 }

  .av-cv tbody tr, .av-cv tbody tr td {
  background-color: #fff!important;
 }

}


