*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  overflow-x: hidden;
  
}

body{
    /*display:flex;
    flex-direction: column;*/
    min-height:100vh;
    width:100vw;
}
.main{
    flex-grow: 1;
}
  
   
   .flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
   }
   a{
    text-decoration: none;
   }
   .text-black{
       color: rgb(11, 14, 7);
   }
  
   /* .nav-link .currant{
       background-color: rgba(232, 199, 241, 0.918);

    }*/
  
  .nav{
      padding:0 2rem;
      background: cornflowerblue;
      justify-content: space-between; 
      height: 0rem;
       min-height: 11vh;
       overflow-y: hidden;
       transition: height 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
       position: fixed;
      width: 100%;
      z-index: 12;
    } 

    .nav-brand{
      background-image: url('assets/Bilder/loggabarnisverige2.png');
      height: 8rem;
      width: 8rem;
      background-size: contain;
      overflow:hidden;
      background-repeat: no-repeat;
      margin: o auto;
      justify-content: center;
      padding-right: 2.5rem;
      cursor:pointer;
         





    }
    nav .nav-brand a{
       display:block;
       padding:1rem 0;
       font-size: 2rem;
       font-weight:bold;
    } 
    nav .nav-brand a:hover{
        color: yellow;
        transition: .5s;

    }
    .nav-menu{
      margin-top:0.5rem;

    }
    nav .nav-items{
        list-style-type: none;
        margin: 0;
    }
    nav .nav-items .nav-link{
        padding: 1.3rem 1rem;
        font-size: 1.2rem;
        font-weight: bold;
    }
    /*
    nav .nav-items .nav-link:hover{
        background: #f80505;
    }
    nav*/
    
    .nav-items .nav-link:hover a{
        color:yellow;

    }
    nav .social{
        padding:1.4rem 0;
        
    }
    nav .social i{
     padding: 0 .2rem;
       
    }
    
    .toggle-collapse{
        position: absolute;
        top:0%;
        width: 100%;
        cursor:pointer;
        display:none;
    }

     .toggle-collapse .toggle-icons{
        display:flex;
        justify-content: flex-end;
        padding:1.4rem 4rem;
    }
     .toggle-collapse .toggle-icons i{
     font-size: 1.4rem;
     }
     .collapse{
         height:30rem;
     }
        /*social icons*/
       .icon ul li{
        display:inline-block;
        list-style: none;
        width: 3rem;
        height:3rem;
        background-color:rgb(50, 117, 240);
        margin: 1rem 1rem 0rem 1rem;
        box-shadow: 3px 3px 10px #383733,
                    -4px -4px 10px  pink;
        text-align:center;
        line-height:3rem;
        font-size:2rem;
        color:rgb(11, 241, 11);
        cursor:pointer;
        transition:.5s;
        border-radius:25%;
    }
    .icon ul li:nth-child(1):hover{
        color:white;
        border-radius: 50%;
        background-color:rgb(255, 255, 0);
    }
    .icon ul li:nth-child(2):hover{
        color:white;
        border-radius: 50%;
        background-color: rgb(255,255,0);
    }
        /*social icons ends*/

     
     /*main start-sida*/
     #presentation{
         box-sizing: border-box;
         /*margin: 1rem,1rem,0rem, 0rem;*/
         width: 100%;
     }

     .slogan h3{
         font-size: 2rem;
         text-align: center;
         padding: 2rem;
         color:rgb(255, 255, 0);
         background:rgba(112, 9, 112, 0.69);
         
         
         
     }
     .slogan h4{
        font-size: 1.8rem;
        text-align: center;
        /*margin: 0rem 1rem;*/
       /* margin: 0rem,2rem,2rem, 2rem;*/
        padding: 1rem;
        color:rgba(92, 27, 92, 0.8);
        background: cornflowerblue;
     }
     .slogan p{
        font-size: 1.6rem;
        text-align: justify;
        margin:2rem 3rem;
        padding: 1rem;
        word-spacing:0.3rem;
        font-weight:600;
        color:rgba(7, 7, 7, 0.671);

               
     }
     

     .slogan p::first-letter {
         font-size:5rem;
         color:#ffee10;
        
     }

     .list{
        font-size: 1.4rem;
        text-align: justify;
        list-style: disc;
        line-height: 2.4rem;
        margin-left: 3rem;
        padding: 1rem 3rem 1rem 1rem ;
        word-spacing:0.3rem;
        font-weight:600;
        color:rgba(7, 7, 7, 0.74); 
     }
      

     /*images*/
     .image-box{
         float: left;
         box-sizing:border-box;
     }
     .image{
         margin: 2rem 2rem 2rem 2rem;
         
     }

     

     /*--grid-starts*/
     
     #wrapper{
        align-items:center;
        /*overflow-x:hidden;*/
       
     }
     .btn{
         background: rgb(225 167 240 / 50%);
         color: rgb(23, 231, 16);
         float: right;
         margin: -1rem 0rem 0rem 15rem;
         font-size: 1.3rem;
         font-weight: bold;
         padding: .5rem;
         border-style: solid;
         border-radius: 1rem;
         border-width: 0rem;
         position:absolute;
         
     }

     .btn :hover{
         color: rgb(31, 26, 24);
         color:rgb(231, 14, 123)
     }
     .grid-items{
        display:grid;
        justify-content: center;
        grid-template-columns:repeat(auto-fit, 20rem);
        grid-template-rows:1fr 1fr;
        grid-gap: 6rem;
        margin:5rem 0rem;
        box-sizing: border-box;
        font-size: 2rem;
        border-color: blanchedalmond;
        position: relative;
        padding: 3rem;
    }
    
    
    .grid-1{
        /*background: rgb(204 196 211);*/
        background: rgb(195 196 196);
        border-color: whitesmoke;
        height: 30rem;
        box-shadow:.7rem 1rem 1.5rem .6rem; 
        position:relative;
        /*display:inline;*/
        
    }
    .grid-1 h4{
        font-size: 1.5rem;
        padding: 1rem 1rem 0rem 2rem;
        margin: 0rem .5rem 1rem 1rem;
       /* width: 15rem;
        height: 2rem;*/
        color:#8c2c90;
    }
    .grid-1 p{
        font-size: 1.3rem;
        font-weight:bold;
        /*margin: 0rem .5rem 1rem 1rem;*/
        padding: 3rem 1rem 0rem 1rem;
        position: absolute;
        line-height: 1.7rem;
        /*width: 18rem;
        height: 90rem;*/
    }  

    
    .read{
        font-size: 1.2rem;
        font-weight: bold;
        margin: 17rem 1rem 2rem 11rem;
        position: absolute;
        background-color: #8133744f;
        padding: .6rem;
        border-radius: .5rem;
    } 
    .read :hover{
       color: rgb(32, 231, 14);
       
    }
     /*--grid-ends*/

     .end-text{
        font-size: 2rem;
        font-weight:800;
        text-align: left;
        padding: 2rem;
        background-color:rgb(155 179 221 / 69%);
        color:rgba(112, 9, 112, 0.685);
     }
        #scrollup{
          position:fixed;  
          right:14rem;
          bottom:4rem;
          width:4rem;
          font-size:2rem;
          height:4rem;
          border-radius:50%;
          background:red;
          box-shadow: 0 0 1rem black;
          color:white;
          border:none;
          outline:none;
          cursor:pointer;
        }
        #scrollup:active{
            background: #cc2333;

        }

     /*title*/
     #img-box{
        display:flex;
        justify-content: center;
        /*grid-template-columns:repeat(auto-fit, 25rem);
        grid-template-rows:1fr;*/
        grid-gap: .5rem;
        margin:1rem 1rem;
        box-sizing: border-box;
        border-color: blanchedalmond;
        position: relative;
        
     }
     #img-box img{
        /*border-radius: 50%;*/
        position:relative;
        height:auto;
        width:100%;
        overflow:hidden;

     }
     .text1{
         position:relative;
     }
     .text1 h1{
        font-size: 2.5rem;
        margin:2rem 3rem;
        color:rgba(112, 9, 112, 0.719)
        
     }
     .text1 h3{
         font-size: 1.5rem;
         margin:2rem 3rem 0rem 3rem;
         padding:1rem;
     }
     
        .text1 p{
         font-size: 1.5rem;
         padding: 1rem 3rem;
         
     }
     .points{
        margin:2rem 3rem;
         font-size: 1.5rem;
         line-height: 2rem;
     }
     .points li{
        margin: 1rem 2rem;
        font-size: 1.5rem;
        line-height: 2rem;
        list-style-type: square;
    }
     .btn1{
          float: right; 
          padding: 1rem;
          background: rgb(135, 228, 245);
          color: rgb(23, 231, 16);
          margin: 1rem 2rem 1rem 3rem;
          font-size: 1.3rem;
          font-weight: bold;
          padding: .8rem;
          border-style: solid;
          border-radius: 1rem;
          border-width: 0rem;
          
          
      }
 
      .btn1 :hover{
          color: rgb(31, 26, 24);
          color:rgb(231, 14, 123)
      }
      .btn2{
          background-color:rgb(216, 216, 212);
          height:3rem;
          width:6rem;
          font-size: 1rem;
          font-weight:bold;
          border:none;
          border-radius:10%;
          box-shadow: 3px 3px 3px 10px rgba(158, 158, 152, 0.301),
          -3px -3px 3px 10px rgba(245, 185, 247, 0.842);
          transition:.5s;
          margin:1rem;
          
      }
      .btn2 :hover{
        color:rgb(231, 14, 123);
      }
        

      

        #menu-box{
            /*display:grid;
            justify-content:center;
            grid-template-columns:repeat(auto-fit, 12rem);
            grid-template-rows:repeat(1fr);
            grid-gap: 1rem;*/
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            padding: 0.5rem;
            margin: 3rem 0rem 0rem;
            position:relative;
            background: rgb(236, 193, 236);
            width:100%;
        }

        #menu-box ul{
        display: flex;
        /* position: absolute; */
        /* width: 50%; */
        flex-wrap: wrap;

    }

        #menu-box ul li{
            margin: 1rem;
            width: 10rem;
            
        }

        
        #menu-box .t1:nth-child(n){
            background:rgba(245, 20, 245, 0.274);
            font-size: 1.3rem;
            font-weight:bold;
            padding: .5rem;
            color: rgb(5, 5, 5);
            box-shadow: .5rem .5rem .7rem;
            border-radius: 1rem;
        }

        #menu-box ul li .active:nth-child(n){
            color: ivory;
            
        }

        #menu-box a{
            text-decoration: none;
            
        }
        #menu-box a:hover{
            
            color: rgb(93, 241, 88);
        }
        /*om per
        .om-container{
            max-width: 100vw;
        }
        */
        .om-container h2{
            font-size: 2rem; 
            padding:2rem;
            color:rgba(0, 0, 0, 0.473);
            
        }
         .image-om1{
             background-image:url(assets/Bilder/om-per.jpg);
             background-size:cover;
             background-repeat:no-repeat;
             width:100%;
             margin:0 auto;

            
         }
         .image-om1::after{
            content:'';
            display:block;
            padding-bottom:40%;

         }
            .text-om p{
            padding:2rem 4rem 2rem 4rem;
            letter-spacing: .01em;
            word-spacing: .2rem;
            font-weight: 500;
            font-style: normal;
            font-size: 1.3rem;
            line-height: 1.6rem;
            
        }
        .om-text-slut h4{
            padding:2rem 4rem 2rem 4rem;
            text-align:left;
            font-size:1.6rem;
            font-weight:bold;
            color: rgba(7, 38, 63, 0.705);
            letter-spacing: .2rem;
            word-spacing:1rem;
        }
     
     /*Hur*/
        
        .points-box{
            background: rgba(57, 60, 61, 0.089);
            box-align:center;
            margin: 2rem 1rem;
            box-sizing: border-box;
            border-radius: 5rem;
            box-shadow: inset .8rem .8rem .9rem;
            float:right
        }
        
        .points1{
            font-size: 1.5rem;
            color:red;
            padding: 1rem 1rem 1rem 6rem;
            font-weight:bold;
            line-height: 2.5rem;
            margin: 1rem;
            list-style-type: square;
            position:relative;
            
        }
        .points1 a:hover{
            background:yellow;
            color:rgb(24, 160, 12);
        }
        
        .hur-desc p{
            font-size: 1.5rem;
            margin:0rem 3rem;
            padding:0rem 1rem;
            
         }
         .hur-desc h3 h4{
            font-size: 1.5rem;
            margin:1rem;
            padding:1rem;
            

         }
        
        .priser{          
            font-size: 1.5rem;
            color:rgba(24, 23, 23, 0.61);
            padding: 1rem 1rem 1rem 6rem;
            margin: 1rem;
            line-height: 2rem;
        }
        .priser p{
                font-size: 1.5rem;
                margin:1rem .5rem;
                padding:1rem;
        }

        .wrapper-calender{
            position:relative;
        }
        .calender-text h5 {
            color:white;
            font-size:2rem;
            margin:3rem;
            
           
        }
        .calender-text ul {
            margin:0;
            padding:0;
            display:flex;
            position:absolute;
            top:88%;
            left:50%;
            transform:translate(-50% -50%);
        }

        .calender-text ul li a{
            position:relative;
            display:block;
            width:60px;
            height:60px;
            text-align: center;
            line-height: 63px;
            border-radius:50%;
            font-size:30px;
            color:#666;
            background:#333;
            transition: 0.5s;
        }
        .calender-text ul li a::before{
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            border: radius 50%;
            transition:0.8s;
            transform: scale(0.9);
            z-index: -1;
        }
        .calender-text ul li a:hover::before{
            transform:scale(1.1);
            box-shadow: 0 0 25px #ffee10;
        }
        .calender-text ul li a:hover{
            color:#ffee10;
            box-shadow:0 0 5px #ffee10;
            text-shadow: 0 0 5px #ffee10;
        }

                /*contact form starts*/
                ::selection{
                    color: #fff;
                    background: #0D6EFD;
                  }
                  .wrapper{
                    display: flex;
                    flex-wrap: wrap;
                    margin: 3rem;
                    width: 75%;
                    background: rgba(162, 183, 223, 0.342);
                    border-radius: 5px;
                    box-shadow: 10px 10px 10px rgba(0,0,0,0.05);
                  }
                  .wrapper header{
                    font-size: 22px;
                    font-weight: 600;
                    padding: 20px 30px;
                    border-bottom: 1px solid #ccc;
                  }
                  .wrapper form{
                    margin: 35px 30px;
                  }
                  .wrapper form.disabled{
                    pointer-events: none;
                    opacity: 0.7;
                  }
                  form .dbl-field{
                    display: flex;
                    margin-bottom: 25px;
                    justify-content: space-between;
                  }
                  .dbl-field .field{
                    height: 50px;
                    display: flex;
                    position: relative;
                    width: calc(100% / 2 - 13px);
                  }
                  .wrapper form i{
                    position: absolute;
                    top: 50%;
                    left: 18px;
                    color: #ccc;
                    font-size: 17px;
                    pointer-events: none;
                    transform: translateY(-50%);
                  }
                  form .field input,
                  form .message textarea{
                    width: 100%;
                    height: 100%;
                    outline: none;
                    padding: 0 18px 0 48px;
                    font-size: 16px;
                    border-radius: 5px;
                    border: 1px solid #ccc;
                  }
                  .field input::placeholder,
                  .message textarea::placeholder{
                    color: #ccc;
                  }
                  .field input:focus,
                  .message textarea:focus{
                    padding-left: 47px;
                    border: 2px solid #0D6EFD;
                  }
                  .field input:focus ~ i,
                  .message textarea:focus ~ i{
                    color: #0D6EFD;
                  }
                  form .message{
                    position: relative;
                    
                  }
                  form .message i{
                    top: 30px;
                    font-size: 20px;
                  }
                  form .message textarea{
                    min-height: 130px;
                    max-height: 230px;
                    max-width: 100%;
                    min-width: 100%;
                    padding: 15px 20px 0 48px;
                  }
                  form .message textarea::-webkit-scrollbar{
                    width: 0px;
                  }
                  .message textarea:focus{
                    padding-top: 14px;
                  }
                  form .button-area{
                    margin: 25px 0;
                    display: flex;
                    align-items: center;
                  }
                  .button-area button{
                    color: #fff;
                    border: none;
                    outline: none;
                    font-size: 18px;
                    cursor: pointer;
                    border-radius: 5px;
                    padding: 13px 25px;
                    background: #0D6EFD;
                    transition: background 0.3s ease;
                  }
                  .button-area button:hover{
                    background: #025ce3;
                  }
                  .button-area span{
                    font-size: 17px;
                    margin-left: 30px;
                    display: none;
                  }
                  @media (max-width: 600px){
                    .wrapper header{
                      text-align: center;
                    }
                    .wrapper form{
                      margin: 35px 20px;
                    }
                    form .dbl-field{
                      flex-direction: column;
                      margin-bottom: 0px;
                    }
                    form .dbl-field .field{
                      width: 100%;
                      height: 45px;
                      margin-bottom: 20px;
                    }
                    form .message textarea{
                      resize: none;
                    }
                    form .button-area{
                      margin-top: 20px;
                      flex-direction: column;
                    }
                    .button-area button{
                      width: 100%;
                      padding: 11px 0;
                      font-size: 16px;
                    }
                    .button-area span{
                      margin: 20px 0 0;
                      text-align: center;
                    }
                  }

                /*contact form ends*/


     

/*footer*/

     .footer{
         background: cornflowerblue;
         display:block;
         width: 100%;
         height: auto;
         overflow: hidden;
         margin-top:auto;
         padding: 0.5rem;
         
         
     }
     .footer .inner-footer h3{
         text-align:center;
         font-size: 2rem;
         font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         color:rgba(248, 244, 6, 0.884);
         font-weight:bold;
         line-height: 4rem;
         height:auto;
         letter-spacing: .1rem;
         word-spacing:.3rem;
     }
     .footer .inner-footer p{
         text-align: center;
        font-size: 20px;
         font-weight: bold;
         padding: .2rem 0;
         color:rgba(26, 25, 25, 0.726);
     }
      .copyright{
         font-size: 14px;
         text-align: center;
         padding:.4rem 0;
         
     }
     
    @media only screen and (max-width:800px){
        nav .nav-items{
            flex-direction:column;
        }
        nav{
            flex-direction:column!important;
            display:block!important;
        }
        .toggle-collapse{
            display:initial;
        }

        }

        @media (max-width:480px){
          /*#img-box img{
            width:90%;
            padding:0.2rem 1rem;
          }*/
            .text-om p{
              padding:1rem;
              letter-spacing: .01em;
              font-weight: 300;
              font-size: 1rem;
          }
           .om-container h2 {
             font-size: 1.2rem;
             padding: 1rem;
             color: rgba(0, 0, 0, 0.473);
        }
        .priser{          
          font-size: 1.5rem;
          padding: 1rem;
          margin: 0.5rem;
          
          }
          .points-box{
            display:none;
          }

          .list {
            font-size: 1.1rem;
            line-height: 1.5rem;
            padding: 1rem;
            font-weight: 400;
            text-align: left;
            width:70%;
            }

         .hur-desc p {
            font-size: 1rem;
            margin:0.5rem;
            padding: 1rem;
           }
          .text1 h3 {
        margin: 0.5rem 1rem;
        padding: 1rem;
      }
      #wrapper {
        margin-bottom: 2rem;

      }
      .text1 h1 {
        margin: 1rem;
      }

      .end-text {
        font-size: 1.5rem;
        margin:0.5rem;
        
      }

      .grid-items{
        margin:0em;
        grid-template-columns: repeat(auto-fit, 14rem);
      }
          
        .grid-1{
          padding:0.7rem;
          height: 28rem;
        }
        .grid-1 h4{
          padding:0.7rem;
          font-size: 1rem;
        /* width: 15rem; */
       /* height: 2rem; */
         
        }
          .grid-1 p{
          width: 80%;
          height: auto;
          padding-top: 0.2rem;
          font-size: 0.8rem;
          line-height: 1.3;

        }
        .read {
          
          margin: 14rem 3rem;
          width: 7rem;
          font-size: 0.8rem;
          
        }
          .btn{
            
             margin-top: 18.8rem;
             margin-left: 6rem;
              font-size: 1rem;
             width: 6rem;
             height: 2rem;
             padding: 0.2rem;
          }

          .text1 p {
            font-size: 1.5rem;
            padding: 0.2rem;
          }
          .points li {
            margin: 1rem 2rem;
          }

          .slogan p {
            font-size: 1.2rem;
            text-align: left;
            padding: 0.5rem;
            font-weight: 500;
            width: 80%;
            height: auto;

          }

          #img-box{
           flex-direction: column;

          }

          .footer .inner-footer p {
            font-size: 17px;
        }
        .footer .inner-footer h3 {
          Font-size: 25px;
          letter-spacing: 0rem;
          word-spacing: 0rem;
      }}
        @media (min-width:500px){
          
          #img-box{
            flex-direction: row;
 
           }}

           /* Large screens ----------- */
            @media only screen 
            and
            (min-width:1660px){

              .nav-brand {
                height: 15rem;
                width: 15rem;
              }
              .icon ul li {
                margin: 2rem 3rem 0rem 1rem;
                width: 5rem;
                height: 5rem;
              }

              .fab {
                font-family: 'Font Awesome 5 Brands';
                padding: 1rem;
              }
              .slogan h3 {
                font-size: 5rem;
              }

            nav .nav-items .nav-link {
              margin: 0 2rem;
              font-size: 3rem;

              }

              .vwrap, .vslide {
                height: 7rem;
            }

            .vmove {
              font-size: 3rem;
            }

            .slogan h4 {
              font-size: 4rem;
            }
            .slogan p {
              font-size: 3rem;
              line-height: 5rem;
            }

            .list {
              font-size: 3rem;
              line-height: 5rem;
            }

            
              .grid-items{
              height: 40rem;
              grid-template-columns: repeat(auto-fit, 30rem);
              
            }
            .end-text {
              font-size: 5rem;
              line-height: 5rem;
          
          }
          .grid-1 h4 {
            font-size: 2.5rem;
          }
            .grid-1 p {
              font-size: 2rem;
            }

            .footer .inner-footer h3 {
              font-size: 4rem;
            }

            .footer .inner-footer p {
              text-align: center;
              font-size: 50px;
              margin: 1.5rem 0;
            }
            .copyright {
              font-size: 28px;
            }
            .btn2 {
              
              height: 4rem;
              width: 9rem;
              font-size: 2rem;
              margin: 1rem 5rem;
            }

            .text-om p {
              letter-spacing: .04em;
              word-spacing: .4rem;
              font-size: 3rem;
              line-height: 5rem;
            }

            .om-container h2 {
              font-size: 4rem;
            }

              
            .text1 h1 {
              font-size: 4rem;
            }



            .kont-des h3 {
              font-size:3rem;

            }
            .wrapper header {
              font-size: 50px;
            }
            .wrapper form {
             
              width: 50rem;

            }

            .button-area button {
             
              font-size: 40px;
            }

            .side-box {
              font-size: 3rem;}
              






            }




          }