@font-face {
    font-family: "FlamaBook";
    font-weight: normal;
    font-style : normal;
           src : url("../fonts/Flama-Book.eot");
           src : url("../fonts/Flama-Book.eot") format("embedded-opentype"),
                 url("../fonts/Flama-Book.woff") format("woff");
}

@font-face {
    font-family: "FlamaBookItalic";
    font-weight: normal;
    font-style : normal;
           src : url("../fonts/Flama-BookItalic.eot");
           src : url("../fonts/Flama-BookItalic.eot") format("embedded-opentype"),
                 url("../fonts/Flama-BookItalic.woff") format("woff");
}

@font-face {
    font-family: "FlamaCondensedBook";
    font-weight: normal;
    font-style : normal;
           src : url("../fonts/FlamaCondensed-Book.eot");
           src : url("../fonts/FlamaCondensed-Book.eot") format("embedded-opentype"),
                 url("../fonts/FlamaCondensed-Book.woff") format("woff");
}

@font-face {
  font-family: 'Icomoon';
  src: url("../fonts/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

body {
	font-family: 'FlamaBook' !important;	
}

header {
	position: relative;
	height: 40px;
	width: 100%;
	background-color: red;
	display: none;
	transition: all 750ms ease 0s;
}

#div-header {
	position: relative;
    height: 100%;
    width: 100%;
    box-shadow: 0px 0px 5px 2px #b1b1b1;
}

#logo-div-header {
	position: relative;
	width: 120px; 
	left: 60px;
}

.sticked {
	position: fixed;
	height: 60px;
	top: 0vh;
    background-color: #eee;
	box-shadow: 0 0 0 2px #efefef !important;     
    opacity: 1;
	display: block;
	z-index: 99;
	transition: all 750ms ease 0s;
}

/* Logo */
#logo-div {
	position: fixed; 
/*	width: 200px; 
	height: 200px; 
*/	
	width: 320px; 
	height: 320px; 
	opacity: 0.5;
	left: 40px; 
	margin: 0px;
	padding: 0px;
	/* border: 1px solid #e1e1e1;   */
    z-index: 90;
    display: none;
}

#logo-div-back {
	position: absolute;
	width: 100%; 
	height: 100%;
    /* background-color: #eee; 
    opacity: 0.7; */
}

#logo-div-img {
	position: absolute;
	width: 90%; 
	left: 10%;
	top: 0;
}

#logo-div-img figure,
#logo-div-header figure{
	position: relative; 
	width: 100%;
}

#logo-div-img figure img,
#logo-div-header figure img {
	position: relative; 
	width: 100%; 
}

.sticking-hidden {
	display: none;
}

/* Banner */

.banner {
    min-height: 660px;
	padding-top: 200px;
}

.banner h1,
.banner h2,
.banner p {
	color: #fff !important;
	text-shadow: 0 0 11px #000;
	text-transform: none !important;
	text-align: center;
}

.banner h1 {
	font-family: 'FlamaCondensedBook' !important;		
    font-size: 48px;
    letter-spacing: 1.2px;
    -webkit-animation: 1.4s showTitle 1;
}

@-webkit-keyframes showTitle {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-200%);
	}
	10% {
		opacity: 0.2;
	}
	70% {
		opacity: 0.4;
	}
}

@-webkit-keyframes showSubtitle {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-150%);
	}
	40% {
		opacity: 0.2;
	}
	70% {
		opacity: 0.4;
	}
}


.banner h2 {
	font-family: 'FlamaBookItalic' !important;	
	font-size: 22px;
	margin-top: 10px;
	margin-bottom: 0;
	-webkit-animation: 1s showSubtitle 1;
}

.banner p {
	font-family: 'FlamaBook' !important;		
    font-size: 22px;
    margin-top: 40px;
    padding-left: 20%;
    padding-right: 20%;
    -webkit-animation: 1s showSubtitle 1;
}

section {
	padding-top: 10px;
}

.box-header {
	background: linear-gradient(to right, rgb(6,93,150), rgb(10,115,114), rgb(36,172,149)) !important;
	color: white !important;
	padding-top: 10px;
	padding-bottom: 15px;
}

h2.box-header {
    font-size: 34px;
}

.section-header {
	margin-bottom: 0px; 
}

.description {
    margin-bottom: 30px;
}

.feature-items {
	padding-left: 10%;
	padding-right: 5%;
}

.feature-header p {
	font-size: 34px;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 10px;
	color: #333;
}

.feature-details h2 {
	margin-top: 0px !important;
	font-size: 23px !important;
	font-weight: 300 !important;
}

.features-img-background {
	position: absolute;
	width: 60%; 
	z-index: -1;
	margin: 0px;
	padding: 0px;
	left: 35%; 
}

.features-img-background img{
	position: relative;
	width: 100%;
	margin: 0px;
	padding:  0px;
	top: -50px;
	opacity: 0.5;
}

.feature .icon{
	border-color: rgb(6,93,150) !important;
}

.feature:hover .icon{
	border-color: white !important;
	background-color: rgb(6,93,150) !important;
}

.feature:hover .icon .glyphicon{
	color: white !important;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.glyphicon {
	color: rgb(6,93,150) !important;
	opacity: 0.8;
}

.glyphicon:hover {
	opacity: 1;
}

.facts {
	position: relative;
	top: -10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #eee;
}

.facts .box-header {
	position: relative;
	/* top: 5px; */
	margin-bottom: 0px;
}

.facts-items {
	margin-top: 20px; 
}

.counter-section .number {
    font-size: 32px;
}

.counter-item {
    font-size: 16px;
}

.benefits {
	padding-left: 15px;
	padding-right: 15px;
}

.benefit h3{
	font-family: 'FlamaBook' !important;
	letter-spacing: 1px;
}

.form-group{
	margin-bottom: 5px !important;
}

.signup-box-body .form-control {
	margin-bottom: 5px;
}

.signup-box-body div:nth-child(4){
	margin-bottom: 25px;
}

.signup-box-body textarea{
	height: auto !important;
	margin-bottom: 25px !important;
}

.signup-box-headling{
	background: linear-gradient(to bottom left, rgb(6,93,150), rgb(10,115,114), rgb(36,172,149)) !important;
}

.signup-box-headling p:nth-child(1){
	color: #fff !important;
	margin-top: 20px !important;
	margin-bottom: 10px !important;
    font-family: 'FlamaCondensedBook' !important; 
    font-size: 42px;
    font-weight: 400;
    line-height: 1.1;
}

.signup-box-headling p:nth-child(2){
	color: #fff !important;
	margin-top: 0px !important;
	margin-bottom: 20px !important;
    font-family: 'FlamaBookItalic' !important; 
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
}

.signup-box .form-control:focus {
    box-shadow: 0 0 0 2px rgb(6,93,150) !important;
}

.signup-button{
	line-height: 12px;
	background-color: rgb(6,93,150) !important;
}

.signup-button:hover {
	background-color: rgb(6,80,120) !important;	
}

.form-required {
	background-color: #f4cece;
	color: red !important;
}

/* Contact Form */

#showContactForm {
	position: fixed;
	z-index: 99;
	top: 87vh;
	left: 84vw;
	opacity: 0.6;
	cursor: pointer;
}

#showContactForm:hover {
	opacity: 1;
}

#showContactForm i {
	color: rgb(6,93,150);
}

#contact-form
{
	position: fixed;
	top: 50px;
	right: 100px;
	width: 400px;
	height: 450px;
	box-shadow: 2px 2px 4px gray; 
	background-color: #eee; /* white; */
	padding-bottom: 0px;
	z-index: 999;
	display: none; 
}

#contact-form .close-div{
	position: absolute;
	border: 1px solid white; 
	top: 12px;
	right: 25px;
	width: 25px;
	height: 25px;
	/* background-color: rgb(6,93,150) !important; */
	/* opacity: 0.8; */
	border-radius: 50%;
	cursor: pointer;
	transition-duration: 0.3s;
	z-index: 1001;
}

#contact-form .close-div:hover{
	/* background: rgba(4,142,205,1); */
}

#contact-form .close-div:before{
	position: absolute;
	font-family: 'Glyphicons Halflings';
    content: '\e014';	
    left: 4px;
    top: -1px;
    color: #e1e1e1; 
}

#contact-form .close-div:hover:before{
    color: #ffffff; 
}

/*
.contact-form-mobile
{
	position: fixed;
	top: 50px;
	right: 100px;
	width: 400px;
	height: 450px;
	box-shadow: 2px 2px 4px gray; 
	background-color: white;
	padding-bottom: 0px;
	z-index: 999;
	display: none; 
}
*/

.arrow-down {
    border-color: rgb(6,93,150) !important;
    border-left: 20px solid transparent !important;
    border-right: 20px solid transparent !important;
    border-top: 20px solid;
}

/* WHATSAPP */

#whapp {
	position: fixed;
	z-index: 99;
	top: 87vh;
	left: 93vw;
	opacity: 0.6;
}

#whapp:hover {
	opacity: 1;
}

#whapp i {
	color: green;
}

/* Subscribirse */

.subscribe {
	margin-top: 40px;
}

.subscribe p:nth-child(1) {
	font-size: 38px !important;
	font-weight: 400 !important;
	margin-top: 0px !important;
	margin-bottom: 10px !important;
	color: #333 !important;
	line-height: 1.1;
}

.subscribe p:nth-child(2) {
	font-family: 'FlamaBookItalic';
}

.subscribe .form-control{
	border-color: rgb(6,93,150) !important;
}

.subscribe .form-control:focus {
    box-shadow: 0 0 8px rgb(6,93,150) !important;
    border-color: rgb(6,93,150) !important;
}

.wbutton {
	background-color: rgb(6,93,150) !important;	
}

.wbutton:hover {
	background-color: rgb(6,80,120) !important;	
}

/* Footer */

.footer-bottom {
    font-size: 12px !important;
}

@media (max-width: 768px) {

	.banner h1 {
	    font-size: 36px;
	}

	.banner h2 {
		font-size: 18px;
	}

	.banner p {
	    font-size: 18px;
	    padding-left: 10%;
	    padding-right: 10%;
	}

	.feature-header p {
	    font-size: 32px;
	}

	.description {
	    font-size: 16px;
	}

	.feature-details h2 {
	    font-size: 18px !important;
	}

	.feature-details p {
	    font-size: 14px;
	}	

	.features-img-background {
		display: none;
	}
	.features-img-background img{
		top: -600px;
	}

	.benefit h3 {
	    font-size: 18px;
	}	

	.benefit p {
		font-size: 14px;
	}

	.counter-section .number {
	    font-size: 26px;
	}

	.counter-item {
	    font-size: 14px;
	}

	.subscribe {
	    padding-left: 10%;
	    padding-right: 10%;
	}

	.subscribe p {
	    font-size: 14px;
	}

	.subscribe p:nth-child(1) {
	    font-size: 26px !important;
	}

	.subscribe .wbutton {
	    font-size: 16px;
	}

	.signup-box {
	    margin-top: 0px !important;
	}

	.form-control {	
		font-size: 14px;	
	}

	#contact-form
	{
		position: fixed;
		top: 10vh;
		width: 400px;
		left: calc(50% - 200px);
		height: 400px;
	}

	.signup-box-headling p:nth-child(1) {
	    margin-top: 15px !important;
	    margin-bottom: 10px !important;
	    font-size: 36px;
	}
	
	.signup-box-headling p:nth-child(2) {
	    margin-bottom: 10px !important;
	    font-size: 16px;
	}

	.signup-box-body {
	    padding: 20px;
	}

	.signup-button {
    	font-size: 16px;
    }

	.icon-lg {
	    font-size: 36px;
	}

	.footer-contact {
	    font-size: 16px;
	}

	#whapp {
		top: 85vh;
		left: 90vw;
	}
	
	#showContactForm {
		top: 85vh;
		left: 78vw;
	}
}

@media (max-width: 480px) {
	#logo-div {
	    left: 20px;
		width: 140px; 
		height: 140px; 
	}

	#logo-div-img {
		top: -5px;
	}

	#logo-div-header {
	    left: 20px;
	}	

	.banner {
	    min-height: 660px;
		padding-top: 140px;
	}

	.banner h1 {
	    padding-left: 5%;
	    padding-right: 5%;
	}

	.banner h2, 
	.banner p {
	    margin-top: 30px;
	    padding-left: 8%;
	    padding-right: 8%;
	}

	.banner h2{
		margin-top: 20px;
	}

	.feature-items {
	    padding-left: 5%;
	}

	#contact-form {
		top: 5vh;
		width: 90%;
		left: 5%;
	}

	.contact-form-mobile {
		position: fixed !important;
		top: 0vh !important;
		left: 0vw !important;
		width: 100vw !important;
		height: 100vh !important;
		overflow-y: scroll !important;
	}

	.contact-form-mobile .signup-box-headling p:nth-child(1) {
	    margin-top: 10px !important;
	    margin-bottom: 5px !important;
	}
	
	.signup-box-headling p:nth-child(2) {
	    margin-bottom: 5px !important;
	}

	.contact-form-mobile .signup-box .form-control {
	    padding: 4px 10px !important;
	}

	.contact-form-mobile .signup-button {
		position: relative;
		font-size: 14px !important;
		top: -18px !important;
		height: 40px !important;	
	}

	#whapp {
		top: 76vh;
		left: 83vw;
	}
	
	#showContactForm {
		top: 84vh;
		left: 82vw;
	}

	#whapp .fa-4x,
	#showContactForm .fa-4x {
	    font-size: 3em;
	}
}

@media (max-width: 320px) {
	#logo-div {
	    left: 20px;
		width: 120px; 
		height: 120px; 
	}
	.banner {
		padding-top: 120px;
	}

	.banner h1 {
	    font-size: 32px;
	}

	.banner h2, 
	.banner p {
		padding-left: 5%;
		padding-right: 5%;
	    font-size: 16px;
	}
}

#page-footer {
    padding: 10px 0px;
}

.footer-contact {
	margin-bottom: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
    color: #aaa;
}

#logo-footer {
	width: 80px;
}

.footer-center ul {
	list-style: none;

}

.footer-center ul li {
	padding: 0px;
	padding-bottom: 5px;
}

.footer-center ul li i{
	display: inline-block;
	margin-right: 10px;
	color:rgb(6,93,150);
}

.footer-center ul li p{
	display: inline-block;
	font-size: 14px;
}

.footer-right {
	text-align: right;
}

.footer-right ul {
	list-style: none;
	display: inline-block
}

.footer-right ul li {
	display: inline-block;
	padding: 10px;
	margin: 0px;
	margin-right: 10px;
}

.footer-right ul li i{
	color:rgb(6,93,150);
	opacity: 0.8;
}

.footer-right ul li i:hover{
	opacity: 1;
}