* { box-sizing: border-box; }

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font-weight: 300;
    background-color: #fdfdfd;
}

i { font-weight: normal; }
p { font-size: 1rem; }
iframe { max-width: 90%; max-height: 90%;}
input:invalid { border: 0;}
.hide { display: none;}

a.button.primary, button.primary, input[type=submit].primary, label.button.primary span { background: #4AA3DF; }

.header { height: 60px; background: #fdfdfd; }
.header .logo { font-family: 'Oswald', sans-serif; background: url(../images/logo.svg) no-repeat left; background-size: 100px; line-height: 60px; font-size: 2rem; color: #454545; font-weight: 200; margin: 10px auto; padding: 15px 0 0 110px; width: 270px; }
.logo a { color: #2F850A;}

.maininfo { height: 480px; padding: 30px 50px 50px; background: url(../images/bg-2.jpg) no-repeat center center #424f57;  background-size: cover; }
.maininfo .headline { font-size: 2.4rem; color: #fff; font-weight: 400; text-shadow: 3px 3px 9px rgba(0,0,0,0.8); line-height: 120%; }

.maininfo p { font-size: 1.1rem; color: #333; text-shadow: 0 0 10px rgba(255,255,255,.9); }
.maininfo i { font-size: 6rem; color: #fff; text-shadow: 2px 2px 9px rgba(0,0,0,0.3); }
.maininfo .visa { margin-right: 15px; }
.maininfo .mc { }

.product {  }
.product .full { float: none; padding: 30px 50px 50px; max-width: 760px; margin: auto; }
.product h3 { font-size: 3rem; text-align: center; font-weight: 200; color: #105578; }


.benefits { padding:  50px; background: #fff; color: #2f850a; }
.benefits .full { text-align: center; padding: 30px 30px; min-height: 320px; }
.benefits .full h3 { font-weight: 200; color: #235d0f; font-size: 1.4rem; }
.benefits .fa { font-size: 4rem; color: #2f850a; }

.catchphrase { padding: 40px; text-align: center; color: #fff; background: url(../images/bg-8.jpg) no-repeat center center #424f57;  background-size: cover; }
.catchphrase .button { font-size: 1.6rem; font-weight: 200;}
.catchphrase input { text-align: center; width: 240px;  box-sizing: border-box;}
.catchphrase input.inputsend { margin-top: 10px; height: auto;  }
.catchphrase h2 { font-weight: 200; color: #fff; font-size: 2.4rem; line-height: 140%; }
.catchphrase h2 span { font-size: 1.4rem; display: block;}
.catchphrase h3 { font-weight: 200; color: #0b3e6b; font-size: 1.7rem; line-height: 110%; }

.demovideo { width: 522px; height: 352px; background: url(../images/ipad-bg.png) no-repeat; background-size: contain; padding: 18px 0 0 0;  box-shadow: 2px 2px 5px rgba(0,0,0,.4); border-radius: 25px;}


.plans { padding: 30px 50px 50px; display: none; }
.plans h2 { font-size: 3rem; text-align: center; font-weight: 200; color: #454545; }
.plans .full {  text-align: center; padding: 10px 20px; min-height: 300px; }
.plan { background: #bdc3c7; border-radius: 4px; }
.plan h3 { padding: 10px; border-radius: 4px 4px  0 0; font-weight: 200; background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.8); }
.plan p { padding: 0 15px; font-size: 0.9rem; line-height: 130%; }
.plan ul { list-style-position: outside; padding: 0 10px; }
.plan li { text-align: left; font-size: 0.9rem; list-style: none; }
.plan .cta { margin: 15px 0 0 0; padding: 15px 0; background: rgba(0,0,0,0.7); border-radius: 0 0 4px 4px; }
.plan .cta .button { font-size: 1.6rem; font-weight: 200;}
.plan .cta .hostinginput { display: block; color: #fff; }
.plan .cta input, .plan .cta label { margin: 10px 0; font-size: 0.8rem; }

.price { background: #f2e713; font-size: 1.6rem; width: 80px; height: 80px; line-height: 80px; border-radius: 40px; float: right; margin: -80px -12px 0 0; box-shadow: 2px 2px 6px rgba(0,0,0,0.3);   }
.addhosting { background: rgba(255,255,255,0.7); font-size: 0.9rem; padding: 6px 10px; margin: 0 20px; border-radius: 4px; }

.implement1 { background: #40c4ff; }
.implement2 { background: #2ecc71; }