/* Copyright 2015, Avadine */

/*---------------------------- Home ---------------------------*/
.home {
   width: 980px;
   margin: 0 auto;
}

#header {
   min-width: inherit;
}

#footer {
   min-width: inherit;
}

.steps {
   border-style: solid none solid none;
   border-color: #ECEDE6;
   border-width: 1px;
   background: none repeat scroll 0 0 #FFFFFF;
   border-radius: 4px;
   box-shadow: 0 0 2px #000000, 0 3px 5px #000000;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
   margin: 5px;
   margin-bottom: 210px;
   width: 250px;
   height: 200px;
   float: left;
}

   .steps > div {
      margin: 10px;
      max-width: 400px;
   }

   .steps h3 {
      font-size: 20px;
      margin: 10px 0;
   }

   .steps ol {
      counter-reset: li; /* Initiate a counter */
      margin-left: 0; /* Remove the default left margin */
      padding-left: 0; /* Remove the default left padding */
   }

      .steps ol > li {
         position: relative; /* Create a positioning context */
         margin: 0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
         padding: 4px 10px; /* Add some spacing around the content */
         list-style: none; /* Disable the normal item numbering */
         border-top: 2px solid rgb(128, 128, 128);
         font-size: 18px;         
         border-radius: 0 4px 4px 0;
      }

         .steps ol > li:nth-child(odd) {
            background-color: #F8FAF2;
         }

         .steps ol > li:before {
            content: counter(li); /* Use the counter as content */
            counter-increment: li; /* Increment the counter by 1 */
            /* Position and style the number */
            position: absolute;
            top: -2px;
            left: -2em;            
            box-sizing: border-box;            
            border-radius: 4px 0 0 4px;
            width: 2em;
            margin-right: 8px;
            padding: 6px;
            border-top: 2px solid rgb(128, 128, 128);
            color: #fff;
            font-weight: bold;
            background: rgb(128, 128, 128);
            text-align: center;
         }

.feature-grid {
   clear: both;
   margin: 0 auto;
}

.feature {
   float: left;
   width: 33.33%;
   height: 450px;
}

   .feature > div {
      margin: 10px;
   }

   .feature img {
      border: 2px solid #fff;      
      border-radius: 4px;
      display: block;
      margin: 0 auto;
   }

/*---------------------------- Resizing --------------------------*/
@media (max-width: 980px) {
   .home {
      width: 100%;      
      min-width: 380px;
   }

   .feature {
      width: 50%;
   }
}

@media (max-width: 767px) {
   .center-on-resize {
      text-align: center;
   }

   .feature {
      width: 100%;
      height: auto;
      margin: 10px 0;
   }

      .feature h3 {
         text-align: center;
      }

   .steps {
      float: none;
      margin: 20px auto;
   }

      .steps > div {
         max-width: 400px;
      }

   .screenshot > img {
      margin-top: 20px;
   }

   .shot-left, .shot-right {
      margin: 20px 0 0 0 !important;
      float: none;
   }
}

@media (max-width: 480px) {
   .video {
      height: 315px;
   }

   .steps {
      width: 100%;
   }

   .shot-left, .shot-right {
      display: none;
   }
}

@media (max-width: 767px) {

   #header {      
      min-width: 90%;
      background-position: left bottom, right bottom, left bottom;
      margin-bottom: 10px;
   }

   #content {
      margin: 0 10px 0 10px;
      min-height: 400px;      
      min-width: 90%;
   }

   #header ul#nav-links li {
      margin: 0;
      display: block !important;
   }

   #footer {      
      min-width: 90%;
   }
}