@CHARSET "ISO-8859-1";
@import "https://fonts.googleapis.com/css?family=Lato:300";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {padding: 0;margin: 0;}

@-webkit-keyframes autofill {
    to {
        color: #fff;
        background: transparent
    }
}

table {
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
strong {font-weight: bold;}

ol,ul {list-style: none;margin: 0;padding: 0;}

caption,
th {
    text-align: left;
}

h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin: 0;padding: 0;color: #444;font-family: Oswald, sans-serif;}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}


/* Custom CSS
 * --------------------------------------- */

body {
    font-family: arial, helvetica;
    color: #333;
    color: rgba(0, 0, 0, 0.5);
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgba(0,0,0,.075)!important;
    background-image: none;
    color: rgb(0, 0, 0);
}
.wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    position: relative;
}
.onlymobile1 {
        display: none;
    }
.intro p {
    width: 50%;
    margin: 0 auto;
    font-size: 1.5em;
}

.section {
    text-align: center;
}

#menu li {
    display: inline-block;
    margin: 7px;
    color: #000;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 10px;
    border-radius: 4px;
}

#menu li.active {
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

#menu li a {
    text-decoration: none;
    color: #000;
}

#menu li.active a:hover {
    color: #000;
}

#menu li:hover {
    background: rgba(255, 255, 255, 0.8);
}

#menu li a,
#menu li.active a {
    padding:0px 2px;
    display: block;
}

#menu li.active a {
    color: #fff;
}

#menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
}

.twitter-share-button {
    position: fixed;
    z-index: 99;
    right: 149px;
    top: 9px;
}
#infoMenu {
    height: 20px;
    color: #f2f2f2;
    position: fixed;
    z-index: 70;
    bottom: 0;
    width: 100%;
    text-align: right;
    font-size: 0.9em;
    padding: 8px 0 8px 0;
}

#infoMenu ul {
    padding: 0 40px;
}

#infoMenu li a {
    display: block;
    margin: 0 22px 0 0;
    color: #333;
}

#infoMenu li a:hover {
    text-decoration: underline;
}

#infoMenu li {
    display: inline-block;
    position: relative;
}

#examplesList {
    display: none;
    background: #282828;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 20px;
    float: left;
    position: absolute;
    bottom: 29px;
    right: 0;
    width: 638px;
    text-align: left;
}

#examplesList ul {
    padding: 0;
}

#examplesList ul li {
    display: block;
    margin: 5px 0;
}

#examplesList ul li a {
    color: #BDBDBD;
    margin: 0;
}

#examplesList ul li a:hover {
    color: #f2f2f2;
}

#examplesList .column {
    float: left;
    margin: 0 20px 0 0;
}

#examplesList h3 {
    color: #f2f2f2;
    font-size: 1.2em;
    margin: 0 0 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 0 0 5px 0;
}

h1 {
    font-size: 5em;
    font-family: arial, helvetica;
    color: #fff;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 2.6em;
    font-family: arial, helvetica;
    color: #fff;
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 2em;
    font-family: arial, helvetica;
    color: #fff;
    margin: 0;
    padding: 0;
}
.fadein212{animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}



.rumah {color: white;padding: 2px 6px;font-size: 21px!important;border-radius: 7px;width: 33px;height: 33px;box-shadow: 0 2px 2px 0 rgba(179, 174, 174, 0.24), 0 1px 5px 0 rgba(206, 201, 201, 0.15), 0 3px 1px -2px rgba(171, 165, 165, 0.17);}
.ungu {background:#b147b3!important;}
.ungu1 {background:#a444ec!important;}
.ungu2{background:#da5fb4!important;}
.hijau {background:#18ff5f!important;}
.orens {background:#fbc968!important;}
.kuning{background:#ffcd5b!important;}
.biru{background:#00bfff!important;}
.biru1{background:#8080ff!important;}
.biru2{background:#00ccff!important;}
.merah{background:#e04e88!important;}
.merah1{background:#f75595!important;}
.merah2{background:#fb78ae!important;}
.hijau{background:#33cc33!important;}
.warnaputih{color:#ffffff!important;}
.warnahitam{color:black!important;}
.putih{background:white!important;}
.hitam{background:black!important;}
#header, #footer {position: fixed;display: block;width: 100%;z-index: 9;color: #f2f2f2;padding: 14px 0 8px 0;}
#header {top: 0px;text-align: right;padding-right: 10px;background: #e0d3e83b;}
#footer {bottom: 0px;text-align: center;}
#infoMenu {bottom: 80px;}
#infoMenu li a {color: #fff;z-index: 999;}
#lovedMenu {position: fixed;bottom: 10px;right: 10px;z-index: 999;}
#videoSlides {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: black;
    /* in case the video doesn't fit the whole page*/
    background-image: /* our video */
    ;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    /*cover video background */
    z-index: 3;
}
#videoBeloved {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    /* in case the video doesn't fit the whole page*/
    background-image: /* our video */
    ;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    /*cover video background */
    z-index: 3;
}

.contanbeloved{display: block;position: absolute;z-index: 1;top: 42%;left: 58%;margin-top: -325px;margin-left: -747px;width: 800px;height: 696px;}
.wrapimages{margin-left: auto;margin-right: auto;width: 960px;position: relative;}
.boxtoke{position: absolute;top: 50%;left: 50%;margin-top: -192px;margin-left: 59px;width: 395px;text-align:left;z-index: 1;}
.aligncenter{text-align: -webkit-center;}
.boxtoke p {color:white;font-size:18px;}
.boxbeloved{text-align: left;color: #FFF;font-size: 1.2em;line-height: 1.6em;}
#sectionthree img{position:absolute;left: 40px;top: 100px;z-index: -2;width:100%;}
#sectionthree video{position: relative;left: 40px;top: 237px;}
#sectionfour .layer-bel {position: absolute;z-index: 4;width: 100%;left: 0;top: 0;-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box;
    /* <=28 */
    box-sizing: border-box;
}

.fp-slide {
    float: left;
}

.fp-slide,
.fp-slidesContainer {
    height: 100%;
    display: block;
}

.fp-slides {
    z-index: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}

.fp-section.fp-table,
.fp-slide.fp-table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-slidesContainer {
    float: left;
    position: relative;
}

.fp-controlArrow {
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -khtml-user-select: none;
    /* webkit (konqueror) browsers */
    -ms-user-select: none;
    /* IE10+ */
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}

.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}

.fp-scrollable {
    overflow: hidden;
    position: relative;
}

.fp-scroller {
    overflow: hidden;
}

.iScrollIndicator {
    border: 0 !important;
}

.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
}

#fp-nav.right {
    right: 17px;
}

#fp-nav.left {
    left: 17px;
}

.fp-slidesNav {
    position: absolute;
    z-index: 4;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0 !important;
    right: 0;
    margin: 0 auto !important;
}

.fp-slidesNav.bottom {
    bottom: 17px;
}

.fp-slidesNav.top {
    top: 17px;
}

#fp-nav ul,
.fp-slidesNav ul {
    margin: 0;
    padding: 0;
}

#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative;
}

.fp-slidesNav ul li {
    display: inline-block;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active+.fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}

#fp-nav ul li .fp-tooltip.right {
    right: 20px;
}

#fp-nav ul li .fp-tooltip.left {
    left: 20px;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
    height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
    height: auto !important;
}



.font30 {
    font-size: 30px!important;
    text-align: center!important;
    color: #FFF
}

.footer_sociale1 a {
    color: white;
    padding: 3px;
    font-size: 12px;
    text-decoration: none;
}

.footer_sociale1 p {
    color: white;
    padding: 3px;
    font-size: 11px;
}

.logowelcome {
    text-align: center!important
}

.logowelcome img {
    width: 200px!important
}

.container_sociale {
    padding: 3em 0 0
}

.sociale_welcome {
    margin: 2.5em auto;
    background: #ffffff00;
    background-size: cover;
    width: 35%
}

.footer_sociale {
    margin: 2em 0 1em;
    text-align: center
}

.footer_sociale p {
    font-size: 1em;
    color: #fff;
    line-height: 1.8em
}

.footer_sociale a {
    color: #fff;
    text-decoration: none!important;
    padding: 7px
}

.footer_sociale a:hover {
    color: #14da75;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    -ms-transition: 0.3s all;
    text-decoration: none
}

.footer_sociale p:hover {
    color: #14da75;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    -ms-transition: 0.3s all;
    text-decoration: none
}

.login {
    padding: 2em
}


input[type="text"],
input[type="password"] {
    outline: 0;
    padding: 12px 15px;
    border-radius: 25px;
    border: none;
    width: 100%;
	color:#666;
    letter-spacing: 1px;
    display: inline-block;
    margin: 10px 0
}
.login input, .login select, .login textarea{color: #666;}


button[type="submit"] {
    background: #a0a1b585!important;
    padding: 1.2em;
    margin: 2em 0;
    border: none;
    font-size: 1.1em;
    color: #fff;
    outline: none;
    -webkit-appearance: none;
    width: 100%;
    cursor: pointer;
	border-radius: 33px;
}

button[type="submit"]:hover {
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .52);
    -ms-transform: translateY(7px);
    -o-transform: translateY(7px);
    -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .58);
    box-shadow: 0 3px 3px 0 rgba(82, 86, 85, .51);
    background: #0b7562;
    -webkit-transform: translateY(7px);
    -ms-transform: translateY(8px);
    -o-transition: .4s all;
    -ms-transition: .4s all;
    transition: .4s all;
    transform: translateY(7px);
    -webkit-transition: .4s all;
    -moz-transition: .5s all
}
.learn{
	transition: all .2s ease-in-out;
	background: white;
    color: #636582;
    padding: 10px 57px;
    border-radius: 25px;
    width: fit-content;
	width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -ms-fit-content;
    width: -o-fit-content;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
	text-decoration:none!important;
	}
.learn:hover{border: 2px white solid;
    color: #ffffff;background:transparent;}
.learn a{text-decoration:none!important;}
.learn1{
    border: 2px white solid;
    color: #ffffff;
    padding: 10px 57px;
    border-radius: 25px;
    width: fit-content;
	width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -ms-fit-content;
    width: -o-fit-content;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 15px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none!important;
}
.learn1:hover{border: 2px white solid;
    color: #636582;background:white;}
.h1oke{background: white;
    color: #525058;
    padding: 7px;
margin: 10px 0px;}
.h1oke h3{color:#525058;}
.h1oke p{color:#525058;}
.imgsContainer {float:left;}
.imgsContainer img{}
.wrap212{
		width: 1180px;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
.box212{
		text-align: left;
		color: black;
		font-size: 1.2em;
		line-height: 1.6em;
	}
.login p {
    text-align: center;
    letter-spacing: 1px;
    font-size: 1em;
    color: #fff
}

.login p a {
    -moz-transition: .5s all;
    transition: .5s all;
    color: #fff;
    -webkit-transition: .5s all
}

.login p a:hover {
    color: #FFC107
}

.sociale_kata {
    text-align: center!important;
    padding: 11px 0 13px;
    color: white;
    font-size: 12px
}

.socialwelcome {
    color: white;
    background: #696973;
    padding: 2px 7px;
    font-size: 19px!important;
    border-radius: 50%;
    width: 33px;
    height: 33px;
}

.sociale_kata a {
    text-align: center!important;
    color: white
}

input.centang {
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
    background: #4c2395
}

input.centang:before {
    width: 1.2em;
    height: 1.2em;
    background: inherit;
    cursor: pointer;
    content: "";
    position: absolute
}

input.centang:after {
    left: 0;
    z-index: 1;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #FFC107;
    content: "";
    transition: .4s ease-in-out;
    position: absolute;
    top: 0
}

input.centang:checked:after {
    transform: rotate(-45deg);
    height: .5rem;
    border-color: #FFC107;
    border-top-color: transparent;
    border-right-color: transparent;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}

.gelombang input.centang:checked:after {
    height: .5rem;
    border-color: transparent;
    border-right-color: transparent;
    animation: .4s rippling .4s ease;
    animation-fill-mode: forwards;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

@keyframes rippling {
    50% {
        border-left-color: #FFC107
    }
    100% {
        border-bottom-color: #FFC107;
        border-left-color: #FFC107
    }
}

.tengah {
    text-align: center!important;
    color: white
}

.tengah h3 {
    text-align: center!important;
    color: white;
    padding: 2px
}

.tengah img {
    text-align: center!important;
    width: 60px
}

.wrapper {
    overflow: hidden;
    position: relative
}

.sociale_animatiom {
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0
}
.iconphone1 {
    width: 300px;
	width: 300px!important;
    left: 358px!important;
    background: #ffffff29;
    padding: 35px;
    border-radius: 50%;
}
.iconphone {
    width: 300px!important;
    left: 358px!important;
    background: #ffffff29;
    padding: 35px;
    border-radius: 50%;
}
.tengahrecapta{left:0;right:0;margin:auto;text-align:center;}
.tombolregister212 {
    padding: 6px 30px;
    border-radius: 21px;
    border: 1px #f3f3f3 solid;
    background: transparent;
    font-size: 16px;
    text-transform: uppercase;
    margin: 15px;
    color: white;
    width: fit-content;
	width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -ms-fit-content;
    width: -o-fit-content;
    left: 0;
    right: 0;
    margin: auto;
}
.sociale_animatiom li {
    -webkit-animation: square 21s infinite;
    -moz-animation: square 21s infinite;
    -o-animation: square 21s infinite;
    -ms-animation: square 21s infinite;
    animation: square 21s infinite;
    -webkit-transition-timing-function: cubic-bezier(.7, .95, .94, .9);
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    transition-timing-function: linear;
    background-color: #f9f9f90f;
    position: absolute;
    display: block;
    width: 33px;
    bottom: -157px;
    height: 33px;
    list-style: none;
    border-radius: 50%
}

.sociale_animatiom li:nth-child(1) {
    left: 11%
}

.sociale_animatiom li:nth-child(2) {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 19s;
    -moz-animation-duration: 19s;
    -o-animation-duration: 19s;
    animation-duration: 19s;
    width: 83px;
    height: 83px;
    left: 21%;
    border-radius: 1px
}

.sociale_animatiom li:nth-child(3) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
    left: 24%
}

.sociale_animatiom li:nth-child(4) {
    -webkit-animation-duration: 23s;
    -moz-animation-duration: 23s;
    -o-animation-duration: 23s;
    -ms-animation-duration: 23s;
    animation-duration: 23s;
    background-color: #c5bebe21;
    width: 62px;
    height: 62px;
    left: 44%;
    border-radius: 1px
}

.sociale_animatiom li:nth-child(5) {
    left: 70%
}

.sociale_animatiom li:nth-child(6) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
    background-color: #c5bebe21;
    height: 120px;
    left: 77%;
    width: 119px
}

.sociale_animatiom li:nth-child(7) {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    width: 147px;
    height: 147px;
    left: 29%
}

.sociale_animatiom li:nth-child(8) {
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    animation-delay: 16s;
    -webkit-animation-duration: 41s;
    -moz-animation-duration: 41s;
    animation-duration: 41s;
    width: 21px;
    left: 55%;
    height: 21px
}

.sociale_animatiom li:nth-child(9) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 39s;
    background-color: #c5bebe21;
    width: 10px;
    left: 25%;
    height: 10px;
    border-radius: 1px
}

.sociale_animatiom li:nth-child(10) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    left: 87%;
    width: 159px;
    height: 159px
}

.sociale_animatiom li:nth-child(11) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 40s;
    animation-duration: 50s;
    background-color: #c5bebe21;
    width: 54px;
    left: 27%;
    height: 54px;
    border-radius: 1px
}

.sociale_animatiom li:nth-child(12) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    left: 59%;
    width: 133px;
    height: 133px
}

@keyframes square {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
        -moz-transform: translateY(-700px) rotate(600deg);
        -o-transform: translateY(-700px) rotate(600deg);
        -ms-transform: translateY(-700px) rotate(600deg);
        transform: translateY(-700px) rotate(600deg)
    }
}

/*blog welcome style*/
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #e4e4e494;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.fokus1 {
    background: #f180c3!important;
    color: #fff!important;
}

.blog-hcard-list { width: 100%; overflow: hidden; }
.blog-hcard-list .article-thumbnail { border-radius: 0; overflow: hidden; margin-bottom: 10px; }
.blog-hcard-list .article-thumbnail img { width: 100%; }
.blog-hcard-list a { text-decoration: none; }
.blog-hcard-list h4 { width: 100%; color: #000; font-family: Lato, sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 10px 0; padding: 0; max-height: 2.2em; overflow: hidden; }
.blog-hcard-list h4:hover { color: #444; }
.blog-hcard-list ul.dropdown-menu { border-radius: 0 !important; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.175); }
.blog-hcard-list p.article-description { width: 100%; color: #666; font-family: Lato, sans-serif; font-size: 16px; }
.blog-hcard-list div.article-meta-description { width: 100%; color: #7e7e7e; font-family: Lato, sans-serif; font-size: 15px; text-transform: capitalize; }

.search-artiles-form { width: 100%; overflow: hidden; background: #fff; }
.search-artiles-form input { width: 100%; overflow: hidden; border-radius: 0 !important; border-color: #ccc; }

.blog-categories { width: 100%; overflow: hidden; background: #fff; }
.blog-categories ul { width: 100%; overflow: hidden; background: #fff; }
.blog-categories ul li { width: 90%; margin: auto; display: block; background: #fff; font-family: OpenSansBold; padding: 8px 18px !important; }
.blog-categories ul li.active { background: #f5f5f4; }
.blog-categories ul li.active h5 { width: 100%; display: block; background: #fff !important; font-family: OpenSansBold; text-transform: uppercase; }
.blog-categories ul li.active a { font-family: OpenSansBold; font-weight: 700; color: #333 !important; }

.wo-content-shadow { box-shadow: 0 1px 0 0 #e3e4e8, 0 0 0 1px #f1f1f1; }

.no-box-shadow { box-shadow: none !important; }

.read-blog-container .read-blog .read-blog-head { background: #fff; padding: 30px; }
.read-blog-container .read-blog h2 { color: #000; font-size: 35px; font-family: Lato, sans-serif; font-weight: 600; }
.read-blog-container .read-blog .read-blog-desc { color: #333; font-size: 17px; font-family: Lato, sans-serif; font-weight: 500; }
.read-blog-container .read-blog .read-content { color: #333; font-size: 17px; font-family: Lato, sans-serif; }
.read-blog-container .read-blog .blog-share-buttons ul li div { border-radius: 0; }
.read-blog-container .read-blog-thumbnail { width: 100%; overflow: hidden; max-height: 250px; }
.read-blog-container .read-blog-thumbnail img { width: 100%; min-height: 100%; }
.read-blog-container .read-blog-thumbnail:hover > img { opacity: 0.9; }
.read-blog-container .read-content { width: 100%; overflow: hidden; padding: 0 30px; }
.read-blog-container .read-tags { width: 100%; overflow: hidden; padding: 15px 30px; }

.blog-ls-box { width: 100%; padding-bottom: 15px; font-size: 14px; overflow: hidden; border-bottom: 1px solid #b8b7b626; margin-bottom: 30px; }
.blog-ls-box:last-child { border-bottom: none !important; }
.blog-ls-box .article-image { width: 100%; overflow: hidden; max-height: 200px; }
.blog-ls-box .article-image img { width: 100%; }
.blog-ls-box .art-text { width: 100%; padding: 15px 35px; }
.blog-ls-box .art-text a { text-decoration: none; }
.blog-ls-box .art-text h4 { width: 100%; color: #000; font-family: Lato, sans-serif; font-weight: 600; font-size: 22px; }
.blog-ls-box .art-text h4:hover { color: #444; }
.blog-ls-box .art-text p.art-description { width: 100%; color: #555; font-family: Arial, sans-serif; font-weight: 500; font-size: 16px; max-height: 3.5em; overflow: hidden; line-height: 20px; }
.blog-ls-box .art-text ul.dropdown-menu { border-radius: 0; box-shadow: 0 0 12px rgba(0, 0, 0, 0.175); }

.art-title { font-size: 18px; }
.blog-desc { font-size: 15px; color: #666; }
.profile-container .card.hovercard .cardheader { background: #fff; background-size: cover; max-height: 225px; }
.blog-meta-desc { font-size: 12; text-transform: capitalize; }
.blog-meta-desc time { color: #b8b7b6; }
.blog-meta-desc span small { font-family: OpenSansBold; color: #b8b7b6; }
.read-tags { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed; }
.barpopular h4{font-size:18px;word-wrap: break-word;margin-top: 7px;margin-bottom: 10px;color:white;}
.barpopular p{word-wrap: break-word;margin: 0 0 10px;}
.posts_load{text-align:center;}
.count_user_views a{font-size:14px;text-decoration:none;}
.blog-ls-box { width: 100%; padding-bottom: 15px; font-size: 14px; overflow: hidden; border-bottom: 1px solid #b8b7b626; margin-bottom: 30px; }
.blog-ls-box:last-child { border-bottom: none !important; }
.blog-ls-box .article-image { width: 100%; overflow: hidden; max-height: 200px; }
.blog-ls-box .article-image img { width: 100%; }
.blog-ls-box .art-text { width: 100%; padding: 15px 35px; }
.blog-ls-box .art-text a { text-decoration: none; }
.blog-ls-box .art-text h4 { width: 100%; color: #000; font-family: Lato, sans-serif; font-weight: 600; font-size: 22px; }
.blog-ls-box .art-text h4:hover { color: #444; }
.blog-ls-box .art-text p.art-description { width: 100%; color: #555; font-family: Arial, sans-serif; font-weight: 500; font-size: 16px; max-height: 3.5em; overflow: hidden; line-height: 20px; }
.blog-ls-box .art-text ul.dropdown-menu { border-radius: 0; box-shadow: 0 0 12px rgba(0, 0, 0, 0.175); }
.art-title { font-size: 18px; }
.blog-desc { font-size: 15px; color: #666; }
.blog-meta-desc { font-size: 12; text-transform: capitalize; }
.blog-meta-desc time { color: #b8b7b6; }
.blog-meta-desc span small { font-family: OpenSansBold; color: #b8b7b6; }
.read-tags { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed; }
.blog-ls-img { padding: 0; }
.blog-ls-img img { width: 100%; border-radius: 3px; }
.blog-h-list { margin-bottom: 20px; color: #999; font-size: 14px; overflow: hidden; transition: opacity 2s; padding-bottom: 10px; }
.blog-h-list a { text-decoration: none; }
.blog-h-list img { width: 100%; }
.blog-h-list img:hover { opacity: 0.9; }
.blog-h-list h4 {font-size: 21px;
    margin-top: 15px;
    font-family: Oswald, sans-serif;
    text-transform: capitalize; }
.blog-h-list h4:hover { color: #444; }
.blog-h-list h5 { margin: 15px 0 0; font-family: OpenSansLight, sans-serif; text-transform: uppercase; color: #009688; border: 1px solid #47e6d7; display: inline-block; font-size: 12px; padding: 3px 5px; border-radius: 2px; }
.blog-h-desc { overflow: hidden; width: 100%; padding: 10px 30px; background: #fff; height: 100%; }
.blog-h-desc p.desc { color: #777; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; }
.blog-h-desc div.blog-meta-desc { width: 100%; overflow: hidden; margin-top: 10px; font-size: 12px; }
.blog-h-desc div.blog-meta-desc span a { text-transform: capitalize; font-family: OpenSansRegular, sans-serif; color: #555; }

/*end*/

@media(max-width:1280px) {
    h1 {
        font-size: 2.6em
    }
    .sociale_welcome {
        width: 40%
    }
}

@media(max-width:1080px) {
    .sociale_welcome {
        width: 45%
    }
}

@media(max-width:991px) {
    h1 {
        font-size: 2.4em
    }
}

@media(max-width:900px) {
    input[type="text"],
    input[type="password"] {
        margin: 2.5em 0 0;
        width: 100%
    }
    .sociale_welcome {
        width: 52%;
        margin: 3em auto
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 2.1em
    }
}

@media(max-width:736px) {
    .login {
        padding: .5em 2.5em 2.5em
    }
    .sociale_welcome {
        width: 62%;
        margin: 3em auto
    }
}

@media(max-width:667px) {
    .sociale_welcome {
        width: 67%
    }
    button[type="submit"] {
        padding: .9em
    }
}
@media all and (min-width: 620px) and (max-width: 800px){
		.contanbeloved{
			margin-top: -278px;
			margin-left: -685px;
			width: 647px;
			height: 563px;
		}
	}

@media all and (max-width: 620px){
		.contanbeloved{
			margin-top: -208px;
			margin-left: -516px;
			width: 534px;
			height: 464px;
		}
	}
@media(max-width:600px) {
    input[type="text"],
    input[type="password"] {
        padding: 1em .9em
    }
    .sociale_kata {
        margin-top: 2.5em
    }
    button[type="submit"] {
        margin: 2.5em 0
    }
	.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 18px;
    border-color: transparent transparent transparent #ffffff87;
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 18px 38.5px 0;
    border-color: transparent #ffffff87 transparent transparent;
}
.bajingan {
    background: #FFF;
    font-size: 24px !important;
    width: 53px;
    padding: 10px;
    height: 53px;
    border-radius: 50%;
    color: #9e42a9;
    margin: 5px;
}
.absul-left,
    .absul-right {
        position: absolute
    }
	h2 {
    font-size: 2em;
    font-family: arial, helvetica;
    color: #fff;
    margin: 0;
    padding: 0;
}
.user-image1 {margin: -7px;}
.learn1 {padding: 7px 10px;font-size: 12px;}
.learn {padding: 10px 33px;}
}

@media(max-width:568px) {
    .sociale_welcome {
        width: 100%;
        margin: 2em auto
    }
    .footer_sociale p {
        padding: 0 2em
    }
	.intro p {
    font-size: 15px!important;
}
	h3{font-size:18px;}
}

@media(max-width:400px) {
    .login {
        padding: .5em 2em 2em
    }
    input[type="text"],
    input[type="password"] {
        font-size: .9em;
        width: 100%;
        padding: .8em .5em
    }
    .text:focus,
    .text:valid {
        background-position: 0 0
    }
    .sociale_kata ul li,
    .sociale_kata ul li:nth-child(2) {
        display: block;
        float: none
    }
    .sociale_kata ul li:nth-child(2) {
        margin-top: 1.5em
    }
    .sociale_kata {
        margin-top: 2em
    }
    button[type="submit"] {
        font-size: .9em
    }
    .login p {
        font-size: .9em
    }
    .sociale_kata label,
    .sociale_kata ul li a {
        font-size: .9em
    }
    .footer_sociale p {
        font-size: .9em
    }
	.col-md-7{padding-right:0px;
    padding-left:0px;}
}

@media(max-width:384px) {
    .mhdlogin {
        left: -44px
    }
    input[type="text"],
    input[type="password"] {
        width: 100%
    }
    .container_sociale {
        padding: 2em 0 0
    }
    .footer_sociale p {
        padding: 0 1em
    }
}

@media(max-width:320px) {
    .container_sociale {
        padding: 1.5em 0 0
    }
    .footer_sociale {
        margin: 0 0 1em
    }
    .login {
        padding: .5em 1.5em 1.8em
    }
    .sociale_kata {
        margin-top: 1.5em
    }
    .text:focus,
    .text:valid {
        background-position: 0 0
    }
    input[type="text"],
    input[type="password"] {
        font-size: .85em;
        margin: 1.8em 0 0
    }
    button[type="submit"] {
        margin: 1.5em 0;
        padding: .8em
    }
}

.logo img {
    width: 100%;
    margin: 50px 0 40px 0
}

.item h2 {
    text-align: center;
    width: 100%;
    margin-bottom: 0;
    color: #666;
    font-size: 30px
}

#re-send {
    margin-bottom: 0;
    margin-top: 20px
}

.welcome-footer {
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    text-shadow: black .1em .1em .2em;
    padding: 10px
}

.absul-right {
    position: fixed;
}

.absul-left {
    position: fixed;
    left: 10px;
    top: 15px
}

@media (max-width:1200px) {
    .welcome-search-con input {
        width: 250px
    }
    .welcome-footer-right {
        display: none
    }
    .welcome-footer,
    .welcome-footer-right {
        position: relative!important;
        font-size: 12px
    }
}

@media (max-width:920px) {
    .user-image {
        display: none
    }
	.onlymobile1 {
        display: block!important
    }
    .onlydesktop1 {
        display: none!important
    }
}

@media (max-width:720px) {
    .welcome-search-con {
        display: none
    }
    .welcome-footer-right {
        display: none
    }
    .onlydesktop {
        display: none!important
    }
}

@media (max-width:720px) {
    .typing-element {
        display: none
    }
}



.welcome-search-con {
    color: #fff;
    position: relative
}

.welcome-search-con i {
    position: absolute;
    left: 10px;
    top: 2px
}

.welcome-search {
    background: rgba(0, 0, 0, .2);
    border: 0;
    padding: 5px 7px;
    width: 400px;
    margin-top: -15px;
    max-width: 400px;
    border-radius: 2px;
    height: 32px;
    padding-right: 13px;
    padding-left: 30px;
    transition: background 0.2s ease-out;
    outline: none;
    font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
}

.welcome-search:focus {
    outline: none
}

.g-recaptcha {
    transform: scale(.85);
    transform-origin: 0 0
}

.welcome-footer-right {
    color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    text-shadow: black .1em .1em .2em;
    padding: 10px
}

.welcome-footer a:not(.lang) {
    padding-right: 10px;
    text-shadow: black .1em .1em .2em;
    color: #fff!important
}

.logo {
    max-width: 300px
}

.logo img {
    margin-top: 70px;
    margin-bottom: 20px
}

.welcome-container {
    width: 100%;
    height: 100%;
    padding-right: 0px;
    padding-left: 0px
}

@keyframes spinner {
    0% {
        transform: rotateZ(0deg)
    }
    100% {
        transform: rotateZ(359deg)
    }
}

* {
    box-sizing: border-box
}


/*----End User Image Blog---*/
.user-image {
    position: fixed;
    opacity: 0;
    border-radius: 100%
}

.user-image img {
    width: 60px;
    border-radius: 50%;
    transition: all .2;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .24), 0 1px 5px 0 rgba(0, 0, 0, .15), 0 3px 1px -2px rgba(0, 0, 0, .17)
}

.image-1 {
    top: 20%;
    left: 14%
}

.image-2 {
    top: 60%;
    left: 14%
}

.image-3 {
    top: 60%;
    right: 14%
}

.image-4 {
    top: 15%;
    right: 25%
}

.image-5 {
    top: 65%;
    right: 25%
}

.image-6 {
    top: 20%;
    right: 14%
}

.image-7 {
    top: 40%;
    right: 20%
}

.image-8 {
    top: 40%;
    right: 7%
}

.image-9 {
    top: 15%;
    left: 25%
}

.image-10 {
    top: 40%;
    left: 7%
}

.image-11 {
    top: 40%;
    left: 20%
}

.image-12 {
    top: 65%;
    left: 25%
}

.login.loading button {
    max-height: 100%;
    height: 100%;
    transition: 0.2s height;
    padding-top: 50px
}

.login.loading button .spinner {
    opacity: 1;
    top: 40%
}

.login.ok button .spinner {
    border-radius: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    height: 20px;
    animation: none;
    transform: rotateZ(-45deg)
}

.help-block-welcome {
    color: #777;
    margin-bottom: 5px;
    font-size: 12px
}
.mhdwelcome{font-size:24px!important;color:#FFF;}
.mhdlogin {
    bottom: 44px;
    position: relative;
    padding: 2px 6px;
    font-size: 24px!important;
    color: white;
    background: #6439afc2;
    border-radius: 50%;
    width: 37px;
    height: 37px;
    left: -34px
}

.login .title-new {
    color: #a84849;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px 0 30px 0;
    padding-bottom: 20px
}

.login button .spinner {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    border: 4px solid #fff;
    border-top-color: rgba(255, 255, 255, .3);
    border-radius: 100%;
    left: 50%;
    top: 0;
    opacity: 0;
    margin-left: -20px;
    margin-top: -20px;
    animation: spinner 0.6s infinite linear;
    transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2)
}

.login:not(.loading) button:hover {
    background: #c45a5b;
    outline: none
}

.login:not(.loading) button:focus {
    border-bottom-width: 4px;
    outline: none
}

.create-account {
    background: hsla(0, 0%, 100%, .4);
    border: 0;
    color: #fff;
    padding: 5px 7px;
    font-weight: 700;
    margin-top: -15px;
    max-width: 200px;
    border-radius: 2px;
    height: 32px;
    padding-right: 13px;
    padding-left: 13px;
    font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
}

footer {
    display: block;
    color: #ddd;
    font-weight: 400;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    font-size: .8em
}

.terms {
    color: #666;
    font-size: 11px
}

.terms a {
    font-size: 11px!important;
    color: #333
}

.terms_pretty {
    color: #FFF;
    font-size: 11px
}

.terms_pretty a {
    font-size: 11px!important;
    color: #00cfb9;
}

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite
}

@keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.typing-element {
    font-size: 22px;
    font-family: 'Lato', sans-serif;
    color: #fff;
    text-shadow: 0 1px 3px #616161;
    display: inline-block;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    padding: 5px
}

.typed-cursor {
    color: #fff;
    text-shadow: 0 1px 3px #111;
    font-size: 36px;
    font-family: 'Lato', sans-serif
}

.form-control {
    background-color: #07a08794!important;
    border: none!important;
    color: white!important;
    border-radius: 21px!important
}