Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body data-spy="scroll" data-target="#navbarResponsive">
    <!-- Start Home Section -->
    <div id="home">
    <!-- Start Navigation -->
    <nav id="navbar" class="navbar navbar-expand-lg fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="https://github.com/Ceci007/images/blob/master/img-portfolio/eiruweb.png?raw=true"></a>
        <button id="hamburguer" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
          <span class="custom-toggler-icon"><i class="fas fa-bars"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#home" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
              <a href="#features" class="nav-link">FEATURES</a>
            </li>
            <li class="nav-item">
              <a href="#portfolio" class="nav-link">PORTFOLIO</a>
            </li>
            <li class="nav-item">
              <a href="#pricing" class="nav-link">PRICING</a>
            </li>
            <li class="nav-item">
              <a href="#skills" class="nav-link">SKILLS</a>
            </li>
            <li class="nav-item">
              <a href="#clients" class="nav-link">CLIENTS</a>
            </li>
            <li class="nav-item">
              <a href="#contact" class="nav-link">CONTACT</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Start of the Landing Page Image -->
      <section id="welcome-section">
    <div class="landing">
      <div class="home-wrap">
        <div class="home-inner">
        </div>
      </div>
    </div>
    <div class="caption center-block text-center">
      <div class="aos-animation" data-animation="bounceInUp" data-delay="0.6s">
        <h1>Welcome to my Portfolio</h1>
      </div>
      <div class="aos-animation" data-animation="bounceInUp" data-delay="0.8s">
        <h3>Animated Bootstrap Portfolio</h3>
      </div>
      <div class="aos-animation" data-animation="bounceInUp" data-delay="1s">
        <a class="btn btn-outline-light btn-lg" href="#features">Get Started</a>
      </div>
    </div>
    </div>
    <!-- Bouncing Down Arrow -->
    <a class="down-arrow" href="#features">
      <div class="arrow bounce d-none d-md-block">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </div>
    </a>
      </section>
    <!-- Start Features Section -->
    <div id="features" class="offset">
      <div class="aos-animation" data-animation="fadeInUp">
        <div class="narrow text-center">
          <div class="col-12">
            <h2>Responsive Bootstrap Theme</h2>
            <p class="lead">
              Bootstrap is an open-source front-end library with HTML and CSS based designs.
              This website is built with HTML5, CSS3 and Bootstrap 4.
            </p>
            <a href="#contact" class="btn btn-secondary btn-sm">Request a Quote</a>
            <a href="#portfolio" class="btn btn-orange btn-sm">See Our Portfolio</a>
          </div>
        </div>
      </div>
      <!-- Start Jumbotron -->
      <div class="jumbotron">
        <div class="narrow">
          <div class="aos-animation" data-animation="fadeInUp">
            <h3 class="heading">Features</h3>
            <div class="heading-underline">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 col-md-4">
              <div class="aos-animation" data-animation="fadeInLeft">
                <div class="feature">
                  <div class="circle fa-layers fa-4x">
                    <i class="fas fa-mobile-alt fa-inverse"></i>
                  </div>
                  <h3>Mobile Friendly</h3>
                  <p>
                    This portfolio features are mobile friendly, responsive first website layout using Bootstrap.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4">
              <div class="aos-animation" data-animation="fadeInUp">
                <div class="feature">
                  <div class="circle fa-layers fa-4x">
                    <i class="fas fa-desktop fa-inverse"></i>
                  </div>
                  <h3>Full Screen Landing</h3>
                  <p>
                    Using Bootstrap, this theme features a full screen carousel landing page.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4">
              <div class="aos-animation" data-animation="fadeInRight">
                <div class="feature">
                  <div class="circle fa-layers fa-4x">
                    <i class="fas fa-play fa-inverse margin-left"></i>
                  </div>
                  <h3>Custom Animation</h3>
                  <p>
                    Animate.css and Waypoints.js allow for smooth animations scrolling down the site.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4">
              <div class="aos-animation" data-animation="fadeInLeft">
                <div class="feature">
                  <div class="circle fa-layers fa-4x">
                    <i class="fas fa-angle-double-down fa-inverse"></i>
                  </div>
                  <h3>Parallax Scrolling</h3>
                  <p>
                    Fixed background images allow the theme to have content-filled with parallax scrolling sections.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4">
              <div class="aos-animation" data-animation="fadeInUp">
                <div class="feature">
                  <div class="circle fa-layers fa-4x">
                    <i class="fas fa-sliders-h fa-inverse"></i>
                  </div>
                  <h3>Content Slider</h3>
                  <p>
                    Owl.Carousel.js makes navigating content sliders seamless with it's content carousel navigation.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4">
              <div class="aos-animation" data-animation="fadeInRight">
                <div class="feature">
                  <div class="circle fa-layers fa-4x">
                    <i class="fab fa-wpforms fa-inverse"></i>
                  </div>
                  <h3>Contact Form</h3>
                  <p>
                    The Bootsrap HTML contact form it's currently off.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Start Fixed Background Image Dark -->
      <div class="fixed-background">
        <div class="row dark">
          <div class="col-12 aos-animation" data-animation="fadeInUp">
            <h3 class="heading">Built with care</h3>
            <div class="heading-underline">
            </div>
          </div>
          <div class="col-md-4">
            <div class="aos-animation" data-animation="fadeInLeft">
              <h3>HTML5</h3>
              <div class="feature">
                <span class="fa-layers fa-3x">
                  <i class="fas fa-code orange"></i>
                </span>
              </div>
              <p class="lead">Built with the latest, HTML5.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="aos-animation" data-animation="fadeInUp">
              <h3>Bootstrap4</h3>
              <div class="feature">
                <span class="fa-layers fa-3x">
                  <i class="fas fa-bold orange"></i>
                </span>
              </div>
              <p class="lead">Built with the latest, Bootstrap 4.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="aos-animation" data-animation="fadeInRight">
              <h3>CSS3</h3>
              <div class="feature">
                <span class="fa-layers fa-3x">
                  <i class="fab fa-css3 orange"></i>
                </span>
              </div>
              <p class="lead">Built with the latest, CSS 3.</p>
            </div>
          </div>
        </div>
        <div class="fixed-wrap">
          <div id="fixed">
          </div>
        </div>
      </div>
    </div>
    <!-- Start Portfolio Section -->
    <section id="projects">
    <div id="portfolio" class="offset">
      <div class="row padding">
        <div class="col-12 aos-animation" data-animation="fadeInUp">
          <h3 class="heading project-tile">Portfolio</h3>
          <div class="heading-underline">
          </div>
        </div>
      </div>
      <!--Start Of The Portfolio Grid -->
      <div class="container-fluid">
        <div class="row no-padding">
          <div class="col-sm-6 col-md-3">
            <div class="aos-animation" data-animation="bounceInLeft" data-delay="0.2s">
              <div class="portfolio-item">
                <a href="https://codepen.io/CeciPeque/full/gyQOMV" target="_blank">
                  <img class="example-image" src="https://github.com/Ceci007/images/blob/master/img-portfolio/portfolio/1.png?raw=true">
                </a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3">
            <div class="aos-animation" data-animation="bounceInLeft">
              <div class="portfolio-item">
                <a href="https://codepen.io/CeciPeque/full/axYRLr" target="_blank">
                  <img class="example-image" src="https://github.com/Ceci007/images/blob/master/img-portfolio/portfolio/2.png?raw=true">
                </a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3">
            <div class="aos-animation" data-animation="bounceInRight">
              <div class="portfolio-item">
                <a href="https://codepen.io/CeciPeque/full/MRZKGq" target="_blank">
                  <img class="example-image" src="https://github.com/Ceci007/images/blob/master/img-portfolio/portfolio/3.png?raw=true">
                </a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3">
            <div class="aos-animation" data-animation="bounceInRight" data-delay="0.2s">
              <div class="portfolio-item">
                <a href="https://codepen.io/CeciPeque/full/qwxxGq" target="_blank">
                  <img class="example-image" src="https://github.com/Ceci007/images/blob/master/img-portfolio/portfolio/4.png?raw=true">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="aos-animation" data-animation="fadeInUp">
        <div class="narrow text-center">
          <div class="col-12">
            <p class="lead">
              Get in contact with us to see more of our great portfolio design work in addition
              to web development projects such as websites, apps and more!
            </p>
            <a id="profile-link" target="_blank" class="btn btn-secondary btn-sm" href="https://github.com/Ceci007">profile link</a>
          </div>
        </div>
      </div>
    </div>
    </section>
    <!-- Start Pricing Section -->
    <div id="pricing" class="offset">
      <!-- Start Jumbotron -->
      <div class="jumbotron">
        <div class="narrow">
          <div class="aos-animation" data-animation="fadeInUp">
            <h3 class="heading">Pricing</h3>
            <div class="heading-underline">
            </div>
          </div>
          <!-- Start Pricing Columns -->
          <div class="row justify-content-md-center">
            <div class="col-md-6 col-lg-4">
              <div class="aos-animation" data-animation="fadeInLeft">
                <div class="pricing-column text-center">
                  <h3>BASIC</h3>
                  <p>The Basic Plan, the best plan to get you started off.</p>
                  <div class="pricing-features">
                    <h4><span class="item">Domain Names:</span> 1</h4>
                    <h4><span class="item">Email Addresses:</span> 1</h4>
                    <h4><span class="item">Hard Drive:</span> 50GB</h4>
                  </div>
                  <h2>$49</h2>
                  <a href="#contact" class="btn btn-secondary btn-sm">Buy Now</a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="aos-animation" data-animation="fadeInUp">
                <div class="pricing-column text-center">
                  <div class="ribbon">
                    Best Value
                  </div>
                  <h3>PRO</h3>
                  <p>The Pro Plan, the best overall value you can get.</p>
                  <div class="pricing-features">
                    <h4><span class="item">Domain Names:</span> 5</h4>
                    <h4><span class="item">Email Addresses:</span> 3</h4>
                    <h4><span class="item">Hard Drive:</span> 100GB</h4>
                  </div>
                  <h2>$99</h2>
                  <a href="#contact" class="btn btn-orange btn-sm">Buy Now</a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="aos-animation" data-animation="fadeInRight">
                <div class="pricing-column text-center">
                  <h3>PREMIUM</h3>
                  <p>Go Premium if you need a little extra space.</p>
                  <div class="pricing-features">
                    <h4><span class="item">Domain Names:</span> 10</h4>
                    <h4><span class="item">Email Addresses:</span> 5</h4>
                    <h4><span class="item">Hard Drive:</span> 150GB</h4>
                  </div>
                  <h2>$149</h2>
                  <a href="#contact" class="btn btn-secondary btn-sm">Buy Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Skills Section -->
    <div id="skills" class="offset">
      <!-- Start Jumbotron -->
      <div class="jumbotron">
        <div class="narrow">
          <div class="col-12 aos-animation" data-animation="fadeInUp">
            <h3 class="heading">Our Skills</h3>
            <div class="heading-underline">
            </div>
          </div>
          <div class="aos-animation" data-animation="fadeInUp">
            <div class="row text-center">
              <div class="col-sm-6 col-md-3">
                <div class="skill">
                  <span class="fa-layers fa-4x">
                    <i class="fas fa-clock"></i>
                  </span>
                  <h3><span class="counter">457</span></h3>
                  <p>Class Minutes</p>
                </div>
              </div>
              <div class="col-sm-6 col-md-3">
                <div class="skill">
                  <span class="fa-layers fa-4x">
                    <i class="fab fa-codepen"></i>
                  </span>
                  <h3><span class="counter">199</span></h3>
                  <p>Web Dev Files</p>
                </div>
              </div>
              <div class="col-sm-6 col-md-3">
                <div class="skill">
                  <span class="fa-layers fa-4x">
                    <i class="fas fa-users" data-fa-transform="left-2"></i>
                  </span>
                  <h3><span class="counter">365</span></h3>
                  <p>24/7 support</p>
                </div>
              </div>
              <div class="col-sm-6 col-md-3">
                <div class="skill">
                  <span class="fa-layers fa-4x">
                    <i class="fas fa-cloud-download-alt" data-fa-transform="left-1"></i>
                  </span>
                  <h3><span class="counter">101</span></h3>
                  <p>Resources</p>
                </div>
              </div>
            </div>
          </div>
          <div class="aos-animation" data-animation="fadeInUp">
            <div class="narrow text-center">
              <div class="col-12">
                <p class="lead">
                  Want to learn more about our design and development skills?
                </p>
                <a href="#contact" class="btn btn-orange btn-sm">contact us</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Clients Section -->
    <div id="clients" class="offset">
      <div class="container-fluid">
        <div class="row padding">
          <div class="col-12 aos-animation" data-animation="fadeInUp">
            <h3 class="heading">Our Clients</h3>
            <div class="heading-underline">
            </div>
          </div>
          <div class="col-md-12">
            <div class="aos-animation" data-animation="fadeInUp">
              <div id="clients-slider" class="owl-carousel owl-theme">
                <div class="row clients">
                  <div class="col-md-4">
                    <img src="https://github.com/Ceci007/images/blob/master/img-portfolio/clients/client1.png?raw=true">
                  </div>
                  <div class="col-md-8">
                    <blockquote>
                        <ul>
                          <li>
                            I see this theme support as more of a partner to my company than a resource.
                            I can pick up the phone and talk to anyone at any time and the way that they interact with us
                            as a business makes it really simple.
                          </li>
                        </ul>
                        <hr class="clients-hr">
                        <cite>&#8212; Eric, Small Business Owner</cite>
                    </blockquote>
                  </div>
                </div>
                <div class="row clients">
                  <div class="col-md-4">
                    <img src="https://github.com/Ceci007/images/blob/master/img-portfolio/clients/client2.png?raw=true">
                  </div>
                  <div class="col-md-8">
                    <blockquote>
                        <ul>
                          <li>
                            the great thing about this site is it's not just a design, it's a responsive Bootstrap
                            theme with animation. This portfolio layout is seamless the smooth parallax scrolling and
                            colors are wild.
                          </li>
                        </ul>
                        <hr class="clients-hr">
                        <cite>&#8212; Rachel, Professional Photographer</cite>
                    </blockquote>
                  </div>
                </div>
                <div class="row clients">
                  <div class="col-md-4">
                    <img src="https://github.com/Ceci007/images/blob/master/img-portfolio/clients/client3.png?raw=true">
                  </div>
                  <div class="col-md-8">
                    <blockquote>
                          <ul>
                            <li>This theme is fantastic! it has all of the great website elements found throughout
                            professional templantes. I've learned a lot through developing and designing it
                            while adding my own touches to the design.</li>
                          </ul>
                        <hr class="clients-hr">
                        <cite>&#8212; Ricky, Aspiring Developer</cite>
                    </blockquote>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Contact Section -->
    <div id="contact" class="offset">
      <footer>
        <div class="row">
          <div class="col-md-5">
            <p>
              At our core is a collection of design and development
              solutions that represent everything your business needs
              to compete in the modern marketplace.
            </p>
            <strong>Our Location</strong>
            <p>1897 Juan de Salazar and San Francisco<br>
                Asunción, Paraguay.</p>
            <strong>Contact Info</strong>
            <p>(+595972) 254004<br>
                eiruweb@gmail.com</p>
            <a href="#"><i class="fab fa-facebook-square"></i></a>
            <a href="#"><i class="fab fa-twitter-square"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-reddit-square"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
          </div>
          <div class="col-md-7">
            <h3>Contact Us</h3>
            <form id="contact-form" action="contact.php" method="post">
              <div class="messages">

              </div>
              <div class="controls">
                <div class="form-group">
                  <input type="text" id="form_name" name="name" class="form-control" placeholder="Enter your name." required="required">
                </div>
                <div class="form-group">
                  <input type="email" id="form_email" name="email" class="form-control" placeholder="Enter your email." required="required">
                </div>
                <div class="form-group">
                  <textarea id="form_message" name="message" class="form-control" placeholder="Add your message." rows="4" required="required"></textarea>
                </div>
                <input type="submit" class="btn btn-outline-light btn-sm" value="Send Message">
              </div>
            </form>
          </div>
          <hr class="socket">
          &copy; Portfolio Cecilia Benitez Casaccia - 2019.
        </div>
      </footer>
    </div>
    <!-- Top Scroll -->
    <a href="#home" class="top-scroll">
      <i class="fas fa-angle-up"></i>
    </a>
    <!-- Script Source Files -->
  </body>
</html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Lato:400,700');

body {
  overflow-x: hidden;
  font-family: 'Lato', sans-serif;
  color: #505962;
}

/*--- Nav Scrolling Offset ---*/
.offset:before {
  height: 4rem;
  margin-top: -4rem;
  content: "";
  display: block;
}

/*--- Extra Bootstrap Column Padding ---*/
[class*="col-"]{
  padding: 1rem;
}

/*============ NAVIGATION ============*/
.navbar {
  padding: 15px;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  transition: background-color 0.5s ease 0s;
}

.navbar-brand img {
  height: 3rem;
}

.svg-inline--fa.fa-w-14{
  color: #FFF;
  font-size: 1.6rem;
}

button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;
}

.navbar-nav li {
  padding-right: 20px;
  display: block;
  margin: 0 auto;
}

.navbar-nav .nav-link {
  color: #FFF;
  padding-top: 0.8rem;
}

.navbar-nav .nav-link.active,.navbar-nav .nav-link:hover{
  color: #FFF;
  background-image: linear-gradient(to bottom, #e6bc24, #eab324, #edab26, #f0a22a, #f2992e);
  padding: 15px;
  transition: all 1s ease;
}

.navbar.solid {
  background: rgba(0, 0, 0, 0.7)!important;
  transition: background-color 1s ease 0s;
}

i.fas.fa-bars {
  color: #FFF;
  font-size: 30px;
}

/*============ LANDING PAGE IMAGE ============*/
.home-inner {
  background-image: url('https://github.com/Ceci007/images/blob/master/img-portfolio/disc.jpeg?raw=true');
}

.caption {
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 38%;
  z-index: 1;
}

.caption h1{
  color: #FFF;
  font-size: 4.5rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3rem;
  text-shadow: 0.1rem 0.1rem 0.8rem #000;
  padding-bottom: 1rem;
}

.caption h3{
  color: #FFF;
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0.1rem 0.1rem 0.5rem #000;
  padding-bottom: 2rem;
}

.btn-lg {
  border-width: medium;
  border-radius: 0;
  padding: 0.8rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block !important;
}

/*--- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
margin-left: 0px!important;
margin-right: 0px!important;
}

/*--- Fix for Fixed Navbar jumping on scroll --*/
.fixed-top  {
 -webkit-backface-visibility: hidden;
}

/*--- Fixed Landing Page Section --*/
.landing {
  position: relative;
  width: 100%;
  height: 100vh; /* Change height of landing page image. */
  display: table;
  z-index: -1;
}
.home-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-inner {
  position: fixed; /* Change to relative to remove fixed style. */
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/*--- iOS Fixed Background Image --*/
.fixed-background {
  position: relative;
  width: 100%;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999!important;
}
/*--- Features Dark Background Image --*/
#fixed {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Team Light Background Image --*/
#fixed-2 {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Prevent WayPoints from Browser Window Scrolling On Mobile --*/
/* Devices under 768px (md) */
@media (max-width: 767px) {
  .row {
    overflow-x: hidden;
    overflow-y: hidden;
  }
}

/*============ ARROW STYLES ============*/

.bounce { /*arrow bouncing duration*/
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: 10px;
  width: 60px;
  height: 50px; /*change with size of arrow to make it sit on bottom of page*/
}
a.down-arrow {
  display: block;
  color: #fff; /*arrow color*/
}
.down-arrow svg.svg-inline--fa {
  opacity: .3; /*arrow opacity*/
  font-size: 2rem; /*arrow size*/
}
.down-arrow svg.svg-inline--fa:hover {
  opacity: .5; /*arrow hover opacity*/
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

/**
 * Owl Carousel v2.3.3
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next,
  .owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: none;
        touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }

  /**
   * Owl Carousel v2.3.3
   * Copyright 2013-2018 David Deutsch
   * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
   */
  /*
   * 	Default theme - Owl Carousel CSS File
   */
  .owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
    .owl-theme .owl-nav [class*='owl-'] {
      color: #FFF;
      font-size: 14px;
      margin: 5px;
      padding: 4px 7px;
      background: #D6D6D6;
      display: inline-block;
      cursor: pointer;
      border-radius: 3px; }
      .owl-theme .owl-nav [class*='owl-']:hover {
        background: #869791;
        color: #FFF;
        text-decoration: none; }
    .owl-theme .owl-nav .disabled {
      opacity: 0.5;
      cursor: default; }

  .owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 10px; }

  .owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent; }
    .owl-theme .owl-dots .owl-dot {
      display: inline-block;
      zoom: 1;
      *display: inline; }
      .owl-theme .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #D6D6D6;
        display: block;
        -webkit-backface-visibility: visible;
        transition: opacity 200ms ease;
        border-radius: 30px; }
      .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #869791; }

        /*============= WAYPOINTS =============*/

        .os-animation{
          opacity: 0;
          margin: 0!important;
          max-width: 100%;
         }
         .os-animation.animated {
          opacity: 1;
         }


        /*--- TURN OFF ANIMATION ON MOBILE *
        @media (max-width: 768px) {
        .animated, .os-animation {
        	-webkit-animation: none;
        	-moz-animation: none;
        	-o-animation: none;
        	animation: none;
        	opacity: 1;
        	-webkit-animation-delay: none !important;
        	-moz-animation-delay: none !important;
        	animation-delay: none !important;
        	}
        }

/*============ FEATURES SECTION ============*/
.narrow {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}

.btn-sm {
  border-width: medium;
  border-radius: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  margin: 1rem;
}

.btn-orange {
  border-color: #F2992E;
  background-color: #F2992E;
  color: #FFF;
}

.btn-orange:hover, .btn-orange:focus {
  border-color: #F79928;
  background-color: #F79928;
  color: #FFF;
}

.jumbotron {
  margin-bottom: 0;
  border-radius: 0;
  padding: 1rem 0 3rem;
}

h3.heading {
  font-size: 1.9rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.9rem;
}

.heading-underline {
  width: 3rem;
  height: 0.2rem;
  background-color: #F2992E;
  margin: 0 auto 2rem;
}

.feature {
  text-align: center;
}

.circle {
  background-color: #F2992E;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.margin-left {
  margin-left: 10px;
}

.feature h3 {
  font-size: 1.3rem;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
}

.feature p {
  font-size: 1.1rem;
}

/*============ FIXED BACKGROUND IMAGE DARK ============*/
#fixed {
  background-image: url('https://github.com/Ceci007/images/blob/master/img-portfolio/desktop1.jpeg?raw=true');
  z-index: -1;
}

.dark {
  background-color: rgba(0, 0, 0, 0.75);
  padding: 7rem 2rem;
  text-align: center;
  z-index: 1000 !important;
}

.dark h3, .dark p {
  color: #E9ECEF;
}

.orange {
  color: #F2992E;
}
/*============ PORTFOLIO SECTION ============*/
.row.padding {
  padding: 2rem 0 1rem;
}

img.example-image {
  max-width: 100%;
}

.row.no-padding [class*=col-] {
  padding: 0;
}

.portfolio-item img:hover {
  transform: scale(1.3);
  cursor: zoom-in;
}

.portfolio-item img {
  transition: transform 0.4s ease;
}

.portfolio-item {
  overflow: hidden;
}

/*============ PRICING SECTION ============*/
.pricing-column {
  background-color: #FFF;
  padding: 2rem;
  border-top: 0.2rem solid #F2992E;
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.075);
  transition: transform 0.7s ease;
  overflow: hidden;
  position: relative;
}

.pricing-column:hover {
  transform: scale(1.1);
}

.pricing-column h3 {
  padding: 1rem;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.pricing-colum p {
  opacity: 0.8;
  margin-top: 1.3rem;
}

.pricing-column h4 {
  font-size: 1.1rem;
  padding: 0.4rem;
}

.pricing-column .item {
  font-weight: 700;
}

.pricing-column h2 {
  padding: 0.8rem 0;
}

.ribbon {
  background-color: #6C757D;
  color: #FFF;
  width: 10rem;
  height: 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding-top: 0.4rem;
  position: absolute;
  right: -2.8rem;
  top: 1.6rem;
  transform: rotate(45deg);
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

/*============ SKILLS SECTION ============*/
.skill h3 {
  color: #F2992E;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
}

.skill p {
  font-size: 1.1rem;
  text-transform: uppercase;
  font-weight: 700;
}

/*============ CLIENTS SECTION ============*/
.clients ul li {
  list-style: none;
}

.clients img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.clients img:hover {
  transform: scale(0.95);
}

blockquote::before {
  font-family: 'Font Awesome\ 5 Free';
  content: '\f10d'; /*quote left icon*/
  margin: 1rem;
  color: #F2992E;
  font-weight: 900;
}

.clients-hr {
  border-top: 1px solid #F2992E;
}

/*============ CONTACT SECTION ============*/
footer {
  background: url('https://github.com/Ceci007/images/blob/master/img-portfolio/footer/footer.png?raw=true') no-repeat;
  background-size: cover;
  color: #FFF;
}

footer .row {
  background-color: rgba(57, 63, 70, 0.65);
  padding: 1rem 2rem 3rem;
}

footer img {
  height: 2rem;
  margin: 1.5rem 0;
}

footer a {
  color: rgba(255,255,255,0.65);
}

footer .svg-inline--fa {
  font-size: 1.6rem;
  margin: 1.2rem 0.5rem 0 0;
  color: rgba(255,255,255,0.65);
}

footer .svg-inline--fa:hover {
  color: #FFF !important;
}

footer h3 {
  text-transform: uppercase;
  margin: 1.5rem 0;
}

.form-group {
  margin-bottom: 1.3rem;
}

.form-control {
  background-color: rgba(57, 63, 70, 0.65);
  border-radius: 0;
  border: 0.15rem solid rgba(255,255,255,0.6);
  color: #FFF !important;
  font-size: 1.1rem;
}

.form-control:focus {
  background-color: rgba(57, 63, 70, 0.65);
  border: 0.15rem solid rgba(255,255,255,0.6);
}

.form-group input::placeholder, .form-group textarea::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

input.btn {
  cursor: pointer;
  font-weight: 700;
  margin-left: -0.01rem;
}

input.btn:hover {
  background-color: #FFF;
  color: rgba(57, 63, 70, 0.65);
}

hr.socket {
  border-top: 0.2rem solid rgba(255,255,255,0.6);
  width: 100%;
}

textarea.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(0, 0, 0, 0);
  outline: 0 none;
}

/*============ TOP SCROLL ============*/
.top-scroll svg.svg-inline--fa {
  font-size: 3rem;
  height: 1.7rem;
  color: rgba(57, 63, 70, 0.65);
  background-color: #FFF;
}

a.top-scroll {
  right: 1.2rem;
  bottom: 1.2rem;
  position: fixed;
  opacity: 0.3;
  z-index: 2000;
}

a.top-scroll:hover {
  opacity: 0.5;
}

/*============ MEDIA QUERIES ============*/
@media (max-width: 991px){
  .caption {
    top: 32%;
  }

  .caption h1{
    font-size: 3.5rem;
    letter-spacing: 0.2rem;
    padding-bottom: 0.8rem;
  }

  .caption h3{
    font-size: 2.2rem;
    padding-bottom: 1.7rem;
  }

  .btn-lg {
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
  }

  .narrow h2 {
    font-size: 2.1rem;
  }
}

@media (max-width: 767px){
  .caption h1{
    font-size: 2.7rem;
    letter-spacing: 0.15rem;
    padding-bottom: 0.5rem;
  }

  .caption h3{
    font-size: 1.7rem;
    padding-bottom: 1.2rem;
  }

  .btn-lg {
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
  }

  .narrow h2 {
    font-size: 1.8rem;
  }

  footer {
    background: url('https://github.com/Ceci007/images/blob/master/img-portfolio/footer/footer-mobile.png?raw=true');
  }

  .clients img {
    max-width: 50%;
    margin: 0 auto;
  }

  .top-scroll {
    display: none !important;
  }
}

@media (max-width: 575px){
  .caption h1{
    font-size: 1.7rem;
    letter-spacing: 0.1rem;
    padding-bottom: 0.4rem;
  }

  .caption h3{
    font-size: 1.2rem;
    padding-bottom: 1rem;
  }

  .btn-lg {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
  }

  .narrow {
    width: 85%;
  }
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

              
            
!

JS

              
                /*========== NAVBAR TRANSPARENT TO SOLID ==========*/

$(document).ready(function() { //when document(DOM) loads completely.
        // Transition effect for navbar
        $(window).scroll(function() { //function is called while you scrolls
          // checks if window is scrolled more than 300px, adds/removes solid class
          if($(this).scrollTop() > 200) {
              $('.navbar').addClass('solid'); //add class 'solid' in any element which has class 'navbar'
          } else {
              $('.navbar').removeClass('solid'); //remove class 'solid' in any element which has class 'navbar'
          }
        });
});

/*========== ADD NAV BACKGROUND ON CLICK ==========*/

$(document).ready(function () { //when document loads completely.
  $('#hamburguer').click(function() {
    if($(window).scrollTop() === 0){
      $('.navbar').toggleClass('solid');
    }
  });
});

/*========== CLOSE MOBILE NAV ON CLICK ==========*/

$(document).ready(function () { //when document loads completely.
    $(document).click(function (event) { //click anywhere
        var clickover = $(event.target); //get the target element where you clicked
        var _opened = $(".navbar-collapse").hasClass("show"); //check if element with 'navbar-collapse' class has a class called show. Returns true and false.
        if (_opened === true && !clickover.hasClass("navbar-toggler")) { // if _opened is true and clickover(element we clicked) doesn't have 'navbar-toggler' class
            $(".navbar-toggler").click(); //toggle the navbar; close the navbar menu in mobile.
        }
    });
});

/*========== SMOOTH SCROLLING TO LINKS ==========*/

$(document).ready(function(){ //document is loaded
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {//click on any link;anchor tag;

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") { //for e.g. website.com#home - #home
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;
      //console.log('hash:',hash)

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({ //animate whole html and body elements
        scrollTop: $(hash).offset().top //scroll to the element with that hash
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash; //website.com - website.com#home
        //Optional remove "window.location.hash = hash;" to prevent transparent navbar on load
      });
    } // End if
  });
});

/*========== BOUNCING DOWN ARROW ==========*/
//down arrow at top
$(document).ready(function(){
$(window).scroll(function(){ //browser scroll
    $(".arrow").css("opacity", 1 - $(window).scrollTop() / 250); //set opacity css from 1 to -(negative) infinity of element with class 'arrow'
  //250 is fade pixels
  });
});

/*========== SKILLS COUNTER ==========*/

$(document).ready(function() { //when document is ready
        $('.counter').counterUp({
            delay: 10, //delay in milliseconds per count up
            time: 1800 //total time taken by the animation
        });
    });

/*========== CLIENTS CAROUSEL ==========*/

$(document).ready(function(){ //when document is ready
  $("#clients-slider").owlCarousel({ //owlCarousel settings
        items:2, //by default there are 2 slides display.
        autoplay:true, //the slides will change automatically.
        smartSpeed:1700, //speed of changing wil be 700
        loop:true, //infinite loop; after the last slide, first slide starts
        autoplayHoverPause:true, //when you put mouse over Carousel, slide changing will stop
        responsive : { //responsiveness as screen size changes
            // min-width: 0px
            0 : {
                items: 1 //on devices with width 0 to 768px show 1 slide
            },
            // min-width: 768px
            768 : {
                items: 2 //on devices with width 768px and above show show 2 slides
            },
        }
  }
  );
});

/*========== TOP SCROLL BUTTON ==========*/

$(document).ready(function() { //when document is ready
  $(window).scroll(function() { //when webpage is scrolled
    if ($(this).scrollTop() > 500) { //if scroll from top is more than 500
      $('.top-scroll').fadeIn(); //display element with class 'top-scroll'; opacity increases
    } else { //if not
      $('.top-scroll').fadeOut(); //hide element with class 'top-scroll'; opacity decreases
    }
  });
});


//Optional Refresh Page at top of document on load instead of at # hash

$(document).ready(function(){
    $('html, body').scrollTop(0);
    $(window).on('load', function() {
    setTimeout(function(){
        $('html, body').scrollTop(0);
    }, 0);
 });
});

//UPDATE ADDITION: MAKE PRICING & TEAM SECTIONS COLUMN HEIGHT EQUAL
/*

$(document).ready(function(){

    // Select and loop the container element of the elements you want to equalise
    $('.row').each(function(){

      // Cache the highest
      var highestBox = 0;

      // Select and loop the elements you want to equalise
      $('.pricing-column,.card-body', this).each(function(){

        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height();
        }

      });

      // Set the height of all those children to whichever was highest
      $('.pricing-column,.card-body',this).height(highestBox);

    });

});

*/



              
            
!
999px

Console