/* Theme Name: Prometa custom theme Author: [ Nickie Arvidsson @bolt] Description: One page theme */
/*MOB****************************************************************************************************/
/********************************************* INITIALIZE ***********************************************/
@font-face {
    font-family: 'MaisonNeue-Light';
    src: url("MaisonNeue-Light.woff2") format("woff2");
}
@font-face {
    font-family: 'MaisonNeue-Demi';
    src: url("MaisonNeue-Demi.woff2") format("woff2");
    font-weight: 600;
}
* :not(i):not(span){
    font-family: 'MaisonNeue-Light', Helvetica, sans-serif;
    box-sizing: border-box;
    font-weight: 300;
}
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body{
    margin:0;
}
.header, .page_section{
    height:85vh;
    min-height:600px;
    position: relative;
}
h3, h4, p{
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin:0;
}
p{
    margin:0;
    color:#252522;
    font-size: 1.2rem;
}

p + p{
    margin-top:20px;
}

a{
    color: black; 
    text-decoration:none;
    border-bottom:1px solid white;
}
/****** Ola kladdar ******/
.popup{
  font-size: 1.0rem;
  line-height: 1.4rem;
  margin:0;
  color:#FFFFFF;
  margin-top:10px;
}

h6 {
 font-size: 1.4rem;
 line-height: 1.4rem;
 margin:0;
 color:#FFFFFF;
 font-weight:boldest;
}

a.popup:link {
 color:#FFFFFF;
 text-decoration: none;
 text-decoration:none;
 border-bottom:none;
 font-size: 1.0rem;
 line-height: 1.4rem;
}

a.popup:visited {
 text-decoration: none;
 color:#FFFFFF;
}

a.popup:hover {
 text-decoration: underline;
}


/*MOB****************************************************************************************************/
/********************************************* HEADER ***********************************************/
.header{
    background-color: #FF5500;
    padding:0 0px;
    z-index:10;
    position: relative;
}
.logotype_big{
    background-image: url(logotype.svg);
    height:100%;
    width:90%;
    background-repeat: no-repeat;
    position: absolute;
    bottom:0px;
    left: 5%;
    margin: 0 0 20px 0;
    z-index:11;
    background-position: bottom;
}
.logotype{
    background-image: url(logotype.svg);
    height:30px;
    width:100%;
    background-repeat: no-repeat;
    position: fixed;
    top:22px;
    z-index:8;
    margin-left:20px;
}
h1{
    font-size:2.2rem;
    color:#FF5500;
    font-weight: 300;
    vertical-align: bottom;
    position: absolute;
    bottom:50%;
    transform: translateY(50%);
    margin:0;
}
/*MOB****************************************************************************************************/
/********************************************* SECTIONS ***********************************************/
h2, h2 p{
    font-size:2.2rem;
    font-family: 'MaisonNeue-Demi', Helvetica, sans-serif !important;
    font-weight: 600;
    margin:0;
    padding: 25px 0 10px 0;
    color:#252522;
}
.page_section{
    background-position:center center;
    background-size: cover;
    margin-top: -2.5px;
}
.page_section:first-of-type{
    background-position:center right;
    background-size: cover;
    margin-top: -2.5px;
}
.inner_section{
    padding:0 20px 0 20px;
    position: absolute;
    bottom:20px;
}
.white h2 , .white p, .white h4, .white a{
    color:white;
}
.inner_text{
    padding-right:20px;
}

/*MOB****************************************************************************************************/
/********************************************* Message ***********************************************/

.page_section.top_message{
    height:fit-content !important;
    min-height:initial;
    z-index: 11111111111111111111111111;
    background-color: white;
    text-align:center;
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding:00px 20px 40px 20px; 
    margin-bottom:-5px;  
}


.top_message h2{
    padding:90px 0 10px 0 !important;
  
}


.top_message h2, .top_message p, .top_message a{
    text-align:left;
    color:white;
}

.top_message a:hover{
    color:#FF5500;
}



.top_message img{
    pointer-events: none;
    position: absolute;
    width: 100%;
    min-width:100%;
    object-fit: cover;
    height: 100% !important;
    z-index: -1;
    left: 0;
    top: 0;
}

.top_message .logotype{
    padding:0;
    margin:0;
    background-image: none;
    height:30px;
    width:100%;
    background-repeat: no-repeat;
    background-color: white;
    -webkit-mask:  url(logotype.svg) no-repeat ;
    mask: url(logotype.svg) no-repeat;
    position: relative;
    display:block;

}


/*MOB************************************************************************************************/
/********************************************* FOOTER ***********************************************/
.footer{
    height:15vh;
    padding:0 20px 0 20px;
    background-color: #FF5500;
    color:#252522;
}
.mail a{
    text-decoration: none;
    color:#252522;
    line-height:15vh;
    font-size: 1.2rem;
    border-bottom:none;
}
/*TAB****************************************************************************************/
/********************************************************************************************/
@media (min-width: 700px) {
    .logotype{
        top:40px;
        margin-left: 40px;
   }
    .header{
        padding:0 25px 0 25px;
   }
    h1{
        transform: initial;
        font-size:1.9rem;
        bottom:25px;
   }
    h2{
        font-size:2.5rem;
        padding: 40px 0 20px 0;
        margin:0;
   }
    h3{
        font-size:1.35rem;
        line-height:1.875rem;
   }
    .inner_text{
        bottom:40px;
   }
    h4, p{
        font-size: 1.5rem;
        line-height: 1.9rem;
        margin:0;
   }
    .footer a{
        font-size: 1.5rem;
   }
    .footer{
        padding:0 40px;
   }
    .inner_section{
        padding:0 40px;
   }
   .page_section.top_message {
        padding: 00px 40px 40px 40px;
    }
    .top_message h2 {
        padding: 90px 0 20px 0 !important;
    }

  
   /*DESK***************************************************************************************/
   /********************************************************************************************/
    @media (min-width: 940px) {
        .header, .page_section{
            height:85vh;
            position: relative;
       }
        .logotype{
            height:35px;
            top:40px;
            margin-left: 40px;
       }
        .logotype_big{
            width:94%;
            left:3%;
            margin: 0 0 40px 0;
       }
        h1{
            font-size:1.85rem;
            bottom:20px;
       }
        h2{
            font-size:2.6rem;
            padding: 40px 0 20px 0;
            margin:0;
       }
        h3{
            font-size:1.85rem;
            line-height:2.4rem;
       }
        .inner_text{
            bottom:40px;
            margin:0;
            padding-right:40px;
            box-sizing: border-box;
       }
        .white .inner_text{
       }
        h4, p{
            font-size: 1.46rem;
            line-height: 2rem;
       }
        .white .inner_text{
       }
        .inner_section .inner_text{
       }

       .page_section.top_message{
            padding:0px 40px 40px 40px; 
        }
        .top_message h2, .top_message p{
            text-align:left;
            color:white;
        }
        .top_message .info_widget{
            max-width: 900px;
        }

        .top_message h2{
            max-width: 720px;
        }
        

        .inner_section{
            padding:0px;
            box-sizing: border-box;
            width: 50%;
            margin-left:50%;
            margin-bottom: 20px;
       }
        .header, .footer{
            padding:0 25px 0 25px;
       }
        .footer{
            height:15vh;
       }
        .footer a{
            font-size:1.4rem;
            line-height: 15vh;
       }
        .mail{
            width: 50%;
            float: right;
       }
       p + p {
        margin-top: 28px;
    }
   }
   /*BIG_DESK***********************************************************************************/
   /********************************************************************************************/
    @media (min-width: 1500px) {
        .header, .page_section{
            height:85vh;
            position: relative;
       }
        .logotype_big {
            width: 95%;
            left: 2.5%;
            margin: 0 0 50px 0;
       }
        h1{
            font-size:2.5rem;
            bottom:30px;
       }
        h2{
            font-size:2.8rem;
            padding: 50px 0 20px 0;
       }
        h3{
            font-size:2.5rem;
            line-height:3rem;
       }
        h4, p{
            font-size: 1.8rem;
            line-height: 2.3rem;
       }
        .inner_text{
            max-width:900px;
            
            bottom:50px;
       }
        .inner_section h3{
            bottom:50px;
       }
        .logotype {
            top: 50px;
            margin-left:50px;
       }
        .mail a{
            font-size: 1.6rem;
       }
        .inner_section .inner_text {
            bottom: 50px;
       }

       .info_widget{
        padding: 0 0px;
        max-width: 710px;
        margin: initial;
       }
       .top_message .info_widget {
        max-width: 900px;
    }

   }