@charset "UTF-8";

/* CSS Document anz raangs graphic media portfolio site */



/* colors */

a:link { text-decoration: none; color : #ed1871;
}

a:active { text-decoration: none; color : #9f004b;
}

a:visited { text-decoration: none; color : #9f004b;
}

a:hover { text-decoration: none; color : #9f004b;
		 
}
a[href*="mailto"]:hover
{
  cursor: url("email.gif"), pointer;
}


/*lay out */

#hedfix {
	position:fixed; 
	right:-20%;
	top:2%; 
	width:100%;
	margin:2%;
	z-index: 1;
	transform: scale(0.4)

}

#info {
  float: left;
  width: 40% ;
  margin-top:15%;  
}

#content {
  float: right;
  width: 60%;
  margin-top:15%;
}

#bar {
  position: fixed;
  right: 0;
  width: 60%;
  margin-top:17%;
}


#center {
	position:relative;
    margin-top: 15%; 
    margin-left:45%;
    z-index: 0;
}

.footie {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  opacity: 0;
}




/* positioning of image elements */

.itema {	
 	position: relative;
	margin-top:15%;
	margin-left:-30%;
	transform: scale(0.3);

}

.itemb{
 	position: relative;
	margin-top:0%;
	margin-left:-18%;
	transform: scale(0.3);
	
}

.itembb{
 	position: relative;
	margin-top:0%;
	margin-left:-17%;
	transform: scale(0.3);
	
}

.itemc{
 	position: relative;
  	white-space: nowrap; 
	margin-top:-6%;
	margin-left:-17%;
	transform: scale(0.3);
}

.itemd{
 	position: relative;
	margin-top:-5%;
	margin-left:-17%;
	transform: scale(0.3);
}

.iteme {
	position: relative;
	margin-top: 0%;
	margin-left:43%;
}

.itemf {
 	position: relative;
 	margin-top:-11%;
	margin-left:0%;
	transform: scale(0.3);
	
}
.itemg {
 	position: relative;
 	margin-top:0%;
	margin-left:0%;
	transform: scale(0.3);
	
}

	
/* typography */	


.lili{

	margin-top:5%;
	margin-right:33%;
	text-align:right;
	line-height: 150%;
	font-family: 'Lato', sans-serif;
	color:#ed1871;
	font-size:18px;	
}

.texn{
	margin-top:6%;
	margin-left:40%;
		line-height: 110%;
	font-family: 'Lato', sans-serif;
	color:#9f004b;
	font-size:20px;	
}
.texe{
	margin-top:13%;
	margin-left:40%;
		line-height: 110%;
	font-family: 'Lato', sans-serif;
	color:#ed1871;
	font-size:20px;	
}
.centex{
	font-family: 'Lato', sans-serif;
	color:#ed1871;
	font-size:24px;	
}



p{
	margin-right:320px;
	text-align:right;
	font-family: 'Lato', sans-serif;
	color:#ed1871;
	font-size:24px;	
}


h2{
	margin-top:75px;
	margin-left:300px;
	font-family: 'Lato', sans-serif;
	color:#ff0b75;
	font-size:24px;	
}

h3{
	margin-left:300px;
	font-family: 'Lato', sans-serif;
	color:#bc014c;
	font-size:24px;	
}

/* Slideshow carousel from Bao Dang on Codepen */

ul {
    padding: 0;
    list-style-type: none;
}

.carousel_container
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	overflow: hidden;	
}

.carousel_items
{
	position: relative;
	cursor: default !important;
}

.carousel_item
{
	float:left;
  border: 0px solid #fff;
}

.item_arrows
{
	position: absolute;
	top: 240px;
	width: 100%;
  height: 1px;
	z-index: 5000;
  border: 0px solid #ed1871;
}

.item_arrow
{
	position: absolute;
	width: 30px;
	height: 50px;
    margin-bottom: 1px;
	float: left;
}

.nav_dot:hover,
.item_arrow:hover
{
	cursor: pointer;
}

.item_next
{
  left: 470px;
  background-color: #00;
}

.item_prev
{
  left: 0px;
  background-color: #00;
}

.fa
{
	color: #ed1871;
	margin-left: 10px;
	margin-top: 10px;	
}

.nav_dots
{
	position: relative;
	bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	z-index: 50001;
  border: 1px solid #fff00;
}

.nav_dot
{
	width: 6px;
	height: 6px;
	float: left;
	border: 1px solid #ed1871;
	background-color: #ed1871;
	margin-left: 15px;	
	border-radius: 50%;    
}


.grab 
{
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.grabbing
{
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

/* end slideshow*/


/*mobile */

@media (orientation: portrait) {

#hedfix {
	transform: scale(0.4);
}


 #content {    
	float:left;
  	width:100%;
  	margin-top:15%;
  }
  
#bar {
  margin-top:20%;
}

  
#info {
	width:100%;
	margin-left:-20%;
	margin-top:40%;
}
	
.lili{
	visibility: hidden;
}
	
.itema {	
	margin-top:25%;
	transform: scale(0.4);

}

.itemb{
	transform: scale(0.4);
	
}

.itembb{
	transform: scale(0.4);
	
}

.itemc{
	transform: scale(0.4);
}

.itemd{
	transform: scale(0.4);
}


.itemf {
	transform: scale(0.4);
	
}
.itemg {
	transform: scale(0.4);


}