/* ===================================
    01. Google font
====================================== */

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

/* ===================================
    02. Reset
====================================== */

html { height: 100%; }
body {font-family: 'Roboto', sans-serif; color: #ffffff; height: 100%; background: #f4f5f9; margin: 0; padding: 10% 0 0 0; height: 100%; box-sizing: border-box; }
.documentation-main {width: 1200px; margin: 0 auto; text-align: center; padding: 0 15px; box-sizing: border-box;}
.documentation-main img {margin: 0 10px}
h1 {font-family: 'Poppins', sans-serif; font-size: 30px; width: 70%; margin: 0 auto; line-height: 32px; font-weight: 600; color: #232323; margin-bottom: 3%;}
p {width: 52%; margin: 0 auto; color: #828282; margin-bottom: 7%; font-size: 16px; line-height: 30px;}
.logo { margin-bottom: 65px; display: inline-block;}

@media (max-width: 1210px) {
    body { padding: 8% 0; }
    .documentation-main {width: 992px; }   
    h1 {width: 50%;}
    p {width: 62%;}
    .documentation-main a img{ width: 44%; }
    .documentation-main a.logo img{ width: 200px;}
}

@media (max-width: 1000px) {
    .documentation-main {width: 760px;}   
    h1 {width: 60%;}
    p {width: 77%;}
    .documentation-main a img{ width: 40%; }
    .documentation-main a.logo img{ width: 175px;}
}

@media (max-width: 767px) {
    .documentation-main {width: 100%;}   
    .logo {margin-bottom: 45px; }
    h1 {width: 100%; font-size: 24px; line-height: 34px; margin-bottom: 4%;}
    p {width: 100%; font-weight: 400;}
    .documentation-main a img{ width: 90%; }
    .documentation-main a.logo img{ width: 175px;}
    .documentation-main img {margin: 0}
}

@media (max-width: 640px) {
    .documentation-main {width: 100%;}   

    .documentation-main a img{ width: 100%; }
    .documentation-main img {margin: 0}
}