/*************************************************************/
/* Name:off-on - Landing Page						  		 */
/* Author:off-on design								      	 */
/* Description:off-on design - HTML5 Landing Page Responsive */
/* Version:1.0											  	 */
/*************************************************************/

/**************************** GENERAL *************************************************************/

h1							{ text-transform:uppercase; text-align:center; }

h2							{ font-size:24px; }

h4							{ font-size:36px; text-transform:uppercase; text-align:center; }

h5							{ margin:20px 0; font-size:24px; text-transform:uppercase; text-align:left; font-weight:300; }

.wrapper					{ width:90%; max-width:1170px; margin:0 auto; }

.display					{ height:650px; max-width:1170px; margin:20px auto; margin-bottom:100px; position:relative; }

.url						{ width:100%; max-width:1170px; margin:25px auto; }

input						{ width:80%; height:40px; margin:0px auto; float:left; font-size:24px; }

form						{ width:100%; margin:20px auto; }

div							{ background-repeat:no-repeat; /*background-size:100%;*/ /*overflow:hidden;*/ }

.container					{ padding-right:0px; padding-left:0px; }

.italic						{ font-style:italic; }


/**************************** BUTTON **************************************************************/

a.button					{ width:150px; height:40px; margin-bottom:20px; line-height:38px; text-align:center; color:#7C7C7C; background-color:transparent;
							  font-size:24px; font-weight:300; letter-spacing:1px; text-transform:uppercase; float:right;
							  border:1px solid #B0B0B0; border-radius:2px;
							  -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; }

a.button:hover				{ background-color:#FB0; color:#FFF; border:1px solid #FB0; font-weight:300; }


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

.section-head1				{ text-align:center; position:relative; }

.section-head2				{ margin-top:100px; text-align:center; position:relative; }

.url .section-title			{ margin:0px; padding:0 40px; position:relative; display:inline-block; line-height:64px; font-size:50px; font-weight:100; background:#FFF;
							  text-align:center; text-transform:uppercase; color:#625837; }

.section-line				{ width:100%; margin-top:30px; margin-bottom:0px; text-align:center; position:relative; border-top:1px dotted #FB0; border-bottom:0px dotted #FB0; }


/**************************** iFRAME **************************************************************/

iframe						{ margin:0; padding:0; position:relative; background-color:#FFF; border-color:#000; }

.trim						{ overflow-y:hidden; }


/**************************** DEVICES *************************************************************/

.mobile						{ width:95px; height:196px; top:370px; right:250px; position:absolute; background-image:url("../images/mobile-prt.png"); z-index:5; }

.mobile iframe				{ width:640px; height:1136px; top:25px; left:7px; overflow-y:hidden; 
							  transform:scale(0.115); -webkit-transform:scale(0.115); -o-transform:scale(0.115); -ms-transform:scale(0.115); -moz-transform:scale(0.115);
							  transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; -ms-transform-origin:top left; -moz-transform-origin:top left; }

.mobile-lsc					{ width:200px; height:106px; top:480px; right:70px; position:absolute; background-image:url("../images/mobile-lsc.png"); z-index:5; }

.mobile-lsc iframe			{ width:1136px; height:640px; top:7px; left:25px; overflow-y:hidden; 
							  transform:scale(0.115); -webkit-transform:scale(0.115); -o-transform:scale(0.115); -ms-transform:scale(0.115); -moz-transform:scale(0.115);
							  transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; -ms-transform-origin:top left; -moz-transform-origin:top left; }

.tablet						{ width:220px; height:285px; top:280px; left:50px; position:absolute; background-image:url("../images/tablet-prt.png"); z-index:3; }

.tablet iframe				{ width:768px; height:1024px; top:30px; left:35px; overflow-y:hidden;
							  transform:scale(0.195); -webkit-transform:scale(0.195); -o-transform:scale(0.195); -ms-transform:scale(0.195); -moz-transform:scale(0.195);
							  transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; -ms-transform-origin:top left; -moz-transform-origin:top left; }

.laptop						{ width:477px; height:307px; top:300px; left:300px; position:absolute; background-image:url("../images/laptop1.png"); z-index:2; }

.laptop iframe				{ width:1280px; height:802px; top:26px; left:60px;
							  transform:scale(0.277); -webkit-transform:scale(0.277); -o-transform:scale(0.277); -ms-transform:scale(0.277); -moz-transform:scale(0.277);
							  transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; -ms-transform-origin:top left; -moz-transform-origin:top left; }

.desktop					{ width:480px; height:455px; top:80px; right:0px; position:absolute; background-image:url("../images/desktop.png"); z-index:1; }

.desktop iframe				{ width:1600px; height:992px; top:32px; left:22px;
							  transform:scale(0.271); -webkit-transform:scale(0.271); -o-transform:scale(0.271); -ms-transform:scale(0.271); -moz-transform:scale(0.271);
							  transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; -ms-transform-origin:top left; -moz-transform-origin:top left; }

.screen						{ width:600px; height:478px; top:0px; left:00px; position:absolute; background-image:url("../images/screen.png"); z-index:0; }

.screen iframe				{ width:2560px; height:1440px; top:25px; left:25px;
							  transform:scale(0.215); -webkit-transform:scale(0.215); -o-transform:scale(0.215); -ms-transform:scale(0.215); -moz-transform:scale(0.215);
							  transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; -ms-transform-origin:top left; -moz-transform-origin:top left; }

.about-tool					{ width:100%; max-width:1170px; margin:20px auto; padding-top:20px; font-size:1.2em; }

.about-tool li				{ margin-bottom:0.5em; line-height:1.2; }


/**************************** CONTENT *************************************************************/

#home						{ top:0; }

#why .section-title			{ margin:0px; padding:0px; position:relative; display:inline-block; line-height:64px; font-size:50px; font-weight:100; background:#FFF;
							  text-align:center; text-transform:uppercase; color:#625837; }

#why p						{ color:#625837; }

#why h4						{ font-weight:300; color:#625837; }

.content-title				{ width:100%; margin:60px auto 40px; text-align:center; color:#625837; }

.slogan1					{ max-width:1170px; height:210px; margin:0 15px 40px; padding-top:40px; border-top:1px dotted #FB0; border-bottom:1px dotted #FB0; }

.slogan2					{ max-width:1170px; height:210px; margin:0 15px 40px; padding-top:40px; border-top:1px dotted #FB0; }

.teaser						{ max-width:100%; height:120px; font-size:60px; text-align:center; color:#909090; background:#D5C79B; border:0px solid #D5C79B; border-radius:2px; }

.teaser:hover				{ color:#FFF; background:#625837;
							  -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; }

.teaser > .fa				{ line-height:120px; }

.quote						{ max-width:100%; height:60px; font-size:55px; text-align:center; color:#D5C79B; line-height:40px; }

.column						{ width:100%; height:auto; margin:0; padding:0; }

.source						{ color:#707070; }


/**************************** MEDIA QUERIES *******************************************************/

@media (max-width: 1160px)
{
	.display				{ width:95%; height:550px;
							  transform:scale(0.81); -webkit-transform:scale(0.81); -o-transform:scale(0.81); -ms-transform:scale(0.81); -moz-transform:scale(0.81); }

	.desktop				{ left:180px; }

	.laptop					{ left:520px; }

	.tablet					{ left:80px; }

	.mobile					{ left:260px; }

	input					{ width:88%; }
}

@media (max-width: 1070px)
{
	.display				{ left:-50px; }
}

@media (max-width: 1000px)
{
	.display				{ height:500px; top:-40px;
							  transform:scale(0.71); -webkit-transform:scale(0.71); -o-transform:scale(0.71); -ms-transform:scale(0.71); -moz-transform:scale(0.71); }

	.desktop				{ left:140px; }

	.laptop					{ left:480px; }

	.tablet					{ left:40px; }

	.mobile					{ left:220px; }
}
@media (max-width: 850px)
{
	.display				{ height:500px;
							  transform:scale(0.65); -webkit-transform:scale(0.65); -o-transform:scale(0.65); -ms-transform:scale(0.65); -moz-transform:scale(0.65); }

	.desktop				{ left:100px; }

	.laptop					{ left:440px; }

	.tablet					{ left:0px; }

	.mobile					{ left:180px; }
}
@media (max-width: 768px)
{
	.display				{ height:450px;
							  transform:scale(0.55); -webkit-transform:scale(0.55); -o-transform:scale(0.55); -ms-transform:scale(0.55); -moz-transform:scale(0.55); }

	a.button				{ width:100%; margin-top:0.5em; line-height:1.75em; font-size:1.6em; }

	input					{ width:100%; height:1.2em; }
}
@media (max-width: 670px)
{
	.display				{ height:400px; left:-70px;
							  transform:scale(0.45); -webkit-transform:scale(0.45); -o-transform:scale(0.45); -ms-transform:scale(0.45); -moz-transform:scale(0.45); }
}
@media (max-width: 580px)
{
	input					{ width:100%; height:1.4em; font-size:1.4em; }
	a.button				{ width:100%; margin-top:0.5em; font-size:1.4em; float:left; }
}
@media (max-width: 560px)
{
	.display				{ height:270px; top:-65px;
							  transform:scale(0.37); -webkit-transform:scale(0.37); -o-transform:scale(0.37); -ms-transform:scale(0.37); -moz-transform:scale(0.37); }
}
@media (max-width: 440px)
{
	.display				{ width:70px; top:-65px; left:-17px;
							  transform:scale(0.35); -webkit-transform:scale(0.35); -o-transform:scale(0.35); -ms-transform:scale(0.35); -moz-transform:scale(0.35); }
}
@media (max-width: 380px)
{
	.display				{ width:70px; height:235px; top:-65px; left:-17px;
							  transform:scale(0.27); -webkit-transform:scale(0.27); -o-transform:scale(0.27); -ms-transform:scale(0.27); -moz-transform:scale(0.27); }

	.desktop				{ left:100px; }

	.laptop					{ left:515px; }

	.tablet					{ left:0px; }

	.mobile					{ left:180px; }

	h1						{ font-size:1.2em; }

	p						{ margin:1em; }
}