/* Responsive styles
================================================== */

/* Large Devices, Wide Screens */
@media (min-width : 1200px) {
	.dropdown i{
		display: none;
	}


}


/* Medium Devices, Desktops */
@media (min-width : 992px) {

	.flexslider .slides img,
	.ts-flex-slider .flexSlideshow{
		height: 750px;
	}

	.dropdown i{
		display: none;
	}

	/* Navigation */
	.navbar-nav>li>a{
		padding: 21px 24px;
	}

	/* Reglas específicas para planes de metodología del Dojo */
	.planhe {
		height: 330px;
	}

	.plan.featuredYELL:before {
		content: "";
		position: absolute;
		left: 276px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #ebc026;
	}

	.plan.featuredYELL:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 13px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
	}

	.plan.featuredORA:before {
		content: "";
		position: absolute;
		top: 0px;
		left: 276px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #c6713b;
	}

	.plan.featuredORA:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 13px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
	}

	.plan.featuredBLUED:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 13px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
	}

	.plan.featuredBLUED:hover p {
		color: #fff !important;
	}

	.plan.featuredBLUED:checked p {
		color: #fff !important;
	}

	.plan.featured:before {
		content: "";
		position: absolute;
		top: 0px;
		left: 276px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #39a2ba;
	}

	.plan.featured:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 13px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
	}

}

/* Reglas para pantallas medianas específicas del Dojo */
@media (min-width : 992px) and (max-width: 1199px) {
	.hero-text {
		padding-top: 60px;
	}
	
	.planhe {
		height: 390px;
	}

	.plan.featuredYELL:before {
		content: "";
		position: absolute;
		left: 226px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #ebc026;
	}

	.plan.featuredORA:before {
		content: "";
		position: absolute;
		top: 0px;
		left: 226px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #c6713b;
	}

	.plan.featured:before {
		content: "";
		position: absolute;
		top: 0px;
		left: 226px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #39a2ba;
	}
}

/* Small Devices, Tablets */
@media (min-width : 768px) and (max-width: 991px) {

	/* Reglas específicas del Dojo para tablets */
	.planhe {
		height: 290px;
	}

	.landing_facts .facts-num span {
		font-size: 48px;
	}

	.landing_facts .facts i {
		font-size: 28px;
	}

	.hero-text {
		padding-top: 80px;
	}

	/* Common */
	.parallax{
		padding: 60px 0;
	}

	/* Logo */
	.navbar-brand{
		width: auto;
	}

	/* Navigation */
	ul.navbar-nav > li > a {
		padding: 21px 10px;
	}

	/* Slideshow */

	#main-slide .slider-content h2{
		font-size: 36px;
	}
	#main-slide .slider-content h3{
		font-size: 22px;
		margin: 20px 0;
	}

	.slider.btn{
		padding: 5px 25px;
		margin-top: 5px;
		font-size: 16px;
	}

	#main-slide .carousel-indicators {
		bottom: 20px;
	}

	/* Portfolio */
	figure.effect-oscar figcaption{
		padding: 1.5em;
	}
	figure.effect-oscar figcaption::before{
		top: 15px;
		right: 15px;
		bottom: 15px;
		left: 15px;
	}
	figure.effect-oscar h3{
		margin-top: 0;
		font-size: 16px;
	}

	/* Featured tab */
	.featured-tab .tab-pane img{
		width: 45%;
	}

	.featured-tab .tab-pane i.big {
		font-size: 150px;
	}

	.featured-tab .tab-pane,
	.landing-tab .tab-pane{
		text-align: left;
	}

	/* Team */

	.team{
		padding-bottom: 50px;
	}

	/* Pricing */

	.plan{
		margin-bottom: 60px;
	}

	/* Testimonial */

	.testimonial-content{
		padding: 0 30px;
	}

	/* Recent post */
	.recent-post{
		padding-bottom: 40px;
	}

	/* Back to top */

	#back-to-top.affix {
		bottom: 35px;
	}

	/*-- Landing ---*/

	.hero-text{
		width: 95%;
	}
	.hero-title{
		font-size: 36px;
	}
	.hero-buttons a.btn {
		padding: 10px 20px;
	}

	.app-gallery figure.effect-oscar a{
		margin-top: 105px;
	}

	/* Blog single */
	.blog-post{
		padding-bottom: 40px;
	}

	/* Reglas específicas para planes de metodología en tablets */
	.plan.featuredYELL:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 358px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #ebc026;
	}

	.plan.featuredORA:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 358px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #c6713b;
	}

	.plan.featured:after {
		content: "";
		position: absolute;
		top: 0px;
		left: 358px;
		width: 0;
		height: 59px;
		border-width: 29px;
		border-style: solid;
		border-color: transparent transparent transparent #39a2ba;
	}

}

/* Small Devices Potrait */
@media (max-width : 767px){

	/* Reglas específicas del Dojo para móviles */
	.hero-buttons a.btn.solid {
		margin-left: 0px;
	}

	.hmargleft0 {
		margin-left: 0px !important;
	}

	.contenttop {
		top: 25% !important;
	}

	/* Common */
	.parallax{
		padding: 60px 0;
	}
	.style-switch-button{
		display: none;
	}

	.heading{
		text-align: center;
	}

	.heading .title-icon{
		float: none !important;
		margin: 0 0 20px;
		display: inline-block;
	}

	h2.title{
		font-size: 28px;
		border-left: 0;
	}

	.title-desc{
		line-height: normal;
		padding: 6px 55px 0;
	}

	.btn.btn-primary{
		padding: 8px 22px;
	}

	h2{
		font-size: 28px;
	}

	/* Logo */
	.navbar-brand{
		width: auto;
	}

	/* Navigation */
	ul.navbar-nav > li > a {
		padding: 21px 10px;
	}

	.navbar-collapse{
		background: #333333;
	}

	.navbar-collapse ul.navbar-nav > li > a{
		color: #fff;
	}

	.navbar-collapse ul.navbar-nav > li.active > a,
	.navbar-collapse ul.navbar-nav > li:hover > a{
		color: #49a2e7;
	}

	/* Slideshow */

	#main-slide .slider-content{
		margin-top: -35px;
	}

	#main-slide .slider-content h2{
		font-size: 20px;
		line-height: normal;
	}
	#main-slide .slider-content h3{
		font-size: 14px;
		line-height: normal;
		margin: 0;
	}

	.slider.btn{
		display: none;
	}

	#main-slide .carousel-control{
		display: none;
	}

	#main-slide .carousel-indicators {
		bottom: 0;
	}


	/* About */

	.about.angle:before{
		position: relative;
	}

	/* Portfolio */

	.isotope-nav ul li a{
		padding: 5px;
		margin-bottom: 10px;
		display: inline-block;
	}

	figure.effect-oscar h3{
		margin-top: 25%;
	}

	#isotope .isotope-item .grid{
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Featured tab */
	.featured-tab{
		padding: 0 30px;
	}

	.featured-tab .tab-pane i.big {
		font-size: 150px;
	}

	.featured-tab .tab-pane,
	.landing-tab .tab-pane{
		text-align: left;
		padding-left: 0;
		padding-top: 30px;
	}

	/* Facts */

	.facts{
		padding-bottom: 20px;
	}

	.facts-num span{
		font-size: 48px;
		margin-top: 20px;
	}

	.facts i {
		font-size: 32px;
	}

	/* Team */

	.team{
		padding-bottom: 50px;
	}

	/* Pricing */

	.plan{
		margin-bottom: 60px;
	}

	/* Testimonial */

	.testimonial-content{
		padding: 0 30px;
	}

	/* Recent post */
	.recent-post{
		padding-bottom: 40px;
	}

	/* Back to top */

	#back-to-top.affix {
		bottom: 20px;
	}

	/*-- Landing ---*/

	.hero-section{
		padding-top: 90px;
	}

	.hero-text{
		width: 100%;
		padding-right: 0;		
	}
	.hero-title{
		font-size: 36px;
	}
	.hero-buttons a.btn {
		padding: 10px 20px;
	}

	.app-gallery figure.effect-oscar a{
		margin-top: 105px;
	}

	.hero-images img{
		display: none;
	}

	.landing_facts .facts-num span {
		font-size: 48px;
		margin-top: 20px;
	}

	.landing_facts .facts i{
		font-size: 30px;
	}

	/* Blog single */
	.blog-post{
		padding-bottom: 40px;
	}


}

/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {

	/* Logo */
	.navbar-brand{
		width: 145px !important;
		background-size: contain !important;
		height: 50px;
		line-height: 50px;
		padding: 2px 5px 0;
	}

	/* Slideshow */

	#main-slide .slides img{
		height: 230px;
	}

	#main-slide .item img{
		height: 250px;
	}

	/* Reglas específicas del Dojo para pantallas extra pequeñas */
	.titletabladisp {
		display: none;
	}

}

/* Custom, iPhone Retina */ 
@media (min-width : 320px) and (max-width: 479px)  {

	.hero-text{		
		padding-top: 1%;
	}

}

/* ==================================================
   Estilos responsivos específicos para dojo.html
   ================================================== */

/* Pantallas medianas y pequeñas */
@media (max-width : 991px) {
	#dojo .pricing,
	#dojo .features,
	#dojo .contact {
		padding: 25px 0 !important;
	}
	
	#dojo .hero-section {
		padding: 40px 0;
	}
	
	#dojo .heading {
		margin-bottom: 15px;
	}
	
	#dojo .container {
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

/* Pantallas pequeñas */
@media (max-width : 767px) {
	#dojo .pricing,
	#dojo .features,
	#dojo .contact {
		padding: 20px 0 !important;
	}
	
	#dojo .hero-section {
		padding: 30px 0;
	}
	
	#dojo .heading {
		margin-bottom: 10px;
	}
	
	#dojo .heading h1,
	#dojo .heading h2 {
		font-size: 1.8em;
		margin-bottom: 8px;
	}
	
	#dojo .heading .title-desc {
		font-size: 0.9em;
		margin-top: 3px;
	}
	
	#dojo .features-content p {
		margin-bottom: 12px;
	}
	
	#dojo .accordion-item {
		margin-bottom: 12px;
	}
	
	#dojo .form-group {
		margin-bottom: 15px;
	}
	
	#dojo .planhe {
		margin-bottom: 15px;
		padding: 15px 10px;
	}
}

/* Pantallas extra pequeñas */
@media (max-width : 479px) {
	#dojo .pricing,
	#dojo .features,
	#dojo .contact {
		padding: 15px 0 !important;
	}
	
	#dojo .hero-section {
		padding: 25px 0;
	}
	
	#dojo .heading h1,
	#dojo .heading h2 {
		font-size: 1.5em;
		margin-bottom: 5px;
	}
	
	#dojo .heading .title-desc {
		font-size: 0.8em;
	}
	
	#dojo .features-content p {
		margin-bottom: 10px;
		font-size: 0.9em;
	}
	
	#dojo .accordion-item {
		margin-bottom: 10px;
	}
	
	#dojo .form-group {
		margin-bottom: 12px;
	}
	
	#dojo .planhe {
		margin-bottom: 12px;
		padding: 12px 8px;
	}
	
	#dojo .container {
		padding-top: 3px;
		padding-bottom: 3px;
	}
}

/* ==================================================
   FOOTER MODERNO RESPONSIVE
   ================================================== */

/* Pantallas grandes - Footer moderno */
@media (min-width: 1200px) {
	.footer-modern .footer-columns {
		justify-content: space-between;
		max-width: 1140px;
		margin: 0 auto;
	}
	
	.footer-modern .col-md-4 {
		padding: 0 30px;
	}
}

/* Pantallas medianas - Footer moderno */
@media (min-width: 992px) and (max-width: 1199px) {
	.footer-modern .footer-columns {
		justify-content: space-around;
		max-width: 960px;
		margin: 0 auto;
	}
	
	.footer-modern .col-md-4 {
		padding: 0 20px;
	}
}

/* Tablets - Footer moderno */
@media (min-width: 768px) and (max-width: 991px) {
	.footer-modern .footer-columns {
		justify-content: space-around;
		max-width: 720px;
		margin: 0 auto;
	}
	
	.footer-modern .col-md-4 {
		padding: 0 15px;
		min-width: 200px;
	}
}

/* Móviles - Footer moderno */
@media (max-width: 767px) {
	.footer-modern .footer-columns {
		flex-direction: column;
		align-items: center;
	}
	
	.footer-modern .col-md-4 {
		width: 100%;
		max-width: 300px;
		padding: 0 10px;
		margin-bottom: 25px;
	}
	
	.footer-modern .footer-logo img {
		max-width: 120px;
	}
	
	.footer-modern .features-content h3 {
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.footer-modern .features-content p {
		font-size: 11px;
	}
}

/* Pantallas extra pequeñas - Footer moderno */
@media (max-width: 479px) {
	.footer-modern {
		padding: 20px 0 !important;
	}
	
	.footer-modern .col-md-4 {
		max-width: 280px;
		padding: 0 8px;
		margin-bottom: 20px;
	}
	
	.footer-modern .footer-logo img {
		max-width: 100px;
	}
	
	.footer-modern .features-content h3 {
		font-size: 12px;
	}
	
	.footer-modern .features-content p {
		font-size: 10px;
	}
}