/*------------------------------Utilities-------------------------------*/

h1, h2, h3, h4, p {
    margin:0px;
    padding:0px;
}

a{
    text-decoration:none;
    color:black;
}

p {
    font-size:20px;
    font-family:helvetica neue;
    font-weight:400;
    line-height:24px;
}

h1 {
    font-size:40px;
    font-family:avenir;
    font-weight:700;
}

h2 {
    font-size:35px;
    font-family:avenir;
    font-weight:500;
}

h3 {
    font-size:20px;
    font-family:avenir;
    font-weight:500;
}

li{
    margin:0px;
    padding:0px;
    font-family:helvetica neue;
    font-weight:500;
}

.container {
    margin:0 auto;
    margin-top:80px;
    max-width:1200px;
    height:3100px;
    padding:0px;
    position:relative;
}

.box_divider {
    height:100px;
    max-width:1200px;
    width:100%;
    background-color:rgba(148, 205, 213, .4);
    clear:both;
}


.box_divider > h1 {
    margin-left:135px;
    padding-top:7px;
}

.box_divider > h3 {
    margin-left:190px;
}

.box_divider_right {
    height:100px;
    max-width:1200px;
    width:100%;
    background-color:rgba(148, 205, 213, .4);
}

.box_divider_right > h1 {
    margin-left:700px;
}

.box_divider_right > h3 {
    margin-left:755px;
    padding-top:7px;
}



/*------------------------------Navigation CSS Starts-------------------------------*/

nav {
    height:60px;
    width:100%;
    max-width:1200px;
    margin:0px;
    background-color:rgba(148, 205, 213, .4);
    
}

.logo {
    position:absolute;
    right:70;
    top:0;
    
}



nav > ul {
    margin-right:10px;
    display:inline-block;
}

nav > ul > li {
    display:inline-block;
    padding-left:100px;
    color:black;
    
}

nav > ul > li > a{
    text-decoration:none;
    color:black;
}

/*------------------------------Navigation CSS Ends-------------------------------*/

/*-------------------------------Footer CSS Begins-----------------------------------*/


footer {
    margin-top:2px;
    clear: both;
    background-color:rgba(148, 205, 213, .4);
    min-height: 400px;
    padding-top:20px;
    
}

footer > div {
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px;
}

footer > div > div {
    width: 25%;
    float: left;
}

footer >div > div > h3 {
    color: black;
    margin-bottom: 20px;
}

footer >div > div > div {
    width: 90%;
    line-height: 1.6em;
    color: #fff;
}


footer >div > div > div > a {
    color: darkslategray;
    display: block;
    margin: 10px 0;
    text-decoration:none;
}

footer > div > div > div > div > ul {
    padding: 0;
    list-style: none;
}

footer > div > div > div > div > ul > li {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: lightgray;
    margin: 1% 3%;
}

footer > div > div:nth-child(1) > div > div > p,
footer > div > div:nth-child(4) > div > p{
    margin: 18px 0;
    font-style: italic;
    font-size:14px;
}

footer > div > div:nth-child(4) > div > button {
    background: lightgray;
    margin: 25px 0;
}

.line {
    height:2px;
    width:100%;
    margin-top:10px;
    background:darkslategray;
}

.footer_logo {
    height:100px;
    width:100%;
    text-align:center;
    margin-top:30px;
}

.footer_logo > p {
    font-size:10px;
    color:darkslategray;
}

@media (max-width: 768px) {

    footer > div > div {
        width: 51%;
        float: none;
        margin: 50px 0;
    }

    footer >div > div > div {
        margin-left: 5%;
    }  
    
    footer >div > div > div {
        margin-left: 5%;
        display: none;
    }
    footer > div > div {
        width: 100%;
        float: none;
        margin: 35px auto;
    }
    footer >div > div > h3 {
        padding-bottom: 10px;
        border-bottom: 1px solid lightgray;
    }
}

/*-------------------------------Footer CSS Ends-----------------------------------*/

/*------------------------------Home CSS Starts-------------------------------*/

/*------------------------------Section 1-------------------------------*/


.index_box_one {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:60px;
    margin-bottom:30px;
}

.index_box_one > img {
    margin-left:270px;
}

.index_box_one > p {
    margin-top:50px;
    margin-left:295px;
}

/*------------------------------Section 2-------------------------------*/

.index_box_two {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;
    
}

.index_box_two > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.index_box_two > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.index_box_two > div > img {
    position:absolute;
    right:250;
    top:905;
    
}

.index_box_two > div:nth-child(2) > img {
    position:absolute;
    right:215;
    top:1065;
}

.home_structure_underline {
    height:2px;
    width:300px;
    background:black;  
}

.home_sturcture_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290px;
    top:860;
}

.home_contrast_underline {
    height:2px;
    width:300px;
    background:black;  
}

.home_contrast_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290px;
    top:1025;
}

/*------------------------------Section 3-------------------------------*/

.index_box_three {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;
    
}

.index_box_three > div > h2 {
    margin-left:700px;
    margin-top:20px;
    display:inline block;
  
}

.index_box_three > div > p {
    margin-left:700px;
    padding-top:20px;
    display:inline block;
}

.index_box_three > div > img {
    position:absolute;
    left:250;
    top:1520;
    
}

.index_box_three > div:nth-child(2) > img {
    position:absolute;
    left:220;
    top:1680;
}

.home_classification_underline {
    height:2px;
    width:550px;
    background:black;
    float:right;
}

.home_classification_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:520px;
    top:1545;
}

.home_mix_underline {
    height:2px;
    width:550px;
    background:black;
    float:right;
}

.home_mix_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:520px;
    top:1680;
}


/*------------------------------Section 4-------------------------------*/

.index_box_four {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;
    
}

.index_box_four > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
  
}

.index_box_four > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block ;
}

.index_box_four > div > img {
    position:absolute;
    right:250;
    top:2220;
    
}

.index_box_four > div:nth-child(2) > img {
    position:absolute;
    right:250;
    top:2370;
    
}

.index_box_four > div:nth-child(3) > img {
    position:absolute;
    right:250;
    top:2520;
}

.home_kerning_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.home_kerning_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:2225;
}

.home_tracking_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.home_tracking_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:2360;
}

.home_leading_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.home_leading_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:2495;
}







/*------------------------------Home CSS Ends-------------------------------*/

/*------------------------------Hierarchy CSS Begins-------------------------------*/

/*------------------------------Section 1 Begins-------------------------------*/


.hierarchy_box_one {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:60px;
    margin-bottom:30px;
}

.hierarchy_box_one > img {
    margin-left:275px;
}

.hierarchy_box_one > h2 {
    margin-top:20px;
    margin-left:275px;
}

.hierarchy_box_one > p {
    margin-top:50px;
    margin-left:275px;
}

/*------------------------------Section 1 Ends-------------------------------*/

/*------------------------------Section 2 Begins-------------------------------*/

.hierarchy_box_two {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;  
}

.hierarchy_box_two > div:nth-child(2) {
    float:right;
    margin-top:150px;
    margin-bottom:100px;
}

.hierarchy_box_two > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.hierarchy_box_two > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.hierarchy_box_two > div > img {
    position:absolute;
    right:215;
    top:905;
    
}

.hierarchy_box_two > div:nth-child(2) > img {
    position:absolute;
    left:250;
    top:1310;
}

.hierarchy_structure_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.hierarchy_structure_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:860;
}

.hierarchy_scale_underline {
    height:2px;
    width:350px;
    background:black;
    float:right;
}

.hierarchy_scale_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:330;
    top:1270;
}

/*------------------------------Section 2 Ends-------------------------------*/

/*------------------------------Section 3 Begins-------------------------------*/

.hierarchy_box_three {
    margin:0 auto;
    height:1150px;
    max-width:1200px;
    width:100%;
    margin-top:80px;  
}

.hierarchy_box_three > div:nth-child(2) {
    float:right;
    margin-top:150px;
    margin-bottom:150px;
}

.hierarchy_box_three > div:nth-child(3) {
    clear:both;
    margin-top:150px;
}

.hierarchy_box_three > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.hierarchy_box_three > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.hierarchy_box_three > div > img {
    position:absolute;
    right:215;
    top:1855;
    
}

.hierarchy_box_three > div:nth-child(2) > img {
    position:absolute;
    left:250;
    top:2170;
}

.hierarchy_box_three > div:nth-child(3) > img {
    position:absolute;
    right:215;
    top:2630;
}

.hierarchy_contrast_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.hierarchy_contrast_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:1810;
}

.hierarchy_color_underline {
    height:2px;
    width:340px;
    background:black;
    float:right;
}

.hierarchy_color_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:340;
    top:2190;
}

.hierarchy_emphasis_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.hierarchy_emphasis_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:2600;
}

/*------------------------------Section 3 Ends-------------------------------*/

/*------------------------------Hierarchy CSS Ends-------------------------------*/

/*------------------------------Type Nature Begins-------------------------------*/

/*------------------------------Section 1 Begins-------------------------------*/

.nature_box_one {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:60px;
    margin-bottom:30px;
}

.nature_box_one > img {
    margin-left:275px;
}

.nature_box_one > h2 {
    margin-top:20px;
    margin-left:275px;
}

.nature_box_one > p {
    margin-top:50px;
    margin-left:275px;
}

/*------------------------------Section 1 Ends-------------------------------*/

/*------------------------------Section 2 Begins-------------------------------*/

.divider_line {
    height:1030px;
    width:2px;
    background:black;
    position:absolute;
    left:50%;
    top:898;
}


.nature_box_two {
    margin:0 auto;
    height:1400px;
    max-width:1200px;
    width:100%;
    margin-top:80px; 
}

.nature_box_two > div {
    float:right;
    margin-top:20px;
    margin-right:180px;
    margin-bottom:100px;
}

.nature_box_two > div:nth-child(2) {
    float:left;
    margin-top:50px;
    margin-bottom:100px;
    margin-left:100px;
}

.nature_box_two > div:nth-child(3) {
    float:right;
    margin-top:50px;
    margin-bottom:100px;
}

.nature_box_two > div:nth-child(4) {
    float:left;
    margin-top:400px;
    margin-bottom:100px;
    position:absolute;
    top:1480;
    left:150;
}

.nature_box_two > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.nature_box_two > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.nature_box_two > div:nth-child(1) > img {
    position:absolute;
    left:350;
    top:880;
    
}

.nature_box_two > div:nth-child(2) > img {
    position:absolute;
    right:350;
    top:1180;
}

.nature_box_two > div:nth-child(3) > img {
    position:absolute;
    left:350;
    top:1520;
}

.nature_box_two > div:nth-child(4) > img {
    position:absolute;
    right:-250;
    top:40;
}

.nature_serif_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
    margin-right:103px;
}

.nature_serif_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:270;
    top:903;
}

.nature_sanserif_underline {
    height:2px;
    width:400px;
    background:black;
    float:right;
    margin-left:85px;
    
    
}

.nature_sanserif_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:170;
    top:1215;
}

.nature_display_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
    margin-right:103px;
}

.nature_display_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:270;
    top:1549;
}

.nature_script_underline {
    height:2px;
    width:436px;
    background:black;
    float:right;
    
}

.nature_script_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:430;
    top:55;
}


/*------------------------------Section 2 Ends-------------------------------*/

/*------------------------------Section 3 Begins-------------------------------*/

.nature_box_three {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;  
}

.nature_box_three > div:nth-child(2) {
    float:right;
    margin-top:40px;
    margin-bottom:100px;
    margin-top:100px;
}

.nature_box_three > div:nth-child(3) {
    float:left;
    margin-top:450px;
    margin-bottom:100px;
}

.nature_box_three > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.nature_box_three > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.nature_box_three > div > img {
    position:absolute;
    right:150;
    top:2455;
    
}

.nature_box_three > div:nth-child(2) > img {
    position:absolute;
    left:150;
    top:2750;
}

.nature_box_three > div:nth-child(3) > img {
    position:absolute;
    right:150;
    top:3040;
}

.nature_mix_underline {
    height:2px;
    width:350px;
    background:black;
    float:left;
}

.nature_mix_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:340;
    top:2445;
}

.nature_fam_underline {
    height:2px;
    width:370px;
    background:black;
    float:right;
}

.nature_fam_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:350;
    top:2775;
}

.nature_combo_underline {
    height:2px;
    width:400px;
    background:black;
    float:left;
}

.nature_combo_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:390;
    top:3125;
}



/*------------------------------Section 3 Ends-------------------------------*/

/*------------------------------Type Nature Ends-------------------------------*/

/*------------------------------Spacing Begins-------------------------------*/

/*------------------------------Section 1 Begins-------------------------------*/

.spacing_box_one {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:60px;
    margin-bottom:30px;
}

.spacing_box_one > img {
    margin-left:275px;
}

.spacing_box_one > h2 {
    margin-top:20px;
    margin-left:275px;
}

.spacing_box_one > p {
    margin-top:50px;
    margin-left:275px;
}

/*------------------------------Section 1 Ends-------------------------------*/

/*------------------------------Section 2 Begins-------------------------------*/

.spacing_box_two {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;  
}

.spacing_box_two > div:nth-child(2) {
    float:right;
    margin-top:20px;
    margin-bottom:100px;
}

.spacing_box_two > div:nth-child(3) {
    float:left;
    margin-top:350px;
    margin-bottom:100px;
}

.spacing_box_two > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.spacing_box_two > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.spacing_box_two > div > img {
    position:absolute;
    right:215;
    top:885;
    
}

.spacing_box_two > div:nth-child(2) > img {
    position:absolute;
    left:250;
    top:1100;
}

.spacing_box_two > div:nth-child(3) > img {
    position:absolute;
    right:215;
    top:1450;
}

.spacing_kern_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.spacing_kern_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:860;
}

.spacing_fontsize_underline {
    height:2px;
    width:400px;
    background:black;
    float:right;
}

.spacing_fontsize_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:380;
    top:1115;
}

.spacing_ligatures_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.spacing_ligatures_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:1445;
}


/*------------------------------Section 2 Ends-------------------------------*/

/*------------------------------Section 3 Begins-------------------------------*/

.spacing_box_three {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;  
}

.spacing_box_three > div:nth-child(2) {
    float:right;
    margin-top:40px;
    margin-bottom:100px;
}

.spacing_box_three > div:nth-child(3) {
    float:left;
    margin-top:350px;
    margin-bottom:100px;
}

.spacing_box_three > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.spacing_box_three > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.spacing_box_three > div > img {
    position:absolute;
    right:215;
    top:1995;
    
}

.spacing_box_three > div:nth-child(2) > img {
    position:absolute;
    left:250;
    top:2240;
}

.spacing_box_three > div:nth-child(3) > img {
    position:absolute;
    right:215;
    top:2590;
}

.spacing_track_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.spacing_track_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:2032;
}

.spacing_rag_underline {
    height:2px;
    width:350px;
    background:black;
    float:right;
}

.spacing_rag_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:330;
    top:2315;
}

.spacing_fixes_underline {
    height:2px;
    width:400px;
    background:black;
    float:left;
}

.spacing_fixes_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:390;
    top:2565;
}


/*------------------------------Section 3 Ends-------------------------------*/

/*------------------------------Section 4 Begins-------------------------------*/

.spacing_box_four {
    margin:0 auto;
    height:500px;
    max-width:1200px;
    width:100%;
    margin-top:80px;  
}

.spacing_box_four > div:nth-child(2) {
    float:right;
    margin-top:110px;
    margin-bottom:100px;
}



.spacing_box_four > div > h2 {
    margin-left:135px;
    margin-top:20px;
    display:inline block;
    
}

.spacing_box_four > div > p {
    margin-left:135px;
    padding-top:20px;
    display:inline block;
}

.spacing_box_four > div > img {
    position:absolute;
    right:150;
    top:3105;
    
}

.spacing_box_four > div:nth-child(2) > img {
    position:absolute;
    left:250;
    top:3350;
}

.spacing_lead_underline {
    height:2px;
    width:300px;
    background:black;
    float:left;
}

.spacing_lead_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    left:290;
    top:3110;
}

.spacing_orient_underline {
    height:2px;
    width:400px;
    background:black;
    float:right;
}

.spacing_orient_ball {
    height:30px;
    width:30px;
    border-radius:50px;
    background:black;
    position:absolute;
    right:390;
    top:3405;
}


/*------------------------------Section 4 Ends-------------------------------*/

/*------------------------------Spacing Ends-------------------------------*/

