@import url('https://fonts.googleapis.com/css?family=Chilanka');
@import url("https://fonts.googleapis.com/css?family=Dekko|Lato:900|Rock+Salt");
@import url('https://fonts.googleapis.com/css?family=Poppins:900i');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  /* center the content in the page (mainly horizontally) */
  background: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(0)" opacity="0.2" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g  fill="%23250E17"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>'),
    rgb(237, 180, 0);
  background-size: 10px, 100%;

  padding:5px;
	font-family: 'Chilanka', serif;
}

#navigation {
	position: relative;
  margin-left: auto;
  width: 900px;
  margin-right: auto;
}

@media only screen and (max-width: 575px) {
  #navigation {
      width: 900px;
  }
}

@media (min-width: 908px){
  #navigation {
    display: table;
  }
}

.nav {
  display: contents;
}

.extraline {
  margin-top: 15px;
}

.extrabottom {
  margin-bottom: 50px;
}

.extratop {
  margin-top: 50px;
}

.extraleft {
  margin-left: 50px;
}

.extraright {
  margin-right: 50px;
}

@media only screen and (max-width: 908px) {
  .content {
      width: 900px;
      text-align: center;
      margin-top: 280px;
  }
}


@media only screen and (min-width: 908px) {
  .content {
      text-align: center;
      margin-top: 50px;
  }
}

#navigation .nav {
	box-shadow: 0 0 16px -1px #96211b;
	text-transform: uppercase;
	background: #dc5248;
	height:58px;
	border-left:1px solid #e45a4e;
	border-right:1px solid #e45a4e;
	z-index:3;
	position: relative;
	width:95%;
	left:2.4%;
}

.nav a {
	padding:4px 20px;
	border-radius:15px;
}

.active-menu {
	padding:5px 25px;
	background:#f4695b;
	margin-right:15px;
}

#navigation ul {
	padding:0;
	margin:0;
}

#navigation ul li {
	float:left;
	list-style: none;
	margin-left:0;
}

#logo {
	text-shadow: 1px -2px 4px #962215;
}

.dark-color {
	position: relative;
	width:100%;
	height: 76px;
	background:#aa2b1d;
}

.light-color {
	background: #dc5248;
	z-index: 3;
	position: relative;
	width:102%;
	top:11%;
	left:-1%;
}

.arrows {
	position:absolute;
	width:100%;
	height: 100%;
}

 .arrows span {
	position: absolute;
	width:0;
	height:0;
	border-top: 39px inset transparent;
	border-bottom: 39px inset transparent;
}

.ar-left {
	left:0;
	border-left: 10px solid rgb(237, 180, 0);
	z-index:2;
}

.ar-right {
	right:0;
	border-right: 10px solid rgb(237, 180, 0);
	z-index:2;
}

.ar-left2, .ar-right2 {
	border-top: 30px inset transparent !important;
	border-bottom: 30px inset transparent !important;
	top:9.7%;
	z-index:4;
}

.ar-left2 {
	left:-1.1%;
	border-left: 12px solid rgb(237, 180, 0);
}

.ar-right2 {
	right:-1%;
	border-right: 12px solid rgb(237, 180, 0);
}

.topnav {
  padding-top: 5px;
  overflow: hidden;
}

.topnav a {
  float: left;
  margin-top: -3px;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
}

.topnav a:hover {
  text-decoration: underline;
}

.topnav a.active {
}

.topnav a.main {
  background-color: #008687;
  padding-top: 18px;
  height: 69px;
  margin-top: 0px;
  color: #f2f2f2;
  border: 2px solid #232B2B;
}

.topnav-centered a {
  float: none;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: right;
  margin-left: 180px;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 908px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
    margin-left: auto;
  }

  .topnav {
    width: 100%;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}