@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);         
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,300|Julius+Sans+One);
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');




/* device width guides */

#px320, #px480, #px768, #px1024, #px1280, #px1366, #px1670 { position: absolute;
         top: 0;
         width: 1px;
         height: 100%;
         z-index: 9999; }

#px320 { left: 320px; background: green;  }
#px480 { left: 480px; background: orange;  } 
#px768 { left: 768px; background: yellow;  }
#px1024 { left: 1024px; background: red;  }
#px1280 { left: 1280px; background: cyan;  }  
#px1366 { left: 1366px; background: white;  } 
#px1670 { left: 1660px; background: blue;  } 

#px768h { position: absolute;
         top: 768px;
         left: 0;
         height: 1px;
         width: 100%;
         z-index: 9999;
         background: red;   } 

#px320h { position: absolute;
         top: 320px;
         left: 0;
         height: 1px;
         width: 100%;
         z-index: 9999;
         background: cyan;   } 


/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: '';
                                                         content: none; }
table { border-collapse: collapse;
        border-spacing: 0; }


/* END CSS RESET */

body, html { text-align: center;
             margin: 0 auto; 
             width: 100%; 
             height: 100%;
             min-height: 100%; }


body { overflow: hidden;
  font-family: oswald, "trebuchet ms", sans-serif;
  color: #efefef;
     color: #ccc; 
  line-height: 24px; 
  font-weight: 300; 
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden; }


h1 {  font-size: 80px;
               line-height: 60px;
               letter-spacing: 40px;
               text-transform: uppercase; 
               font-weight: 300;
               font-family: 'Anton', sans-serif;
               font-family: 'Josefin Sans', sans-serif;

               /*text-transform: lowercase;*/

               font-weight: 300;
               padding: 0;
               padding-left: 40px;
               margin: 0;
                color: #b2b9ab;
               opacity: 0.5;  }

h1 a {  color: #fff; }


h2 { text-transform: uppercase;
     color: #fff; 
     font-family: 'Josefin Sans', sans-serif; 
               font-size: 30px;
               font-size: 26px;
               line-height: 26px;

               font-weight: 300;
               padding: 12px 0 12px 0;
               margin: 0;
               letter-spacing: 6px; }


h3 { font-weight: 300; 
     font-size: 18px; 
     line-height: 22px; 
    /* text-transform: uppercase;*/
     padding: 0 0 10px 0; 
     letter-spacing: 1px;
     color: #ba9993; 
     color: #ccc; 
     }


p  { font-family: oswald, 'courier new', courier, sans-serif;
     font-size: 14px; 
     line-height: 22px;
     padding: 0 0 30px 0; 
     color: #eaeaea; 
     letter-spacing: 1px;}

p b { font-weight: 400; } 

a { color: #ba9993;
           color: #b2b9ab;
        color: #ccc;
    text-decoration: none; 
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
     transition: 0.5s ease-out;
     border-bottom: 1px solid transparent;
     color: #fff; 
    			}

#sequence p a:hover, 
#sequence p a:active  { color: #fff; 
    			text-decoration: none; 
    			border-bottom: 1px solid #fff; }


a:focus { outline: none; }

.sup { font-size: 10px;
       line-height: 10px;
       vertical-align: top; }


#sequence br {  display: block;
                margin: 6px 0 0 0; }


.vita #sequence br {  display: block;
                      margin: 0; }

#sequence .home br {  display: inline;  }


#sequence {
  position: absolute;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  max-width: 2400px;
  max-height: 1600px;
  min-width: 320px; 
  min-height: auto;
  width: 100%;
  height: 100%;
  padding-bottom: 140px; /* adjust according to footer height */  
  background: #262626; 
  background-image: url(../images/DSCF4146AS.jpg);
  background-position: 0 -80px ;
  background-size: cover;  }



body.buy #sequence  {  background-image: url(../images/gruenberg-rummel.jpg); }
body.buy #sequence  {  background-image: url(../images/DSCF2842BB.jpg); }


body.vita #sequence  {   background-image: url(../photos/secret-gate.JPG);  }
body.vita #sequence  {   background-image: url(../images/bg-gruenberg-5.jpg);  }



#sequence p { width: 50%;
    	      margin: 0 auto;
   	      text-align: center; }


#sequence ul {   width: 100%;
                 height: 100%; }

#sequence > .sequence-canvas {
  width: 100%;
  height: 100%; }

#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;   }

#sequence > .sequence-canvas li > * {
  position: absolute;
 -webkit-backface-visibility: hidden;   }


#sequence .sequence_bg {
  height: 100%;
  width: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  vertical-align: middle;
  z-index: 7;
  background-repeat: no-repeat;
  background-size: contain; }


nav {  position: absolute;
  top: 1%;
  top: 23px;
  left: 0; 
  right: 0;	
  width: 100%;
  height: 120px;
  margin: 0 auto;
  text-align: center; 
  z-index: 9000;
  }



nav .sequence-pagination div.logo {
                         position: absolute; 
                         top: 75%;
  			  width: 100%;
  			  height: 126px;
  			  height: auto;
  			  display: block;
			  text-align: center;
			  margin: 0 auto;
			  cursor: pointer;
			  float: none;
			  background: none;  
			    }


#main_menu, 
#main_menu:hover, 
#main_menu:active { position: fixed;
           left: -85px;
           top: 25px;
           top: 85px;
           text-align: right;
           padding: 10px 8px 7px 5px; 
           background: transparent;
           width: 110px;
           height: auto; 
	  -webkit-transition: all;
	  -moz-transition: all;
	  -ms-transition: all;
	  -o-transition: all;
	   transition: all;
	  -webkit-transition-duration: 1s;
	  -moz-transition-duration: 1s;
	  -ms-transition-duration: 1s;
	  -o-transition-duration: 1s;
	   transition-duration: 1s; 
  	  -webkit-transition-delay: 0.3s;
  	  -moz-transition-delay: 0.3s;
	  -ms-transition-delay: 0.3s;
  	  -o-transition-delay: 0.3s;
  	   transition-delay: 0.3s;
           z-index: 8889; }


body.sub #main_menu, 
body.sub #main_menu:hover, 
body.sub #main_menu:active { top: 45px; } 


#main_menu:hover, #main_menu:active {  left: -5px;
                                   padding: 10px 8px 7px 5px; 
                                   background: #212121;
                                   background: transparent; }


#main_menu a,
#main_menu a.active { width: 110px;
             height: 28px;
             display: block; 
             cursor: pointer;    
             overflow: hidden; 
             font-size: 13px;
             line-height: 28px;
             color: #ba9993;
             letter-spacing: 1px; 
             font-weight: 300;
          -webkit-transition: all;
	  -moz-transition: all;
	  -ms-transition: all;
	  -o-transition: all;
	  transition: all;
	  -webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -ms-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
	  transition-duration: 0.4s; 
          padding: 0 8px 0 2px; }

#main_menu a,
#main_menu a.active,
.addthis a { font-size: 13px;
             line-height: 28px;
             color: #b2b9ab; }

#main_menu a:hover, 
#main_menu a:active,
#main_menu a.active,
.addthis a:hover, .addthis a:active {  color: #6a3a3a; 
                                       color: #fff;  }




body.sub #main_menu a:hover, 
body.sub #main_menu a:active,
body.sub .addthis:hover,
body.sub .addthis:active {  background:  #6a3a3a;
                            background:  #0f0f0f; } 

#main_menu a span {  width: 28px;
                   height: 28px;
                   display: block; 
                   cursor: pointer;    
                   overflow: hidden;
                   float: right;
                   margin: 0 0 0 10px;  }


#main_menu #vita span { background: url(../images/menu_icons-new_01.png) no-repeat -28px 0; }
#main_menu #kontakt span { background: url(../images/menu_icons_02.png) no-repeat -28px 0; }             
#main_menu #cart span { background: url(../images/menu_icons-new_04.png) no-repeat -28px 0; }



#main_menu #vita span:hover { background: url(../images/menu_icons-new_01.png) no-repeat 0 0; } 
#main_menu #kontakt span:hover { background: url(../images/menu_icons_02.png) no-repeat 0 0; }
#main_menu #cart span:hover { background: url(../images/menu_icons-new_04.png) no-repeat 0 0;} 



#top_menu, 
#top_menu:hover, 
#top_menu:active { position: fixed;
           top: -30px;
           left: 13px;
           text-align: left;
           padding: 10px 0 10px 0; 
           background: transparent;
           width: 95%;
           width: 100%;
           height: 40px; 
	  -webkit-transition: all;
	  -moz-transition: all;
	  -ms-transition: all;
	  -o-transition: all;
	   transition: all;
	  -webkit-transition-duration: 0.5s;
	  -moz-transition-duration: 0.5s;
	  -ms-transition-duration: 0.5s;
	  -o-transition-duration: 0.5s;
	   transition-duration: 0.5s; 
  	  -webkit-transition-delay: 0.3s;
  	  -moz-transition-delay: 0.3s;
	  -ms-transition-delay: 0.3s;
  	  -o-transition-delay: 0.3s;
  	   transition-delay: 0.3s;
           z-index: 9000; 
           background: transparent url(../images/menu_icons-new_06.png) no-repeat bottom left; 
           display: none; }


#top_menu:hover, #top_menu:active {  top: 0;
				 	height: 30px; 
           				padding: 10px 0 10px 0; 
				     background: #0f0f0f url(../images/menu_icons-new_06.png) no-repeat center left;   }



#top_menu a { float: left;
 		display: block; 
		list-style: none;
                width: auto;
                padding: 4px 12px 10px 1px;
                margin: 0;
		letter-spacing: 2px;
                font-weight: 300;
               	font-size: 12px;
        	line-height: 12px;
                text-align: center; 
                color: #ba9993;}

#top_menu a:hover,
#top_menu a:active { color: #fff; }

#top_menu a:first-child { margin: 0 0 0 50px;   }


#top_menu a:after { content: " ::";
                    padding: 0 0 0 10px;  }

#top_menu a:last-child:after { content: ""; }




/************* home page ***************/


#sequence .links,
#sequence .animate-in .links,
#sequence .animate-out .links {
   top: 25%;
  left:0%;
  right: 0%;
  width: 100%;
  width: auto;
  width: auto;
  height: auto; 
  padding: 15px;
  z-index: 10;
  color: #fff;
  z-index: 10; 
  opacity: 1;
  vertical-align: middle;
  text-align: center;}

body.home #sequence .links,
body.home #sequence .animate-in .links,
body.home #sequence .animate-out .links {
   top: 30%;
   top: 26%;
  left:0%;
  right: 0%;
  width: 100%;
  width: auto;
  width: auto;
  height: auto; 
  padding: 15px;
  z-index: 10;
  color: #fff;
  z-index: 10; 
  opacity: 1;
  vertical-align: middle;
  text-align: center; }

#sequence h2 { padding: 12px 0 12px 0;
               margin: 0; 
               font-size: 32px; }


#sequence h2 a { text-decoration: none;
                 color: #fff;  
                 opacity: 0.7; 
                 line-height: 32px;}


#sequence h2 a.new:after { content: '(NEW)';
  			position: absolute;
  			padding: 0 0 0 5px;
  			width: 0; 
  			height: 0;
  			text-decoration: none;
                        font-size: 20px;
                        line-height: 25px;
			font-family: oswald, sans-serif;
	                font-weight: 300;
	                color: #fff;
                        letter-spacing: 0; }


#sequence h2 a:hover,
#sequence h2 a:active { text-decoration: none;
                        color: #ba9993; 
                 color: #fff;  
                 opacity: 1; }


hr { height: 1px;
     border: 0;
     color: #eaeaea;
     background-color: #eaeaea;
     width: 60%;
     opacity: 0.3;  }




/********** End Homepage ********/


/************************ VITA ******************/


.vita div.links { width: 55%; 
	    max-width: 45%;
	    max-width: 55%;
            margin: 0 auto;
            text-align: center;}


.vita div.links img { width: 20%;
                      max-width: 300px; 
	              height: auto;
                      /*float: left; */  
                      margin: 10px 0 0 0;
                      border: 1px solid #ccc; }



.vita div.links a { color: #fff }


.vita hr { width: 100%; 
           margin: 0; }

.vita div.links div { width: 42%;
    height: auto;
    text-align: center; 
    margin: 10px 0 0 0; }

.vita div.links div.first { float: left;  }
.vita div.links div.second { float: right;  }

.vita #sequence p {  width: 100%;  }

.vita p.clear { height: 0;
          margin: 0;
          padding: 0 }



/************************ END VITA ******************/

/************************ SUB PAGES FOTOS ******************/


body.sub { overflow: auto;
           text-align: center; 
           line-height: 24px; 
           background: #212121;
           background: url(../images/bg-gruenberg-2.jpg) repeat;
           height: 100%; }


body.sub hr { color: #fff;
              background-color: #fff;  }


body.sub div.logo h1 { width: 50%;
                       margin-left: 25%; 
                       margin-right: 25%;
	  	       height: 126px;
                       padding: 3% 0 0 0;
                       padding-left: 20px;
                        }

body.sub div.logo h1 a {    color: #b2b9ab;   }


body.sub nav { width: 50%;
               width: 60%;
               padding: 0 20%;
               height: 20px;
		text-align: center;
       		margin: 0 auto; 
      		margin-top: 180px; 
                border-bottom: 1px solid #7d7d7d;
               padding-bottom: 6px;}


body.sub hr.nav-hr { height: 1px;
              border: 0;
              color: #fff;
              background-color: #fff;
              margin: 0 15% 0 15%;
              padding: 0;
              width: 70%; 
              margin-top: -2px;
              display: none; }


body.sub nav ul {  
                   padding: 0; 
		  margin: 0;
		  text-align: justify; 
                  height: 20px; }

body.sub nav li { display: inline-block; 
		  list-style: none;
	          margin: 0;
                  letter-spacing: 2px;
             	  font-size: 13px;
        	  line-height: 13px;
                  text-align: center;  }

body.sub nav li a { display: block; 
                    height: 16px;
                    padding: 4px 16px 3px 16px; 
		    color: #7d7d7d;
                    border-bottom: 1px solid transparent; }


body.sub nav #line { padding-left: 100%; 
		     background: none; }


body.sub nav li a:hover, 
body.sub nav li a:active, 
body.sub nav li a.active { color: #6a3a3a; 
                           color: #fff; 
                           border-bottom: 1px solid #fff; 
                         }

body.sub nav a.active { cursor: default;  }


body.sub p a:hover, 
body.sub p a:active, 
body.sub p a.active { border-bottom: 1px solid #ad9c89; }


body.sub h2  {  /*font-size: 28px;
               letter-spacing: 5px;*/

               line-height: 50px;
               padding: 0;
               margin: 30px 0 0 0;
               color: #ccc;          }


#wrapper { min-height: 100%;
	   position: relative; }


div.fotos { width: 75%;
            height: 100%;
            height: auto;
            display: inline-block;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 50px;
            padding: 0 0 65px 0;
            padding-bottom: 135px; /*height incl. padding of footer + extra padding  */   }


.fotos div,
.fotos div.wide { margin: 10px 15px 10px 15px;
      	     width: 20%;
             max-width: 412px; /* added px for image border */
             height: auto;
             position: relative; /*important for img title display*/
             display: inline-block; }


.fotos img { width: 100%;
             max-width: 700px;
             height: auto;
             border: 6px solid #fff; }



.fotos div.square { width: 20%;
                    max-width: 250px;
                    height: auto;  }


.fotos div.portrait { margin: 10px;
                      width: 20%;
                      max-width: 200px;
                      height: auto; }

.fotos div.wide { width: 30%;
                  max-width: 400px;
                  height: auto;  }


.fotos div p { padding: 3px;
               margin: 0;
               color: #8f8f8f;
               color: #ccc;
		         font-family: 'courier new', courier, monospace;
			  font-family: oswald, sans-serif;
			  font-size: 13px; 
			  line-height: 14px; }




#foto-text { margin: 0 auto;
             text-align: center;
             padding: 20px 0 60px 0; 
             width: 100%; 
             min-width: 100%; 
             clear: left; 
             float: none; }


#foto-text hr { width: 100%;
                margin: 25px auto;} 

#foto-text p { color: #474747; 
               color: #ddd; 
               padding: 5px 0 15px 0; }

#foto-text h2 {  margin: 0;
                 padding: 0;    }


/********************** GIFs  ***********************/


div.gifs { width: 80%;
           margin-left: 10%;
           margin-right: 10%;
           text-align: center;
           position: relative;
padding-bottom: 135px; /*height incl. padding of footer + extra padding  */   }


div.gifs2 { padding: 10px 20px; 
            width: auto;
            height: auto;
            max-width: 600px;
            display: inline-block; 
            margin: 0 auto;
            text-align: center; }

div.gifs2 img {max-width: 600px;  }







div#impress { color: #474747;
     color: #ccc; 
     font-size: 14px; 
     line-height: 18px;
     padding: 0 0 60px 0; 
     width: 60%;
     margin: 0 auto;
     text-align: center;}



a.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 15px;
    text-decoration: none;

    background: #565656; 
    border: 2px solid #565656;
    -webkit-border-radius: 50% ;
    -moz-border-radius: 50% ;
    border-radius: 50% ;
    padding: 4px;
    width: 25px;
    height: 25px;
    display: none;
    z-index: 9000; }

a.back-to-top:hover { border: 2px solid #4d5247; 
                      background: #b2b9ab;
                      background: #4d5247; }

a.back-to-top img { width: 25px;
                    height: 25px;} 


#sequence a.back-to-top { display: none; }


/************************ END SUB PAGES ******************/




/*************** social ******************/

.addthis, 
.addthis:hover, 
.addthis:active { position: fixed;
           left: -133px;
           bottom: 0px;
           text-align: right;
           padding: 10px 5px 0 5px; 
           background: transparent;
           width: 160px;
           height: 125px; 
	  -webkit-transition: all;
	  -moz-transition: all;
	  -ms-transition: all;
	  -o-transition: all;
	   transition: all;
	  -webkit-transition-duration: 1s;
	  -moz-transition-duration: 1s;
	  -ms-transition-duration: 1s;
	  -o-transition-duration: 1s;
	   transition-duration: 1s; 
  	  -webkit-transition-delay: 0.3s;
  	  -moz-transition-delay: 0.3s;
	  -ms-transition-delay: 0.3s;
  	  -o-transition-delay: 0.3s;
  	   transition-delay: 0.3s;
           z-index: 9000;    }

.addthis:hover, .addthis:active {  left: -5px;
                                   padding: 10px 5px 0 5px; }


.addthis a { width: 160px;  /* colors same as main menu above */
             height: 28px;
             display: block; 
             cursor: pointer;    
             overflow: hidden; 
             letter-spacing: 1px; 
          -webkit-transition: all;
	  -moz-transition: all;
	  -ms-transition: all;
	  -o-transition: all;
	  transition: all;
	  -webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -ms-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
	  transition-duration: 0.4s; }



.addthis a span {  width: 28px;
                   height: 28px;
                   display: block; 
                   cursor: pointer;    
                   overflow: hidden;
                   float: right;
                   margin: 0 0 0 10px; }


.addthis_button_facebook span { background: url(../images/social-icons-add_this_v2_02.png) no-repeat -28px 0;}
.addthis_button_twitter span { background: url(../images/social-icons-add_this_v2_01.png) no-repeat -28px 0;  }             .addthis_button_google_plusone_share span { background: url(../images/social-icons-add_this_v2_04.png) no-repeat -28px 0; }
.addthis_button_compact span { background: url(../images/social-icons-add_this_v2_06.png) no-repeat -28px 0; }


.addthis_button_facebook span:hover { background: url(../images/social-icons-add_this_v2_02.png) no-repeat 0 0; } 
.addthis_button_twitter span:hover { background: url(../images/social-icons-add_this_v2_01.png) no-repeat 0 0; }
.addthis_button_google_plusone_share span:hover { background: url(../images/social-icons-add_this_v2_04.png) no-repeat 0 0;} 
.addthis_button_compact span:hover { background: url(../images/social-icons-add_this_v2_06.png) no-repeat 0 0; }

body.sub .addthis a:hover, 
body.sub .addthis a:active {  background: #fff; 
                              background: none;}


/*************** END social ******************/


#footer { margin: 0;
          width: 100%;

          z-index: 10; 
   
          height: 80px; 
 
          padding: 35px 0; 
          padding: 25px 0; 
	position:absolute;
	bottom:0;
	left:0;  }


body.sub #footer {  border-top: 1px solid #565656;  }

.sequence #footer { position: absolute;
          left: 0;
          right: 0;
	  bottom: 0; }




#footer p { padding: 60px 0 0 0;
            padding: 30px 0 0 0;
            font-size: 13px; 
            line-height: 13px;
            letter-spacing: 2px;
            font-weight: 300; 	 }

#footer a { text-decoration: none; 
            color: #fff;}

#footer a:hover,
#footer a:active,
#footer a.active { text-decoration: none; 
                   color: #eaeaea;
                   border-bottom: 1px solid #fff;
                   color: #fff; }

#footer a.active { cursor: default; }

.mobile-only { display: none; }





#footer #icons { width: 40px;
                  height: 40px;
		width: 95px;
                  height: 40px;
                  margin: 0 auto;
                  text-align: center; }


#footer a.icon { border-bottom: none;
                text-decoration: none;
		padding: 0;
                background: #565656; 
                background: transparent url(../images/white50.png) repeat;
                border-radius: 50%;
                margin: 0;
                display: block;
                width: 40px;
                height: 40px; }

#footer a.icon:hover {  background: #4d5247; }

#footer a.icon.fb { float: left; }

#footer a.icon.insta { float: right; }





/*Opera Fix thanks to Maleika (Kohoutec)*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/* thank you Erik J - negate effect of float*/ }



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.ui-page { -webkit-backface-visibility: hidden; }

.clear { clear: both; } 

.large-only { display: none; }

.no-large { display: none; }



@media all and (max-width: 1600px) {

.no-small { display: none; }
.small { display: inline; }


nav .sequence-pagination div.logo { top: 20%; }

#sequence .animate-in .links {  top: 19%; }




body.sub nav { width: 35%;
               width: 50%;
               width: 66%;
               padding: 0 15%;
      	       margin-top: 175px;
               padding-bottom: 5px; }



body.sub nav li a { display: inline;
        width: auto;
        width: 16%;
        height: 16px;
        float: none;
        padding: 4px 16px 2px 16px; }




.fotos div.portrait { width: 27%;
             max-width: 350px;
             height: auto; }

div.fotos { width: 70%; }

.vita div.links { width: 75%; 
	          max-width: 75%; }

}



@media all and (max-width: 1366px) {


nav .sequence-pagination div.logo { top: 40%; }

#sequence .animate-in .links {  top: 15%; }

#sequence h2 { font-size: 28px; 
               line-height: 22px;  }




@-moz-document url-prefix() { 
  #sequence h2 {
      line-height: 18px;
  }
}


}


@media all and (max-width: 1281px) {


#top_menu { display: none; }


body.home #sequence .links,
body.home #sequence .animate-in .links,
body.home #sequence .animate-out .links {

  top: 20%;
  left:0%;
  right: 0%;
  width: 100%;
  padding: 10px; }




h1 { width: 70%;                        
     margin-left: 15%; 
                       margin-right: 15%;
	  	       height: 120px;
                       padding: 1% 0 0 0;
                       padding-left: 10px;
                       font-size: 60px;
                       letter-spacing: 30px;  }


nav .sequence-pagination div.logo { top: 35%; }



#sequence .animate-in .links {  top: 16%; }



#sequence h2 { font-size: 28px; 
               line-height: 24px; }


#sequence h2 a { line-height: 24px;}



body.sub h2 { font-size: 24px;
              line-height: 14px;
              margin-top: 10px;  }




#sequence p { width: 75%; 
              font-size: 14px;
              line-height: 18px;}



body.sub nav { width: 60%;
               width: 70%;
               width: 88%;
               padding: 0 5%;
      	       margin-top: 145px;
               padding-bottom: 5px; }


body.sub nav ul { text-align: center; }

body.sub nav li { display: inline-block; }


body.sub nav #line { display: none; }


hr { width: 60%;}



div.fotos { width: 85%; }

.fotos div.portrait { margin: 10px;
                      width: 20%;
                      max-width: 150px;
                      height: auto; }


.vita div.links { width: 95%; 
	          max-width: 95%; }


.vita div.links div { width: 40%; }


}




@media all and (max-width: 768px)  {

.no-mobile { display: none; }
.mobile-only { display: block; }
.small { display: none; }


#sequence {  background-position: 0 -200px ;}

#sequence p { width: 90%; 
                          font-size: 13px; 
                          line-height: 18px;}

nav .sequence-pagination div.logo,
body.sub div.logo { top: 20%;}



nav .sequence-pagination div.logo h1,
body.sub div.logo h1 a { font-size: 38px;
                                       line-height: 35px;
                                       letter-spacing: 15px; }


body.sub div.logo h1 { width: 100%;
                       margin-left: 0%; 
                       margin-right: 0%;
	  	       height: 86px;
                       padding: 4% 0 0 0;
                       padding-left: 10px; }


#sequence h2 { font-size: 24px; 
               line-height: 18px;  }


@-moz-document url-prefix() { 
  #sequence h2 {
      line-height: 16px;
  }
}



#sequence .links,
#sequence .animate-in .links,
#sequence .animate-out .links {  top: 13%;  }


.vita div.links { width: 90%; 
	    max-width: 90%;
            margin: 0 auto;
            text-align: center;}


.vita div.links div { width: 48%;
    height: auto;
    text-align: center; 
    margin: 10px 0 0 0;   }



body.sub nav { width: 94%;
               padding: 0%;
      	       margin-top: 80px;
               padding-bottom: 5px;
                }


body.sub nav ul { text-align: center; }


body.sub nav li {  padding: 0;
                   margin: 0;
                   height: 10px }



div.fotos { width: 80%;
            text-align: center;
            margin: 0 auto;
            margin-top: 0;  }



body.sub h2 { font-size: 20px;
              line-height: 20px; }

.fotos div { width: 90%;
             
             max-width: 200px;
	     text-align: center;
             margin: 0 auto; 
             padding: 12px; }


.fotos.w1000 img { width: 70%;
                   max-width: 600px; }


.fotos div.square,
.fotos div.portrait  { float: none; 
                       width: 90%;
                       max-width: 200px; 
		       }


.fotos div.portrait { width: 66%;
                      max-width: 200px; }


.fotos div.wide { width: 86%;
                  max-width: 600px;  }


.fotos div a:after { left: 0%;
                     right: 0%; }

#foto-text { margin: 0 auto;
             text-align: center;
             padding: 20px 0 30px 0; 
             width: 80%; }


#foto-text h2 { line-height: 20px;
                font-size: 20px; 
                padding: 0 0 10px 0;
                display: block;  }

#foto-text a img { width: 90%;
                   height: auto; }



div.gifs2 { padding: 10px 20px; 
            width: auto;
            height: auto;
            max-width: 350px;
            display: inline-block; 
            margin: 0 auto;
            text-align: center; }

div.gifs2 img { max-width: 350px;  }



hr { display: none; }

#footer { height: 40px; 
          padding: 15px 0 15px 0; }

#footer p { font-size: 12px; 
            line-height: 20px;
            letter-spacing: 1px; }


}



@media all and (max-width: 768px) and (orientation: portrait)  {



h1 { width: 80%;                        
     margin-left: 10%; 
                       margin-right: 10%;
                       padding-left: 10px;
                        }


#sequence h2 { font-size: 32px; 
               line-height: 28px;  }

#sequence h2 a { line-height: 28px;}



body.sub div.logo h1 { height: 220px;
                       height: 260px; /* height of menu */
                       padding-left: 0px;
                        }


body.sub nav { border-bottom: none; }



body.sub nav ul { text-align: center; }


body.sub nav li {  padding: 0;
                   margin: 0;
                   height: 10px }

body.sub nav li a { display: block;
                 height: 13px;
               width: 90%;
               min-width: 350px;
               margin: 0 auto;
               text-align: center;
               padding: 4px 16px 1px 16px;}


body.sub h2 { display: none; }


}


@media all and (max-width: 736px) and (orientation: landscape) {




#sequence .animate-in .links h2 {  position: absolute;
                                top: 19%; 
                                width: 80%; 
                                left: 10%;
                                right: 10%; }


#sequence h2 a { font-size: 22px; 
               line-height: 28px; }

#sequence h2 br { display: none; }


#sequence h2 a:after { content: ' ::' }



}



@media all and (max-width: 384px) {


nav .sequence-pagination div.logo h1,
body.sub div.logo h1 a { font-size: 30px;
                                       line-height: 28px;
                                       letter-spacing: 10px; }

body.sub nav { top: 10px; }

body.sub nav li a { min-width: 200px; }

#main_menu:hover, #main_menu:active {  background: #212121;
                                       z-index: 9000 } 

body.sub #main_menu a:hover, 
body.sub #main_menu a:active {  background: none; } 

nav .sequence-pagination div.logo { top: 25%;  }

#sequence .links,
#sequence .animate-in .links,
#sequence .animate-out .links {  top: 11%; }

#sequence h2 { font-size: 24px; 
               line-height: 18px; }

#sequence p { width: 95%; 
                          font-size: 13px; 
                          line-height: 16px;}

.no-mobile { display: none; }




}



@media all and (max-width: 384px) and (orientation: portrait)  {

.no-mobile { display: none; }


nav {  height: 90px;
       top: 2%; }


nav .sequence-pagination div.logo h1,
body.sub div.logo h1 a { font-size: 30px;
                         line-height: 30px;
                         letter-spacing: 2px; }

#footer  { padding: 5px 0; }

}


@media all and (min-width: 1600px) {

.no-small { display: inline; }



}



@media all and (min-width: 1919px) {

.large-only { display: inherit; }

}