juanres

## css flex sample
header{
  height: 10vh;
  background: grey;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
section{

## flex sample html
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Base Flexbox</title>
  </head>
  <body>
    <header>
      <nav>

## condicional css IE
<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
    .beneficio_desk{
    top: 20vh;
  }
</style>
<![endif]-->

## Divi section import from page
<?php
  get_header();
  echo do_shortcode('[et_pb_section global_module="5306"][/et_pb_section]');
  $show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );
  $is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );
?>

## Afectar elementos al activar otros
If the cube is directly inside the container:

  #container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

  #container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

## Triangulo css izquierda
.izquierda {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right:20px solid blue;
}

## Triangulo css derecha
.derecha {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid green;
}

## Triangulo css abajo
.abajo {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #f00;
}

## Triangulo arriba
.arriba {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
}

## gist:6912233
/* CONDICIONAL  pantalla portatil */
 @media only screen and (max-width : 1224px){
}
	header{
	height: 10vh;
	background: grey;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	}
	section{
	<!DOCTYPE html>
	<html lang="es" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Base Flexbox</title>
	</head>
	<body>
	<header>
	<nav>
	<!--[if IE]>
	<style type="text/css">
	/********** css for all IE browsers **************/
	.beneficio_desk{
	top: 20vh;
	}
	</style>
	<![endif]-->
	<?php
	get_header();
	echo do_shortcode('[et_pb_section global_module="5306"][/et_pb_section]');
	$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );
	$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );
	?>
	If the cube is directly inside the container:

	#container:hover > #cube { background-color: yellow; }

	If cube is next to (after containers closing tag) the container:

	#container:hover + #cube { background-color: yellow; }

	If the cube is somewhere inside the container:
	.izquierda {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right:20px solid blue;
	}
	.derecha {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid green;
	}
	.abajo {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #f00;
	}
	.arriba {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
	}
	/* CONDICIONAL pantalla portatil */
	@media only screen and (max-width : 1224px){
	}