/*
----------------------------------------------
Project Name: 	Softaco
Version: 		1.0
Type: 			HTML Template
Last change:    01.01.2019
Author: 		Weblos
Primary use:    Corporate Template
-----------------------------------------------
*/


/* Google Fonts */

/* 
font-family: 'Open Sans', sans-serif;
*/


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




/*------------------------------------------------------------------------
[Table of Contents]


1. Base CSS
2. Typography
	2.1. Heading styles
	2.2. Paragraph styles
	2.3. Margin styles
	2.4. Padding styles
3. Preloader
4. Buttons styles
5. Sections style
6. Back to top
7. Section typography
8. Background overlay
9. Header Top
10. Hero Area
11. Swiper Slider area
12. How It Works area
13. About Area
14. Why Choose Area
15. Bitcoin Prices Area
16. Crypto Converter Area
17. Counter Area
18. News Area
19. Blog Details
20. Currency Converter
19. How Works Area
20. Team Area
21. Client Review
22. Custom Hero Area
23. About page 1
24. Video Area
25. Services Elements
26. FAQs-area
27. Map Area
28. Contact-form-area
27. Pricing Area
28. Signup Area
29. Footer Area
30. Responsive Media queries

/*---------------------------------------------------------------------------

# [Color Codes]


# Asphalt (Black): #333333
# Alpha (Blue): #114E8E
# Blead (Yellow): #E8B01C
# Sclude (Deep-yellow): #EC7636
# White: #FFFFFF

# */


/*----------------------------------------------------------------------------

[Typography]


Body:		font-size: 15px, font-family: 'Open Sans', sans-serif;
Heading:	font-family: 'Open Sans', sans-serif;
Paragraph:	font-size: 15px, font-family: 'Open Sans', sans-serif;

-------------------------------------------------------------------------------*/


/* ==============================
   Base Css
   ============================== */

a {
    text-decoration: none;
    outline: none;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    color: #8d4ce0;
}

a:focus,
a:hover {
    color: #f17272;
	text-decoration: none;
}

input:focus,
button:focus,
textarea:focus {
    text-decoration: none;
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    font-weight: 700;
    line-height: 1.4em;
    color: #8d4ce0;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7em;
    color: #666666;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

section:focus {
	outline: none;
}


/* ==============================
   Helper-Class
   ============================== */

.section-padding {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-padding-bottom {
    padding-bottom: 120px;
}

.section-padding-top {
    padding-top: 120px;
}

.gray-bg {
    background-color: #fbfbfb
}

.half-gray {
    position: relative;
}

.half-gray:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55%;
    background-color: #fbfbfb;
    z-index: -1;
}

.section-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.equal-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.equal-height.revers {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}


.start-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.clear-hidden {
    overflow: hidden;
}

.bold {
    font-weight: 700;
}

.text-pink {
    color: #f17272
}

.text-white {
    color: #ffffff;
}

.dark-white {
    color: #fff;
}

[class|=space] {
    display: block;
    width: 100%;
    overflow: hidden
}

.space-5 {
    height: 5px;
}

.space-10 {
    height: 10px;
}

.space-15 {
    height: 15px;
}

.space-20 {
    height: 20px;
}

.space-25 {
    height: 25px;
}

.space-30 {
    height: 30px;
}

.space-40 {
    height: 40px;
}

.space-50 {
    height: 50px;
}

.space-60 {
    height: 60px;
}

/* ==============================
   Hero-Area
   ============================== */

.hero-area {
    min-height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;	
	background-size: cover;
}

.hero-area .head-title {
    font-size: 42px;
    font-weight: 300;
}

.hero-area .bttn-1 {
    margin-right: 15px;
}

.hero-area .title {
    margin-bottom: 15px;
}

/* ==============================
   Page Title
   ============================== */

.page-title {
    text-align: center;
    position: relative;
}

.page-title .title {
    margin-bottom: 15px;
    font-size: 28px;
    margin-top: -5px;
}


/* ==============================
   Contact Area
   ============================== */

.contact-area {
    background-color: #B33771;
    background-image: url('images/bg-dot.png');
    position: relative;
    overflow: hidden;
    z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;
}

.contact-area .bg-text {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 300px;
    color: #ffffff;
    opacity: 0.1;
    cursor: default;
    z-index: -1;
}


/* ==============================
   Footer Area
   ============================== */

.footer-area {
    background-color: #8d4ce0;
    background-repeat: no-repeat;
    background-position: left bottom;
    color: #fff;
}

.footer-top {
    padding-top: 100px;
    padding-bottom: 100px;
}

.footer-bottom {
    padding-top: 40px;
    padding-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-area .footer-title {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 20px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    display: block;
    margin-bottom: 10px;
}

.footer-list li:last-child {
    margin-bottom: 0;
}

.footer-list li a {
    display: block;
    color: #fff;
}

.footer-list li a:hover {
    color: #f17272;
}

blockquote {
    border-left-color: #f17272;
    background-color: #fbfbfb;
    padding: 30px 30px;
}

.list-inline li {
    display: inline-block;
}


/* ==============================
   Preloader
   ============================== */

  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 #ffffff;
  }

  .spinner {
    border: 1px solid transparent;
    border-radius: 3px;
    position: relative;
  }

  .spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 1px solid #8d4ce0;
    border-top-color: #ffffff;
    animation: spinner .9s linear infinite;
  }

  @-webkit-@keyframes spinner {
    to {transform: rotate(360deg);}
  }

  @keyframes spinner {
    to {transform: rotate(360deg);}
  }


.counter-area {
    padding-top: 120px;
    padding-bottom: 120px;
}

.text-left {
    text-align: left !important;
}

.single-post .site-header {
    padding-top: 0;
}