/* ==========================================================================
 * Simone Bertuccioli
 *
 * Default layout for less capable mobile browsers at less than 480px 
   ========================================================================== */
 body {
  background:url(../img/bg-wave.png);
  background:url(../img/bubbles.png) -100% 50% repeat, url(../img/fish3.png) 120% 1500px fixed no-repeat, url(../img/fish2.png) 100% 2860px fixed no-repeat, url(../img/fish1.png) 100% 1000px fixed no-repeat, url(../img/crab.png) 40% 10px fixed no-repeat, url(../img/octopus.png) 300% 380px fixed no-repeat, url(../img/bg-wave.png);
  -webkit-transition: background 1.0s ease-in-out; 
  -moz-transition: background 1.0s ease-in-out; 
  -o-transition: background 1.0s ease-in-out; 
  transition: background 1.0s ease-in-out;
}
.well, .hero-unit {
  background-color: #fff;
  background-color: rgba(255,255,255,.9);
  -webkit-box-shadow: 1px 1px 2px rgba(51,51,51,.5);
  -moz-box-shadow: 1px 1px 2px rgba(51,51,51,.5);
  box-shadow: 0px 1px 2px rgba(51,51,51,.5);
  text-shadow: 0px 1px 1px rgba(255,255,255,.85);
  border: 1px solid #ffffff;
}
.hero-unit {
  margin-bottom: 10px;
  /* background: url(..img/albers/white.png) scroll 20% 0,
	url(..img/albers/green.png) scroll -40% 0,
	rgba(230, 230, 230,.9); */
  text-shadow: 1px 1px 2px #ffffff, 1px 1px 5px #000000;
}
.hero-unit p {
  font-weight: bold;
  font-size: 1em;
}
.hero-unit a {
  width: 113px;
  height: 113px;
  margin-bottom: 10px;
  background: #999999;
  -webkit-box-shadow: 1px 1px 10px rgba(255,255,255,.9);
  -moz-box-shadow: 1px 1px 10px rgba(255,255,255,.9);
  box-shadow: 1px 1px 10px rgba(255,255,255,.9);
}
.hero-unit h1 {
  display: inline-block;
  font-size: 36px;
}
.subnav {
  margin: 0 0 10px 0;
  -webkit-box-shadow: 1px 1px 2px rgba(51,51,51,.5);
  -moz-box-shadow: 1px 1px 2px rgba(51,51,51,.5);
  box-shadow: 0px 1px 2px rgba(51,51,51,.5);
}
section {
  font: 1.2em/1.8em Signika, Arial, "MS Trebuchet", sans-serif;
}
article p{
  display: inline-block;
}
article p:first-letter{
  font: bold 2.2em "Cabin Sketch", Signika, Arial, "MS Trebuchet", sans-serif;
  color: #CC3300;
  vertical-align: -0.1em;
  letter-spacing: 2px;
}
aside{
  padding: 10px;
  margin: 1em;
  background-color: #d2d2d2;
  background-color: rgba(210, 210, 210, .5);
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px;
  border: 1px solid #ffffff;
  -webkit-box-shadow: 1px 1px 2px rgba(51,51,51,.5);
  -moz-box-shadow: 1px 1px 2px rgba(51,51,51,.5);
  box-shadow: 0px 1px 2px rgba(51,51,51,.5);
}
#email:after{
	content:"info@simonebertuccioli.it";
}
#socialLinks {
  text-align: center;
  max-width: 300px;
}
#socialLinks img {
  opacity: 0.80; 
  -ms-filter:"progid:DXImageTransform.Microsoft. » Alpha(Opacity=80)"; /* IE 8 hack */ 
  filter: alpha(opacity = 80); /* IE 5-7 hack */
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 36px;
  height: 36px;
}
#socialLinks a:hover img, #socialLinks a:focus img {
  background-color: #666666;
  background-color: rgba(102,102,102,.9);
  opacity: 0.9;
  -ms-filter:"progid:DXImageTransform.Microsoft. » Alpha(Opacity=90)"; /* IE 8 hack */
  filter: alpha(opacity = 90); /* IE 5-7 hack */ 
  -webkit-box-shadow: 1px 1px 15px rgba(51,51,51,.7);
  -moz-box-shadow: 1px 1px 15px rgba(51,51,51,.7);
  box-shadow: 1px 1px 15px rgba(51,51,51,.7);
  -webkit-border-radius: 8px; 
  -moz-border-radius: 8px; 
  border-radius:  8px;
}
#credits {
  text-align: center;
  margin: 0 auto;
  color: #ffffff;
  background-color: #009999;
  background-color: rgba(0,153,153,.9);
  -webkit-animation: pulse 240s infinite alternate;
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px; 
  border-radius:  20px;
  padding: 3px 10px;
  text-shadow: 1px 1px 5px #000000, 1px 1px 1px #666666;
}
p.backtotop span {
  background: #009999;
  background: rgba(0,153,153,.9);
  -webkit-animation: pulse 240s infinite alternate;
}
p.backtotop a {
  color: #ffffff;
}
p.backtotop a:hover {
  text-decoration: none;
}
p.backtotop span:hover {
  background: #006666;
  background: rgba(0,102,102,.9);
}
#socialLinks li {
  list-style:none;
  display:inline;
}
/* 
 * Menu
 *******************************************************************************/
 @-webkit-keyframes pulse {
      0% {background-color: #009999;background-color: rgba(0,153,153,.9);}
     25% {background-color: #333399;background-color: rgba(51,51,153,.9);}
     50% {background-color: #990000;background-color: rgba(153,0,0,.9);}
     75% {background-color: #ffcc00;background-color: rgba(255,204,0,.9);}
     100% {background-color: #339933;background-color: rgba(51,153,51,.9);}
}
.navbar-inverse .navbar-inner {
  background: #009999;
  background: rgba(0,153,153,.9);
  -webkit-animation: pulse 240s infinite alternate;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
}
.navbar-inverse .brand {
  color: #ffffff;
  text-shadow: 1px 1px 5px #333333;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.navbar-inverse a.brand:hover {
  color: #666666;
  text-shadow: -1px -1px 2px #ffffff, -1px 1px 2px #eeeeee, 1px -1px 2px #eeeeee, 1px 1px 2px #ffffff;
}
.navbar-inverse .nav > li > a {
  color: #ffffff;
  text-shadow: 1px 1px 5px #333333;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
.navbar-inverse .nav .active > a, 
.navbar-inverse .nav .active > a:hover,
.nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
  background: #006666;
  background: rgba(102,102,102,.3);
  color: #ffffff;
  text-shadow: 1px 1px 5px #333333;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #cccccc;
  border-bottom-color: #cccccc;
}
.navbar .btn-navbar {
  background: #009999;
  background: rgba(102,102,102,.1);
  border-color: #666666;
  border-color: rgba(102,102,102,.4);
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1em 0 rgba(0,0,0,.1), 0 1px 1em rgba(255,255,255,.1);
  -moz-box-shadow: inset 0 1em 0 rgba(0,0,0,.1), 0 1px 1em rgba(255,255,255,.1);
  box-shadow: inset 0 1px 1em rgba(0,0,0,.1), 0 1px 1em rgba(255,255,255,.1);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  background: #006666;
  background: rgba(102,102,102,.3);
}
.nav-collapse .nav .nav-header {
  color: #bbbbbb;
  text-shadow: 1px 1px 5px #333333;
}
.nav-collapse .dropdown-menu a {
  color: #ffffff;
  text-shadow: 1px 1px 5px #333333;
} 
.nav-collapse .dropdown-menu a:hover {
  background: #006666;
  background: rgba(102,102,102,.3);
  color: #ffffff;
  text-shadow: 1px 1px 5px #333333;
}

/* MEDIA QUERIES 
 * Default layout for less capable mobile browsers at less than 480px 
 *******************************************************************************/
@media only screen and (min-width:481px) {
  body {
    background:url(../img/bg-wave.png);
    background:url(../img/bubbles.png) -100% 0 repeat, url(../img/fish3.png) 100% 1200px fixed no-repeat, url(../img/fish2.png) 1000% 700px fixed no-repeat, url(../img/fish1.png) 250% 280px fixed no-repeat, url(../img/crab.png) 180% -150px fixed no-repeat, url(../img/octopus.png) -50% 500px fixed no-repeat, url(../img/bg-wave.png);
    -webkit-transition: background 1.0s ease-in-out; 
    -moz-transition: background 1.0s ease-in-out; 
    -o-transition: background 1.0s ease-in-out; 
    transition: background 1.0s ease-in-out;
  }
  .hero-unit p {
    font-weight: bold;
    font-size: 1.2em;
  }
  .hero-unit h1 {
    display: inline-block;
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) {
  .hero-unit a {
	float: right;
	margin: 0;
  }
  body {
    background:url(../img/bg-wave.png);
    background:url(../img/bubbles.png) -100% -50% repeat, url(../img/fish3.png) 100% -1200px fixed no-repeat, url(../img/fish2.png) 120% 5px fixed no-repeat, url(../img/fish1.png) 5% 1300px fixed no-repeat, url(../img/crab.png) 200% -270px fixed no-repeat, url(../img/octopus.png) 60% 650px fixed no-repeat, url(../img/bg-wave.png);
    overflow-x: hidden;
    -webkit-transition: background 1.0s ease-in-out; 
    -moz-transition: background 1.0s ease-in-out; 
    -o-transition: background 1.0s ease-in-out; 
    transition: background 1.0s ease-in-out;
  }
  aside {
    width: 35%;
    float: left;
  }
  article p {
    width: 55%;
  }
  aside p {
    width: 100%;
  }
}
@media only screen and (max-width: 979px) {
  .navbar .nav>li>.dropdown-menu:before,
  .navbar .nav>li>.dropdown-menu:after {
    display: none;
  }
}
@media only screen and (min-width: 980px) {
  .nav-collapse .nav .nav-header {
    color: #999999;
    text-shadow: none;
  }
  .nav-collapse .dropdown-menu a {
    color: #666666;
    text-shadow: none;
  } 
  .nav-collapse .dropdown-menu a:hover,
  .dropdown-menu .active > a, 
  .dropdown-menu .active > a:hover {
    background: #009999;
    background: rgba(102,102,102,.3);
    color: #ffffff;
    text-shadow: 1px 1px 5px #333333;
  }
  .hero-unit h1 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  body {
  background:url(../img/bubbles.png) -100% -100% repeat, url(../img/fish3.png) 100% -100px fixed no-repeat, url(../img/fish2.png) -50% 450px fixed no-repeat, url(../img/fish1.png) 80% 660px fixed no-repeat, url(../img/crab.png) 40% -360px no-repeat, url(../img/octopus.png) -10% 750px fixed no-repeat, url(../img/bg-wave.png);
  }
}
/* SUBNAV
 ==================================================================================*/
.subnav {
    width: 100%;
    height: 36px;
    background-color: #eeeeee; /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
    background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
    background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
    background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.subnav .nav {
    margin-bottom: 0;
}
 @-webkit-keyframes pulsetext {
      0% {color: #009999;color: rgba(0,153,153,.9);}
     25% {color: #333399;color: rgba(51,51,153,.9);}
     50% {color: #990000;color: rgba(153,0,0,.9);}
     75% {color: #ffcc00;color: rgba(255,204,0,.9);}
     100% {color: #339933;color: rgba(51,153,51,.9);}
}
section a, .alert a {
  -webkit-animation: pulsetext 240s infinite alternate;
}
.subnav .nav > li > a {
  margin: 0;
  padding-top:    11px;
  padding-bottom: 11px;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #e5e5e5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  color: #009999;
}
.subnav .nav > .active > a,
.subnav .nav > .active > a:hover {
  padding-left: 13px;
  color: #006666;
  background-color: #e9e9e9;
  border-right-color: #ddd;
  border-left: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
          box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
}
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret {
  border-top-color: #777;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
  border-left: 0;
  padding-left: 12px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}
.subnav .nav > li:last-child > a {
  border-right: 0;
}
.subnav .dropdown-menu {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}
@media (max-width: 768px) {
    .subnav {
        position: static;
        top: auto;
        z-index: auto;
        width: auto;
        height: auto;
        background: #fff; /* whole background property since we use a background-image for gradient */
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .subnav .nav > li {
        float: none;
    }
    .subnav .nav > li > a {
        border: 0;
    }
    .subnav .nav > li + li > a {
        border-top: 1px solid #e5e5e5;
    }
    .subnav .nav > li:first-child > a,
    .subnav .nav > li:first-child > a:hover {
        -webkit-border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
    }
}
@media (min-width: 980px) {
  .subnav-fixed {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
    border-color: #d5d5d5;
    border-width: 0 0 1px; /* drop the border on the fixed edges */
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
  }
  .subnav-fixed .nav {
    width: 938px;
    margin: 0 auto;
    padding: 0 1px;
  }
  .subnav .nav > li:first-child > a,
  .subnav .nav > li:first-child > a:hover {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }
}
@media (min-width: 1210px) {
  .subnav-fixed .nav {
    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
  }
}​