@import url("fonts.css");
@import url("font-awesome/css/font-awesome.min.css");


/* =================================== */
/*	Basic Style 
/* =================================== */

body {
  /*  background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    line-height: 21px;
	font-size: 13px;
    color: #6a737b;*/
}

ol, ul {
  /*  margin: 0;
    padding: 0;
    list-style: none;*/
}

figure, p {
   /* margin: 0;*/
}

a {
 /*   color: #fff;
	
    -webkit-transition: all .3s ease-in 0s;
       -moz-transition: all .3s ease-in 0s;
        -ms-transition: all .3s ease-in 0s;
         -o-transition: all .3s ease-in 0s;
            transition: all .3s ease-in 0s;*/
}

iframe {
    /*border: 0;*/
}

a, a:focus, a:hover {
  /*  text-decoration: none;
    outline: 0;*/
}

a:focus, a:hover {
  /*  color: #6CB670;*/
}

h1, h2, h3,
h4, h5, h6 {
	/*font-weight: normal;
	margin: 0;*/
}

.clear:before,
.clear:after {
 /*  content: " ";
    display: table;*/
}
 
.clear:after {
  /* clear: both;*/
}
 
.clear {
   /**zoom: 1;*/
}

span.color {
	/*color: #0feb9e;*/
}

body > section,
.footer {
	/*padding: 70px 0;*/
}

.sec-title {}

.sec-title h2 {
 /* color: #0eb493;
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;*/
}

.sec-sub-title {
	/*margin: 35px 0 45px;*/
}

.sec-sub-title p {
	/*font-weight: 600;
	line-height: 24px;
	font-size: 18px;
	color: #5b646e;*/
}

.devider {
 /* margin-top: 30px;*/
}

.devider i {
  /*color: #cccccc;*/
}

.devider:before,
.devider:after {
  /*content: "______________________";
  color: #e6e8ea;
  position: relative;
  bottom: 6px;*/
}

.devider:before {
 /* right: 10px;*/
}

.devider:after {
 /* left: 10px;*/
}

.mb50 {
	/*margin-bottom: 50px;*/
}

#preloader {
 /* background-color: #fff;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 1100;*/
}

#preloader > img {
 /* left: 47%;
  position: absolute;
  top: 48%;*/
}







/*=========================================
	Our Works
==========================================*/

.work-filter {
 /* margin-bottom: 35px;*/
/* margin-left:78px;*/
}

.work-filter ul li {
    display: inline-block;
}

@media screen and (max-width:414px) {
.work-filter ul li { /* para que cuando los botoncitos se ponen en 2 líneas, no se toquen*/
padding-bottom: 10px;
}
}

.work-filter ul li a {
/*font: 13px "raleway-heavy", sans-serif;*/
font: 13px "raleway-bold", sans-serif;
  color: #484848; /*#3B3B3B;*//*#292929;*/ /*#062033;*/
  background-color: #DBDBDB;
  display: block;
  /*font-size: 14px;*/
  font-weight: 700;
  padding: 7px 14px; /*10px 18px;*/ /*5px 17px;*/
  border-radius: 4px; /*6px;*/
  /*text-transform: capitalize;*/
}

.work-filter ul li a:hover,
.work-filter ul li a.active {
  background-color: #139FFF; /*#0eb493;*/
  border-radius: 4px; /*6px;*/
  color: #fff;
  padding: 7px 14px; /*10px 18px;*/ /*5px 17px;*/
}

.mix {
    display: none;
}

.work-item {
    float: left;
   width: 25%; /* esto AL PRINCIPIO lo saqué porque sino al aplicarlo sobre los otros estilos, me pone la imagen muy chica. después, al cambiar donde puse el <figure> en el archivo html, y sacarle el ancho de "bgrid-fourth .bgrid " en base_02.css, usando el 25% funciona!*/
/* width:50%;*/
 /* width:auto;*/
    position: relative;
}


@media screen and (max-width:1480px) {
.work-item {
  /* width: 25% !important; *//* para que en 1280 o más se vean las fotos */
}
/*.work-item > img {
 display: block;
  height: auto;
  max-width: 10% !important;
}*/
}

@media screen and (max-width:1024px) {
.work-item {
   width: 33.33333%; /* para que en 1024 se vean 4 columnas de imagenes de portfolio en vez de 4 */
}
}

@media screen and (max-width:768px) {
.work-item {
   width: 50%; /* para que en 1024 se vean 4 columnas de imagenes de portfolio en vez de 4 */
}
}





.work-item > img {
 /* display: block;
  height: auto;
  max-width: 100%;*/
}

.overlay {
	/*background-color: rgba(14,180,147,.9);
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: all 450ms ease-out 0s;	
	   -moz-transition: all 450ms ease-out 0s;
		 -o-transition: all 450ms ease-out 0s;
		    transition: all 450ms ease-out 0s;
		  
	-webkit-transform: rotateY(180deg) scale(0.5,0.5);
	   -moz-transform: rotateY(180deg) scale(0.5,0.5);
		-ms-transform: rotateY(180deg) scale(0.5,0.5);
		 -o-transform: rotateY(180deg) scale(0.5,0.5);
			transform: rotateY(180deg) scale(0.5,0.5);*/
}

.work-item:hover .overlay {
	/*opacity: 1;
	filter: alpha(opacity=100);
	
	-webkit-transform: rotateY(0deg) scale(1,1);
	   -moz-transform: rotateY(0deg) scale(1,1);
		-ms-transform: rotateY(0deg) scale(1,1);
		 -o-transform: rotateY(0deg) scale(1,1);
		    transform: rotateY(0deg) scale(1,1);*/
}

.work-item .overlay a {
/*  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20%;
  padding: 7px 10px;*/
}

.work-item .overlay a:hover {
 /* color: #fff;*/
}

.work-item .overlay h4 {
  /*font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin: 25px 0 8px;*/
}

.work-item .overlay p {
/*  font-size: 14px;
  line-height: 24px;*/
}