font problem

hello,

i have a problem with my site fonts across different browsers. In chrome the site look fine but in firefox and IE it looks different. It seems to have different font style that also breaks the column height of my service boxes. I use the default font (open sans). My url is dementia-community.gr

This is my style.css in my child theme in case i made some mistake there and messed-up something because i am new at this.

.navbar-default .navbar-nav > li > a {
  color: #F5F7FA;
  line-height: 40px;
  text-transform: none;
  font-size: 12px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #6CA76B;
}

.btn{background-color:#e36b2c}

/*Servicebox*/
.osc_servicebox .btn{color:white !important;}
.osc_servicebox .btn:hover{color:#e36b2c !important;}

#panel-4-1-0-0{overflow:hidden;border-radius: 1em;height:100%;}
#panel-4-1-1-0{overflow:hidden;border-radius: 1em;height:100%;}
#panel-4-1-2-0{overflow:hidden;border-radius: 1em;height:100%;}
#panel-4-1-3-0{overflow:hidden;border-radius: 1em;height:100%;}

#panel-4-0-0-0{height:50px;background-color:#4ecdc4;color:white;text-align:center;font-size:26px;}

/*Latest Posts Widget */
#panel-4-2-0-0{background-color:#eaeae9;height:350px;overflow:hidden;border-top-left-radius: 1.5em;border-top-right-radius:1.5em;}
#panel-4-2-0-0 h3{background-color:#e36b2c !important;color:white;text-align:center;}
.post{right:10px;margin-left:10px;background-color:white;box-shadow: 5px 5px 5px #4D4D4D;padding:5px;width:95%;}

/*Map Widget*/
#panel-4-2-1-0{background-color:#eaeae9;height:350px;overflow:hidden;border-top-left-radius: 1.5em;border-top-right-radius:1.5em;}
#panel-4-2-1-0 h3{background-color:#e36b2c;color:white;text-align:center;}

/*Newsletter Widget */
#panel-4-3-0-0{background-color:#eaeae9;}
#panel-4-3-0-0 .btn{text-transform: none;}
#panel-4-3-0-0 .btn:hover{background-color:#e36b2c;color:#87d186;}
#panel-4-3-0-0 h3{background-color:#4ecdc4;color:white;text-align:center;}

/*Social Widget*/
#panel-4-3-1-0{background-color:#eaeae9;}
#panel-4-3-1-0 h3{background-color:#4ecdc4;color:white;text-align:center;}

/*Calendar Widget*/
#panel-4-3-2-0{background-color:#eaeae9;}
#panel-4-3-2-0 h3{background-color:#4ecdc4;color:white;text-align:center;}

/*Menu float left*/
.nav navbar-nav{float: left;}
#menu-menu{float: left;}
.my-nav-menu-search{display:inline;max-width:200px;float: right;padding-top: 20px;margin-left:250px;}

/*Social*/
.facebook{background-color:#86d186 !important;}
.twitter{background-color:#86d186 !important;}
.youtube{background-color:#86d186 !important;}
social_icon fa fa-facebook{background-color:white !important;}

/*Footer style*/
.widgettitle{color:#62af65;text-align:center;font-size:18px;text-transform: none;font-weight:bold;}
#pages-5{color:white;}
#pages-5 a{color:white;}
#pages-5 ul li{border-style:none;}
#pages-5 ul li:before {content: "\3E 020";}

/*Footer Banner*/
.add_footer{background-color: white;padding-top:10px;}
.add_footer p{padding-top: 30px;padding-left: 320px;height:150px;text-align:justify;}

/*Home Content full-width*/
.home .post-inner-content {
  border: none;
}

@media (min-width: 1200px) {
  .home .container {
    max-width: 1024px;
  }
}

.home .post-inner-content {
  padding: 0;
}

/*Page content full-width*/
.page .post-inner-content {
  border: none;
}

@media (min-width: 1200px) {
  .page .container {
    max-width: 1024px;
  }
}

.page .post-inner-content {
  padding: 0;
}

/*Slider*/.
.top-section{width:1024px !important;}
.flex-caption{width:1024px;}
.flex-caption h2{width:1024px;background-color:#e36b2c;opacity:0.7;}
.flex-caption h2:hover{width:1024px;background-color:#e36b2c;opacity:1;}
.flex-next:hover{color:#e36b2c;}
.flex-prev:hover{color:#e36b2c;}

/*Header width*/
.site-header{max-width:1024px;margin-left: auto;margin-right: auto;}

/*Footer width*/
#footer-area{max-width:1024px;margin-left: auto;margin-right: auto;}

/*Footer Afairesh border*/
#colophon{border:none;}

Any ideas on what could cause that problem?