/* ==================== CSS Structure ==================== 
1. COMMON STYLES
	- Reset Styles
	- Common Classes
	- Pre Loader Styles
	
2. HTML ELEMENTS STYLE
	- Button Styles

3. HEADER SECTION
	- Main Navigation Styles
	- Home section
	
4. FEATURE SECTION
5. SERVICE SECTION
6. STEP SECTION
7. Video SECTION

8. SCREENSHOT SECTION
	- ScreenShots hover effect style

9. TESTIMONIAL SECTION
10. PRICING SECTION
	- Folding Effect

11. SUBSCIBE SECTION
12. DOWNLOAD SECTION
13. CONTACT SECTION
14. FOOTER SECTION
========================================================== */


/* --------------- Reset Styles --------------- */
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 28px;
	font-weight: 300;
	color: #666666;
	overflow-x: hidden !important;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #cccccc;
	text-decoration: none;
}

a:hover,
a:focus,
.btn:focus {
	text-decoration: none;
	outline: none;
	color: #6c6b6b
}

input:focus,
textarea:focus {
	outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Raleway', sans-serif;
	text-transform: capitalize;
	letter-spacing: 1px;
}

h1 {
	font-size: 72px;
	line-height: 82px;
}

h2 {
	font-size: 48px;
	line-height: 60px;
}

h3 {
	font-size: 32px;
	line-height: 45px;
}

h4 {
	font-size: 20px;
	line-height: 30px;
}

h5 {
	font-size: 18px;
	line-height: 25px;
}

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

ul,
ol {
	padding-left: 0 !important;
}

li {
	list-style: none;
}

/* --------------- Common Classes --------------- */
.center {
	text-align: center;
}

.left {
	text-align: left;
}

.justify {
	text-align: justify;
}

.strong {
	font-weight: 700;
}

.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.floatnone {
	float: none;
}

.fixed {
	position: fixed;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.container {
	position: relative;
	z-index: 10;
}

.section-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
}

.animated {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

.section-title {
	margin-bottom: 48px;
}

.section-title h3,
.section-title h4 {
	color: #F4F4F4;
	border-top: 1px solid;
	border-bottom: 1px solid;
	display: inline-block;
	margin-top: 0;
	padding: 8px 0;

}

.section-overlay {
	background: rgba(0, 0, 0, .7) !important;
	z-index: 5;
}



/* --------------- Pre Loader Styles --------------- */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FFF;
	width: 100%;
	height: 100%;
	z-index: 10050;
}

.loading-circle {
	position: absolute;
	left: 49%;
	top: 49%;
	height: 48px;
	width: 48px;
	border-radius: 50%;
	border-top: 2px solid #7F8C8D;
	border-right: 2px solid rgba(0, 0, 0, 0);
	border-bottom: 2px solid #7F8C8D;
	border-left: 2px solid rgba(0, 0, 0, 0);
}

/* =============== HTML element styles =============== */
/* --------------- Button Styles --------------- */
.button-line {
	background: transparent;
	display: inline-block;
	font-weight: 400;
	border-radius: 4px;
	border: 1px solid;
	margin: 10px;
	overflow: visible;
}

.no-text .icon {
	margin: 0;
}

.btn .icon {
	margin-left: 13px;
}

.button-white {
	border-color: #fff;
	color: #fff;
}

.button-white:hover {
	border-color: #fff;
	color: #fff;
}



/* ================ Header Section ================ */

.header-section {
	position: relative;
}

/* --------------- Main Navigation Styles --------------- */
.sticky-bar-wrap {
	position: fixed;
	width: 100%;
	z-index: 1025;
}

.sticky-section {
	width: 100%;
	height: 80px;
	z-index: 1025;
	transition: all .3s ease-in;
	background: rgba(0, 0, 0, .15);
}

.nav-bg {
	background: rgba(0, 0, 0, .6);
}

.site-name {
	color: #fff;
	font-family: 'Bangers', cursive;
	font-size: 24px;
	padding: 0px 15px;
	letter-spacing: 1px;
}

.site-name span {
	color: #fff;
	padding: 0 13px;
	font-weight: 400;
	height: 35px;
	width: 35px;
	display: inline-block;
	margin-right: 3px;
	font-size: 28px;
	line-height: 35px;
}

.nav-hold {
	left: 0;
	right: 0;
	top: 0;
	padding-top: 13px;
	z-index: 1025;
}

ul.nav>li>a {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
}

ul.nav>li>a:hover,
ul.nav>li>a:focus {
	background: none !important;
}

li.current a,
ul.nav>li>a:hover {
	color: #ccc !important;
}

.navbar-toggle .icon-bar {
	background: #ffffff;
}


/* --------------- Home section --------------- */


.section-home {
	position: relative;
}

.home {
	min-height: 750px;
}

.well-come {
	position: relative;
	font-size: 50px;
	line-height: 62px;
	margin-top: 140px;
	margin-bottom: 48px;
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
}

.well-come:after {
	position: absolute;
	content: "";
	width: 220px;
	height: 1px;
	background-color: #FFF;
	bottom: -16px;
	left: calc(50% - 110px);
}

.intro-message {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 48px;
	color: #fff;
}


/* ================ Features Section ================ */
#nosotros {
	background-color: #4e5158e3;
}

.container.features {
	padding-top: 132px;
	padding-bottom: 190px;
}

.baraja-container {
	width: 450px;
	height: 600px;
}

.baraja-container .single-feature {
	border: 1px solid #ccc;
	border-radius: 4px;
}

.single-feature .feature-title {
	margin-top: 18px;
}

.single-feature .feature-text {
	line-height: 1.5;
	padding: 0 10px;
	margin-bottom: 16px;
}

.baraja-container .single-feature:hover {
	-webkit-box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5);
	-o-box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5);
	box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5);
}

.single-feature .feature-image {}


.features-control {
	margin: auto;
	margin-top: 55px;
	width: 253px;
	z-index: 1020;
}

.control-icon {
	position: absolute;
	top: 0;
	padding: 5px 15px;
	font-size: 20px;
	height: 46px;
}

.feature-link a {
	color: #fff;
	font-weight: 400;
}

.feature-link a i {
	font-weight: 300;
}

.features-control #feature-prev {
	left: 0px;
}

.features-control #feature-expand {
	left: 60px;
}

.features-control #feature-close {
	left: 120px;
}

.features-control #feature-next {
	left: 180px;
}



/* ================ Services Section ================ */
#section-services {
	position: relative;
	background-color: #333333;
	color: #e5e5e5;
}

.container.services {
	padding-top: 120px;
	padding-bottom: 72px;
}


.service {
	padding-bottom: 48px;
}

.service-icon {
	float: left;
	width: 30%;
}

.service-desc {
	display: table;
}

.service-desc h4 {
	margin-top: 0;
}

/* ================ Step-1,step-2,step-3 Sections ================ */
.container.step {
	padding-top: 120px;
	padding-bottom: 120px;
}


.section-step {
	background-color: #f9f9f9;
}

.step-even {
	background-color: #333;
	color: #e5e5e5;
}

.step-even .step-desc {
	float: right;
}

.step-even .step-img {
	float: right;
}

.step-video {
	overflow: hidden;
}

.step-no {
	width: 95px;
	height: 95px;
	border: 2px solid;
	border-radius: 50%;
}

.step-no .no-inner {
	font-size: 72px;
	line-height: 86px;
}

.step-details .step-title {
	margin-top: 0;
	margin-bottom: 24px;
}

.step-details .step-description {
	margin-bottom: 48px;
}

.step-details .sub-steps {
	margin-left: 30px;
}

.step-details .sub-steps li {
	margin-bottom: 24px;
}

.sub-steps .icon {
	float: left;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-left: 1px solid;
	line-height: 40px;
	padding: 0px 13px;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.sub-steps .sub-text {
	border: 1px solid;
	height: 40px;
	line-height: 40px;
	display: table;
	padding: 0 10px;
}


/* ================ Video Section ================ */
#section-video {
	position: relative;
}

.container.big-video {
	padding-top: 96px;
	padding-bottom: 120px;
}

.video-content iframe {
	border: 0 !important;
}





/* ================ ScreenShots Section ================ */
#solicitud {
	background-color: #333333;
	color: #e5e5e5;
}

.container.screenshots {
	padding-top: 120px;
	padding-bottom: 96px;
}

#portfolio-loader {
	display: none;
	position: relative;
	min-height: 700px;
}


.porfolio-container {
	position: relative;
}

.screenshot {
	margin-bottom: 32px;
	padding: 4px;
	border: 1px solid #444;
	border-radius: 4px;
}

.photo-box {
	position: relative;
	overflow: hidden;
}

.photo-box img {
	width: 100%;
	-moz-transition: all 1.2s linear;
	-o-transition: all 1.2s linear;
	-webkit-transition: all 1.2s linear;
	transition: all 1.2s linear
}

.photo-overlay {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 101%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in
}

.photo-overlay h4 {
	display: inline-block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 4px;
	margin-top: 30px;
}

.photo-zoom:before {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: "";
	border-style: none solid solid none;
	border-width: 0 130px 130px 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	position: absolute;
	-moz-transform: rotate(-90deg) translatex(-40px) translatey(40px);
	-ms-transform: rotate(-90deg) translatex(-40px) translatey(40px);
	-o-transform: rotate(-90deg) translatex(-40px) translatey(40px);
	-webkit-transform: rotate(-90deg) translatex(-40px) translatey(40px);
	transform: rotate(-90deg) translatex(-40px) translatey(40px);
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in
}

.photo-zoom a {
	color: #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	bottom: 20px;
	right: 20px;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-moz-transform: translatex(40px) translatey(40px);
	-ms-transform: translatex(40px) translatey(40px);
	-o-transform: translatex(40px) translatey(40px);
	-webkit-transform: translatex(40px) translatey(40px);
	transform: translatex(40px) translatey(40px)
}

.photo-zoom a:hover {
	color: #ccc;
}


/* ------------- ScreenShots hover effect style ------------- */

.screenshot:hover .photo-overlay {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1
}

.screenshot:hover .photo-box img {
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2)
}

.screenshot:hover .photo-zoom:before {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-transform: rotate(-90deg) translatex(0) translatey(0);
	-ms-transform: rotate(-90deg) translatex(0) translatey(0);
	-o-transform: rotate(-90deg) translatex(0) translatey(0);
	-webkit-transform: rotate(-90deg) translatex(0) translatey(0);
	transform: rotate(-90deg) translatex(0) translatey(0)
}

.screenshot:hover .photo-zoom a {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-transform: translatex(0) translatey(0);
	-ms-transform: translatex(0) translatey(0);
	-o-transform: translatex(0) translatey(0);
	-webkit-transform: translatex(0) translatey(0);
	transform: translatex(0) translatey(0)
}


/* ------------- Single Project ------------- */
#portfolio-load {
	display: none;
	position: relative;
	left: 105%;
	min-height: 400px;
}

.backToProject {}

.back-button {
	display: none;
	padding-top: 60px;
}

.project-details h5,
.project-info h5 {
	display: inline-block;
	margin-top: 0;
	font-weight: 600;
	border-bottom: 1px solid;
	padding-bottom: 10px;
}

.project-details .details-list {}

.project-details .details-list li {
	color: #e5e5e5;
	margin-bottom: 4px;
}

.project-details .details-list li i {
	margin-right: 7px;
}

.project-details .details-list li .strong {
	margin-right: 8px;
}


/* ================ Testimonials Section ================ */
#section-testimonials {
	color: #e5e5e5;
}

.testimonials-wrap {
	position: relative;
}

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

.testimonials .comment {
	font-size: 18px;
	margin-bottom: 48px;
}


.testimonial .happy-client {
	display: table;
	border-bottom: 1px solid;
	max-width: 280px;
	font-weight: 400;
	margin: 0 auto 5px;
}

.testimonial .client-info {
	font-size: 14px;
}

#bx-pager {
	margin-top: 48px;
}

.client-photos .photo-hold {
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 10px;
	margin-right: 20px;
	border: 1px solid;
	border-radius: 4px;
	box-sizing: border-box;
}


.client-photos .photo-bg {
	background: #000;
	display: block;
}


.client-photos img {
	opacity: .4;
}



.client-photos .active img {
	opacity: 1;
}


/* ================ Pricing Section ================ */
#calculadora {
	background: #f9f9f9;
	color: #666;
}

.container.pricing {
	padding-top: 120px;
	padding-bottom: 120px;
}

.pricing .section-title h3 {
	color: #666;
}

.single-pricing {
	position: relative;
	background: #FFFFFF;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
}

.pricing-head {
	overflow: hidden;
	padding: 24px 0;
}


.best-pricing .pricing-head {
	background: #333;
}

.best-pricing .price h3 {
	color: #e5e5e5;
}

.pricing-heading {
	margin-top: 0;
	margin-bottom: 0;
}

.single-pricing .price h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 700;
	line-height: 38px;
}

.single-pricing .price .dollar {
	font-size: 20px;
	vertical-align: super;
	font-weight: normal;
}

.single-pricing .price .month {
	font-size: 14px;
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-weight: 300;
	color: #959292;
}

.single-pricing .package-features {
	margin-bottom: 15px;
}

.single-pricing .package-features li:first-child {
	border-top: 1px solid #EEE;
}

.single-pricing .package-features li {
	margin: 0px;
	padding-bottom: 9px;
	padding-top: 9px;
	border-bottom: 1px solid #EEE;
	color: #666;
}

.single-pricing .package-features li span {
	margin-right: 8px;
}

.single-pricing .sign-up {
	padding-bottom: 15px;
}


/* ================ Subscribe Section ================ */
#section-subscribe {
	position: relative;
}

.container.subscribe {
	padding-top: 120px;
	padding-bottom: 120px;
}

.subscription-success,
.subscription-failed {
	display: none;
	color: #e5e5e5;
}

.subscribe h2 {
	margin-bottom: 30px;
}

#subscription-form {
	overflow: hidden;
	width: 100%;
}

#subscription-form .input-email {
	display: block;
	height: 55px;
	padding-left: 20px;
	width: 480px;
	color: #F4F4F4;
	background: transparent;
	border-radius: 4px;
	border: 1px solid #fff;
	margin: auto;
	margin-bottom: 14px;
}


/* ================ Download Section ================ */
#nosubicamos {
	background-color: #333;
}

.container.download {
	padding-top: 120px;
	padding-bottom: 120px;
}

.download h2 {
	margin-bottom: 30px;
}

.download-buttons {
	clear: both;
}

.download-buttons a {
	margin-top: 0;
}



/* ================ Contact Section ================ */
#section-contact {
	position: relative;
}

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

.contact h2 {
	margin-bottom: 30px;
}

.confirmation {
	display: none;
	clear: both;
	color: #e5e5e5;
}

.confirmation p span {
	margin-right: 8px;
}

.contact-form {
	color: #f9f9f9;
}

.contact-form .input-field {
	margin-bottom: 10px;
	margin-top: 10px;
	height: 50px;
}

.textarea-field,
.input-field {
	border: 1px solid #111;
}

.contact-form .form-item {
	width: 100%;
	padding: 5px 15px;
	border-color: #ffffff;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.contact-form .form-item::-webkit-input-placeholder {
	color: #f9f9f9;
}

.contact-form .form-item:-moz-placeholder {
	color: #f9f9f9;
}

.contact-form .form-item::-moz-placeholder {
	color: #f9f9f9;
}

.contact-form .form-item:-ms-input-placeholder {
	color: #f9f9f9;
}

.contact-form .subform {
	margin-top: 20px;
}

.contact-form .form-item:hover,
.contact-form .form-item:focus {
	border-color: #ccc;
	box-shadow: none;
}



/* ================ Footer Section ================ */
#section-footer {
	padding-top: 80px;
	padding-bottom: 80px;
	background: #333;
	color: #e5e5e5;
}

.footer-title {
	display: inline-block;
	margin-bottom: 40px;
	text-transform: none;
}

.social-icons ul li {
	display: inline-block;
}

.social-icons ul li a {
	margin-left: 10px;
	font-size: 28px;
	color: #9D9D9D;
	font-weight: normal;
	text-shadow: none;

	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	-o-transition: all .5s ease-in;
	transition: all .5s ease-in;
}

.copyright {
	padding-top: 15px;
}

/* FB popUp */

.fb-popup {
	display: none;
	position: fixed;
	max-width: 460px;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 25px;
	top: 150px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 100000;
}

.fb-close {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #B5B5B5;
	cursor: pointer;
}

.fb-popup h5 {
	text-align: center;
	text-transform: uppercase;
	color: #4A4949;
	font-size: 1em;
	font-weight: 700;
	margin-bottom: 30px;
}

/* Main logo sizing */
.main-logo {
	max-height: 50px;
	width: auto;
	border-radius: 10px;
}


/* Form background */
.contact-form-tramite {
	background: rgba(0, 0, 0, 0.6);
	padding: 20px;
	border-radius: 10px;
}

/* Video Modal */
.video-modal-overlay {
	display: block;
	/* Show by default via JS, but here we can start hidden if we want logic to show it. But user said on load. Let's rely on JS or make it block here. Actually better to have it hidden and JS shows it, or block and JS hides it. Let's make it block but the overlay background transparent so it doesnt block view, NO wait.
    The requirement: "video ... en una miniatura que este siempre como un modal o popup". 
    "Al cargar la pagina empiece a reproducirse en una miniatura que este siempre como un modal o popup".
    So it's not a full screen modal blocking everything. It's a "miniatura" (thumbnail/pip).
    The overlay shouldn't block clicks on the page if it's just a corner popup.
    */
	display: block;
	position: fixed;
	z-index: 20000;
	bottom: 20px;
	right: 20px;
	width: auto;
	height: auto;
	background: transparent;
	pointer-events: none;
	/* Let clicks pass through outside the content */
}

.video-modal-content {
	position: relative;
	width: 300px;
	background-color: #000;
	border: 1px solid #444;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
	/* Re-enable clicks on the video */
	border-radius: 8px;
}

.close-video-btn {
	color: #fff;
	position: absolute;
	top: -10px;
	right: -10px;
	background: #d9534f;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 22px;
	cursor: pointer;
	z-index: 20002;
	font-size: 18px;
	border: 2px solid #fff;
}

.close-video-btn:hover {
	background-color: #c9302c;
}

/* Floating WhatsApp Button */
.float-whatsapp {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 20px;
	left: 20px;
	background-color: #25d366;
	color: #FFF;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 10000;
	display: flex;
	/* Use flex to center the SVG */
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.float-whatsapp:hover {
	background-color: #128C7E;
	width: 65px;
	height: 65px;
	bottom: 17.5px;
	/* Adjust to keep center on hover expand */
	left: 17.5px;
}