freetimelearn@gmail.com           
Linkedin Google 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="template">

<div class="ftl-width-medium-1">
    <ul class="ftl-tab ftl-tab-grid ftl-tab-bottom" data-ftl-tab>
        <li class="ftl-width-1-6 ftl-active"><a href="#">HTML5</a></li>
        <li class="ftl-width-1-6"><a href="#">CSS3</a></li>
        <li class="ftl-width-1-6"><a href="#">JavaScript</a></li>
        <li class="ftl-width-1-6"><a href="#">jQuery</a></li>
        <li class="ftl-width-1-6"><a href="#">Bootstrap</a></li>
        <li class="ftl-width-1-6"><a href="#">AngularJS</a></li>
	</ul>
</div>  
.template {
    width: 780px;
    margin: 50px auto 50px !important;
    position: relative;
}
html {
    font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background: #fff;
    color: #444
}
body {
    margin: 0
}
a {
    background: 0 0
}
a:active,
a:hover {
    outline: 0
}

.ftl-link,
a {
    color: #07D;
    text-decoration: none;
    cursor: pointer
}
.ftl-link:hover,
a:hover {
    color: #059;
    text-decoration: underline
}
abbr[title] {
    border-bottom: 1px dotted
}
b,strong {
    font-weight: 700
}
:not(pre)>code,
:not(pre)>kbd,
:not(pre)>samp {
    font-size: 12px;
    font-family: Consolas, monospace, serif;
    color: #D05;
    white-space: nowrap
}
em {
    color: #D05
}
ins {
    background: #ffa;
    color: #444;
    text-decoration: none
}
mark {
    background: #ffa;
    color: #444
}
q {
    font-style: italic
}
small {
    font-size: 80%
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}
sub {
    bottom: -.25em
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

audio,
canvas,
img,
svg,
video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box
}

.ftl-img-preserve,
.ftl-img-preserve audio,
.ftl-img-preserve canvas,
.ftl-img-preserve img,
.ftl-img-preserve svg,
.ftl-img-preserve video {
    max-width: none
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

blockquote,
figure {
    margin: 0
}

address,
blockquote,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
    margin: 0 0 15px 0
}

*+address,
*+blockquote,
*+dl,
*+fieldset,
*+figure,
*+ol,
*+p,
*+pre,
*+ul {
    margin-top: 15px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #444;
    text-transform: none
}

*+h1,
*+h2,
*+h3,
*+h4,
*+h5,
*+h6 {
    margin-top: 25px
}

.ftl-h1,
h1 {
    font-size: 36px;
    line-height: 42px
}

.ftl-h2,
h2 {
    font-size: 24px;
    line-height: 30px
}

.ftl-h3,
h3 {
    font-size: 18px;
    line-height: 24px
}

.ftl-h4,
h4 {
    font-size: 16px;
    line-height: 22px
}

.ftl-h5,
h5 {
    font-size: 14px;
    line-height: 20px
}

.ftl-h6,
h6 {
    font-size: 12px;
    line-height: 18px
}

ol,
ul {
    padding-left: 30px
}

ol>li>ol,
ol>li>ul,
ul>li>ol,
ul>li>ul {
    margin: 0
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

hr {
    box-sizing: content-box;
    height: 0;
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #ddd
}

address {
    font-style: normal
}

blockquote {
    padding-left: 15px;
    border-left: 5px solid #ddd;
    font-size: 16px;
    line-height: 22px;
    font-style: italic
}

pre {
    padding: 10px;
    background: #f5f5f5;
    font: 12px/18px Consolas, monospace, serif;
    color: #444;
    -moz-tab-size: 4;
    tab-size: 4;
    overflow: auto
}

::-moz-selection {
    background: #39f;
    color: #fff;
    text-shadow: none
}

::selection {
    background: #39f;
    color: #fff;
    text-shadow: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
    display: block
}

progress {
    vertical-align: baseline
}

audio:not([controls]) {
    display: none
}

[hidden],
template {
    display: none
}

iframe {
    border: 0
}

@media screen and (max-width:400px) {
    @-ms-viewport {
        width: device-width
    }
}

.ftl-grid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none
}

.ftl-grid:after,
.ftl-grid:before {
    content: "";
    display: block;
    overflow: hidden
}

.ftl-grid:after {
    clear: both
}

.ftl-grid>* {
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    margin: 0;
    float: left
}

.ftl-grid>*>:last-child {
    margin-bottom: 0
}

.ftl-grid {
    margin-left: -25px
}

.ftl-grid>* {
    padding-left: 25px
}

.ftl-grid+.ftl-grid,
.ftl-grid-margin,
.ftl-grid>*>.ftl-panel+.ftl-panel {
    margin-top: 25px
}

@media (min-width:1220px) {
    .ftl-grid {
        margin-left: -35px
    }
    .ftl-grid>* {
        padding-left: 35px
    }
    .ftl-grid+.ftl-grid,
    .ftl-grid-margin,
    .ftl-grid>*>.ftl-panel+.ftl-panel {
        margin-top: 35px
    }
}

.ftl-grid-collapse {
    margin-left: 0
}

.ftl-grid-collapse>* {
    padding-left: 0
}

.ftl-grid-collapse+.ftl-grid-collapse,
.ftl-grid-collapse>*>.ftl-panel+.ftl-panel,
.ftl-grid-collapse>.ftl-grid-margin {
    margin-top: 0
}

.ftl-grid-small {
    margin-left: -10px
}

.ftl-grid-small>* {
    padding-left: 10px
}

.ftl-grid-small+.ftl-grid-small,
.ftl-grid-small>*>.ftl-panel+.ftl-panel,
.ftl-grid-small>.ftl-grid-margin {
    margin-top: 10px
}

.ftl-grid-medium {
    margin-left: -25px
}

.ftl-grid-medium>* {
    padding-left: 25px
}

.ftl-grid-medium+.ftl-grid-medium,
.ftl-grid-medium>*>.ftl-panel+.ftl-panel,
.ftl-grid-medium>.ftl-grid-margin {
    margin-top: 25px
}

@media (min-width:960px) {
    .ftl-grid-large {
        margin-left: -35px
    }
    .ftl-grid-large>* {
        padding-left: 35px
    }
    .ftl-grid-large+.ftl-grid-large,
    .ftl-grid-large-margin,
    .ftl-grid-large>*>.ftl-panel+.ftl-panel {
        margin-top: 35px
    }
}

@media (min-width:1220px) {
    .ftl-grid-large {
        margin-left: -50px
    }
    .ftl-grid-large>* {
        padding-left: 50px
    }
    .ftl-grid-large+.ftl-grid-large,
    .ftl-grid-large-margin,
    .ftl-grid-large>*>.ftl-panel+.ftl-panel {
        margin-top: 50px
    }
}

.ftl-grid-divider:not(:empty) {
    margin-left: -25px;
    margin-right: -25px
}

.ftl-grid-divider>* {
    padding-left: 25px;
    padding-right: 25px
}

.ftl-grid-divider>[class*=ftl-width-9-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-1-]:not(.ftl-width-1-1):nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-2-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-3-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-4-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-5-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-6-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-7-]:nth-child(n+2),
.ftl-grid-divider>[class*=ftl-width-8-]:nth-child(n+2) {
    border-left: 1px solid #ddd
}

@media (min-width:768px) {
    .ftl-grid-divider>[class*=ftl-width-medium-]:not(.ftl-width-medium-1-1):nth-child(n+2) {
        border-left: 1px solid #ddd
    }
}

@media (min-width:960px) {
    .ftl-grid-divider>[class*=ftl-width-large-]:not(.ftl-width-large-1-1):nth-child(n+2) {
        border-left: 1px solid #ddd
    }
}

@media (min-width:1220px) {
    .ftl-grid-divider:not(: empty) {
        margin-left: -35px;
        margin-right: -35px
    }
    .ftl-grid-divider>* {
        padding-left: 35px;
        padding-right: 35px
    }
    .ftl-grid-divider:empty {
        margin-top: 35px;
        margin-bottom: 35px
    }
}

.ftl-grid-divider:empty {
    margin-top: 25px;
    margin-bottom: 25px;
    border-top: 1px solid #ddd
}

.ftl-grid-match>* {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.ftl-grid-match>*>* {
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 100%
}

[class*=ftl-grid-width]>* {
    box-sizing: border-box;
    width: 100%
}

.ftl-grid-width-1-2>* {
    width: 50%
}

.ftl-grid-width-1-3>* {
    width: 33.333%
}

.ftl-grid-width-1-4>* {
    width: 25%
}

.ftl-grid-width-1-5>* {
    width: 20%
}

.ftl-grid-width-1-6>* {
    width: 16.666%
}

.ftl-grid-width-1-10>* {
    width: 10%
}

.ftl-grid-width-auto>* {
    width: auto
}

@media (min-width:480px) {
    .ftl-grid-width-small-1-1>* {
        width: 100%
    }
    .ftl-grid-width-small-1-2>* {
        width: 50%
    }
    .ftl-grid-width-small-1-3>* {
        width: 33.333%
    }
    .ftl-grid-width-small-1-4>* {
        width: 25%
    }
    .ftl-grid-width-small-1-5>* {
        width: 20%
    }
    .ftl-grid-width-small-1-6>* {
        width: 16.666%
    }
    .ftl-grid-width-small-1-10>* {
        width: 10%
    }
}

@media (min-width:768px) {
    .ftl-grid-width-medium-1-1>* {
        width: 100%
    }
    .ftl-grid-width-medium-1-2>* {
        width: 50%
    }
    .ftl-grid-width-medium-1-3>* {
        width: 33.333%
    }
    .ftl-grid-width-medium-1-4>* {
        width: 25%
    }
    .ftl-grid-width-medium-1-5>* {
        width: 20%
    }
    .ftl-grid-width-medium-1-6>* {
        width: 16.666%
    }
    .ftl-grid-width-medium-1-10>* {
        width: 10%
    }
}

@media (min-width:960px) {
    .ftl-grid-width-large-1-1>* {
        width: 100%
    }
    .ftl-grid-width-large-1-2>* {
        width: 50%
    }
    .ftl-grid-width-large-1-3>* {
        width: 33.333%
    }
    .ftl-grid-width-large-1-4>* {
        width: 25%
    }
    .ftl-grid-width-large-1-5>* {
        width: 20%
    }
    .ftl-grid-width-large-1-6>* {
        width: 16.666%
    }
    .ftl-grid-width-large-1-10>* {
        width: 10%
    }
}

@media (min-width:1220px) {
    .ftl-grid-width-xlarge-1-1>* {
        width: 100%
    }
    .ftl-grid-width-xlarge-1-2>* {
        width: 50%
    }
    .ftl-grid-width-xlarge-1-3>* {
        width: 33.333%
    }
    .ftl-grid-width-xlarge-1-4>* {
        width: 25%
    }
    .ftl-grid-width-xlarge-1-5>* {
        width: 20%
    }
    .ftl-grid-width-xlarge-1-6>* {
        width: 16.666%
    }
    .ftl-grid-width-xlarge-1-10>* {
        width: 10%
    }
}

[class*=ftl-width] {
    box-sizing: border-box;
    width: 100%
}

.ftl-width-1-1 {
    width: 100%
}

.ftl-width-1-2,
.ftl-width-2-4,
.ftl-width-3-6,
.ftl-width-5-10 {
    width: 50%
}

.ftl-width-1-3,
.ftl-width-2-6 {
    width: 33.333%
}

.ftl-width-2-3,
.ftl-width-4-6 {
    width: 66.666%
}

.ftl-width-1-4 {
    width: 25%
}

.ftl-width-3-4 {
    width: 75%
}

.ftl-width-1-5,
.ftl-width-2-10 {
    width: 20%
}

.ftl-width-2-5,
.ftl-width-4-10 {
    width: 40%
}

.ftl-width-3-5,
.ftl-width-6-10 {
    width: 60%
}

.ftl-width-4-5,
.ftl-width-8-10 {
    width: 80%
}

.ftl-width-1-6 {
    width: 16.666%
}

.ftl-width-5-6 {
    width: 83.333%
}

.ftl-width-1-10 {
    width: 10%
}

.ftl-width-3-10 {
    width: 30%
}

.ftl-width-7-10 {
    width: 70%
}

.ftl-width-9-10 {
    width: 90%
}

@media (min-width:480px) {
    .ftl-width-small-1-1 {
        width: 100%
    }
    .ftl-width-small-1-2,
    .ftl-width-small-2-4,
    .ftl-width-small-3-6,
    .ftl-width-small-5-10 {
        width: 50%
    }
    .ftl-width-small-1-3,
    .ftl-width-small-2-6 {
        width: 33.333%
    }
    .ftl-width-small-2-3,
    .ftl-width-small-4-6 {
        width: 66.666%
    }
    .ftl-width-small-1-4 {
        width: 25%
    }
    .ftl-width-small-3-4 {
        width: 75%
    }
    .ftl-width-small-1-5,
    .ftl-width-small-2-10 {
        width: 20%
    }
    .ftl-width-small-2-5,
    .ftl-width-small-4-10 {
        width: 40%
    }
    .ftl-width-small-3-5,
    .ftl-width-small-6-10 {
        width: 60%
    }
    .ftl-width-small-4-5,
    .ftl-width-small-8-10 {
        width: 80%
    }
    .ftl-width-small-1-6 {
        width: 16.666%
    }
    .ftl-width-small-5-6 {
        width: 83.333%
    }
    .ftl-width-small-1-10 {
        width: 10%
    }
    .ftl-width-small-3-10 {
        width: 30%
    }
    .ftl-width-small-7-10 {
        width: 70%
    }
    .ftl-width-small-9-10 {
        width: 90%
    }
}

@media (min-width:768px) {
    .ftl-width-medium-1-1 {
        width: 100%
    }
    .ftl-width-medium-1-2,
    .ftl-width-medium-2-4,
    .ftl-width-medium-3-6,
    .ftl-width-medium-5-10 {
        width: 50%
    }
    .ftl-width-medium-1-3,
    .ftl-width-medium-2-6 {
        width: 33.333%
    }
    .ftl-width-medium-2-3,
    .ftl-width-medium-4-6 {
        width: 66.666%
    }
    .ftl-width-medium-1-4 {
        width: 25%
    }
    .ftl-width-medium-3-4 {
        width: 75%
    }
    .ftl-width-medium-1-5,
    .ftl-width-medium-2-10 {
        width: 20%
    }
    .ftl-width-medium-2-5,
    .ftl-width-medium-4-10 {
        width: 40%
    }
    .ftl-width-medium-3-5,
    .ftl-width-medium-6-10 {
        width: 60%
    }
    .ftl-width-medium-4-5,
    .ftl-width-medium-8-10 {
        width: 80%
    }
    .ftl-width-medium-1-6 {
        width: 16.666%
    }
    .ftl-width-medium-5-6 {
        width: 83.333%
    }
    .ftl-width-medium-1-10 {
        width: 10%
    }
    .ftl-width-medium-3-10 {
        width: 30%
    }
    .ftl-width-medium-7-10 {
        width: 70%
    }
    .ftl-width-medium-9-10 {
        width: 90%
    }
}

@media (min-width:960px) {
    .ftl-width-large-1-1 {
        width: 100%
    }
    .ftl-width-large-1-2,
    .ftl-width-large-2-4,
    .ftl-width-large-3-6,
    .ftl-width-large-5-10 {
        width: 50%
    }
    .ftl-width-large-1-3,
    .ftl-width-large-2-6 {
        width: 33.333%
    }
    .ftl-width-large-2-3,
    .ftl-width-large-4-6 {
        width: 66.666%
    }
    .ftl-width-large-1-4 {
        width: 25%
    }
    .ftl-width-large-3-4 {
        width: 75%
    }
    .ftl-width-large-1-5,
    .ftl-width-large-2-10 {
        width: 20%
    }
    .ftl-width-large-2-5,
    .ftl-width-large-4-10 {
        width: 40%
    }
    .ftl-width-large-3-5,
    .ftl-width-large-6-10 {
        width: 60%
    }
    .ftl-width-large-4-5,
    .ftl-width-large-8-10 {
        width: 80%
    }
    .ftl-width-large-1-6 {
        width: 16.666%
    }
    .ftl-width-large-5-6 {
        width: 83.333%
    }
    .ftl-width-large-1-10 {
        width: 10%
    }
    .ftl-width-large-3-10 {
        width: 30%
    }
    .ftl-width-large-7-10 {
        width: 70%
    }
    .ftl-width-large-9-10 {
        width: 90%
    }
}

@media (min-width:1220px) {
    .ftl-width-xlarge-1-1 {
        width: 100%
    }
    .ftl-width-xlarge-1-2,
    .ftl-width-xlarge-2-4,
    .ftl-width-xlarge-3-6,
    .ftl-width-xlarge-5-10 {
        width: 50%
    }
    .ftl-width-xlarge-1-3,
    .ftl-width-xlarge-2-6 {
        width: 33.333%
    }
    .ftl-width-xlarge-2-3,
    .ftl-width-xlarge-4-6 {
        width: 66.666%
    }
    .ftl-width-xlarge-1-4 {
        width: 25%
    }
    .ftl-width-xlarge-3-4 {
        width: 75%
    }
    .ftl-width-xlarge-1-5,
    .ftl-width-xlarge-2-10 {
        width: 20%
    }
    .ftl-width-xlarge-2-5,
    .ftl-width-xlarge-4-10 {
        width: 40%
    }
    .ftl-width-xlarge-3-5,
    .ftl-width-xlarge-6-10 {
        width: 60%
    }
    .ftl-width-xlarge-4-5,
    .ftl-width-xlarge-8-10 {
        width: 80%
    }
    .ftl-width-xlarge-1-6 {
        width: 16.666%
    }
    .ftl-width-xlarge-5-6 {
        width: 83.333%
    }
    .ftl-width-xlarge-1-10 {
        width: 10%
    }
    .ftl-width-xlarge-3-10 {
        width: 30%
    }
    .ftl-width-xlarge-7-10 {
        width: 70%
    }
    .ftl-width-xlarge-9-10 {
        width: 90%
    }
}

@media (min-width:768px) {
    [class*=ftl-push-],
    [class*=ftl-pull-] {
        position: relative
    }
    .ftl-push-1-2,
    .ftl-push-2-4,
    .ftl-push-3-6,
    .ftl-push-5-10 {
        left: 50%
    }
    .ftl-push-1-3,
    .ftl-push-2-6 {
        left: 33.333%
    }
    .ftl-push-2-3,
    .ftl-push-4-6 {
        left: 66.666%
    }
    .ftl-push-1-4 {
        left: 25%
    }
    .ftl-push-3-4 {
        left: 75%
    }
    .ftl-push-1-5,
    .ftl-push-2-10 {
        left: 20%
    }
    .ftl-push-2-5,
    .ftl-push-4-10 {
        left: 40%
    }
    .ftl-push-3-5,
    .ftl-push-6-10 {
        left: 60%
    }
    .ftl-push-4-5,
    .ftl-push-8-10 {
        left: 80%
    }
    .ftl-push-1-6 {
        left: 16.666%
    }
    .ftl-push-5-6 {
        left: 83.333%
    }
    .ftl-push-1-10 {
        left: 10%
    }
    .ftl-push-3-10 {
        left: 30%
    }
    .ftl-push-7-10 {
        left: 70%
    }
    .ftl-push-9-10 {
        left: 90%
    }
    .ftl-pull-1-2,
    .ftl-pull-2-4,
    .ftl-pull-3-6,
    .ftl-pull-5-10 {
        left: -50%
    }
    .ftl-pull-1-3,
    .ftl-pull-2-6 {
        left: -33.333%
    }
    .ftl-pull-2-3,
    .ftl-pull-4-6 {
        left: -66.666%
    }
    .ftl-pull-1-4 {
        left: -25%
    }
    .ftl-pull-3-4 {
        left: -75%
    }
    .ftl-pull-1-5,
    .ftl-pull-2-10 {
        left: -20%
    }
    .ftl-pull-2-5,
    .ftl-pull-4-10 {
        left: -40%
    }
    .ftl-pull-3-5,
    .ftl-pull-6-10 {
        left: -60%
    }
    .ftl-pull-4-5,
    .ftl-pull-8-10 {
        left: -80%
    }
    .ftl-pull-1-6 {
        left: -16.666%
    }
    .ftl-pull-5-6 {
        left: -83.333%
    }
    .ftl-pull-1-10 {
        left: -10%
    }
    .ftl-pull-3-10 {
        left: -30%
    }
    .ftl-pull-7-10 {
        left: -70%
    }
    .ftl-pull-9-10 {
        left: -90%
    }
}

.ftl-panel {
    display: block;
    position: relative
}

.ftl-panel,
.ftl-panel:hover {
    text-decoration: none
}

.ftl-panel:after,
.ftl-panel:before {
    content: "";
    display: table
}

.ftl-panel:after {
    clear: both
}

.ftl-panel>:not(.ftl-panel-title):last-child {
    margin-bottom: 0
}

.ftl-panel-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-transform: none;
    color: #444
}

.ftl-panel-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.ftl-panel-teaser {
    margin-bottom: 15px
}

.ftl-panel-body {
    padding: 15px
}

.ftl-panel-box {
    padding: 15px;
    background: #f5f5f5;
    color: #444
}

.ftl-panel-box-hover:hover {
    color: #444
}

.ftl-panel-box .ftl-panel-title {
    color: #444
}

.ftl-panel-box .ftl-panel-badge {
    top: 10px;
    right: 10px
}

.ftl-panel-box>.ftl-panel-teaser {
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px
}

.ftl-panel-box>.ftl-nav-side {
    margin: 0 -15px
}

.ftl-panel-box-primary {
    background-color: #ebf7fd;
    color: #2d7091
}

.ftl-panel-box-primary-hover:hover {
    color: #2d7091
}

.ftl-panel-box-primary .ftl-panel-title {
    color: #2d7091
}

.ftl-panel-box-secondary {
    background-color: #eee;
    color: #444
}

.ftl-panel-box-secondary-hover:hover {
    color: #444
}

.ftl-panel-box-secondary .ftl-panel-title {
    color: #444
}

.ftl-panel-hover {
    padding: 15px;
    color: #444
}

.ftl-panel-hover:hover {
    background: #f5f5f5;
    color: #444
}

.ftl-panel-hover .ftl-panel-badge {
    top: 10px;
    right: 10px
}

.ftl-panel-hover>.ftl-panel-teaser {
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px
}

.ftl-panel-header .ftl-panel-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    color: #444
}

.ftl-panel-space {
    padding: 30px
}

.ftl-panel-space .ftl-panel-badge {
    top: 30px;
    right: 30px
}

.ftl-panel+.ftl-panel-divider {
    margin-top: 50px!important
}

.ftl-panel+.ftl-panel-divider:before {
    content: "";
    display: block;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    border-top: 1px solid #ddd
}

@media (min-width:1220px) {
    .ftl-panel+.ftl-panel-divider {
        margin-top: 70px!important
    }
    .ftl-panel+.ftl-panel-divider:before {
        top: -35px
    }
}

.ftl-block {
    position: relative;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px
}

@media (min-width:768px) {
    .ftl-block {
        padding-top: 50px;
        padding-bottom: 50px
    }
}

.ftl-block:after,
.ftl-block:before {
    content: "";
    display: table
}

.ftl-block:after {
    clear: both
}

.ftl-block>:last-child {
    margin-bottom: 0
}

.ftl-block-large {
    padding-top: 20px;
    padding-bottom: 20px
}

@media (min-width:768px) {
    .ftl-block-large {
        padding-top: 50px;
        padding-bottom: 50px
    }
}

@media (min-width:960px) {
    .ftl-block-large {
        padding-top: 100px;
        padding-bottom: 100px
    }
}

.ftl-block-default {
    background: #fff
}

.ftl-block-muted {
    background: #f9f9f9
}

.ftl-block-primary {
    background: #00a8e6
}

.ftl-block-secondary {
    background: #222
}

.ftl-block-default+.ftl-block-default,
.ftl-block-muted+.ftl-block-muted,
.ftl-block-primary+.ftl-block-primary,
.ftl-block-secondary+.ftl-block-secondary {
    padding-top: 0
}

.ftl-article:after,
.ftl-article:before {
    content: "";
    display: table
}

.ftl-article:after {
    clear: both
}

.ftl-article>:last-child {
    margin-bottom: 0
}

.ftl-article+.ftl-article {
    margin-top: 25px
}

.ftl-article-title {
    font-size: 36px;
    line-height: 42px;
    font-weight: 400;
    text-transform: none
}

.ftl-article-title a {
    color: inherit;
    text-decoration: none
}

.ftl-article-meta {
    font-size: 12px;
    line-height: 18px;
    color: #999
}

.ftl-article-lead {
    color: #444;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400
}

.ftl-article-divider {
    margin-bottom: 25px;
    border-color: #ddd
}

*+.ftl-article-divider {
    margin-top: 25px
}

.ftl-comment-header {
    margin-bottom: 15px
}

.ftl-comment-header:after,
.ftl-comment-header:before {
    content: "";
    display: table
}

.ftl-comment-header:after {
    clear: both
}

.ftl-comment-avatar {
    margin-right: 15px;
    float: left
}

.ftl-comment-title {
    margin: 5px 0 0 0;
    font-size: 16px;
    line-height: 22px
}

.ftl-comment-meta {
    margin: 2px 0 0 0;
    font-size: 11px;
    line-height: 16px;
    color: #999
}

.ftl-comment-body>:last-child {
    margin-bottom: 0
}

.ftl-comment-list {
    padding: 0;
    list-style: none
}

.ftl-comment-list .ftl-comment+ul {
    margin: 15px 0 0 0;
    list-style: none
}

.ftl-comment-list .ftl-comment+ul>li:nth-child(n+2),
.ftl-comment-list>li:nth-child(n+2) {
    margin-top: 15px
}

@media (min-width:768px) {
    .ftl-comment-list .ftl-comment+ul {
        padding-left: 100px
    }
}

.ftl-cover-background {
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat
}

.ftl-cover {
    overflow: hidden
}

.ftl-cover-object {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: trans						   
! function(t) {
    var i;
    if (!window.jQuery) throw new Error("UIkit 2.x requires jQuery");
    i = t(window.jQuery), "function" == typeof define && define.amd && define("uikit", function() {
        return i.load = function(t, e, n, o) {
            var s, a = t.split(","),
                r = [],
                l = (o.config && o.config.uikit && o.config.uikit.base ? o.config.uikit.base : "").replace(/\/+$/g, "");
            if (!l) throw new Error("Please define base path to UIkit in the requirejs config.");
            for (s = 0; s < a.length; s += 1) {
                var c = a[s].replace(/\./g, "/");
                r.push(l + "/components/" + c)
            }
            e(r, function() {
                n(i)
            })
        }, i
    })
}(function(t) {
    "use strict";
    if (window.UIkit2) return window.UIkit2;
    var i = {},
        e = window.UIkit || void 0;
    if (i.version = "2.27.4", i.noConflict = function() {
            return e && (window.UIkit = e, t.UIkit = e, t.fn.ftl = e.fn), i
        }, window.UIkit2 = i, e || (window.UIkit = i), i.$ = t, i.$doc = i.$(document), i.$win = i.$(window), i.$html = i.$("html"), i.support = {}, i.support.transition = function() {
            var t = function() {
                var t, i = document.body || document.documentElement,
                    e = {
                        WebkitTransition: "webkitTransitionEnd",
                        MozTransition: "transitionend",
                        OTransition: "oTransitionEnd otransitionend",
                        transition: "transitionend"
                    };
                for (t in e)
                    if (void 0 !== i.style[t]) return e[t]
            }();
            return t && {
                end: t
            }
        }(), i.support.animation = function() {
            var t = function() {
                var t, i = document.body || document.documentElement,
                    e = {
                        WebkitAnimation: "webkitAnimationEnd",
                        MozAnimation: "animationend",
                        OAnimation: "oAnimationEnd oanimationend",
                        animation: "animationend"
                    };
                for (t in e)
                    if (void 0 !== i.style[t]) return e[t]
            }();
            return t && {
                end: t
            }
        }(), function() {
            Date.now = Date.now || function() {
                return (new Date).getTime()
            };
            for (var t = ["webkit", "moz"], i = 0; i < t.length && !window.requestAnimationFrame; ++i) {
                var e = t[i];
                window.requestAnimationFrame = window[e + "RequestAnimationFrame"], window.cancelAnimationFrame = window[e + "CancelAnimationFrame"] || window[e + "CancelRequestAnimationFrame"]
            }
            if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
                var n = 0;
                window.requestAnimationFrame = function(t) {
                    var i = Date.now(),
                        e = Math.max(n + 16, i);
                    return setTimeout(function() {
                        t(n = e)
                    }, e - i)
                }, window.cancelAnimationFrame = clearTimeout
            }
        }(), i.support.touch = "ontouchstart" in document || window.DocumentTouch && document instanceof window.DocumentTouch || window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 0 || window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 0 || !1, i.support.mutationobserver = window.MutationObserver || window.WebKitMutationObserver || null, i.Utils = {}, i.Utils.isFullscreen = function() {
            return document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.fullscreenElement || !1
        }, i.Utils.str2json = function(t, i) {
            try {
                return i ? JSON.parse(t.replace(/([\$\w]+)\s*:/g, function(t, i) {
                    return '"' + i + '":'
                }).replace(/'([^']+)'/g, function(t, i) {
                    return '"' + i + '"'
                })) : new Function("", "var json = " + t + "; return JSON.parse(JSON.stringify(json));")()
            } catch (e) {
                return !1
            }
        }, i.Utils.debounce = function(t, i, e) {
            var n;
            return function() {
                var o = this,
                    s = arguments,
                    a = function() {
                        n = null, e || t.apply(o, s)
                    },
                    r = e && !n;
                clearTimeout(n), n = setTimeout(a, i), r && t.apply(o, s)
            }
        }, i.Utils.throttle = function(t, i) {
            var e = !1;
            return function() {
                e || (t.call(), e = !0, setTimeout(function() {
                    e = !1
                }, i))
            }
        }, i.Utils.removeCssRules = function(t) {
            var i, e, n, o, s, a, r, l, c, u;
            t && setTimeout(function() {
                try {
                    for (u = document.styleSheets, o = 0, r = u.length; r > o; o++) {
                        for (n = u[o], e = [], n.cssRules = n.cssRules, i = s = 0, l = n.cssRules.length; l > s; i = ++s) n.cssRules[i].type === CSSRule.STYLE_RULE && t.test(n.cssRules[i].selectorText) && e.unshift(i);
                        for (a = 0, c = e.length; c > a; a++) n.deleteRule(e[a])
                    }
                } catch (d) {}
            }, 0)
        }, i.Utils.isInView = function(e, n) {
            var o = t(e);
            if (!o.is(":visible")) return !1;
            var s = i.$win.scrollLeft(),
                a = i.$win.scrollTop(),
                r = o.offset(),
                l = r.left,
                c = r.top;
            return n = t.extend({
                topoffset: 0,
                leftoffset: 0
            }, n), c + o.height() >= a && c - n.topoffset <= a + i.$win.height() && l + o.width() >= s && l - n.leftoffset <= s + i.$win.width() ? !0 : !1
        }, i.Utils.checkDisplay = function(e, n) {
            var o = i.$("[data-ftl-margin], [data-ftl-grid-match], [data-ftl-grid-margin], [data-ftl-check-display]", e || document);
            return e && !o.length && (o = t(e)), o.trigger("display.ftl.check"), n && ("string" != typeof n && (n = '[class*="ftl-animation-"]'), o.find(n).each(function() {
                var t = i.$(this),
                    e = t.attr("class"),
                    n = e.match(/ftl-animation-(.+)/);
                t.removeClass(n[0]).width(), t.addClass(n[0])
            })), o
        }, i.Utils.options = function(e) {
            if ("string" != t.type(e)) return e; - 1 != e.indexOf(":") && "}" != e.trim().substr(-1) && (e = "{" + e + "}");
            var n = e ? e.indexOf("{") : -1,
                o = {};
            if (-1 != n) try {
                o = i.Utils.str2json(e.substr(n))
            } catch (s) {}
            return o
        }, i.Utils.animate = function(e, n) {
            var o = t.Deferred();
            return e = i.$(e), e.css("display", "none").addClass(n).one(i.support.animation.end, function() {
                e.removeClass(n), o.resolve()
            }), e.css("display", ""), o.promise()
        }, i.Utils.uid = function(t) {
            return (t || "id") + (new Date).getTime() + "RAND" + Math.ceil(1e5 * Math.random())
        }, i.Utils.template = function(t, i) {
            for (var e, n, o, s, a = t.replace(/\n/g, "\\n").replace(/\{\{\{\s*(.+?)\s*\}\}\}/g, "{{!$1}}").split(/(\{\{\s*(.+?)\s*\}\})/g), r = 0, l = [], c = 0; r < a.length;) {
                if (e = a[r], e.match(/\{\{\s*(.+?)\s*\}\}/)) switch (r += 1, e = a[r], n = e[0], o = e.substring(e.match(/^(\^|\#|\!|\~|\:)/) ? 1 : 0), n) {
                    case "~":
                        l.push("for(var $i=0;$i<" + o + ".length;$i++) { var $item = " + o + "[$i];"), c++;
                        break;
                    case ":":
                        l.push("for(var $key in " + o + ") { var $val = " + o + "[$key];"), c++;
                        break;
                    case "#":
                        l.push("if(" + o + ") {"), c++;
                        break;
                    case "^":
                        l.push("if(!" + o + ") {"), c++;
                        break;
                    case "/":
                        l.push("}"), c--;
                        break;
                    case "!":
                        l.push("__ret.push(" + o + ");");
                        break;
                    default:
                        l.push("__ret.push(escape(" + o + "));")
                } else l.push("__ret.push('" + e.replace(/\'/g, "\\'") + "');");
                r += 1
            }
            return s = new Function("$data", ["var __ret = [];", "try {", "with($data){", c ? '__ret = ["Not all blocks are closed correctly."]' : l.join(""), "};", "}catch(e){__ret = [e.message];}", 'return __ret.join("").replace(/\\n\\n/g, "\\n");', "function escape(html) { return String(html).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');}"].join("\n")), i ? s(i) : s
        }, i.Utils.focus = function(i, e) {
            if (i = t(i), !i.length) return i;
            var n, o = i.find("[autofocus]:first");
            return o.length ? o.focus() : (o = i.find(":input" + (e && "," + e || "")).first(), o.length ? o.focus() : (i.attr("tabindex") || (n = 1e3, i.attr("tabindex", n)), i[0].focus(), n && i.attr("tabindex", ""), i))
        }, i.Utils.events = {}, i.Utils.events.click = i.support.touch ? "tap" : "click", i.fn = function(e, n) {
            var o = arguments,
                s = e.match(/^([a-z\-]+)(?:\.([a-z]+))?/i),
                a = s[1],
                r = s[2];
            return i[a] ? this.each(function() {
                var e = t(this),
                    s = e.data(a);
                s || e.data(a, s = i[a](this, r ? void 0 : n)), r && s[r].apply(s, Array.prototype.slice.call(o, 1))
            }) : (t.error("UIkit component [" + a + "] does not exist."), this)
        }, t.UIkit = i, t.fn.ftl = i.fn, i.langdirection = "rtl" == i.$html.attr("dir") ? "right" : "left", i.components = {}, i.component = function(e, n, o) {
            if (i.components[e] && !o) return i.components[e];
            var s = function(n, o) {
                var a = this;
                return this.UIkit = i, this.element = n ? i.$(n) : null, this.options = t.extend(!0, {}, this.defaults, o), this.plugins = {}, this.element && this.element.data(e, this), this.init(), (this.options.plugins.length ? this.options.plugins : Object.keys(s.plugins)).forEach(function(t) {
                    s.plugins[t].init && (s.plugins[t].init(a), a.plugins[t] = !0)
                }), this.trigger("init.ftl.component", [e, this]), this
            };
            return s.plugins = {}, t.extend(!0, s.prototype, {
                defaults: {
                    plugins: []
                },
                boot: function() {},
                init: function() {},
                on: function(t, e, n) {
                    return i.$(this.element || this).on(t, e, n)
                },
                one: function(t, e, n) {
                    return i.$(this.element || this).one(t, e, n)
                },
                off: function(t) {
                    return i.$(this.element || this).off(t)
                },
                trigger: function(t, e) {
                    return i.$(this.element || this).trigger(t, e)
                },
                find: function(t) {
                    return i.$(this.element ? this.element : []).find(t)
                },
                proxy: function(t, i) {
                    var e = this;
                    i.split(" ").forEach(function(i) {
                        e[i] || (e[i] = function() {
                            return t[i].apply(t, arguments)
                        })
                    })
                },
                mixin: function(t, i) {
                    var e = this;
                    i.split(" ").forEach(function(i) {
                        e[i] || (e[i] = t[i].bind(e))
                    })
                },
                option: function() {
                    return 1 == arguments.length ? this.options[arguments[0]] || void 0 : (2 == arguments.length && (this.options[arguments[0]] = arguments[1]), void 0)
                }
            }, n), this.components[e] = s, this[e] = function() {
                var n, o;
                if (arguments.length) switch (arguments.length) {
                    case 1:
                        "string" == typeof arguments[0] || arguments[0].nodeType || arguments[0] instanceof jQuery ? n = t(arguments[0]) : o = arguments[0];
                        break;
                    case 2:
                        n = t(arguments[0]), o = arguments[1]
                }
                return n && n.data(e) ? n.data(e) : new i.components[e](n, o)
            }, i.domready && i.component.boot(e), s
        }, i.plugin = function(t, i, e) {
            this.components[t].plugins[i] = e
        }, i.component.boot = function(t) {
            i.components[t].prototype && i.components[t].prototype.boot && !i.components[t].booted && (i.components[t].prototype.boot.apply(i, []), i.components[t].booted = !0)
        }, i.component.bootComponents = function() {
            for (var t in i.components) i.component.boot(t)
        }, i.domObservers = [], i.domready = !1, i.ready = function(t) {
            i.domObservers.push(t), i.domready && t(document)
        }, i.on = function(t, e, n) {
            return t && t.indexOf("ready.ftl.dom") > -1 && i.domready && e.apply(i.$doc), i.$doc.on(t, e, n)
        }, i.one = function(t, e, n) {
            return t && t.indexOf("ready.ftl.dom") > -1 && i.domready ? (e.apply(i.$doc), i.$doc) : i.$doc.one(t, e, n)
        }, i.trigger = function(t, e) {
            return i.$doc.trigger(t, e)
        }, i.domObserve = function(t, e) {
            i.support.mutationobserver && (e = e || function() {}, i.$(t).each(function() {
                var t = this,
                    n = i.$(t);
                if (!n.data("observer")) try {
                    var o = new i.support.mutationobserver(i.Utils.debounce(function() {
                        e.apply(t, [n]), n.trigger("changed.ftl.dom")
                    }, 50), {
                        childList: !0,
                        subtree: !0
                    });
                    o.observe(t, {
                        childList: !0,
                        subtree: !0
                    }), n.data("observer", o)
                } catch (s) {}
            }))
        }, i.init = function(t) {
            t = t || document, i.domObservers.forEach(function(i) {
                i(t)
            })
        }, i.on("domready.ftl.dom", function() {
            i.init(), i.domready && i.Utils.checkDisplay()
        }), document.addEventListener("DOMContentLoaded", function() {
            var e = function() {
                i.$body = i.$("body"), i.trigger("beforeready.ftl.dom"), i.component.bootComponents();
                var e = requestAnimationFrame(function() {
                    var t = {
                            dir: {
                                x: 0,
                                y: 0
                            },
                            x: window.pageXOffset,
                            y: window.pageYOffset
                        },
                        n = function() {
                            var o = window.pageXOffset,
                                s = window.pageYOffset;
                            (t.x != o || t.y != s) && (t.dir.x = o != t.x ? o > t.x ? 1 : -1 : 0, t.dir.y = s != t.y ? s > t.y ? 1 : -1 : 0, t.x = o, t.y = s, i.$doc.trigger("scrolling.ftl.document", [{
                                dir: {
                                    x: t.dir.x,
                                    y: t.dir.y
                                },
                                x: o,
                                y: s
                            }])), cancelAnimationFrame(e), e = requestAnimationFrame(n)
                        };
                    return i.support.touch && i.$html.on("touchmove touchend MSPointerMove MSPointerUp pointermove pointerup", n), (t.x || t.y) && n(), n
                }());
                if (i.trigger("domready.ftl.dom"), i.support.touch && navigator.userAgent.match(/(iPad|iPhone|iPod)/g) && i.$win.on("load orientationchange resize", i.Utils.debounce(function() {
                        var i = function() {
                            return t(".ftl-height-viewport").css("height", window.innerHeight), i
                        };
                        return i()
                    }(), 100)), i.trigger("afterready.ftl.dom"), i.domready = !0, i.support.mutationobserver) {
                    var n = i.Utils.debounce(function() {
                        requestAnimationFrame(function() {
                            i.init(document.body)
                        })
                    }, 10);
                    new i.support.mutationobserver(function(t) {
                        var i = !1;
                        t.every(function(t) {
                            if ("childList" != t.type) return !0;
                            for (var e, n = 0; n < t.addedNodes.length; ++n)
                                if (e = t.addedNodes[n], e.outerHTML && -1 !== e.outerHTML.indexOf("data-ftl-")) return (i = !0) && !1;
                            return !0
                        }), i && n()
                    }).observe(document.body, {
                        childList: !0,
                        subtree: !0
                    })
                }
            };
            return ("complete" == document.readyState || "interactive" == document.readyState) && setTimeout(e), e
        }()), i.$html.addClass(i.support.touch ? "ftl-touch" : "ftl-notouch"), i.support.touch) {
        var n, o = !1,
            s = "ftl-hover",
            a = ".ftl-overlay, .ftl-overlay-hover, .ftl-overlay-toggle, .ftl-animation-hover, .ftl-has-hover";
        i.$html.on("mouseenter touchstart MSPointerDown pointerdown", a, function() {
            o && t("." + s).removeClass(s), o = t(this).addClass(s)
        }).on("mouseleave touchend MSPointerUp pointerup", function(i) {
            n = t(i.target).parents(a), o && o.not(n).removeClass(s)
        })
    }
    return i
}),
function(t) {
    function i(t, i, e, n) {
        return Math.abs(t - i) >= Math.abs(e - n) ? t - i > 0 ? "Left" : "Right" : e - n > 0 ? "Up" : "Down"
    }

    function e() {
        c = null, d.last && (void 0 !== d.el && d.el.trigger("longTap"), d = {})
    }

    function n() {
About F T L
Contact
Visitors & Security
  © 2017 - 2021. All Rights Reserved by Free Time Learning .
    Designed by F T L