@font-face {
    font-family: rawRegular;
    src: url("/javax.faces.resource/fonts/RawengulkRegular.ttf.xhtml");
    font-weight: normal;
}
@font-face {
    font-family: rawRegular;
    src: url("/javax.faces.resource/fonts/RawengulkBold.ttf.xhtml");
    font-weight: bold;
}
@font-face {
    font-family: rawBold;
    src: url("/javax.faces.resource/fonts/RawengulkBold.ttf.xhtml");
}
@font-face {
    font-family: gotham;
    src: url("/javax.faces.resource/fonts/Gotham-Bold.otf.xhtml");
    font-weight: bold;
}
@font-face {
    font-family: gotham;
    src: url("/javax.faces.resource/fonts/Gotham-Light.otf.xhtml");
    font-weight: normal;
}
body{
	margin-left: 0px;
	font-family: rawRegular;
	font-size: 18;
	background-image: url("/javax.faces.resource/images/triangles2.png.xhtml");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0px 80px; 
}
h1, h2 {
	margin-bottom: 0;
	margin-top: 0;
}
a {
	color: black;
	text-decoration: none;
	padding-left: 3vw;
}
a:link {
    color: black;
	text-decoration: none;
}

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

a:hover {
    color: black;
    text-decoration: underline;
}

a:active {
    color: black;
    text-decoration: underline;
}
p {
	font-family: gotham;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
}
#header {
	position: relative;
	height: 60px;
	padding-top: 20px;
	padding-left: 10vw;
	padding-right: 10vw;
	
}
.logo {
	float: left;
}
.menu {
	float: right;
}
#firstpart {
	position: relative;
}
#firstcontent {
	position: absolute;
	text-align: right;
	top: 10vw;
	right: 15vw;
    font-size: 2.0vw;
}
#firstcontent > span {
	font-size: 1.8vw;
}
.down {
	position: absolute;
	top: 45vw;
    width: 100%;
    text-align: center;
}
#secondpart {
	position: absolute;
	top: 53vw;
	width: 100%;
	display: block;
	background-image: url("/javax.faces.resource/images/triangles2.png.xhtml"), url("/javax.faces.resource/images/bottombg.jpg.xhtml");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
    background-position: 0px 0px, 0px 0px; 
}
#secondoverlay {
	position: absolute;
}
#secondheader {
	background: url("/javax.faces.resource/images/triangles2.png.xhtml"), white;
	background-repeat: no-repeat;
	background-size: 100% auto;
    background-position: 0px 0px, 0px 0px; 
	width: 100%;
	height: 15vw;
	position: absolute;
	z-index: 0;
	top: 0px;
}
#secondcontent {
	top: 8vw;
	position: relative;
	left: 10vw;
	width: 75vw;
	padding: 2vw 2vw 2vw 2vw;
    background-color: white;
}
#secondtitle {
	position: absolute;
	left: 10vw;
	padding-left: 2vw;
	padding-top: 5vw;
}
#secondtitle > span {
	background-color: white;
	border: 2px black solid;
}
#secondbottom {
	width: 100%;
	height: 400px;
}
#bottomwhite {
	position: absolute;
	background-color: rgba(255,255,255,0.7);
	width: 100%;
	height: 200px;
	bottom: 0px;
}
#cakes {
	position: absolute;
    height: 25vw;
    right: 3vw;
    top: 13vw;
    width: 5vw;
    vertical-align: middle;
}
.nav:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}