@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;
}

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;
     width:670px;
     height:60px;
     margin:0px auto -10px auto;
 }

h4 {
     font-family:Esther;
     font-size: 22px;
     line-height:1.4;
     color:#e8b48f;
     text-align:center;
     width:670px;
     height:60px;
     margin:-40px auto 15px auto;
 }

h5 {
     font-family:Esther;
     font-size: 22px;
     line-height:1.4;
     color:#e8b48f;
     text-align:center;
     width:670px;
     height:60px;
     margin:-40px auto 30px auto;
 }

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

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

img.center2 {
  display:block;
  margin: -120px auto 0 auto;
  width:60%;
  }

img.center3 {
  display:block;
  margin: 50px auto 20px auto;
  width:40%;
  }



   img {
     display:block;
      margin:0px 0 0px 0;
      padding:0px 0 0px 0;
      
        }

             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#navi {
   float:left;
   /*background-color:#efe3c8;*/
   width:100%;
   /*padding:15px 10px 20px 40px;*/
   margin: -20px 0px -20px 0px;
}
  
div#content {
   float:left;
   width:90%;
   max-width:1280px;
   height:auto;
   min-height:500px;
   padding:25px 10px 00px 40px;
   margin:-10px 0px 0px 12px;
  }
  
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:0px;
   margin-top:20px;
   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:10px;
   margin-top:-20px;
   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:-20px;
   padding:5px 0px 5px 0px;
   
   border-radius:10px 10px 10px 10px;
   display:inline-block;
   background: #963246;
   width:80px;
   }



/* * MENU TOGGLE TYPE
 *
 * Use a Hamburger Icon or a Navigation bar.
 * Please note the slightly different HTML markup (demos).
 *
 */
/**
 * LABEL FORM
 */
/**
 * COLORS
 *
 * You can assign different colors to the first level and the sublevels,
 * e.g. a transparent bar and colored sublevels (see hamburger demo).
 */
/* first menu level */
/* menu sublevels */
/* active page */
/* miscellaneous */
/**
 * MEASURES
 */
/**
 * 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;{4px
  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,
.cbnav__lvl--sub {
  margin: 10px 0 0 0px;
  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: #fff;
  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:0px;
  margin-right:0px;
  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: #999;
    color: #000; }

  .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 0px 0 10px;
    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; }

}
/**
 * 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;
}
}

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




@media screen and (max-width:1024px) {
 
                h4 {
                 font-size:1.5em;
                 margin: -80px auto 20px auto;
}

                h5 {
                                font-size: 4.5em;
                 margin: 0px auto 50px auto;
  }

               img.center  {
               width:22%;
               margin-bottom:50px;
               
  }
}

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

.csc-textpic-imagewrap img{
   width:100%;
  height:100%;
  margin:0px 00px 0px -0px;
  padding:0px 0px 0px 0px;
  }

.csc-textpic-imagecolumn img{
  width:180%;
  height:100%;
  margin:0px 0px 0 0px;
  padding:0px 0px 0px 0px;
  }

.csc-textpic-imagerow {
  width:250%;
 height:100%;
  margin:0px 90px 0 -200px;
  padding:5px 20px 5px 5px;
  }




}


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


img.center3 {
  width:60%;
  margin:80px 0 50px 170px;
  }

}





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


  
  
  

@media screen and (max-width:1024px) {
  div#footer a {
   
   font-family:Rubik-Light;
   font-size: 16px;
   color:#963246;
   text-decoration: none;
   margin-left:0px;
   margin-bottom:30px;
   margin-top:30px;
   padding:5px 0px 5px 0px;
   background-color:C8A0A0;
   border-radius:10px 10px 10px 10px;
   display:inline-block;
   background: #efe3c8;
   width:140px;
  height:20px;
   
    }


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