body {
  margin: 0;
  padding: 0;
  background: #ff685d !important;
  font-family: Helvetica Neue, Arial, sans-serif;
  color: #fff;
  overflow-x:hidden;
}

body.open {
  margin: 0;
  padding: 0;
  background-color: #ff685d;
  font-family: Helvetica Neue, Arial, sans-serif;
  color: #fff;
  overflow:hidden;
}

.menu {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

.menu-circle {
  background-color: #d6e8b3;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

.menu-overlay {
  visibility: hidden;
  background-color: rgba(0,0,0,.5);
  color: #333;
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
}

.menu-overlay p {
  color: #E6B9BE !important;
  font-weight: 600;
  font-size: 30px;
  padding: 2%;
  margin: 25% 1% 0;
  display: inline-block;
}

.menu-overlay a {
  text-decoration:none !important;
  color: #E6B9BE !important;
  }

.menu-line {
  background-color: #333;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-line-1 { top: 0; }

.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-3 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-4 { bottom: 0; }

.menu:hover .menu-circle { transform: scale(1.4); background: #d6e8b3}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.menu.open .menu-circle { transform: scale(60); background:rgba(214,232,179,0.9)}

.menu.open .menu-line-2 { opacity: 0; }

.menu.open .menu-line-3 { opacity: 0; }

.menu.open .menu-line-1 { transform: translateY(7px) translateY(-50%) rotate(-45deg); }

.menu.open .menu-line-4 { transform: translateY(-7px) translateY(50%) rotate(45deg); }


.largelogo {
margin:0 auto;
max-width:10%;
background:url(../resources/images/anslogo.png) 50% 50% no-repeat;
background-size:contain;
padding-top:500px;
}

.logo {
display:grid;
position:absolute;
top:0;
right:0;
padding-top:10px;
padding-right:25px;
width:10%;
}

@media screen and (max-width: 760px){
.largelogo {
margin:0 auto;
max-width:25%;
background:url(../resources/images/anscreationlogo.png) 50% 50% no-repeat;
background-size:contain;
}

.logo {
display:grid;
position:absolute;
top:0;
right:0;
padding-top:10px;
padding-right:25px;
width:20%;
}
}

@font-face{
font-family: 'glossandbloom';
src: url('../resources/fonts/glossandbloom.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face{
font-family: 'raleway';
src: url('../resources/fonts/raleway.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.title {
width:100%;
height:10%;
padding-top:30px;
padding-left:30px;
padding-right:30px;
text-align: center;
}

.title p {
font-family:'glossandbloom';
text-align:center;
font-size:50px;
}

@media screen and (max-width: 760px){
.title {
width:100%;
height:10%;
padding-top:30px;
padding-left:15px;
padding-right:15px;
}
}

.desc {
font-family:'raleway';
font-size:20px;
width:50%;
height:10%;
margin:auto;
padding-top:30px;
padding-left:50px;
padding-right:50px;
text-align: center;
}

@media screen and (max-width: 760px){
.desc {
font-family:'raleway';
font-size:20px;
width:80%;
margin:auto;
height:10%;
padding-top:70px;
padding-left:15px;
padding-right:15px;
}
}