/* 
  sorenstoen.com v6.0 stylesheet 
  created 20 january 2016
  updated 01 february 2016
  created by www.souldesigngroup.com
  copyright soren stoen 	
*/

/*********** UNIVERSAL */
*, html, body {
  margin:0;
  padding:0;
  font-family:'Orator Std', 'Titillium Web', sans-serif;
  font-size:14px;
  color:#333;
}

body {
  width:100%;
  color: #666;
}

h1 {
  width:auto;
  padding:0 0 0 100px;
  background-color:#fcfcfc;
  font-family:'StMarieWebThin', 'StMarieWebSCThin';
  font-size:24px;
  font-weight:100;
  font-style:normal;
  color:#333;
}

h2 {
  margin:40px 0 12px 0;
  font-family:'Orator Std', 'Titillium Web', sans-serif;
  font-weight:bold;
  font-style:normal;
  font-variant:small-caps;
}

p {
  line-height:1.5em;
  margin:0 0 10px 0;
}

a {text-decoration:none; outline:0; color:#333;}
a:visited {color:#555;}
a:hover {color:#999;}
a:active {color:#C9ECEB;}

img {
  border:none;
  margin:0;
  padding:0;
}

div {margin:0; padding:0;}

.clear {clear:both;}

ul {list-style:none; margin-bottom:25px; padding-left:5px; font-variant:small-caps;}
li {margin-bottom:10px;}

blockquote {
  margin:40px 0 10px 0;
  font-family:'StMarieWebThin', 'StMarieWebSCThin';
  font-size:30px;
  font-weight:400;
  font-style:italic;	
}

blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}


footer {
  margin:0 0 40px 5%;
  color:#999;
}


/********************** HEADER & NAV */
header {}

#logo-container {
  width:275px;
  height:320px;
  margin:-310px 0 0 0;
  background:url(assets/img/univ/side-arrow.png) top left no-repeat;	
  position:fixed;
  top:100%;
  left:0;
  z-index:99;
}

header #logo {
  width:140px;
  height:200px;
  margin:-155px 0 0 0;
  position:fixed;
  top:100%;
  left:24px;
  background:url(assets/img/univ/&-octin-prison.png) no-repeat;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;     
}

header #logo.swappy {
  width:120px;
  height:160px;
  margin:-134px 0 0 0;
  position:fixed;
  top:100%;
  left:10px;
  background:url(assets/img/univ/sstoen-sm.png) no-repeat;
}

nav {
  width:100%;
  height:30px;
  margin:-30px 0 0 -100px;
  padding:0 20px 0 0;
  border-top:1px solid #dedede; 
  border-right:100px solid #CCC;
  background-color:#FFF;
  position:fixed;
  top:100%;
  right:0;
  text-align:right;
  display:inline-block;  
  text-align:right;
  z-index:99;
}

nav a {
  padding:9px 20px;
  font-family:'Titillium Web', 'Orator W01 Medium', sans-serif;
  font-size:11px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;    
}

nav a:hover {color:#000; background:#F6F6F6;}
nav a:active {color:#FFF; background:#E0AFA1; border-top:3px solid #F6F6F6;}

/* #logo:hover ~ nav {border-right:#90B0A3;} ATTEMPT TO MAKE NAV SIDE BAR 


/********************** HOME */
#home {}

#home img {
  width:460px;	
  margin:7% 0 0 -230px;
  position:fixed;
  left:50%;
  z-index:-99
}


/********************** MAIN */
main {
  width:100%;
  position:absolute;
  top:100%;
  background-color:#FFF;
}

#secondary-header {
  width:100%;
  height:30px;
  text-align:right; 
}

#secondary-header img {
  padding:5px 20px;
  border-right:100px solid #CCC;
  background-color:#FFF;
}

.content {padding:0 40% 200px 275px;}


/********************** WHAT */
#what {display:inline-block;}

#what .content {overflow:visible; white-space:nowrap;}

#what img {width:47.5%; margin:5% 5% 0 0;}


/********************** CONTACT */
#contact {background:url(assets/img/univ/bg-sdg.jpg) no-repeat; background-size:100%;}


/********************** RANDOM */
#random img {width:100%;}

#random-page main{top:0;}

#random p {
  margin:40px 0;
  padding:3px 5px;
  background:#EEF8F9;
}

#random p:hover {background:#F6F6F6;}
#random p:active {background:#E0AFA1;}

#random p a {color:#CCC;}
#random p a:hover {color:#000;}
#random p a:active {color:#FFF;}


/********************************************************** MOBILE */
/* iPhone 6 portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{ 

*, html, body {font-size:12px;}

h1 {
  font-size:32px;
  padding:0 0 0 5%;
}

nav {
  height:35px;
  width:100%;
  margin:-35px 0 0 0;
  padding:0 20px 10px 0;
  border-right:none;
  padding-bottom:10px;
  left:0;
  text-align:center;
}

nav a {
  padding:10px 20px 13px 20px;
  font-size:14px;
}

#logo-container {display:none;}

#home img {
  width:270px;	
  margin:7% 0 0 -135px;
  padding-top:30px;
}

.content {padding:0 5% 100px 5%;}

#secondary-header {display:none;}

}


/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ 
*, html, body {font-size:12px;}

h1 {
  font-size:32px;
  padding:0 0 0 5%;
}

nav {
  height:35px;
  width:100%;
  margin:-35px 0 0 0;
  padding:0 20px 10px 0;
  border-right:none;
  padding-bottom:10px;
  left:0;
  text-align:center;
}

nav a {
  padding:10px 20px 13px 20px;
  font-size:16px;
}

#logo-container {display:none;}

#home img {
  width:190px;	
  margin:2% 0 0 -95px;
}

.content {padding:0 10% 100px 10%;}

#secondary-header {display:none;}

}


/* Tablet Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{
*, html, body {font-size:14px;}

h1 {
  font-size:32px;
  padding:0 0 0 5%;
}

nav {
  width:100%;
  height:35px;
  margin:-35px 0 0 0;
  padding:0 20px 10px 0;
  border-right:none;
  padding-bottom:10px;
}

nav a {
  padding:4px 20px 13px 20px;
  font-size:18px;
}

#home img {
  width:600px;	
  margin:7% 0 0 -300px;
}

.content {padding:0 10% 200px 275px;}

#secondary-header {display:none;}

}


/* Tablet Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{
*, html, body {font-size:18px;}

h1 {
  font-size:32px;
  padding:0 0 0 5%;
}

nav {
  width:100%;
  height:35px;
  margin:-35px 0 0 0;
  padding:0 20px 10px 0;
  border-right:none;
  padding-bottom:10px;
}

nav a {
  padding:4px 20px 13px 20px;
  font-size:18px;
}

#home img {
  width:400px;	
  margin:7% 0 0 -200px;
}

.content {padding:0 10% 200px 275px;}

#secondary-header {display:none;}

}