html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;	
}
.font {
	font-family:"AvantGarde-Book Th" !important;
}
.navbar-top {
	z-index: 100;
}
.hidden {
	opacity: 0;
	transition: opacity 1.5s ease;
}
.visible {
	opacity: 1;
}
.col-project {
	height: 0;
	padding-bottom: 100%;
}
.col-project:before {
  content: ""; /* Crea un pseudo-elemento */
  display: block; /* Permite establecer medidas en el pseudo-elemento */
  position: absolute; /* Posicionamiento absoluto */
  top: 0; /* Posicionamiento en la parte superior */
  left: 0; /* Posicionamiento en la parte izquierda */
  width: 100%; /* Ancho al 100% del contenedor */
  height: 100%; /* Altura al 100% del contenedor */
}
.col-project-4 {
	height: 0;
	padding-bottom: 100%;
}
.col-project-4:before {
  content: ""; /* Crea un pseudo-elemento */
  display: block; /* Permite establecer medidas en el pseudo-elemento */
  position: absolute; /* Posicionamiento absoluto */
  top: 0; /* Posicionamiento en la parte superior */
  left: 0; /* Posicionamiento en la parte izquierda */
  width: 100%; /* Ancho al 100% del contenedor */
  height: 100%; /* Altura al 100% del contenedor */
}
.col-project-8 {
	padding-bottom: 50%;
}
.col-project-6 {
	padding-bottom: 66%;
}
.col-project-12 {
	padding-bottom: 33%;
}
@media (max-width: 575px){
	.col-project, .col-project-4, .col-project-6, .col-project-8, .col-project-12{
		padding-bottom: 50%;
	}
}
.project-container {
	width: 100%;
	overflow: hidden;
}
.project {
	 background-position: center center;
	 background-repeat: no-repeat;
	 background-size: cover;
	 -ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.project:hover {
	filter:brightness(0.4);
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.project-01 {
	background-image: url(../img/video/001.jpg);
}
.project-02 {
	background-image: url(../img/video/002.jpg);
}
.project-03 {
	background-image: url(../img/video/003.jpg);
}
.project-04 {
	background-image: url(../img/video/004.jpg);
}
.project-05 {
	background-image: url(../img/video/005.jpg);
}
.project-06 {
	background-image: url(../img/video/006.jpg);
}
.project-07 {
	background-image: url(../img/video/007.jpg);
}
.project-08 {
	background-image: url(../img/video/008.jpg);
}
.project-09 {
	background-image: url(../img/video/009.jpg);
}
.project-10 {
	background-image: url(../img/video/010.jpg);
}
.project-11 {
	background-image: url(../img/video/011.jpg);
}
.project-12 {
	background-image: url(../img/video/012.jpg);
}
.project-13 {
	background-image: url(../img/video/013.jpg);
}
.project-14 {
	background-image: url(../img/video/014.jpg);
}
.project-15 {
	background-image: url(../img/video/015.jpg);
}
.project-16 {
	background-image: url(../img/video/016.jpg);
}
.project-17 {
	background-image: url(../img/video/017.jpg);
}
.project-18 {
	background-image: url(../img/video/018.jpg);
}
.project-19 {
	background-image: url(../img/video/019.jpg);
}
.project-20 {
	background-image: url(../img/video/020.jpg);
	background-position: center left;
	 background-repeat: no-repeat;
	 background-size: cover;
	 -ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.project-20:hover {
	filter:brightness(0.4);
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.project-21 {
	background-image: url(../img/video/021.jpg);
}
.project-22 {
	background-image: url(../img/video/022.jpg);
}
.project-23 {
	background-image: url(../img/video/023.jpg);
}
.project-24 {
	background-image: url(../img/video/024.jpg);
}
@media (max-width: 575px){
	.col-xs-6 {
		flex: 0 0 auto;
		width: 50%;
	}
}