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

	Project Name: Cleative Inc.
	Project Description: Cleative - Consulting, Innovation and Technology.
	File Name: main.scss
	Author: Leandro Lima
	Author URI: http://cleative.com
	Version: 1.0.0

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


/*--------------------------------------------------------------------------*/
/* [TABLE OF CONTENTS]
/*
/*	1. VARIABLES & MIXINS
/*	2. COMMON
/*	3. BUTTONS & INPUTS
/*	4. HEADER
/*	5. SECTIONS
/*	6. HEADLINE & TOP SECTION
/*	7. COUNTDOWN
/*	8. FEATURES, ABOUT & CONTACT SECTIONS
/*	9. SWITCHER
/*	10. SWEET-ALERT
/*	11. MEDIA QUERIES
/*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*/
/* 1. VARIABLES & MIXINS */
/*--------------------------------------------------------------------------*/
html, body {
  font-size: 14px;
  line-height: 1.95em;
}

@media (min-width: 600px) {
  html, body {
    font-size: calc( 14px + (15 - 14) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  html, body {
    font-size: 16px;
  }
}

h3 {
  font-size: 1.6em;
  margin-top: 1.4290658414em;
}

@media (min-width: 600px) {
  h3 {
    font-size: calc( 22.3686428147px + (22.3686428147 - 19.8993630493) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h3 {
    font-size: 1.6em;
    margin-top: 2.4290658414em;
    line-height: 1.7148790097em;
    margin-bottom: 0.3289019598em;
  }
}

/*--------------------------------------------------------------------------*/
/* 4. HEADER */
/*--------------------------------------------------------------------------*/
.fp-viewing-0.light-header .social-btn:hover,
.fp-viewing-0.light-header .social-btn:focus { color: #b3b3b3; }

a.social-btn:focus, a.social-btn:hover { color: #b3b3b3; }


/*--------------------------------------------------------------------------*/
/* 5. SECTIONS */
/*--------------------------------------------------------------------------*/

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: #b3b3b3;
}
  #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 {
    background: #8e8e8e;
    border: 1px solid #aeaeae;
  }

#fp-nav ul li .fp-tooltip {
  color: #8e8e8e;
}

/*--------------------------------------------------------------------------*/
/* 6. HEADLINE & TOP SECTION */
/*--------------------------------------------------------------------------*/
.social-bar {
    padding-left: 0;
}

/*--------------------------------------------------------------------------*/
/* 8. FEATURES, ABOUT & CONTACT SECTIONS */
/*--------------------------------------------------------------------------*/
.section-title p, .sr-box p {
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center; }

.sr-box {
  background: rgba(255, 255, 255, 0.52);
  color: #000;
}
.sr-box h4, .sr-box p { color: #000; }

.sr-box h4 { font-size: 1.2em; }

.office { margin-left: 14px; }
.mobile { margin-left: 10px; }

#contactUs .section-title p { text-align: center;}

.bg-icon {
  font-size: 15.629em;
  color: rgba(151, 151, 151, 0.43);
  top: -45px;
  right: -25px; }

  .sr-box:hover .bg-icon {
    font-size: 30.443em;
    top: -60px;
    right: -25px;
  }
  @media (max-width: 991px) {
    .sr-box:hover .bg-icon {
      font-size: 25.443em;
      top: -46px; }
  }
  @media (max-width: 767px) {
    .sr-box:hover .bg-icon {
      font-size: 21.443em;
      top: -37px;
      right: -23px; }
  }

input[type="text"], input[type="email"], textarea {
  font-size: 0.92em;
  min-height: 4.375em;
  background-color: rgba(162, 162, 162, 0.04);
}
textarea {
  padding-top: 1.1em;
}

@media (min-width: 600px) {
  input[type="text"], input[type="email"], textarea {
    font-size: calc( 13px + (14 - 13) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  input[type="text"], input[type="email"], textarea {
    font-size: 0.95em;
  }
}

input[type="submit"], button {
  font-size: 0.92em;
  min-height: 4.375em;
  padding: 0.4375em 1.75em;
}

.sr-btn {
  background-color: #fff;
  color: #2c3e50;
  border-color: #2c3e50;
  margin: 0; }

  .sr-btn:hover { background-color:rgba(0, 0, 0, 0.05); }

.sr-btn .icon {
  font-size: 1.3em;
  margin-right: 9px;
}

@media (min-width: 600px) {
  input[type="submit"], button {
    font-size: calc( 13px + (14 - 13) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  input[type="submit"], button {
    font-size: 0.95em;
  }
}

/*--------------------------------------------------------------------------*/
/* 10. SWEET-ALERT
/*--------------------------------------------------------------------------*/
div.sweet-alert.show-sweet-alert.visible{
  padding: 30px 30px 40px !important;
  border-radius: 15px;
}

.sweet-alert button.styled {
  font-weight: 300;
  padding: 10px 75px;
  min-height: 3em;
}
.sweet-icon.sweet-success .line { background-color: rgba(188, 224, 177, 0.95); }
.sweet-icon.sweet-success .placeholder {
  border: 4px solid hsla(180, 1%, 69%, 0.2);
}