html, body {
    margin: 0; 
    padding: 0;
    width: 100%;
    font-family: Montserrat-Regular;
    overflow-x: hidden;
    }

    @font-face {
        font-family: Montserrat-Regular; 
        src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
        }

    h2 {
        font-size: 28px;
        font-weight: 400;
        color: rgba(0,0,0, .75);
        text-transform: uppercase;
        margin-bottom: 0;
    }
    
    h3 {
        font-size: 16px;
        font-weight: 400;
        color: rgba(0,0,0, .75);
        text-transform: uppercase;
        margin: 0;
    }
    p {
        font-size: 16px;
        font-weight: 300;
        color: rgba(0,0,0, .75);
    }

    header{
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        max-height: 75px;
        z-index: 999;
        background-color: rgba(255,255,255,.9);
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.25);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.25);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,.25);
        }
        header:hover {
            background-color: rgba(255,255,255,1);
        }
        
        .navlinks {
        display: inline-block;
        color: #000;
        text-decoration: none;
        font-size: 12px;
        padding: 25px 10px;
        font-weight: 100;
        }
        
        .menu {
        width: 100%;
        }
        
        .logo {
        float: left;
        padding: 10px 0;
        margin: 0 10%;
        }
        .icon { 
        display: none; 
        }

   
    .home {
        background-image: url(../img/oxisson_pianino.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }

    .home-content {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 5%;
    }

    .brand img {
        height: 8em;
        width: auto;
    }

    .about-heading {
        background-color: rgb(68, 189, 0);
    }
    h1 {
        font-size: 64px;
        font-weight: 400;
        color: #fff;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 100%;
        margin:0;
    }
    .about p {
        margin: 0;
        padding: 4px 0;
    }
    .about p:first-child {
        padding-top: 10px;
    }

    .family-img {
        background-image: url(../img/oxisson_man_and_child.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .woman-img {
        background-image: url(../img/oxisson_woman.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .girl-img {
        background-image: url(../img/oxisson_girl.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .dogxfamily-img {
        background-image: url(../img/oxisson_family.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .icons-img {
        background-image: url(../img/oxisson_icons.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 120px 0;
    }

    .container {
        position: relative;
        width: 100%;
        height: 370px;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
      }

    .container:hover {
        background-color: rgb(68, 189, 0);
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }

    .container-grey:hover {
        background-color: rgb(68, 189, 0);
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }

      .container-grey {
        position: relative;
        width: 100%;
        height: 370px;
        background-color: rgba(0,0,0, .05);
        text-align: center;
        cursor: pointer;
      }

    .container img {
      margin: 10% 0;
    }

    .container-grey img {
        margin: 10% 0;
      }

    .middle {
        text-align: center;
        position: absolute;
        bottom: 0;
        background-color: rgba(255,255,255, .75);
        width: 100%;
      }
    .middle p {
        margin: 10px 10px;
    }
    .middle h3 {
        padding-top: 5px;
    }
   
    /**********.research {
        background-image: url(../img/oxisson_main.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 3% 0;
        
        
        
    }

    .research h2 {
        margin: 0;
        text-align: center;
        padding-bottom: 1%;
    }
    .research p {
        margin: 0;
        padding: 1% 0;
        text-align: center;
    }
    .research-content {
        background-color: rgba(255,255,255, .75);
      
    } *********************************/


    section.section-8 {
        padding: 50px;
        background-image: url('../img/oxisson_main.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    section.section-8 h2 {
        text-align: center;
        margin-top: 0;
    }
    
    section.section-8 > article {
        margin: 0 auto;
        border-radius: 5px;
        background-color: rgba(255,255,255, .75);
    }
    
    section.section-8 > article > p {
        padding: 10px;
        text-align: center
    }
    
    section.section-8 article > div {
        display: table;
        margin: 0 auto;
        margin-top: 10px;
    }
    
    
    section.section-8 .row-1 > div {
        width: calc(50% - 50px);
    }
    
    section.section-8 .row-2 > div {
        width: calc(33% - 50px);
    }
    
    .image-cwp {
        padding-left: 25px;
    }
    
    .image-apa {
        padding-left: 50px;
    }
    
    .image-1da {
        padding-left: 25px;
    }
    
    .image-3da {
        padding-left: 50px;
    }
    
    .image-5da {
        padding-left: 50px;
    }

 .comments h2 {
     text-align: center;
 }

 .comments-content {
     padding: 3% 5% 3% 2%;
     width:90%;
     cursor: pointer;
 }

 .comments-content p {
     text-align: justify;
 }
 .comments-content img {
     float: right;
     border-radius: 50px;
 }
 .comments-content hr {
     width: 40%;
     position: absolute;
     margin-left: 15%;
     border-bottom: 1px solid  rgb(68, 189, 0);
     border-top:none;
     border-right: none;
     border-left: none;
 }
 .comments-content hr:hover{
    border-bottom: 2px solid  rgb(68, 189, 0);
 }
 .comments-content h3 {
     font-size: 20px;
     font-weight: 100;
 }
 .comments h2 {
     padding: 50px 0 0 0;
     margin: 0;
 }


 .feedback {
    background-image: url(../img/oxisson_user2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    max-width: 100%;
    height: auto;
 }

 .feedback h2 {
     padding: 3% 0 0 0;
     text-align: center;
 }
 .feedback p {
     padding: 0% 0;
    text-align: center;
}

 .contact-info {
    margin-top: 20px;
    margin: 2% 15% 0% 15%;
}

.contact-info input[type="text"]{
	width: 100%;
    color:rgba(0,0,0, .75);
    background-color: rgba(255,255,255, .50);
	margin-bottom: 23px;
	padding: 12px 10px;
	outline: none;
	border: 1px solid  rgba(0,0,0, .50);
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	}
.contact-info textarea{
	width: 100%;
    color: rgba(0,0,0, .75);
    background-color: rgba(255,255,255, .50);
	resize: none;
	height: 225px;
	padding: 10px;
	outline: none;
	border: 1px solid rgba(0,0,0, .50);
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
    -ms-border-radius:5px;
    font-family: Montserrat-Regular; 
    }
    .contact-info textarea:focus {
        background-color: rgba(255,255,255, 1);
    }
    .contact-info input[type="text"]:focus {
        background-color: rgba(255,255,255, 1);
    }
.contact-info input[type=submit] {
	color: rgba(0,0,0, .50);
	padding: 13px 50px;
	font-size: 16px;
	cursor: pointer;
	font-weight: 500;
	margin-top:27px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border: 1px solid rgba(0,0,0, .50);
	background:none;
    outline: none;
    margin-bottom: 5%;
	}
	
.contact-info input[type=submit]:hover {
	background:rgba(255,255,255, .75);
	border: 1px solid rgba(255,255,255, .75);
	color:rgba(0,0,0, .50);
	transition: .5s all;
	-webkit-transition: .5s all;
	-o-transition: .5s all;
	-ms-transition: .5s all;
	-moz-transition: .5s all;	
    }
    
    footer {
        background-color: rgb(68, 189, 0);
        width: 100%;
    }

    footer ul {
        list-style: none;
        margin: 0;
       padding: 0 10% 0 0 ;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    footer ul li {
        display: inline-block;
        padding: 20px 10px;
    }
    footer ul li a {
        text-decoration: none;
        font-size: 14px;
        font-family: Montserrat-Regular; 
        color: #fff;
        font-weight: 300; 
    }

    footer a i {
        position: absolute;
        padding: 13px 0 13px 10%;
        color: #fff;
        font-size: 30px !important;
    }