/* Custom */


/* Top */
.bgimg-1 {
  background-attachment: fixed;
  background-position-x: center;
  background-position-y: 35px; 
  background-repeat: no-repeat;
}

.bgimg-2 {
  background-attachment: fixed;
  background-position-x: 10px;
  background-position-y: 58px; 
  background-repeat: no-repeat;
}

/* Center pic */
.bgimg-1 {
  background-image: url('http://www.tebis.se/support/topp1.png');
}

/* Logo */
.bgimg-2 {
  background-image: url('http://www.tebis.se/support/logo1.png');
}


.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.w3-full img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-full img:hover{opacity:1}

/* Turn off bg for lo-res */
@media only screen and (min-device-width: 480px) {
  .bgimg-1, .bgimg-2 {
    background-attachment: scroll;
    min-width: 100%;
    height: 170px;  
  }
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 0px solid #fff;
    text-align: left;
    padding: 8px;
}

tr:hover td { background: #ddd; }

a {
     color:#00000; 
     text-decoration:none; 
     cursor:pointer;  
}

a:hover 
{
     color:#00000; 
     text-decoration:none; 
     cursor:pointer;  
}

a:visited 
{
     color:#00000; 
     text-decoration:none; 
     cursor:pointer;  
}

a:link 
{
     color:#00000; 
     text-decoration:none; 
     cursor:pointer;  
}

video 
{
     border-radius: 15px; 
}

video:hover 
{
     color:#00000; 
     text-decoration:none;
     border-radius: 15px; 
     cursor:pointer;  
}


/* Style the Image Used to Trigger the Modal */

#myImg {
  border-radius: 15px;
  cursor: pointer;
  transition: 0.3s;
}

div.pictures {
  width: 100%;
}

div.info {
 padding: 10px 20px;
} 

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

 /* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 98%;
    max-width: 100%;
 }

 /* Caption of Modal Image (Image Text) - Same Width as the Image */
 #caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 150px;
 }

  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
   }

  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
     from {transform:scale(0)} 
     to {transform:scale(1)}
  }

  /* The Close Button */
  .close {
     position: absolute;
     top: 25px;
     right: 35px;
     color: #f1f1f1;
     font-size: 100px;
     transition: 0.3s;
     }

     .close:hover,
     .close:focus {
         color: #bbb;
         text-decoration: none;
         cursor: pointer;
     }

     /* 100% Image Width on Smaller Screens */
     @media only screen and (max-width: 700px){
        .modal-content {
            width: 100%;
         }
     }