@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');

body { background-image: url("images/bg.png"); background-repeat: repeat-x; background-color: #fff; margin: 0; padding: 0; color: #222; font-family: 'Open Sans', sans-serif; font-size: 1em; line-height: 1.5em;	 }
div.container { width: 94%; max-width: 1200px; margin: 0 auto; padding: 0 3%;  }
div.top { width: 100%; display:block; margin: 0; padding: 30px 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 3.4em;  line-height: 1.1em; color:#0056a3; text-transform: uppercase;}
div.top-left{ float:left; display:block; padding: 15px 2% 15px 0; width:30%; }
div.top-left img { width:90%; }
div.top-right {  float:left; display:block; padding: 30px 0 0 0; width: 68%; }

div.left   { width: 46%; display:block;  margin: 0; padding: 10px 2%; float: left; }
div.right   { width: 46%; display:block; margin: 10px 0 20px 0; padding: 10px 2%; float: left;}
div.wide   { width: 96%; display:block; margin: 0; padding: 10px 2%; float: left; position: relative;}
div.box { width: 26.33%; display:block; margin: 0 1.5%; padding: 10px 2%; float: left; text-align: center; font-size: 1.6em; line-height: 1.2em; background-color: #afd7fb; border-radius: 10px; min-height: 280px;}



div.left-navi { display:block; float:left; width: 26%; padding: 30px 2% 0 2%;}
div.right-content {display:block; float:left; width: 60%; padding: 0 2%;}


div.footer {  width: 80%; display:block; margin: 0; padding: 30px 10%;  clear: both;   font-size: 1em; background-color: #729cc2; color: #fff;}
div.footer:after  {  clear: both;   content: "";  display: block;}
div.footer-left { float:left; display:block; padding: 15px 5% ; width:40%; }
div.footer-right {  float:left; display:block; padding: 15px 5% ;  width: 40%;}
div.footer-left img, div.footer-right img { padding: 10px 0; width: 90%; max-width: 200px; }




h1 { color: #222; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 2.4em; line-height: 1.1em;}	
h2 { color: #222; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.6em; line-height: 1.1em;}	
h3 { color: #222; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.2em; line-height: 1.1em;}	
span.green {color: #00796b;}

div.steps { background-color: #729cc2; padding: 15px 6% 25px 6%; border-radius: 8px; display:block; margin: 0 0 5px 0;   }
div.steps:after  {  clear: both;   content: "";  display: block;}
div.steps-left {font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 3.4em; line-height: 1.1em; color: #fff;  margin: 0 2% 0 0;  float:left; display: block; width:15%;  }
div.steps-right {color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.35em; float:left; display: block; width: 83%; vertical-align: middle;}


/*div.clr {clear:both; width: 100%;}*/
div.clear {clear:both; width: 100%; padding: 5px 0 0 0; margin: 5px 0 0 0; height:5px; }

div.line {clear:both; width: 100%; display: block; padding: 0; margin: 100px 0 0 0!important; border-top: 1px dotted #222;}
img.product { width: 90%; height: auto; padding: 10px 5%; margin: 0;}

a.ext:link, a.ext:visited { font-size: 1.2em; line-height: 1.5em; color:#fff; font-family: 'Montserrat', sans-serif; margin: 0 25px 0 0; padding: 10px 20px; text-decoration:none; background-color:#0056a3; width: auto; height: 60px; border-radius: 8px; text-align: center; }
a.ext:hover { text-decoration: none;  background-color: #00796b;}

a.ext-right:link, a.ext-right:visited { font-size: 1.2em; line-height: 1.5em; color:#fff; font-family: 'Montserrat', sans-serif; margin: 0 25px 0 0; padding: 10px 20px; text-decoration:none; background-color:#0056a3; width: auto; /*height: 60px;*/ border-radius: 8px; text-align: center; position:fixed; top: 10px; right: 0;}
a.ext-right:hover { text-decoration: none;  background-color: #00796b;}

a.pdf:link, a.pdf:visited { font-size: 1em; color:#0056a3; margin: 0; display: block; padding: 5px 0 5px 25px;  text-decoration:none; background-image:url(images/pdf.png); background-repeat: no-repeat;  }
a.pdf:hover { text-decoration: underline; }

a.navi-left:link,a.navi-left:visited { background-color: #0056a3; font-size: .9em; color:#fff; margin: 0 0 8px; display: block; padding: 8px 5% ; text-decoration:none; border-radius: 8px; }
a.navi-left:hover{text-decoration:none; color: #0056a3;  background-color: #8ecef1;}

a.white:link, a.white:visited { font-size: 1em; color:#fff;   text-decoration: underline; }
a.white:hover { text-decoration: none; }

/* -----------------------------------------------------------------------------------------*/
/* ------ Y O U T U B E  E M B E D  ----------------------------------------------*/
.video  { width: 99.5%; display: block; float:left; padding: 15px 1.5% ; margin: 0 .5% 5px 0;  }
.videoWrapper {
	margin: 10px 0 ;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/* ------ question & answer ----------------------------------------------------------------------------------*/
.dhtmlgoodies_question {	padding: 8px 0; display:block; height: inherit; margin: 0; width: 100%; clear:both; border-top: 1px dotted #222; }
.dhtmlgoodies_question:hover {	 cursor: pointer; }
.dhtmlgoodies_question h3 {	font-size: 1.2em; margin: 8px 0; }
.dhtmlgoodies_question h3:hover { color:#0056a3;}
.header-rivi-open { float: left; padding: 5px 0 0 0; width: 6%; min-width: 30px; display: block;  }
.header-rivi-name { float: left; padding: 0 0 0 2%; width: 80%; display: block;}
.dhtmlgoodies_answer {	display: block; visibility:hidden; height: auto;     width: 100%;  	clear:both; position:relative; line-height: 1.6em;}
.dhtmlgoodies_answer_content {		padding: 10px 3%; 	margin-bottom: 25px; 	 }
.dhtmlgoodies_answer_content img { width: 90%; padding: 15px 5%; }
.dhtmlgoodies_answer_content img.right { width: 45%; padding: 15px 0 15px 5%; float:right; }


table.tres { width: 100%;  border: 1px solid #ccc; font-size: .9em;}
table.tres th { font-weight: bold;}
table.tres td, table.tres th {  border: 1px solid #ddd; padding: 4px 1%;}

ul.nombre li { list-style-type: none;}


@media screen and (max-width: 800px) {
	div.top-left, div.top-right    { width: 100%; float:left;  padding: 10px 0; text-align: center; }
	div.left, div.right    { width: 100%; float:left;  padding: 10px 0 ; }
	div.top-left img { width:auto!important; }
	
}
@media screen and (max-width: 600px) {
	div.top { font-size: 2.4em;  line-height: 1em;}
	h1 { font-size: 2em; line-height: 1.1em;}	
	h2 { font-size: 1.4em; line-height: 1.1em;}
	div.footer-left { padding: 10px 5%; width: 90%; }
	div.footer-right {  padding: 10px 5%; width: 90%;}

	div.left-navi { display:block; float:left; width: 96%; }
	div.right-content {display:block; float:left; width: 96%;}
	a.navi-left:link,a.navi-left:visited {  margin: 0 0 5px 0; width: 90%; }
	a.navi-left:hover{text-decoration:none; color: #0056a3;  background-color: #8ecef1;}
	
	.dhtmlgoodies_answer_content img.right { width: 90%!important; padding: 15px 5%; float:right; }
	a.ext:link { font-size: 1em;}
	div.steps-left {font-size: 2.4em; }
	div.steps-right {font-size: 1.1em; }
	
}

@media screen and (max-width: 480px) {
div.top-left img { width: 60% ; }
	div.top { font-size: 2em;  line-height: 1em;}
h1 { font-size: 1.6em; line-height: 1.1em;}	
h2 { font-size: 1.1em; line-height: 1.1em;}
}