.x { height:0px;}
html, body { height: 100%}
* {font-family: 'Muli', sans-serif;}
a 				 { outline: 0 !important; color: #666 }
.collapsed .glyphicon-chevron-up,
.panel-title.btnUpDown .glyphicon-chevron-down { display:none }
.panel-title.collapsed .glyphicon-chevron-down { display:inline-block}
section {padding-top:120px !important; padding-bottom:170px !important;}
section li {list-style-type:none; background:url(../img/bullet.svg) no-repeat 0 11px; padding-left:20px; }
section li.git { background:url(../img/github.svg) no-repeat left top !important; }
h3	{ font-size:28px;}

/*SPONSORS*/
#sponsors		{ background: #666;}
#sponsors h2 	{ font-size: 50px; font-weight: bold;  color:#FFF;}
#sponsors img	{ margin:auto;}

/*NAV BAR*/
nav { background: rgba(45,45,45,0.95) !important;}
nav h1 { display: none;}
.navbar-default { padding:25px 0 25px;}
.navbar-default.navbar-shrink { padding:0px 0 6px;}
.navbar-default.navbar-shrink .navbar-brand img { margin-top:9px}
.navbar-brand { padding: 0;}
.navbar-brand img { width: 200px}
.navbar-default .navbar-nav > li > a { font-size:18px; font-weight:lighter; color:#FFF}
.navbar-default .navbar-nav > .active > a { margin-top:2px; padding:13px 15px; } /*Scroll spy*/

/*HEADER*/
header {
  background: -webkit-linear-gradient(#ecf3f3 , #d6e1e3); 
  background: -o-linear-gradient(#ecf3f3 , #d6e1e3);
  background: -moz-linear-gradient(#ecf3f3 , #d6e1e3);
  background: linear-gradient(#ecf3f3 , #d6e1e3 );}
.seccion-header                     { padding:250px 0 300px; color: #666}
.seccion-header div div             { padding:0}
.seccion-header div div:first-child,
.seccion-header div div:last-child  { padding-top:70px}
.seccion-header h2                  { font-size:26px;font-weight:300;}
.seccion-header .headdiv1 h2        { text-align:left; line-height:35px;}
.seccion-header .headdiv3 h2        { text-align:right; line-height:35px;}
.seccion-header h2 strong           { font-size:40px; display:block; font-weight:400; }
.seccion-header .btn                { margin-top:80px}
.nube1, .nube2, .nube3   { position:absolute}
.nube1 { opacity:0.4; width:750px; top:80px; left:30%}
.nube2 { opacity:0.3; width:250px; top:220px; right:-9%}
.nube3 { opacity:0.2; width:340px; top:200px; left:0%}

/*INNOVATION*/
#innovation {
  background: -webkit-linear-gradient(#ecf3f3 , #d6e1e3); 
  background: -o-linear-gradient(#ecf3f3 , #d6e1e3);
  background: -moz-linear-gradient(#ecf3f3 , #d6e1e3);
  background: linear-gradient(#ececec , #fcfcfc );}
#innovation div{ padding:0;}
#innovation    { color:#666 }
#innovation h2 { font-size:50px; margin-bottom:50px}
#innovation p  { font-size:25px; line-height:35px; font-weight: 300; margin-bottom:35px}
#innovation .btn                { margin-top:25px}

/*COMPONENTS*/

#components  * {color:#FFF;}
#components { 
  background: url(../img/components-fondo.png), -webkit-linear-gradient(#ecf3f3 , #d6e1e3); 
  background: url(../img/components-fondo.png), -o-linear-gradient(#ecf3f3 , #d6e1e3);
  background: url(../img/components-fondo.png), -moz-linear-gradient(#ecf3f3 , #d6e1e3);
  background: url(../img/components-fondo.png), linear-gradient(#0a94b3  , #47afc6  );
    background-size:contain; background-repeat: no-repeat; background-position: bottom right;}
#components h2 { font-size:50px; margin:0px auto 50px; text-align: center; color:#144e5b; font-weight:bold}
#components .panel-heading,
#components .panel          { background:none; border: none; box-shadow: none;}
#components .panel-heading  { text-align: center; }
#components .panel-heading a{ text-decoration: none; font-size:24px;}
#components .panel-body     { border: none;}
#components div             { text-align: center;}
#components img             { margin: auto; width: 200px;}
#components ul              { text-align: left; font-size:20px; padding:0 0 0 20px}
#components ul li a         { text-decoration: underline;}
#components .panel-body     { padding:0px !important}
#components .glyphicon      { font-size:15px;}

.components-download		{ background-color: rgba(255, 255, 255, 0.1); padding:10px 0; text-align:left;}
.components-download p		{ text-align:left; padding-left:27px; font-size:20px; margin:0;}
.seccion-components	li		{ background-position:0 5px;}





 
/*boardStart*/
.boardstart *   { color:#FFF; }
.boardstart h2  { font-size:50px; margin:0 0 40px 0; font-weight:bold}
.boardstart li  { font-size: 21px; font-weight:300; line-height:40px}
.seccion-boards,
.seccion-learn  { padding:0;}
#boards, #learn { height:780px;}

/*BOARDS*/
#boards { background: url( ../img/boards-fondo.png) no-repeat top left; background-size:cover}

/*START*/
#learn { background: url( ../img/start-fondo.png) no-repeat center; background-size:cover}
#learn li.git { background-position:-2px 10px !important;}

/*CONTACT*/
#contact { 
  background: url(../img/contact.svg) no-repeat, -webkit-linear-gradient(#ecf3f3 , #d6e1e3); 
  background: url(../img/contact.svg) no-repeat, -o-linear-gradient(#ecf3f3 , #d6e1e3);
  background: url(../img/contact.svg) no-repeat, -moz-linear-gradient(#ecf3f3 , #d6e1e3);
  background: url(../img/contact.svg) no-repeat, linear-gradient(#ecf3f3 , #d6e1e3 );
 background-size: cover; background-position: top right;}
#contact h2 { font-size:50px; margin:0 0 50px 0; font-weight:bold; color:#09809b;}
#contact .form-group {margin-bottom:25px;}
#contact .form-group input,
#contact .form-group textarea {padding:20px; font-size: 21px}
#contact .form-group input.form-control {height: auto;}
#contact .form-group textarea.form-control {height:170px;}
#contact .form-control:focus {border:solid 1px #e63a4a; box-shadow:none;}
#contact::-webkit-input-placeholder { color: #bbb;}
#contact:-moz-placeholder {  color: #bbb;}
#contact::-moz-placeholder { color: #bbb;}
#contact:-ms-input-placeholder { color: #bbb;}
#contact .text-danger {color:#e63a4a ;}
#contact button { margin-top: 40px}

/*FOOTER*/
footer      { background: #333; color:#fff }
footer a    { color: #FFF; text-decoration: underline;}
footer span { margin:0 10px; color: #ccc}
footer p    { margin:0 }
.foot1  {}
.foot2  {}
.foot3  {}
.footthanks { position: absolute; bottom: 0; width: 100%}

/*MODAL*/
.modal-header    { background:#e63a4a; color:#FFF;} 
.modal-header h4 { font-size:30px;}
/*THANKS*/
.thanks { 
  background: url(../img/cloudino-symbol.svg) no-repeat ,-webkit-linear-gradient(#ecf3f3 , #d6e1e3); 
  background: url(../img/cloudino-symbol.svg) no-repeat ,-o-linear-gradient(#ecf3f3 , #d6e1e3);
  background: url(../img/cloudino-symbol.svg) no-repeat ,-moz-linear-gradient(#ecf3f3 , #d6e1e3);
  background: url(../img/cloudino-symbol.svg) no-repeat ,linear-gradient(#ecf3f3 , #d6e1e3 );
  background-size: cover; background-position:top}
.thanks { text-align: center; height: 100%; display: block; padding:50px 0;}
.section-thanks h2 { font-size: 70px}
.section-thanks p { font-size: 40px}
.section-thanks divx { background:rgba(255,255,255,.3); width:60%; margin: auto; padding: 3%}
.section-thanks * { text-shadow:1px 1px 0px #000; color: #f1f1f1}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* - - - - Escritorio grande - - - */
@media (min-width: 1200px){ .x { background: red;} 
  #components { padding-bottom: 195px !important;}
  #components .panel-group    { height:380px}
  #components .panel-heading a {font-size: 25px;}
  #boards { padding-left:65px !important}
  #learn  { padding-left:50px !important}
}

/* - - - - Escritorio pequeño o tablet - - - */
@media (min-width:992px) and (max-width:1199px){.x { background: green;} 
    #components { padding-bottom:230px !important;}
    #components .panel-group    { height:400px}
    #boards { padding-left:65px !important}
    #learn  { padding-left:50px !important}
}

/* - - - - Tablet o smartphone - - - */
@media (min-width:768px) and (max-width:991px){.x { background: blue;} 
    .seccion-header * { text-align: center !important; margin: auto}
	#components { padding-bottom:350px !important;}
     #components .panel-group    { height:400px}
	 #components ul {  padding:0px;}
	 .seccion-components li {padding-left:17px;}
     #boards, #learn { height:760px}
     #boards { padding-left:65px !important}
     #learn  { padding-left:50px !important}
}

/* - - - - Smartphone - - - */
@media (max-width:767px){ .x { background: cyan;}
	
	ul { padding:0;}
	section { padding-top:50px !important; padding-bottom:130px !important;}
    .seccion-header * { text-align: center !important; margin: auto}
    .seccion-header   { padding:85px 0 200px; color: #666}
	.seccion-header div div:first-child, .seccion-header div div:last-child { padding-top:10px;}
	.seccion-header .btn { margin-top:30px }
    .nube3 { opacity:0.4; width:95%; top:67px; left:0%}
    .btn-xl { font-size:30px}
	.navbar-default { padding:8px 0 5px;}
	.navbar-default.navbar-shrink { padding:8px 0 5px;}
    .navbar-brand { margin-left: 10px}
    h2 { font-size:22px !important; font-weight:bold;}
	.seccion-header h2 strong { font-size: 34px;}
    p  { font-size:18px !important; line-height:25px !important;}
    #innovation div {padding:0 10px 10px;}
	.seccion-innovation div div { padding-bottom:0 !important;}
	.seccion-innovation-info { position:relative; top:-20px;}
	.seccion-innovation h2 { margin-top:15px; margin-bottom:15px !important; }
	#innovation .btn { margin-top:0px }
	.seccion-components { padding-top:20px;}
    #components { background-size:contain; background-repeat: no-repeat; background-position:right 63px; background-attachment:fixed;}
	#components h2 { margin:0px auto 25px; }
	#components h3 { font-size:20px;}
	#components li { font-size:18px; font-weight:lighter;}
	#components img { width:90px;}
	.seccion-components * { text-align:left;}
	.seccion-components img { margin:auto !important;}
	.seccion-components h3 { padding-left:30px; margin-top:15px; }
	
    #boards, #learn { padding:90px 5px 40px 20px !important; height:620px;}
    #learn ul li { text-shadow:1px 1px 0px #be3a46  !important;}
	#contact { padding-top:70px !important;}
	#contact .form-group input, #contact .form-group textarea { padding:8px; font-size:18px}
	#contact button { margin-top:20px;}
    footer p { font-size:18px !important; line-height:23px ; margin-bottom: 10px; font-weight: 300 }
    footer span { visibility: hidden;}
    .foot2, .foot3 { font-size:12px !important; }
	.modal-header h4 { font-size:20px;}
	#sponsors img { margin-bottom:40px; margin-top:30px;}
}

@media (min-width: 768px)
{
    .modal-dialog {
        width: 800px;
        margin: 30px auto;
    }    
}