﻿/*Plantilla desarrollada por A. Lacayo. Uso reservado para proyectos del cotepecos con variantes entre ellos.*/
/*Template developed by A. Lacayo. Reserved use for cotepecos projects with variants among them.*/
/*Estilo Por elemento*/
/*Style By Element*/
* {
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-family: 'PT Sans Narrow', sans-serif;
}
hr{
	border:none;
	border-top: 1.5px solid rgb(200, 200, 200);
	margin: .5px auto;
	display: block;
}
ul li{
	height: auto;
}
a{
	display: block;
	color:inherit;
}
nav a {
	display: block;
	padding: 10px;
	font-size: 1.2em;
	text-align: center;
	color: inherit;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

p {
	font-size: 21px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Ubuntu', sans-serif;
	display: block;
	margin: 5px auto;
}

hr {
	margin: 5px auto;
}
/*Clases*/
/*Classes*/
.center-text {
	text-align: center;
}

.justified-text {
	text-align: justify;
}

.left-text {
	text-align: left;
}

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

.marg-sm {
	margin: 8px auto;
}

.marg-md {
	margin: 16px auto;
}

.marg-lg {
	margin: 32px auto;
}

.marg-xlg {
	margin: 64px auto !important;
}
.padd-0{
	padding:0px !important;
}
.padd-sm {
	padding: 8px;
}

.padd-md {
	padding: 16px;
}

.padd-lg {
	padding: 32px;
}

.padd-xlg {
	padding: 64px 32px;
}

.padd-xxlg {
	padding: 122px 32px;
}

.rounded {
	border-radius: 16px;
}

.curved {
	border-radius: 8px;
}

.Video-Item{
	cursor: pointer;
}

.shadowed, .hover-shadow:hover {
	box-shadow: 0 3px 10px 0 rgba(0,0,0,0.6);
}

.btn {
	text-align: center;
	font-size: 1.5em;
	position: relative;
	margin: 10px auto;
	cursor: pointer;
	border: none !important;
}

.btn.square {
	border-radius: 0;
}

.btn.round-bordered {
	border-radius: 8px;
	border: solid 2px #ccc;
}

.btn.round {
	border-radius: 8px;
}

.input {
	text-align: left;
	font-size: 1.5em;
	position: relative;
	margin: 10px auto;
	background: transparent;
}

.input.square {
	border: solid 1px #ccc;
	border-radius: 0;
	width: 90%;
}

.input.round {
	border: solid 2px #ccc;
	border-radius: 8px;
	width: 90%;
}

.input.line-static {
	border: none;
	border-bottom: solid 2px #ccc;
	width: 90%;
}

.input.line-dynamic {
	transition: width 0.8s ease-in-out;
	border: none;
	border-bottom: solid 2px #ccc;
	width: 60%;
}

.input.line-static:focus {
	transition: ease-in-out border-bottom 0.8s;
	border-bottom: solid 2px #aaf;
}

.input.line-dynamic:focus {
	transition: width 0.8s ease-in-out;
	border-bottom: solid 2px #aaf;
	width: 90%;
}

.fixed-background {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background-size: cover;
	background-position: center;
	background-image: url('../img/inicio.jpg');
}

.blur{
	filter: blur(4px);
}

.right-bar {
	border-right: solid 3px rgb(200, 200, 200);
}

.left-bar {
	border-left: solid 3px rgb(200, 200, 200);
}

.top-bar {
	border-top: solid 3px rgb(200, 200, 200);
}
.bottom-bar {
	border-bottom: solid 3px rgb(200, 200, 200);
}

.ImgContained {
	width: 100%;
}
.ImgModal 
{
	position: fixed;
	width: 150%;
	height: auto; 
}

.Img720 {
	height: 720px;
}

.Img900 {
	height: 900px;
}

.Img1080 {
	height: 1080px;
}

.NavActive {
	border-bottom: 5px solid rgba(255, 255, 255, .7);
}

.PostDate{
	position: absolute;
	top: 2%;
	right: 5%;
	color: rgb(200, 200, 200);
	font-size: 1em;
}

.ImgCoverText {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	color: white;
	text-align: center;
	z-index: 1;
	background: rgba(0, 0, 0, .5);
}

.ImgCoverText h1, .ImgCoverText h2 {
	top: 45%;
}

.ImgCoverText p {
	top: 60%
}
.Table{
	width: 100%;
	border-collapse: collapse;
}
.Table th{
	color: #fff;
	border: #fff solid 1px;
	background: rgb(102, 178, 255, 1);
	vertical-align: center;
	text-align: center;
}
.Table tr td{
	background: #fff;
	color: #000;
	vertical-align: center;
	text-align: center;
	border: #ccc solid 1px;
}
.Table tr:nth-child(odd) td{
	background: #eee
}
.Mid-height {
	height: 40vh !important;
}
/*Botón para subir al tope en celulares*/
/*Button Top on cellphones*/
#GoTop {
	position: fixed;
	bottom: 5%;
	right: 5%;
	opacity: 0.8;
	font-size: 2em;
	z-index: 2;
}

#GoTop a {
	color: #666;
}
/*Scroll Parallax*/
.Parallax-Right, .Parallax-Left {
	overflow: hidden;
}
/*Galería con Slider*/
/*SliderGallery*/
#SlideGallery {
	padding: 0;
}

.SlideGal-Row{
	position: relative;
	float: left;
	overflow: hidden;
	width: 100%;
	padding: 32px 4%;
}
.SlideGal-Row-Content{
	overflow: visible;
	width: 100%;
}
.SlideGal-Item {
	position: relative;
	float: left;
	display: inline-block;
	padding: 0 2px;
	text-align: center;
}

.SlideGal-Item img {
	width: 100%;
	margin: 0 auto;
	display: inline-block;
	height: auto;
	cursor: pointer;
}

.SlideGal-Next, .SlideGal-Prev{
	position: absolute;
	top: 32px;
	bottom: 32px;
	font-size: 2.5em;
	background-color: rgba(50, 50, 50, .3);
	cursor: pointer;
	color: rgb(200, 200, 200);
	z-index: 3;
	transition: opacity .2s ease-in;
	opacity: 0;
}

.SlideGal-Prev{
	left : 0;
}

.SlideGal-Next{
	right: 0;
}

.SlideGal-Row:hover .SlideGal-Prev, .SlideGal-Row:hover .SlideGal-Next{
	opacity: 1;
}
.SlideGal-Prev span, .SlideGal-Next span{
	opacity: 1;
	position: relative;
	top: 45%;
	margin: 0 8px;
}
/*Barra de Navegación*/
/*Navigation Bar*/
#NavBar {
	position: sticky;
	top: 0;
	z-index: 4;
}
#SideBar{
	position: sticky;
	top: 10%;
	height: auto;
}
#MiniNavBar{
	position: fixed;
	top: 0;
	right: -100%;
	padding: 32px 16px;
	width: 70%;
	transition: .5s right ease-in-out;
	height: 100%;
	z-index: 7;
}

#MiniNavBar a{
	display: block;
	text-align: left;
	font-size: 1.2em;
	padding: 10px;
	color: inherit;
}

#MiniNavBar ul li{
	padding:  2px 3px;
	border-bottom: 2px solid rgb(200, 200, 200);
}
#MiniNavBar ul li:last-child{
	border: none;
}
#MiniNavBarBtn{
	padding: 10px 5px;
	cursor: pointer;
}
#MiniNavBarBtn span{
	font-size: 1.8em;
	text-align: center;
	display: block;
	vertical-align: center;
}
/*Modal*/
#Modal {
	position: fixed;
	top: 0;
	background: rgba(0,0,0,.8);
	width: 100%;
	height: 100%;
	z-index: 5;
}

#ModalContent {
	position: fixed;
	top: 10%;
	left: 33%;
	z-index: 6;
	margin: auto;
	width: 34%;
	padding: 0;
	background: transparent;
}

#ModalClose {
	background: transparent;
	color: #fff;
	font-weight: bold;
	padding: 0 10px;
	position: absolute;
	right: 5%;
	top: 5%;
	font-size: 1.8em;
	text-align: center;
	display: block;
	vertical-align: center;
	cursor: pointer;
}
/*Slider*/
.SlideMirror {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: .5s opacity ease-in-out;
}

.Slide {
	position: relative;
	margin: auto;
	width: 100%;
	overflow: hidden;
	z-index: 2;
}

.Slide ul {
	position: relative;
	left: 0%;
	margin: auto;
	height: auto;
	clear: both;
	display: table;
	transition: 1s left ease-in-out;
}

.Slide ul li {
	position: relative;
	float: left;
}

.Slide ul li img {
	width: 100%;
}

.Circles {
	position: absolute;
	width: 100%;
	margin: auto;
	text-align: center;
	bottom: 5%;
	z-index: 1;
}

.Circles li {
	display: inline-block;
	color: #fff;
	margin: 0px 5px;
	cursor: pointer;
	opacity: .5;
}

.Circles li:first-child {
	opacity: 1;
}

.Arrows {
	position: absolute;
	font-size: 2em;
	cursor: pointer;
	color: #fff;
	z-index: 3;
}

.SldLeft {
	left: 2%;
	bottom: 45%;
}

.SldRight {
	right: 2%;
	bottom: 45%;
}

.ImgText {
	position: absolute;
	bottom: 20%;
	width: 100%;
	color: white;
	text-align: center;
	z-index: 1;
}

.ImgText {
	background: rgba(0, 0, 0, .5);
	padding: 32px 0;
}
/*Columnas Responsivas*/
/*Responsive Columns*/
.container {
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
}

.row {
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
	clear: both;
	display: table;
}

.col-full, .col-half, .col-third, .col-quarter, .col-two-third, .col-three-quarter {
	width: 100%;
}

[class *="col-"] {
	float: left;
	height: auto;
	position: relative;
}

@media (max-width: 552px) {
	.col-sm-0 {
		display: none;
	}

	.col-sm-1 {
		width: 8.333333%;
	}

	.col-sm-2 {
		width: 16.666666%;
	}

	.col-sm-3 {
		width: 24.999999%;
	}

	.col-sm-4 {
		width: 33.333333%;
	}

	.col-sm-5 {
		width: 41.666666%;
	}

	.col-sm-6 {
		width: 49.999999%;
	}

	.col-sm-7 {
		width: 58.333333%;
	}

	.col-sm-8 {
		width: 66.666666%;
	}

	.col-sm-9 {
		width: 74.999999%;
	}

	.col-sm-10 {
		width: 83.333333%;
	}

	.col-sm-11 {
		width: 91.666666%;
	}

	.col-sm-12 {
		width: 100%;
	}

	.ImgText {
		display: none;
	}

	.Arrows {
		font-size: 1.5em;
	}

	#NavBar {
		position: sticky;
	}

	.NavActive{
		border:none;
	}

	#ModalContent {
		width: 70%;
		left: 15%;
		top: 30%;
		padding: 0px;
	}

	.SlideGal-Next, .SlideGal-Prev{
		opacity: 1;
	}

	.Img900 {
		height: 360px;
	}
	.Gal-Item{
		width: 50vw;
	}
	.padd-xlg {
		padding: 64px 16px;
	}

	.padd-xxlg {
		padding: 122px 16px;
	}
}

@media (min-width: 552px) {
	.col-md-0 {
		display: none;
	}

	.col-md-1 {
		width: 8.333333%;
	}

	.col-md-2 {
		width: 16.666666%;
	}

	.col-md-3, .col-quarter {
		width: 24.999999%;
	}

	.col-md-4, .col-third {
		width: 33.333333%;
	}

	.col-md-5 {
		width: 41.666666%;
	}

	.col-md-6, .col-half {
		width: 49.999999%;
	}

	.col-md-7 {
		width: 58.333333%;
	}

	.col-md-8, .col-two-third {
		width: 66.666666%;
	}

	.col-md-9, .col-three-quarter {
		width: 74.999999%;
	}

	.col-md-10 {
		width: 83.333333%;
	}

	.col-md-11 {
		width: 91.666666%;
	}

	.col-md-12 {
		width: 99.999999%;
	}

	#NavBar a{
		padding: 3px;
		font-size: .9em;
	}

	#GoTop {
		display: none;
		;
	}

	.Img900 {
		height: 480px;
	}
}

@media (min-width: 552px) and (max-width: 931px) {
	.col-mdx-0 {
		display: none;
	}

	.col-mdx-1 {
		width: 8.333333%;
	}

	.col-mdx-2 {
		width: 16.666666%;
	}

	.col-mdx-3, .col-quarter {
		width: 24.999999%;
	}

	.col-mdx-4, .col-third {
		width: 33.333333%;
	}

	.col-mdx-5 {
		width: 41.666666%;
	}

	.col-mdx-6, .col-half {
		width: 49.999999%;
	}

	.col-mdx-7 {
		width: 58.333333%;
	}

	.col-mdx-8, .col-two-third {
		width: 66.666666%;
	}

	.col-mdx-9, .col-three-quarter {
		width: 74.999999%;
	}

	.col-mdx-10 {
		width: 83.333333%;
	}

	.col-mdx-11 {
		width: 91.666666%;
	}

	.col-mdx-12 {
		width: 99.999999%;
	}

	.full-mdx-height {
		height: 100vh
	}

	.ImgText h2{
		font-size: 24px
	}

	.ImgText{
		bottom: 20%;
		padding: 8px 0;
	}

	.SlideGal-Next, .SlideGal-Prev{
		opacity: 1;
	}

	#SideBar{
		height: 80vh;
		overflow-y: scroll;
		overflow-x: hidden;
	}
}

@media (min-width: 932px) {
	.col-lg-0 {
		display: none;
	}

	.col-lg-1 {
		width: 8.333333%;
	}

	.col-lg-2 {
		width: 16.666666%;
	}

	.col-lg-3 {
		width: 24.999999%;
	}

	.col-lg-4 {
		width: 33.333333%;
	}

	.col-lg-5 {
		width: 41.666666%;
	}

	.col-lg-6 {
		width: 49.999999%;
	}

	.col-lg-7 {
		width: 58.333333%;
	}

	.col-lg-8 {
		width: 66.666666%;
	}

	.col-lg-9 {
		width: 74.999999%;
	}

	.col-lg-10 {
		width: 83.333333%;
	}

	.col-lg-11 {
		width: 91.666666%;
	}

	.col-lg-12 {
		width: 99.999999%;
	}

	#NavBar {
		position: sticky;
	}
	#NavBar a{
		padding: 10px;
		font-size: 1.2em;
	}

	.Img900 {
		height: 900px;
	}

	#SideBar a{
		padding: 4px 8px;
		font-size: 1.3em;
	}
}
/*Colores*/
/*Colors*/
.strong-red {
	background-color: rgba(244, 35, 35, 1.00);
}

.strong-red-nn {
	background-color: rgba(244, 35, 35, .90);
}

.strong-red-sv {
	background-color: rgba(244, 35, 35, .70);
}

.strong-blue {
	background-color: rgba(35, 35, 244, 1.00);
}

.strong-blue-nn {
	background-color: rgba(35, 35, 244, .90);
}

.strong-blue-sv {
	background-color: rgba(35, 35, 244, .70);
}

.strong-green {
	background-color: rgba(35, 244, 35, 1.00);
}

.strong-green-nn {
	background-color: rgba(35, 244, 35, .90);
}

.strong-green-sv {
	background-color: rgba(35, 244, 35, .70);
}

.link-blue{
	background-color: rgb(0, 114, 198);
}

.link-blue-nn{
	background-color: rgba(0, 114, 198, .9);
}

.link-blue-sv{
	background-color: rgba(0, 114, 198, .7);
}

.light-blue {
	background-color: rgba(102, 178, 255, 1) !important;
}

.light-blue-nn {
	background-color: rgba(102, 178, 255, .9);
}

.light-blue-sv {
	background-color: rgba(102, 178, 255, .7);
}

.pink {
	background-color: rgba(255, 153, 153, 1);
}

.pink-nn {
	background-color: rgba(255, 153, 153, .9);
}

.pink-sv {
	background-color: rgba(255, 153, 153, .7);
}

.grey150 {
	background-color: rgba(150, 150, 150, 1.00);
}

.grey150-nn {
	background-color: rgba(150, 150, 150, .90);
}

.grey130 {
	background-color: rgba(130, 130, 130, 1.00);
}

.grey130-nn {
	background-color: rgba(130, 130, 130, .90);
}

.grey130-sv {
	background-color: rgba(130, 130, 130, .70);
}

.grey150-sv {
	background-color: rgba(150, 150, 150, .70);
}

.grey170 {
	background-color: rgba(170, 170, 170, 1.00);
}

.grey170-nn {
	background-color: rgba(170, 170, 170, .90);
}

.grey170-sv {
	background-color: rgba(170, 170, 170, .70);
}

.grey190 {
	background-color: rgba(190, 190, 190, 1.00) !important;
}

.grey190-nn {
	background-color: rgba(190, 190, 190, .90);
}

.grey190-sv {
	background-color: rgba(190, 190, 190, .70);
}

.white {
	background-color: rgba(255, 255, 255, 1.00);
}

.white-nn {
	background-color: rgba(255, 255, 255, .90);
}

.white-sv {
	background-color: rgba(255, 255, 255, .70);
}

.black {
	background: rgba(0,0,0,1);
}

.black-nn {
	background: rgba(0,0,0,.9);
}

.black-sv {
	background: rgba(0,0,0,.7);
}

.black-white, .white-black:hover, .hover-black-white:hover {
	background: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}

.black-white-nn, .white-black-nn:hover, .hover-black-white-nn:hover {
	background: rgba(0, 0, 0, .9);
	color: rgb(255, 255, 255);
}

.black-white-sv, .white-black-sv:hover, .hover-black-white-sv:hover {
	background: rgba(0, 0, 0, .7);
	color: rgb(255, 255, 255);
}

.white-black, .black-white:hover, .hover-white-black:hover {
	background: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}

.white-black-nn, .black-white:hover, .hover-white-black-nn:hover {
	background: rgb(255, 255, 255, .9);
	color: rgba(0, 0, 0);
}

.white-black-sv, .black-white:hover, .hover-white-black-sv:hover {
	background: rgb(255, 255, 255, .7);
	color: rgba(0, 0, 0);
}
.endlessriver {
	background: #43cea2; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
	background: linear-gradient(to right, #185a9d, #43cea2); 
}
.endlessriver-nn {
	background: rgba(67, 206, 162, .9);
	background: -webkit-linear-gradient(to right, rgba(24, 90, 157, .9), rgba(67, 206, 162, .9)); 
	background: linear-gradient(to right, rgba(24, 90, 157, .9), rgba(67, 206, 162, .9));
}
.endlessriver-sv {
	background: rgba(67, 206, 162, .7);
	background: -webkit-linear-gradient(to right, rgba(24, 90, 157, .7), rgba(67, 206, 162, .7));
	background: linear-gradient(to right, rgba(24, 90, 157, .7), rgba(67, 206, 162, .7));
}
.txt-black {
	color: #000
}

.txt-white {
	color: #fff
}

.txt-light-blue {
	color: rgb(102, 178, 255);
}

.txt-pink {
	color: rgb(255, 153, 153);
}

.txt-lemon-green {
	color: rgb(0, 204, 102);
}

.txt-grey150 {
	color: rgb(150, 150, 150);
}

.txt-strong-red {
	color: rgb(255, 35, 35);
}

.txt-strong-green {
	color: rgb(35, 255, 35);
}

.txt-strong-blue {
	color: rgb(35, 35, 255);
}

.txt-link-blue{
	color: 	rgb(0, 114, 198) !important;
}

.transparent{
	background-color: transparent;
}