/* 
Prewarning to anyone venturing through this:
I am not a professional. I just cleaned up some of this and redid some to work better across all devices and resolution screens.
*/


/*
 * Globals
 */



body{
  background-color: white !important;
}

/* Some fancy elements to give the site a little more depth and "design" */
.round-corners{

-webkit-border-radius: 25px 25px 25px 25px; 
-moz-border-radius: 25px 25px 25px 25px;
-o-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;



}

.drop-shadow{
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.75);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.75);
box-shadow: 0px 0px 10px rgba(0,0,0,.75);
}

.inverted-drop-shadow{
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,.75);
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,.75);
box-shadow: inset 0px 0px 10px rgba(0,0,0,.75);
}



/* Custom Navbar For Desktop */
#desktop-nav {
position: fixed;
display: inline-block;
height: 25%;
max-height: 200pt;
float: right;
padding-right: 5%;
right: 0;
top: 0;
background: url(./images/menu_separator.png) left top no-repeat;
}

#desktop-nav .navbar-header{
  float: left;
  padding-left: 0%;
  margin-left: 0%;
}

#desktop-nav>li {
display: inline-block;
position: relative;
text-align: center;
height: 100%;
float: left;

}


#desktop-nav>li.no_bg {
background: transparent;
}



#desktop-nav>li>a {
position: relative;
display: inline-block;
font: 11px/242px 'Playfair Display', 'Times New Roman', serif;
color: #fff;
text-transform: uppercase;
width: 100%;
height: 100%;
letter-spacing: 4px;
background-color: transparent ;
background: url(./images/menu_separator.png) right top no-repeat;
}

#desktop-nav > li > a:hover, .navbar-default #desktop-nav > li > a:focus {
    background-color: transparent;

}

@-webkit-keyframes SLIDE-DOWN-DROPDOWN {
   from {
     height: 0px;
   }
   to { 
     height: 300px;
   }
}

@-webkit-keyframes SLIDE-UP-DROPDOWN {
   from {
     height: 300px;
   }
   to { 
     height: 0px;
   }
}




/* Dropdown menu on desktop... */
#desktop-nav li ul li {
position:relative;
display: inline-block !important;
margin-bottom: 8px;
background-color: transparent !important;
width: 100%;
float: left;

    
}

#desktop-nav li ul li:hover {
color: transparent !important;
}

#desktop-nav li ul li a {
position:relative;
display: inline-block !important;
float: left;
font: 10px/12px Arial, sans-serif;
color: rgba(255, 255, 255, 0.3) !important;
background-color: transparent !important;
text-transform: uppercase;
letter-spacing: 1px;
}

#desktop-nav li ul li>a:hover, #desktop-nav li ul li.sfHover>a{
background-color: transparent !important;
color: rgba(255, 255, 255, 1.0) !important;
/* Makes the text slightly larger. Not quite a smooth animation yet, so left out for now */
   /* font-size: 11px;*/

}

#desktop-nav li ul li.active {
color: transparent !important;
}

#desktop-nav li ul li.active>a{
background-color: transparent !important;
color: rgba(255, 255, 255, 1.0) !important;

}


#desktop-nav li ul li:hover a {
    background: transparent;
}

/*Default state of the ul (or dropdown in this case) */
#desktop-nav li ul {
position:absolute;
float: left;
opacity: 0;
height: auto;
top: 130pt;
overflow: hidden;
max-height: 0pt;
/*This hides it, but is able to handle animations to showing */
visibility: hidden;

/*This shows it always, but is not able to be animated, however, the line above this hides it until needed. */
display: block;

/* So many indexes */
z-index:9100;
background: #202020;
/*padding: 39px 0 35px;*/

/*Now for animations, when something is changed */
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}

/*For when it is hovered over, seeing it animates, it will animate to those values. */
#desktop-nav li:hover ul {
    opacity: 1;
    /*height: 100pt;*/
    /*Uncommenting the following lines will make it automatically detect how high it should be*/
    height: auto;
    max-height: 130pt;
    visibility: visible;


}


#desktop-nav li ul a:hover {
    background: transparent;
}

#desktop-nav li ul a{
        transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}

/* Some sort of default control I guess? */
#mobile-nav{
  height: 10%;


}



#mobile-nav-container{
   /* Fallback (could use .jpg/.png alternatively) */
  background-color: rgba(10, 10, 10, 0.9);

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background:
    -webkit-gradient(linear, left top, right top, from(rgba(10, 10, 10, 0.9)), to(rgba(10, 10, 10, 0.7)));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background:
    -webkit-linear-gradient(left, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));

  /* Firefox 3.6 - 15 */
  background:
    -moz-linear-gradient(left, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));

  /* Opera 11.1 - 12 */
  background:
    -o-linear-gradient(left, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));

}



#mobile-header-logo{
  position: relative;
  width: auto; 
  height: 50pt ; 
  padding-top: 0; 
  padding-right: 3%; 
max-height: 10%;
}

.logo {
position:relative;
display:inline-block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 50px;
height: 120px;
background: url(./images/logo.png) left center no-repeat;
top:-10px;
}


#desktop-nav-logo{
  /*
  //Just say no to animation! Don't need this anymore.
    transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
-webkit-transition: all 0.75s ease-out;
*/
}



#mobile-nav-logo{
      transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
-webkit-transition: all 0.75s ease-out;
}


/* Fancy Graphic Things - static version if needed*/
.gradient-black {


   background-position:300px;  
  /* Fallback (could use .jpg/.png alternatively) */
  background-color: rgba(10, 10, 10, 0.8);

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background:
    -webkit-gradient(linear, left top, right top, from(rgba(10, 10, 10, 0.8)), to(rgba(10, 10, 10, 0.4)));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background:
    -webkit-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

  /* Firefox 3.6 - 15 */
  background:
    -moz-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

  /* Opera 11.1 - 12 */
  background:
    -o-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

}

/*The things that drop down on the navigation items*/
.gradient-black-animate {
   

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: rgba(10, 10, 10, 0.8);

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background:
    -webkit-gradient(linear, left top, right top, from(rgba(10, 10, 10, 0.8)), to(rgba(10, 10, 10, 0.4)));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background:
    -webkit-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

  /* Firefox 3.6 - 15 */
  background:
    -moz-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

  /* Opera 11.1 - 12 */
  background:
    -o-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.4));
background-size: 100% 0%;
  transition: background-size 0.5s ease-out;
-moz-transition: background-size 0.5s ease-out;
-ms-transition: background-size 0.5s ease-out;
-o-transition: background-size 0.5s ease-out;
-webkit-transition: background-size 0.5s ease-out;


  background-repeat:no-repeat;

/*-webkit-animation-name: SLIDE-UP;*/
  
}

#desktop-nav .over{
 background-size: 100% 130pt;
  transition: background-size 0.5s ease-out;
-moz-transition: background-size 0.5s ease-out;
-ms-transition: background-size 0.5s ease-out;
-o-transition: background-size 0.5s ease-out;
-webkit-transition: background-size 0.5s ease-out;


}



@-webkit-keyframes SLIDE-DOWN {
   from {
     background-size: 100% 0%;
   }
   to { 
     background-size: 100% 130pt;
   }
}

@-webkit-keyframes SLIDE-UP {
   from {
     background-size: 100% 130pt;
   }
   to { 
     background-size: 100% 0%;
   }
}

.gradient-black-animate:hover {
/*-webkit-animation-name: SLIDE-DOWN;*/
background-size: 100% 130pt;

transition: background-size 0.5s ease-in;
-moz-transition: background-size 0.5s ease-in;
-ms-transition: background-size 0.5s ease-in;
-o-transition: background-size 0.5s ease-in;
-webkit-transition: background-size 0.5s ease-in;


}

.gradient-black-animate:focus{
  background-size: 100% 130pt;

}

.gradient-black-animate.active{
  background-size: 100% 130pt;
  -webkit-animation-name: SLIDE-UP;
}





/* The background image of the site. Should resize nicely, as well as crop down the image if it is too large. */
.bannerBackground {
  position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
background-color: gray;
 background: url(./images/backgrounds/Background_lowres.jpg) no-repeat center center fixed; 

background-size: cover;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  
    opacity: 1.0;
 
    width: 100%;
    height: 100%;

  transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
-webkit-transition: all 0.75s ease-in;




}

/* The blurred version of the background image, because it works much quicker to just show this instead of using the browser to blur it, at least on older computers*/
.bannerBackgroundBlurred{
  position: absolute;
    z-index: -2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
background-color: gray;
 background: url(./images/backgrounds/Background_blur_lowres.jpg) no-repeat center center fixed; 
background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  
    opacity: 1.0;
    width: 100%;
    height: 100%;

  transition: all 0.75s ;
-moz-transition: all 0.75s ;
-ms-transition: all 0.75s ;
-o-transition: all 0.75s ;
-webkit-transition: all 0.75s ;





}

/*For quick greyscale things*/
.desaturate{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: white;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}


/* Now indipendant of the background, so it doesn't fade in and out with the animation of the blur */
.gradient{
  position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*Was at 50%, to give more colour to the background image, but this works for now.*/
    height: 50%;

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: rgba(10, 10, 10, 0.8);

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background:
    -webkit-gradient(linear, left top, right top, from(rgba(10, 10, 10, 0.8)), to(rgba(10, 10, 10, 0.0)));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background:
    -webkit-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.0));

  /* Firefox 3.6 - 15 */
  background:
    -moz-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.0));

  /* Opera 11.1 - 12 */
  background:
    -o-linear-gradient(left, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.0));

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.0));
}


/*Was used before, might be useful again. Otherwise, just don't bother using it*/
.bannerBackground img {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
 z-index: -2;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    max-width: 100%;
    height: 100%;
    width: 100%;
    max-height: 100%;
}




/* For positioning exactly and in effect creating "layers" which can be adjusted by z-index */
.fixed-content {
    top: 0;
    bottom:0;
    left:0;
    right:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}


/* 
A nice little effect I found online, slow on some systems that don't have modern GPUs it seems
This works because I have the background positioned behind it at the same area on the screen, but this is offset slightly. So, the image it blurs is offset, and then the magic happens.
 This is no longer used though, because it slows down most things that aren't newer.
 */
.blur_bg {
  background: url('./images/vortex.png');
  display: none;
  position: absolute;
  top: 25%;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 80;
  
  background-position: center -70px;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: url('../Inovatzia/media/blur.svg#blur'); /* for Firefox */
}


/*For the background of the site, although not at the image background, but rather the large white area behind all the text */
.bg {
position: fixed;
top: 25%;
width: 100%;
height: 60%;
z-index: 81;
  background: rgb(240,240,240); /* for IE */
  background: rgba(240,240,240,0.75); 
left: 0;



}


/*More used on the news page, but still nice. */

.well{
  background-color: rgba(200,200,200,0.90);
}


/* 
Handles the actual tab-bits of the site, which are all divs now. Lazyload works better here because of the visibility:hidden as far as I can tell.  
Scrolling is still done within these tabs, seeing most of the site is fixed position to keep it looking the same on all resolutions for the most part.
However, it feels native now, because the whole site is fixed on-screen and cannot scroll, you don't get double scrollbars.

*/
.pageTab{
position: absolute;
visibility: hidden;
top:-1000px;

height: 100%;
width: 100%;
z-index:100 !important;
padding: 0%;
overflow-y: scroll ;

}


/*
Holds the tabs in place, and serves as a sort of cut-off point that is fixed on the screen (and seeing it uses percentage, it is all relative).
This allows the animations to work properly as well, rather than the pages flying up behind the nav bar as well, they appear to cut off at the edge of the white box
*/

.tab-container{
position: fixed;
z-index: 105;
top: 25%;
height: 60%;
width: 100%;
  transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
overflow: hidden ;



}


/*
All the inner-divs of the tabs use this, handy for positioning the content of the tabs themselves without changing the animations. Padding mostly, but could be useful later on to have a reference to this.
*/
.alpha {

position: relative;
z-index: 106 !important;


padding-top: 0;
padding-bottom: 0;
margin-top: 3%;
margin-bottom: 3%;
margin-left: 20%;
margin-right: 20%;
}


/* Helps the text to resize properly supposedly... */
html {
   
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}


/*So it doesn't crop and go outside the viewport*/
img.lazy{
  max-width: 100%;
}

/* So all the news page images are no larger than a certain size, to give some sort of order to it*/
#page_news img.lazy{
width: auto !important;
height: auto !important;
max-height: 250pt !important; /* 150? */
max-width: 100% !important;
min-width: 200pt !important;

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
body {
  background-color: #0A0562;

}

/*Mini footer? Small screen to begin with, don't want to take up lots of space*/
#footer {
bottom:0px;
height: 5% !important;
width: 100%;
position: fixed;
text-align: center;
z-index: 110;
background: black;

}




.gradient{
top: 11%;

}


.pageTab{
visibility: hidden;
top:-1000px;
bottom: 0px;
height: 100%;
width: 100%;
z-index:100 !important;
padding: 0%;
overflow-y: scroll ;

/* This helps so much with the scrolling inside divs on mobile, makes it feel native */
-webkit-overflow-scrolling: touch;

}

.tab-container{
z-index: 105;

top: 11% !important;
height: 84%;
width: 100%;
  transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
overflow: hidden ;

}

.alpha {

position: relative;
z-index: 106 !important;

padding-top: 0;
padding-bottom: 0;

margin-left: 5%;
margin-right: 5%;
overflow: hidden;

}



.blur_bg{
  top: 11%;
  position: fixed;
}

.bg{
  top: 11%;
  height: 84%;
  position: fixed;
  color: black;
}

.news-image-cell{

padding: 3%;
text-align: center;
}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */


img.lazy{
width: auto;
height: auto;
max-height: 150pt;
}

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */


img.lazy{
width: auto;
height: auto;
max-height: 250pt;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */



.pageTab{

visibility: hidden;
/*
top:-1000px;
bottom: 0px;
height: 100%;
width: 100%;
z-index:100 !important;
padding: 0%;
*/
overflow-y: scroll ;

/* This helps so much with the scrolling inside divs on mobile, makes it feel native */
-webkit-overflow-scrolling: touch;

}


}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

img.lazy{
width: auto;
height: auto;
max-height: 250pt;
}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

img.lazy{
width: auto;
height: auto;
max-height: 350pt;
}


#footer {
bottom:0px;
height: 5% !important;
width: 100%;
position: fixed;
text-align: center;
z-index: 110;
background: black;

}


.gradient{
top: 11%;

}


.tab-container{
z-index: 105;

top: 11%;
height: 84%;
width: 100%;
  transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
overflow: hidden ;

}

.alpha {

position: relative;
z-index: 106 !important;

padding-top: 0;
padding-bottom: 0;

margin-left: 5%;
margin-right: 5%;
overflow: hidden;

}



.blur_bg{
  top: 11%;
  position: fixed;
}

.bg{
  top: 11%;
  position: fixed;
  color: black;
  height: 85%;
}

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */


}

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

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */


#footer {
bottom:0px;
height: 5% !important;
width: 100%;
position: fixed;
text-align: center;
z-index: 110;
background: black;

}

.gradient{
top: 11%;

}

.pageTab{
visibility: hidden;
top:-1000px;
bottom: 0px;
height: 100%;
width: 100%;
z-index:100 !important;
padding: 0%;
overflow-y: scroll ;

/* This helps so much with the scrolling inside divs on mobile, makes it feel native */
-webkit-overflow-scrolling: touch;

}

.tab-container{
z-index: 105;

top: 11%;
height: 84%;
width: 100%;
  transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
overflow: hidden ;

}

.alpha {

position: relative;
z-index: 106 !important;

padding-top: 0;
padding-bottom: 0;

margin-left: 5%;
margin-right: 5%;
overflow: hidden;

}



.blur_bg{
  top: 11%;
  position: fixed;
}

.bg{
  top: 11%;
  height: 84%;
  position: fixed;

}

#page_matrix img {
  padding-top: 3%;
  padding-left: 0 !important;
  padding-right: 0;

}

/* 
This should make images display properly on mobile, at least that is the idea. Force the size with percentage rather than pixels/points. 
However, only do it for the lazyload images, just for some control over which ones resize and don't.
It also does not look so decent for low-resolution images.
 */

img.lazy{
width: auto;
height: auto;
max-height: 250pt;
}



}