html,
body {
	height: 100%;
}

header,
section {
	padding: 80px 0;
}

.cssanimations .animated,
.cssanimations .animated {
	opacity: 0;
}

body {
    background: url('../images/triangoli.png') top;
    background-size: 100%;
	background-repeat: no-repeat;
}

/**************
 * HEADER     *
 **************/

.nomaHeader {
	position: relative;
	height: 100%;
}

.nomaHeader .arrow {
	border-radius: 200px 200px 200px 200px;
	-moz-border-radius: 200px 200px 200px 200px;
	-webkit-border-radius: 200px 200px 200px 200px;
	border: 1px solid #B5B5B5;
	width: 60px;
	height: 60px;
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -30px;
	text-align: center;
	cursor: pointer;
}

.ie8 .nomaHeader .arrow {
	display: none;
}

.nomaHeader .arrow,
.nomaHeader .arrow .glyphicon  {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.nomaHeader .arrow:hover {
	border: 1px solid #00B2B8;
}
.nomaHeader .arrow:hover .glyphicon {
	color: #e35d2d;
}

.nomaHeader .glyphicon{
	line-height: 60px;
	color:#00B2B8;
}

.nomaHeader .content {
	position: absolute;
	width: 100%;
	margin-top: -250px;
	top: 50%;
	z-index: 1;
}

.nomaHeader .title {
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.nomaHeader .subtitle {
	margin-bottom: 0;
	font-size: 26px;
	text-align: center;
	font-family: 'latolight';
	font-weight: 200;
	padding: 60px 0;
	color: #FF8E66;
	text-rendering: optimizeLegibility;
}

.highresdisplay .nomaHeader .subtitle {
	font-family: 'latoregular';
}

.nomaHeader .nomafia {
	color: black;
	font-weight: 500;
	font-family: 'latoregular';
}

.nomaHeader .storeButton {
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	height: 60px;
}

.ie8 .nomaHeader .storeButton{
    background-size: contain;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/lib/backgroundsize-ie8/backgroundsize.htc);
}


.nomaHeader .googleplay{
	background-image: url('../images/googleplay_btn.png');
	background-position: center right;
}

.nomaHeader .appstore {
	background-image: url('../images/appstore_btn.png');
	background-position: center;
}

.nomaHeader .ms {
	background-image: url('../images/ms_btn.png');
	background-position: center left;
}

/**************
 * PHONE      *
 **************/

.phone {
	position: relative;
}

html:not(.csstransforms) .phone {
	background: url('../images/darkBackround_center.png');
	background-size: cover;
	background-repeat: no-repeat;
}

html.ie8:not(.csstransforms) .phone {
	background: none;
}

.csstransforms .phone:before {
	content: '';
	-moz-transform: skewY(11deg);
	-webkit-transform: skewY(11deg);
	-o-transform: skewY(11deg);
	-ms-transform: skewY(11deg);
	transform: skewY(11deg);
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: #2c2c2c;
	top:53%;
}

.phone .smartphoneContainer {
	position: relative;
}

.phone .smartphone {
	width: 100%;
	margin-top: 100px;
}

.phone .text {
	right: 0;
	top: 0;
	width: 50%;
	color:black;
	position: absolute;

}

.phone .text .title {
	font-family: 'latolight';
	font-weight: 300;
	font-size: 40px;
	text-align: right;
	color: #00B2B8;
}

.phone .text p {
	font-family: 'latolight';
	font-weight: 200;
	font-size: 22px;
	text-align: right;
	color:black;
}

/**************
 * VIDEO      *
 **************/

.videoVimeo .title {
	font-family: 'latolight';
	font-weight: 300;
	font-size: 40px;
	text-align: center;
	color: #e35d2d;
}

.videoVimeo p {
	font-family: 'latolight';
	font-weight: 200;
	font-size: 22px;
	text-align: center;
	color: white;
	margin-bottom: 60px;
}

.videoVimeo {
	background-color: #2c2c2c;
}

.videoVimeo .responsiveVideo {
	height: 0;
	padding-top: 0;
	padding-bottom: 67.5%;
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
}

.videoVimeo .responsiveVideo embed,
.videoVimeo .responsiveVideo iframe,
.videoVimeo .responsiveVideo object,
.videoVimeo .responsiveVideo video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

/***************
 * DESCRIPTION *
 ***************/

.description {
	background-color: #2c2c2c;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c2c2c+0,424242+100&1+0,0.81+100 */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjQyNDIiIHN0b3Atb3BhY2l0eT0iMC44MSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/
	/*background: -moz-linear-gradient(top,  rgba(44,44,44,1) 0%, rgba(66,66,66,0.81) 100%); /* FF3.6+ */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,44,44,1)), color-stop(100%,rgba(66,66,66,0.81))); /* Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(top,  rgba(44,44,44,1) 0%,rgba(66,66,66,0.81) 100%); /* Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(top,  rgba(44,44,44,1) 0%,rgba(66,66,66,0.81) 100%); /* Opera 11.10+ */
	/*background: -ms-linear-gradient(top,  rgba(44,44,44,1) 0%,rgba(66,66,66,0.81) 100%); /* IE10+ */
	/*background: linear-gradient(to bottom,  rgba(44,44,44,1) 0%,rgba(66,66,66,0.81) 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#cf424242',GradientType=0 ); /* IE6-8 */
	padding-bottom: 140px;
}

.i9 .description {
	/*filter: none;*/
}

.description .icon {
	width: 55px;
}

.description .title1,
.description .title2,
.description .title3  {
	line-height: 45px;
    display: inline;
    margin-left: 15px;
    padding: 0;
    vertical-align: middle;
    font-family: 'latoregular';

}

.description .title1 {
	color: #01b4b9;
}

.description .title2 {
	color: #949e24;
}

.description .title3  {
	color: #e25e37;
}

.description p {
	margin-top: 20px;
	color: white;
	font-family: 'latothin';
	font-weight: 200;
	font-size: 16px;
	line-height: 32px;
}

.description a,
.description a:active,
.description a:hover,
.description a:focus,
.description a:visited
 {
 	outline: none!important;
 	cursor: pointer;
 	text-decoration: none;
 	color: #e25e37;
 	font-weight: bold;
}

/***************
 * SCREENSHOTS *
 ***************/

.description .imageillegal {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100%;
max-width: 500px;
}

.imageillegal {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100%;
max-width: 500px;
}



.screenshots {
	position: relative;
	padding: 0;
	margin-bottom: -140px;
	text-align: center;
}

.screenshots .screen {
	position: relative;
	top:-40px;
	width:100%;
}

/***************
 * LINKS	   *
 ***************/

.links {
	background-color: #E4E4E4;
}

.links .subtitle {
	font-size: 26px;
	text-align: center;
	font-family: 'latothin';
	font-weight: 200;
	padding: 60px 0;
	color: #4C4C4C;
	text-rendering: optimizeLegibility;
}

.highresdisplay .links .subtitle {
	font-family: 'latoregular';
}

.links .nomafia {
	color: black;
	font-weight: 500;
}

.links .storeButton {
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	height: 60px;
}

.ie8 .links .storeButton {
    background-size: contain;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/lib/backgroundsize-ie8/backgroundsize.htc);
}

.links .googleplay {
	background-image: url('../images/googleplay_btn.png');
	background-position: center right;
}

.links .appstore {
	background-image: url('../images/appstore_btn.png');
	background-position: center;
}

.links .ms {
	background-image: url('../images/ms_btn.png');
	background-position: center left;
}

/**********
 * FOOTER *
 **********/

.col-xs-4.col-sm-4 {
		text-align: center;
}

.nomaFooter {
	text-align: center;
	padding: 30px 0;
	background-color: #2c2c2c;
}
.nomaFooter h2 {
	font-size: 15px;
	text-align: left;
	color: #888888;
	font-family: 'latothin';
}

.nomaFooter .vendor {
margin-left: auto;
margin-right: auto;
	width: 100px;
}
.nomaFooter .tim {
	margin-left: auto;
	margin-right: auto;
	width: 100px;
}

.nomaFooter .footerImage{
	width:100%;
}


/*********************
 * RESPONSIVE LARGE *
 *********************/

@media (min-width: 1200px) and (max-width: 1800px){

}

/*********************
 * RESPONSIVE MEDIUM *
 *********************/
@media (min-width: 992px) and (max-width: 1199px){

	/**************
	 * PHONE      *
	 **************/

	html:not(.csstransforms) .phone {
		background-position: 0 70px;
	}
	.csstransforms .phone:before {
		top:54%;
	}

	/***************
	 * SCREENSHOTS *
	 ***************/

	.screenshots {
		padding: 0;
		margin-bottom: -100px;
	}

	.screenshots .screen {
		top:-28px;
	}


}

/***************************
 * RESPONSIVE MEDIUM-SMALL *
 ***************************/

@media (min-width: 768px) and (max-width: 991px){

	header, section {
		padding: 30px 0;
	}

	/***************
	 * DESCRIPTION *
	 ***************/

	.description {
		padding-bottom: 30px;
	}
	.description p {
		margin-bottom: 40px;
		line-height: 32px;
	}

	/**************
	 * PHONE      *
	 **************/

	:not(.csstransforms) .phone {
		background-position: 0 112px;
	}
	.csstransforms .phone:before {
		top:61%;
	}
	.phone .text {
		position: static;
		width: 100%;
		margin-bottom: 40px;
	}

	.phone .text .title,
	.phone .text p {
		text-align: center;
	}

	.phone .smartphone {
		margin-top: 0;
	}
}

/********************
 * RESPONSIVE SMALL *
 ********************/

@media (min-width: 501px) and (max-width: 767px) {

	header, section {
		padding: 30px 0;
	}

	/**************
	 * HEADER     *
	 **************/

	.nomaHeader .content {
		margin-top: -128.5px;
	}
	.nomaHeader .title {
		width: 40%;
	}
	.nomaHeader .subtitle {
		font-size: 18px;
		padding: 20px 0;
		width: 90%;
		margin: auto;
	}
	.nomaHeader .storeButton {
		height: 50px;
	}

	/**************
	 * VIDEO      *
	 **************/

	.videoVimeo p {
		margin-bottom: 30px;
	}

	/**************
	 * PHONE      *
	 **************/
	.phone {
		overflow: hidden;
	}
	html:not(.csstransforms) .phone {
		background-position: 0 112px;
	}
	.csstransforms .phone:before {
		top:61%;
	}
	.phone .text {
		position: static;
		width: 100%;
		margin-bottom: 30px;
	}

	.phone .text .title,
	.phone .text p {
		text-align: center;
	}

	.phone .smartphone {
		margin-top: 0;
	}

	/***************
	 * DESCRIPTION *
	 ***************/

	.description {
		padding-bottom: 30px;
	}
	.description p {
		margin-bottom: 40px;
		line-height: 32px;
	}

	/***************
	* SCREENSHOTS *
	***************/

	.screenshots {
		margin-bottom: -105px;
	}
	.screenshots .screen {
		top: -25px;
	}
}

/**************************
 * RESPONSIVE EXTRA-SMALL *
 **************************/

@media (max-width: 500px){

	header,
	section {
		padding: 20px 0;
	}

	header + section {
		margin-top: 0;
	}

	/**************
	 * HEADER     *
	 **************/

	.nomaHeader .content {
		margin-top: -122px;
	}
	.nomaHeader .title {
		width: 40%;
	}
	.nomaHeader .subtitle {
		font-size: 18px;
		padding: 20px 0;
	}

	.nomaHeader .stores {
		margin-right: -8px;
		margin-left: -8px;
	}

	.nomaHeader .stores >*{
		padding-right: 8px;
		padding-left: 8px;
	}

	/**************
	 * PHONE      *
	 **************/

	html:not(.csstransforms) .phone {
		background-position: 0 100px;
	}
	.csstransforms .phone:before {
		top:63%;
	}
	.phone .smartphone{
		margin-top: 0;
	}
	.phone .text {
		position: static;
		width: 100%;
	}

	.phone .text .title,
	.phone .text p {
		text-align: center;
		margin-bottom: 20px;
	}
	.phone .text .title {
		font-size: 27px;
	}
	.phone .text p {
		font-size: 16px;
	}

	/**************
	 * VIDEO      *
	 **************/

	.videoVimeo .title {
		font-size: 27px;
	}

	.videoVimeo p {
		font-size: 16px;
		margin-bottom: 30px;
	}

	/***************
	 * DESCRIPTION *
	 ***************/

	.description {
		padding-bottom: 0;
	}

	.description p {
		font-size: 15px;
		line-height: 27px;
		text-align: justify;
		margin-bottom: 40px;
	}

	/***************
	* SCREENSHOTS *
	***************/

	.screenshots {
		padding: 0;
		margin-bottom: -65px;
	}

	.screenshots .screen {
		top:-15px;
	}


	/***************
	 * LINKS	   *
	 ***************/

	.links .subtitle {
		font-size: 18px;
		padding: 15px;
	}


	.links .stores {
		margin-right: -8px;
		margin-left: -8px;
	}

	.links .stores >*{
		padding-right: 8px;
		padding-left: 8px;
	}

}

/******************************
 * RESPONSIVE SMALL LANDSCAPE *
 ******************************/

@media ( orientation:landscape ) and ( max-height: 720px ) {
	.arrow {
		display: none
	}
}