@CHARSET "ISO-8859-1";

/* Reset CSS

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td {

    padding: 0;

    margin: 0;
	font-family: 'Roboto', sans-serif;

}



.single-image {

max-width: 100%;

width: 100%;

position:relative;

}

a{

	text-decoration:none;

}

table {

    border-spacing: 0;

}

fieldset,img {

    border: 0;

}

h2{

font-family: Montserrat;

    letter-spacing: 0px;

    font-size: 32px;

    line-height: 50px;

    font-weight: 700;

}

address,caption,cite,code,dfn,em,strong,th,var {

    font-weight: normal;

    font-style: normal;

}

strong{

	font-weight: bold;

}

ol,ul {

    list-style: none;

    margin:0;

    padding:0;

}

caption,th {

    text-align: left;



}

h1,h2,h3,h4,h5,h6 {

    

    

    margin:0;

    padding:0;

    color:#444;

	 letter-spacing: 0;

    -webkit-font-smoothing: antialiased;

}

q:before,q:after {

    content:'';

}

abbr,acronym { border: 0;

}





/* Custom CSS

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

body{

	font-family: Montserrat;

	color: #333;

	color: rgba(0,0,0,0.5);

}

.wrap{

	margin-left: auto;

	margin-right: auto;

	width: 960px;

	position: relative;

}

h1{

	font-family: Montserrat;

    text-transform: none;

    letter-spacing: 0px;

    font-size: 45px;

    line-height: 55px;

    font-weight: 700;

	color: #444;

}

p{

	font-size: 2em;

}

.intro p{

	

    /*padding-bottom: 10px;*/

    font-size: 14px;

    line-height: 1.42857143;

    font-weight: 300;
	
	font-family: 'Roboto', sans-serif;

    /*margin-bottom: 2.5rem;*/

	color:#676767;

}

.intros p{

	

    /*padding-bottom: 10px;*/

    font-size: 14px;

    line-height: 1.42857143;

    font-weight: 300;

    /*margin-bottom: 2.5rem;*/

	color:#676767;
	font-family: 'Roboto', sans-serif;

}

.introsu p{

	

    /*padding-bottom: 10px;*/

    font-size: 14px;

    line-height: 1.42857143;

    font-weight: 300;

    /*margin-bottom: 2.5rem;*/

	color:#676767;
	font-family: 'Roboto', sans-serif;

}

.section{

	text-align:center;

}

#menu li {

	display:inline;

	margin: 1px;

	color: #000;

	/*background:#fff;

	background: rgba(255,255,255, 0.5);

	-webkit-border-radius: 10px;

            border-radius: 10px;*/

			font-family: muli;

    text-transform: uppercase;

			float: left;

			font-weight: 700;

			list-style: none outside none;

}

#menu li.active{

	background:#666;

	background: rgba(0,0,0, 0.5);

	color: #fff;

}

#menu li a{

	text-decoration:none;

	color: #000;

}

#menu li.active a:hover{

	color: #000;

}

#menu li:hover{

	background: rgba(255,255,255, 0.8);

}

#menu li a,

#menu li.active a{

	padding: 9px 18px;

	display:block;

}

#menu li.active a{

	color: #fff;

}

#menu{

	position:fixed;

	display: flex;

	gap: 1em;

	font-size: 10px;

	left:50%;

	/*top:0;

	

	height: 40px;

	z-index: 70;

	width: 100%;

	padding: 0;

	margin:0;*/

}

.logo {

 font-size: 32px;

 /*padding-left: 150px;*/

}

.twitter-share-button{

	position: fixed !important;

	z-index: 99;

	right: 149px;

	top: 9px;

}

#infoMenu{

	height: 20px;

	color: #f2f2f2;

	position:fixed;

	z-index:70;

	bottom:0;

	width:100%;

	text-align:right;

	font-size:0.9em;

	padding:8px 0 8px 0;

}

#infoMenu ul{

	padding: 0 40px;

}

#infoMenu li a{

	display: block;

	margin: 0 22px 0 0;

	color: #333;

}

#infoMenu li a:hover{

	text-decoration:underline;

}

#infoMenu li{

	display:inline-block;

	position:relative;

}

#examplesList{

	display:none;

	background: #282828;

	-webkit-border-radius: 6px;

	-moz-border-radius: 6px;

	border-radius: 6px;

	padding: 20px;

	float: left;

	position: absolute;

	bottom: 29px;

	right: 0;

	width:822px;

	text-align:left;

}

#examplesList ul{

	padding:0;

}

#examplesList ul li{

	display:block;

	margin: 5px 0;

}

#examplesList ul li a{

	color: #BDBDBD;

	margin:0;

}

#examplesList ul li a:hover{

	color: #f2f2f2;

}

#examplesList .column{

	float: left;

	margin: 0 20px 0 0;

}

#examplesList h3{

	color: #f2f2f2;

	font-size: 1.2em;

	margin: 0 0 15px 0;

	border-bottom: 1px solid rgba(0, 0, 0, 0.4);

	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);

	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);

	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);

	padding: 0 0 5px 0;

}







/* Demos Menu

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

 #demosMenu{

	position:fixed;

	top: 20px;

	right:20px;

	z-index: 999;

	padding: 5px 10px;

 }



/* Buttons

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

#download a{

    text-decoration: none

}

#download,

#download:hover {

    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)

}

.button {

    margin: 20px 0 0 0;

    vertical-align: middle;

    display: inline-block

}



.button a {

    color: #fff;

    background: rgba(0,0,0,0.4);

    padding: 15px 30px;

    border-radius: 5px;

    display: inline-block;

}



.button a:hover {

    color: #316f68;

    background-color: #fff

}





/* Extensions preview menu

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

.preview-extensions-menu{

	position: fixed;

    top: 0;

    right: 0;

    z-index: 99;

    border-top: 0;

    box-shadow: 1px 0px 3px rgba(0,0,0,0.8);

}

.preview-extensions-menu li{

	display: inline-block;

	margin: 0;

}

.preview-extensions-menu li a{

	padding: 15px 25px;

	display: block;

}

.preview-buy-extension{

    background: #3cc63c;

}

.preview-more-extensions{

	background: #fff;

}

.preview-buy-extension a{

	color: #fff;

}

.preview-buy-extension:hover{

	background-color: #1a961a;

}

.preview-more-extensions a{

	color: #333;

}



.code{

	background: rgba(255,255,255,0.7);

	padding: 0px 5px;

	line-height: 25px;

}





/* Style for our header texts

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

h1{

	font-size: 5em;

	font-family: Montserrat;

	color: #fff;

	margin:0;

}

.section p,

.intro p{

	color: #fff;

	/*font-family: 'Roboto', sans-serif;*/
	font-family: Montserrat;
}

.intros p{

	color: #fff;

}



/* Centered texts in each section

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

.section{

	text-align:center;

}





/* Bottom menu

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

#infoMenu li a {

	color: #fff;

}



/* Sections backgrounds

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

#section0{

/*	background-image: linear-gradient(128deg,#40afff,#3f61ff);*/

background-image: linear-gradient(128deg,#efeeee,#e1dede);

}



#section1{

	/*background-image: linear-gradient(128deg,#fff,#fff);*/

	/*background-image: url("../img/prod-bg.jpg");*/
	/*background-color: aliceblue;*/
	background: linear-gradient(110deg, #c1dffc 60%, #aad4fc 60%);

}

#section2{

	background-image: linear-gradient(128deg,#efeeee,#e1dede);

}





#section3{

    background: rgb(140,198,63);
    background: linear-gradient(0deg, rgba(140,198,63,1) 5%, rgba(15,117,189,1) 5%);
	/*background-image: linear-gradient(128deg,#eaf1fd,#eaf1fd);*/
	/*background-image: url("../img/sustain-bg.jpg");
	background-color: white;*/
	

}

#section4{

	background-image: linear-gradient(128deg,#eaf1fd,#eaf1fd);

}

/*#section5{

	background-image: linear-gradient(128deg,#eaf1fd,#eaf1fd);
	background: -webkit-linear-gradient(90deg, #03d45d 50%, #00923f 40%);
  background: -o-linear-gradient(90deg, #03d45d 50%, #00923f 40%);
  background: -moz-linear-gradient(90deg, #03d45d 50%, #00923f 40%);
  background: linear-gradient(90deg, #03d45d 50%, #00923f 40%);

}*/

#section6{

	/*background-image: linear-gradient(128deg,#ffffff,#ffffff);*/
	background-image: url("../img/sustain.jpg");
		background-repeat: no-repeat;

		background-size: cover;

}

.column-overview {

  float: left;

  width: 50%;

  padding-bottom:20px;

  

}

/* Stops the float property from affecting content after the columns */

.columns-overview:after {

  content: "";

  display: table;

  clear: both;

}

.column-overview {

  width: 100%;

  padding-top:20px !important;

}

@media (min-width: 600px) {

  .column-overview {

    float: left;

    width: 50%;

  }



  .row-bg-overlay {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    content: ' ';

    z-index: 2;

    backface-visibility: hidden;

}

  /* Stops the float property from affecting content after the columns */

  .columns-overview:after {

    content: "";

    display: table;

    clear: both;

  }

}

/* Create four equal columns that floats next to each other */

.column {

  float: left;

 /* width: 25%;



  padding-left: 1%;

    padding-right: 1%;

  padding: 10px;

  height: 300px;  Should be removed. Only for demonstration */

  

  column-gap: 25px;

}



/* Clear floats after the columns */

.row:after {

  content: "";

  display: grid;

  clear: both;

 

}

.row {

max-width: 1000px;

  margin-right: auto;

  margin-left:auto;

   column-gap: 20px;

  }



  .row{

   /*padding: 2em 4em;*/

    column-gap: 20px;

}



/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  #grid {

    width: 100%;

  }

}

#grid {

  display: grid;

  height: 100px;

 grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));

  grid-template-rows: 100px;

  column-gap: 20px;

}



#grid > div {

  border: 0px solid green;

  background-color: lime;

}





.inner {

    padding-left: 3px;

    padding-right: 0px;

    padding-top: 67px;

    width: 100%;

    align-self: flex-end;

}

.inner {

    position: relative;

    text-align: left;

    color: #fff;

    z-index: 10;

    padding-bottom: 15%;

}

.heading-wrap {

    transition: opacity .65s cubic-bezier(.05,0.2,.1,1), transform .65s cubic-bezier(.05,0.2,.1,1);

	padding-top:60px;

}

.inner * {

    color: #fff;

}

.hover-content {

    opacity: 0;

    position: absolute;

    bottom: 0;

    left: 0;

    margin-top: 10px;

    transform: translateY(20px);

}

 .hover-content {

    line-height: 1.5em;

    max-width: 80%;

    transition: opacity .18s cubic-bezier(.05,0.2,.1,1), transform .18s cubic-bezier(.05,0.2,.1,1);

}

.box-bg {

    transition: transform 1s ease, opacity 0.5s ease 0.25s;

    transform: scale(1);

    -webkit-transform: scale(1);

}

.box-bg {

    -webkit-transition: transform .6s cubic-bezier(0.24,1,0.30,1), opacity 0.55s ease 0.25s;

    transition: transform .6s cubic-bezier(0.24,1,0.30,1), opacity 0.55s ease 0.25s;

    opacity: 1;

}



 .box-bg {

    

    top: 0;

    left: 0;

    height: 200px;

    background-size: cover;

    z-index: 1;

    background-position: center;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transition: all .6s cubic-bezier(0.24,1,0.30,1);

    -webkit-transition: all .6s cubic-bezier(0.24,1,0.30,1);

}

.box-bg:before {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 85%;

    display: block;

    z-index: 10;

    content: '';

    background: linear-gradient(to bottom,rgba(15,15,15,0),rgba(15,15,15,.75) 100%);

    transition: opacity .65s cubic-bezier(.05,0.2,.1,1);

}

@media (min-width: 600px){

.box-bg {

    left: 100%;

	float: left;

}

}

@media (min-width: 992px)

.col-md-6 {

    width: 50%;

}

@media (min-width: 992px)

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

    float: left;

}

@media (min-width: 768px)

.col-sm-12 {

    width: 100%;

}

@media (min-width: 768px)

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {

    float: left;

}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

    position: relative;

    min-height: 1px;

    padding-right: 15px;

    padding-left: 15px;

}