/*
 * Theme Name: LC3_2019
 * Theme URI:
 * Author: Ana Amelia Patiño Esteo
 * Author URI:
 * Description:
 * License: MIT
 * License URI:
 * Tags:
 * Text Domain: lc32019
 */
/**Fonts**/
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700&subset=latin-ext');

/**General**/

* {
  font-family: 'Roboto Slab',serif;
  margin:0
}

html {
  margin-top:0!important
}

body{
  background: white
}

.row{
  width:100%
}

.col-12 {
  width:100%
}

.grid-container{
  display:grid
}
h1 {
  font-size:400%;
  margin-bottom:2%;
  width:100%
}

h2 {
  padding: 3% 0;
  font-size: 300%
}

h3 {
  padding:3% 0;
  font-size:170%
}

h4 {
  margin-top:3%;
  font-size:160%
}

p {
  padding:1% 0;
  font-size:160%
}

a {
  text-decoration: none;
  color: #ed620e;
  transition:color ease 0.3s
}

a:hover{
  color:#ffbc1e
}


/**MENU**/
.menuinicio{
  text-align:center;
  font-size: 130%;
  margin-top:calc(2% + 32px);
  position:absolute;
  z-index: 1;
  list-style-type:none;
  white-space:nowrap;
  max-width:100vw;
  padding:0
}

.menuinicio li{
  display:inline
}

.menuinicio li:after{
  content: ' | ';
  color:white
}

.menuinicio li:last-child:after{
  content:''
}

.menuinicio a {
  color:white;
}

.menufuera{
  margin-top:0;
  padding:0
}

.menufuera a{
  color:black
}

.menuinicio a:hover{
  color:#ffbc1e
}

.hamburguesa{
  width:20px;
  display:none;
  mix-blend-mode: difference;
}

.logofuera a {
  max-width:100vw;
  display:flex
}

.logofuera img {
  margin: 2% auto;
  width: 10vw;
}

.categorias {
  margin-top:3%;
  width:100%;
  list-style-type:none;
  text-align: center
}

.categorias li{
  display:inline-block
}

.categorias li:after{
  content:' | '
}

.categorias li:last-child:after{
  content:''
}

.categorias nav a{
  color:black;
  font-size: 120%
}

.categorias nav a:hover{
  color:#ffbc1e
}

/**Header Home**/
.fotoinicial{
  height:calc(100vh + 32px);
  overflow: hidden;
  margin-top:-32px
}

.fotoinicial img{
  min-width:100%;
}

.imageninit {
  filter: brightness(50%);
}

.logohome {
  position:absolute;
  left:40vw;
  top:35vh;
  width:20vw;
  z-index: 2
}

.logohome img{
  width:100%
}

.sloganhome{
  font-size: 170%;
  color:white;
  text-align: center;
  width:20vw !important;
  z-index: 2;
  font-weight:normal
}

/**Portfolio Home**/

.portfolio{
  padding: 5% 25%;
}

.grid-portfolio {
  width:100%;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows:15em 5em 10em;
  grid-column-gap:5%;
  grid-row-gap:5%;
}

.portfolio11{
  grid-column:1 / 1;
  grid-row: 1 / 1;
  overflow: hidden;
  position:relative
}

.portfolio12{
  grid-column: 2 / 2;
  grid-row: 1 / 4;
  overflow: hidden;
  position:relative
}

.portfolio13{
  grid-column: 3 / 3;
  grid-row: 1;
  grid-row-end:3;
  overflow: hidden;
  position:relative
}

.portfolio21{
  grid-column: 1 / 1;
  grid-row: 2;
  grid-row-end:4;
  overflow: hidden;
  position:relative
}

.portfolio23{
  grid-column: 3 / 3;
  grid-row: 3;
  grid-row-end:3;
  overflow: hidden;
  position:relative
}

.portfolio11 img,.portfolio12 img, .portfolio13 img, .portfolio21 img {
  height:100%
}

.portfolio23 img {
  width: 100%
}

.tituloproyecto{
  background:rgba(0,0,0,0);
  display:flex;
  color:white;
  z-index:10;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  text-align:center;
  transition:all ease .3s;
  cursor:pointer;
}

.tituloproyecto h3{
  width:100%;
  margin:auto;
  color:transparent;
  transition:all ease .3s
}

.portfolio11:hover .tituloproyecto,.portfolio21:hover .tituloproyecto, .portfolio12:hover .tituloproyecto,.portfolio13:hover .tituloproyecto,.portfolio23:hover .tituloproyecto{
  background:rgba(0,0,0,0.7)
}

.tituloproyecto:hover h3{
  color:white
}
/** Post preview **/

.pre-post{
  background-size: cover;
  cursor:pointer;
  transition:all ease .3s
}

.pre-post p:hover, .pre-post h2:hover{
  opacity:.5
}

.post {
  background-color:rgba(0,0,0,0.7);
  filter: unset;
  padding:5% 25%;
  padding-top:10%;
  color:white;
}

.entrada {
  padding:6%
}

.entrada ul{
  font-size:150%
}

.cont-proyecto{
  padding:6%
}

.proyecto {
  display:flex
}

.proyecto div{
  height:100%;
  width:50%;
  padding:2%
}

.proyecto p{
  font-size:120%
}

.detallesproyecto{
  position:sticky;
  top:0
}

progress{
  position:fixed;
  top:0;
  width:100%;
  height:1%;
  border:0;
  z-index: 2;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none
}

::-moz-progress-bar {
  background-color:#ffbc1e
}

progress::-webkit-progress-value {
  background:#ffbc1e
}

progress::-webkit-progress-bar {
  background:#e6e6e6
}

/**Form contacto**/

input{
  border:0;
  padding:5px 0;
  border-bottom:3px solid black;
  width:100%
}

.comment-form-cookies-consent{
  display:flex
}

#wp-comment-cookies-consent{
  width:auto
}

.wpcf7-form{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.wpcf7-form p{
  overflow:hidden;
  width:100%
}

.your-message textarea{
  width:100%!important;
  border:0;
  border-bottom:3px solid black;
  resize:vertical;
}

textarea{
  width:100%;
  border:0;
  border-bottom:3px solid black;
  resize:vertical;
  height:3em
}

.wpcf7-submit, .submit{
  border:0;
  color:white;
  background:black;
  width:100%;
  border:3px solid black;
  cursor:pointer;
  font-weight: bold;
  transition:all ease .3s;
}

.wpcf7-submit:hover, .submit:hover{
  color:black;
  background:none;
}

.aceptacion{
  font-size:70%
}

.terminos input {
  width:auto;
  margin-right:2%;
}
.terminos{
  font-size:80%
}

/**Posts lists**/
.posts{
  display:flex;
  flex-wrap:wrap;
}

.postlist{
  width:30%;
  margin:1%;
  flex-wrap:wrap;
  display:flex;
}

.postlist a, .postlist a div{
  display:flex;
  width:100%
}

.postlist div {
  padding:3%;
  padding-top:20%;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
}

.uniquepost {
  background-color:rgba(0,0,0,0.7);
  transition:all ease 0.3s;
  cursor:pointer;
}

.uniquepost:hover{
  background-color:rgba(0,0,0,0.5)
}

/**FOOTER**/
footer{
  background:black;
  padding: 5% 25%;
  color:white
}

.redsocial{
  transition:all ease .3s;
  cursor:pointer
}

.redsocial:hover{
  opacity:0.5
}

.grid-footer{
  grid-template-columns: 30% 30% 30%;
  grid-template-rows:auto auto auto;
  grid-column-gap:10%;
  grid-row-gap:5%;
}

.footer-busqueda{
  grid-column:1;
  grid-row:1;
  border:0;
  border-bottom:2px solid white
}

.footer-conexiones{
  grid-column:1;
  grid-row:2;
  padding-top:5%
}

.footer-sobre{
  grid-column:2;
  grid-row:1/3
}

.footer-logo{
  grid-column:3;
  grid-row:1/3;
  color:white
}

.footer-derechos{
  grid-column:1/4;
  grid-row:3;
  text-align:center;
  color:#aaa;
  padding-top:10%
}

.busqueda, .busqueda input{
  background: none;
  width:auto;
  display:inline;
  fill:white
}

.lupa {
  width:20px !important;
  float:right;

}

.rss{
  width:29%;
  padding:1.5%
}

.about{
  font-size:120%
}

/* GUTEMBERG */

 .alignfull {
	    margin-left: calc(50% - 50vw);
	    max-width: 100vw;
  }

  figure.wp-block-image.alignfull{
  }

  .wp-block-image{
    text-align:center;
    margin-top:3%
  }

	.wp-block-cover-image{
		padding:15% 10%;
		font-family: "Oswald", sans-serif;
		font-weight:bolder;
		font-size:3em;
	    background-attachment: fixed;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: cover;
	}

  .alignwide {
    width: 100%;
    background-size:100%;
    background-position: center center;
    min-height:100px;
  }

  .wp-block-cover-image {
	color:white;
	text-align:center;
	align-items: center;
	 -webkit-align-items: center;
  }

  figure img {
	max-width:100%;
  }

  .ssba div a{
    margin: 2%
  }

  .ssbp-text{
    display:none
  }

  figcaption {
	color:darkgray;
	font-size:80%;
	font-style:italic;
	text-align:center;
	margin-top:3%;
  }

  .alignwide img,
  .alignfull img {
    display: block;
    margin: 0 auto;
  }

  .alignfull{
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 205%;
}

 .blocks-gallery-item figure{
	margin:1%;
	height: 100%;
 }

 figure img {
	object-fit: cover;
}

 .wp-block-gallery{
	list-style:none;
	padding:0;
 }

.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
	display: inline-block;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
	width: calc(100% / 3 - 16px);
}
.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
	margin: 2px;
}
.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
	width: calc(100% / 3 - 4px);
}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
	padding: 0px;
}

.is-type-video {
	width:100%;
	height:100%;
}

.is-type-video iframe {
	object-fit: cover;
	width:100%
}

.emoji {
	width:5%
}

.wp-block-pullquote{
	margin-left:15%;
	margin-right:15%;
	padding:2%;
	color:#777;
	text-align:left;
	border-left:3px solid #777;
}

.wp-block-pullquote p{
	margin:0;
	padding:1%;
}

.wp-block-pullquote cite {
	font-size:85%;
}

.wp-block-button {
    margin: 5% 35%;
    padding: 1%;
    font-family: "Oswald";
	transition:all ease 0.5s;
}

.wp-block-button a{
    color: white;
}

.wp-block-button:hover {
    color:black;
	transition:all ease 0.5s;
}

.wp-block-button a:hover{
    color: black;
}

.aligncenter{
	text-align:center;
}

.wp-block-separator {
    margin: 0 40%;
}

.wp-block-columns.has-2-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.wp-block-column{
	display:inline-block;
	margin:1%;
}

.wp-block-columns.has-3-columns{
  display:flex
}

.has-3-columns .wp-block-column{
  width:30%
}

.columna-proyectos{
  border:3px solid black;
  padding:2%;
  cursor:pointer
}

.columna-proyectos:hover{
  border-color:grey
}

.columna-proyectos img{
	transition:all ease 0.3s;
  width:100%;
}

.columna-proyectos:hover img {
	opacity:0.5;

}

.proyectos {
  min-height:200px;
  background-size:cover;
  width:30%;
  display:flex;
  transition:all ease .3s;
  transform:scale(.9)
}

.proyectos a{
  background-color:rgba(0,0,0,.7);
  width:100%;
  display:flex;
  text-align: center;
  transition:all ease .3s;
  opacity:0
}

.proyectos:hover {
  transform:scale(1)
}

.proyectos:hover a{
  opacity:1
}

.datosproyecto{
  margin:auto
}

.alignright.is-resized {
	float: right;
	width: 50%;
}

.wp-block-image.alignfull img, .wp-block-image.alignwide img {
	width: 100vw;
}

@media screen and (max-width: 600px) {
  h2{
    font-size:200%
  }

  p{
    font-size:100%;
  }

  .entrada ul{
    font-size:100%
  }

  .icon {
    display:block !important
  }

  .hamburguesa {
    display:block !important;
    position:absolute;
    top:0;
    right:0;
    float:right;
    margin:5px
  }

  .menuinicio li{
    display: none
  }

  .hamburguesa {
    top: 5px;
    right: 5px;
    z-index: 3;
    position: fixed;
    width:25px;
    cursor:pointer;
  }

  .menuinicio{
    padding:0;
    display:flex;
    flex-direction:column;
    margin-top:0;
  }

  .menuinicio.responsive li{
    display:block;
    width:100%;
    padding:2%;
    background: white;
    z-index: 10
  }

  .menuinicio a{
    color:black;
  }

  .menuinicio a:hover{
  }

  .responsive{
    position:fixed;
    top:0
  }

  .logohome{
      position:absolute;
      left:10vw;
      top:35vh;
      width:80vw;
      z-index: 2
  }

  .sloganhome{
    width:80vw !important
  }

  /**Portfolio Home**/

  .portfolio{
    padding: 5%;
  }

  .grid-portfolio {
    width:100%;
    grid-template-columns: 100%;
    grid-template-rows:auto;
    grid-row-gap:0%;
    grid-column-gap:0%
  }

  .portfolio11{
    grid-column:1;
    grid-row: 1;
    overflow: hidden
  }

  .portfolio12{
    grid-column: 1;
    grid-row: 2;
    overflow: hidden
  }

  .portfolio13{
    grid-column: 2;
    grid-row: 3;
    overflow: hidden
  }

  .portfolio21{
    grid-column: 1 / 1;
    grid-row: 4;
    overflow: hidden
  }

  .portfolio23{
    grid-column: 1;
    grid-row: 5;
    overflow: hidden
  }

  .portfolio11 img,.portfolio12 img, .portfolio13 img, .portfolio21 img {
    width:100%
  }

  /** Post preview **/
  .post {
    padding:5%
  }

  /**Post**/
  .postlist{
    width:100%;
    margin:1%;
    float:left;
    background-size:cover
  }

  /**Form contacto**/
  .grid-contacto{
    grid-template-columns: 100%;
    grid-template-rows:auto;
    padding: 10% 0
  }

  .form-nombre {
    grid-column:1/1;
    grid-row:1
  }

  .form-email{
    grid-column:1;
    grid-row:2;
  }

  .form-message {
    grid-column:1;
    grid-row:3;
  }

  .form-submit {
    grid-column:1;
    grid-row:4;
  }

  /**FOOTER**/
  .grid-footer{
    grid-template-columns: 100%;
    grid-template-rows:auto;
    padding: 5%;
    height: 100%;
    grid-column-gap:0;
    grid-row-gap:0;
    padding-bottom:15%
  }

  .footer-logo{
    grid-column:1;
    grid-row:1;
    padding-bottom:15%
  }

  .footer-busqueda{
    grid-column:1;
    grid-row:2;
    padding-bottom:15%
  }

  .footer-conexiones{
    grid-column:1;
    grid-row:3;
    padding-bottom:15%
  }

  .footer-sobre {
    grid-column:1;
    grid-row:4;
    background: black;
    padding-bottom:15%
  }

  .footer-derechos{
    grid-column:1;
    grid-row:5;
    background: black
  }

}

/** SERVICIOS **/
.aservicios{
	width:100%;
	display:contents;
	color:black !important
}

.generalservicios {
  display: grid;
	grid-template-columns: 25% auto;
  grid-template-rows: auto auto;
	width:100%;
	transition: all ease 0.5s;
	cursor:pointer;
}

.generalservicios:hover{
	transform: scale(0.95);
	transform-origin: center;
}

.generalservicios h2 {
	grid-column-start:1;
	grid-column-end:span 2;
	grid-row-start:1;
	grid-row-end:1;
	font-size:250%;
}

.generalservicios img {
	grid-column-start:1;
	grid-column-end:span 1;
	grid-row-start:2;
	grid-row-end:2;
	width:100%
}

.generalservicios .texto {
	grid-column-start:2;
	grid-column-end:2;
	grid-row-start:2;
	grid-row-end:2;
	padding:5%;
	font-size:150%
}

/* estilos servicios */
.disenoweb{
}

.disenoweb h2 {
	color:#ffbc1e !important
}

.branding h2{
	color: #ed620e !important
}

.seoysem h2{
	color: #9ded0e !important
}

.mkyrrss h2{
	color: #12dcea !important
}

/** ---   COMENTARIOS -- **/
.comment-form {
  display:flex;
  flex-direction:column;
  font-size:100%
}

.comment-notes{
  font-size:100%
}

.comment-form p{
  font-size:120%
}

.comment-form-comment{
  display:flex;
  flex-direction:column;
}

.comment-form-comment textarea {
  width:100%;
  border:0;
  border-bottom:3px solid black;
  resize:vertical;
  height:3em
}

@media only screen and (max-width:782px){
  body{
    margin-top:-46px
  }
  .proyecto{
    flex-direction:column;
  }
}

@media only screen and (max-width: 600px){
	.generalservicios {
	  display: grid;
		grid-template-columns: 1;
	  grid-template-rows: auto auto;
	}
	.generalservicios h2 {
		grid-column-start:1;
		grid-row-start:1;
		grid-row-end:1;
		font-size:250%;
		text-align: center;
	}

	.generalservicios img {
		grid-column-start:1;
		grid-column-end:span 2;
		grid-row-start:2;
		grid-row-end:2;
		width:80%;
		justify-self: center;
	}

	.generalservicios .texto {
		grid-column-start:1;
		grid-column-end:span 2;
		grid-row-start:3;
		grid-row-end:3;
		padding:5%;
		font-size:120%;
		line-height:
	}

}
