/*                   Project : Natour  : - Jonas    */

.element {
  //Will always keep in top
       background-position : top;
     }

                     //Center the data using old school way.
.parent { position : relative; } 
.text-box {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%,-50%);
    text-align : center;
}
.heading {
    animation-name: from-left;
    animation-duration: 2s;
   animation-iteration-count:3
  //How many times the animation should iterate.
}

//3D feel for button click.
a:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
a:active{
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
  }

                                  // Button affect.
.btn:link, .btn:visited {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: white;
    border-radius: 128px;
    padding: 12px 40px;
    transition: all .2 s ease-in;
    position: relative;
}

.btn::after {
   //Adding at the back of the original button.
    content : "";
    position: absolute;
    display: inline-block;
    top:0;
    right : 0;
    border-radius: 128px;
    background-color: grey;

    height: 100%;
    width : 100%;
    opacity: .5;
    z-index: -1;
    transition: all .4s;
}

.btn:hover::after {
  //When hovered it should show can box shadow going on.
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}


//Inheritance.
* { 
      box-sizing: inherit;
  //For all the elements will inherit from 'body'.
}
html { font-size : 62.5% /* (62.5% of the size of user's browser's font size.) */ }

body {
      box-sizing : border-box;
}
      
    /* ********************************************************** */
      
/*
 Title : Build a Responsive Website | HTML, CSS Grid, Flexbox & More. ( Youtube )
 By : Travery Media 
*/  
    
      
        
    /* ********************************************************** */