JavaScript seems to be disabled in your browser.
You must have JavaScript enabled in your browser to utilize the functionality of this website.
Home /
HTML5 for Beginners(English, Paperback, Aibara Firuza)
HTML5 for Beginners(English, Paperback, Aibara Firuza)

3 Review(s)
Quick Overview

Rs.1250 on FlipkartBuy
Product Price Comparison
This book has been specifically written in the interest of students, who are beginning to learn HTML. Hence, the basic HTML commands are made easy in this book for them to learn this subject within a short period. The language used is simple so that the students can grasp easily. Though there are many books on HTML available in the market, the salient feature of this book is the simplicity which immediately appeals to the beginners. It can very well be described as the most user friendly book. The coloured illustrations have been inserted in order to enhance the interest of children because they get enchanted by looking at the multicoloured pictures. As a result, they find it easy to remember. After reading this book the students will be able to create attractive web sites of their own choice. The book includes the latest version of HTML5, used for designing web pages. About the Author Firuza Yezdi Aibara, has completed her post graduation in Information Technology, M.Sc-IT, from The D. G. Ruparel College, Mumbai, affiliated to The University of Mumbai. From childhood she had keen interest in Computers. She has completed various courses like Web Design & Development, C, C++, Java, Visual Basic and other subjects. At present, Firuza is working as a Research Associate in the Indian Institute of Technology, IIT, Powai, Mumbai. This first book of hers, has been written in a simple language to enable young students to learn & understand HTML easily. Firuza has authored 6 more books on different subjects like “C” programming and Visual Basic. She is planning to write more books on different computer subjects too. Well known author Mr. Ivan Bayross, has provided guidance to Firuza during the course of writing this book. Table of Contents 1. BASIC CONCEPTS OF HTML HTML (Hyper Text Markup Language) Web Pages World Wide Web (WWW) Tags in HTML Tools for Accessing or Creating a Web Page To open Notepad To view the HTML page in Internet Explorer HTML As a Markup Language HTML as a Page Formatting Tool Structure of an HTML Page Commands Written In Notepad Hands on Exercises 2. THE TAG The
to

Tag The
Tag Example of Headings in Internet Explorer Alignment of

to

Tag Example of Aligning Tag in Internet Explorer Example of
Tag in Internet Explorer Changing the Size/Height and Width of the
/Horizontal Rule Example of Changing the Height of the Divider Example of Changing the Size and Width of Divider Alignment of
/Horizontal Rule tag Noshade Property of
/Horizontal Rule     Example of Aligning Divider and Noshade Property     Hands on Exercises     3. THE BASIC TAGS THE
TAG     Introduction to
tag     Example of Line Breaks without the
tag     Example of Line Breaks with the
Tag     The Tag     Introduction to the “ ” Command     Example of Multiple Spaces without the “ ”     Example of Multiple Spaces with the “ ”    THE
TAG Introduction to
Tag Example of
tag Example of
Tag after Resizing the Window Alignment of Paragraphs/
Example of
tag for alignments The
 Tag     Introduction to  tag     Example of      Hands on Exercises 4. THE TEXT ATTRIBUTES     Introduction     The  tag with Color, Height and Width      tag with Direction      tag with behavior      tag with behavior      tag with Scrollamount      tag with Scrollamount     Example of Text Styles     Font Face     Font Size     Font Color     The Basic Color Codes        The Basic Color Codes        Headings with Font     Example of Headings with  tag     The use of  with  Tag     Hands on Exercises     5. THE IMAGES     Introduction     Example of Inserting an Image     Borders of Images     Example of Image Border     Adding Space between Images     Example of Adding Space between Images     Naming the Images     Image Size     Example for Image Sizes     Alignment of Images     Example of Alignment for Images     Images and Text     Example of Images and Text     Example of Image Background     Special Background Image     Example to check fixed image property     Hands on Exercises 6. THE LIST TAG     Introduction to the List Tag     Ordered List     Unordered List     Example of Ordered List and Unordered List     Nested List        Example of Ordered Nested List     Example of Unordered Nested List     Example of Nested Ordered and Unordered List     Hands on Exercises     7. THE LINKS     Introduction     Links between Two Pages     Example of links     Links in the Same Page     Example of Links in the Same Page     Images as Links     Example of Images as Links     Attributes of Links     Change the Color of the Links     Example of Link Colors     Load a Page in a Different Window when a Link is clicked     Hands on Exercises     8. THE BASIC WEB PAGE     Introduction     Example for combination of tags     Hands on Exercises 9. OTHER FORMATTING TAGS SOUNDS AND VIDEOS     Introduction to Sounds and Videos        Sound and Video Tags     Sounds or Videos Played When the Page Loads     Example of Sounds     Sounds / Videos Played when clicked on Text which is a Link     Sounds / Videos Played when clicked on the Image which is a link COMMENTS     Introduction to Comments     Example of Comments THE  TAG     Introduction to <xmp>     Example of <xmp> SPECIAL CHARACTERS     Introduction to Special Characters     Example of Special Characters     Hands on Exercises 10. THE TABLES     Introduction to Tables     The Table     The Rows     The Columns     The <th> and </th>     The <td> </td>     The Table Border     Example of Tables With and Without Border     Vertical Headers of Table     Example of Vertical Headers     Cellspacing     Cellpadding     Example of Cellspacing        Example of Cellpadding     Example of Cellspacing and Cellpadding     Alignment of the Text Present inside the Cells     Alignment of Table     Use of <br> tag in <table>     Example for Alignment of Table and Cells     Use of <font> Tag in <table>     Border Attributes in the Table     Example for Border and Font Color of tables     Background Property     Example of Table Background Color     Background Color of Cells     Example for Colors Given To Rows and Cells of the Table     Example for Image as Background of the Table     Example for Image Background and Colors of the Table     Merging Of Rows and Columns     Colspan     Rowspan     Example for Merging Rows of the Table     Example for Merging Columns of the Table     Example for Merging Rows and Columns of the Table     Width of the Table     Example for Width of the Table     Inserting Images in the Cell of a Table     Example of Inserting an Image in the Table     Table within a Table     Example of a Table within another Table     Ordered and Unordered List inside the Table     Empty Cells inside the Table     Example of List and Empty Cells inside the Table     Links in the Table     Example of Links inside the Table     Hands on Exercises 11. THE FRAMES     Introduction to Frames     The Frames     Frames with Column Arrangement     Example of “MainFrames.html” with Column Arrangement     Column Size for Frames     Example of Distributing Frame Columns Evenly        Frames with Row Arrangement     Example of “MainFrames.html” with Row Arrangement     Row Size for Frames     Example of Distributing Frame Rows Evenly     Example of Frames with Rows and Columns     Frame Spacing     Example of Frame Spacing     Example of Frame Border     Margin Width and Height in Frames     Example of Frame Margins     Scroll Bars for Frames     Avoid Scrolling     Example of Avoiding Scrolling for Frames     Resizing of Frames     Example of Noresize for Frames     Links in Frames     Example of “MainFrames.html” for links in Frames     Load a Page in Different Frame When a Link is clicked     Hands on Exercises 12. THE FORMS     Introduction to Forms     The <input> Tag     The <input type= “text”>     Example of Text Box     The <input type= “password”>     Example of Password     The <input type= “checkbox”>     Example of Check Box     Example of Check Box Using Checked Property     The <input type= “radio”>     Example of Radio Button Using Checked Property     The <input type= “reset”>     The <input type= “submit”>     Example of <input> Tag     The <textarea> </textarea> Tag     Example of Text Area     Example of Text Area with Pre Defined Text The <select> </select>     The Dropdown List     The Normal List     Example of Dropdown List     Example of Normal Lis     Example of Multiple Select for Normal List     Example of Implementing Tables, Frames and Forms Together     Hands on Exercises     13. VB SCRIPT     Scripting Language     Introduction to VBScript     Printing Text Using VBScript         Example of Printing Text using VBScript         Example of Popup that Blocks Scripting Content     <h> tag along with VBScript         Example of Headings along with VBScript         Example of Headings along with VBScript     Alert / msgbox in VBScript         Example of alert         Example of msgbox     Variables in VBScript         Declaring Variables         Assigning Values to Variables         Rules for Naming Variables     Arrays in VBScript         Declaring an Array         Assigning Values to an Array     Conditional Statements in VBScript            If then                Example of If then         If else                Example of If else         Elseif                Example of ElseIf         Switch                Example of Switch     Looping Statements in VBScript         While Loop             Example of Printing “Hello” 5 times using While Loop         For Loop                Example of Printing Even Numbers from 0 to 10 and Odd             Numbers from 30 to 20 using For Loop     Do While Loop                Example of Printing Numbers from 1 to 10 using Do While             Loop     Do Until Loop                Example of PrintingNumbers from 1to10 usingDoUntil Loop             Example of Printing Tables of Number 5 using While and For             Loop         Example of Printing Tables of Number 5 using Do While and         Do Until Loop     Procedures in VBScript             Sub procedure             Functions     Events in VBScript     Forms along with VBScript             Example of Displaying Name using msgbox on Click of a Button             Example of Validating Age on Click of a Button                Example of Validating Password on Click of a Button     Hands on Exercises 14. Java SCRIPT     Introduction to Java Script     Example of Printing Text using Java Script in Notepad as shown in     Fig 14.1.     <h> tag along with Java Script     Example of <h> tag in Notepad as shown in Fig 14.2.     Example of Date in Notepad as shown in Fig 14.3.     Variables in Java Script     Declaring Variables     Assigning Values to Variables     Rules for Naming Variables     Array     Declaring an Array     Assigning Values to an Array     Popup boxes         1) Alert box     Example of Alert Box in Notepad as shown in Fig 14.4.         2) Confirm box     Example of Confirm Box in Notepad as shown in Fig 14.5 and 14.6.         3) Prompt box     Example of Prompt Box using Java Script in Notepad as shown in     Fig 14.7 and 14.8.     Comments        Single-Line Comments     Multi-Line Comments     Example of Prompt Box using Java Script in Notepad     as shown in Fig 14.9.     Operators in Java Script     Arithmetic Operator     Assignment Operators     Relational Operators     Logical Operators     Concatenation     Conditional Statements in Java Script         if         if else         if else if     Switch     Looping Statements in Java Script     While Loop     For Loop     Do While Loop     Break     Continue     Functions     Events in Java Script     Forms along with Java Script     Hands on Exercises     Fill In the Blanks     Questions 15. HTML5     Introduction     Features of HTML5     New Markup Elements of HTML5     New Form Elements and Attributes of HTML5     Hands on Exercises     Fill In the Blanks     Questions 16. Revisiting Basic Tags in HTML5     <H> tag     <hr> tag     <p> tag     <pre>, <br>, <nobr>, &nbsp; tag     <marquee> tag in HTML5     Comments in HTML5     Text Styles in HTML5     <div> tag     <span> tag     Hands on Exercises     Questions 17. Images, List and Links in HTML5     Lists     Definition List     Images     Image Margins and Padding     <figure> tag     Links     Hands on Exercises     Questions 18. Tables and Forms in HTML5     Tables     Forms     New Elements added to HTML5     Hands on Exercises     Questions 19. Audio and Video in HTML5     <audio>     <video>     <source>     Hands on Exercises     Questions 20. Canvas     <canvas>     Text Styles     Shapes     Fill Styles     Hands on Exercises     Questions SUMMARY ANSWERS FOR HANDS ON EXERCISES BACK INDEX   

    </div> <!--product-shop--> 

<aside class="col-lg-3 col-sm-3 col-xs-12 bounceInLeft animated">
  <div class="product-sibebar-banner">
<div class="text-banner">

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0173740730405148"
     data-ad-slot="2469848813"
     data-ad-format="vertical">
</ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>  </aside>         
</div> <!--product-essential-->
</div> <!--product-view-->
<div class="product-collateral">
    <!-- Tabs -->       
<div class="col-sm-12 wow bounceInUp animated animated" style="visibility: visible;">


</div> <!--col-sm-12 wow bounceInUp animated-->
 </div>
 	
</div> <!--row -->
</div> <!--col-main-->

</div><!--main-container-->
      </section>
	  	  <style>
@charset "UTF-8";




.animated {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-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% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1200px);
    transform: translateY(1200px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    -ms-transform: translateY(1000px);
    transform: translateY(1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    -ms-transform: translateY(1000px);
    transform: translateY(1000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    -ms-transform: translateY(1000px);
    transform: translateY(1000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

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

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(1000px);
    -ms-transform: translateY(1000px);
    transform: translateY(1000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

.actions button.button.btn-cart { }
html { font-family: sans-serif; }
body { margin: 0px; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0px; }
[hidden], template { display: none; }
a { background-color: transparent; }
a:active, a:hover { outline: 0px; }
abbr[title] { border-bottom-width: 1px; border-bottom-style: dotted; }
b, strong { font-weight: 700; }
dfn { font-style: italic; }
h1 { margin: 0.67em 0px; font-size: 2em; }
mark { color: rgb(0, 0, 0); background: rgb(255, 255, 0); }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0px; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { height: 0px; box-sizing: content-box; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { margin: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; color: inherit; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { box-sizing: content-box; -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { padding: 0.35em 0.625em 0.75em; margin: 0px 2px; border: 1px solid silver; }
legend { padding: 0px; border: 0px; }
textarea { overflow: auto; }
optgroup { font-weight: 700; }
table { border-spacing: 0px; border-collapse: collapse; }
td, th { padding: 0px; }
* { box-sizing: border-box; }
::before, ::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); }
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
a { color: rgb(51, 122, 183); text-decoration: none; }
a:hover, a:focus { color: rgb(35, 82, 124); text-decoration: underline; }
a:focus { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; }
figure { margin: 0px; }
img { vertical-align: middle; }
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
hr { margin-top: 20px; margin-bottom: 20px; border-width: 1px 0px 0px; border-top-style: solid; border-top-color: rgb(238, 238, 238); }
p { margin: 0px 0px 10px; }
ul, ol { margin-top: 0px; margin-bottom: 10px; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0px; }
dl { margin-top: 0px; margin-bottom: 20px; }
dt, dd { line-height: 1.42857; }
dt { font-weight: 700; }
dd { margin-left: 0px; }
abbr[title], abbr[data-original-title] { cursor: help; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(119, 119, 119); }
blockquote { padding: 10px 20px; margin: 0px 0px 20px; font-size: 17.5px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(238, 238, 238); }
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0px; }
address { margin-bottom: 20px; font-style: normal; line-height: 1.42857; }
code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; }
code { padding: 2px 4px; font-size: 90%; color: rgb(199, 37, 78); border-radius: 4px; background-color: rgb(249, 242, 244); }
kbd { padding: 2px 4px; font-size: 90%; color: rgb(255, 255, 255); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px inset; background-color: rgb(51, 51, 51); }
kbd kbd { padding: 0px; font-size: 100%; font-weight: 700; box-shadow: none; }
pre { display: block; padding: 9.5px; margin: 0px 0px 10px; font-size: 13px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); border-radius: 4px; background-color: rgb(245, 245, 245); }
pre code { padding: 0px; font-size: inherit; color: inherit; white-space: pre-wrap; border-radius: 0px; background-color: transparent; }
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.row { margin-right: -15px; margin-left: -15px; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }
.col-xs-12 { width: 100%; }
table { background-color: transparent; }
caption { padding-top: 8px; padding-bottom: 8px; color: rgb(119, 119, 119); text-align: left; }
th { text-align: left; }
table col[class*="col-"] { position: static; display: table-column; float: none; }
table td[class*="col-"], table th[class*="col-"] { position: static; display: table-cell; float: none; }
.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th { background-color: rgb(245, 245, 245); }
.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th { background-color: rgb(232, 232, 232); }
fieldset { min-width: 0px; padding: 0px; margin: 0px; border: 0px; }
legend { display: block; width: 100%; padding: 0px; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: rgb(51, 51, 51); border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229); }
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
input[type="search"] { box-sizing: border-box; }
input[type="radio"], input[type="checkbox"] { margin: 4px 0px 0px; line-height: normal; }
input[type="file"] { display: block; }
input[type="range"] { display: block; width: 100%; }
select[multiple], select[size] { height: auto; }
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; }
output { display: block; padding-top: 7px; font-size: 14px; line-height: 1.42857; color: rgb(85, 85, 85); }
input[type="search"] { -webkit-appearance: none; }
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; }
.btn:active, .btn.active { outline: 0px; box-shadow: rgba(0, 0, 0, 0.121569) 0px 3px 5px inset; background-image: none; }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: rgb(51, 51, 51); border-color: rgb(173, 173, 173); background-color: rgb(230, 230, 230); }
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; }
.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { border-color: rgb(204, 204, 204); background-color: rgb(255, 255, 255); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: rgb(255, 255, 255); border-color: rgb(32, 77, 116); background-color: rgb(40, 96, 144); }
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; }
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { border-color: rgb(46, 109, 164); background-color: rgb(51, 122, 183); }
.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: rgb(255, 255, 255); border-color: rgb(57, 132, 57); background-color: rgb(68, 157, 68); }
.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background-image: none; }
.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { border-color: rgb(76, 174, 76); background-color: rgb(92, 184, 92); }
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: rgb(255, 255, 255); border-color: rgb(38, 154, 188); background-color: rgb(49, 176, 213); }
.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; }
.btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active { border-color: rgb(70, 184, 218); background-color: rgb(91, 192, 222); }
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: rgb(255, 255, 255); border-color: rgb(213, 133, 18); background-color: rgb(236, 151, 31); }
.btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background-image: none; }
.btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active { border-color: rgb(238, 162, 54); background-color: rgb(240, 173, 78); }
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: rgb(255, 255, 255); border-color: rgb(172, 41, 37); background-color: rgb(201, 48, 44); }
.btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-image: none; }
.btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active { border-color: rgb(212, 63, 58); background-color: rgb(217, 83, 79); }
.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link { box-shadow: none; background-color: transparent; }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: rgb(255, 255, 255); text-decoration: none; outline: 0px; background-color: rgb(51, 122, 183); }
.btn-group > .btn:hover, .btn-group-vertical > .btn:hover, .btn-group > .btn:focus, .btn-group-vertical > .btn:focus, .btn-group > .btn:active, .btn-group-vertical > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn.active { z-index: 2; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: rgb(85, 85, 85); cursor: default; border-width: 1px; border-style: solid; border-color: rgb(221, 221, 221) rgb(221, 221, 221) transparent; background-color: rgb(255, 255, 255); }
.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border: 1px solid rgb(221, 221, 221); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: rgb(255, 255, 255); background-color: rgb(51, 122, 183); }
.nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border: 1px solid rgb(221, 221, 221); }
.tab-content > .active { display: block; visibility: visible; }
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: rgb(85, 85, 85); background-color: rgb(231, 231, 231); }
.navbar-default .navbar-toggle .icon-bar { background-color: rgb(136, 136, 136); }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: rgb(255, 255, 255); background-color: rgb(8, 8, 8); }
.navbar-inverse .navbar-toggle .icon-bar { background-color: rgb(255, 255, 255); }
.breadcrumb > .active { color: rgb(119, 119, 119); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: rgb(255, 255, 255); cursor: default; border-color: rgb(51, 122, 183); background-color: rgb(51, 122, 183); }
.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: rgb(51, 122, 183); background-color: rgb(255, 255, 255); }
.container .jumbotron, .container-fluid .jumbotron { border-radius: 6px; }
.jumbotron .container { max-width: 100%; }
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: rgb(51, 122, 183); }
.progress.active .progress-bar, .progress-bar.active { animation: progress-bar-stripes 2s linear infinite; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: rgb(255, 255, 255); border-color: rgb(51, 122, 183); background-color: rgb(51, 122, 183); }
.list-group-item.active .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active:hover .list-group-item-heading > small, .list-group-item.active:focus .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading > .small { color: inherit; }
.list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text { color: rgb(199, 221, 239); }
a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus { color: rgb(255, 255, 255); border-color: rgb(60, 118, 61); background-color: rgb(60, 118, 61); }
a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus { color: rgb(255, 255, 255); border-color: rgb(49, 112, 143); background-color: rgb(49, 112, 143); }
a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus { color: rgb(255, 255, 255); border-color: rgb(138, 109, 59); background-color: rgb(138, 109, 59); }
a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus { color: rgb(255, 255, 255); border-color: rgb(169, 68, 66); background-color: rgb(169, 68, 66); }
.carousel-inner > .item { position: relative; display: none; transition: left 0.6s ease-in-out; }
.carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; }
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; }
.carousel-inner > .active { left: 0px; }
.carousel-indicators .active { width: 12px; height: 12px; margin: 0px; background-color: rgb(255, 255, 255); }
.clearfix::before, .clearfix::after, .dl-horizontal dd::before, .dl-horizontal dd::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-footer::before, .modal-footer::after { display: table; content: " "; }
.clearfix::after, .dl-horizontal dd::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel-body::after, .modal-footer::after { clear: both; }
div.cssload-content { margin: auto; display: -webkit-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }
.cssload-l1, .cssload-l2, .cssload-l3 { height: 5px; width: 29px; margin: 5px; animation: cssload-loading1 1.15s ease-in-out 0s infinite; background: rgb(69, 149, 247); }
.cssload-l2 { animation: cssload-loading2 0.58s ease-in-out 0s infinite alternate; }
.cssload-l3 { animation: cssload-loading1 1.15s ease-in-out 0s infinite reverse; }
.panelz { padding: 5px; text-align: center; border: 1px solid rgb(195, 195, 195); margin: 4px; background-color: rgb(255, 255, 255); }
.flipd, .flipz { cursor: pointer; padding: 5px; text-align: center; margin: 3px; color: rgb(0, 126, 236); font-size: 15px; background-color: rgb(255, 255, 255); }
.panelz { display: none; }
a.boxclose { float: right; margin-top: 0px; margin-right: -10px; cursor: pointer; color: rgb(255, 255, 255); font-size: 18px; display: inline-block; line-height: 0px; padding: 6px 2px 8px; background: rgb(255, 108, 0); }

@media (min-width:768px) {
.container {
	width: 750px
}
}
@media (min-width:992px) {
.container {
	width: 970px
}
}
@media (min-width:1200px) {
.container {
	width: 1170px
}
}

@media (min-width:768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
	float: left
}
.col-sm-12 {
	width: 100%
}
.col-sm-11 {
	width: 91.66666667%
}
.col-sm-10 {
	width: 83.33333333%
}
.col-sm-9 {
	width: 75%
}
.col-sm-8 {
	width: 66.66666667%
}
.col-sm-7 {
	width: 58.33333333%
}
.col-sm-6 {
	width: 50%
}
.col-sm-5 {
	width: 41.66666667%
}
.col-sm-4 {
	width: 33.33333333%
}
.col-sm-3 {
	width: 25%
}
.col-sm-2 {
	width: 16.66666667%
}
.col-sm-1 {
	width: 8.33333333%
}
.col-sm-pull-12 {
	right: 100%
}
.col-sm-pull-11 {
	right: 91.66666667%
}
.col-sm-pull-10 {
	right: 83.33333333%
}
.col-sm-pull-9 {
	right: 75%
}
.col-sm-pull-8 {
	right: 66.66666667%
}
.col-sm-pull-7 {
	right: 58.33333333%
}
.col-sm-pull-6 {
	right: 50%
}
.col-sm-pull-5 {
	right: 41.66666667%
}
.col-sm-pull-4 {
	right: 33.33333333%
}
.col-sm-pull-3 {
	right: 25%
}
.col-sm-pull-2 {
	right: 16.66666667%
}
.col-sm-pull-1 {
	right: 8.33333333%
}
.col-sm-pull-0 {
	right: auto
}
.col-sm-push-12 {
	left: 100%
}
.col-sm-push-11 {
	left: 91.66666667%
}
.col-sm-push-10 {
	left: 83.33333333%
}
.col-sm-push-9 {
	left: 75%
}
.col-sm-push-8 {
	left: 66.66666667%
}
.col-sm-push-7 {
	left: 58.33333333%
}
.col-sm-push-6 {
	left: 50%
}
.col-sm-push-5 {
	left: 41.66666667%
}
.col-sm-push-4 {
	left: 33.33333333%
}
.col-sm-push-3 {
	left: 25%
}
.col-sm-push-2 {
	left: 16.66666667%
}
.col-sm-push-1 {
	left: 8.33333333%
}
.col-sm-push-0 {
	left: auto
}
.col-sm-offset-12 {
	margin-left: 100%
}
.col-sm-offset-11 {
	margin-left: 91.66666667%
}
.col-sm-offset-10 {
	margin-left: 83.33333333%
}
.col-sm-offset-9 {
	margin-left: 75%
}
.col-sm-offset-8 {
	margin-left: 66.66666667%
}
.col-sm-offset-7 {
	margin-left: 58.33333333%
}
.col-sm-offset-6 {
	margin-left: 50%
}
.col-sm-offset-5 {
	margin-left: 41.66666667%
}
.col-sm-offset-4 {
	margin-left: 33.33333333%
}
.col-sm-offset-3 {
	margin-left: 25%
}
.col-sm-offset-2 {
	margin-left: 16.66666667%
}
.col-sm-offset-1 {
	margin-left: 8.33333333%
}
.col-sm-offset-0 {
	margin-left: 0
}
}
@media (min-width:992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
	float: left
}
.col-md-12 {
	width: 100%
}
.col-md-11 {
	width: 91.66666667%
}
.col-md-10 {
	width: 83.33333333%
}
.col-md-9 {
	width: 75%
}
.col-md-8 {
	width: 66.66666667%
}
.col-md-7 {
	width: 58.33333333%
}
.col-md-6 {
	width: 50%
}
.col-md-5 {
	width: 41.66666667%
}
.col-md-4 {
	width: 33.33333333%
}
.col-md-3 {
	width: 25%
}
.col-md-2 {
	width: 16.66666667%
}
.col-md-1 {
	width: 8.33333333%
}
.col-md-pull-12 {
	right: 100%
}
.col-md-pull-11 {
	right: 91.66666667%
}
.col-md-pull-10 {
	right: 83.33333333%
}
.col-md-pull-9 {
	right: 75%
}
.col-md-pull-8 {
	right: 66.66666667%
}
.col-md-pull-7 {
	right: 58.33333333%
}
.col-md-pull-6 {
	right: 50%
}
.col-md-pull-5 {
	right: 41.66666667%
}
.col-md-pull-4 {
	right: 33.33333333%
}
.col-md-pull-3 {
	right: 25%
}
.col-md-pull-2 {
	right: 16.66666667%
}
.col-md-pull-1 {
	right: 8.33333333%
}
.col-md-pull-0 {
	right: auto
}
.col-md-push-12 {
	left: 100%
}
.col-md-push-11 {
	left: 91.66666667%
}
.col-md-push-10 {
	left: 83.33333333%
}
.col-md-push-9 {
	left: 75%
}
.col-md-push-8 {
	left: 66.66666667%
}
.col-md-push-7 {
	left: 58.33333333%
}
.col-md-push-6 {
	left: 50%
}
.col-md-push-5 {
	left: 41.66666667%
}
.col-md-push-4 {
	left: 33.33333333%
}
.col-md-push-3 {
	left: 25%
}
.col-md-push-2 {
	left: 16.66666667%
}
.col-md-push-1 {
	left: 8.33333333%
}
.col-md-push-0 {
	left: auto
}
.col-md-offset-12 {
	margin-left: 100%
}
.col-md-offset-11 {
	margin-left: 91.66666667%
}
.col-md-offset-10 {
	margin-left: 83.33333333%
}
.col-md-offset-9 {
	margin-left: 75%
}
.col-md-offset-8 {
	margin-left: 66.66666667%
}
.col-md-offset-7 {
	margin-left: 58.33333333%
}
.col-md-offset-6 {
	margin-left: 50%
}
.col-md-offset-5 {
	margin-left: 41.66666667%
}
.col-md-offset-4 {
	margin-left: 33.33333333%
}
.col-md-offset-3 {
	margin-left: 25%
}
.col-md-offset-2 {
	margin-left: 16.66666667%
}
.col-md-offset-1 {
	margin-left: 8.33333333%
}
.col-md-offset-0 {
	margin-left: 0
}
}
@media (min-width:1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
	float: left
}
.col-lg-12 {
	width: 100%
}
.col-lg-11 {
	width: 91.66666667%
}
.col-lg-10 {
	width: 83.33333333%
}
.col-lg-9 {
	width: 75%
}
.col-lg-8 {
	width: 66.66666667%
}
.col-lg-7 {
	width: 58.33333333%
}
.col-lg-6 {
	width: 50%
}
.col-lg-5 {
	width: 41.66666667%
}
.col-lg-4 {
	width: 33.33333333%
}
.col-lg-3 {
	width: 25%
}
.col-lg-2 {
	width: 16.66666667%
}
.col-lg-1 {
	width: 8.33333333%
}
.col-lg-pull-12 {
	right: 100%
}
.col-lg-pull-11 {
	right: 91.66666667%
}
.col-lg-pull-10 {
	right: 83.33333333%
}
.col-lg-pull-9 {
	right: 75%
}
.col-lg-pull-8 {
	right: 66.66666667%
}
.col-lg-pull-7 {
	right: 58.33333333%
}
.col-lg-pull-6 {
	right: 50%
}
.col-lg-pull-5 {
	right: 41.66666667%
}
.col-lg-pull-4 {
	right: 33.33333333%
}
.col-lg-pull-3 {
	right: 25%
}
.col-lg-pull-2 {
	right: 16.66666667%
}
.col-lg-pull-1 {
	right: 8.33333333%
}
.col-lg-pull-0 {
	right: auto
}
.col-lg-push-12 {
	left: 100%
}
.col-lg-push-11 {
	left: 91.66666667%
}
.col-lg-push-10 {
	left: 83.33333333%
}
.col-lg-push-9 {
	left: 75%
}
.col-lg-push-8 {
	left: 66.66666667%
}
.col-lg-push-7 {
	left: 58.33333333%
}
.col-lg-push-6 {
	left: 50%
}
.col-lg-push-5 {
	left: 41.66666667%
}
.col-lg-push-4 {
	left: 33.33333333%
}
.col-lg-push-3 {
	left: 25%
}
.col-lg-push-2 {
	left: 16.66666667%
}
.col-lg-push-1 {
	left: 8.33333333%
}
.col-lg-push-0 {
	left: auto
}
.col-lg-offset-12 {
	margin-left: 100%
}
.col-lg-offset-11 {
	margin-left: 91.66666667%
}
.col-lg-offset-10 {
	margin-left: 83.33333333%
}
.col-lg-offset-9 {
	margin-left: 75%
}
.col-lg-offset-8 {
	margin-left: 66.66666667%
}
.col-lg-offset-7 {
	margin-left: 58.33333333%
}
.col-lg-offset-6 {
	margin-left: 50%
}
.col-lg-offset-5 {
	margin-left: 41.66666667%
}
.col-lg-offset-4 {
	margin-left: 33.33333333%
}
.col-lg-offset-3 {
	margin-left: 25%
}
.col-lg-offset-2 {
	margin-left: 16.66666667%
}
.col-lg-offset-1 {
	margin-left: 8.33333333%
}
.col-lg-offset-0 {
	margin-left: 0
}
}
@media screen and (max-width:767px) {
.table-responsive {
	width: 100%;
	margin-bottom: 15px;
	overflow-y: hidden;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	border: 1px solid #ddd
}
.table-responsive>.table {
	margin-bottom: 0
}
.table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
	white-space: nowrap
}
.table-responsive>.table-bordered {
	border: 0
}
.table-responsive>.table-bordered>thead>tr>th:first-child, .table-responsive>.table-bordered>tbody>tr>th:first-child, .table-responsive>.table-bordered>tfoot>tr>th:first-child, .table-responsive>.table-bordered>thead>tr>td:first-child, .table-responsive>.table-bordered>tbody>tr>td:first-child, .table-responsive>.table-bordered>tfoot>tr>td:first-child {
	border-left: 0
}
.table-responsive>.table-bordered>thead>tr>th:last-child, .table-responsive>.table-bordered>tbody>tr>th:last-child, .table-responsive>.table-bordered>tfoot>tr>th:last-child, .table-responsive>.table-bordered>thead>tr>td:last-child, .table-responsive>.table-bordered>tbody>tr>td:last-child, .table-responsive>.table-bordered>tfoot>tr>td:last-child {
	border-right: 0
}
.table-responsive>.table-bordered>tbody>tr:last-child>th, .table-responsive>.table-bordered>tfoot>tr:last-child>th, .table-responsive>.table-bordered>tbody>tr:last-child>td, .table-responsive>.table-bordered>tfoot>tr:last-child>td {
	border-bottom: 0
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
	line-height: 34px
}
input[type=date].input-sm, input[type=time].input-sm, input[type=datetime-local].input-sm, input[type=month].input-sm {
	line-height: 30px
}
input[type=date].input-lg, input[type=time].input-lg, input[type=datetime-local].input-lg, input[type=month].input-lg {
	line-height: 46px
}
}
@media (min-width:768px) {
.form-inline .form-group {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle
}
.form-inline .form-control {
	display: inline-block;
	width: auto;
	vertical-align: middle
}
.form-inline .form-control-static {
	display: inline-block
}
.form-inline .input-group {
	display: inline-table;
	vertical-align: middle
}
.form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn, .form-inline .input-group .form-control {
	width: auto
}
.form-inline .input-group>.form-control {
	width: 100%
}
.form-inline .control-label {
	margin-bottom: 0;
	vertical-align: middle
}
.form-inline .radio, .form-inline .checkbox {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle
}
.form-inline .radio label, .form-inline .checkbox label {
	padding-left: 0
}
.form-inline .radio input[type=radio], .form-inline .checkbox input[type=checkbox] {
	position: relative;
	margin-left: 0
}
.form-inline .has-feedback .form-control-feedback {
	top: 0
}
}

@media (min-width:768px) {
.form-horizontal .control-label {
	padding-top: 7px;
	margin-bottom: 0;
	text-align: right
}
}
@media (min-width:768px) {
.form-horizontal .form-group-lg .control-label {
	padding-top: 14.3px
}
}
@media (min-width:768px) {
.form-horizontal .form-group-sm .control-label {
	padding-top: 6px
}
}@media (min-width:768px) {
.navbar-right .dropdown-menu {
	right: 0;
	left: auto
}
.navbar-right .dropdown-menu-left {
	right: auto;
	left: 0
}
}
@media (min-width:768px) {
.nav-tabs.nav-justified>li {
	display: table-cell;
	width: 1%
}
.nav-tabs.nav-justified>li>a {
	margin-bottom: 0
}
}

@media (min-width:768px) {
.nav-tabs.nav-justified>li>a {
	border-bottom: 1px solid #ddd;
	border-radius: 4px 4px 0 0
}
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>.active>a:focus {
	border-bottom-color: #fff
}
}
@media (min-width:768px) {
.nav-justified>li {
	display: table-cell;
	width: 1%
}
.nav-justified>li>a {
	margin-bottom: 0
}
}
@media (min-width:768px) {
.nav-tabs-justified>li>a {
	border-bottom: 1px solid #ddd;
	border-radius: 4px 4px 0 0
}
.nav-tabs-justified>.active>a, .nav-tabs-justified>.active>a:hover, .nav-tabs-justified>.active>a:focus {
	border-bottom-color: #fff
}
}
@media (min-width:768px) {
.navbar {
	border-radius: 4px
}
}
@media (min-width:768px) {
.navbar-header {
	float: left
}
}

@media (min-width:768px) {
.navbar-collapse {
	width: auto;
	border-top: 0;
	-webkit-box-shadow: none;
	box-shadow: none
}
.navbar-collapse.collapse {
	display: block!important;
	height: auto!important;
	padding-bottom: 0;
	overflow: visible!important;
	visibility: visible!important
}
.navbar-collapse.in {
	overflow-y: visible
}
.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
	padding-right: 0;
	padding-left: 0
}
}

@media (max-device-width:480px) and (orientation:landscape) {
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
	max-height: 200px
}
}
@media (min-width:768px) {
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
	margin-right: 0;
	margin-left: 0
}
}
@media (min-width:768px) {
.navbar-static-top {
	border-radius: 0
}
}
@media (min-width:768px) {
.navbar-fixed-top, .navbar-fixed-bottom {
	border-radius: 0
}
}
@media (min-width:768px) {
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
	margin-left: -15px
}
}
@media (min-width:768px) {
.navbar-toggle {
	display: none
}
}
@media (max-width:767px) {
.navbar-nav .open .dropdown-menu {
	position: static;
	float: none;
	width: auto;
	margin-top: 0;
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none
}
.navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header {
	padding: 5px 15px 5px 25px
}
.navbar-nav .open .dropdown-menu>li>a {
	line-height: 20px
}
.navbar-nav .open .dropdown-menu>li>a:hover, .navbar-nav .open .dropdown-menu>li>a:focus {
	background-image: none
}
}
@media (min-width:768px) {
.navbar-nav {
	float: left;
	margin: 0
}
.navbar-nav>li {
	float: left
}
.navbar-nav>li>a {
	padding-top: 15px;
	padding-bottom: 15px
}
}
@media (min-width:768px) {
.navbar-form .form-group {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle
}
.navbar-form .form-control {
	display: inline-block;
	width: auto;
	vertical-align: middle
}
.navbar-form .form-control-static {
	display: inline-block
}
.navbar-form .input-group {
	display: inline-table;
	vertical-align: middle
}
.navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control {
	width: auto
}
.navbar-form .input-group>.form-control {
	width: 100%
}
.navbar-form .control-label {
	margin-bottom: 0;
	vertical-align: middle
}
.navbar-form .radio, .navbar-form .checkbox {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle
}
.navbar-form .radio label, .navbar-form .checkbox label {
	padding-left: 0
}
.navbar-form .radio input[type=radio], .navbar-form .checkbox input[type=checkbox] {
	position: relative;
	margin-left: 0
}
.navbar-form .has-feedback .form-control-feedback {
	top: 0
}
}
@media (max-width:767px) {
.navbar-form .form-group {
	margin-bottom: 5px
}
.navbar-form .form-group:last-child {
	margin-bottom: 0
}
}
@media (min-width:768px) {
.navbar-form {
	width: auto;
	padding-top: 0;
	padding-bottom: 0;
	margin-right: 0;
	margin-left: 0;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none
}
}
@media (min-width:768px) {
.navbar-text {
	float: left;
	margin-right: 15px;
	margin-left: 15px
}
}
@media (min-width:768px) {
.navbar-left {
	float: left!important
}
.navbar-right {
	float: right!important;
	margin-right: -15px
}
.navbar-right~.navbar-right {
	margin-right: 0
}
}
@media (max-width:767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
	color: #777
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
	color: #333;
	background-color: transparent
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
	color: #555;
	background-color: #e7e7e7
}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
	color: #ccc;
	background-color: transparent
}
}
@media (max-width:767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
	border-color: #080808
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
	background-color: #080808
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
	color: #9d9d9d
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
	color: #fff;
	background-color: transparent
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a, .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
	color: #fff;
	background-color: #080808
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus {
	color: #444;
	background-color: transparent
}
}
@media screen and (min-width:768px) {
.jumbotron {
	padding: 48px 0
}
.container .jumbotron, .container-fluid .jumbotron {
	padding-right: 60px;
	padding-left: 60px
}
.jumbotron h1, .jumbotron .h1 {
	font-size: 63px
}
}
@media (min-width:768px) {
.modal-dialog {
	width: 600px;
	margin: 30px auto
}
.modal-content {
	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
	box-shadow: 0 5px 15px rgba(0,0,0,.5)
}
.modal-sm {
	width: 300px
}
}
@media (min-width:992px) {
.modal-lg {
	width: 900px
}
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner>.item {
	-webkit-transition: -webkit-transform .6s ease-in-out;
	-o-transition: -o-transform .6s ease-in-out;
	transition: transform .6s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000
}
.carousel-inner>.item.next, .carousel-inner>.item.active.right {
	left: 0;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0)
}
.carousel-inner>.item.prev, .carousel-inner>.item.active.left {
	left: 0;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0)
}
.carousel-inner>.item.next.left, .carousel-inner>.item.prev.right, .carousel-inner>.item.active {
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
}
@media screen and (min-width:768px) {
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
	width: 30px;
	height: 30px;
	margin-top: -15px;
	font-size: 30px
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
	margin-left: -15px
}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
	margin-right: -15px
}
.carousel-caption {
	right: 20%;
	left: 20%;
	padding-bottom: 30px
}
.carousel-indicators {
	bottom: 20px
}
}
@media (max-width:767px) {
.visible-xs {
	display: block!important
}
table.visible-xs {
	display: table
}
tr.visible-xs {
	display: table-row!important
}
th.visible-xs, td.visible-xs {
	display: table-cell!important
}
}
@media (max-width:767px) {
.visible-xs-block {
	display: block!important
}
}
@media (max-width:767px) {
.visible-xs-inline {
	display: inline!important
}
}
@media (max-width:767px) {
.visible-xs-inline-block {
	display: inline-block!important
}
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm {
	display: block!important
}
table.visible-sm {
	display: table
}
tr.visible-sm {
	display: table-row!important
}
th.visible-sm, td.visible-sm {
	display: table-cell!important
}
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm-block {
	display: block!important
}
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm-inline {
	display: inline!important
}
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm-inline-block {
	display: inline-block!important
}
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md {
	display: block!important
}
table.visible-md {
	display: table
}
tr.visible-md {
	display: table-row!important
}
th.visible-md, td.visible-md {
	display: table-cell!important
}
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md-block {
	display: block!important
}
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md-inline {
	display: inline!important
}
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md-inline-block {
	display: inline-block!important
}
}
@media (min-width:1200px) {
.visible-lg {
	display: block!important
}
table.visible-lg {
	display: table
}
tr.visible-lg {
	display: table-row!important
}
th.visible-lg, td.visible-lg {
	display: table-cell!important
}
}
@media (min-width:1200px) {
.visible-lg-block {
	display: block!important
}
}
@media (min-width:1200px) {
.visible-lg-inline {
	display: inline!important
}
}
@media (min-width:1200px) {
.visible-lg-inline-block {
	display: inline-block!important
}
}
@media (max-width:767px) {
.hidden-xs {
	display: none!important
}
}
@media (min-width:768px) and (max-width:991px) {
.hidden-sm {
	display: none!important
}
}
@media (min-width:992px) and (max-width:1199px) {
.hidden-md {
	display: none!important
}
}
@media (min-width:1200px) {
.hidden-lg {
	display: none!important
}
}


 
@media (min-width: 768px)
.col-sm-5 {
    width: 46.66666667%;
}
@media (min-width: 768px)
.col-sm-3 {
    width: 20%;
}

</style><div id="list2"><div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" style="border-bottom: .1em solid rgb(191, 201, 202);" matchpoint="218.181818181818" id="sortid-178"> <div> <div style="width:63%;display: inline-block;"><div  style="text-align: left;"><span style="color: #2069B3;"><a href="//zipri.in/compare/sd/product/trading-chart-breakout-pattern-candlestick/652379894347">Trading Chart Breakout Pattern & Candlestick Pattern Pocket Study For Beginners</a></span></div></div> <div style="width:35%;display: inline-block;" class="xCartProductThumb">                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="xprice">Rs.<span style="color: black;font: message-box;font-size: 20px;">178</span></div>                       </div> </div> <div> <div style="position: absolute;color: #0A0A0A;padding-right: 2px;margin-top: -1px;"><a style="margin-left: -5px;color: white;background-color: #007EEC;padding: 1px;font-size:12px;" href="http://zipri.in/item/Trading_Chart_Breakout_Pattern_&_Candlestick_Pattern_Pocket_Study_For_Beginners">Search similar </a></div> <div style="text-align: -webkit-right;"><a style="color: #007EEC;" target="_blank" href="//zipri.in/buy.php?q=sd/product/trading-chart-breakout-pattern-candlestick/652379894347"><i>Buy from</i> Snapdeal </a></div></div> </div>  <div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" style="border-bottom: .1em solid rgb(191, 201, 202);" matchpoint="353.731343283582" id="sortid-3800"> <div> <div style="width:63%;display: inline-block;"><div  style="text-align: left;"><span style="color: #2069B3;"><a href="//zipri.in/compare/fk/html5-games-development-by-example:-beginner's-guide(english,-paperback,-makzan)/9781849691260">HTML5 Games Development by Example: Beginner's Guide(English, Paperback, Makzan)</a></span></div></div> <div style="width:35%;display: inline-block;" class="xCartProductThumb">                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="xprice">Rs.<span style="color: black;font: message-box;font-size: 20px;">3800</span></div>                       </div> </div> <div> <div style="position: absolute;color: #0A0A0A;padding-right: 2px;margin-top: -1px;"><a style="margin-left: -5px;color: white;background-color: #007EEC;padding: 1px;font-size:12px;" href="http://zipri.in/item/HTML5_Games_Development_by_Example:_Beginner's_Guide(English,_Paperback,_Makzan)">Search similar </a></div> <div style="text-align: -webkit-right;"><a style="color: #007EEC;" target="_blank" href="//zipri.in/buy.php?q=fk/html5-games-development-example-beginner-s-guide/p/itmd3fnz5zwmtn5z?pid=9781849691260&affid=yuvacartgm"><i>Buy from</i> flipkart </a></div></div> </div>  <div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" style="border-bottom: .1em solid rgb(191, 201, 202);" matchpoint="239.63963963964" id="sortid-₹300                                             "> <div> <div style="width:63%;display: inline-block;"><div  style="text-align: left;"><span style="color: #2069B3;"><a href="//zipri.in/compare/sctoo-late-by-colleen-hoover-english-paperback-153299625.html">Too Late by Colleen Hoover (English, Paperback)</a></span></div></div> <div style="width:35%;display: inline-block;" class="xCartProductThumb">                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="xprice">Rs.<span style="color: black;font: message-box;font-size: 20px;">₹300                                             </span></div>                       </div> </div> <div> <div style="position: absolute;color: #0A0A0A;padding-right: 2px;margin-top: -1px;"><a style="margin-left: -5px;color: white;background-color: #007EEC;padding: 1px;font-size:12px;" href="http://zipri.in/item/Too_Late_by_Colleen_Hoover_(English,_Paperback)">Search similar </a></div> <div style="text-align: -webkit-right;"><a style="color: #007EEC;" target="_blank" href="//zipri.in/buy.php?q=sc/too-late-by-colleen-hoover-english-paperback-153299625.html"><i>Buy from</i> Shopclues </a></div></div> </div>  </div><script type="text/javascript">  var main = document.getElementById( "list2" ); [].map.call( main.children, Object ).sort( function ( a, b ) {     return +a.id.match( /\d+/ ) - +b.id.match( /\d+/ ); }).forEach( function ( elem ) {     main.appendChild( elem ); }); </script><script type="text/javascript">
var content = document.getElementById("list2").innerHTML;
    document.getElementById("listcompare").innerHTML += content;
</script><script type="text/javascript">
var elem = document.getElementById("list2");
elem.parentNode.removeChild(elem);

</script>
 
<footer class="footer bounceInUp animated">  
  <!-- Logo Brand Block -->
  <div class="brand-logo ">
<div class="container">

</div>
</div>
  <div class="footer-middle container informative">

    <!-- BEGIN INFORMATIVE FOOTER -->  
            <div class="col-md-3 col-sm-4">
<div class="footer-logo"><a title="zipri India" href="#"><img src="//zipri.in/zipri_files/images/zipri-logo-small.png" alt="zipri India"></a></div>
<p>Dynamic product discovery cum price comparison engine for online shopping in India</p>
<p><a href="//zipri.in/keywords.php">Top searched Keywords</a></p>
</div>      

<div style="display:none" class="col-md-2 col-sm-4">
<h4>Information</h4>
<ul class="links">
<li class="first"><a>Site Map</a></li>
<li><a title="Search Terms" >Search Terms</a></li>
<li><a title="Advanced Search">Advanced Search</a></li>
<li><a title="History">About Us</a></li>
<li><a title="History" >Contact Us</a></li>
</ul>
</div>
<div style="display:none" class="col-md-3 col-sm-4">
<h4>Contact us</h4>
<div class="contacts-info"><address></address>
<div class="phone-footer"></div>
<div class="email-footer"></div>
</div>
</div>      
  </div>  
  <div class="footer-bottom container">
<div class="col-sm-5 col-xs-12 coppyright">� 2015 zipri.in All Rights Reserved.</div>
</div>  
      <!-- BEGIN SIMPLE FOOTER -->  
        

</footer>

  </div> <!--page-->
  <div class="social">
        <ul>
          <li class="fb"><a target="_blank" rel="nofollow" href="#" title="Facebook"></a></li>
          <li class="tw" style="display:none;"><a target="_blank" rel="nofollow" href="#" title="Twitter"></a></li>
          <li class="googleplus" style="display:none;"><a target="_blank" rel="nofollow" href="#" title="GooglePlus"></a></li>
          <li class="rss"><a target="_blank" rel="nofollow" href="#" title="Whatsapp"></a></li>
          <li class="pintrest" style="display:none;"><a target="_blank" rel="nofollow" href="#" title="PInterest"></a></li>
          <li class="linkedin" style="display:none;"><a target="_blank" rel="nofollow" href="#" title="Linkedin"></a></li>
          <li class="youtube" style="display:none;"><a target="_blank" rel="nofollow" href="#" title="Youtube"></a></li>
            </ul>
      </div>
	  <!--end social -->
	  
	  
	  <!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=11127580; 
var sc_invisible=1; 
var sc_security="f69382a7"; 
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="hit counter"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/11127580/0/f69382a7/1/"
alt="hit counter"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-13254147-4', 'auto');
  ga('send', 'pageview');

</script>

</body></html>
HTML5 for Beginners(English, Paperback, Aibara Firuza)

Quick Overview

to

Tag The Tag Example of Headings in Internet Explorer Alignment of

to

Tag The
Tag Example of Headings in Internet Explorer Alignment of
