@charset "utf-8";
/* CSS Document */

body {font-family: proxima-nova, sans-serif;padding: 0;margin: 0;}
.theme{
    width: 100%;
    text-align: center;
    background-color: #01c525;
    display: block;
}
.logo {
    width: 80%;
    max-width: 280px;
    display: block;
    margin: 0 auto;
    padding-top: 60px;
    z-index: 100;
    position: relative;
}
.slogan {
    width: 80%;
    max-width: 390px;
    display: block;
    margin: 0 auto;
    padding-top: 280px;
}
.hashes{
    width: 90%;
    margin: 0 auto;
}
.hash {
    max-width: 320px;
    width: 95%;
    padding: 10px;
}
.text {}
.intro {
    color: #fff;
    width: 85%;
    max-width: 900px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 30px;
    font-weight: 500;
}
.patame {
    font-size: 30px;
    font-weight: 700;
    padding: 30px 0;
}
.patame img {
    width: 30px;
    padding-right: 5px;
    /* display: inline-block; */
}
.functionA {color: #56ff1b;}
.functionB {color: #cce0ee;}
.functionC {color: #eec09e;}
.functionD {color: #00fff0;}




.devices {
    margin: 0 auto;
    width: 90%;
    top: -160px;
    display: flex;
    justify-content: space-evenly;
    position: relative;
}

.device {
    /* flex-basis: 20%; */
    margin: 0 2.5%;
}

.device img {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    display: block;
    /* padding-bottom: 20px; */
    align-self: flex-end;
}

.description {
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    padding-bottom: 10px;
}

.key-features {
    text-align: left;
    font-size: 14px;
    line-height: 17px;
    color: #414142;
    padding-bottom: 10px;
}

.key-features span {
    color: #15ae4c;
}

.features {
    font-size: 12px;
    line-height: 16px;
    color: #414142;
}

span.dashes {
    letter-spacing: -1px;
}

.features p {
    margin-top: -4px;
}

.key-features p {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

.device-img {
    height: 290px;
    padding-bottom: 20px;
    display: flex;
}

.slogans {
    width: 90%;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
    margin-top: -50px;
    position: relative;
    z-index: 3;
}

.slogan-item {
    width: 20%;
    height: auto;
    display: block;
}
.slogan-item img {width: 100%}


.footer {
    color: #016547;
    text-align: center;
    font-size: 21px;
    line-height: 27px;
    font-weight: 500;
    padding-bottom: 100px;
    background: url(../images/footer-left.png) bottom left no-repeat,url(../images/footer-center.png) bottom center no-repeat,url(../images/footer-right.png) bottom right no-repeat, #ffd248;
}

h2 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
}

h2 span {
    color: #008a44;
}

.footer-text {
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
}

a {
    color: #016547;
    font-weight: 700;
    white-space: nowrap;
}

.theme-content {
    position: relative;
    margin-top: -200px;
    padding-bottom: 180px;
    z-index: 5;
}

.carousel {
    position: absolute;
    text-align: center;
    width: 100%;
    overflow: hidden;
}



.carousel img {
    width: 100vw;
    max-width: 1600px;
    margin: 0 auto;
    display: block;
}


            .carousel > img {position: absolute;left: 0;top: 0;display: none;}
      .carousel > img:nth-child(2) { display: block; }


.theme-shadow {
    position: relative;
    height: 200px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 4;
}

.devices-holder {position: relative;background-color: #fff;z-index: 2;}

.asterisk {font-size: 9px;line-height: 13px;display: block;margin-top: 30px;padding: 0;}



@media only screen and (max-width: 1024px) {
	
	.device-img {height: 200px;}
	.theme-content {    padding-bottom: 150px;}
	.devices {width: 100%;top: -110px;}
	.logo {max-width: 230px;padding-top: 30px;}
	.slogan {padding-top: 100px;}
	.intro br { content: " ";     float:right; }
	
}

@media only screen and (min-width: 1600px) {
	.carousel {max-width: 1600px; left:calc(50vw - 800px);}	
	.over-shadow {
    box-shadow: inset 0px 0px 125px 125px rgba(0,196,37,1);
    position: absolute;
    height: 100%;
    z-index: 1;
    /* left: 0; */
    /* top: 0; */
    width: 100vw;
    max-width: 1600px;
    /* margin: 0 auto; */
}
}


@media only screen and (max-width: 768px) {
	
	.devices {top: -120px;}
	.slogan {   padding-top: 200px;}
	
}

@media only screen and (max-width: 700px) {
	.devices {
    flex-wrap: wrap;
    top: -70px;
}
	.device {flex-basis: 40%;margin-bottom: 50px;}
		.slogan {padding-top: 40px;}

	.slogans {    flex-wrap: wrap;}	
	.slogan-item {    width: 40%;    padding-bottom: 50px;}
	.footer {    background: url(../images/footer-center.png) bottom center no-repeat #ffd248;}
}

@media only screen and (max-width: 550px) {
	.carousel img {
    width: 150vw;
    margin-left: -15%;
}
	.device {   flex-basis: 80%; }
	.device-img {height: auto;}
	.slogans-item {width: 80%;margin: 0 auto;}
	.description{
    font-size: 20px;
}
	.key-features{
    font-size: 18px;
    line-height: 23px;
}
	.features{
    font-size: 14px;
    line-height: 20px;
}
	.logo {    padding-top: 20px;}
	
}