*{margin:0; padding:0; border:0; box-sizing:border-box;}
html,body{width:100%; height:100%;}
body{font:14px 'Roboto'; color:#333;}
a{text-decoration:none;}
header{width:100%; height:60px; position:fixed; top:0; left:0; z-index:999; background:#1976D2;}
h1{font-family:'Ubuntu'; font-size:27px; font-weight:300; color:rgba(256,256,256,.8);}
h1 b{font-weight:500; color:rgba(256,256,256,1);}
h2{font-family:'Ubuntu'; font-weight:400; color:rgba(256,256,256,.8);}
h2 b{color:#1976D2;}
/*section{min-height:100vh;}*/
footer{min-height:80px; background:#222;}
.crp1{max-width:1200px; width:calc(100% -  30px); height:100%; margin:0 auto;
	display:flex; justify-content:space-between; align-items:center;}
.crp2{max-width:1200px; width:calc(100% -  30px); margin:0 auto;}
.crp3{max-width:1200px; width:calc(100% -  30px); margin:0 auto;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;}
.crp4{max-width:1200px; width:calc(100% - 30px); margin:30px auto;
	display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;}
.crp5{max-width:400px; width:calc(100% - 30px); height:100%; margin:30px auto;
	display:flex; flex-direction:column; justify-content:space-around; align-items:center;}
.crp6{width:100%; height:100%; background:#1976D2; text-align:center;
	display:flex; justify-content:center; align-items:center;}
.crp6 .ttl1 h3{font-size:30px; font-weight:300; padding:10px 20px 30px; color:#1976d2;}


.ico1,.ico2,.ico3,.ico4{width:80px; height:80px; margin:auto; position:relative; color:#219de0;}
.ico1 i:nth-child(1){font-size:75px;}
.ico1 i:nth-child(2){font-size:38px; position:absolute; bottom:2px; right:0px;}
.ico2 i:nth-child(1){font-size:75px;}
.ico2 i:nth-child(2){font-size:50px; position:absolute; bottom:2px; right:0px;}
.ico3 i:nth-child(1){font-size:75px;}
.ico3 i:nth-child(2){font-size:40px; position:absolute; bottom:2px; right:0px;}
.ico4 i:nth-child(1){font-size:75px;}
.ico4 i:nth-child(2){font-size:50px; position:absolute; bottom:2px; right:0px;}

.strk{text-shadow:rgb(256,256,256) 3px 0px 0px, rgb(256,256,256) 2.83487px 0.981584px 0px, rgb(256,256,256) 2.35766px 1.85511px 0px, rgb(256,256,256) 1.62091px 2.52441px 0px, rgb(256,256,256) 0.705713px 2.91581px 0px, rgb(256,256,256) -0.287171px 2.98622px 0px, rgb(256,256,256) -1.24844px 2.72789px 0px, rgb(256,256,256) -2.07227px 2.16926px 0px, rgb(256,256,256) -2.66798px 1.37182px 0px, rgb(256,256,256) -2.96998px 0.42336px 0px, rgb(256,256,256) -2.94502px -0.571704px 0px, rgb(256,256,256) -2.59586px -1.50383px 0px, rgb(256,256,256) -1.96093px -2.27041px 0px, rgb(256,256,256) -1.11013px -2.78704px 0px, rgb(256,256,256) -0.137119px -2.99686px 0px, rgb(256,256,256) 0.850987px -2.87677px 0px, rgb(256,256,256) 1.74541px -2.43999px 0px, rgb(256,256,256) 2.44769px -1.73459px 0px, rgb(256,256,256) 2.88051px -0.838247px 0px;}

.arw1,.arw2,.arw3/*,.arw4*/{position:absolute; top:25%; right:10%;}
.arw1 i,.arw2 i,.arw3 i/*,.arw4 i*/{font-size:50px; color:#1976D2; opacity:.5;}
.arw1 i{transform:rotate(180deg);}
.arw2 i{transform:rotate(180deg);}
.arw3 i{transform:rotate(180deg);}
/*.arw4 i{transform:rotate(180deg);}*/


.btn2{width:25px; height:25px; border:1px solid #fff; border-radius:50%; cursor:pointer;}
.btn2 i{font-size:25px; color:#219de0;}
.btn3{width:200px; height:50px; background:#219de0; color:#fff; border-radius:25px;
	box-shadow:0 -3px 1px rgba(25,118,210,.5) inset; cursor:pointer;
	display:flex; justify-content:center; align-items:center;}
.btn3 p{font-family:'Ubuntu'; font-size:22px; font-weight:400;}
.btn4{color:#333; cursor:pointer; color:#1976D2;}
.btn4:nth-child(1){border-right:1px solid #219de0;}
.btn4 p{font-size:16px; padding:10px 10px;}
.btn5{cursor:pointer;}
.btn5 i{color:#fff;}
.btn6{width:100%; height:45px; margin-bottom:0px; display:flex; justify-content:center; align-items:center;}
.btn6 p{font-family:'Ubuntu'; font-size:18px; font-weight:300; text-align:center; color:#fff;}

.bnr1{width:100%; height:500px; background:url(../img/contabilidad-3-min.jpg);
	background-size:cover; background-position:center;
	/*animation:movimiento 50s infinite linear alternate;*/ position:relative; margin-bottom:50px;}
.grad{width:100%; height:100%; position:absolute;
	background:linear-gradient(180deg,rgba(256,256,256,.9)10%,rgba(256,256,256,.0)60%);}

.cja1{width:300px; padding:30px 0; position:relative; /*position:fixed;
	top:calc(50% + 50px); transform:translateY(-50%); left:calc(50% - 150px);*/
	overflow:hidden; background:#fff; border:1px solid #ccc; border-radius:9px;}
.cja2{width:100%; display:flex; justify-content:center; align-items:center;}
.cja3{width:100%; display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start;}
.cja4{width:33.3333%; min-width:320px; margin-bottom:20px; padding:15px 0px; border-radius:6px;
	display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start;}
.cja4:nth-child(3){background:#e1f0ff;}
.cja5{width:60px; margin-bottom:20px; position:relative;}
.cja6{width:80%; margin:auto;}
.cja7{width:200px;}
.cja8{width:calc(75% - 200px); min-width:320px;}
.cja8 p{padding:5px 20px 10px 10px;}
.cja9{width:33.3333%; min-width:200px; margin:auto; color:rgba(256,256,256,.4); font-size:11px; text-align:center;}
.cja9 p{line-height:150%; margin-bottom:5px;}
.cja9 a{color:rgba(256,256,256,.4);}

.ctx1{width:50%; min-width:300px; position:absolute; top:calc(50% + 30px); left:10%; transform:translateY(-50%);
	background:rgba(256,256,256,.5); border-radius:3px; box-shadow:0 -3px 1px rgba(256,256,256,.1) inset;}
.ctx1 h2{font-size:40px; font-weight:400; line-height:100%; padding:20px 20px 10px; color:#1976d2;}
.ctx1 h2 b{font-weight:700;}
.ctx1 h3{font-size:24px; font-weight:300; line-height:110%; padding:10px 20px 20px; margin-bottom:3px; color:#1976D2; background:rgba(256,256,256,.7);}
.ctx1 h3 b{font-weight:400; color:#1976D2;}
.ctx3{padding-right:20px;}
.ctx3 p{color:#5e5e5e; position:relative; margin:0 0 5px 15px;}
.ctx3 p:before{content:''; width:5px; height:5px; background:#5e5e5e; position:absolute; top:5px; left:-15px; border-radius:50%;}
.ctx4{width:calc(100% - 330px);}
/*.ctx4 h2{font-size:26px; font-weight:300; padding:20px 20px 10px 0; color:#333;}*/
.ctx4 p{font-size:18px; font-weight:300; line-height:150%; padding:10px 30px 10px 0; color:#5e5e5e;}
.ctx4 b{font-weight:400;}

.clm1{width:25%; min-width:200px; text-align:center; position:relative;}
.clm1 h3{font-size:16px; font-weight:400; padding:5px 20px; margin-bottom:25px; color:#5e5e5e;}

.img1{width:320px; margin:auto; text-align:center;}
.img1 img{width:70%; margin:auto;}

.bgn1{margin-top:60px; padding:60px 0; background:#eee;}

.sep1{margin-top:30px; margin-bottom:30px;}
.sep2{padding-top:40px; padding-bottom:50px;}

.trns{width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(256,256,256,.6); display:none; justify-content:center; align-items:center;}

.ttl1{width:100%;}
.ttl1 p{font-size:14px; font-weight:300; text-align:center; padding:20px;}
.ttl2{width:100%; margin-bottom:30px; display:flex; justify-content:center; align-items:center;}

.prf1{font-size:40px; font-weight:300; letter-spacing:-2px; color:#1976d2;}
.prf1 b{font-weight:400;}
.prf2{font-family:'Ubuntu'; font-size:80px; font-weight:700; line-height:80%; color:#1976d2;}
.prf3{font-size:22px; font-weight:300; margin-bottom:10px; color:#333;}
.prf4{font-size:18px; font-weight:300; text-align:left;}
.prf4 b{font-weight:400;}

#plan{padding:120px 0 60px 0; display:flex; justify-content:center; align-items:center;}
#contabilidad{display:flex; justify-content:center; align-items:center;}
#funciona{margin-top:30px; padding-top:80px; display:flex; flex-direction:column; justify-content:center; align-items:center;}
#contable{margin-top:80px; padding-top:80px; padding:60px 0; background:url(../img/bg-contabilidad.jpg); background-size:cover;
	background-position:center;
	display:flex; justify-content:center; align-items:center;}
#contable h2,#contable h2 b,#contable p{color:#fff;}

#on{display:flex;}
#off{display:none;}
#nav1{width:0px; height:calc(100% - 60px); position:fixed; top:60px; left:0;
	transition:width .25s; overflow:hidden; background:#1976D2;
	display:flex; flex-direction:column; justify-content:center; align-items:center;}

.frm1{width:calc(100% - 40px); margin:20px; position:relative;}
.frm1 .inp1,.frm1 .inp2{width:100%; height:40px; border-radius:3px; display:flex; align-items:center;}
.frm1 .inp1{ margin-bottom:5px; background:#f5f5f7; justify-content:flex-start; }
.frm1 .inp1 i{font-size:24px; margin:0 5px; color:#9e9e9e;}
.frm1 .inp2{background:#219de0; justify-content:center; }
.frm1 input[type='text'],.frm1 input[type='email'],.frm1 input[type='num']{width:calc(100% - 35px); padding:6px 10px;
	background:none; font-size:14px; color:#333;}
.frm1 input[type='submit']{width:120px; padding:8px;
	font-size:14px; background:none; color:#fff; border-radius:3px;}
.prg1{position:absolute; top:10px; right:10px;}
.sdw1{box-shadow:0px -3px 1px rgba(0,0,0,.15) inset;}
@media screen and (max-width:830px){
	.arw3 i{transform:rotate(-30deg);}
}
@media screen and (max-width:820px){
	.cja8{width:calc(100% - 200px);}
}
@media screen and (max-width:670px){
	.ctx4{width:100%; text-align:center;}
}
@media screen and (max-width:629px){
	.arw2 i{transform:rotate(-25deg);}
	.arw3 i{transform:rotate(180deg);}
	.clm1{width:50%;}
}
@media screen and (max-width:440px){
	header{height:50px;}
	h1{font-size:24px; font-weight:300;}
	.crp4{justify-content:center;}
	.bnr1{height:480px; margin-bottom:30px;}
	.ctx1{width:calc(100% - 40px); top:calc(50% + 25px); left:20px;}
	.ctx1 h2, .ctx1 h3{text-align:center;}
	.ctx4{width:100%; text-align:center;}
	.clm1{width:100%;}
	.btn2{width:35px; height:35px; border:1px solid #fff; border-radius:50%;}
	.btn2 i{font-size:35px;}
	.cja1{width:calc(100% -  50px);}
	.cja4{margin-bottom:40px;}
	.cja7{margin-bottom:20px;}
	.cja8 p{padding:0px 10px 20px; text-align:center;}
	.img1{order:2;}
	.frm1 .inp1,.frm1 .inp2{height:55px;}
	.frm1 .inp1 i{font-size:30px; margin:0 10px;}
	.frm1 input[type='text'],.frm1 input[type='email'],.frm1 input[type='num'],.frm1 input[type='submit'],.ttl1 p{font-size:20px;}
	.ttl1 p{font-weight:300;}
	#nav1{height:calc(100% - 50px); top:50px;}
	.prf1{font-size:36px; line-height:100%; text-align:center;}
	.arw1 i{transform:rotate(-90deg);}
	.arw2 i{transform:rotate(-90deg);}
	.arw3 i{transform:rotate(-90deg);}
}
@keyframes movimiento{
	from{background-position:bottom left;}
	to{background-position:top right;}
}