@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
/*@import url(http://fonts.googleapis.com/css?family=Quintessential);*/
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Fondamento);
@import url(http://fonts.googleapis.com/css?family=McLaren);


html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
    overflow: hidden;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* app css stylesheet */

body {
    font-family: 'Roboto', sans-serif;
    width: 100%;
/*  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;*/
}
body.ocean {background-color: #80e5f9;}
body.gardenia {background-color: #55EAA8;}

#logo {
    width: 12%;
    position: absolute;
    left:2%;
    z-index: 1000;
    top: initial;
    bottom:initial;
}
#logo {
/*    -webkit-transition:bottom 2s, top 2s;
    transition:bottom 2s, top 2s;*/
}
.ocean #logo { bottom:10%; }
.gardenia #logo { top:2%; }

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.utility {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid gray;
background-color: #eeeeee;
z-index: 99999999;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin:0;
}

/*Main NAV*/
#main-nav {
  position: absolute;
  top: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 190px;
  background-color: transparent; 
  border: 0 none;
  -webkit-transition: top 2s, bottom 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: top 2s, bottom 2s, transform 2s;
}
#main-nav-img {
  position: absolute;
  top: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 190px;
  background-color: transparent; 
  background-image: url('../img/menu.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  border: 0 none;
  -webkit-transition: top 2s, bottom 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: top 2s, bottom 2s, transform 2s;
}
.ocean #main-nav, .ocean #main-nav-img {
    top: 0px !important;
    bottom: initial; //impostato tramite js
}
.gardenia #main-nav {
    top: initial; //impostato tramite js
    bottom: initial !important;
}
.gardenia #main-nav-img {
    top: initial; //impostato tramite js
    bottom: initial !important;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
#notice {
  position: absolute;
  top: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 84px;
  background-color: transparent; 
  border: 0 none;
  -webkit-transition: top 2s, bottom 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: top 2s, bottom 2s, transform 2s;
}
#notice-img {
  position: absolute;
  top: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 84px;
  background-color: transparent; 
  background-image: url('../img/menudown.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  border: 0 none;
  -webkit-transition: top 2s, bottom 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: top 2s, bottom 2s, transform 2s;
}
.ocean #notice, .ocean #notice-img {
    top: 180px !important; // non lo uso, uso bottom
    bottom: initial; //impostato tramite js
}
.gardenia #notice {
    top: initial; //impostato tramite js
    bottom: initial !important;
}
.gardenia #notice-img {
    top: initial; //impostato tramite js
    bottom: initial !important;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
ul.navbar-nav {
    width: 100%;
}
.navbar-collapse.in {background-color: rgba(249, 215, 250, 0.9);}
.navbar-collapse.in navbar-nav {padding: 0;margin: 0;}
.navbar-collapse.in li {width: 80%;height: 60px;}
.navbar-collapse.in li.compass {width: 164px;padding: 0;margin: 10px auto;height: 168px;}
.navbar-collapse.in a span {margin: 0;float: right;line-height: 60px;font-size: 20px;}
.navbar-collapse.in a img {width: 60px;}
.navbar-collapse.in .compass .glass#glassO {top: 84px;}
.navbar-collapse.in #compassNeedle {top: 10px;}


.gardenia ul.navbar-nav {
    width: 100%;
    padding-top: 10px;
}
ul.navbar-nav li {
    width: 10.5%;
    display: block;
    height: 100px;
    text-align: center;
}
ul.navbar-nav li.disabled {
    opacity: 0.5;
}
ul.navbar-nav li a {
    padding: 0 8% 0;
}
ul.navbar-nav li.disabled a {
    cursor: not-allowed;
}

ul.navbar-nav li a span {
    margin: 3px 0;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    color:#7c47ba;
    font-size: 16px;
    line-height: 20px;
    font-family: 'Oswald', sans-serif;
    white-space:nowrap;
}
ul.navbar-nav li.active a span {
    color:#00aeef;
}
ul.navbar-nav li:hover a span, ul.navbar-nav li:active a span {
    color:#00aeef;
    line-height: 18px;
    -webkit-transform:scale(1.1);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.5s;
    -moz-transform:scale(1.1);
}
ul.navbar-nav li.disabled:hover a span{
    color:#7c47ba;
    line-height: 20px;
    -webkit-transform:none;
    -moz-transform:none;
}

.ocean li.offset1 a { margin-top: 28px;} .ocean li.offset2 a { margin-top: 24px;} .ocean li.offset3 a { margin-top: 16px;} .ocean li.offset4 a { margin-top: 0;}
.gardenia li.offset1 a { margin-top: 26px;} .gardenia li.offset2 a { margin-top: 30px;} .gardenia li.offset3 a { margin-top: 38px;} .gardenia li.offset4 a { margin-top: 54px;}

ul.navbar-nav li a img {
    border-radius: 100%;
    max-width: 100%;
    border: 5px double #ec008c;
    -moz-box-shadow: 2px 2px 7px #92278f;
    -webkit-box-shadow: 2px 2px 7px #92278f;
    box-shadow: 2px 2px 7px #92278f;
}
ul.navbar-nav li.active a img {
    border-color: #6ecff6;
    -moz-box-shadow: 0px 0px 7px #fff;
    -webkit-box-shadow: 0px 0px 7px #fff;
    box-shadow: 0px 0px 7px #fff;
}
ul.navbar-nav li:hover a img, ul.navbar-nav li:active a img {
    border: 5px double #6ecff6;
    -moz-box-shadow: 0px 0px 10px #fff;
    -webkit-box-shadow: 0px 0px 10px #fff;
    box-shadow: 0px 0px 10px #fff;
    -webkit-transform:rotate(20deg) scale(1.05);
    -webkit-transition-property:rotate, scale, box-shadow, border;
    -webkit-transition-duration:0.5s, 0.5s, 0.5s, 0.5s;
    -moz-transform:rotate(20deg) scale(1.05);
}
ul.navbar-nav li.disabled:hover a img{
    border: 5px double #ec008c;
    -moz-box-shadow: 2px 2px 7px #92278f;
    -webkit-box-shadow: 2px 2px 7px #92278f;
    box-shadow: 2px 2px 7px #92278f;
    -webkit-transform:none;
    -moz-transform:none;
}
 ul.navbar-nav li.compass {
    width: 16%;
    padding: 0.8%;
}
.ocean ul.navbar-nav li.compass { }
.gardenia ul.navbar-nav li.compass { }
.compassInner {
    position:relative;
    padding: 0;
}
#compassNeedle {
    top: 12%;  width: 50%;  left: 9%;
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
    -webkit-transition: -webkit-transform 2s;
    transition: transform 1s;
    z-index: 1;
    position: relative;
    margin-top: -12%;
}
.ocean #compassNeedle.oscillateUP {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform ease-in-out 1s;
}
.gardenia #compassNeedle.oscillateDOWN {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transition: -webkit-transform ease-in-out 1s;
}
.ocean #compassNeedle {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.gardenia #compassNeedle {
    -webkit-transform: rotate(450deg);
    -moz-transform: rotate(450deg);
    transform: rotate(450deg);
}
.compassInner.available, .compass .glass.available {
    cursor:pointer;
}
.compassInner .label {
    position: absolute;
    padding: 1px;
    font-family: 'Fondamento', sans-serif;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: bold;
    color:#e01783;
    text-shadow: 1px 1px 2px white;
    font-size: 15px;
    line-height: 13px;
    width: 84%;
}
.compassInner.available .label {
    opacity: 0;
}
.compassInner.gardenia .label {
    bottom: 9%;
    left: 8%;
    background-color: rgba(140, 255, 187, 0.9);
}
.compassInner.ocean .label {
    top: 9%;
    right: 8%;
    background-color: rgba(140, 255, 246, 0.8);
}
.compass .glass {
    position: absolute;
    left:0;
    top:0;
    display: block;
    z-index: 2;
}
.compass .glass#glassO {
    top: 94%;
}

.compassInner img, .compassInner video, #compassNeedle img {
    padding: 0;
}
/*.compassInner.available:hover .label{
    opacity: 1;
}*/
.compassInner.available.hovered {
    -webkit-transform: scale(1.1);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.5s;
    -moz-transform: scale(1.1);
}
.compassInner video {
    display: none;
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
}
.infoCompass {
    position:absolute;
    right:0;
    bottom:-70px;
    z-index: 10;
    width: 12%;
    cursor: pointer;
    opacity:0.8;
}
.infoCompass:hover {
    -webkit-transform:scale(1.2);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.2s;
    -moz-transform:scale(1.2);
    opacity:1;
}
html.video.borderradius body.iOSno .compassInner.available video {
    display:block;
}
html.video.borderradius body.iOSno .compassInner.gardenia video {
     -moz-border-radius: 164px 164px 0 0;
     -webkit-border-radius: 164px 164px 0 0;
     border-radius: 164px 164px 0 0;
}
html.video.borderradius body.iOSno .compassInner.ocean video {
     -moz-border-radius: 0 0 164px 164px;
     -webkit-border-radius: 0 0 164px 164px;
    border-radius: 0 0 164px 164px;
}
#notice .container {
    width:300px;
    padding: 19px 50px 0;
    word-wrap: break-word;
    height: 70px;
    text-align: center;
}
#notice span {
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    color: rgb(246, 255, 34);
    text-shadow: 2px 2px 2px rgb(89, 6, 105);
    font-weight: bold;
}
/*Media Query - Nav*/
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
    #main-nav, #main-nav-img {  height: 140px;  }
    .ocean #notice, .ocean #notice-img {    top: 130px !important;  }
    #notice, #notice-img {  height: 60px;  }
    ul.navbar-nav li a span {   font-size: 13px;    }
    .compassInner .label {  font-size: 13px;    line-height: 13px;  }
    #notice span {  font-size: 14px;    line-height: 16px;  }
    .compass .glass#glassO { top:60%; }
    #compassNeedle { top: 8%; }
    .ocean li.offset1 a { margin-top: 28px;} .ocean li.offset2 a { margin-top: 24px;} .ocean li.offset3 a { margin-top: 16px;} .ocean li.offset4 a { margin-top: 0;}
    .gardenia li.offset1 a { margin-top: 8px;} .gardenia li.offset2 a { margin-top: 12px;} .gardenia li.offset3 a { margin-top: 20px;} .gardenia li.offset4 a { margin-top: 36px;}
    html.video.borderradius .compassInner.available video { display:none; }
    #notice .container {width:240px; padding-top: 10px;}
    .infoCompass { bottom:-10px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #main-nav, #main-nav-img {  height: 165px;  }
    .ocean #notice, .ocean #notice-img {    top: 155px !important;  }
    #notice, #notice-img {  height: 72px;  }
    ul.navbar-nav li a span {   font-size: 15px;    }
    .compassInner .label {  font-size: 15px;    line-height: 15px;  }
    #notice span {  font-size: 16px;    line-height: 20px;  }
    .compass .glass#glassO { top:78%; }
    #compassNeedle { top: 10%; }
    .ocean li.offset1 a { margin-top: 28px;} .ocean li.offset2 a { margin-top: 24px;} .ocean li.offset3 a { margin-top: 16px;} .ocean li.offset4 a { margin-top: 0;}
    .gardenia li.offset1 a { margin-top: 14px;} .gardenia li.offset2 a { margin-top: 18px;} .gardenia li.offset3 a { margin-top: 26px;} .gardenia li.offset4 a { margin-top: 42px;}
    #notice .container {width:270px; padding-top: 17px;}
    .infoCompass { bottom:-40px; }
}
@media (min-width: 1200px) {
}

    .sm #main-nav, .sm #main-nav-img {  height: 140px;  }
    .sm.ocean #notice, .sm.ocean #notice-img {    top: 130px !important;  }
    .sm #notice, .sm #notice-img {  height: 60px;  }
    .sm ul.navbar-nav li a span {   font-size: 13px;    }
    .sm .compassInner .label {  font-size: 13px;    line-height: 13px;  }
    .sm #notice span {  font-size: 14px;    line-height: 16px;  }
    .sm .compass .glass#glassO { top:60%; }
    .sm #compassNeedle { top: 8%; }
    .sm.gardenia li.offset1 a { margin-top: 8px;} .sm.gardenia li.offset2 a { margin-top: 12px;} .sm.gardenia li.offset3 a { margin-top: 20px;} .sm.gardenia li.offset4 a { margin-top: 36px;}
    .sm html.video.borderradius .compassInner.available video { display:none; }
    .sm #notice .container {width:240px; padding-top: 10px;}
    .sm .infoCompass { bottom:-10px; }
    
    .md #main-nav, .md #main-nav-img {  height: 165px;  }
    .md.ocean #notice, .md.ocean #notice-img {    top: 155px !important;  }
    .md #notice, .md #notice-img {  height: 72px;  }
    .md ul.navbar-nav li a span {   font-size: 15px;    }
    .md .compassInner .label {  font-size: 15px;    line-height: 15px;  }
    .md #notice span {  font-size: 16px;    line-height: 20px;  }
    .md .compass .glass#glassO { top:78%; }
    .md #compassNeedle { top: 10%; }
    .md.gardenia li.offset1 a { margin-top: 14px;} .md.gardenia li.offset2 a { margin-top: 18px;} .md.gardenia li.offset3 a { margin-top: 26px;} .md.gardenia li.offset4 a { margin-top: 42px;}
    .md #notice .container {width:270px; padding-top: 17px;}
    .md .infoCompass { bottom:-40px; }

/* Footer */
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 30px;
  background-color: #f5f5f5;
}
#footer .container{
    margin:0 auto;
    padding: 0;
    position: relative;
}
#footer .container div{
    font-family: 'Roboto', sans-serif;
    float:left;
    margin:0 10px;
    font-size: 12px;
    line-height: 30px;
    color: #FCF09F;
    font-size: 14px;
}
#footer .flags a img{
    height: 26px;
    vertical-align: top;
    margin: 2px;
    cursor:pointer;
}
#footer a:hover img{
    -webkit-transform:scale(1.2);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.2s;
    -moz-transform:scale(1.2);
}
#footer div.social{
    float:right;
}
#footer .social a img{
    height: 24px;
    vertical-align: top;
    margin: 3px;
    cursor:pointer;
}
#footer div.credits{
    position: absolute;
    bottom: 40px;
    background-color: #94AAFC;
    padding: 20px 50px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
    width: 100%;
    text-align: center;
    line-height: 18px;
    color: #2020bb;
    border-radius: 10px;
    border: 2px solid #6888FC;
    margin:0;
    opacity: 0.9;
}
#footer div.credits .legalline{
    font-size: 13px;
    color: #FFF;
}
#footer div.credits  button.close {
    position: absolute;
    opacity: 1;
    font-size: 30px;
    top: -15px;
    right: -15px;
    background-color: #6888FC;
    border-radius: 30px;
    line-height: 15px;
    padding: 15px;
    color: #fff;
    font-family: Roboto, sans-serif;
}
#footer div.links{
    float:right;
}
#footer div.links .opencredit{
    cursor: pointer;
}
#footer div.links .opencredit:hover{
    text-decoration: underline;
}
#footer div.links a{
    color: rgb(252, 240, 159);
    text-decoration: none;
    margin:10px;
}
#footer div.links a:hover{
    text-decoration: underline;
}
/*Media query footer*/
@media (min-width: 1200px) {
    #footer {
      height: 50px !important;
      padding-top: 10px !important;
    }
    #footer .social a img {
        height: 32px;
        margin: 0 3px;
    }
}
    .sm #footer, .md #footer {
      height: 30px !important;
      padding-top: 0 !important;
    }
    .sm #footer .social a img, .md #footer .social a img {
        height: 24px;
        margin: 3px;
    }
    .lg #footer {
      height: 50px !important;
      padding-top: 10px !important;
    }
    .lg #footer .social a img {
        height: 32px;
        margin: 0 3px;
    }



/* BASE STYLES
============================================================================= */
html         { overflow-y:hidden; }
.page        { 
    top: 0;
    bottom: 0;
    position: absolute; 
    text-align:center;
    width:100%;
    background: no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: top 2s, bottom 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: top 2s, bottom 2s, transform 2s;
}
.gardenia .page { 
    background-position: center top;
}

/*.page h1    { font-size:60px; }
.page a     { margin-top:50px; }
#about      { color:#333; position:absolute; text-align:center; top:50px; width:100%; }*/

.page .container {
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}

 .sm .container {
    width: 750px;
  }
 .md .container {
    width: 970px;
  }
 .lg .container {
    width: 1170px;
  }

.gardenia .page .container {
    margin-top: 15px !important;
}

/* BREADCRUMBS*/
.bread {
   -webkit-transform: skew(-3deg); 
   -moz-transform: skew(-3deg); 
   -o-transform: skew(-3deg);
   transform: skew(-3deg);
    position: relative;
    border-bottom: 2px solid #e60078;
    z-index: 10;
   margin-bottom: 5px;
}

.ocean .bread {
    background-color: #f9e3b1;
    -webkit-box-shadow: inset 0px 0px 60px 7px #F6CC73;
    -moz-box-shadow: inset 0px 0px 60px 7px #F6CC73;
    box-shadow: inset 0px 0px 60px 7px #F6CC73;
}
.gardenia .bread {
    background-color: #fdf4f7;
    -webkit-box-shadow: inset 0px 0px 60px 7px #f8c9db;
    -moz-box-shadow: inset 0px 0px 60px 7px #f8c9db;
    box-shadow: inset 0px 0px 60px 7px #f8c9db;
}
.bread h1 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 34px;
    color: #ec008c;
    text-shadow: 2px 2px 3px rgb(255, 255, 255);
    margin: 0;
    text-align: right;
    padding: 10px;
    font-size: 40px;
}
.bread img {
    position: absolute;
    top: -50%;
    left: -5%;
    height: 210%;
}

/* PAGES
============================================================================= */
.page-home          { background-image:url(../img/bg/ocean/small/home.jpg) }
.page-characters    { background-image:url(../img/bg/ocean/small/characters.jpg)}
.page-story         { background-image:url(../img/bg/ocean/small/story.jpg) }
.page-videos        { background-image:url(../img/bg/ocean/small/videos.jpg) }
.page-gallery       { background-image:url(../img/bg/ocean/small/gallery.jpg) }
.page-games         { background-image:url(../img/bg/ocean/small/games.jpg) }
.page-partners      { background-image:url(../img/bg/ocean/small/home.jpg) }
.page-downloads     { background-image:url(../img/bg/ocean/small/downloads.jpg) }

/*Media Query - Contents*/
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
    .page {background-position: center}
    .portrait .page {background-position: 35% center}
    .bread h1 {font-size: 20px}
}
@media (min-width: 992px) and (max-width: 1199px) {
    .bread h1 {font-size: 26px}
}

   .sm .page {background-position: center}
   .sm.portrait .page {background-position: 35% center}
   .sm .bread h1 {font-size: 20px}
   .md .bread h1 {font-size: 26px}



/*HOme*/
img.logohome {
    width: 80%;
    margin: 0 10%;
}

/* Slider */
.slider {
  position: relative;
  padding: 0;
  margin: 0 auto;
  min-width: 100%;
}
.ocean .slider {
  background-color: #f9e3b1;
  background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #F6CC73),
	color-stop(1, #F9E3B1)
    );
    background-image: -o-linear-gradient(top, #F6CC73 0%, #F9E3B1 100%);
    background-image: -moz-linear-gradient(top, #F6CC73 0%, #F9E3B1 100%);
    background-image: -webkit-linear-gradient(top, #F6CC73 0%, #F9E3B1 100%);
    background-image: -ms-linear-gradient(top, #F6CC73 0%, #F9E3B1 100%);
    background-image: linear-gradient(to top, #F6CC73 0%, #F9E3B1 100%);
    -webkit-box-shadow: inset 0px 0px 60px 7px #F6CC73;
    -moz-box-shadow: inset 0px 0px 60px 7px #F6CC73;
    box-shadow: inset 0px 0px 60px 7px #F6CC73;
}
.gardenia .slider {
  background-color: #fdf4f7;
  background-image: url('../img/hearts.png');
  background-image: url('../img/hearts.png') -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #f8c9db),
	color-stop(1, #fdf4f7)
    );
    background-image: url('../img/hearts.png') -o-linear-gradient(top, #f8c9db 0%, #fdf4f7 100%);
    background-image: url('../img/hearts.png') -moz-linear-gradient(top, #f8c9db 0%, #fdf4f7 100%);
    background-image: url('../img/hearts.png') -webkit-linear-gradient(top, #f8c9db 0%, #fdf4f7 100%);
    background-image: url('../img/hearts.png') -ms-linear-gradient(top, #f8c9db 0%, #fdf4f7 100%);
    background-image: url('../img/hearts.png') linear-gradient(to top, #f8c9db 0%, #fdf4f7 100%);
    -webkit-box-shadow: inset 0px 0px 60px 7px #f8c9db;
    -moz-box-shadow: inset 0px 0px 60px 7px #f8c9db;
    box-shadow: inset 0px 0px 60px 7px #f8c9db;
}
.slider img.deco {
    position: absolute;
    bottom: -5%;
    right: -4%;
    width: 14%;
}
.slide {
  position: relative;
  width: 80%;
  margin: 0 10%;
  padding: 2% 0;
}

.slide .title {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.slide .title * {
    display: inline;
    vertical-align: middle;
}

.slide .title h3 {
    color: #0c9dde;
    font-weight: bold;
    font-family: "Fondamento", sans-serif;
    font-size: 30px;
    margin: 0 5px;
    line-height: 30px;
}
.slide .title img {
    margin: -10px 0;
}
.slide .title img.little {
    width: 30px;
}
.slide p {
    color: #0c9dde;
/*    font-weight: bold;*/
    font-size: 17px;
    line-height: 22px;
    font-family: "Fondamento", serif;
    text-align: justify;
}
.slide p::first-letter {
    font-size: 25px;
}
.slide p:first-child {
    text-indent: 25px;
}



.slide.ng-hide-add,
.slide.ng-hide-remove {
/*  -webkit-transition: all linear 0.5s;
  -moz-transition: all linear 0.5s;
  -o-transition: all linear 0.5s;
  transition: all linear 0.5s;*/
  display: block!important;
}
.slide.ng-hide-add.ng-hide-add-active,
.slide.ng-hide-remove {
  opacity: 0;
}
.slide.ng-hide-add,
.slide.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}
.slide img.picture{
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);
    border: 6px solid #e60078;
    padding: 0;
    margin: 3% 5%;
    width: 90%;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 3px #832865;
    -moz-box-shadow: 4px 4px 3px #832865;
    box-shadow: 4px 4px 3px #832865;
    position: relative;
}
.slider .arrow {
    position: absolute;
    top: 40%;
    height: 100%;
    width: 10%;
    cursor:pointer;
}
.slider .arrow.left {    left: 0;}
.slider .arrow.right {  right: 0;}
.slider .arrow img {
    width: 50%;
    margin-left: 25%;
}
/*.slider .arrow span {
    font-size: 60px;
    color: #e60078;
}*/
.slider .arrow:hover img{
    -webkit-transform:scale(1.2);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.2s;
    -moz-transform:scale(1.2);
}
/* Gallery */
.gallery {
  position: relative;
  padding: 0;
  margin: 0 auto;
  min-width: 100%;
}

.picture.ng-hide-add,
.picture.ng-hide-remove {
/*  -webkit-transition: all linear 0.5s;
  -moz-transition: all linear 0.5s;
  -o-transition: all linear 0.5s;
  transition: all linear 0.5s;*/
  display: block!important;
}
.picture.ng-hide-add.ng-hide-add-active,
.picture.ng-hide-remove {
  opacity: 0;
}
.picture.ng-hide-add,
.picture.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

.picture img.picture{
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
    border: 5px solid #e1007a;
    -webkit-box-shadow: 2px 2px 10px #80325C;
    -moz-box-shadow: 2px 2px 10px #80325C;
    box-shadow: 2px 2px 10px #80325C;
}

.gallery .arrow {
    position: absolute;
    top: 40%;
    height: 100%;
    width: 10%;
    cursor:pointer;
}
.gallery .arrow.left {    left: -10%;}
.gallery .arrow.right {  right: -10%;}
.gallery .arrow img {
    width: 50%;
    margin-left: 25%;
}
/*.gallery .arrow span {
    font-size: 60px;
    color: #e60078;
}*/
.gallery .arrow:hover img{
    -webkit-transform:scale(1.2);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.2s;
    -moz-transform:scale(1.2);
}
/* Shelf and items */
.shelf {
  position: relative;
}
.shelf .item{
    margin: 5% 0;
}
.shelf div.videos {
    cursor: pointer;
}
.prevnext {
    height: 50px;
}
.prevnext .arrow{
    position: relative;
    float: left;
    width: auto; height: auto; padding: 0; margin: 0;
    top: initial; left: initial; right: initial;
}
.prevnext .arrow.right{
    float: right;
}
.prevnext .arrow img{
    width: 24px; height: 44px; margin:3px 10px; padding:0;
}
.shelf div {
    position: relative;
/*    cursor: pointer;*/
}
.shelf .player {
    position: absolute;
    width: 20%;
    right: 7%;
    bottom: 4%;
}
.shelf .download {
    position: absolute;
    width: 20%;
    right: 10%;
    bottom: 16%;
}
.shelf .play {
    position: absolute;
    width: 18%;
    right: 10%;
    bottom: 20%;
}
.shelf .item.partners{
    margin: 3% 0;
}
.shelf .partners img{
    border-radius: 10px;
}
.shelf .partners img.levelA{ border-color: #FFD700; }
.shelf .partners img.levelB{ border-color: #C0C0C0; }
.shelf .partners img.levelC{ border-color: #CD7F32; }
.shelf .resolution {
    position: absolute;
    width: 30%;
    right: 12%;
    top: 10%;
}
.shelf .resolution.desktop {    top: 25%;}
.shelf .resolution.wide {    top: 40%;}
.shelf div:hover .player, .shelf div:hover .download, .shelf a:hover .resolution, .shelf div:hover .play, .shelf a:hover .store {
    -webkit-transform:scale(1.2);
    -webkit-transition-property:scale;
    -webkit-transition-duration:0.2s;
    -moz-transform:scale(1.2);
}
.shelf .store {
position: absolute;
width: 13%;
right: 11%;
top: 4%;
}
.shelf .store.store1 {top: 4%;}
.shelf .store.store2 {top: 30%;}
.shelf .store.store3 {top: 55%;}
.shelf .store.store4 {top: 57%;right: 26%;width: 12%;}
.shelf .thumb{
    width: 90%;
    margin: 0 auto;
    border: 5px solid #e1007a;
    -webkit-box-shadow: 2px 2px 10px #80325C;
    -moz-box-shadow: 2px 2px 10px #80325C;
    box-shadow: 2px 2px 10px #80325C;
}

.shelf .title {
    margin-left: auto;
    margin-right: auto;
    display: block;
    -webkit-transform: skew(-3deg); 
   -moz-transform: skew(-3deg); 
   -o-transform: skew(-3deg);
   transform: skew(-3deg);
    width: 70%;  margin: -4% 0 0 0;
}
.shelf .title.long {
    width: 75%;
}
.shelf .title.extralong {
    width: 100%;
}

.shelf .title h3 {
    color: #0c9dde;
    font-weight: bold;
    font-family: "Fondamento", sans-serif;
    font-size: 30px;
    margin: 0 5px;
    line-height: inherit;
    padding-left: 16%;
}
.shelf .title.long h3 {
    font-size: 24px;
}
.shelf .title.extralong h3 {
    font-size: 22px;
}

.ocean .shelf .title {
    background-color: #f9e3b1;
    -webkit-box-shadow: inset 0px 0px 60px 7px #F6CC73;
    -moz-box-shadow: inset 0px 0px 60px 7px #F6CC73;
    box-shadow: inset 0px 0px 60px 7px #F6CC73;
}
.gardenia .shelf .title {
    background-color: #fdf4f7;
    -webkit-box-shadow: inset 0px 0px 60px 7px #f8c9db;
    -moz-box-shadow: inset 0px 0px 60px 7px #f8c9db;
    box-shadow: inset 0px 0px 60px 7px #f8c9db;
}
.shelf img.deco {
    position: absolute;
    bottom: -50%;
    left: -8%;
    width: 26%;
}
/* Tabs */
.tab li {
    float: right;
}
.tab li a {
    font-weight: bold;
    font-size: 18px;
}
.gardenia .tab li a:hover, .gardenia .tab li.active a {
    background-color: #00BBF2 !important;
    color: #fdf169 !important;
}
.ocean .tab li a:hover, .ocean .tab li.active a {
    background-color: #A36DDD !important;
    color: #ffffff !important;
}
/*Media Query - Contents*/
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
    .slide .title h3 { font-size:24px; }
    .slider img.deco {right: -8%;}
    .slide {margin: 0 5%; width: 90%;}
    .slide p { font-size: 13px; line-height: 16px; margin: 0 0 2px;}
    .slide p:first-letter { font-size: 18px;}
    .slide img.picture{ border: 2px solid #e60078; margin: 2% 5%; border-radius: 3px;-webkit-box-shadow: 1px 1px 1px #832865; -moz-box-shadow: 1px 1px 1px #832865; box-shadow: 1px 1px 1px #832865;}
    .shelf .title.long h3 { font-size: 13px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .slide .title h3 { font-size:26px; }
    .slide {margin: 0 8%; width: 84%;}
    .slide p { font-size: 15px; line-height: 18px; margin: 0 0 5px;}
    .slide p:first-letter { font-size: 21px}
    .slide img.picture{ border: 4px solid #e60078; margin: 2% 5%; border-radius: 4px;-webkit-box-shadow: 2px 2px 2px #832865; -moz-box-shadow: 2px 2px 2px #832865; box-shadow: 2px 2px 2px #832865;}
    .shelf .title.long h3 { font-size: 17px; }
}

    .sm .slide .title h3 { font-size:24px; }
    .sm .slider img.deco {right: -8%;}
    .sm .slide {margin: 0 5%; width: 90%;}
    .sm .slide p { font-size: 13px; line-height: 16px; margin: 0 0 2px;}
    .sm  .slide p:first-letter { font-size: 21px;}
    .sm .slide img.picture{ border: 2px solid #e60078; margin: 2% 5%; border-radius: 3px;-webkit-box-shadow: 1px 1px 1px #832865; -moz-box-shadow: 1px 1px 1px #832865; box-shadow: 1px 1px 1px #832865;}
    .sm .shelf .title.long h3 { font-size: 13px; }
    .md .slide .title h3 { font-size:26px; }
    .md .slide {margin: 0 8%; width: 84%;}
    .md .slide p { font-size: 15px; line-height: 18px; margin: 0 0 5px;}
    .md  .slide p:first-letter { font-size: 23px}
    .md .slide img.picture{ border: 4px solid #e60078; margin: 2% 5%; border-radius: 4px;-webkit-box-shadow: 2px 2px 2px #832865; -moz-box-shadow: 2px 2px 2px #832865; box-shadow: 2px 2px 2px #832865;}
    .md .shelf .title.long h3 { font-size: 17px; }

/* Layer Hints */
.Layer{
    z-index:20000;
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.LayerBG{
    z-index:20001;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.9;
    filter:alpha(opacity=80);
    background-color:#fff;
}
.LayerLoad{
    z-index:20005;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#fff;
}
.LayerBox{
    position: relative;
    z-index:20002;
    margin:130px auto;
    padding: 10px;
    width:500px;
    height: 320px;
    text-align:center;    
    border:5px solid #f54dbe;
    -moz-border-radius:6px; /* gecko */
    -webkit-border-radius:6px; /* webkit */
    border-radius:6px; /* CSS3 standard */
    -khtml-border-radius:6px; /* old konkeror */
    background:#fedefb no-repeat;
    visibility: visible !important;
}
.LayerText{
    padding-top: 15px;
    padding-bottom:15px;
    font-size:23px;
    color:#f54dbe;
}
.Layer button.close {
    position: absolute;
    opacity: 1;
    font-size: 30px;
    top: -15px;
    right: -15px;
    background-color: #f54dbe;
    border-radius: 30px;
    line-height: 15px;
    padding: 15px;
    color: #fff; 
}

/* ANIMATIONS
============================================================================= */

#pageBox.ng-leave 	{ z-index:999; }
#pageBox.ng-enter	{ z-index:888; }

#footer {z-index: 1031;background-color: #6888fc;}

/* page specific animations ------------------------ */

/* home -------------------------- */
/*.page.ng-leave         {
    -webkit-transform-origin: 0% 0%;
	-webkit-animation: rotateFall 1s both ease-in;
	-moz-transform-origin: 0% 0%;
	-moz-animation: rotateFall 1s both ease-in;
	transform-origin: 0% 0%;
	animation: rotateFall 1s both ease-in;
}
.page.ng-enter 		{  
    -webkit-animation:scaleUp 0.5s both ease-in;
	-moz-animation:scaleUp 0.5s both ease-in;
	animation:scaleUp 0.5s both ease-in;    
}*/

/* about ------------------------ */
/*.page.ng-leave        {
    -webkit-animation:slideOutLeft 0.5s both ease-in;
	-moz-animation:slideOutLeft 0.5s both ease-in;
	animation:slideOutLeft 0.5s both ease-in;   
}
.page.ng-enter 		{  
    -webkit-animation:slideInRight 0.5s both ease-in;
	-moz-animation:slideInRight 0.5s both ease-in;
	animation:slideInRight 0.5s both ease-in;    
}*/

/* contact ---------------------- */
/*.page.ng-leave      {
    -webkit-transform-origin: 50% 50%;
	-webkit-animation: rotateOutNewspaper .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: rotateOutNewspaper .5s both ease-in;
	transform-origin: 50% 50%;
	animation: rotateOutNewspaper .5s both ease-in;
}
.page.ng-enter 		{ 
    -webkit-animation:slideInUp 0.5s both ease-in;
	-moz-animation:slideInUp 0.5s both ease-in;
	animation:slideInUp 0.5s both ease-in;  
}*/

/* rotate and fall */
@-webkit-keyframes rotateFall {
	0% { -webkit-transform: rotateZ(0deg); }
	20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
	40% { -webkit-transform: rotateZ(17deg); }
	60% { -webkit-transform: rotateZ(16deg); }
	100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
	0% { -moz-transform: rotateZ(0deg); }
	20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
	40% { -moz-transform: rotateZ(17deg); }
	60% { -moz-transform: rotateZ(16deg); }
	100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
	0% { transform: rotateZ(0deg); }
	20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
	40% { transform: rotateZ(17deg); }
	60% { transform: rotateZ(16deg); }
	100% { transform: translateY(100%) rotateZ(17deg); }
}

/* scale up */
@keyframes scaleUp {
	from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
	from 		{ opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
	from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(100%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(100%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(100%); }
	to 		{ -webkit-transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
	from 	{ transform:translateY(100%); }
	to 		{ transform: translateY(0); }
}
@-moz-keyframes slideInUp {
	from 	{ -moz-transform:translateY(100%); }
	to 		{ -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
	from 	{ -webkit-transform:translateY(100%); }
	to 		{ -webkit-transform: translateY(0); }
}
/* slide in from the bottom */
@keyframes slideInDown {
	from 	{ transform:translateY(-100%); }
	to 		{ transform: translateY(0); }
}
@-moz-keyframes slideInDown {
	from 	{ -moz-transform:translateY(-100%); }
	to 		{ -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInDown {
	from 	{ -webkit-transform:translateY(-100%); }
	to 		{ -webkit-transform: translateY(0); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-100%); }
}

/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
	to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
	to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
	to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
/*Blink */
@-webkit-keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/*Blink */
@-webkit-keyframes fadeOutIn {
    0% { opacity: 1; }
    30% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fadeOutIn {
    0% { opacity: 1; }
    30% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeOutIn {
    0% { opacity: 1; }
    30% { opacity: 0; }
    100% { opacity: 1; }
}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }


.page {
  -webkit-transition:background ease 1.2s;
  -moz-transition:background ease 1.2s;
  -o-transition:background ease 1.2s;
  transition:background ease 1.2s;
}
#pageBox.ng-leave .page,
#pageBox.ng-enter .page {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}
#pageBox.ng-enter {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:0.4s;
    -moz-animation-duration:0.4s;
    animation-duration:0.4s;
    
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
/*#pageBox.ng-enter .page, #pageBox.ng-leave .page{
  -webkit-transition:none;
  transition:none;
}*/

#pageBox.ng-leave {
    opacity:1;  /* make things invisible upon start */
    -webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeOut ease-in 1;
    animation:fadeOut ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:0.3s;
    -moz-animation-duration:0.3s;
    animation-duration:0.3s;
    
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* Modal */
.modal-backdrop.am-fade {
  opacity: .7;
  transition: opacity .15s linear;
  &.ng-enter {
    opacity: 0;
    &.ng-enter-active {
      opacity: .7;
    }
  }
  &.ng-leave {
    opacity: .7;
    &.ng-leave-active {
      opacity: 0;
    }
  }
}
.modal button.close {
    position: absolute;
    opacity: 1;
    font-size: 40px;
    top: -20px;
    right: -20px;
    background-color: #e1007a;
    border-radius: 40px;
    line-height: 20px;
    padding: 20px;
}
.modal-content {
background-color: #e1007a;
}

/* Language optimization */
body.pl ul.navbar-nav li a span, body.pl .bread h1{
    text-transform: none;
    letter-spacing: -2px;
}
body.pl .shelf .title.extralong h3 {
    font-size: 20px;
}
body.pl .shelf .title.long h3 {
    font-size: 22px;
}
body.pl .shelf .title h3 {
    font-size: 24px;
}
body.pl * {
    font-family: "McLaren", cursive !important;
}
body.el * {
    text-transform: none !important;
}