@-webkit-keyframes cycle {
     0% { top: 0px; }
     4% { top: 0px; }
     16% { top: 0px; opacity:1; z-index:0; }
     21% { top: 0px; opacity: 0; z-index: -1; }
     92% { top: 0px; opacity: 0; z-index: 0; }
     96% { top: 0px; opacity: 0; }
     100%{ top: 0px; opacity: 1; }
}
@-webkit-keyframes cycletwo {
     0% { top: 0px; opacity: 0; }
     16% { top: 0px; opacity: 0; }
     20% { top: 0px; opacity: 1; }
     24% { top: 0px; opacity: 1; }
     36% { top: 0px; opacity: 1; z-index: 0; }
     41% { top: 0px; opacity: 0; z-index: -1; }
     100%{ top: 0px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclethree {
     0% { top: 0px; opacity: 0; }
     36% { top: 0px; opacity: 0; }
     40% { top: 0px; opacity: 1; }
     44% { top: 0px; opacity: 1; }
     56% { top: 0px; opacity: 1; }
     61% { top: 0px; opacity: 0; z-index: -1; }
     100%{ top: 0px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclefour {
     0% { top: 0px; opacity: 0; }
     56% { top: 0px; opacity: 0; }
     60% { top: 0px; opacity: 1; }
     64% { top: 0px; opacity: 1; }
     76% { top: 0px; opacity: 1; z-index: 0; }
     81% { top: 0px; z-index: -1; }
     100%{ top: 0px; z-index: -1; }
}
@-webkit-keyframes cyclefive {
     0% { top: 0px; opacity: 0; }
     76% { top: 0px; opacity: 0; }
     80% { top: 0px; opacity: 1; }
     84% { top: 0px; opacity: 1; }
     96% { top: 0px; opacity: 1; z-index: 0; }
}

iframe    {display: block; margin: 0; padding: 0;}
strong    {color: #000;}

a         {text-decoration: none; color: #000;}

.brochure-wrapper {max-width: 1480px; margin: 0 auto;}

.header                   {position: relative;}

.intro_section           {position: relative; display: block; height: 600px;}
.intro_section::after    {content: ''; display: block; position: absolute; width: 50%; height: 415px; background: #ededed; bottom: -120px; left: 0; z-index: -3;}

.header_nav   {background-color: #000; display: flex; justify-content: space-between; margin: 0 auto; align-items: center; position: fixed; z-index: 999; right: 60px; left: 0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}


.header_nav-logo  {background: url('../images/logo_cassiopeia.png') no-repeat center; width: 180px; height: 38px; display: flex; background-size: 180px; margin-left: 30px;}

.header_nav nav   {display: flex; box-sizing: border-box; padding: 20px;}
.header_nav-link {text-decoration: none; color: #fff; text-transform: uppercase; font: 600 14px 'Open Sans', sans-serif; margin-right: 10px; padding: 10px; box-sizing: border-box;}

.header_nav-btn {background-color: #fff; color: #000; text-decoration: none; display: flex; justify-content: center; align-items: center; text-transform: uppercase; font: 600 14px 'Open Sans', sans-serif; padding: 30px 30px;}

.intro_section-overlay  {position: absolute; z-index: 3; font: 400 48px georgia, serif; top: 50%; left: 180px; color: #fff; display: block;  transform: translateY(-50%); margin-left: 60px;}
.intro_section-overlay::before {position: absolute; display: block; content: ''; width: 220px; height: 180px; z-index: 3; top: 0; border: 14px solid rgba(255,255,255,0.2); top: 50%; transform: translateY(-50%); left: -40px; pointer-events: none;}

.intro_section-scroll   {position: absolute; bottom: 0;  background: #fff; width: 78px; height: 78px; left: 120px; z-index: 3; display: flex; justify-content: center; align-items: center;}
.intro_section-scroll svg {fill: #000;}

.intro_section-slider   {position: relative; margin-left: 120px; box-sizing: border-box; }
.intro_section-slider::before   {position: absolute; display: block; content: ''; width: 100%; height: 600px; background: rgba(0,0,0,0.34); z-index: 2;}
.intro_section-slides     {background-image: url(../images/intro_section-slides1.jpg);  width: 100%; height: 600px; background-size: cover; background-position: center; position: absolute; animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}
.intro_section-slides:nth-child(2)     {background-image: url(../images/intro_section-slides2.jpg); animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;}
    .intro_section-slides:nth-child(3)     {background-image: url(../images/intro_section-slides1.jpg); animation: cyclethree 25s linear infinite;
        -webkit-animation: cyclethree 25s linear infinite;}
        .intro_section-slides:nth-child(4)     {background-image: url(../images/intro_section-slides2.jpg); animation: cyclefour 25s linear infinite;
            -webkit-animation: cyclefour 25s linear infinite;}
            .intro_section-slides:nth-child(5)     {background-image: url(../images/intro_section-slides1.jpg); animation: cyclefive 25s linear infinite;
                -webkit-animation: cyclefive 25s linear infinite;}

.intro_section--additional    {font: 16px 'Open Sans', sans-serif; position: relative; left: 50%; top: 37px; box-sizing: border-box; padding-left: 40px; display: inline-block;}
.intro_section--additional > :first-child {color: #000; font-weight: 600;}
.intro_section--additional > :last-child {color: #95989A; font-weight: 400;}

.about_section    {margin-top: 132px; margin-bottom: 120px; position: relative; display: flex;}
.about_section .about_section-content  {width: 50%; margin-left: 120px;}

.product_section-content h1,
.contact_section-content h1,
.pricing_section-heading h1,
.about_section h1   {font: 600 24px 'Open Sans', sans-serif; text-transform: uppercase;}
.product_section-content p,
.contact_section-content p,
.pricing_section-heading p,
.about_section p    {font: 400 16px/28px 'Open Sans', sans-serif; color: #95989A;}

.about_section::before  {content: 'Frisør i Sønderborg'; text-transform: uppercase; font: 600 24px 'Open Sans', sans-serif; color: #ededed; position: absolute; transform: rotate(90deg); top: 120px; left: -70px;}
.about_section::after   {content: ''; position: absolute; background: #ededed url('../images/karin-lykke-christensen.jpg') no-repeat; background-size: 120px; top: 0; bottom: 0; right: 0; width: 120px;}

.about_section-name   {position: absolute; right: 11px; top: 0; font: 600 16px 'Open Sans', sans-serif; color: #95989A; z-index: 1; top: 180px; transform: rotate(90deg); text-transform: uppercase;}
.intro_section--small,
.intro_section--small  .intro_section-slider::before,
.intro_section--small  .intro_section-slides {height: 300px;}
.intro_section--small::after                {height: 315px;}

.intro_section--odd  .intro_section-slider  {margin-left: 0; margin-right: 120px;}
.intro_section--odd::after    {left: auto; right: 0;}

.image_section  {padding: 0; margin: 0; display: flex; flex-direction: column; width: 100%; overflow: hidden; margin-bottom: 120px;}
.image_section-row      {display: flex; width: 100%; justify-content: center;}
.image_section-collection {display: flex; flex-direction: column;}
.image_section-collection-small {display: flex;}
.image_section-collection > div {margin-bottom: 10px;}

.image_section-image--tall    {height: 310px; width: 150px; margin-right: 10px; margin-bottom: 10px;}
.image_section-image--long    {height: 150px; width: 310px; margin-right: 10px;}

.image_section-image--small    {height: 150px; width: 150px; margin-right: 10px;}
.image_section-image--big    {height: 310px;width: 310px; margin-right: 10px; margin-bottom: 10px;}

.image_section-image-last-of-type {margin-right: 0;}

.image_section-image    {background-size: cover; background-position: center; display: inline-block;}
.image_section-1    {background-image: url('../images/gallery/01.png');}
.image_section-2    {background-image: url('../images/gallery/02.png');}
.image_section-3    {background-image: url('../images/gallery/03.png');}
.image_section-4    {background-image: url('../images/gallery/04.png');}
.image_section-5    {background-image: url('../images/gallery/05.png');}
.image_section-6    {background-image: url('../images/gallery/06.png');}
.image_section-7    {background-image: url('../images/gallery/07.png');}
.image_section-8    {background-image: url('../images/gallery/08.png');}
.image_section-9    {background-image: url('../images/images/9.jpg');}
.image_section-10    {background-image: url('../images/images/10.jpg');}
.image_section-11   {background-image: url('../images/images/11.jpg');}
.image_section-12    {background-image: url('../images/images/12.jpg');}
.image_section-13    {background-image: url('../images/images/13.jpg');}
.image_section-14   {background-image: url('../images/images/14.jpg');}


.pricing_section-heading    {margin-top: 132px; margin-bottom: 60px; position: relative; display: flex;}
.pricing_section-heading .pricing_section-heading-content  {width: 50%; margin-left: 120px;}

.pricing_section  {position: relative; box-sizing: border-box; padding-left: 120px; padding-right: 120px;  margin-bottom: 120px; display: flex; width: 100%; justify-content: space-between;}
.pricing_section-list     {display: flex; justify-content: space-between; flex-direction: column; width: 48%;}
.pricing_section-list-entries {display: flex; flex-direction: column; width: 100%; margin-bottom: 40px;}
.pricing_section-list-entries > div   {display: flex; justify-content: space-between; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; color: #95989A; padding: 0 20px;}
.pricing_section-list-entries > div:first-child {color: #000; padding: 10px 20px; margin-bottom: 10px;}

.pricing_section-list-entry--heading    {text-transform: uppercase; font-weight: 600; background: #ededed; box-sizing: border-box;}

.contact_section    {margin-top: 132px; margin-bottom: 60px; position: relative; display: flex;}
.contact_section-content  {display: flex; margin-left: 120px;}
.contact_section-content > div  {width: 100%; max-width: 500px;}
.contact_section-content :first-child {margin-right: 60px;}

.product_items      {display: flex; align-items: flex-start;}
.product_section-heading    {display: flex; width: 100%; position: relative; margin-bottom: 40px; justify-content: center;}
.product_section-content  {width: 50%;}

.product_section-products {display: flex; box-sizing: border-box; padding: 40px 0; justify-content: center; flex-direction: column; width: 100%; align-items: center;}
.product_item         {box-sizing: border-box; position: relative; border-radius: 6px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); background: #fff; max-width: 310px; margin: 5px;}

.product_item-image   {width: 100%; height: 310px; background-size: cover; border-radius: 6px 6px 0 0; background-position: center;}

.product_collection   {display: flex; flex-direction: column;}
.product_row   {display: flex;}

.product_preview      {width: 150px; height: 150px; background-size: cover; border-radius: 6px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0,0,0,0.1); margin: 5px;}

.product_preview--long  {width: 310px;}

.product_item-label   {border-radius: 6px; box-sizing: 0 10px 20px rgba(0,0,0,0.1); text-transform: uppercase; font: 600 14px 'Open Sans', sans-serif; top: -20px; background-color: #acc46b; display: inline-block; box-sizing: border-box; padding: 10px; position: relative; left: 50%; transform: translateX(-50%); color: #fff;}
.product_item-label--brown {background-color: #a59571;}
.product_item-heading {font: 600 16px 'Open Sans', sans-serif; padding: 0 20px; box-sizing: border-box;}
.product_item-paragraph {font: 400 14px/24px 'Open Sans', sans-serif; color: #95989A; box-sizing: border-box; padding: 10px 20px 20px;}

@media (max-width: 980px) {
.product_items,
.product_collection   {flex-direction: column;}

.product_preview,
.product_item     {margin-bottom: 10px;}
}

@media (max-width: 760px) {
.mobile-hide      {display: none;}
.header_nav       {right: 0;}

.intro_section-slider   {margin-left: 0;}
.intro_section-scroll   {left: 0;}
.intro_section-overlay   {left: 20px;}
.intro_section--additional   {left: 0;}

.intro_section::after  {width: 100%;}

.contact_section-content,
.pricing_section-heading .pricing_section-heading-content  {width: 100%; margin-left: 40px; margin-right: 40px;}

.pricing_section      {flex-direction: column;}
.pricing_section-list {width: 100%;}
.pricing_section      {padding-left: 40px; padding-right: 40px;}
}

@media (max-width: 710px) {
  .contact_section-content  {display: flex; flex-direction: column;}
  .contact_section-content > div  {width: 100%; max-width: auto;}
  .contact_section-content :first-child {margin-right: 0px;}
}

@media (max-width: 640px) {
  .pricing_section-heading  {margin-top: 60px;}
  .about_section::before  {display: none;}
  .about_section .about_section-content {margin-left: 40px; width: 60%;}

}
@media (max-width: 540px) {
.about_section .about_section-content {margin-left: 40px; margin-right: 40px; width: 100%;}
.about_section::after                 {height: 120px; width: 100%; top: auto; bottom: -140px;}

.about_section-name   {transform: none; right: auto; left: 140px; bottom: -90px; top: auto;}
.about_section    {margin-bottom: 220px;}
.product_section-content  {width: 100%; margin-left: 40px; margin-right: 40px;}
}

.image_section--small_mobile-show   {display: none;}

@media (max-width: 420px) {
.image_section--small_mobile-hide {display: none;}
.image_section--small_mobile-show {display: flex; margin-bottom: 40px; padding-left: 10px; box-sizing: border-box;}
}