// Variables
$body-background: #16b8e8;
$width-cm-logo: 14px;
$height-cm-logo: 11px;

$device-border: #202123;

$client-width: 144px;
$client-height: 216px;

$desktop-width: 222px;
$desktop-height: 147px;
$desktop-radius: 5px;
$desktop-padding-top: 11px;
$desktop-padding-right: 12px;
$desktop-padding-bottom: 16px;
$desktop-padding-left: 12px;
$desktop-width-stand: 32px;
$desktop-height-stand: 17px;
$desktop-width-bottom-stand: 72px;
$desktop-height-bottom-stand: 6px;
$desktop-color-stand: #8E959D;


$tablet-width: 88px;
$tablet-height: 130px;
$tablet-radius: 6px;
$tablet-padding-top: 11px;
$tablet-padding-right: 4px;
$tablet-padding-bottom: 13px;
$tablet-padding-left: 4px;
$tablet-size-homebutton: 8px;
$tablet-color-homebutton: #72777D;
$tablet-width-camera-speaker: 3px;
$tablet-height-camera-speaker: 2px;
$tablet-color-camera-speaker: #72777D;

$phone-width: 54px;
$phone-height: 110px;
$phone-radius: 3px;
$phone-padding-top: 11px;
$phone-padding-right: 3px;
$phone-padding-bottom: 14px;
$phone-padding-left: 3px;
$phone-size-homebutton: 8px;
$phone-color-homebutton: #72777D;
$phone-width-camera-speaker: 10px;
$phone-height-camera-speaker: 2px;
$phone-color-camera-speaker: #72777D;

$email-header-color: #F1ECE6;
$email-header-color-logo: #FECE3C;
$email-header-color-wordmark: #5F6A70;
$email-content-color: #fff;
$email-content-color-image: #2C96D2;
$email-content-color-text: #94CBEA;
$email-content-color-link: #F6BE33;
/*
$last-slide-color: #2f343d;*/
$last-slide-color: $body-background;


body {
  min-height: 100vh;
  background: #333;
}

.ad-frame {
  width: 100%;
  min-width: 260px;
  height: 100%;
  min-height: 260px;
  max-height: 300px;
  max-width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow:hidden;
  background: $body-background;
  transition: background 0.2s linear;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -180px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 400px 0 0 700px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.02);
  }
  
  &:before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -180px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 400px 700px;
    border-color: transparent transparent rgba(0, 0, 0, 0.03) transparent;
  }
  
  .shadow {
    opacity: 0;
    content:'';
    display: block;
    position: absolute;
    height:4px;
    bottom: 62px;
    left: 50%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165);
  }
  
  &.slide-7 {
    background-color: $last-slide-color;
  }
  
  &.slide-4 {
    .shadow {
      opacity: 1;
      min-width: $desktop-width-bottom-stand;
      margin-left: ($desktop-width-bottom-stand / 2 * -1);
    }
  }
    
  &.slide-5 {
    .shadow {
      opacity: 1;
      min-width: $tablet-width;
      margin-left: ($tablet-width / 2 * -1);
    }
  }
      
  &.slide-6 {
    .shadow {
      opacity: 1;
      min-width: $phone-width;
      margin-left: ($phone-width / 2 * -1);
    }
  }
}

.cm-logo {
	width: $width-cm-logo;
	height: $height-cm-logo;
	fill: #fff;
	position: absolute;
	top: 16px;
	left: 50%;
  z-index: 1;
	margin-left: ($width-cm-logo / 2 * -1);
  
  .slide-7 & {
    opacity: 0;
  }
}

.cm-logo-word {
  width: 146px;
  height: 22px;
  fill: #fff;
  position: absolute;
  bottom: 16px;
  left: 50%;
	margin-left: (146px / 2 * -1);
  opacity: 0;
  
  .slide-7 & {
    transition: all 0.4s linear;
    opacity: 1;
  }
}

h1, h2 {
  font-family: "Avenir", sans-serif;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 21px;
  line-height: 1.3em;
  text-align: center;
  letter-spacing: -0.05em;
  position: absolute;
  width: 100%;
}

h1 {
  opacity: 0;
  top: 22%;
  transition: all 0.3s ease-out;
  
  .slide-1 & {
    opacity: 1;
  }
}

h2 {
  opacity: 0;
  z-index: 4;
  .slide-7 & {
    transition: opacity 0.3s ease-out;
    transition-delay: 0.4s;
    opacity: 1;
    top: 22%;
  }
}

.link-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.replay {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  color: lighten($last-slide-color, 30%);
  fill: #fff;
  width: 16px;
  height: 16px;
  padding: 8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  z-index: 11;
  cursor: pointer;
  
  .slide-7 & {
    transition: opacity 0.3s ease-out;
    transition-delay: 0.4s;
    opacity: 1;
  }
}

.button {
  display: inline-block;
  font-family: 'Avenir', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0em;
  text-shadow: 0 1px 2px #426d06;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 0 #a0d642, 0 2px 2px rgba(0, 0, 0, 0.1);
  background: #7cbc27;
  background: linear-gradient(to bottom,#7cbc27 0,#62a30c 100%);
  border-radius: 3px;
  padding: 20px 0 19px 0;
  color: #fff;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 11;
  border-top: 1px solid #61a30c;
  border-left: 1px solid #579409;
  border-right: 1px solid #579409;
  border-bottom: 1px solid #4a8004;
  opacity: 0;
  top: 44%;
  position: absolute;
  width: 260px;
  left: 50%;
  margin-left: -130px;
  cursor: pointer;
  
  .slide-7 & {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.1s ease-out;
    transition-delay: 0.4s;
  }
  
  &:hover {
    background: linear-gradient(to bottom,#87c32b 0,#6eaf0e 100%);
  }
  
  &:active {
    box-shadow: inset 0 3px 10px #4f8514;
    padding: 22px 0 17px 0;
    outline: 0;
    border-color: #4f8514;
  }
  
  &:focus {
    outline: 0;
  }
}

.device {
	position: absolute;
	bottom: 50%;
	left: 50%;
	background: $device-border;
	box-sizing: border-box;
   z-index: 2;
	transition: all 0.1s ease-in;

  .screen {
    background: #D9DEE2;
	  width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .stand {
    position: absolute;
    opacity: 0;
    transform: translateY((($desktop-height-stand + $desktop-height-bottom-stand) * -1));
    transition: all 0.1s ease-out;
    z-index: 0;
    bottom: ($desktop-height-stand * -1);
    left: 50%;
    margin-left: ($desktop-width-stand / 2 * -1);
    min-width: $desktop-width-stand;
    min-height: $desktop-height-stand;
    width: $desktop-width-stand;
    height: $desktop-height-stand;
    background: $desktop-color-stand;
    box-shadow: inset 0 4px 0 darken($desktop-color-stand, 16%);
    
    &:after {
      min-width: $desktop-width-bottom-stand;
      min-height: $desktop-height-bottom-stand;
      width: $desktop-width-bottom-stand;
      height: $desktop-height-bottom-stand;
      background: lighten($desktop-color-stand, 10%);
      content: '';
      position: absolute;
      bottom: ($desktop-height-bottom-stand * -1);
      left: 50%;
      margin-left: ($desktop-width-bottom-stand / 2 * -1);
      border-radius: 3px;
      box-shadow: inset 0 -2px 0 darken($desktop-color-stand, 8%);
    }
  }
  
  &:before, &:after {
    content: '';
    position: absolute;
    transition: all 0.1s ease-out;
    opacity: 0;
  }
  
  &:before {   
    left: 50%;
    top: 5px;
  }
  
  &:after {   
    left: 50%;
    bottom: 5px;
  }
  
  &.client {
    min-width: $client-width;
    min-height: $client-height;
    width: $client-width;
    height: $client-height;
    margin-bottom: (($client-height / 2 * -1) - 10px);
    margin-left: ($client-width / 2 * -1);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
    
    .screen {
      
      .email {
        
        .content {
          max-width: 100%;
          opacity: 1;
          padding-bottom: 35px;
          transition: opacity 0.2s linear;
          
          > ul {
            opacity: 1;
            background: none;    
            box-shadow: none;
            text-align: left;
            
            &.full {
              margin-bottom: 8px;
              transition-delay: 0.1s !important;
              
              li {
                margin-bottom: 5px;
                height: 5px;
                min-height: 5px;
                
                &.img {
                  height: 54px;
                  min-height: 54px;
                  transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                  transition-delay: 0.1s !important;
                }
                
                &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9) {
                  transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                  transition-delay: 0.2s !important;
                }
              }
            }
            
            &.half {
              li {
                &.img {
                  height: 27px;
                  min-height: 27px; 
                }
              }
              &.left {
                transition-delay: 1.1s !important;
                margin-right: 8%;
                li {
                  
                  &.img {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 1.1s !important;
                  }

                  &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9) {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 1.2s !important;
                  }
                }
              }
              &.right {
                
                transition-delay: 2.1s !important;
                li {
                  &.img {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 2.1s !important;
                  }

                  &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9) {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 2.2s !important;
                  }
                }
              }
              
            }
          }
        }
      }
    }
    
    &.empty {
      
      transition: transform 0.4s cubic-bezier(0.275, 0.140, 0.205, 1.165), min-width 0.1s ease-out, min-height 0.1s ease-out;
      transition-delay: 0.1s;
      
      .screen {
        .email {
          .content {
            position: relative;
            transition: opacity 0.1s linear;
            > ul {
              border-radius: 3px;
              background: #ebebec;
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
              text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
              box-sizing: border-box;
              margin-bottom: 8px;
              &.half.left {
                margin-right: 8%;
              }
              li {
                opacity: 0 !important;
                transform: translateX(-250px) translateY(-20px) scale(2) !important;
              }
              
              &.half.right {
                li {
                  transform: translateX(-350px) translateY(60px) scale(2) !important;
                }
              }
            }
          }
        }
      }
    }
    
    &.hidden {
      transform: translateY(90px);
      transition-delay: 0s;
    }
  }
  
  &.desktop {
    min-width: $desktop-width;
    min-height: $desktop-height;
    width: $desktop-width;
    height: $desktop-height;
    border-radius: $desktop-radius;
    margin-bottom: (($desktop-height - $desktop-height-stand - $desktop-height-bottom-stand) / 2 * -1);
    margin-left: ($desktop-width / 2 * -1);
    padding: $desktop-padding-top $desktop-padding-right $desktop-padding-bottom $desktop-padding-left;
    
    animation: animationDevicesDesktop 300ms linear 100ms;
    
    
    .stand {
      opacity: 1;
      transform: translateY(0);
    }
    
    .screen {
      .email {
        
        .header {
          height: 23px;
          min-height: 23px;
          box-shadow: inset 0 -2px 0 darken($email-header-color, 5%);
          
          .logo {
            width: 12px;
            height: 12px;
            min-width: 12px;
            min-height: 12px;
            top: 4px;
            left: 7px;
            
            &:after {
              width: 27px;
              height: 3px;
              min-width: 27px;
              min-height: 3px;
              top: 5px;
              right: -31px;
            }
          }
        }
        .content {
          width: 100px;
          min-width: 100px;
          margin: 0 auto;
          padding: 9px 13px;
          
          > ul {
            
            &.full {
              padding-bottom: 4px;
              
              li {
               
                margin-bottom: 3px;
                height: 3px;
                min-height: 3px;
                
                &.img {
                  height: 38px;
                  min-height: 38px;
                }
               
              }
            }
            
            &.half {
              
              li {
                margin-bottom: 2px;
                height: 2px;
                min-height: 2px;
                
                &.img {
                  height: 19px; 
                  min-height: 19px; 
                }
              }
            }
          }
        }
      }
    }
	}

  &.tablet {
    min-width: $tablet-width;
    min-height: $tablet-height;
    width: $tablet-width;
    height: $tablet-height;
    border-radius: $tablet-radius;
    margin-bottom: ($tablet-height / 2 * -1);
    margin-left: ($tablet-width / 2 * -1);
    padding: $tablet-padding-top $tablet-padding-right $tablet-padding-bottom $tablet-padding-left;
    animation: animationDevicesTablet 300ms linear 100ms;

    &:before {
      min-width: $tablet-width-camera-speaker;
      min-height: $tablet-height-camera-speaker;
      background: $tablet-color-camera-speaker;
      left: 50%;
      top: 5px;
      margin-left: ($tablet-width-camera-speaker / 2 * -1);
      opacity: 1;
    }
    
    &:after {
      min-width: $tablet-size-homebutton;
      min-height: $tablet-size-homebutton;
      background: $tablet-color-homebutton;
      border-radius: 50%;
      left: 50%;
      bottom: 2px;
      margin-left: ($tablet-size-homebutton / 2 * -1);
      opacity: 1;
    }
    
    .screen {
      .email {
        .header {
          height: 20px;
          min-height: 20px;
          box-shadow: inset 0 -2px 0 darken($email-header-color, 5%);
          
          .logo {
            width: 10px;
            height: 10px;
            min-width: 10px;
            min-height: 10px;
            top: 4px;
            left: 6px;
            
            &:after {
              width: 21px;
              height: 2px;
              min-width: 21px;
              min-height: 2px;
              top: 4px;
              right: -24px;
            }
          }
        }
        .content {
          padding: 7px 11px;
          max-width: 100px;
          
          > ul {
            
            &.full {
              padding-bottom: 3px;
              
              li {
                margin-bottom: 2px;
                height: 3px;
                min-height: 3px;
                
                &.img {
                  height: 30px;
                  min-height: 30px;
                }
             
              }
            }
            
            &.half {
              
              li {
                margin-bottom: 2px;
                height: 2px;
                min-height: 2px;
                
                &.img {
                  height: 14px;
                  min-height: 14px; 
                }
              }
            }
          }
        }
      }
    }
	}

  &.phone {
    min-width: $phone-width;
    min-height: $phone-height;
    width: $phone-width;
    height: $phone-height;
    border-radius: $phone-radius;
    margin-bottom: ($phone-height / 2 * -1);
    margin-left: ($phone-width / 2 * -1);
    padding: $phone-padding-top $phone-padding-right $phone-padding-bottom $phone-padding-left;
    animation: animationDevicesPhone 300ms linear 100ms;
    
    &:before {
      min-width: $phone-width-camera-speaker;
      min-height: $phone-height-camera-speaker;
      background: $phone-color-camera-speaker;
      left: 50%;
      top: 5px;
      margin-left: ($phone-width-camera-speaker / 2 * -1);
      opacity: 1;
    }
    
    &:after {
      min-width: $phone-size-homebutton;
      min-height: $phone-size-homebutton;
      background: $phone-color-homebutton;
      border-radius: 50%;
      left: 50%;
      bottom: 3px;
      margin-left: ($phone-size-homebutton / 2 * -1);
      opacity: 1;
    }
    
    .screen {
      .email {
        .header {
          height: 10px;
          min-height: 10px;
          box-shadow: none;
          
          .logo {
            width: 6px;
            height: 6px;
            min-width: 6px;
            min-height: 6px;
            top: 2px;
            left: 4px;
            
            &:after {
              width: 14px;
              height: 2px;
              min-width: 14px;
              min-height: 2px;
              top: 2px;
              right: -17px;
            }
          }
        }
        .content {
          padding: 4px 5px;
          
          > ul {
            
            &.full {
              padding-bottom: 2px;
              
              li {
                height: 2px;
                min-height: 2px;
                margin-bottom: 2px;
                
                
                &.img {
                  height: 22px;
                  min-height: 22px;
                }
                
              
              }
            }
            
            &.half {
              width: calc(100%);
              min-width: calc(100%);
              float: none;
              margin: 0 auto;
              
              li {
                margin-bottom: 2px;
                height: 2px;
                min-height: 2px;
                
                &.img {
                  height: 20px; 
                  min-height: 20px; 
                }
              }
            }
          }
        }
      }
    }
    
    &.lost {
      min-width: 2px;
      min-height: 2px;
      height: 2px;
      width: 2px;
      margin-left: -1px;
      margin-bottom: -1px;
      background: transparent;
      transition: all 0.2s ease-out !important;
      
      &:before, &:after, * {
        background: transparent !important;
        transition: none !important;
      }

      .email {
        transform: scale(1);
      }
    }
	}
}

.email {
  .header {
    position: relative;
    background: $email-header-color;
    box-shadow: inset 0 -4px 0 darken($email-header-color, 5%);
    height: 35px;
    width: 100%;
    transition: all 0.1s ease-out;
    
    .logo {
      background: $email-header-color-logo;
      width: 17px;
      height:17px;
      border-radius: 50%;
      position: absolute;
      top: 7px;
      left: 11px;
      transition: all 0.1s ease-out;
      
      &:after {
        content: '';
        position: absolute;
        right: -45px;
        top: 7px;
        background: $email-header-color-wordmark;
        width: 38px;
        height: 4px;
        transition: all 0.1s ease-out;
      }
    }
  }
  
  .content {
    background: $email-content-color;
    box-sizing: border-box;
    padding: 15px 18px;
    overflow: hidden;
    
    
    max-width: 144px;
    margin: 0 auto;
    
    > ul {
      font-size: 0;
      transition: all 0.1s ease-out;
      
      li {
        display: inline-block;
        background: $email-content-color-text;
        transition: all 0.2s ease-out !important;
        
        &:nth-child(4), &:nth-child(7), &:nth-child(9) {
          margin-right: 0 !important;
        }
        
        &.img {
          background: $email-content-color-image;
          min-width: 100%;
          width: 100%;
          margin-right: 0 !important;
        }
        
        &.link {
          background: $email-content-color-link;
        }
      }
      
      &.full {
        padding-bottom: 4px;
        li {
          margin-right: 3%;
          margin-bottom: 5px;
          height: 5px;
          min-height: 5px;
          
          &.img {
            height: 54px;
            min-height: 54px;
          }
          
          &:nth-child(2) {
            min-width: 24%;
          }
          &:nth-child(3) {
            min-width: 28%;
          }
          &:nth-child(4) {
            min-width: 42%;
          }
          &:nth-child(5) {
            min-width: 32%;
          }
          &:nth-child(6) {
            min-width: 32%;
          }
          &:nth-child(7) {
            min-width: 27%;
          }
          &:nth-child(8) {
            min-width: 61%;
          }
          &:nth-child(9) {
            min-width: 35%;
          }
        }
      }
      
      &.half {
        width: calc(46%);
        float: left;
        
                
        li {
          margin-right: 4%;
          height: 3px;
          min-height: 3px;
          margin-bottom: 4px;
        }
        
        &.left {
          margin-right: 8%;
          li {
            &:nth-child(2) {
              min-width: 15%;
            }
            &:nth-child(3) {
              min-width: 26%;
            }
            &:nth-child(4) {
              min-width: 48%;
            }
            &:nth-child(5) {
              min-width: 32%;
            }
            &:nth-child(6) {
              min-width: 26%;
            }
            &:nth-child(7) {
              min-width: 22%;
            }
            &:nth-child(8) {
              min-width: 56%;
            }
            &:nth-child(9) {
              min-width: 35%;
            }
          }
        }
        &.right {
          li {
            &:nth-child(3), &:nth-child(6), &:nth-child(9) {
              margin-right: 0 !important;
            }
            
            &:nth-child(2) {
              min-width: 53%;
            }
            &:nth-child(3) {
              min-width: 31%;
            }
            &:nth-child(4) {
              min-width: 42%;
              margin-right: 4% !important;
            }
            &:nth-child(5) {
              min-width: 37%;
            }
            &:nth-child(6) {
              min-width: 8%;
            }
            &:nth-child(7) {
              min-width: 36%;
              margin-right: 4% !important;
            }
            &:nth-child(8) {
              min-width: 19%;
            }
            &:nth-child(9) {
              min-width: 8%;
            }
          }
        }
      }
    }
  }
}

.slide-1 *, .slide-1 *:before, .slide-1 *:after {
  transition: none !important;
}




@keyframes animationDevicesDesktop { 
  0% {
    transform: scale3d(.8, .8, .8);
  }

  20% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  60% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    transform: scale3d(.99, .99, .99);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animationDevicesTablet { 
  0% {
    transform: scale3d(.9, .9, .9);
  }

  20% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  60% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    transform: scale3d(.99, .99, .99);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animationDevicesPhone { 
  0% {
    transform: scale3d(.8, .8, .8);
  }

  20% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  60% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    transform: scale3d(.99, .99, .99);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}