/* 
   ------------------------------------------------------
					Responsive Styles
   ------------------------------------------------------
*/

@media (min-width: 1270px) {
  #intro_form, #intro_form_2 {
	  margin-left: 10%;
  }
  #logo_image{
	  width:60%
  }
  #header-right{
	  width:40%
  }
  #slogan {
    font-size: 18px !important;
    width: 40% !important;
  }
  .customNavigation {
	bottom: 70px;
  }
}

@media (max-width: 1270px) {
	#slogan p {
		left: 10%;
		width: 80%;
	}
}

@media (max-width: 1269px) {

	#intro-menu ul{
		width:100%;
	}
	.customNavigation {
		bottom: 100px;
	}
}

@media (min-width: 1270px) and (max-width: 1369px) {
	#slogan p {
		top: 20%;
	}
	#logo_image ul li {
		padding: 5px 2px 5px 2px;
		font-size: 15px;
	}
	
}

@media (min-width: 992px) and (max-width: 1269px) {

	/*------------------------------------------*/
	/*	  Intro Section
	/*------------------------------------------*/
	
	.intro_button {margin-top: 30px;}
	
	/*------------------------------------------*/
	/*	  Video Content Settings
	/*------------------------------------------*/ 

	.video-block {padding-bottom: 68.25%;}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {width: 100%;}
	#logo_image ul li p, #logo_image ul li span {
		font-size: 14px;
	}
	#logo_image ul li span {
		padding: 0 10px;
	}
	.top-telf {
		margin-top: 28px;
	}
	.top-telf h3 a {
		font-size: 30px;
	}.top-telf h4 a {
		font-size: 26px;
	}
	.top-telf h5 {
		font-size: 27px;
	}
	#imagen table {
		width: 85%;
		font-size: 10px;
		line-height: 24px;
	}
	#slogan p {
		line-height: 18px;
	}
	#header {
		padding-bottom: 18px;
		background-size: contain;
	}
	#header-logo-left {
		width: 100%;
	}
	#header-logo-right {
		display: none;
	}
	#logo_image ul {
		margin-top: 70px;
	}
	#logo_image ul li {
		min-height: 92px;
	}
}


@media only screen and (max-width: 991px){

	.titlebar h1 { font-size: 32px; }
	.titlebar p {font-size: 16px; }
	
	/*------------------------------------------*/
	/*	 Header
	/*------------------------------------------*/
	#header {
		background: none;
		padding-bottom: 0;
	}
	#intro .container {
		margin-bottom: 25px;
	}
	
	/*------------------------------------------*/
	/*	  Intro Section
	/*------------------------------------------*/
	
	#logo_image, #social_icons { padding: 0;}
	#intro_description h1 {font-size: 32px;}
	.intro_button {margin-top: 40px;}
	#header-right .ico-facebook, #header-right .ico-twitter, #header-right .ico-google-plus {
		background-color: #e8c95a;
		color: #000;
	}
	
	/*------------------------------------------*/
	/*	 About Sections
	/*------------------------------------------*/
	
	#about-2 {padding-top: 60px;}
	
	#about-1-text {padding-right: 15px; margin-bottom: 50px;}
	#about-2-text {padding-left: 15px;}
	
	/*------------------------------------------*/
	/*	 About-1 Image
	/*------------------------------------------*/

	#about-1-img img {padding: 0 60px;}
		
	/*------------------------------------------*/
	/*	 Video Holder
	/*------------------------------------------*/
	
	#video_holder {margin-bottom: 40px;}
	
	/*------------------------------------------*/
	/*	 Call to Action
	/*------------------------------------------*/
	
	#call-to-action h1 {font-size: 32px; padding: 0;}
	#call-to-action p {font-size: 18px; padding: 0;}
	
	/*------------------------------------------*/
	/*	 Footer Social Icons  
	/*------------------------------------------*/
	
	#footer_icons { margin:6px 0; }
	.footer-socials { display: inline-block; float: none; margin-bottom: 30px;}
	.footer-nav {
		padding: 0 20%;
		margin-bottom: 30px;
	}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 40px auto 5px; width: 55%; float: none !important;}
	#newsletter-paragraph {float: none !important;}
	#header-banner {
		width: 100%;
		float: none;
    	margin: auto;
	}
	#social_icons {
		width: 100%;
		float: none;
		text-align: center !important;
		margin-top: 35px;;
	}
	.top-telf {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	#logo {
		float: right;
		width: 90%;
	}
	#slogan {
		width: 90%;
	}
	
	#logo_image{
		padding-right:15px !important;
		min-height: 223px;
		background: none;
	}
	#header-right{
		padding-left:15px !important;
		background: none;
	}
	#logo_image ul {
		padding: 0 10px;
		margin-top:60px;
	}
	#slogan p {
		top: 30%;
	}
	#logo_image ul li {
    	width: 50%
	}
	#logo_image ul li:first-child, #logo_image ul li:nth-child(2) {
    	border-bottom: 1px solid #574a28;
	}
	#logo_image ul li:nth-child(3), #logo_image ul li:nth-child(4) {
    	margin-bottom: 20px;
	}
	#slogan p {
		line-height: 18px;
	}
	#info-producto, #intro-producto {
		width: 100%;
		float:none;
		padding-right: 0;
	}
	#intro-producto {
		margin-bottom: 50px;
	}
	#producto-1 {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#header-logo-left, #header-logo-right {
		width: 100%;
	}
	#intro .container{ 
		background: url(../img/logo-bg.png) left top repeat-x #0d1822; 
	}
}

@media only screen and (max-width: 767px){

	.container { overflow: hidden;}

	#intro_form, #logo_image, #about-1, #about-2, #features, #faq, #clients, #products { padding-left: 45px; padding-right: 45px;}

	#intro_form_2 { padding-left: 15px; padding-right: 15px; margin-bottom:40px;}
	
	
	/*------------------------------------------*/
	/*	 Header
	/*------------------------------------------*/
	#intro .container {
		margin-bottom: 0;
		overflow:visible !important;
	}

	/*------------------------------------------*/
	/*	  Intro Section
	/*------------------------------------------*/
	#intro {
		padding-bottom: 40px;
	}
	
	#intro_description  { margin-bottom: 40px;}
	#intro_description h1 {font-size: 32px;}
	.intro_button {margin-top: 20px;}
	
	.form_register, .form_register2 {width: 100%; }
	
	/*------------------------------------------*/
	/*	 Features
	/*------------------------------------------*/
	
	.feature-box {margin-bottom: 30px;}
	
	/*------------------------------------------*/
	/*	 Call to Action
	/*------------------------------------------*/
	
	#call-to-action p {padding: 0 4%;}
	
	/*------------------------------------------*/
	/*	 Footer
	/*------------------------------------------*/
	
	#footer_nav { text-align: center; margin-bottom: 30px;}
	.footer-nav {display: inline-block;}
	#footer_copy p {margin-left: 0;}
	.footer-nav li {padding: 5px 10px 5px;}
		
	/*------------------------------------------*/
	/*	 Footer Social Icons  
	/*------------------------------------------*/
	
	.footer-socials {float: none;}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 25px auto 5px; width: 50%;}
	
	/*------------------------------------------*/
	/*	 Custom
	/*------------------------------------------*/
	
	.top-telf{
		margin-top:45px;
	}
	#logo_image{
		margin-top:0px;
		width: 100%;
    	padding-right: 45px !important;
	}
	
	#intro-menu li{
		padding-right:20px;
		padding-left:20px;
		width:50%;
	}
	#header-banner {
		clear: both;
	}
	#slogan {
		width: 100%;
		max-width: 350px;
		float: none;
		margin: auto;
	}
	#logo_image ul {
		width: 100%;
		float: none;
		max-width: 310px;
		margin: 60px auto 15px auto;
	}
	#logo_image ul li{
		position:relative;
		float:left;
		top: auto !important;
    	left: auto !important;
	}
	.top-telf h3 a {
		font-size: 28px;
	}
	.top-telf h4 a {
		font-size: 24px;
	}
	.top-telf h5 {
		font-size: 25px;
	}
	#social_icons {
		margin-top: 45px;
	}
	.pc-form{
		display:none;
	}
	.mobile-form{
		display:block;
	}
	#producto-1 .titlebar {
		position: relative;
		padding: 50px 0 0 0;
	}
	#banners-right img {
		padding: 0 20px;
	}
	#logo {
		float: none;
		width: 100%;
		max-width:380px;
		margin:auto;
	}
	.customNavigation {
		bottom: 50px;
	}
	.productos {
		padding-right: 15px;
	}
	#header-right {
		clear: both;
		padding-top: 50px;
	}
}

@media (max-width: 480px) {

	#intro_description, #intro_form, #intro_form_2, #logo_image, #social_icons, #about-1, #about-2, #features, #faq, #clients, #products { padding-left: 20px; padding-right: 20px;}
	
	.intro_feature p {font-size: 14px; }	
	.form_register, .form_register2 {width: 90%; }
	
	#about-1-img img {padding: 0;}
	#about-2-img img {margin-top: 0;padding: 0;}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 25px auto 5px; width: 70%;}
	.top-telf h4 a{
		font-size:16px;
	}
	.top-telf h4 1{
		font-size:18px;
	}
	
	/*------------------------------------------*/
	/*	 Custom
	/*------------------------------------------*/
	#logo_image img{
		margin-top:10px;
	}
	.footer-nav {
		padding: 0 10%;
	}
	#banners-producto img {
		padding: 10px;
		max-width: 100%;
	}
	#imagen table {
    	width: 93%;
	}
	#intro_form, #intro_form_2{
		padding:0px;
	}
	.customNavigation {
		bottom: 70px;
	}
	#imagen {
		width: 100%;
		padding-right: 0;
	}
	#texto {
		width: 100%;
	}
}


@media (max-width: 320px) {

	.titlebar h1 { font-size: 28px; }
	
	#intro_form, #intro_form_2, #logo_image, #social_icons, #about-1, #about-2, #features, #faq, #clients, #products { padding-left: 5px; padding-right: 5px;}
	
	/*------------------------------------------*/
	/*	  Header
	/*------------------------------------------*/
	
	#logo_image {width: 100%; text-align: center; margin-bottom: 15px; float: none !important;}
	#logo_image img { padding: 0;}
	#social_icons {width: 100%; text-align: center; float: none !important;}
	
	.customNavigation {display: none;}
	
	/*------------------------------------------*/
	/*	  Intro Section
	/*------------------------------------------*/
	
	#intro_description { padding-left: 15px; padding-right: 15px;text-align: center;}
	#intro_description h1 {text-align: center;}
	
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 25px auto 5px; width: 100%;}

}