@font-face
         { font-family: 'Rubik-Light';
         src: url('fonts/Rubik-Light.ttf') format('truetype'); }

@font-face
         { font-family: 'Rubik-Italic';
         src: url('fonts/Rubik-Italic.ttf') format('truetype'); }

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

@font-face
         { font-family: 'Rubik-Bold';
         src: url('fonts/Rubik-Bold.ttf') format('truetype'); }


         
  @font-face
         { font-family: 'Esther';
         src: url('fonts/Esther.ttf') format('truetype'); }
                
 /*@import url(http://fonts.googleapis.com/css?family=Satisfy);*/                
                
                {-moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

   div,p,body,html,input,button {
     font-family:Rubik-Light;
     font-size: 1.0em;
     line-height:1.4;
     color:#963246;
}

p {
  text-align:justify;
  }

h1 {
  font-family:Esther;
     font-size: 22px;
     line-height:1.4;
     color:#963246;
 }

h2 {
  font-family:Esther;
     font-size: 22px;
     line-height:1.4;
     color:#E8B48F;
     text-align:left;
 }

h3 {
  font-family:Esther;
     font-size: 22px;
     line-height:1.4;
     color:#E8B48F;
     text-align:center;
 }



h4 {
  font-family:Esther;
     font-size: 22px;
     line-height:0.1;
     color:#E8B48F;
     /*margin-top:0;
  margin-bottom:0;*/
 }

/*h5 {
  font-family:Rubik-Light;
     font-size: 16px;
     line-height:1.4;
     color:#963246;
 }

h6 {
  font-family:Esther;
     font-size: 16px;
     line-height:1.4;
     color:#963246;3
 }

h7 {
  font-family:Esther;
     font-size: 22px;
     line-height:1.4;
     color:#E8B48F;
     text-align:center;
 }*/

img.center {
  display:block;
  margin: 10px auto 0 auto;
  }

img.right {
  display:block;
  margin: -100px auto -20px 750px;
  }

   img {
      margin-top:0px;
      margin-right:0px;
      
  }

             body {
                margin: auto;
                padding: auto;
                text-align: left;
              /*background-color:#efe3c8;
                opacity:0.6;*/
                max-width:1240px;
                background-image:url(../aromiris_backround_1280.jpg);
                background-size:100%;
                background-position:repeat-x center center fixed;
                /*background-size:cover;*/
                font-size:100%;
                
                }
  
div#container
   width:100%;
   max-width:1280px;
   font-family:Rubik-Light;
   margin-left:auto;
   margin-right:auto;
  /*border:1px solid #00587c;margin-top:-20px:
 
   background-image:url(../aromiris_backround_1280.jpg);
                background-size:100%;
                background-position:repeat-x center center fixed;
                font-size:100%;
   opacity:0.9;*/
   height:auto;  
  }

div#header {

   }  


div#navi {
   float:left;
   /*background-color:#efe3c8;*/
   width:100%;
   /*padding:15px 10px 20px 40px;*/
   margin: -20px 0 0px 0;
}
  
div#content {
   float:left;
   width:93%;
   max-width:1280px;
   height:auto;
   min-height:500px;

   padding:25px 10px 20px 30px;
   margin:0px 0px 0 0;
}

div#content a {
   color:#e8b48f;
  font-weight:bold;
  }

div#content a:hover {
   color:#963246;
  font-weight:bold;
  }
  

div#footer {
   float:left;
   font-family:Rubik-Light;
   font-size: 14px;
   color:#000000;
   text-align:center;
   width:100%;
   height:25px;0
   margin-left:0px;
   margin-bottom:10px;
   margin-top:0px;color:963246;
  /*padding:10px 0px 0px 0px;Rubik-Bold
   background-color:#efe3c8;*/
  /*border-radius:0px 0px 10px 10px; box-shadow:0 4px 5px rgba(0,0,30,0.4);*/
}

div#footer a {
   
   font-family:Rubik-Light;
   font-size: 10px;
   color:#963246;
   text-decoration: none;
   margin-left:0px;
   margin-bottom:0px;
   margin-top:0px;
   padding:5px 0px 5px 0px;
   background-color:C8A0A0;
   border-radius:10px 10px 10px 10px;
   display:inline-block;
   background: #efe3c8;
   width:80px;
   
    }

div#footer a:hover {
   font-family:Rubik-Light;
   font-size: 10px;
   color:#ffffff;
   text-decoration: none;
   margin-left:0px;
   margin-bottom:0px;
   margin-top:0px;0
   padding:5px 0px 5px 0px;
   
   border-radius:10px 10px 10px 10px;
   display:inline-block;
   background: #963246;
   width:80px;
   }

/*menu*/
 /* MENU TOGGLE TYPE
 */
#toggle-menu {
  margin:0px 0 0px 0px;
  width:170px;
  background-color: #efe3c8;
  color: #963246;
  display: block;
  padding: 0.5em 0.5em;
  position: relative;
  font-family:Rubik-Light;
  font-size:1.5em;
  border-radius:10px 10px 10px 10px;
}

/**
 * MENU ARROWS
 */
/*.cbnav__arrow {
  border-top: 16px solid #000;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0;
  position:absolute;
  margin:50px 0 0-520px;

}*/

/*.cbnav__arrow--sub {
  border-top: 16px solid #fff;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0; }
  @media (min-width: 1024px) {
    .cbnav__arrow--sub {
      border-right: none;
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-left: 6px solid #fff; } }*/
      
/**
 * MOBILE VIEW
 */
.cbnav__arrow {
  /*border-top: 16px solid #963246;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 00px;
  position:absolute;
  margin:50px 0 0-520px;*/
  display: inline-block;
  width: 470px;
  height: 100px;
  margin:0 -20px 0 -20px;
  /*border-radius: 100px / 50px;*/
  background-color: #efe3c8;
  opacity:0.1;
}


.ham {
  position: absolute;
  padding-left: 1.25em;
}
.ham {
  content: "";
  position: absolute;
  margin:0px 0 0 320px;
  left: 2em;
  top: 0.63em;
  width: 0.3em;
  height: 0.20em;
  background: #963246;
  opacity:0.9;
  box-shadow:
    0em 0.45em 0em 0em #963246,
    0em 0.9em 0 0 #963246;
}


 
@media (max-width: 1024px) {
    .cbnav__arrow--sub {
      border-right: none;
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-left: 6px solid #fff; } }


.cbnav__lvl--first {
  background-color: #efe3c8;
  margin:0px 0 0 0px;
  width:70%;
  border-radius:20px 20px 20px 20px;
}


  .cbnav__lvl--first::after {
    clear: both;
    content: "";
    display: table; }

.cbnav__lvl--first {
  margin: 150px 0 0 50px;
  padding: 0; }

.cbnav__lvl--sub {
  margin: 0px 0 0 170px;
  padding: 0; }

.cbnav__lvl--first,
.cbnav input[type="checkbox"] {
  display: none; }

#toggle:checked + .cbnav__lvl--first,
.cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub {
  display: block; }

.cbnav__item {
  color: transparent;
  display: block;
  position: relative;
}
  .cbnav__item a {
    display: block;
    position: relative;
    text-decoration: none;
}

    .cbnav__item a:hover, .cbnav__item a:focus {
      text-decoration: none; }

.cbnav__item--header {
  background-color: #efe3c8;
  color: #fff;
  display: block;
  font-size: 0.75em;
  padding: 1.5em 1.25em 0.25em; }

.cbnav__link--first {
  margin:0px 0 0 140px;
  width:410px;
  background-color: #efe3c8;
  color: #963246;
  padding: 0.5em 0.5em;
  padding-right: 42px;
   font-family:Rubik-Light;
  font-size:1.5em;
}
  .cbnav__link--first:hover {
    background-color: #963246;
    color: #fff;
}

.cbnav__lvl--sub {

  display: none;
  padding-left: 5.5em; }

.cbnav__link--sub {
  background-color: #efe3c8;
  color: #444;
  padding: 0.5em 1em;
  padding-right: 42px;
  font-family:Rubik-Light;
  font-size:1.2em;
 
}
  .cbnav__link--sub:hover {
    background-color: #963246;
    color: #fff;
}

.cbnav__link--active {
  background-color: #efe3c8;
  color: #eee;
  padding: 0.75em 1em;
  padding-right: 42px; }

ul span.cbnav__label {
  display: none; }


/**
 * DESKTOP VIEW
 */



@media only screen and (min-width: 1024px) {


.cbnav__arrow {
  /*border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-top: 16px solid transparent;*/
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0; }

/*.cbnav__arrow--sub {
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0; }*/

  .cbnav {
    background-color: transparent;
  margin-left:00px;
  margin-top:10px;
}

  .cbnav__lvl--first {
    background-color: transparent;
    margin:0 0 0 0;
    width:100%;
}

 #toggle-menu,
  .cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub {
    display: none; }

  .cbnav__lvl--first,
  .cbnav__item:hover > input[type="checkbox"] + .cbnav__lvl--sub {
    display: block; }

  .cbnav__item {
    float: left; }

  .cbnav__link--first {
  background-color: #efe3c8;
  margin:30px 4px 0 4px;
  padding:5px 0 5px 0;
  width:146px;
  height:auto;
  display:inline-block;
  text-align:center;
  color: #963246;
  font-family:Rubik-Light;
  font-size:16px;
  text-decoration: none;
  /*border:1px inherit #963246;*/
  border-radius:10px 10px 10px 10px;
}


    .cbnav__link--first:hover {
      background-color: #963246;
      color: #fff; }

  .cbnav__link--active {
    background-color: #963246;
    color: #fff; }

  .cbnav__lvl--sub {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000; }
    .cbnav__lvl--sub .cbnav__item {
      float: none; }
    .cbnav__lvl--sub .cbnav__lvl--sub {
      top: 0;
      left: 100%;
}
  .cbnav__link--sub {
    color:#963246;
    border:1px inherit #963246;
    border-radius:10px 10px 10px 10px;
    margin:8px 4px 0 4px;
    padding:4px 0 4px 5px;
    width:219px;
  font-size:16px;
  }

.cbnav__lvl--sub1 {
   display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000; }
    .cbnav__lvl--sub1 .cbnav__item {
      float: none; }
    .cbnav__lvl--sub1 .cbnav__lvl--sub1 {
      top: 0;
      left: 100%;
}

  .cbnav__link--sub1 {
    color:#963246;
  background-color: #efe3c8;
    border:1px inherit #963246;
    border-radius:10px 10px 10px 10px;
    margin:8px 0 0 50px;
    padding:4px 0 4px 5px;
    width:219px;
  font-size:16px;  
  }

    .cbnav__link--sub1:hover {
      background-color: #963246;
      color: #fff; }

.cbnav__link--active {
    background-color: #963246;
    color: #fff; }

}
/**
 * LABELS
 */
.cbnav__label:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.cbnav__label {
  background-color: transparent;
  height: 100%;
  padding: 0 .5em;
  position: absolute;
  right: 0;
  top: 0; }


 
 @media screen and (max-width:1024px) {
 
                 html,
                 body,div,p {
                 font-size:1.05em;
                 text-align:left;
}
}

@media screen and (max-width:1024px) {
 
                 html,
                 h1,h2,h3 {
                 font-size:1.5em;
}
}


@media screen and (max-width:1024px) {
   img {
     margin-top:10px;
     width:0%;
  height:0%;
  }

   img.center {
     width:220px;
    
  }

}
@media screen and (max-width:1024px) {


p {
  
  margin-left:-400px;
  }

p.rubik16mango {
  font-size:3em;
    }



ul,li {
  list-style-type:disc;
  text-align:left;
  margin-left:-180px;
  line-height:1.8;
  }

 h4 {

  margin-left:-400px;
  font-size:1.5em;
  }

}

@media screen and (max-width:1024px) {
   div#navi {
     margin:-110px 0 0 0;
  }
}