@import 'https://fonts.googleapis.com/css?family=Amatic+SC';
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed';

/* NARANJA: #ee7624*/

/*.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
    background-color: black;
  

}*/

/*STICKY FOOTER*/

html, body {height: 100%;}


#wrap {
     min-height: 100%;     
    height: auto !important;     
    height: 100%; 
    margin: 0 auto -70px auto;
}

#main {
    overflow:auto;
    height: 100%;
	}  /* must be same height as the footer */

#footer {    
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
} 


/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

a, a:hover, a:focus {
    color:#ee7624;
}



/****GOUP*****/

.go-top {
	position: fixed;
	bottom: 5em;
	right: 2em;
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	padding: 1em;
	display: none;
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
/****FinGOUP*****/



.black{
    background-color: black;
    height: 34px;
    padding-bottom: 5px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    text-align: right;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    color: white;
}
.black-footer{
    background-color: black;
    height: 70px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    text-align: center;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-item: center;
    
    color: white;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


.navbar{
    border-bottom: 4px solid #ee7624;

}

.logo-full{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.logo{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    
}

.dr{
    font-family: 'Amatic SC', cursive;
    color: #ee7624;
    font-size: 2em;
    margin-bottom: 5px;
}
.pp{
    font-family: 'Roboto Condensed', sans-serif;
    color: black;
    font-size: 0.8em;
    
}

.drbig{
    font-family: 'Amatic SC', cursive;
    color: white;
    font-size: 6em;
    margin-bottom: 5px;
    
}
.ppw{
    font-family: 'Roboto Condensed', sans-serif;
    color: black;
    font-size: 2em;
}


.tito{
    font-family: 'Roboto Condensed', sans-serif;
    color: #ee7624;
    font-size: 2em;
    text-align: center;
    margin-top: 5%;
}

.tito2{
    font-family: 'Roboto Condensed', sans-serif;
    color: #ee7624;
    font-size: 1.7em;
    text-align: center;
    margin-top: 5%;
}

.tito-left{
    font-family: 'Roboto Condensed', sans-serif;
    color: #ee7624;
    font-size: 1.4em;
    text-align: left;
    margin-top: 5%;
}

.titw{
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
    font-size: 2em;
    text-align: center;
    margin-top: 5%;
}

.titw-left{
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
    font-size: 1.4em;
    text-align: left;
    margin-top: 1%;
}

.about{
    font-family: 'Roboto Condensed', sans-serif;
    color: #ee7624;
    font-size: 1.3em;
    text-align: left;
    margin-top: 3%;
}

.idiomas{
    font-family: 'Roboto Condensed', sans-serif;
    color: #ee7624;
    font-size: 1.3em;
    text-align: left;
    margin-top: 1%;
}

.experiencia{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 3%;
}

.ulabout{
    margin-left: 6%;
    line-height: 25px;
}

.icons{
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.ico{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 4%;
}

.parrafo{
    font-family: sans-serif;
    font-size: 1em;
    line-height: 2em;
    text-align: justify;
}
.ultimost{
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
    font-size: 1em;
    line-height: 2em;
    text-align: left;
}

.ultimost2{
    font-family: 'Roboto Condensed', sans-serif;
    color: black;
    font-size: 1em;
    line-height: 2em;
    text-align: left;
}

.ultimosp{
    font-family: sans-serif;
    color: white;
    font-size: 1em;
    line-height: 2em;
    text-align: left;
}

/***********FONDO HOME********/

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
}

.fondo{
    background-image: url("../img/fondo-naranja.jpg");
    
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: cover;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 5%;
    
}

#overlay {
    background-color: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0.08;
}

#scene {
    padding: 0;
    margin: 0;
    width: 115%;
    height: 120vh;
    overflow: hidden;
    top: -5%;
    left: -5%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.main {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    border-bottom: 4px solid #ee7624;
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 101;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-align: center;
}

.wrapper img {
    width: 350px;
    height: auto;
}

.layer {
    width: 110%;
    height: 120vh;
    overflow: hidden;
}

.layer2 {
    background-image: url("../img/fondo-fr2.png");
    background-size: contain;
    background-position: center;
    position: absolute;
    width: 80%;
    height: 80%;
    align-content: center;
    left: 6%;
    top: 5%;
    
}

.layer1 {
    background-image: url("../img/fondo-naranja.jpg");
    background-position: center;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -5%;
    top: -5%;
}

@media (max-width:1200px) and (min-width:700px) {
    .wrapper img {
        width: 220px;
        height: auto;
    }
}

@media (max-width:700px) {
    .layer2 {
        background-size: cover;
        background-position: center;
        width: 40%;
        height: 77vh;
        left: 25%;
        top: 10%;
       
    }
    .layer1 {
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 115%;
        left: -5%;
        top: -1%;
    }
    .wrapper img {
        width: 180px;
        height: auto;
    }
}

/*fin fondo home*/

.bg-orange{
    background-color: #ee7624;
    margin-top: 3%;
}
.bg-orange2{
    background-color: #ee7624;
    margin-top: 6%;
}



/******MEDIA QUERIES********/




/* For mobile phones: */
@media only screen and (max-width: 376px) {
    
    .bg-orange2{
    background-color: #ee7624;
    margin-top: 30%;
}
    .fondo{
    background-image: url("../img/fondo-naranja.jpg");
    
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: cover;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 15%;
    
}
}
/******1ªFILA*****/
@media screen and  (min-width: 377px) and (max-width: 992px) {
 .row1{
    margin-top: 21%;
}
    
    .tito2{
        font-size: 1.7em;
    } 
    
    .cco{
        width: 30%;
        margin: 0 auto;
    }
    
    .mini{
        
        padding: 0px 5%;
    
    }
    .minitv{
        width: 100%;
        height: 300px;
    }

    .footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
    background-color: black;
  }
    
    .bg-orange2{
    background-color: #ee7624;
    margin-top: 16%;
}
       .fondo{
   
    padding-top: 25%;
    
}
}



/* For desktop: */
@media only screen and (min-width: 993px) {
    
    .row1{
    margin-top: 15%;
    }
    
    .cco{
        width: 70%; 
        margin: 0 auto;
    }
    
    mini{
        width:100%;
        height: 100%;
    }
    
  .footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
    background-color: black;
  }
    
}



/************  SOBRE MI - GALLERY  **************/

@media screen and (max-width: 767px) {
  .container > header {
    text-align: center;
  }
  p.codrops-demos {
    position: relative;
    top: auto;
    left: auto;
  }
}


/*---Common Styles---*/

.ff-container {
  max-width: 100%;
  margin: 10px auto 30px auto;
}

.ff-container label {
  font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
  width: 16%;
  height: 30px;
  cursor: pointer;
  color: black;
  line-height: 33px;
  font-size: 1em;
    font-weight: lighter;

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=0);
  float: left;
  
}





/*Gives the 'checked' raido button it's 'pressed' stle*/

.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
.ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4,
.ff-container input.ff-selector-type-5:checked ~ label.ff-label-type-5 {

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad', GradientType=0);
  color: white;
  
  font-weight: bold;
  border-bottom: 1px dotted white;

}


/*Hides the raido <input> buttons, since we have labels to do the job*/

.ff-container input {
  display: none;
}


/*Styles for the item list...*/

.ff-items {
  position: relative;
  margin: 0px auto;
  padding-top: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}


/* style for the anchor and span elements*/

.ff-items a {
  display: block;
  position: relative;
  padding: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 4px;
  width: 140px;
  height: 140px;
  
}

.ff-items a span {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  color: black;
  font-weight: bold;
  padding: 5px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 120px;
  height: 0px;
  overflow: hidden;
  opacity: 0;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.ff-items a:hover span {
  height: 80px;
  opacity: 1;
}

.ff-items li img {
  display: block;
  width: 130px;
  height: 130px;
}

.ff-items li {
  margin: 0px;
  float: left;
  width: 188px;
  height: 148px;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
}

.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4,
.ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5 {
  opacity: 1;
}

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4),
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5) {
  opacity: 0.1;
}

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span,
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4) span,
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5) span {
  display: none;
}


/*------END Common Styles-------*/


/* OTRAS BOBINAS */

.otrasbobinas{
    padding: 0 5%;
    margin-bottom: 2%;
}

.hr-orange{
    height:2px; 
    background-color:#ee7624;
}


/* TRABAJOS */

.jobs{
    color: #ee7624;
}

.jobs-1{
    margin: 3% 0;
    padding: 0 5%;
}

.tit{
   font-family: 'Roboto Condensed', sans-serif;
    color: dimgray;
    text-align: left;
    margin-top: 5%; 
}

.jobs-text{
    font-family: 'Roboto Condensed', sans-serif;
    color: dimgray;
    font-size: 0.95em;
    line-height: 1.5em;
    text-align: left;
}

/*FOOTER*/



/* FILTER */

.filtr-item {
    padding: 1rem;
}
.item-desc {
    background-color: rgba(0,0,0,0.5);
    color: white;
    position: absolute;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    z-index: 1;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
}

/* Filter controls */


/* Shuffle and sort controls */
select {
    padding: 1rem 1rem;
    text-transform: uppercase;
}
.sortandshuffle .shuffle-btn {
    background-color: #dec800;
}
.sortandshuffle .sort-btn {
    background-color: #de0000;
}
.sortandshuffle .sort-btn.active {
    background-color: #9d0000;
}

/* Search control */
.search-row {
    margin-left: 2.5rem;
}
.filtr-search {
    padding: 0.5rem;
    text-transform: uppercase;
}