/**


xs
<600
.d-xs-none


sm
600  - 1000
.d-xs-none

md
1000 - 1300
.d-md-none

lg
1300+ 
.d-lg-none




*/

@charset "UTF-8";

	
@media (min-width: 1301px) {	
	.d-lg-none	{display:none !important;}
	.d-md-none	{display:block;}
	.d-sm-none	{display:block;}
	.d-xs-none 	{display:block;}
}
	


/**- ---------------------------------------------------------------------------------- - */

@media (min-width: 1000px) and (max-width: 1300px) {

	.d-xl-none 	{display:block;}
	.d-lg-none	{display:block;}
	.d-md-none	{display:none !important;}
	.d-sm-none	{display:block;}
	.d-xs-none 	{display:block;}
	

											
.image-banner-container {background: url(../images/flor7-phone.jpg) no-repeat 0 0 scroll; background-size: cover; float:left; width:100%;}
	
body {font-size:22px; color:black; line-height: 1.5em; font-weight: 300;}

h1 {font-size: 2.7em; margin: 0; text-align:center; line-height: 1.25em;}    
h2 {font-size: 1.6em; margin: 0; text-align:center;  font-weight:bold; line-height: 1.5em; color: inherit;}   
h3 {font-size: 1.4em;  margin: 3em 0 1em 0; text-align:center;}
h4 {font-size: 1.2em;  margin:0; text-align:center;}

.section-content {padding: 2em 4em;}

.banner {float:left; width:100%;}

.banner .canvas-container {width:100%; float:left; height: 70vh; min-height: 300px; max-height: 700px; border-radius: 6px; display:block; background: white; margin-top: 0px;}

.banner .image-container {width:40%; float:left; padding:	0px; margin:0 0 0 0;  display:block; height:100%; position:relative;}

/**.banner .image-container img {max-width: 100%; max-height: 100%; margin-top:0em;	    position: absolute;    left: 50%;    transform: translateX(-50%);    display: block; bottom:0;}**/


.banner .text-container {width:100%; float:left; position:relative; height: 100%; position:relative; margin:0 0 0 0;}
.banner .text-container .text {width:100%; }

/**.banner  h2.main-banner {font-size: 56px;    line-height: 1.3em;    font-weight: 800;    letter-spacing: -0.005em;	text-transform:none;    font-family: Montserrat, Lato,sans-serif;    -webkit-text-fill-color: transparent;	background-image: linear-gradient(160deg,white, white,white, white);	text-align: center;     bottom:0%;	-webkit-background-clip: text;    background-clip: text;    box-decoration-break: clone;}
**/

.info-pill-payload { min-height: 580px;}
.info-pill .longb {height: 50em;}
.info-pill .longb .image-container {height:250px;}
.list-item {padding: 0.2em 0;}


.odilon-logo .toolbar-item,
.main-menu .toolbar-item {width:100%; text-align:center; padding: 10px 0px;}


}



/**- ---------------------------------------------------------------------------------- - */


@media (max-width: 1000px) {
	.d-xl-none 	{display:block;}
	.d-lg-none	{display:block;}
	.d-md-none	{display:block;}
	.d-sm-none	{display:none !important;}
	.d-xs-none 	{display:block;}
	

.odilon-logo {float:left; font-size:1em;}

.odilon-logo .toolbar-item,
.main-menu .toolbar-item {width:100%; text-align:center; padding: 10px 0px;}


body {font-size:21px; }
h1 {font-size: 2.5em; margin: 0; text-align:center; line-height: 1.25em;}    
h2 {font-size: 1.8em; }   
h3 {font-size: 1.25em;  margin: 3em 0 1em 0; text-align:center;}
h4 {font-size: 1em;  margin:0; text-align:center;}


.main-banner-container {float:none; width:100%;  margin:auto;  padding:6em 10%;}	

.banner {float:left; width:100%;}

.banner .canvas-container {width:100%; float:left; height: auto;   border-radius: 6px; display:block; background: white; margin-top: 0px;}
.banner .image-container {width:100%; float:left; padding:	0px; margin:0 0 0 0;  display:block; height: calc( 100% - 280px); position:relative;}
.banner .image-container img {max-height: 100%;}

.banner .text-container {width:100%; float:left; position:relative;  position:relative; margin:0 0 0 0;}
.banner .text-container .text {width:90%; min-width: 400px;}

.banner  h2.main-banner {font-size: 32px;    line-height: 1.15em;    font-weight: 800;    letter-spacing: -0.005em;	text-transform:none;    font-family: Montserrat, Lato,sans-serif;    -webkit-text-fill-color: transparent;	text-align: center;     	-webkit-background-clip: text;    background-clip: text;    box-decoration-break: clone;}


.info-pill {width:100%; padding:1em 0; float:left; min-height:auto;}
.info-pill-payload {float:left; width:100%; padding: 1.5em; float:left; border-radius: 6px; height: initial; min-height: 100px;}

.left-pill {border:1px solid #dddddd; border-bottom:none;}
.right-pill {border:1px solid #dddddd;}



.image-container {width:100%; height: auto !important; float:left; overflow: hidden; position: relative; border-radius:6px;}



.info-pill .longb {height: initial;}
.info-pill .longb .image-container {height:250px;}
.list-item {padding: 0.2em 0;}
}



@media (max-width: 600px) {

	.d-xl-none 	{display:block;}
	.d-lg-none	{display:block;}
	.d-md-none	{display:block;}
	.d-sm-none	{display:block;}
	.d-xs-none 	{display:none !important;}
	
	.main-banner-container {float:none; width:100%;  margin:auto; padding:3.5em 5% 5em 5%;}	
	.section-content {padding: 2em 1.5em;}
	
	.hidden-lg {display:block;}
	.hidden-xs {display:none;}
		
	.button-toolbar-item .btn{width:100%; float:left; margin: 0;    box-sizing: border-box; text-align:center;}
	.button-toolbar-item {width:100%;}
	.toolbar-item {width:100%; float:left; text-align:center;  font-weight:300; padding: 5px 10px;}
	
	.info-pill .longb {height: initial;}
	.info-pill .longb .image-container {height:200px;}
	
	body {font-size:15px; }
	h2 {font-size: 1.4em; }   
	
	.banner .text-container .text {min-width: initial;}
	.banner  h2.main-banner {font-size: 1.5em; line-height:1.3em;}
	.banner .canvas-container {padding: 0 1em;  min-height: initial; }
	.banner .image-container img {height: 400px; width:initial;}

	.group-list {padding: 1em 0;}
	.list-item {padding: 0.2em 0;}


}