@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Oswald:200,600&display=swap');

html {overflow-y: scroll;}
html {overflow-y: scroll;}

body {
   margin: 0;
}
html, body, td, input, select, textarea, pre {
   line-height: 1.6;
   font-family: 'Oswald', sans-serif;
   font-weight: 200;
}

a {
   color: #445588;
}

.container-bottom {
   border-top: 8px solid #aaaaaa;
   background-color: #222222;
   color: white;
   margin-top: 40px;
   padding-top: 20px;
}

.container-bottom a {
   color: white;
}

.container-bottom div {
   margin-bottom: 20px;
}

.nolink {
   color: black;
   text-decoration: none;
}

div.referensbild {
   width: 100%;
   float: left;
   margin-bottom: 10px;
   border: 1px solid #b4b4b4;
}

div.certificate {
    width: 195px;
    float: left;
    margin: 5px;
    // height: 130px;
}

img.separator {
   width: 100%;
   padding: 20px 0;
}

div.referensbild img {
   padding: 2%;
   width: 100%;
}

img.icon {
   margin-top: 60px;
   width: 80px;
  // display: block;
}

span.icon-bar {
	background-color: black;
}

.clickable:hover {
   opacity: 0.8;
   cursor: pointer;
}

h1, h2, h3 {
   font-family: 'Abril Fatface', cursive;
   font-weight: normal;
}
h1 {
    margin-bottom: 25px;
   font-size: 3.5em;
}
h2 {
   font-size: 1.5em;
}

.bigphone {
   font-family: 'Abril Fatface', cursive;
   font-size: 30px;
}

img {
   border: none;
}

.referensImg {
   width: 100%;
}
.familyImg {
   float: right;
   height: 100px;
}

#topimg {
   background-image: url(/images/tech_bg.webp);
   height: 80px;
   background-size: 200%;
   background-position: center center;
}

.navbar-brand {
    padding: 0;
    padding-right: 30px;
    padding-left: 20px;
    margin: 10px;
}

.navbar-toggle {
    margin-top: 15px;
}

.navbar-nav > li > a {
    color: black;
    border-bottom: 1px solid transparent;
    transition: all ease-in-out 0.3s;
    padding: 26px 3px 0px 3px;
    margin: 0 15px;
    font-weight: 600;
}

.navbar-nav > li > a.active {
    border-color: black;
}

.navbar-nav > li > a:hover {
    color: #b4b4b4;
    border-color: #b4b4b4;
    background: none;
}

.navbar {
   background-image: none;
   background-color: white;
   border-bottom: 1px solid #888888;
   border-radius: 0;
   -webkit-box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
   box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
   padding-bottom: 10px;
}
.navbar-brand img {
   height: 50px;
}



@media all and (min-width: 768px) {
    #topimg {
       background-size: 100%;
    }
    div.referensbild {
        width: 31%;
        margin: 0.5%;
    }
}

@media all and (max-width: 767px) {
    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a.active {
        border-color: transparent;
    }
    .navbar-collapse.collapse.in{
        margin-bottom: 20px;
    }
    .navbar-brand {
       padding-left: 7px;
    }
}
@media all and (max-height: 400px) {
   #topimg {
       display: none;
   }
}


.zoom {      
-webkit-transition: all 0.35s ease-in-out;    
-moz-transition: all 0.35s ease-in-out;    
transition: all 0.35s ease-in-out;     
cursor: -webkit-zoom-in;      
cursor: -moz-zoom-in;      
cursor: zoom-in;  
}     

.zoom:active  {
/**adjust scale to desired size, 
add browser prefixes**/
-ms-transform: scale(2);    
-moz-transform: scale(2);  
-webkit-transform: scale(2);  
-o-transform: scale(2);  
transform: scale(2);    
position:relative;      
z-index:100;  
}

/**To keep upscaled images visible on mobile, 
increase left & right margins a bit**/  
@media only screen and (max-width: 768px) {   
ul.gallery {      
margin-left: 15vw;       
margin-right: 15vw;
}

/**TIP: Easy escape for touch screens,
give gallery's parent container a cursor: pointer.**/
.DivName {cursor: pointer}
}