/*===================== TABLE OF CONTENT =======================
/*
Table Of Content
==================
1.  google fonts
2.  CROSS BROWSER COMPATABILITY
3.  DEFAULT BORDER RADIUS
4.  Sticky Header
4.1- Menu css
4.2- Menu affix css
5.  Top Scroll Bar

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



/* ================================================================================== 
Fonts
===================================================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* ================================================================================== 
Reset Css
===================================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
::-moz-selection { /* Code for Firefox */
	color: #fff;
	background: #fa2276;
}

::selection {
	color: #fff;
	background: #fa2276;
}
body {
	line-height: 1;
	font-family: 'Roboto', sans-serif;
	overflow-x: hidden;
	font-weight: 400;
	background: #f3f3f3;
	margin:0 auto;
}

ol, ul {
	list-style: none;
}
a:hover {
	text-decoration: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
button {
outline: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	margin:0;
	padding: 0;
}
a:focus {
	text-decoration: none;
	outline: none;
}
a:hover {
	color: none;
}
button {
	outline: none;
}
input {
	outline: none;
}
textarea {
	outline: none;
}
section {
	float: left;
	width: 100%;
	position: relative;
}

p {
	font-size: 14px;
	line-height: 26px;
	color: #959fbb;
}

/* ================ Typography Css =============== */
h1 {
	font-size: 2em;
	/* 2x body copy size = 32px */
	line-height: 1.25;
	/* 45px / 36px */
}
h2 {
	font-size: 1.625em;
	/* 1.625x body copy size = 26px */
	line-height: 1.15384615;
	/* 30px / 26px */
}
h3 {
	font-size: 1.375em;
	/* 1.375x body copy size = 22px */
	line-height: 1.13636364;
	/* 25px / 22px */
}
h4 {
	font-size: 1.125em;
	/* 1.125x body copy size = 18px */
	line-height: 1.11111111;
}
h5 {
	font-size: 1.10em;
	/* 1.125x body copy size = 18px */
	line-height: 1.10;
}
h6 {
	font-size: 1em;
	/* 1.125x body copy size = 18px */
	line-height: 1.050;
}
blockquote {
	font-size: 1.25em;
	/* 20px / 16px */
	line-height: 1.25;
	/* 25px / 20px */
}
@media (min-width: 43.75em) {
h1 {
	font-size: 2.5em;
	/* 2.5x body copy size = 40px */
	line-height: 1.125;
}
h2 {
	font-size: 2em;
	/* 2x body copy size = 32px */
	line-height: 1.25;
}
h3 {
	font-size: 1.5em;
	/* 1.5x body copy size = 24px */
	line-height: 1.25;
}
h4 {
	line-height: 1.22222222;
	/* (22px / 18px */
}
blockquote {
	font-size: 1.5em;
	/* 24px / 16px = */
	line-height: 1.45833333;
	/* 35px / 24px */
}
}
@media (min-width: 56.25em) {
h1 {
	font-size: 3em;
	/* 3x body copy size = 48px */
	line-height: 1.05;
	/* keep to a multiple of the 20px line height 
	and something more appropriate for display headings */
}
h2 {
	font-size: 2.25em;
	/* 2.25x body copy size = 36px */
	line-height: 1.25;
}
h3 {
	font-size: 1.75em;
	/* 1.75x body copy size = 28px */
	line-height: 1.25;
}
}


/* ================ CROSS BROWSER COMPATABILITY =============== */

.ask-question,
nav,
.notification-box.active,
nav ul li a,
.user-account-settingss.active,
.user-info a,
.suggestion-usd > span i,
.view-more > a,
.tags-sec ul li a,
.post-st ul li a,
.ed-opts > a,
.bk-links li a,
.like-com li a,
.user-profy > a,
.slick-previous:before,
.slick-nexti:before,
.comment > a,
.sign_link > a,
.post-popup,
.post-project > a,
.post-project-fields form ul li button,
.post-project-fields form ul li a,
.sign-control li a,
.cover-sec > a,
.star-descp > a,
.message-btn a,
.pf-gallery ul li,
.gallery_pt:before,
.gallery_pt > a,
.overview-box,
.skl-name,
.conv-list,
.save-stngs ul li button,
.forum-links.active,
.react-links li a,
.next-prev > a,
nav ul li:hover > ul,
.user-pro-img > a i {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
 
#main_wrapper {
    background-color: #fff;
}
#intro-bg {
    animation: 50s linear 0s normal none infinite running awan-animasi;
    background-image: url(../images/img-bg1.jpg);
    background-size: auto 100%;
    align-items: center;
    display: flex;
    padding: 100px 0 50px 0;
    flex-flow: row nowrap;
    height: 100%;
    justify-content: center;
    width: 100%;
    text-align: center;
}
.hero-content {
    margin-bottom: 40px;
}
.logo_item {
    background: #ffffff;
    padding: 15px 30px;
    border-radius: 50px;
    display: inline-block;
    margin: 0 auto 30px;
    text-align: center;
}
.logo_item img {
    max-width: 100%;
}
.hero-content h1 {
    color: #ffffff;
    display: block;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 0px;
}
.hero-content h3 {
    color: #ffffff;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    margin: 10px 0 20px;
    text-transform: none;
}
.hero-content .click-demos {
    display: block;
    width: 150px;
    margin: auto;
    text-align: center;
    background: #fa2276;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    line-height: 52px;
    border-radius: 3px;
    -webkit-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
	cursor: pointer;
	margin: 0 3px;
}

.hero-content .click-demos:hover {
    background: #434f74;
    color: #fff;
}

.banner-price {
    font-size: 18px;
    color: #fff;
    font-style: italic;
    margin-top: 30px;
}

.demos {
    margin: 80px 0;
    text-align: center;
}

.demos h1 {
    font-size: 24px;
    font-weight: 600;
    color: #434f74;	
}

/*** Demos ***/

.landing-demo {
	background:#ffffff;
	padding:5px;
	display: block;
	margin-top: 50px;
	overflow: hidden;
	border:1px solid #e5e5e5;
	border-radius:4px;
	transition: all 0.15s linear 0s;
}

.screen_demo_1 {
    background-image: url(../images/home.png);
}

.screen_demo_2 {
    background-image: url(../images/black.png);
}

.screen_demo_3 {
    background-image: url(../images/rtl.png);
}
.landing-demo-image {
	background-color: #fff;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: block;
	height: 250px;
	margin: 0 0 4px;
	position: relative;
	transition: all 0.3s linear 0s;
}
.landing-demo-title {
	background-color:#f3f3f3;
	border-radius: 0 0 3px 3px;
	color: #434f74;
	border: 1px solid #e5e5e5;
	display: block;
	font-size:14px;
	font-weight: 500;
	margin: 0;
	letter-spacing:0px;
	padding: 18px 0;
	text-align: center;
}
.landing-demo-title:hover {
	color: #fff;
	background-color:#fa2276;
}
.landing-demo:hover {
	box-shadow: 0 1px 5px rgba(67, 79, 116, 0.3);
	text-decoration: none;
}
.landing-demo-image::after {
	background-color: #fa2276;
	border-radius: 50%;
	color: #fff;
	content: "+";
	display: block;
	font-family: "FontAwesome";
	font-size:22px;
	height: 36px;
	left: 50%;
	line-height: 32px;
	opacity: 0;
	font-weight:800;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	transition: opacity 0.15s linear 0s;
	width: 36px;
	z-index: 10;
}
.landing-demo:hover .landing-demo-image::after, .landing-demo:hover .landing-demo-image::before {
	opacity: 1;
}
.landing-demo-image::before {
	background-color: rgba(0, 0, 0, 0.60);
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	border:1px solid rgba(0, 0, 0, 0.2);
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.15s linear 0s;
	z-index: 9;
}

.features {
    padding: 80px 0;
    text-align: center;
	background: #fff;
}

.features h1 {
    font-size: 24px;
    font-weight: 600;
    color: #434f74;
}

.features .feature-items {
    text-align: left;
    margin-top: 50px;
}

.features .feature-items h4 {
    font-size: 18px;
    font-weight: 500;
    color: #343f74;
    margin-bottom: 15px;
}

.features .feature-items p {
    font-size: 14px;
    font-weight: 400;
    color: #959fbb;
    line-height: 24px;
}
.features .feature-items i {
    font-size:30px;
    color: #fa2276;
	margin-bottom: 27px;
}

.footer {
    background: #434f74;
    text-align: center;
}

.footer .footer-items {
    padding: 80px 0 30px;
}

.footer .footer-items h1 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.footer .footer-items h5 {
    font-size: 16px;
    font-weight: 400;
    color: #bdc3d3;
    margin-bottom: 50px;
}
.footer-items .click-demos {
    display: block;
    width: 230px;
    margin: auto;
    text-align: center;
    background: #fa2276;
    font-weight: 500;
    font-size: 14px;
    color: #fff !important ;
    text-transform: uppercase;
    line-height: 52px;
    border-radius: 3px;
    -webkit-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
	cursor: pointer;
}

.footer-items .click-demos:hover {
    background: rgba(250, 34, 118, 0.8);
    color: #fff !important;
}

.rating {
    margin: 50px 0;
}

.rating h6 {
    font-size: 16px;
	font-weight: 500;
	color: #fff;
}

.hero-content ul li {
    display: inline-block;
}

.rating .stars li {
    display: inline;
	padding: 0 2px;
}

.rating .stars {
    margin: 15px 0 0;
    color: #ffcf00;
}

.copy-content {
    font-size: 14px;
    color: #bdc3d3;
    padding: 30px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}