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

  Template Name: Star Gas Company
  Description: Auto, GNV 
  Author: Carlos Castro
  Version: 1.0

-----------------------------------------------------------------------------------  */
 /*----------------------------------------------------------------------------------- 
    
  CSS INDEX
  ===================
    
  1. Theme Default CSS (css/shortcode/default.css)
  2. Header CSS (css/shortcode/header.css)
  3. Slider CSS (css/shortcode/slider.css)
  4. Footer CSS (css/shortcode/footer.css)
  5. Google Fonts
  6. Home-1 
    6.1 Banner section
    6.2 Product tab section 
    6.3 Up comming product section
    6.4 Blog section

  8. Single Blog Page
    8.1 Blog option
    8.2 blog main post
    8.3 Blog share tags
    8.4 Blog post and comments

  9. Contact Page
    9.1 Contact Address
    9.2 Google Map
    9.3 Dynamic contact form

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

/*----------------------------------------
  5. Google Fonts
----------------------------------------*/
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,700|Roboto:400,500,700';
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|PT+Sans:700|Pacifico');
@import 'https://fonts.googleapis.com/css?family=Cousine" rel="stylesheet';
@import 'https://fonts.googleapis.com/css?family=Proza+Libre" rel="stylesheet';

/* ========================================
  6. Home Version-1
======================================== */


/* -------------------------------------
    6.1 Banner section
------------------------------------- */
.banner {}

.banner-1::before {
  background: rgba(0, 0, 0, 0) url("img/bg/ribbon.png") repeat scroll 0 0;
  content: "";
  height: 137px;
  left: -11px;
  position: absolute;
  top: -11px;
  width: 146px;
}
.ribbon-price {
  left: 15px;
  position: absolute;
  top: 30px;
  transform: rotate(-42deg);
}
.ribbon-price span {
  color: #fefefe;
  font-family: roboto;
  font-size: 20px;
  font-weight: 500;
  line-height: 16px;
}
/* -------------------------------------
    6.2 Product tab section
------------------------------------- */
.pro-tab-menu {
  margin: 25px 0 30px;
}
.pro-tab-menu > ul {}
.pro-tab-menu ul li {
  display: inline-block;
  margin-left: 30px;
}
.pro-tab-menu ul li:first-child {
  margin-left: 0;
}
.pro-tab-menu ul li a {
  color: #999999;
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.pro-tab-menu ul li.active a {
  border-bottom: 1px solid #ffbf7f;
  color: #666666;
}
/* -------------------------------------
    6.3 Up comming product section
------------------------------------- */
.up-comming-pro {}
.up-comming-pro-img {
  width: 47.3%;
}
.cdown {
  display: inline-block;
  margin-right: 30px;
  text-align: center;
}


.blog-img {}
.blog-img > a {
  display: block;
}
.blog-img img {
  width: 100%;
}
.blog-title {
  font-weight: 700;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-desc p {
  margin-bottom: 25px;
}
.blog-item .read-more {
  margin-bottom: 45px;
}
.read-more a {
  display: inline-block;
  font-weight: 500;
  line-height: 14px;
}

.blog-item {
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
}
.blog-item img {
  width: 100%;
}
.blog-item .blog-desc {
  backface-visibility: hidden;
  background: rgba(255, 127, 0, 0.60) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  padding: 40px;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.5s ease 0s;
}
.blog-item .blog-desc::before, .blog-item .blog-desc::after {
  bottom: 20px;
  content: "";
  left: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 20px;
  transition: opacity 0.35s ease 0s, transform 0.5s ease 0s;
}
.blog-item .blog-desc::before {
border-bottom: 1px solid #fefefe;
border-top: 1px solid #fefefe;
transform: scale(0, 1);
}
.blog-item .blog-desc::after {
border-left: 1px solid #fefefe;
border-right: 1px solid #fefefe;
transform: scale(1, 0);
}
.blog-item:hover .blog-desc::before, .blog-item:hover .blog-desc::after {
opacity: 1;
transform: scale(1);
}
.blog-item:hover .blog-desc {
  opacity: 1;
}
.blog-title {
  text-transform: uppercase;
}
.blog-item .blog-title,
.blog-item .blog-desc p,
.blog-item .read-more a,
.blog-item .blog-meta li a { color: #fefefe; }

.blog-item .blog-title:hover a,
.blog-item .read-more a:hover,
.blog-item .blog-meta li a:hover { color: #ccc; }


/* -------------------------------------
    9 contact
------------------------------------- */

.section-heading {
    font-family: 'Arapey', serif;
    position: relative;
    margin: 45px 0;
    font-size: 40px;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.6em;
}
.section-heading:after {
    background: #336F7B;
    bottom: 5px;
    content: "";
    height: 4px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: 83px;
}
#contact-google-map {
  height: 380px;
  width: 100%;
}
.single-list{
  background-color: #19c40c;
  margin: 145px 0px 0 15px;
  padding-left: 50px;
}
.contact-section .theme-title{
  text-align: center;
}
.contact-section .theme-title h1{
  font-size: 45px;
  line-height: 90px;
  color: #242222;
  margin: 91px 0 3px 0;
}

.contact-section .contact-single-list{
  padding-top: 85px;
}
.contact-section .contact-single-list ul li {
  font-size: 16px;
  color: #fff;
  position: relative;
  padding-left: 50px;
}
.contact-section .contact-single-list ul li .fa-globe {
  margin-left: 22px;
}
.contact-section .contact-single-list ul li a {
  font-size: 16px;
  color: #fff;
  margin-bottom: 15px;
}
.contact-section .contact-single-list ul li a i {
  position: absolute;
  left:0;
  top:0;
  font-size: 20px;
  vertical-align: middle;
  color: #fff;
}
.contact-section .contact-single-list ul li .fa-chain{
  margin:0 0 0 20px;
}
.contact-section .contact-single-list ul li:nth-child(4){
  margin: 20px 0 35px 0;
  font-size: 16px;
}
.contact-section .social-icon h6{
  margin: 10px 0 0 0;
}
.contact-section .social-icon ul li {
  display: inline-block;
  position: relative;
}
.contact-section .social-icon ul li a{
  line-height: 50px;
  width: 50px;
  font-size: 16px;
  background: #19c40c;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  border: 1px solid #fff;
  margin: 20px 17px 0 0;
}
.contact-section .social-icon ul li a:hover{
  color: #979595;
  border: none;
}
.theme-form-two textarea, .theme-form-two input {
  border: none;
  border-bottom: 1px solid #9e9e9e;
  width: 100%;
  max-width: 100%;
  padding: 0 30px;
  font-size: 16px;
  line-height: 30px;
}
.theme-form-two textarea:focus, .theme-form-two input:focus {
  border-color: #19c40c;
}
.theme-form-two textarea {
  padding: 20px;
  margin-bottom: 25px;
}
.theme-form-two input {
  height: 55px;
  margin-bottom: 30px;
}
.contact-us-section .buttonDiv button {
  height: 50px;
  width: 185px;
  border: 1px solid #19c40c;
  background-color: #19c40c;
  color: #fff;
  margin-top: 35px;
}
.contact-us-section .buttonDiv button:hover{
  color: #fff;
}
.contact-section .social-icon{
  padding-bottom: 85px;
}

    .brick-title {
    font-size: 35px;
    margin-bottom: 20px;
    font-weight: 300;
    text-transform: none;
}
.brick-title2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 300;
    text-transform: none;
}

  .scrapcar-contact-wrap {
    padding: 30px 30px 0px;
    margin: 0px 0px 40px;
}
.scrapcar-contact-info ul li {
    list-style: none;
    margin: 0px 0px 25px;
}

.scrapcar-contact-info-text {
    background-color: #f5f5f5;
    margin: 25px 0px 0px;
    position: relative;
    padding: 38px 40px 15px;
    text-align: center;
}

.scrapcar-contact-info-text i {
    position: absolute;
    left: 50%;
    top: -25px;
    margin: 0px 0px 0px -25px;
    width: 50px;
    height: 50px;
    color: #ffffff;
    font-size: 25px;
    background-color: #1f2731;
    border-radius: 100%;
    padding: 13px 0px 0px;
}

.scrapcar-contact-info-text h5 {
    margin: 0px 0px 3px;
    text-transform: uppercase;
    font-weight: bold;
}

.scrapcar-contact-info-text span, .scrapcar-contact-info-text a {
    color: #000;
    display: block;
    line-height: 20px;
    font-size: 14px;
}

/*======================= Form Validation ===================*/
.alert-wrapper {
  display: none;
  position: fixed;
  width: 100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  top: 0;
  left: 0;
  z-index: 9999999;
}
#success,
#error {
  position: relative;
  width:500px;
  height: 100px;
  top: calc(50% - 50px);
  left:calc(50% - 250px);
  background: rgba(0,0,0,0.8);
  text-align: center;
}
#success .wrapper,
#error .wrapper {
  display: table;
  width:100%;
  height: 100%;
}
#success .wrapper p,
#error .wrapper p{
  display: table-cell;
  vertical-align: middle;
  letter-spacing: 1px;
}
#success p{
  color: #26ace3;
}
#error p{
  color: #C9182B;
}
#error button,
#success button {
  color:#fff;
  width:40px;
  height:40px;
  line-height: 20px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 20px;
}
.form-validation label.error {display: none !important;}
.form-validation input.error {border:1px solid #f03838 !important;}
.form-validation textarea.error {border:1px solid #f03838 !important;}

/*** 
====================================================================
  Error-section
====================================================================
 ***/
.error-page{
  text-align: center;
  position: relative;
  padding: 100px 0;
  margin: 170px 0 40px 0;
}
.error-page .error h2 {
  font-size: 75px;
  color: #d1d1d1;
  margin-bottom: -40px;
}
.error-page .error h3 {
  padding: 110px 0 25px 0;
  color: #242222;
  font-size: 33px;
  line-height: 65px;
}
.error-page .middle-error {text-align: center;}
.error-page .middle-error h1 {
  display: inline-block;
  font-size: 129px;
}
.error-page .middle-error img {
  display: inline-block;
}
.error-page .submit-section a {
  display: inline-block;
  line-height: 58px;
  width: 244px;
  margin: 0 10px 20px 0;
  border: 1px solid #19c40c;
  background-color: #fff;
  color: #19c40c;
}
.error-page .submit-section a:hover{
  color: #fff;
}
.error-page .submit-section .theme-search-box {display: inline-block;}
.error-page .submit-section .theme-search-box form{
  height: 60px;
  width: 340px;
}
.error-page .submit-section .theme-search-box form button{
  width: 70px;
}
.error-page .submit-section .theme-search-box form input{
  padding: 0 55px 0 20px;
}
/* -------------------------------------
            otros 
------------------------------------- */
.brick {
    padding: 36px 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.inner-page-banner {
    background: url(../img/banner3.jpg) no-repeat center;
    background-size: cover;
}

.inner-page-banner .opacity {
    background: rgba(0,0,0,0.57);
    padding: 85px 0;
}

.inner-page-banner .opacity h3 {
    font-size: 45px;
    line-height: 81px;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    margin: 0 0 15px;
    margin-bottom: 0;
    font-weight: 700;
}

.inner-page-banner .opacity ul.page-depth {
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-top: 10px;
}

.inner-page-banner .opacity ul.page-depth li {
    display: inline-block;
    margin-left: 1px;
}

.inner-page-banner .opacity ul.page-depth li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

.inner-page-banner .opacity ul.page-depth li:before {
    content: '/';
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    margin-right: 5px;
}

.inner-page-banner .opacity ul.page-depth li:first-child:before {
    content: '';
    margin-right: 0;
}
/********************************
          historia
*********************************/


.bg-dark {
    background-color: #383f51!important;
    height: 100%;
    width: 100%;
}

.icon-container {
    cursor: pointer;
    display: table;
    width: 150px;
    height: 150px;
    margin:0 auto;
}

.icon-container i {
	font-size: 40px;
	display: table-cell;
	vertical-align: middle;
	-webkit-transition: all ease .4s;
	-moz-transition: all ease .4s;
	-o-transition: all ease .4s;
	-ms-transition: all ease .4s;
	transition: all ease .4s;
	color: #ddd;
	background-color: #383f51!important;
}

.icon-container-2 {
    cursor: pointer;
    display: table;
    width: 130px;
    height: 130px;
}

.icon-container-2 i {
	text-align: center;
	font-size: 35px;
    display: table-cell;
    vertical-align: middle;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    -ms-transition: all ease .4s;
    transition: all ease .4s;
    color: #fff;
    background-color: #383F51;
}

.bg-sv{
    background: url(../img/banner2.jpg);
    overflow: hidden;
    position: relative;
}

.parallaxe {
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    padding: 10px;
}

.service-title h1{
  color: white;
}

.service-title h3{
	font-weight: 600;
	color: white;
}

.service-title h2{
    font-weight: 400;
    color: white;
}

.text-dark{
	color: white;
}
.tes{
    text-align: center;
    color: #fff !important;
    padding-bottom: 3rem;
}

@media (max-width: 1199px){
.b-bnr-3 {
    background-image: none;
}
}