@charset "UTF-8";
a{text-decoration:none}
img{border:none;border-style:none}

html, body {
	margin:0;
	padding:0;
	height:100%;
	font-family: 'Nunito', sans-serif;
}

#container{
	display:block;
	top:0;
	left:0;
	width:100%;
	height:100%;
/* 	padding-top:110px; */
}

#inner_wrapper {
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0 30px;
	display: flex;
	flex-direction: column-reverse;
	margin-bottom:100px
}

@media only screen and (min-width:375px) {
	#inner_wrapper {
		padding:0 50px;
	}
}

@media only screen and (min-width:1000px) {
	#inner_wrapper {
		max-width: 1000px;
		padding:0 50px;
		flex-direction: row;
	}
}



.col50{
	flex: 50%;
	width:100%;
	position:relative;
	padding:0;
	margin-top:40px;
}

.col_inner {
	position:absolute;
	top:0%;
	margin-top:0%;
}

.vc {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (min-width:1000px) {
	.col_inner {
		top:50%;
		margin-top:-50%;
	}
}

.col_left {
	margin-top:310px;
}

@media only screen and (min-width:375px) {
	.col_left {
/* 		margin-top:250px; */
	}
	.col50{
/* 		margin-top:0px; */
	}

}

@media only screen and (min-width:414px) {
	.col_left {
		margin-top:220px;
	}
}

@media only screen and (min-width:768px) {
	.col_left {
		margin-top:220px;
	}
}

@media only screen and (min-width:1000px) {
	.col_left {
		margin-top:0px;
	}
}

#logo {
	height:30px;
	margin-top: 20px;
	margin-left: 20px;
}

@media only screen and (min-width:768px) {
	#logo {
		margin-left: 50px;
	}
}

#phone, #phone_display {
	position:absolute
}

.screen {
	position:absolute;

}

#screen3msk {
/* 	background-color: red; */
	overflow: hidden;
	width: 650px;
	top: 157px;
	height: 1080px;
}

.circle {
	background-color: #ee556a;
	border-radius: 50%;
	width:100px;
	height:100px;
	position:absolute;
	top:200px;

/* 
	
	left:-30px;
 */
}

#circle_wrapper {
	position:absolute;
	left:230px
}

@media only screen and (min-width:375px) {
	#circle_wrapper {
		left:250px
	}
}

@media only screen and (min-width:414px) {
	#circle_wrapper {
		left:300px
	}
}

@media only screen and (min-width:768px) {
	#circle_wrapper {
		left:150px
	}
}

@media only screen and (min-width:1000px) {
	#circle_wrapper {
		left:0px
	}
}







/* header */

header {
	position: fixed;
	height:140px;
	width:100%;
	background-color: #ffffff;
	top:0;
	z-index:909;
}

.nav {
	margin:0;
	padding:0;
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 50px;
/* 	width:90%; */
}


header ul > li {
	list-style: none;
/* 	display:inline-block; */
	margin-left: 0px;
	padding:0;
	margin:0;
}

@media only screen and (min-width:375px) {
	.nav {
		
	}
	
	header ul > li {
		display:inline-block;
	}
	
	header ul > li:not(:first-child){
		margin-left: 10px;
	}
	
	header {
		height:130px;
	}
}

@media only screen and (min-width:710px) {
	.nav {
		margin-top: 30px;
		margin-left: 40px;
		float: right;
	}
	
	header ul > li {
		display:inline-block;
		margin-left: 20px;
	}
	
	header {
		height:100px;
	}
}


a {
	color: #2e3033;
}

a.active, a:hover {
	color: #ee556a;
}

p {
	font-family: 'Open Sans', sans-serif;
}










/* FEATURE */

h1 {
	font-size: 1.7em !important;
}

@media only screen and (min-width:375px) {
	h1 {
		font-size: 2em !important;
	}
}


.feat_list {
	list-style: none;
	display:inline-block;
	margin: 0;
	padding: 0;
	margin-top:30px;
	margin-bottom: 100px;
	width:80%;
}

.feat_list li{
	margin-bottom: 20px;
}

.icon {
	border: 1px solid #ee556a;
	border-radius: 50%;
	width:40px;
	height:40px;
	float:left;
	background-size: cover;
	background-position: 50% 50%;
}

.icon-grid {
	background-image: url('../img/icon-grid.png');
}

.icon-list {
	background-image: url('../img/icon-list.png');
}

.icon-profile {
	background-image: url('../img/icon-profile.png');
}


.feat {
/* 	display:inline-block; */
	margin: 0;
	padding: 0;
	margin-left: 70px;
}

.feat h2{
	margin: 0;
	padding: 0;
	color: #ee556a
}

.feat p{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
}


@media only screen and (min-width:768px) {
	h1.sep-h{font-size:5em !important;margin:0;padding:0;}
}













/* PAGES */

.txt_wrapper {
	width:90%;
	max-width: 1000px;
	margin:0 auto;
	padding-bottom: 100px;
	padding-top: 150px;
}

.txt_wrapper ul {
	padding:0 15px;
	margin:0;
	list-style: none;
}

.txt_wrapper ul li::before {
	display: inline-block;
	width: 1em;
	margin-left: -1.0em;
	content: "\2022";
	color: #ee556a;
	font-weight: bold;
}


@media only screen and (min-width:728px) {
	.txt_wrapper {
		padding-top: 100px;
	}

}

@media only screen and (min-width:768px) {
	.txt_wrapper {
		width:80%;
	}

}












/* FOOTER */

footer {
	position: fixed;
	height:40px;
	padding-top: 10px;
	width:100%;
	background-color: #ffffff;
	bottom:0;
	text-align: right;
	z-index:808;
}

@media only screen and (min-width:375px) {
	footer {
		padding-top: 20px;
		height:80px;
	}
}

@media only screen and (min-width:1000px) {
	footer {background-color: rgba(255,255,255,0)}
}

.store_wrapper {
	margin-right: 50px;
}

.btn_store {
	width:100px;
	margin-left: 15px;
}

@media only screen and (min-width:375px) {
	.btn_store {
		width:130px;
	}
}

@media only screen and (min-width:768px) {
	.btn_store {
		width:150px;
	}
}