@font-face{
    font-family:"Web-Raleway";
    src:url('../fonts/Raleway-Regular.ttf') format("truetype");
}

@font-face{
    font-family:"Web-Raleway-Bold";
    src:url('../fonts/Raleway-Bold.ttf') format("truetype");
}
.modal99{display:none;position:fixed;z-index:1000000;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}
.kategori{width:100%;}
.kategori a{background-color:#FFF;color:#870808;display:block;padding:12px;text-decoration:none;}
.kategori a:hover{background:#ee3636;color:#FFF;}
.modal-content99{position:relative;background-color:#fefefe;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;color:#ff8383;margin:auto;padding:0;width:330px;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@keyframes animatetop{from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
.close99{color:white;float:right;font-size:28px;font-weight:bold;}
.close99:hover,
.close99:focus{color:#000;text-decoration:none;cursor:pointer;}
.modal-header{padding:2px 16px;background-color:#870808;color:white;text-align:center;}
.modal-body{width:100%;}

menu, mobile{
margin-left: -20px;
margin-top: -10px;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
menu, mobile { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
body {
font: 100% "roboto", "Trebuchet MS", sans-serif;
background-color:#FFF;
}
a { text-decoration: none; }
.mobile li a, .mobile label {
display: block;
padding: .85rem;
color: #fff;
background-color: #151515;
box-shadow: inset 0 -1px #1d1d1d;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
}
.mobile li a:focus, .mobile li a:hover, .mobile label:focus, .mobile label:hover {
color: rgba(255, 255, 255, 0.5);
background: #030303;
}
.mobile label { cursor: pointer; }
.group-list a, .group-list label {
padding-left: 2rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }
.sub-group-list a, .sub-group-list label {
padding-left: 4rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }
.sub-sub-group-list a, .sub-sub-group-list label {
padding-left: 6rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover {background: #333333; }
.group-list, .sub-group-list, .sub-sub-group-list {
height: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s ease-in-out;
transition: max-height .5s ease-in-out;
}
.mobile__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }
label > span {
float: right;
-webkit-transition: -webkit-transform .65s ease;
transition: transform .65s ease;
}
.mobile__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.icon a{float: right;color: #FFF;text-decoration:none;background: #870808;padding: 22px 25px;margin-top: -1px;display:none;}
.icon a:hover{background:#111;}

nav {
	margin-top: -14px;
	float:right;
	text-align: left;
    font-family:"Web-Raleway-Bold";
    font-size:13px;
}
nav ul ul {
	display: none;
}
nav ul li:hover > ul {
		display: block;
	}
nav ul {
	background: #f9f9f9; 
	padding: 0 0px; 
	list-style: none;
	position: relative;
	display: inline-table;
	float:right;
}
nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
		float: left;
	}
nav ul li:hover {
			background: #870808;
		}
nav ul li:hover a {
				color: #fff;
			}
		
nav ul li a {
			display: block; padding: 23px 25px;
			color: #870808; text-decoration: none;
		}
			
		
nav ul ul {
		background: #870808; border-radius: 0px; padding: 0;
		position: absolute; top: 100%;
	}
		nav ul ul li {
			float: none;
			position: relative;
		}
			nav ul ul li a {
				padding: 15px 25px;
				color: #fff;
			}	
				nav ul ul li a:hover {
					background: #771212;
				}
		
nav ul ul ul {
		position: absolute; left: 100%; width:80%; top:0;
	}
figuree.snip1451 {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  width: 23%;
  color: #ffffff;
  font-size: 16px;
  background-color: #000000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
figuree.snip1451 *,
figuree.snip1451 *:before,
figuree.snip1451 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
figuree.snip1451 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
figuree.snip1451 figcaptionn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figuree.snip1451 figcaptionn:before,
figuree.snip1451 figcaptionn:after,
figuree.snip1451 figcaptionn div:before,
figuree.snip1451 figcaptionn div:after {
  opacity: 0;
}
figuree.snip1451 figcaptionn:before,
figuree.snip1451 figcaptionn:after {
  height: 50%;
  width: 50%;
  position: absolute;
  content: '';
  background-color: #080808;
}
figuree.snip1451 figcaptionn:before {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
figuree.snip1451 figcaptionn:after {
  bottom: 0;
  right: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
figuree.snip1451 figcaptionn div:before,
figuree.snip1451 figcaptionn div:after {
  width: 50%;
  height: 50%;
  position: absolute;
  content: '';
  background-color: #000000;
}
figuree.snip1451 figcaptionn div:before {
  top: 0;
  right: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
figuree.snip1451 figcaptionn div:after {
  bottom: 0;
  left: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
figuree.snip1451 i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 2em;
  z-index: 1;
  opacity: 0;
}
figuree.snip1451 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
figuree.snip1451:hover img,
figuree.snip1451.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
figuree.snip1451:hover i,
figuree.snip1451.hover i {
  opacity: 0.7;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figuree.snip1451:hover figcaptionn:before,
figuree.snip1451.hover figcaptionn:before,
figuree.snip1451:hover figcaptionn:after,
figuree.snip1451.hover figcaptionn:after,
figuree.snip1451:hover figcaptionn div:before,
figuree.snip1451.hover figcaptionn div:before,
figuree.snip1451:hover figcaptionn div:after,
figuree.snip1451.hover figcaptionn div:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 0.8;
}
.snip1451 h3 {
  font-family: 'Web-Raleway-Bold';
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
  text-align: center;
}
#b3 {
  margin-top: 30px;
  margin-bottom: 60px;
}
#b3 h1{
  text-align: center;
}
.mySlides {display:none}



/* The dots/bullets/indicators */
.dot {
  display: none;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto;background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.kategori {
    width: 100%;
}

.kategori a {
    background-color: #FFF;
    color: #870808;
    display: block;
    padding: 12px;
    text-decoration: none;
}

.kategori a:hover {
    background:#ee3636;
    color:#FFF;
}


/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    font-family: "Web-Raleway-Bold";
    color:#ff8383;
    margin: auto;
    padding: 0;
    width: 330px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #870808;
    color: white;
    text-align: center;
}

.modal-body {width:100%;}

.submenu > li {
  background: #870808;
  width: auto;
  text-align: center;
}
.submenu > li a{
  width: 100px;
}

.submenu > li:nth-child(2n+1) {
  background: #870808;
}
.menu, .menu ul {
  list-style: none;
  padding: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
  outline: 0;
}

.submenu {
  position: absolute;
  overflow: hidden;
  -webkit-transition: max-height 1ms linear 1s;
     -moz-transition: max-height 1ms linear 1s;
  pointer-events: none;
}

.menu > li:hover .submenu, .menu > li:focus .submenu {
  pointer-events: auto;
  z-index: 10;
  max-height: 2000px;
  -webkit-transition: none;
     -moz-transition: none;

}
.menu > li:hover .submenu li:nth-child(1) {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

.menu > li:hover .submenu li:nth-child(2) {
  -webkit-transition-delay: 66ms;
     -moz-transition-delay: 66ms;
      -ms-transition-delay: 66ms;
       -o-transition-delay: 66ms;
          transition-delay: 66ms;
}

.menu > li:hover .submenu li:nth-child(3) {
  -webkit-transition-delay: 133ms;
     -moz-transition-delay: 133ms;
      -ms-transition-delay: 133ms;
       -o-transition-delay: 133ms;
          transition-delay: 133ms;
}

.menu > li:hover .submenu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
     -moz-transition-delay: 200ms;
      -ms-transition-delay: 200ms;
       -o-transition-delay: 200ms;
          transition-delay: 200ms;
}

.menu > li:hover .submenu li:nth-child(5) {
  -webkit-transition-delay: 266ms;
     -moz-transition-delay: 266ms;
      -ms-transition-delay: 266ms;
       -o-transition-delay: 266ms;
          transition-delay: 266ms;
}

.menu > li:hover .submenu li:nth-child(6) {
  -webkit-transition-delay: 333ms;
     -moz-transition-delay: 333ms;
      -ms-transition-delay: 333ms;
       -o-transition-delay: 333ms;
          transition-delay: 333ms;
}

.menu > li:hover .submenu li:nth-child(7) {
  -webkit-transition-delay: 400ms;
     -moz-transition-delay: 400ms;
      -ms-transition-delay: 400ms;
       -o-transition-delay: 400ms;
          transition-delay: 400ms;
}

.menu > li:hover .submenu li:nth-child(8) {
  -webkit-transition-delay: 466ms;
     -moz-transition-delay: 466ms;
      -ms-transition-delay: 466ms;
       -o-transition-delay: 466ms;
          transition-delay: 466ms;
}

/* backward */
.submenu li:nth-child(1) {
  -webkit-transition-delay: 466ms;
     -moz-transition-delay: 466ms;
      -ms-transition-delay: 466ms;
       -o-transition-delay: 466ms;
          transition-delay: 466ms;
}
.submenu li:nth-child(2) {
  -webkit-transition-delay: 400ms;
     -moz-transition-delay: 400ms;
      -ms-transition-delay: 400ms;
       -o-transition-delay: 400ms;
          transition-delay: 400ms;
}

.submenu li:nth-child(3) {
  -webkit-transition-delay: 333ms;
     -moz-transition-delay: 333ms;
      -ms-transition-delay: 333ms;
       -o-transition-delay: 333ms;
          transition-delay: 333ms;
}

.submenu li:nth-child(4) {
  -webkit-transition-delay: 266ms;
     -moz-transition-delay: 266ms;
      -ms-transition-delay: 266ms;
       -o-transition-delay: 266ms;
          transition-delay: 266ms;
}

.submenu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
     -moz-transition-delay: 200ms;
      -ms-transition-delay: 200ms;
       -o-transition-delay: 200ms;
          transition-delay: 200ms;
}

.submenu li:nth-child(6) {
  -webkit-transition-delay: 133ms;
     -moz-transition-delay: 133ms;
      -ms-transition-delay: 133ms;
       -o-transition-delay: 133ms;
          transition-delay: 133ms;
}

.submenu li:nth-child(7) {
  -webkit-transition-delay: 66ms;
     -moz-transition-delay: 66ms;
      -ms-transition-delay: 66ms;
       -o-transition-delay: 66ms;
          transition-delay: 66ms;
}

.submenu li:nth-child(8) {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}
/* Default
 ================================================================= */
.submenu li {
  opacity: 0;

  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
          transition: opacity .4s,         transform .6s, max-height .6s;
}

.menu > li:hover .submenu li, .menu > li:focus .submenu li {
  opacity: 1;

  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}

/* default configuration */
body{
    margin : 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #373737;
    background: #eeeeee;
}
.clear{
    float: none;
    clear: both;
}
.center{
    width : 1100px;
    margin : auto;
}
.b1{
    width : 999px;
    margin : auto;
    margin-top: 12px;

}
a{
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.zipper li:nth-child(odd) {
  -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
       -o-transform: translateX(-100%);
          transform: translateX(-100%);
}

.zipper li:nth-child(even) {
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
       -o-transform: translateX(100%);
          transform: translateX(100%);
}
.jaws li {
  -webkit-transform-origin: 50% -100px;
     -moz-transform-origin: 50% -100px;
      -ms-transform-origin: 50% -100px;
       -o-transform-origin: 50% -100px;
          transform-origin: 50% -100px;
}

.jaws li:nth-child(odd) {
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.jaws li:nth-child(even) {
  -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.fan li {
  -webkit-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
       -o-transform-origin: 0% 0%;
          transform-origin: 0% 0%;

  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}
/* header configuration */
#header{
    background:#f9f9f9;
    position: fixed;
    width: 100%;
  left:0px;
  top:0px;
  height:60px;
  z-index:9999;
}
#header #logo{
    float: left;
    width:250px;
}
#header #logo img{
    float: left;
    position: relative;
}
#header .navigation{
    float: right;
}
#header .navigation ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#header .navigation ul li{
    display: inline-block;
    font-size: 12px;
    font-family: "Web-Raleway-Bold";
    margin-right:-5px;
}
#header .navigation ul li a{
    display: inline-block;
    padding: 23px 20px;
    text-transform: uppercase;
    color       : #870808;
    text-decoration: none;
}
#header .navigation ul li ul li a{
    display: inline-block;
    padding: 23px 20px;
    text-transform: uppercase;
    color       : #FFF;
    text-decoration: none;
}
#header .navigation ul li a:hover{
    background: #870808;
    color:#FFF;
    transition: all 0.3s;
}
#header .navigation ul li a:hover{
    background: #870808;
    color:#FFF;
    transition: all 0.3s;
}
#header .navigation ul li ul li a:hover{
    background: #FFF;
    color:#870808;
    transition: all 0.3s;
}
/* banner configuration */
.btn-primary{
    border: solid 2px #FFFFFF;
    color : #FFF;
    text-transform: uppercase;
    font-family: "Web-Raleway-Bold";
    font-size: 13px;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
}
.btn-primary:hover,
.content-list .list-services .button a:hover{
    background: #FFFFFF;
    color: #870808;
}
.btn-primaryy{
    border: solid 1px #FFFFFF;
    color : #FFF;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    width: 42%;
    display: inline-block;
}
.btn-primaryy:hover,
.content-list .list-services .button a:hover{
    background: #FFFFFF;
    color: #870808;
}
.tabcontent p{
  text-align: justify;
}
#bb{
    margin-top: 0px;
    padding: 18px 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    background: #222;
    height: 20px;
}
.bb3 i {
font-size: 55px;
float: left;
padding-left: : 5px;
padding-right: 20px;
}
.desc p span{
    font-family: "Web-Ralway-Bold";
    font-size:15px;
}
.bb2 .bb3{
    float:left;
    width:31%;
    color:#FFF;
    margin-right: 20px;
    margin-top: 0;
    margin-bottom:0;
    text-align: left;
}
.clear {
  clear: both;
}


.card-one {
  position: relative;
  width: 800px;
  background: #fff;
  box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.4);
  margin:0 auto;
}
.card-one header {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #dedede;
}.card-one header .avatar {
  position: absolute;
  left: 50%;
  top: 30px;
  margin-left: -70px;
  z-index: 5;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  background: brown;
  border: none;
}
.card-one header .avatar img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 130px;
  height: auto;
}
.card-one h3 {
  position: relative;
  font-size: 20px;
  margin: 80px 0 30px;
  text-align: center;
  color: brown;
}
.card-one h3::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 1px;
  background: brown;
}
.card-one .desc {
  padding: 0 1.5rem 2rem;
  text-align: justify;
  line-height: 1.5;
  color: #777;
}

.bb2 .bb3 p{
    line-height: 25px;
    color: #A4A4A4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 0px;
    text-align: justify;
}
/* this for our services configuration */
#footerr{
    padding: 18px 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    background: #222;
    margin-top: 30px;
}
.content-list .list-footer{
    float:left;
    width:20%;
    color:#FFF;
    margin-left:28px;
    margin-right:27px;
    margin-top: 0;
    margin-bottom:0;
    text-align: left;
}
.content-list .list-footer h2{
    text-transform: uppercase;
    font-family: "Web-Raleway-Bold";
    font-size: 15px;
    margin-bottom: 5px;
    margin-top : 0;
    color: #FFF;
    border-bottom: solid #333 1px;
    padding-bottom: 10px;
}
.content-list .list-footer p{
    line-height: 25px;
    margin-bottom: 10px;
    color: #888;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.content-list .list-footer a{
    line-height: 25px;
    margin-bottom: 10px;
    color: #888;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
}
.content-list .list-footer img{
    margin-top: 0 auto;
}
/* this for copyright configuration */
#cr{
    background: #111;
    padding: 17px 0;
    text-align: center;
    color: #888;
    font-size: 13px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#sosmed{
text-align: center;
margin-top: 0px;
}
.container {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin: 0 auto;
}
.container .circle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 5px;
  stroke-dasharray: 40;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-animation: outWaveOut 1s cubic-bezier(0.42, 0, 0.58, 1) forwards;
          animation: outWaveOut 1s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
.container .social {
  color: white;
  font-size: 1.8em;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.container:hover {
  cursor: pointer;
}
.facebook:hover .circle {
  fill: #ffffff;
  fill-opacity: 1;
  -webkit-animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorFacebook 1s linear forwards;
          animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorFacebook 1s linear forwards;
}
.facebook:hover .social {
  color: #3b5998;
}
.google:hover .circle {
  fill: #ffffff;
  fill-opacity: 1;
  -webkit-animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorGoogle 1s linear forwards;
          animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorGoogle 1s linear forwards;
}
.google:hover .social {
  color: #cb2027;
}
.instagram:hover .circle {
  fill: #ffffff;
  fill-opacity: 1;
  -webkit-animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorInstagram 1s linear forwards;
          animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorInstagram 1s linear forwards;
}
.instagram:hover .social {
  color: #d10869;
}
.linkedin:hover .circle {
  fill: #ffffff;
  fill-opacity: 1;
  -webkit-animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorLinkedin 1s linear forwards;
          animation: outWaveIn 1s cubic-bezier(0.42, 0, 0.58, 1) forwards, colorLinkedin 1s linear forwards;
}
.linkedin:hover .social {
  color: #007bb6;
}
div.tab {
    overflow: hidden;
    background-color: #c0392b;
}
/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 14px;
    font-family: "Web-Raleway-Bold";
    color: #FFF;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ce4b3d;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #e74c3c;
    color: #FFF;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    background: #e74c3c;
    color: #FFF;
}
#myTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 7px;
  font-size: 14px;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #ce4b3d;
}
#drawing{
  width: 100%;
  height: 700px;
  background: #FFF;
  margin-top: 60px;
  margin-bottom: -30px;
}
.drawing-left{
  width: 65%;
  float: left;
  background: #FFF;
}
.drawing-left img{
  width:100%;
  height: auto;
  float: left;
  margin-top: 50px;
}
.drawing-left p{
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px;
  text-align: justify;
}
.drawing-right{
  width: 30%;
  float: right;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@-webkit-keyframes colorFacebook {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #3b5998;
  }
}
@keyframes colorFacebook {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #3b5998;
  }
}
@-webkit-keyframes colorGoogle {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #dd4b39;
  }
}
@keyframes colorGoogle {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #dd4b39;
  }
}
@-webkit-keyframes colorInstagram {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #cb2027;
  }
}
@keyframes colorInstagram {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #cb2027;
  }
}
@-webkit-keyframes colorLinkedin {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #007bb6;
  }
}
@keyframes colorLinkedin {
  from {
    stroke: #ffffff;
  }
  to {
    stroke: #007bb6;
  }
}
@-webkit-keyframes outWaveIn {
  to {
    stroke-width: 10px;
    stroke-dasharray: 400;
  }
}
@keyframes outWaveIn {
  to {
    stroke-width: 10px;
    stroke-dasharray: 400;
  }
}
@-webkit-keyframes outWaveOut {
  from {
    stroke-width: 10px;
    stroke-dasharray: 400;
  }
  to {
    stroke: #ffffff;
    stroke-width: 5px;
    stroke-dasharray: 40;
  }
}
@keyframes outWaveOut {
  from {
    stroke-width: 10px;
    stroke-dasharray: 400;
  }
  to {
    stroke: #ffffff;
    stroke-width: 5px;
    stroke-dasharray: 40;
  }
}
@media screen and (max-width:1231px){.center{width:auto;padding:0 20px;margin:0;}
}
@media screen and (max-width:1156px){.content-list .list-footer{width:19%;display:block;float:left;margin-bottom:15px;}}
@media screen and (max-width:1095px){.center{width:auto;padding:0 20px;margin:0;}
}
@media screen and (max-width:1090px){.b1{height:250px;}.snip1543{width:32%;display:block;float:right;margin-bottom:15px;}}
@media screen and (max-width:1035px){
.b1{height:250px;width: auto;}.snip1543{width:32%;display:block;float:left;margin-bottom:15px;}.center{width:auto;padding:0 20px;margin:0;}
}
@media screen and (max-width:1069px){.content-list .list-services{width:27%;display:block;float:left;margin-bottom:15px;}}
@media screen and (max-width:977px){
#header .navigation{float: left;width:auto;margin:auto;}
#header .navigation ul{display:table;margin:0 auto;}
.icon a{display: block;}
nav{display: none;}
}
@media screen and (max-width:973px){
  .content-list .list-footer{width:18%;display:block;float:left;margin-bottom:15px;}
}
@media screen and (max-width:913px){
#banner{background:url("../images/b.jpg") no-repeat center center;-webkit-background-size:cover;background-size:cover;padding:80px;height:255px;color:#FFFFFF;text-align:center;margin-top:60px;}
.bb2 .bb3{float:left;width:30%;color:#FFF;margin-right:20px;margin-top:0;margin-bottom:0;text-align:left;}
.content-list .list-footer{width:18%;display:block;float:left;margin-bottom:15px;}
}
@media screen and (max-width:879px){
#banner .center{width:auto;padding:0 20px;margin:0;}
}
@media screen and (max-width:861px){
.snip1543{width:32%;display:block;float:left;margin-bottom:15px;}
.card-one{width:100%;}
}
@media screen and (max-width:842px){
.content-list .list-footer{width:17%;display:block;float:left;margin-bottom:15px;}
}
@media screen and (max-width:806px){
.snip1543{width:42%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
.b1{height: 750px;}
.content-list .list-footer{width:40%;display:inline-block;float:none;margin-bottom:15px;}
.content-list .list-footer img{width: 50%;height: 50%;margin: 0 auto;}
}
@media screen and (max-width:751px){
#banner .htext{width: auto;}
}
@media screen and (max-width:724px){
  #banner{background:url("../images/b.jpg") fixed;padding:15px;}
.bb2 .bb3{float:none;width:70%;margin:0 auto;margin-bottom:30px;text-align:justify;}
}
@media screen and (max-width:707px){
  .snip1543{width:49%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
.bb2 .bb3 i{font-size: 30px;}
#banner .center .htext h1{font-size: 15px;margin-top: 35px;}
}
@media screen and (max-width:657px){
}
@media screen and (max-width:623px){
.content-list .list-footer{width:38%;display:inline-block;float:none;margin-bottom:15px;}
.snip1543{width:56%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
}
@media screen and (max-width:585px){
.snip1543{width:60%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
}
@media screen and (max-width:529px){
#banner{height: 280px;}
.content-list .list-footer{width:35%;display:inline-block;float:none;margin-bottom:15px;}
.snip1543{width:68%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
.content-list .list-footer img{width: 65%;height: 65%;margin: 0 auto;}
}
@media screen and (max-width:473px){
#banner{height: 320px;}
.snip1543{width:77%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
.content-list .list-footer img{width: 100%;height: 100%;margin: 0 auto;}
}
@media screen and (max-width:468px){
.container{margin-left: -10px;}
}
@media screen and (max-width:434px){
#banner{height: 330px;}
.bb2 .bb3{float:none;width:90%;margin:0 auto;margin-bottom:30px;text-align:justify;}
.snip1543{width:85%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
.content-list .list-footer{width:90%;display:inline-block;float:none;margin: 0 auto;margin-bottom:15px;}
.content-list .list-footer img{width: 50%;height: 50%;margin:0 auto;}
}
@media screen and (max-width:428px){
.container {margin-left: -15px;}
}
@media screen and (max-width:408px){
.container {margin-left: -20px;}
}
@media screen and (max-width:400px){
#banner{height: 350px;}
}
@media screen and (max-width:388px){
.container {margin-left: -20px;margin-right: -10px;}
}
@media screen and (max-width:371px){
#header #logo img{margin-top:0px;}
}
@media screen and (max-width:370px){
#header #logo img{margin-top:0px;}
}
@media screen and (max-width:369px){
#header #logo img{margin-top:0px;}
}
@media screen and (max-width:368px){
#header #logo img{margin-top:0px}
}
@media screen and (max-width:367px){
#header #logo img{margin-top:0px}
}
@media screen and (max-width:366px){
#header #logo img{margin-top:0px}
}
@media screen and (max-width:365px){
#header #logo img{margin-top:0px}
}
@media screen and (max-width:364px){
#header #logo img{margin-top:0px}
}
@media screen and (max-width:363px){
#header #logo img{margin-top: -60px}
}
@media screen and (max-width:362px){
#header #logo img{margin-top: -60px}
}
@media screen and (max-width:361px){
#header #logo img{margin-top: -60px}
}
@media screen and (max-width:360px){
#header #logo img{margin-top: -60px}
}
@media screen and (max-width:350px){
.snip1543{width:95%;display:block;float:none;margin:0 auto;margin-bottom: 10px;}
#banner{height: 400px;}
}
@media screen and (max-width:348px){
.container {margin-left: -20px;margin-right: -15px;}
}
@media screen and (max-width:328px){
.container {margin-left: -20px;margin-right: -20px;}
}