@media screen and (max-width: 800px) {
	@font-face{
		font-family: "OldSansBlack";
		src: url("../fonts/OldSansBlack.ttf");	
	}
	
	#site{
		display: none;
	}
	
	#siteSmartphone{
		display: block;
		font-family: OldSansBlack;
	}
	
	#siteSmartphone header{
		position: relative;
		border-bottom: 1px solid white;
		padding-bottom: 0.5rem;
	}
	
	#siteSmartphone header img{
		width: 90%;
	}
	
	#titleScreenshostsSmartphone{
		display: inline-block;
	}
	
	#siteSmartphone #divPres {
	  background-color: #e2f3fa;
	  /*padding: 48px 0;*/
	  padding: 1.8rem 0;
	}
	
	#siteSmartphone #pPres{
		width: 90%;
		margin: 0 auto;
		/*background: linear-gradient(-45deg, #6c8690, #8899a2, #fff, #76a1a4);*/
		background-color: #ffffff;
		/*white-space: pre-wrap;*/
		border-radius: 18px;
		padding: 10px 10px;
		color: #1793da;
		animation: screenshotsPresAnim 0.7s ease;
		animation-fill-mode: forwards;
		border: 4px solid #1793da;
		box-shadow: 3px 5px 25px #1793da;
	}
	
	#siteSmartphone #pPres h1{
		font-size: 1.6rem;
		/*font-size: 100%;*/
	}
	
	#siteSmartphone #pPres p{
		font-size: 1rem;
	}
	
	#siteSmartphone #divScreenshotsElist{
		padding: 25px 0;
	}
	
	#siteSmartphone #screenshotsElist {
		width: 95%;
		margin: 0 auto;
		background-color: #ededed;
		border-radius: 18px;
		color: #5D6070;
		overflow: hidden;
		animation: screenshotsAnim 1s ease;
		animation-fill-mode: none;
		animation-fill-mode: forwards;
		padding-bottom: 0px;
	}
	
	@keyframes screenshotsAnim{
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
	#siteSmartphone #titleScreenshostsSmartphone {
		width: 99%;
		margin: 0;
		margin-bottom: 0px;
		padding: 0px 0px 0px 0px;
		background-color: #ffffff;
		margin-bottom: 15px;
		/*animation: screenshotsTitleAnim 1s ease;
		animation-fill-mode: none;
		animation-fill-mode: forwards;*/
		border: 4px solid #E1E1E1;
		box-shadow: 3px 5px 25px #E1E1E1;
		border-radius: 18px;
		/*font-size: 25px;*/
		font-size: 1.3rem;
		padding: 10px 10px;
		display: block;
	}
	
	@keyframes screenshotsTitleAnim{
		from {width: 0;}
		to {width: 99%;}
	}
	
	#siteSmartphone #titleScreenshostsSmartphone #spTitleSmartphone{
		/*margin-left: 14px;*/
	}
	
	#siteSmartphone #titleScreenshostsSmartphone #spAvailable{
		font-size: 16px;
		/*margin-left: 14px;*/
	}
	
	#siteSmartphone #presentation{
		width: 100%;
		background-color: #e2f3fa;
		padding: 2.5% 0;
	}
	
	#siteSmartphone #presentation p{
		width: 90%;
		margin: 0 auto;
		background: linear-gradient(-45deg, #6c8690, #8899a2, #fff, #76a1a4);
		white-space: pre-wrap;
		border-radius: 18px;
		color: #373a4a;
		padding: 2.5%;
		/*animation: screenshotsPresAnim 0.7s ease;
		animation-fill-mode: none;
		animation-fill-mode: forwards;*/
	}
	
	#siteSmartphone #screenshotsList{
		background-color: #d8d8d8;
		overflow: hidden;
		padding: 10px 0;
		height: 874px;
	}
	
	#siteSmartphone #screenshotsListLeft{
		float: left;
		width: 13%;
		height: 450px;
	}
	
	#siteSmartphone #screenshotsListLeft{
		margin-left: 6px;
	}
	
	#siteSmartphone #screenshotsListLeft img, #siteSmartphone #screenshotsListRight img{
		position: relative;
		top: 190px;
	}
	
	#siteSmartphone #screenshotsListLeft img{
		left: -8px;
		width: 140%;
	}
	
	#siteSmartphone #screenshotsListRight img{
		left: -10px;
		width: 140%;
	}
	
	#siteSmartphone #screenshotsListLeft:hover, #siteSmartphone #screenshotsListRight:hover{
		cursor: pointer;
	}	
	
	#siteSmartphone #screenshotsListImgContainer{
		float: left;
		width: 68%;
		height: 450px;
	}
	
	#siteSmartphone #screenshotsListImg{
		float: left;
		width: 90%;
		height: 450px;
		margin: 0 auto;
		margin-left: 5%;
	}
	
	#siteSmartphone #screenshotsListRight{
		float: left;
		width: 13%;
		height: 450px;
	}
	
	#siteSmartphone #screenshotsListLeft, #siteSmartphone #screenshotsListRight, #siteSmartphone #screenshotsListImg{
		border: 2px solid #ffffff;
		border-radius: 12px;
	}
	
	#siteSmartphone #screenshotsListImg #imgScreenshots{
		width: 100%;
		height: 450px;
		border-radius: 12px;
	}
	
	#screenshotsListText{
		background-color: #ffffff;
		overflow: hidden;
		padding: 15px 0;
		clear: both;
		position: relative;
		top: 4px;
		margin: 0 6px;
		height: 60px;
	}
	
	#screenshotsListText p{
		width: 95%;
		margin: 0 auto;
		border: 2px solid #ffffff;
		border-radius: 12px;
		text-align: center;
		padding: 6px 0;
		/*font-size: 30px;*/
		font-size: 1rem;
	}
	
	#screenshotsListTitle{
		height: 90px;
		background-color: #d8d8d8;
		padding-top: 20px;
	}
	
	#screenshotsListTitle h1{
		margin: 0;
		padding: 25px 12px 12px 12px;
		font-size: 24px;
		text-align: center;
		background-color: #ffffff;
		height: 75px;
	}
	
	#eListDetails{
		width: 99%;
		margin: 0;
		margin-bottom: 0px;
		padding: 0px 0px 0px 0px;
		background-color: #ffffff;
		margin-bottom: 0px;
		/*animation: screenshotsTitleAnim 1s ease;
		animation-fill-mode: none;
		animation-fill-mode: forwards;*/
		border: 4px solid #E1E1E1;
		box-shadow: 3px 5px 25px #E1E1E1;
		border-radius: 18px;
		font-size: 25px;
		padding: 10px 0;
		display: block;
		margin-top: 15px;
	}
	
	#eListDetails h2{
		padding-left: 15px;
		/*font-size: 25px;*/
		font-size: 1.3rem;
	}
	
	#eListDetails p{
		padding: 15px;
		white-space: pre-wrap;
		/*font-size: 17px;*/
		font-size: 1rem;
	}
	
	footer{
		height: 100px;
	}
	
	#siteSmartphone #formContact{
		width: 90%;
		/*height: 854px;*/
		height: auto;
		margin: 0 auto;
		/*padding: 0px 0px 100px 0px;*/
		background-color: #efefef;
		border-radius: 18px;
		animation: formContactAnim 0.5s ease;
		animation-fill-mode: forwards;
		overflow: hidden;
		padding-bottom: 25px;
	}

	@keyframes formContactAnim{
		from {width: 0;/* height: 0;*/}
		to {width: 90%;/* height: 854px;*/}
	}
	
	#siteSmartphone #titleContact{
	  margin: 0;
	  text-align: center;
	  color: #373a4a;
	  padding-top: 10px;
	  padding-bottom: 15px;
	  padding-left: 0;
	  padding-right: 0;
	  background-color: #ffffff;
	  border-top-left-radius: 18px;
	  border-top-right-radius: 18px;
	  text-align: start;
	  height: 54px;
	  font-size: 45px;
	}
	
	#siteSmartphone #titleContact #spTitleContact{
		text-align: start;
		position: relative;
		top: 5px;
		color: #5D6070;
		padding-left: 53px;
		font-size: 33px
	}
	
	#siteSmartphone #secContact{
		background-color: #e2f3fa;
	}
	
	#siteSmartphone #frmContact{
		padding: 0 15px 0 15px;
	}
	
	#siteSmartphone #frmContact input[type=text], #siteSmartphone #frmContact textarea{
		width: 97%;
		height: 50px;
		border-radius: 12px;
		font-size: 24px;
		animation: formContactTextAnim 0.7s ease;
		animation-fill-mode: forwards;
	}
	
	#siteSmartphone #frmContact textarea{
		height: 195px;
	}

	@keyframes formContactTextAnim{
		from {width: 0;}
		to {width: 97%;}
	}
	
	#siteSmartphone #frmContact h2{
		color: #5D6070;
		padding: 40px 20px 5px 8px;
		/*font-size: 20px;*/
		font-size: 22px;
		height: 36px;
	}
	
	#siteSmartphone #formContactBtn{
		width: auto;
		padding-right: 13px;
	}
	
	#siteSmartphone #titleContact img{
	  position: absolute;
	  left: 7px;
	  top: 7px;
	}
	
	#siteSmartphone #formContactRecaptcha{
		width: 350px;
		height: 87px;
		float: right;
		position: relative;
		top: 30px;
		right: -65px;
	}
	
	#siteSmartphone #secEmailSuccess{
		width: 90%;
		height: 213px;
		margin: 0 auto;
		padding: 0px 0px 100px 0px;
		background-color: #efefef;
		border-radius: 18px;
		animation: secSuccessAnim 0.5s ease;
		animation-fill-mode: none;
		animation-fill-mode: forwards;
		overflow: hidden;
	}
	
	@keyframes secSuccessAnim{
		from {width: 0; height: 0;}
		to {width: 90%; height: 213px;}
	}
	
	#siteSmartphone #secEmailSuccess img, #siteSmartphone  #secEmailError img {
		width: 145px;
		height: 145px;
		position: relative;
		top: 33px;
		left: 15px;
	}
	
	#siteSmartphone #secEmailSuccess p, #siteSmartphone #secEmailError p {
		position: relative;
		top: -136px;
		left: 184px;
		font-family: OldSansBlack;
		font-size: 32px;
		color: #373a4a;
		width: 62%;
	}
	
	#siteSmartphone .formLineContact.error.errorBtn{
		position: relative;
		top: 24px;
	}
	
	#secEmailSuccess input[type="button"], #secEmailError input[type="button"] {
		position: relative;
		width: 149px;
		height: 44px;
		font-family: OldSansBlack;
		font-size: 18px;
		color: #373a4a;
		background-color: #ffffff;
		border-radius: 8px;
		margin-left: 8px;
		left: 0;
		top: -87px;
	}
	
	#siteSmartphone #divContact {
		text-align: center;
		padding-top: 25px;
		width: 350px;
		margin: 0 auto;
		position: relative;
		font-size: 20px;
	}
	
	#siteSmartphone #formContactBtn input[type="submit"], #siteSmartphone #formContactBtn input[type="button"]{
		height: 38px;
		width: 110px;
	}
}