cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               <div class="wrap">
  <h1>Little UI details</h1>
   
  <p>素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントをご紹介します。これらの各ポイントは、もともと<a href="https://www.twitter.com/steveschoger">@steveschoger</a>がTwitterでツイートした内容となります。</p>
  
  <div class="lud-1 lud">
    <p class="sub-title">1. アイコンはラベルよりも少しだけ明るくしよう。</p>
    <p>文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報(文字ラベル)をうまく強調することができます。</p>
    <p>If you have icons next to labels, you can color them slightly lighter than the text that goes with them. This will make the most important info (the label) pop out.</p>
    
    <div class="ex-1 example">
      <ul>
        <li><i class="fa fa-home"></i><span>ホーム</span></li>
        <li class="active"><i class="fa fa-bed"></i><span>ホテル</span></li>
        <li><i class="fa fa-plane"></i><span>飛行機</span></li>
        <li><i class="fa fa-bath"></i><span>レジャー</span></li>
      </ul>
    </div>
  </div>
  
  <div class="lud-2 lud">
    <p class="sub-title">2. 明るい背景色では、白文字に少しだけ影を追加しよう。</p>
    
    <p>背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくなります。</p>
    <p>If you need to use a bright background color, and white text on it, you can put the text a nice subtle shadow to make it more readable.</p>
    
    <div class="ex-2 example">
      <p>注文状況</p>
      
      <div class="upper">
        <p class="revenue">$128,421.01</p>
        <p class="label">総売上げ</p>
      </div>
      <div class="lower">
        <p><b>4181</b> 販売数</p>
      </div>
    </div>
  </div>
  
  <div class="lud-3 lud">
    <p class="sub-title">3. 明るさの代わりに色相を変更して、グラデーションをより鮮やかにしよう。</p>
    
    <p>たとえば、ボタンにグラデーションを利用するときは、色相を変更してより鮮やかな見た目に仕上げるようにしましょう。</p>
    
    <p>When you use a gradient, in a button for example, be sure to change the hue to give the button a more "vivid" look.</p>
    
    <div class="ex-3 example">
      <button class="b-1">お問い合わせ</button>
      <button class="b-2">定期購読</button>
    </div>
  </div>
  
  <div class="lud-4 lud">
    <p class="sub-title">4. ホバーエフェクトとして、1/2px上下に動かしてみよう。</p>
    
    <p>このエフェクトの追記として、影のサイズを増やすことで、「持ち上がった」ような効果を実現できます。</p>
    <p>In addition to this effect, you can increase the size of the shadow to give the effect of "lifting up".</p>
    
    <div class="ex-4 example">
      <button class="b-1">アカウントを作成</button>
      <button class="b-2">サポートに連絡</button>
    </div>
  </div>
  
  <div class="lud-5 lud">
    <p class="sub-title">5. box-shadow を垂直方向に少しだけずらそう。</p>
    
    <p>このテクニックによって、カード型レイアウトやボックスなどのデザイン要素を、エフェクトなしの状態よりもナチュラルな見た目に仕上げることができます。</p>
    <p>This will give cards, boxes, or any other graphical element a more natural look than when no using any offset.</p>
    
    <div class="ex-5 example">
      <div class="card c-1">
        <p class="revenue">$128,421.01</p>
        <p class="label">総売上げ</p>
        
        <div class="line"></div>
        
        <p class="sales"><b>4181</b> 販売数</p>
      </div>
      
      <div class="card c-2">
        <p class="revenue">$1,009.84</p>
        <p class="label">昨日</p>
        
        <div class="line"></div>
        
        <p class="sales"><b>36</b> 販売数</p>
      </div>
      
      <div class="card c-3">
        <p class="revenue">$108.22</p>
        <p class="label">直近1時間</p>
        
        <div class="line"></div>
        
        <p class="sales"><b>3</b> 販売数</p>
      </div>
    </div>
  </div>
  
  <div class="lud-6 lud">
    <p class="sub-title">6. 文字テキストをきちんと整列させて、コンテンツをよりスキャンしやすくしよう。</p>
    
    <p>たとえばアイコンや画像などと同じラインに文字テキストを整列することで、ユーザーにとってより読みやすくなるでしょう。</p>
    <p>If your text is aligned properly (e.g. on the same line as the icons, or images), your text will be eaiser to read for the user.</p>
    
    <div class="example ex-6">
      <div class="col">
        <div class="icon-col">
          <i class="fa fa-database"></i>
        </div>
        <div class="text-col">
          <p class="title">データベース</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur.</p>
        </div>
      </div>
      <div class="col">
        <div class="icon-col">
          <i class="fa fa-gear"></i>
        </div>
        <div class="text-col">
          <p class="title">初期設定</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur, alias dolore illo amet.</p>
        </div>
      </div>
      <div class="col">
        <div class="icon-col">
          <i class="fa fa-shield"></i>
        </div>
        <div class="text-col">
          <p class="title">プロキシ</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur, alias dolore illo amet.</p>
        </div>
      </div>
      <div class="col">
        <div class="icon-col">
          <i class="fa fa-lock"></i>
        </div>
        <div class="text-col">
          <p class="title">セキュリティ</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda.</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="lud-7 lud">
    <p class="sub-title">7. 色付きの背景には、いつも灰色が最適です。</p>
    
    <p>背景と同じ色の色相の彩度を下げるか、RBGAを利用して透明度を下げることで、うまく文字テキストを合わせることができます。</p>
    <p>Either saturate your text with the same hue as the background, or use rgba with a lowered opacity to make the color of the text combine better with the background.</p>
    
    <div class="ex-7 example">
      <p class="title">会員登録はこちらから</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestiae nihil iusto mollitia amet provident, expedita dolorum facilis porro! Hic laboriosam.</p>
      
      <input type="text" placeholder="メールアドレスを入力...">
      <button>サインアップ</button>
    </div>
  </div>
  
  <div class="lud-8 lud">
    <p class="sub-title">8. リスト表示ではブレットの代わりにアイコンを利用しよう。</p>
    
    <p>矢印やチェックマークなどのアイコンを利用することで、通常のリスト表示に比べて魅力的に仕上げることができます。</p>
    <p>Using icons such as arrows or checkmarks will give more life to otherwise boring unordered lists.</p>
    
    <div class="ex-8 example">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam ad, excepturi quia molestias quisquam sit unde omnis a voluptate blanditiis accusantium! Voluptas itaque laborum, accusamus dicta nobis harum. Earum, a?</p>
      
      <ul>
        <div>
          <li>Lorem ipsum dolor</li>
          <li>Consectetur adipisicing</li>
          <li>Dicta nobis harum</li>
        </div>
        <div>
          <li>Voluptas itaque laborum</li>
          <li>Accusamus dicta</li>
          <li>Excepturi quia molestias</li>
        </div>
      </ul>
    </div>
  </div>
  <div class="lud-9 lud">
    <p class="sub-title">9. トップページ上部にアクセントカラーを利用しよう。Use a hint of color at the top of your hero.</p>
    
    <p>ウェブサイトのアクセントカラーを適用することで、デザイン性をグッと上げることができるテクニックのひとつ。</p>
    <p>This can bring liveliness to your design, complementing the accent color of your website.</p>
    
    <div class="ex-9 example">
      <div class="header">
        <div class="wrapper">
          <div>
            <p class="logo">Voluptate</p>
            <ul>
              <li>ホーム</li>
              <li>ツアー</li>
              <li>金額</li>
            </ul>
          </div>
          <div>
            <a href="#" class="log-in">ログイン</a>
            <a href="#" class="sign-up">サインアップ</a>
          </div>
        </div>
      </div>
      <div class="body">
        <p class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi ipsa.</p>
        <p class="sub">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto suscipit officia maiores.</p>
        
        <a href="#">
          <p class="label">Sign Up Now</p>
          <p class="desc">for a 30 day trial</p>
        </a>
      </div>
    </div>
  </div>
  
  <div class="lud-10 lud">
    <p class="sub-title">10. モーダルウィンドウやパネルにグラデーション・ボーダーを追加しよう。</p>
    
    <p>ひとつ前の小技に似ていますが、このテクニックは特にモーダルウィンドウやパネル型レイアウトに最適です。2色のグラデーションカラーを利用し、見た目をより魅力的にすることも可能です。</p>
    <p>Similar to the last tip, this will also work great in modals or panels. You can even use a two color gradient to make it look even better.</p>
    
    <div class="ex-10 example">
      <div class="modal">
        <p class="title">おめでとうございます。無事に設定が変更されました。</p>
        <p class="sub">Thanks for submitting the changes, you'll see them live in between 5-10 minutes. To undo the changes, just hit the back button.</p>
        
        <p class="more">ご質問がありますか? <a href="#">プレミアム詳細設定もお試しください。</a></p>
        
        <div class="actions">
          <button>適用する</button>
        </div>
      </div>
    </div>
  </div>
  <div class="lud-11 lud">
    <p class="sub-title">11. 隣り合うボックスレイアウトでは、ラインの代わりにコントラストを利用しよう。</p>
    
    <p>ライン線の代わりに、コントラストの少しだけ異なる配色を利用することで、より目に優しくクリーンな見た目を実現できます。</p>
    <p>Using two slightly contrasted colors instead of using a line will be more pleasing to the eye and look more clean.</p>
    
    <div class="ex-11 example">
      <div class="modal">
        <div class="upper">
          <p>Are you sure you want to delete the post?</p>
        </div>
        <div class="lower">
          <p>If you delete the post you'll never be able to see it again. Alternatively, you can do a back-up of it and then delete. To do this, head back to the post and look for the "Create Backup" button. Then click delete again.</p>
          
          <div class="actions">
            <button class="delete">Delete</button>
            <button class="cancel">Cancel</button>            
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lud-12 lud">
    <p class="sub-title">12. 色やフォントウエイトを利用して、文字の階層を作成しよう。</p>
    <p>見出しと本文など文字テキストの階層を定義するときは、太さの異なるフォント用ウェイト以外にも、色も利用することでうまく作成することができます。</p>
    <p>Not only using weight is enough, when you use color you have a well defined hierarchy between the title and the descrpition.</p>
    
    <div class="ex-12 example">
      <div class="col c-1">
        <p class="number">1</p>
        
        <p class="title">見出しタイトル1</p>
        <p class="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.</p>
      </div>
      
      <div class="col c-2">
        <p class="number">2</p>
        
        <p class="title">見出しタイトル2</p>
        <p class="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.</p>
      </div>
      
      <div class="col c-1">
        <p class="number">3</p>
        
        <p class="title">見出しタイトル3</p>
        <p class="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.</p>
      </div>
    </div>
  </div>
  
  <div class="lud-13 lud">
    <p class="sub-title">13. 本文コンテンツのフォントサイズに迷ったら、16pxにline-height:1.5 を指定しよう。</p>
    
    <p>同時に、黒(#000000)の代わりに、濃い灰色を利用することで、ユーザーの可読性をアップすることもできます。</p>
    <p>Also, you can use a dark shade of gray instead of black to ease the look for the user (instead of using high contrast black and white).</p>
    
    <div class="ex-13 example">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque distinctio itaque quas necessitatibus excepturi ut corporis inventore fugiat amet, exercitationem accusantium repellendus, ex incidunt quia mollitia eligendi doloribus! Sit, voluptatibus.</p>
    </div>
  </div>
  
  <div class="lud-14 lud">
    <p class="sub-title">14. 英語の大文字ではフォントスペースを広くとろう。</p>
    <p>文字テキスト間にゆったりとしたスペースを確保することで、ユーザーにとって文字が読みやすくなるテクニック。</p>
    <p>This will give the text some space to breath and will make it easier to read for the user.</p>
    
    <div class="ex-14 example">
      <p class="sup-title">Lorem ipsum dolor sit amet.</p>
      <p class="title">Increase your exposure.</p>
      <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum expedita rem qui, ullam voluptatibus aut quas, quo explicabo esse quidem voluptas similique, eius velit maxime. Ipsam ab aliquam distinctio rerum!</p>
    </div>
  </div>
  <div class="lud-15 lud">
    <p class="sub-title">15. キーラインを使って、似たコンテンツをまとめよう。</p>
    <p>表示されているコンテンツのつながりを作り、ユーザーにとってより分かりやすくするテクニック。</p>
    <p>This will make the content appear connected, and it will be easier for the user to understand it.</p>
    
    <div class="ex-15 example">
      <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat minus dignissimos magnam natus ratione.</p>
      </div>
      
      <div class="row">
        <div>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-facebook-square"></i>          
        </div>
        <div class="form">
          <p>メールマガジン、はじめました。</p>
          <input type="text">
          <button>定期購読</button>
        </div>
      </div>
    </div>
  </div>
  <div class="lud-16 lud">
    <p class="sub-title">16. blend-mode: multiplyを使って、素敵なヒーローイメージを作成しよう。</p>
    <p>白黒に彩度を落とした写真にブレンドモードを利用することで、白文字とのコントラストをうまく表現できる、絶妙な背景色に仕上げます。</p>
    <p>Using blend-mode with a desaturated photo and a background color gives a nice contrast to your hero banner with white text.</p>
    
    <div class="ex-16 example">
      <div class="bg-back"></div>
      <div class="bg"></div>
      <div class="ui">
        <div class="header">
          <p class="logo"><b>Next</b>Big<b>Thing</b></p>
          
          <ul>
            <li>制作実績</li>
            <li>サービス</li>
            <li>メンバー</li>
            <li>お問い合わせ</li>
          </ul>
        </div>
        <div class="body">
          <p class="title">Your ideas are <i>bigger</i> than you think</p>
          <p class="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste debitis labore aspernatur ullam rerum, architecto hic quasi.</p>
          
          <a href="#" class="a-1">もっと詳しく</a>
          <a href="#" class="a-2">これまでの事例を見る</a>
        </div>
      </div>
    </div>
  </div>
  <div class="lud-17 lud">
    <p class="sub-title">17. 要素を重ねて奥行き感を演出しよう。</p>
    <p>このテクニックによって、ユーザーへのスクロールを促すこともでき、残りのコンテンツも閲覧してもらうことができるでしょう。</p>
    <p>This will also encourage users to scroll and reveal the rest of the content.</p>
    
    <div class="ex-17 example">
      <div class="upper">
        <p class="p-1">Coming Soon</p>
        <p class="p-2">Next Big Thing</p>
        <div class="line"></div>
        
        <p class="p-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime in recusandae corrupti molestiae ab nulla perspiciatis iusto. Atque vitae.</p>
        
        <div class="handler">
          <div class="block">
            <p>Lorem ipsum dolor, sit amet consectetur. Desereunt <b>earum dolores error iusto velit</b> possimus natus.</p>
            
            <div class="form">
              <input type="text" placeholder="Enter your mail"><button>Notify Me!</button>
            </div>
          </div>
        </div>
      </div>
      <div class="lower">
        <div class="wrapper">
          <p class="title">Are you ready for the <i>Next Big Thing</i>?</p>
          <div class="line"></div>
          <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint cupiditate impedit accusamus beatae neque maxime in molestiae a ratione sed provident doloribus suscipit, saepe modi consequatur cumque et quas autem.</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="lud-18 lud">
    <p class="sub-title">18. 主要なアクションでないときは、ネガティブなアクションには控えめな色使いをしよう。</p>
    <p>ユーザーを混乱させてしまう恐れがあるので、ライトグレーなど明るい色を利用すると良いでしょう。</p>
    <p>This may confuse the users, instead use a subtle gray or light color.</p>
    
    <div class="ex-18 example">
      <button class="b-1">キャンセル</button>
      <button class="b-2">アップデート</button>
    </div>
  </div>
  
  <div class="lud-19 lud">
    <p class="sub-title">19. ボタンにも階層を作成しよう。</p>
    <p>メインとなるボタンが、警告や二次ボタンなどに比べ、もっとも目立つように重要度に応じて階層を作成しましょう。</p>
    <p>Your primary action button should stand out more than secondary/danger buttons.</p>
    
    <div class="ex-19 example">
      <button class="b-1">キャンセル</button>
      <button class="b-2">戻る</button>
      <button class="b-3">次へ</button>
    </div>
  </div>
  
  <div class="lud-20 lud">
    <p class="sub-title">20. しかし、重要なアクションを促すときは、赤色を利用しましょう。</p>
    <p>「削除」など重要なアクションに赤色を利用しなければ、ユーザーは心配の恐れがないと考えてしまうでしょう。</p>
    <p>If you don't use a color like red for confirming a high severity action user may think there's no danger in it.</p>
    
    <div class="ex-20 example">
      <p>本当に削除してよろしいですか。</p>
      
      <div>
        <button class="b-1">取り消し</button>
        <button class="b-2">削除する</button>
      </div>
    </div>
  </div>
  
  <div class="lud-21 lud">
    <p class="sub-title">21. ボタンのボーダー線は、文字テキストよりも明るくしよう。</p>
    <p>こうすることで、よりボタンを強調することができる小技テクニックのひとつ。</p>
    <p>This will make them stand out.</p>
    
    <div class="ex-21 example">
      <button>Submit a talk</button>
    </div>
  </div>
  
  <div class="lud-21 lud">
    <p class="sub-title">21. ボーダー線を利用せずに、背景色を活用しよう。</p>
    <p>ボーダー線がたくさんありすぎると、UIデザインがごちゃごちゃした印象に鳴りがちです。ユーザーの目的(コンテンツを探すなど)を妨げる原因となるかもしれません。</p>
    <p>Too many borders can make a piece of UI look cluttered. This may be distracting the user from the main goal.</p>
    
    <div class="ex-22 example">
      <div class="modal">
        <div class="upper">
          <p class="title">Contacts</p>
          <div class="input-wrapper">
            <i class="fa fa-search"></i>
            <input type="text" placeholder="Search teams or members">
          </div>
          
          <div class="users">
            <div class="row">
              <div>
                <div class="state"></div>
                <p>Tighten Co.</p>
              </div>
              <p>Team</p>
            </div>
            
            <div class="row">
              <div>
                <div class="state on"></div>
                <p>Taylor Otwell.</p>
              </div>
              <p>Member</p>
            </div>
            
            <div class="row">
              <div>
                <div class="state"></div>
                <p>Adam Whatan.</p>
              </div>
              <p>Member</p>
            </div>
            
            <div class="row">
              <div>
                <div class="state"></div>
                <p>Duke Street Studio Inc.</p>
              </div>
              <p>Team</p>
            </div>
            
            <div class="row">
              <div>
                <div class="state on"></div>
                <p>Jeffrey Way</p>
              </div>
              <p>Member</p>
            </div>
          </div>
        </div>
        <div class="lower">
          <button class="b-1">キャンセル</button>
          <button class="b-2">招待する</button>
        </div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              *{
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

.wrap{
  margin: 3rem auto 0;
  width: 90%;
  max-width: 48rem;
}

h1{
  font-weight: normal;
  margin-bottom: 2rem;
}

.wrap p{
  font-size: 1.125rem;
  color: #444;
  line-height: 2;
  margin-bottom: 1rem;
}

.wrap a{
  color: #4687c9;
}

.wrap p.sub-title{
  font-size: 1.5rem;
  color: #222;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.lud{
  margin: 5rem 0 4rem;
}

.lud p:nth-child(3){
  font-size: 12px;
}

.example{
  margin-top: 2.5rem;
}

.ex-1 ul{
  width: 100%;
  display: flex;
  border-bottom: 1px solid #ddd;
  border-top: 4px solid #11B8AB;
}

.ex-1 ul li{
  width: 25%;
  text-align: center;
  list-style: none;
  padding: 1.5rem 0;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  position: relative;
}

.ex-1 ul li i{
  color: #bbb;
  font-size: 1.5rem;
  padding-right: .5rem;
  vertical-align: -2px;
}

.ex-1 ul li.active:after{
  width: 100%;
  content: '';
  height: 3px;
  bottom: -1px;
  left: 0;
  display: block;
  position: absolute;
  background: #11B8AB;
}

.ex-1 ul li.active{
  color: #444;
}

.ex-1 ul li.active i{
  color: #11B8AB;
}

.ex-1 ul li:hover{
  background: #f9f9f9;
}

.ex-2 > p{
  color: #888;
  border-top: 1px solid #ddd;
  padding: .75rem .25rem;
  margin-bottom: 0;
}

.ex-2 .upper{
  background: #01BFBE;
  padding: 1rem;
}

.ex-2 .upper p,
.ex-2 .lower p{
  margin-bottom: 0;
  padding-left: 2rem;
}

.ex-2 .upper p.revenue{
  color: #fff;
  font-size: 1.5rem;
}

.ex-2 .upper p.label{
  color: #8FF2F3;
  font-size: .875rem;
  font-weight: bold;
}

.ex-2 .lower{
  background: #01B5B5;
  padding: .5rem 1rem;
}

.ex-2 .lower p{
  font-size: .8rem;
  color: #fff;
}

.ex-2 .upper p,
.ex-2 .lower p{
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ex-3 button{
  color: #fff;
  padding: .625rem 2rem;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  text-transform: uppercase;
  cursor: pointer;
}

.ex-3 button.b-1{
  background: -moz-linear-gradient(top,  hsl(194, 100%, 50%) 0%, hsl(208, 100%, 50%) 100%);
  background: -webkit-linear-gradient(top,  hsl(194, 100%, 50%) 0%,hsl(208, 100%, 50%) 100%);
  background: linear-gradient(to bottom,  hsl(194, 100%, 50%) 0%,hsl(208, 100%, 50%) 100%);
  margin-right: .25rem;
}

.ex-3 button.b-1:hover{
  background: -moz-linear-gradient(top,  hsl(194, 100%, 40%) 0%, hsl(208, 100%, 40%) 100%);
  background: -webkit-linear-gradient(top,  hsl(194, 100%, 40%) 0%,hsl(208, 100%, 40%) 100%);
  background: linear-gradient(to bottom,  hsl(194, 100%, 40%) 0%,hsl(208, 100%, 40%) 100%);
}

.ex-3 button.b-2{
  background: -moz-linear-gradient(top,  hsl(48, 100%, 50%) 0%, hsl(28, 100%, 50%) 100%);
  background: -webkit-linear-gradient(top,  hsl(48, 100%, 50%) 0%,hsl(28, 100%, 50%) 100%);
  background: linear-gradient(to bottom,  hsl(48, 100%, 50%) 0%,hsl(28, 100%, 50%) 100%);
}

.ex-3 button.b-2:hover{
  background: -moz-linear-gradient(top,  hsl(48, 100%, 40%) 0%, hsl(28, 100%, 40%) 100%);
  background: -webkit-linear-gradient(top,  hsl(48, 100%, 40%) 0%,hsl(28, 100%, 40%) 100%);
  background: linear-gradient(to bottom,  hsl(48, 100%, 40%) 0%,hsl(28, 100%, 40%) 100%);
}

.ex-4{
  background: #f1f1f1;
  padding: 2rem;
}

.ex-4 button{
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  padding: .625rem 2rem;
  box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
  cursor: pointer;
  display: inline-block;
  transition: all .22s;
}

.ex-4 button:hover{
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  filter: brightness(130%);
}

.ex-4 button.b-1{
  background: #6771E5;
  color: #fff;
  margin-right: .25rem;
}

.ex-4 button.b-2{
  color: #6771E5;
  background: #fff;
}

.ex-5{
  background: #f1f1f1;
  padding: 1.5rem;
  display: flex;
}

.ex-5 .card{
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
  width: 100%;
  max-width: 50%;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.075);
}

.ex-5 .c-1,
.ex-5 .c-2{
  margin-right: 1.5rem;
}

.ex-5 p{
  margin-bottom: 0;
}

.ex-5 p.revenue{
  font-size: 1.5rem;
}

.ex-5 p.label{
  color: #888;
  font-size: .875rem;
}

.ex-5 .line{
  width: 100%;
  max-width: 5rem;
  height: 3px;
  margin: 1rem 0 2rem;
  background: #11B8AB;
}

.ex-5 .sales{
  font-size: -875rem;
}

.ex-6 i,
.ex-6 .title{
  color: #949CCF;
}

.ex-6 .title{
  font-weight: 500;
}

.ex-6 .col{
  display: flex;
  width: calc(50% - 1rem);
  margin-bottom: 1.5rem;
}

.ex-6 .col p:not(.title){
  color: #888;
  font-size: 1rem;
}

.ex-6 .col:nth-child(2n - 1){
  margin-right: 2rem;
}

.ex-6 .icon-col{
  width: 12rem;
}

.ex-6 i{
  font-size: 2rem;
}

.ex-6{
  display: flex;
  flex-wrap: wrap;
}

.ex-7{
  background: #568695;
  padding: 2rem;
}

.ex-7 .title{
  color: #fff;
  font-size: 1.5rem;
}

.ex-7 p:not(.title){
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

.ex-7 input{
  height: 2.25rem;
  padding: 0 .75rem;
  border: 0;
  font-size: .875rem;
  width: 15rem;
  border-radius: 5px 0 0 5px;
}

.ex-7 input::placeholder{
  color: #bbb;
}

.ex-7 button{
  background: hsl(43, 62%, 72%);
  border: none;
  border-radius: 0 5px 5px 0;
  height: 2.25rem;
  margin-left: -.25rem;
  padding: 0 1rem;
  color: rgba(0,0,0,0.6);
  font-weight: bold;
  cursor: pointer;
}

.ex-7 button:hover{
  background: hsl(43, 50%, 65%);
}

.ex-8{
  background: #f1f1f1;
  padding: 2rem;
}

.ex-8 p{
  font-size: 1rem;
}

.ex-8 ul{
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.ex-8 ul div{
  width: 50%;
}

.ex-8 ul li{
  list-style: none;
  line-height: 2;
  color: #444;
  margin-left: -2.325rem;
}

.ex-8 ul li:before{
  content: '\f05d';
  font-family: 'FontAwesome';
  padding-right: 1rem;
  font-size: 1.325rem;
  color: #AE98DB;
  vertical-align: -2px;
}

.ex-9 p{
  margin-bottom: 0;
}

.ex-9 .header{
  padding: 1rem 0;
  background: #f1f1f1;
  border-bottom: 1px solid #ddd;
  border-top: 4px solid hsl(5, 53%, 60%);
}

.ex-9 .wrapper{
  width: 90%;
  margin: 0 auto;
}

.ex-9 .logo{
  font-weight: bold;
  font-family: 'Georgia';
  font-style: italic;
}

.ex-9 .header .wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ex-9 .header .wrapper div{
  display: flex;
  align-items: center;
}

.ex-9 .header .wrapper ul li{
  display: inline-block;
  list-style: none;
  font-size: .875rem;
  font-weight: 500;
  margin-right: 1rem;
  color: #444;
  cursor: pointer;
}

.ex-9 .header .wrapper ul li:hover{
  color: #666;
}

.ex-9 .header a{
  display: inline-block;
  padding: .325rem 1.5rem;
  text-decoration: none;
  font-size: .875rem;
  border-radius: 5px;
  font-weight: 500;
}

.ex-9 .log-in{
  border: 1px solid #aaa;
  color: #222;
}

.ex-9 .log-in:hover{
  background: #ddd;
}

.ex-9 .sign-up{
  background: hsl(5, 53%, 60%);
  border: 1px solid hsl(5, 53%, 60%);
  margin-left: .5rem;
  color: #fff;
}

.ex-9 .sign-up:hover{
  background: hsl(5, 40%, 48%);
  border: 1px solid hsl(5, 40%, 48%);
}

.ex-9 .body{
  padding: 5rem 2rem;
  background: #EFEFE7;
}

.ex-9 .title{
  font-size: 1.75rem;
  max-width: 35rem;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.ex-9 .sub{
  font-size: .875rem;
  color: rgba(0,0,0,0.7);
  margin-bottom: 2rem;
}

.ex-9 .body a{
  background: hsl(5, 53%, 60%);
  display: inline-block;
  padding: .5rem 3rem;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}

.ex-9 .body a:hover{
  background: hsl(5, 40%, 48%);
}

.ex-9 .body a .label{
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
}

.ex-9 .body a .desc{
  font-size: .875rem;
  color: rgba(255,255,255,0.5);
}

.ex-10{
  background: #f1f1f1;
  padding: 4rem;
}

.ex-10 .modal{
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 2px 0 rgba(0,0,0,.05);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.ex-10 .modal:before{
  content: '';
  width: 100%;
  height: .5rem;
  top: 0;
  left: 0;
  background: -moz-linear-gradient(left,  #04B3BA 0%, #0ABEA2 100%);
  background: -webkit-linear-gradient(left,  #04B3BA 0%,#0ABEA2 100%);
  background: linear-gradient(to right,  #04B3BA 0%,#0ABEA2 100%);
  display: block;
  position: absolute;
}

.ex-10 .title{
  font-size: 1.5rem;
  color: #222;
}

.ex-10 .sub{
  font-size: 1rem;
}

.ex-10 .actions button{
  background: -moz-linear-gradient(left,  hsl(182, 96%, 37%) 0%, hsl(171, 90%, 39%) 100%);
  background: -webkit-linear-gradient(left,  hsl(182, 96%, 37%) 0%,hsl(171, 90%, 39%) 100%);
  background: linear-gradient(to right,  hsl(182, 96%, 37%) 0%,hsl(171, 90%, 39%) 100%);
  color: #fff;
  font-weight: 500;
  padding: .5rem 2rem;
  border-radius: 5px;
  border: none;
  text-transform: uppercase;
  margin-top: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  cursor: pointer;
}

.ex-10 .actions button:hover{
  background: -moz-linear-gradient(left,  hsl(182, 96%, 33%) 0%, hsl(171, 90%, 35%) 100%);
  background: -webkit-linear-gradient(left,  hsl(182, 96%, 33%) 0%,hsl(171, 90%, 35%) 100%);
  background: linear-gradient(to right,  hsl(182, 96%, 33%) 0%,hsl(171, 90%, 35%) 100%);
}

.ex-10 .more{
  font-size: 1rem;
}

.ex-10 .more a{
  color: #04B3B9;
  font-weight: 500;
  text-decoration: none;
}

.ex-10 .more a:hover{
  text-decoration: underline;
}

.ex-11{
  padding: 4rem;
  background: #ccc;
}

.ex-11 .modal{
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
  border-radius: 5px;
}

.ex-11 .upper{
  background: #fff;
  padding: .75rem 1.5rem;
  border-radius: 5px 5px 0 0;
}

.ex-11 .upper p{
  margin-bottom: 0;
  font-size: 1.25rem;
}

.ex-11 .lower{
  background: #f1f1f1;
  padding: 1.5rem;
  border-radius: 0 0 5px 5px;
}

.ex-11 .lower p{
  font-size: 1rem;
  color: #666;
  line-height: 1.8;
}

.ex-11 .actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

.ex-11 .actions button{
  border: none;
  padding: .375rem 1.75rem;
  border-radius: 5px;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
}

.ex-11 .actions .delete{
  color: #fff;
  background: hsl(5, 53%, 60%);
}

.ex-11 .actions .cancel{
  color: #444;
  background: transparent;
  margin-left: .5rem;
}

.ex-11 .delete:hover{
  background: hsl(5, 40%, 48%);
}

.ex-11 .cancel:hover{
  background: #ddd;
}

.ex-12{
  display: flex;
}

.ex-12 .number{
  background: #B4DFEB;
  border: 2px solid #6AA3B4;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34434b;
  font-weight: bold;
}

.ex-12 .title{
  color: #34434b;
  font-size: 1.375rem;
  font-weight: 500;
}

.ex-12 .desc{
  font-size: 1rem;
  color: #586368;
}

.ex-12 .c-2{
  margin: 0 1rem;
}

.ex-13{
  padding: 2rem;
  background: #f1f1f1;
}

.ex-14{
  background: #f1f1f1;
  padding: 2rem;
  text-align: center;
}

.ex-14 .sup-title{
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  color: #888;
  letter-spacing: 1.3px;
  margin-bottom: 0;
}

.ex-14 .title{
  color: #222;
  font-size: 2rem;
}

.ex-14 .desc{
  margin: 0 auto;
  max-width: 30rem;
  color: #666;
}

.ex-15{
  background: #F1F1E9;
  padding: 2rem;
}

.ex-15 .content{
  background: #fff;
  width: 90%;
  max-width: 32rem;
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
  margin-top: -2rem;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
  margin-bottom: 2rem;
}

.ex-15 .row i{
  font-size: 1.5rem;
  margin-right: 1rem;
  color: #5C5E5D;
}

.ex-15 .row{
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,.1);
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: .75rem 0;
}

.ex-15 .row .form{
  display: flex;
  align-items: center;
}

.ex-15 .row .form input{
  border: none;
  border-top: 1px solid rgba(0,0,0,.4);
  border-left: 1px solid rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(0,0,0,.4);
  border-radius: 5px 0 0 5px;
  height: 2rem;
  padding: 0 .5rem;
}

.ex-15 .row .form button{
  background: #363636;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  height: 2rem;
  padding: 0 1rem;
}

.ex-15 .row .form p{
  margin-bottom: 0;
  font-size: .875rem;
  margin-right: 1rem;
}

.ex-15 .content p{
  font-size: 1rem;
  width: 90%;
  max-width: 28rem;
  text-align: center;
  margin: 0 auto;
  padding: 1rem 0 2rem;  
}

.ex-16{
  position: relative;
}

.ex-16 .bg-back{
  background: #1f494d;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -2;
}

.ex-16 .bg{
  background: url(http://res.cloudinary.com/dezoitcar/image/upload/v1504550304/960x600-data-out-5-IMW705506853_ahgusi.jpg) no-repeat center center;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  mix-blend-mode: multiply;
  filter: grayscale(100%);
  z-index: -1;
}

.ex-16 .header{
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ex-16 .logo{
  margin-bottom: 0;
  color: #fff;
  font-size: 1rem;
  font-family: 'Georgia';
  font-style: italic;
}

.ex-16 .header ul li{
  display: inline-block;
  list-style: none;
  font-size: .875rem;
  color: #fff;
  margin-left: 1.5rem;
  cursor: pointer;
}

.ex-16 .header ul li:hover{
  color: rgba(255,255,255,0.6);
}

.ex-16 .body{
  padding: 4rem 2rem;
}

.ex-16 .body .title{
  color: #fff;
  font-weight: bold;
  font-size: 2.25rem;
  max-width: 25rem;
  line-height: 1.2;
  width: 100%;
}

.ex-16 .body .desc{
  color: rgba(255,255,255,0.5);
  width: 100%;
  max-width: 30rem;
  font-size: 1rem;
}

.ex-16 .body a{
  background: red;
  padding: .675rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  margin-top: 2rem;
  display: inline-block;
}

.ex-16 .body .a-1{
  color: rgba(0,0,0,0.6);
  background: -moz-linear-gradient(top,  hsl(49, 92%, 71%) 0%, hsl(36, 93%, 73%) 100%);
  background: -webkit-linear-gradient(top,  hsl(49, 92%, 71%) 0%,hsl(36, 93%, 73%) 100%);
  background: linear-gradient(to bottom,  hsl(49, 92%, 71%) 0%,hsl(36, 93%, 73%) 100%);
}

.ex-16 .body .a-2{
  color: #fff;
  border: 1px solid #fff;
  background: transparent;
  margin-left: .5rem;
  padding: calc(.675rem - 1px) 2rem;
}

.ex-16 .body .a-1:hover{
  background: -moz-linear-gradient(top,  hsl(49, 74%, 62%) 0%, hsl(36, 75%, 64%) 100%);
  background: -webkit-linear-gradient(top,  hsl(49, 74%, 62%) 0%,hsl(36, 75%, 64%) 100%);
  background: linear-gradient(to bottom,  hsl(49, 74%, 62%) 0%,hsl(36, 75%, 64%) 100%);
}

.ex-16 .body .a-2:hover{
  background: #fff;
  color: #193A3D;
}

.ex-17 .upper{
  padding: 2rem;
  background: -moz-linear-gradient(right,  hsl(193, 43%, 45%) 0%, hsl(232, 45%, 64%) 100%);
  background: -webkit-linear-gradient(right,  hsl(193, 43%, 45%) 0%,hsl(232, 45%, 64%) 100%);
  background: linear-gradient(to left,  hsl(193, 43%, 45%) 0%,hsl(232, 45%, 64%) 100%);
  position: relative;
  padding-bottom: 7rem;
}

.ex-17 .upper p{
  margin-bottom: 0;
  text-align: center;
}

.ex-17 .upper .p-1{
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 2px;
}

.ex-17 .upper .p-2{
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ex-17 .upper .line{
  width: 3.5rem;
  margin: 1.5rem auto;
  height: 3px;
  background: #222;
}

.ex-17 .upper .p-3{
  color: #fff;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;  
}

.ex-17 .lower{
  background: #f1f1f1;
  padding-top: 5rem;
}

.ex-17 .wrapper{
  width: 90%;
  max-width: 32rem;
  margin: 0 auto;
  padding: 2rem 0;
}

.ex-17 .title{
  font-size: 1.375rem;
  color: #222;
}

.ex-17 .desc{
  font-size: 1rem;
}

.ex-17 .lower .line{
  width: 3.5rem;
  background: #7A85CD;
  height: 3px;
  margin-bottom: 1.5rem;
}

.ex-17 .handler{
  width: 90%;
  margin: 0 auto;
  right: 0;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ex-17 .block{
  background: #fff;
  max-width: 32rem;
  margin: 0 auto;
  padding: 2rem 0;
  border-radius: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
}

.ex-17 .block p{
  font-size: 1rem;
  max-width: 28rem;
  width: 90%;
  margin: 0 auto;
}

.ex-17 .form{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}

.ex-17 input{
  height: 2rem;
  background: #f9f9f9;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 14rem;
  padding: 0 .5rem;
}

.ex-17 button{
  background: hsl(227, 25%, 25%);
  color: #fff;
  text-transform: uppercase;
  height: 2rem;
  border: 1px solid #303751;
  font-weight: 500;
  cursor: pointer;
  padding: 0 1rem;
}

.ex-17 button:hover{
  background: hsl(227, 25%, 15%);
}

.ex-18{
  background: #f1f1f1;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ex-18 button{
  border: none;
  padding: .875rem 2rem;
  border-radius: 5px;
  margin-left: 1rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.ex-18 .b-1{
  background: transparent;
  color: #888;
}

.ex-18 .b-1:hover{
  background: #ddd;
  color: #666;
}

.ex-18 .b-2{
  background: hsl(200, 71%, 46%);
  color: #fff;
}

.ex-18 .b-2:hover{
  background: hsl(200, 71%, 40%);
}

.ex-19{
  background: #f1f1f1;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ex-19 button{
  border: none;
  padding: .875rem 2rem;
  border-radius: 5px;
  margin-left: 1rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.ex-19 .b-1{
  background: transparent;
  padding: .875rem .25rem;
  color: #888;
}

.ex-19 .b-1:hover{
  color: #222;
}

.ex-19 .b-2{
  background: transparent;
  border: 2px solid #aaa;
  color: hsl(200, 71%, 40%);
}

.ex-19 .b-2:hover{
  background: #ddd;
  color: #666;
}

.ex-19 .b-3{
  background: hsl(200, 71%, 46%);
  border: 2px solid hsl(200, 71%, 46%);
  color: #fff;
}

.ex-19 .b-3:hover{
  background: hsl(200, 71%, 40%);
  border: 2px solid hsl(200, 71%, 40%);
}

.ex-20{
  background: #f1f1f1;
  padding: 2rem;
  text-align: center;
}

.ex-20 button{
  border: none;
  padding: .875rem 2rem;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.ex-20 .b-1{
  border: 2px solid #aaa;
  background: transparent;
  color: #444;
}

.ex-20 .b-1:hover{
  background: #ddd;
  color: #222;
}

.ex-20 .b-2{
  border: 2px solid hsl(348, 95%, 60%);
  background: hsl(348, 95%, 60%);
  color: #fff;
  margin-left: 1rem;
}

.ex-20 .b-2:hover{
  border: 2px solid hsl(348, 70%, 48%);
  background: hsl(348, 70%, 48%);
}

.ex-21{
  background: #f1f1f1;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-21 button{
  border: 2px solid #ccc;
  padding: .75rem 2.5rem;
  border-radius: 100rem;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

.ex-21 button:hover{
  background: #ccc;
  color: #222;
}

.ex-22{
  background: #ddd;
  padding: 2rem;
}

.ex-22 .modal{
  max-width: 32rem;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
}

.ex-22 .upper{
  background: #fff;
  border-radius: 5px 5px 0 0;
  padding: 1rem;
}

.ex-22 .upper .title{
  font-weight: 500;
}

.ex-22 .input-wrapper{
  background: #f1f1f1;
  padding: .5rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.ex-22 .input-wrapper i{
  color: #888;
  width: 1.5rem;
  text-align: center;
  display: inline-block;
}

.ex-22 input{
  border: none;
  background: transparent;
  width: calc(100% - 1.875rem);
  padding: .25rem;
}

.ex-22 input::placeholder{
  color: #aaa;
}

.ex-22 .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
  cursor: pointer;
}

.ex-22 .row .state{
  width: 7px;
  height: 7px;
  background: #ddd;
  display: inline-block;
  border-radius: 100%;
  margin-left: 1rem;
}

.ex-22 .row .state.on{
  background: #44B572;
}

.ex-22 .row:hover{
  background: #E7F0F7;
}

.ex-22 .row:hover div > p{
  color: #6682B1;
}

.ex-22 .row > div{
  display: flex;
  align-items: center;
}

.ex-22 .row div > p{
  display: inline-block;
  margin-bottom: 0;
  margin-left: 1rem;
  font-weight: 500;
  font-size: 1rem;
}

.ex-22 .row > p{
  font-size: .875rem;
  color: #888;
  margin-bottom: 0;
  margin-right: 1rem;
}

.ex-22 .lower{
  background: #f1f1f1;
  padding: 1rem;
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ex-22 button{
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.ex-22 .b-1{
  background: transparent;
  margin-right: .5rem;
  color: #888;
}

.ex-22 .b-1:hover{
  color: #444;
}

.ex-22 .b-2{
  background: -moz-linear-gradient(top,  hsl(204, 63%, 62%) 0%, hsl(212, 66%, 56%) 100%);
  background: -webkit-linear-gradient(top,  hsl(204, 63%, 62%) 0%,hsl(212, 66%, 56%) 100%);
  background: linear-gradient(to bottom,  hsl(204, 63%, 62%) 0%,hsl(212, 66%, 56%) 100%);
  color: #fff;
  padding: .5rem 1.5rem;
  border-radius: 5px;
}

.ex-22 .b-2:hover{
  background: -moz-linear-gradient(top,  hsl(204, 63%, 56%) 0%, hsl(212, 66%, 50%) 100%);
  background: -webkit-linear-gradient(top,  hsl(204, 63%, 56%) 0%,hsl(212, 66%, 50%) 100%);
  background: linear-gradient(to bottom,  hsl(204, 63%, 56%) 0%,hsl(212, 66%, 50%) 100%);
}
            
          
!
999px
Loading ..................

Console