/* Generales */
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Dosis);
img{
width:100%;
max-width:600px;
}

@font-face{
   font-family: 'Oswald';
   src: url(../fonts/TradeGothicLTStd-Cn18.otf);
}

@font-face{
   font-family: 'Oswald';
   src: url(../fonts/TradeGothicLTStd-BdCn20.otf);
   font-weight:bold;   
}

@font-face{
	font-family: 'Dosis', sans-serif;
	src: url(../fonts/MuseoSansRounded-900-webfont.otf);
	src: url(../fonts/MuseoSansRounded-900-webfont.woff);
	src: url(../fonts/MuseoSansRounded-900.eot);	
	src: url(../fonts/MuseoSansRounded-900-webfont.ttf);
	font-weight: 900;
}

body {
	background: url(../img/background-acd.png) repeat 0 0;
	   font-family: 'Oswald';}

ul li{
	list-style: none;
}

strong{
	color:#789bce;
}

blockquote{
	font-size: 14px;
}

img{
	width: 100%;
	max-width: 400px;
}

.img-video{
	text-align: center;
}
/* Header */

.title h1  {
	font-family: 'Dosis', sans-serif;
	font-weight: 900;
	margin-top: 20px;
	font-size: 72px;
	word-wrap: break-word;
}

/* Video Slider */
.bx-wrapper .bx-next {
	right: 20px!important;
}

/* Footer */

#footer {
  background: #7596d3;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  padding: 15px 0;
  width: 100%;
}


#footer a {
	color: #FFF;
}

#footer a:hover {
	color: #FFF;	
}

/* Reloj */

.flip-clock-wrapper {
	width: auto!important;
}

.flip-clock-label {
	display: none;
}

ul.redes-sociales li{
	display: inline-block;
	margin-bottom: 30px;
}


/* ============================================================================================================================
== OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */

.oval-thought-border {
  position:relative;
  padding:20px 30px;
  margin:1em auto 80px;
  border:10px solid #7596d3;
  text-align:center;
  color:#333;
  background:#fff;
  /* css3 */
  /*
  NOTES:
  -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
  -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  */
  -webkit-border-top-left-radius:240px 140px;
  -webkit-border-top-right-radius:240px 140px;
  -webkit-border-bottom-right-radius:240px 140px;
  -webkit-border-bottom-left-radius:240px 140px;
  -moz-border-radius:240px / 140px;
  border-radius:240px / 140px;
}

/* creates the larger circle */
.oval-thought-border:before {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-40px;
  right:100px;
  width:50px;
  height:50px;
  border:10px solid #7596d3;
  background:#fff;
  /* css3 */
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates the smaller circle */
.oval-thought-border:after {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-60px;
  right:50px;
  width:25px;
  height:25px;
  border:10px solid #7596d3;
  background:#fff;
  /* css3 */
  -webkit-border-radius:25px;
  -moz-border-radius:25px;
  border-radius:25px;
  /* reduce the damage in FF3.0 */
  display:block;
}

    body,html{
		height: 100%;
	}

	/* remove outer padding */
	.main .row{
		padding: 0px;
		margin: 0px;
	}

	/*Remove rounded coners*/

	nav.sidebar.navbar {
		border-radius: 0px;
	}

	nav.sidebar, .main{
		-webkit-transition: margin 200ms ease-out;
	    -moz-transition: margin 200ms ease-out;
	    -o-transition: margin 200ms ease-out;
	    transition: margin 200ms ease-out;
	}

	/* Add gap to nav and right windows.*/
	.main{
		padding: 10px 10px 0 10px;
	}

	/*bgmenu*/
	.sidebar{
		background: #789bce;
	}
	
	.navbar-inverse .navbar-nav>li>a, .sidebar ul li a:hover{
		color: white;
	}
	/* .....NavBar: Icon only with coloring/layout.....*/

	/*small/medium side display*/
	@media (min-width: 992px) {

.logo img {margin 20px auto;}

		/*Allow main to be next to Nav*/
		.main{
			position: absolute;
			width: calc(100% - 40px); /*keeps 100% minus nav size*/
			margin-left: 40px;
			float: right;
		}

		/*lets nav bar to be showed on mouseover*/
		nav.sidebar:hover + .main{
			margin-left: 300px;
		}

		/*Center Brand*/
		nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
			margin-left: 0px;
		}
	
		/*Center Brand*/
		nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
			text-align: center;
			width: 100%;
			margin-left: 0px;
		}

		/*Center Icons*/
		nav.sidebar a{
			padding-right: 13px;
		}

		/*adds border top to first nav box */
		nav.sidebar .navbar-nav > li:first-child{
			border-top: 1px #e5e5e5 solid;
		}

		/*adds border to bottom nav boxes*/
		nav.sidebar .navbar-nav > li{
			border-bottom: 1px #e5e5e5 solid;
		}

		/* Colors/style dropdown box*/
		nav.sidebar .navbar-nav .open .dropdown-menu {
			position: static;
			float: none;
			width: auto;
			margin-top: 0;
			background-color: transparent;
			border: 0;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		/*allows nav box to use 100% width*/
		nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
			padding: 0 0px 0 0px;
		}

		/*colors dropdown box text */
		.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
			color: #777;
		}

		/*gives sidebar width/height*/
		nav.sidebar{
			width: 300px;
			height: 100%;
			margin-left: -160px;
			float: left;
			z-index: 8000;
			margin-bottom: 0px;
		}

		/*give sidebar 100% width;*/
		nav.sidebar li {
			width: 100%;
		}

		/* Move nav to full on mouse over*/
		nav.sidebar:hover{
			margin-left: 0px;
		}
		/*for hiden things when navbar hidden*/
		.forAnimate{
			opacity: 0;
		}
	}

	/* .....NavBar: Fully showing nav bar..... */

	@media (min-width: 1330px) {

		/*Allow main to be next to Nav*/
		.main{
			width: calc(100% - 200px); /*keeps 100% minus nav size*/
			margin-left: 200px;
		}

		/*Show all nav*/
		nav.sidebar{
			margin-left: 0px;
			float: left;
		}
		/*Show hidden items on nav*/
		nav.sidebar .forAnimate{
			opacity: 1;
		}
	}

	nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
		color: #CCC;
		background-color: transparent;
	}

	nav:hover .forAnimate{
		opacity: 1;
	}
	section{
		padding-left: 15px;
	}
/*fin menu*/

/*pantalla objetivos */


.objetivos-title h1,  h1.title-competencias-digitales , .introduccion-title h1{
	margin: 0 auto;
	background: #789bce;
	padding: 15px;
	color: white;
	text-transform: uppercase;
	display: block;
	text-align: center;
	margin-bottom: 50px;
}

.col-objetivos{
	font-size: 21px;
	line-height: 31px;
	position: relative;
}

.num-objetivos{
	  background: #FFC762;
  color: white;
  position: absolute;
  font-size: 45px;
  top: -23px;
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 100%;
  border: 3px solid white;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-weight: bold;
}

.contenidos-objetivos{
  padding: 20px;
  background: #f5f5f5;
  font-size: 18px;
  line-height: 28px;
  border-radius: 5px;
  padding-top: 63px;
  text-align: center;
  min-height: 158px;
  box-shadow: 0 3px 5px #CACACA;
}


/*introduccion*/
.introduccion-content .col-introduccion{
  padding: 20px;
  font-size: 18px;
  line-height: 28px;
  border-radius: 5px;
  text-align: center;

}

.introduccion-content .col-introduccion .contenido-col{
  background: #f5f5f5;
  box-shadow: 0 3px 5px #CACACA;
  padding: 20px;
  position: relative;
  top: 50px;
  padding-top: 74px;
}

.contenido-col h2{
	text-transform: uppercase;
	font-size: 23px;
	border-bottom: 2px solid #365E99;
	margin-bottom: 10px;

}

.contenido-col h2:before{
	content: "hola";
  position: absolute;
  top: -73px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  text-transform: uppercase;
  font-size: 23px;
  background: white;
  margin: 0 auto;
  left: 0;
  right: 0;
  border: 3px solid #f5f5f5;
  box-shadow: 0 5px 10px #eaeaea;
}


/*competencias digitales*/


ul.caracteristicas{
	text-align: center;
}

ul.caracteristicas li{
	font-size: 18px;
	color: #333333;
	margin:30px 0;
}


ul.caracteristicas h2.titulo-competencias{
	text-transform: uppercase;
	  background: #FFE068;
	  display: inline;
 	  padding: 10px 10px;
  	font-weight: bold;
  	font-size: 25px;
}


/*introduccion*/


/*ventajas*/



.col-ventajas{
	padding: 20px;
}

.content-ventajas ul, .content-contenido-videocv ul, .content-grabacion ul{
	padding: 0;
	margin-top: 15px;
}


.icono-videocv{
	height: 300px;
	width: 300px;
	background: red;
	border-radius:100%;
}

li.listado-ventajas{
	color:#333333;
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 15px;
	list-style: none;
}


span.glyphicon-chevron-right{
	color:#A5BFE6;
	margin-right:10px;
}

.content-ventajas{
	height: 400px;
}

/*contenido-cv*/
.col-contenido-videocv{
	padding: 20px;
}


.content-contenido-videocv{
  height: 414px;
}

/*estructura-cv*/

.col-estructura{
	padding: 20px;
}

.content-estructura{
	  background: #f5f5f5;
  box-shadow: 0 3px 5px #CACACA;
  padding: 20px;
  position: relative;
  padding-top: 65px;
}

.content-estructura h2{
	  text-transform: uppercase;
  font-size: 18px;
  border-bottom: none!important;
  margin-bottom: 10px;
  text-align: center;
  margin: 0;
  line-height: 28px;
  padding-bottom: 15px;
}

.content-estructura p, .content-grabacion p{
	margin-top: 15px;
	  color: #333333;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 15px;
}

/*grabacion*/

.col-grabacion{
	padding: 20px;
}

.content-grabacion{
  height: 298px;
}

.content-grabacion h2{
	  text-transform: uppercase;
  font-size: 18px;
  border-bottom: 2px solid #365E99;
  margin-bottom: 10px;
  text-align: center;
  margin: 0;
  line-height: 28px;
  padding-bottom: 15px;
}


/*contenido-general-columnas*/

.content-ventajas h2, .content-contenido-videocv h2{
	text-transform: uppercase;
  font-size: 18px;
  border-bottom: 2px solid #365E99;
  margin-bottom: 10px;
  text-align: center;
  margin: 0;
  line-height: 28px;
  padding-bottom: 15px;
}

.content-ventajas, .content-grabacion, .content-contenido-videocv{
	 background: #f5f5f5;
  box-shadow: 0 3px 5px #CACACA;
  padding: 20px;
  position: relative;
  padding-top: 65px;
}

.content-ventajas h2, .content-contenido-videocv h2, .contenido-col h2, .content-estructura h2, .content-grabacion h2 {
  text-transform: uppercase;
  font-size: 18px;
  border-bottom: 2px solid #365E99;
  margin-bottom: 10px;
  text-align: center;
  margin: 0;
  line-height: 28px;
  padding-bottom: 15px;
  font-weight: bold;
  color: #789bce;
}

.bg-warning{
	background-color: #A5A5A5;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  padding: 10px;
  border-radius: 5px;
  color: white;
}

.texto-importante:after{
	content:" ";
	height: 60px;
	width: 60px;
	background: white;
	position: absolute;
	border-radius: 100%;
	left: 0;
	top: 0;
}

.texto-importante{
	text-transform: uppercase;
	color: red;
	position: relative;
}

/*background title*/
.title-competencias-digitales, .title-objetivos, .title-introduccion, .title-ventajas, .estructura-title, .ejemplos-title, .definicion-title, .grabacion-title, .que-es-title, .edicion-title{
	background: #789bce;
	padding: 10px;
	color:white;
	text-transform: uppercase;
	border-bottom:2px solid #587db3;
	position: relative;
	min-width:100px;
	max-width:400px;
}

.competencias-digitales-content h1, .objetivos-content h1, .introduccion-content h1, .ventajas-content h1, .estructura-content h1, .ejemplos-content h1, .definicion-content h1, .grabacion-content h1, .que-es-content h1, .edicion-content h1{
	display: block;
	text-align: center;
	padding-bottom: 60px;
}

/*objetivos*/




@media (max-width: 768px) {
	

#footer {
  position: absolute;
  bottom: 0;
}

#fin .container {    margin-left: -15px;}
a.siguiente, a.anterior{display:none;}
#introduccion h1{padding-bottom: 10px;}
#introduccion h2:before {	width: 75px;	height: 75px;}
#introduccion .introduccion-content .col-introduccion .contenido-col {    top: 50px;  padding-top: 7px;  height: auto;}
#objetivos h1{margin-top:45px;}
.num-objetivos{height:40px; width:40px; font-size: 20px; line-height: 35px; margin:0;}
.contenidos-objetivos{height:auto; padding-top:0px;}
.content-estructura{height:auto; padding-top:0px; padding: 2px; padding-left:10px; padding-right:10px;}
.fp-tableCell .col-estructura{padding:12px; height:auto; padding-top:0px;}
.fp-tableCell .col-estructura h2{font-size:14px;}
.fp-tableCell h1{padding-bottom:0px;}
.fp-tableCell .col-estructura p{font-size:14px;}
.listado-ventajas{line-height:20px !important; font-size:14px !important; margin-bottom:0px  !important;}
.col-introduccion{margin-top:40px;}
.definicion-content h1{padding-bottom:0px;}
.intro-concepto h2:before{  background-size: 75px !important;  background-position: 0px 1px;}
.intro-quest h2:before{ background-size: 75px !important;  background-position: -6px 15px;}
.icono-videocv {  height: 100px;  width: 100px;  margin-top:-40px;}
.estructura-lk {	  background-size: 150px !important;  background-position: -30px -0px !important;}
.ventajas ul li.listado-ventajas{font-size:14px !important; margin-bottom: 1px;}
.finalidad-lk {		background-size: 120px !important;  background-position: -10px 10px !important;}
.perfil-lk{background-size: 100px !important;  background-position: -10px -10px !important;}
.competencias-digitales-content h1{  padding-bottom: 10px;}
.competencias-digitales-content .caracteristicas{padding-left:0px;}
.introduccion-content h1{padding-bottom:10px !important;}
.introduccion-content .col-introduccion .contenido-col{height: auto;}
.empresas-lk {  background-size: 120px !important;  background-position: -8px -2px !important;}
.img-r {  text-align: center;} .img-r img{  width:80%;}
.estructura-content h1{text-align:center; padding-bottom:10px;}
.ventajas ul.nopadding, .content-estructura ul.nopadding{padding:0;}

.content-estructura h2{border-bottom:none; padding-bottom:0;}


	.title-competencias-digitales, .title-objetivos, .title-introduccion, .title-ventajas, .estructura-title, .ejemplos-title, .definicion-title, .grabacion-title, .que-es-title, .edicion-title {
		font-size: 18px;	
	}
	
	ul.caracteristicas h2.titulo-competencias{
		font-size: 11px;
	}

	.logo img{
		width:70%;
		margin: 20px auto;
	}

	.text-center h1{
		font-size: 35px;
	}
}


.anterior,
.siguiente {
    bottom: 25px;
	top: auto;
	outline: none;
	left: 50%;
	margin-left: 30px;
	position: absolute;
	width: 50px;
	height: 50px;
	font-size: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.15) url(../img/controls.png) -5px -3px no-repeat;
}

.siguiente.portada {
	margin-left: -25px;
	bottom: 25px;
}

.anterior {
	background-position: -64px -4px;
	margin-left: -60px;
}

.anterior.fin {
	margin-left: 0;
	top: 25px;
}

h1, h2, h3 {
	font-family: 'Dosis', sans-serif;
}

p,
li {
	font-size: 15px;
	line-height: 1.4;
}
/******IMAGENES******/

.intro-concepto h2:before{
	content: " ";
	background-image: url("../img/2.png");
background-size: 74%;
  background-position: 17px 18px;
  background-repeat: no-repeat;
  background-color: white;
}
.intro-quest h2:before{
	content: " ";
	background-image: url("../img/1.png");
	background-size: 74%;
    background-position: 17px 15px;
  background-repeat: no-repeat;
background-color: white;}

.estructura-lk {	
	background-image: url("../img/estructura-lk.png");
  background-size: 450px;
  background-position: -80px -20px;
  background-repeat: no-repeat;
    background-color: transparent;

}

.finalidad-lk {	
	background-image: url("../img/finalidad-lk.png");
	background-size: 450px;
  background-position: -80px -20px;
  background-repeat: no-repeat;
  background-color: transparent;
}

.perfil-lk {	
	background-image: url("../img/perfil-lk.png");
	background-size: 400px;
  background-position: -80px -20px;
  background-repeat: no-repeat;
    background-color: transparent;

}

.personaliza-lk {	
	background-image: url("../img/enlace-lk.png");
	background-size: 400px;
  background-position: -80px -60px;
  background-repeat: no-repeat;
  background-color: transparent;
}

.link-lk h2:before{
  content: "";
  background-image: url("../img/link-lk.png");
  background-size: 200px;
  background-position: -25px -10px;
  background-repeat: no-repeat;
  background-color: white;
}

.correo-lk h2:before{
content: " ";
  background-image: url("../img/correo-lk.png");
  background-size: 200px;
  background-position: -30px -20px;
  background-repeat: no-repeat;
  background-color: white;
  
}

.recomendar-lk h2:before{
  content: " ";
  background-image: url("../img/recomendar.png");
  background-size: 200px;
  background-position: -30px -5px;
  background-repeat: no-repeat;
  background-color: white;
}

.grupos-lk h2:before{
  content: " ";
  background-image: url("../img/grupos.png");
  background-size: 180px;
  background-position: -20px 10px;
  background-repeat: no-repeat;
  background-color: white;
}

.compartir-lk h2:before{
  content: " ";
  background-image: url("../img/compartir-lk.png");
  background-size: 180px;
  background-position: -20px 10px;
  background-repeat: no-repeat;
  background-color: white;
}

.empresas-lk {	
	background-image: url("../img/empresas-lk.png");
	background-size: 420px;
  background-position: -80px -20px;
  background-repeat: no-repeat;
    background-color: transparent;

}
span.glyphicon-hand-down {
  margin-left: 10px;
}

.slimScrollDiv {
	overflow: visible!important;
}

.slimScrollDiv .anterior, .slimScrollDiv .siguiente {
	bottom: -50px;
}

.fb-share-button {top: -4px;}