@font-face {font-family: 'BrandonGrotesqueWeb-Bold';src: url('webfonts/Brandon-Grotesque-Web-Bold.eot');src: url('webfonts/Brandon-Grotesque-Web-Bold.woff2') format('woff2'),url('webfonts/Brandon-Grotesque-Web-Bold.woff') format('woff');}
 
  
@font-face {font-family: 'BrandonGrotesqueWeb-Regular';src: url('webfonts/Brandon-Grotesque-Web-Regular.eot');src: url('webfonts/Brandon-Grotesque-Web-Regular.woff2') format('woff2'),url('webfonts/Brandon-Grotesque-Web-Regular.woff') format('woff');}

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html {
	margin:0;
	padding:0;
    font-size: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}

ol,ul {
	list-style:none;
}


q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{

	background: #000;
	

}

.container{
	position: relative;

}



div { font-family: 'BrandonGrotesqueWeb-Bold'; color: white;  position: center; }

img {padding: 20px;}

a:link {
	color: white;
	text-decoration: none;
    
}
a:hover {
	text-decoration: none;
    border-bottom: 3px solid white;
}
.collapsible {
	font-family: 'BrandonGrotesqueWeb-Bold';
    background-color: transparent;
    color: white;
    border: none;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 3px solid transparent;
 
}

.active, .collapsible:hover {
   
    text-decoration: none;
    border-bottom: 3px solid white;
}

.content {
	
    
    display: none;
    overflow: hidden;
    text-align: center;
    /*letter-spacing: .4em;*/
    background-color: rgba(0,0,0,0.7);
    margin-left: 5%;
    margin-right: 5%;
    
}

.content2 {
	
        
        display: none;
        overflow: hidden;
        text-align: center;
        /*letter-spacing: .4em;*/
        background-color: transparent;
        
    }  
        
        



.logo {
    z-index: 1001;
    top: 100px;
    margin: 0;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



h1 {
	font-size: 2.5em;
    
    background-color: transparent;
    letter-spacing: 0.3em;
    
}

h2 {
	font-size: 2em;
    
    background-color: transparent;
    letter-spacing: 0.3em;
    
}

p {
	font-family: 'BrandonGrotesqueWeb-Regular';
    font-size: 1.5rem;
	font-weight: normal;
	font-style: normal;
    max-width: 32em;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;

}
h4 {
	font-size: 2em;
    line-height: 0.1em;
    background-color: transparent;
}
h5 {
	letter-spacing: .03em;
	text-transform: uppercase;
	font: .6em BrandonGrotesqueWeb-Regular;
}
.impres {
    font-family: 'BrandonGrotesqueWeb-Regular';
    background-color: transparent;
    color: white;
    border: none;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.cb-slideshow { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 48s linear infinite 0s;
    -moz-animation: imageAnimation 48s linear infinite 0s;
    -o-animation: imageAnimation 48s linear infinite 0s;
    -ms-animation: imageAnimation 48s linear infinite 0s;
    animation: imageAnimation 48s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 48s linear infinite 0s;
    -moz-animation: titleAnimation 48s linear infinite 0s;
    -o-animation: titleAnimation 48s linear infinite 0s;
    -ms-animation: titleAnimation 48s linear infinite 0s;
    animation: titleAnimation 48s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BrandonGrotesqueWeb-Bold';
    background-color: transparent;
    color: white;
    
    letter-spacing: .2em;
    padding: 0;
    line-height: 0px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../assets/MARS1_Ring_ARGYRE.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../assets/MARS2_Ring_THYLE.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../assets/MARS3_Ring_THYLE-II.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../assets/MARS4_Ring_AERIA.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../assets/MARS5_Ring_OPHYE.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../assets/MARS6_Bangle_ICARIA.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(7) span { 
    background-image: url(../assets/MARS7_Pendant_THARSIS.jpg);
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s; 
}
.cb-slideshow li:nth-child(8) span { 
    background-image: url(../assets/MARS8_Studs_ZEPHYRIA.jpg);
    -webkit-animation-delay: 42s;
    -moz-animation-delay: 42s;
    -o-animation-delay: 42s;
    -ms-animation-delay: 42s;
    animation-delay: 42s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(7) div { 
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s; 
}
.cb-slideshow li:nth-child(8) div { 
    -webkit-animation-delay: 42s;
    -moz-animation-delay: 42s;
    -o-animation-delay: 42s;
    -ms-animation-delay: 42s;
    animation-delay: 42s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    6% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    6% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    6% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    6% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    6% { opacity: 1;
         animation-timing-function: ease-out; }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    6% { opacity: 1 }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    6% { opacity: 1 }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    6% { opacity: 1 }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    6% { opacity: 1 }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    6% { opacity: 1 }
    13% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}